feat(note_icon): add message if no results

apps/client/src/translations/en/translation.json

@@ -771,7 +771,8 @@
     "filter": "Filter",
     "filter-none": "All icons",
     "filter-default": "Default icons",
-    "icon_tooltip": "{{name}}\nIcon pack: {{iconPack}}"
+    "icon_tooltip": "{{name}}\nIcon pack: {{iconPack}}",
+    "no_results": "No icons found."
   },
   "basic_properties": {
     "note_type": "Note type",

apps/client/src/widgets/note_icon.css

@@ -72,6 +72,14 @@ div.note-icon-widget {
     height: 1em;
 }
 
+.note-icon-widget {
+    .no-results {
+        padding: 20px;
+        text-align: center;
+        color: var(--muted-text-color);
+    }
+}
+
 body.experimental-feature-new-layout {
     .note-icon-widget button.note-icon {
         --input-focus-outline-color: var(--note-icon-hover-background-color);

apps/client/src/widgets/note_icon.tsx

@@ -174,13 +174,17 @@ function NoteIconList({ note, dropdownRef }: {
                     dropdownRef?.current?.hide();
                 }}
             >
-                {(iconData?.icons ?? []).map(({ id, terms, iconPack }) => (
-                    <span
-                        key={id}
-                        class={id}
-                        title={t("note_icon.icon_tooltip", { name: terms?.[0] ?? id, iconPack })}
-                    />
-                ))}
+                {iconData?.icons?.length ? (
+                    (iconData?.icons ?? []).map(({ id, terms, iconPack }) => (
+                        <span
+                            key={id}
+                            class={id}
+                            title={t("note_icon.icon_tooltip", { name: terms?.[0] ?? id, iconPack })}
+                        />
+                    ))
+                ) : (
+                    <div class="no-results">{t("note_icon.no_results")}</div>
+                )}
             </div>
         </>
     );