From b20ffdf7db72066d8ed5688f21bd836bb57c0b94 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 21 Aug 2025 15:05:55 +0300
Subject: [PATCH] chore(react/note_icon): sort by count

---
 apps/client/src/widgets/note_icon.ts.bak | 28 ------------------------
 apps/client/src/widgets/note_icon.tsx    | 13 ++++++++++-
 2 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/apps/client/src/widgets/note_icon.ts.bak b/apps/client/src/widgets/note_icon.ts.bak
index e71a6b83c..52ff60247 100644
--- a/apps/client/src/widgets/note_icon.ts.bak
+++ b/apps/client/src/widgets/note_icon.ts.bak
@@ -25,21 +25,6 @@ export default class NoteIconWidget extends NoteContextAwareWidget {
                 await attributeService.setLabel(this.noteId, this.note.hasOwnedLabel("workspace") ? "workspaceIconClass" : "iconClass", clazz);
             }
         });
-
-        this.$iconSearch = this.$widget.find("input[name='icon-search']");
-        this.$iconSearch.on("input", () => this.renderDropdown());
-
-        this.$widget.on("show.bs.dropdown", async () => {
-            const { categories } = (await import("./icon_list.js")).default;
-
-            this.$iconCategory.empty();
-
-            for (const category of categories) {
-                this.$iconCategory.append($("<option>").text(category.name).attr("value", category.id));
-            }
-
-            this.$iconSearch.val("");
-        });
     }
 
     async refreshWithNote(note: FNote) {
@@ -81,19 +66,6 @@ export default class NoteIconWidget extends NoteContextAwareWidget {
 
         const search = String(this.$iconSearch.val())?.trim()?.toLowerCase();
 
-        if (iconToCount) {
-            filteredIcons.sort((a, b) => {
-                const countA = iconToCount[a.className ?? ""] || 0;
-                const countB = iconToCount[b.className ?? ""] || 0;
-
-                return countB - countA;
-            });
-        }
-
-        for (const icon of filteredIcons) {
-            this.$iconList.append(this.renderIcon(icon));
-        }
-
         this.$iconSearch.focus();
     }
 
diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx
index 48b37e0ba..2709003f1 100644
--- a/apps/client/src/widgets/note_icon.tsx
+++ b/apps/client/src/widgets/note_icon.tsx
@@ -56,11 +56,11 @@ function NoteIconList() {
 
     useEffect(() => {
         async function loadIcons() {
-            const iconToCount = await getIconToCountMap();
             if (!fullIconData) {
                 fullIconData = (await import("./icon_list.js")).default;
             }
 
+            // Filter by text and/or category.
             let icons: Icon[] = fullIconData.icons;
             if (search || categoryId) {
                 icons = icons.filter((icon) => {
@@ -78,6 +78,17 @@ function NoteIconList() {
                 });
             }
 
+            // Sort by count.
+            const iconToCount = await getIconToCountMap();
+            if (iconToCount) {
+                icons.sort((a, b) => {
+                    const countA = iconToCount[a.className ?? ""] || 0;
+                    const countB = iconToCount[b.className ?? ""] || 0;
+
+                    return countB - countA;
+                });
+            }
+
             setIconData({
                 iconToCount,
                 icons,