[ivette] Helpful message when there is no function to display

ivette/src/dome/renderer/frame/sidebars.tsx

@@ -35,7 +35,7 @@ import { Badge } from 'dome/controls/icons';
 import { Label } from 'dome/controls/labels';
 import { classes } from 'dome/misc/utils';
 import { Hbox } from 'dome/layout/boxes';
-import { IconButton } from 'dome/controls/buttons';
+import { IconButton, Button } from 'dome/controls/buttons';
 
 import './style.css';
 
@@ -132,7 +132,21 @@ export function Section(props: SectionProps): JSX.Element | null {
   const icon = state ? 'TRIANGLE.DOWN' : 'TRIANGLE.RIGHT';
 
   const { enabled = true, disabled = false, children } = props;
-  if (disabled || !enabled || React.Children.count(children) === 0) return null;
+  if (disabled || !enabled) return null;
+
+  const noChildContent =
+    <div className='dome-xSideBarSection-content'>
+      <label className='dome-xSideBarSection-info'>
+        {'There is no function to display. Maybe you can change ' +
+         'the filtering options.'}
+      </label>
+      <Button
+        icon='TUNINGS'
+        label='Functions filtering options'
+        onClick={props.onContextMenu}
+        visible={!(props.onContextMenu === undefined)}
+      />
+    </div>;
 
   const visible = unfold ?? state;
   const maxHeight = visible ? 'max-content' : 0;
@@ -149,12 +163,13 @@ export function Section(props: SectionProps): JSX.Element | null {
         />
         <IconButton
           icon='TUNINGS'
+          title={'Functions filtering options'}
           onClick={props.onContextMenu}
           visible={!(props.onContextMenu === undefined)}
         />
       </Hbox>
       <div className='dome-xSideBarSection-content' style={{ maxHeight }}>
-        {children}
+        {React.Children.count(children) === 0 ? noChildContent : children}
       </div>
     </div>
   );

ivette/src/dome/renderer/frame/style.css

@@ -155,6 +155,23 @@
     transition: max-height 250ms ease-in-out ;
 }
 
+.dome-xSideBarSection-content > .dome-xBoxButton {
+  margin-left: 20px;
+  margin-right: 10px;
+  margin-top: 7px;
+  color: var(--info-text);
+  fill: var(--info-text);
+  display: flex;
+}
+
+.dome-xSideBarSection-info {
+  color: var(--info-text-discrete);
+  font-style: italic;
+  padding-left: 20px;
+  padding-right: 10px;
+  display: block;
+}
+
 /* -------------------------------------------------------------------------- */
 /* --- SideBar Items                                                      --- */
 /* -------------------------------------------------------------------------- */