🔧 Add header to icon picker

src/common/icon-theme-registry.ts

@@ -58,6 +58,9 @@ export class IconThemeRegistry {
   /** This is the fallback icon theme that is used if no valid icon theme is selected. */
   private fallbackTheme: IIconTheme = new FallbackTheme();
 
+  /** The directory where the user's icon themes are stored. */
+  private _userIconThemeDirectory = '';
+
   /**
    * This is a singleton class. The constructor is private. Use `getInstance` to get the
    * instance of this class.
@@ -73,6 +76,7 @@ export class IconThemeRegistry {
       window.api.getUserIconThemeDirectory(),
       window.api.getUserIconThemes(),
     ]).then(([directory, themes]) => {
+      this._userIconThemeDirectory = directory;
       for (const theme of themes) {
         this.iconThemes.set(theme, new UserIconTheme(directory, theme));
       }
@@ -88,6 +92,15 @@ export class IconThemeRegistry {
     return IconThemeRegistry.instance;
   }
 
+  /**
+   * Use this method to get the directory where the user's icon themes are stored.
+   *
+   * @returns The directory where the user's icon themes are stored.
+   */
+  get userIconThemeDirectory(): string {
+    return this._userIconThemeDirectory;
+  }
+
   /**
    * Use this method to get all available icon themes.
    *

src/renderer/editor/properties/icon-picker.ts

@@ -80,7 +80,18 @@ export class IconPicker extends EventEmitter {
     // template below. The data object contains an array of objects with the keys `name`
     // and `key`. The `name` is the display name of the theme and the `key` is the key
     // that is used to identify the theme in the IconThemeRegistry.
-    const data: { themes: { name: string; key: string }[] } = { themes: [] };
+    const data = {
+      heading: 'Select an Icon',
+      subheading:
+        'You can add your own icon collections by putting a folder with icons into %1. Learn more <a %2>here</a>.'
+          .replace('%1', IconThemeRegistry.getInstance().userIconThemeDirectory)
+          .replace(
+            '%2',
+            'href="https://github.com/kando-menu/kando/blob/main/docs/configuring.md" target="_blank"'
+          ),
+
+      themes: new Array<{ name: string; key: string }>(),
+    };
     const themes = IconThemeRegistry.getInstance().getThemes();
     themes.forEach((theme, key) => {
       data.themes.push({ name: theme.name, key });
@@ -271,7 +282,7 @@ export class IconPicker extends EventEmitter {
               }
             });
           },
-          { root: scrollbox, delay: 100 }
+          { root: scrollbox, delay: 250, rootMargin: '250px' }
         );
 
         // Observe all icons in the grid. We get the icons by querying the grid for all

src/renderer/editor/properties/templates/icon-picker.hbs

@@ -9,6 +9,9 @@
 // SPDX-License-Identifier: MIT
 }}
 
+<div class="fs-1 kando-font">{{heading}}</div>
+<div class="fs-5 kando-font mb-3">{{{subheading}}}</div>
+
 <div class='d-flex'>
   <input type="text" class="fs-3 kando-font form-control flex-grow-1 me-3" placeholder="Search Icons..." id="kando-properties-icon-filter" />
   <select class="form-select fs-3 kando-font form-control" id="kando-properties-icon-theme-select">
@@ -18,7 +21,7 @@
   </select>
 </div>
 
-<div class='scrollbox mx-2' style="height: 35vh;">
+<div class='scrollbox mx-2' style="height: 30vh;">
   <div class="scrollbox-content">
     <div id="kando-properties-icon-picker-grid" class="justify-content-start"></div>
   </div>