chore(react/note_icon): reset to default icon

apps/client/src/widgets/note_icon.ts.bak

@@ -1,50 +0,0 @@
-import { t } from "../services/i18n.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import attributeService from "../services/attributes.js";
-import server from "../services/server.js";
-import type FNote from "../entities/fnote.js";
-import type { EventData } from "../components/app_context.js";
-import type { Icon } from "./icon_list.js";
-import { Dropdown } from "bootstrap";
-
-export default class NoteIconWidget extends NoteContextAwareWidget {
-
-    private dropdown!: bootstrap.Dropdown;
-    private $icon!: JQuery<HTMLElement>;
-    private $iconList!: JQuery<HTMLElement>;
-    private $iconCategory!: JQuery<HTMLElement>;
-    private $iconSearch!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$icon = this.$widget.find("button.note-icon");
-        this.$iconList = this.$widget.find(".icon-list");
-    }
-
-    async renderDropdown() {
-        this.$iconList.empty();
-
-        if (this.getIconLabels().length > 0) {
-            this.$iconList.append(
-                $(`<div style="text-align: center">`).append(
-                    $(`<button class="btn btn-sm">${t("note_icon.reset-default")}</button>`).on("click", () =>
-                        this.getIconLabels().forEach((label) => {
-                            if (this.noteId) {
-                                attributeService.removeAttributeById(this.noteId, label.attributeId);
-                            }
-                        })
-                    )
-                )
-            );
-        }
-
-
-        this.$iconSearch.focus();
-    }
-
-    getIconLabels() {
-        if (!this.note) {
-            return [];
-        }
-        return this.note.getOwnedLabels().filter((label) => ["workspaceIconClass", "iconClass"].includes(label.name));
-    }
-}

apps/client/src/widgets/note_icon.tsx

@@ -2,13 +2,14 @@ import Dropdown from "./react/Dropdown";
 import "./note_icon.css";
 import { t } from "i18next";
 import { useNoteContext, useNoteLabel } from "./react/hooks";
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import server from "../services/server";
 import type { Category, Icon } from "./icon_list";
 import FormTextBox from "./react/FormTextBox";
 import FormSelect from "./react/FormSelect";
 import FNote from "../entities/fnote";
 import attributes from "../services/attributes";
+import Button from "./react/Button";
 
 interface IconToCountCache {
     iconClassToCountMap: Record<string, number>;
@@ -140,6 +141,22 @@ function NoteIconList({ note }: { note: FNote }) {
                     }
                 }}
             >
+                {getIconLabels(note).length > 0 && (
+                    <div style={{ textAlign: "center" }}>
+                        <Button
+                            text={t("note_icon.reset-default")}
+                            onClick={() => {
+                                if (!note) {
+                                    return;
+                                }
+                                for (const label of getIconLabels(note)) {
+                                    attributes.removeAttributeById(note.noteId, label.attributeId);
+                                }
+                            }}                    
+                        />
+                    </div> 
+                )}
+
                 {(iconData?.icons ?? []).map(({className, name}) => (
                     <span class={`bx ${className}`} title={name} />
                 ))}
@@ -155,4 +172,13 @@ async function getIconToCountMap() {
     }
 
     return (await iconToCountCache).iconClassToCountMap;
+}
+
+function getIconLabels(note: FNote) {
+    if (!note) {
+        return [];
+    }
+    return note.getOwnedLabels()
+        .filter((label) => ["workspaceIconClass", "iconClass"]
+        .includes(label.name));
 }