From a106510924e33cebabc4f93c59c4aba0f22ea631 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 15:50:14 +0300 Subject: [PATCH] chore(react/note_icon): react to icon changes --- apps/client/src/widgets/note_icon.ts.bak | 14 ------------ apps/client/src/widgets/note_icon.tsx | 20 ++++++++--------- apps/client/src/widgets/react/hooks.tsx | 28 +++++++++++++++++++++--- 3 files changed, 34 insertions(+), 28 deletions(-) diff --git a/apps/client/src/widgets/note_icon.ts.bak b/apps/client/src/widgets/note_icon.ts.bak index bc201ccc1..c7b3a6aa5 100644 --- a/apps/client/src/widgets/note_icon.ts.bak +++ b/apps/client/src/widgets/note_icon.ts.bak @@ -20,20 +20,6 @@ export default class NoteIconWidget extends NoteContextAwareWidget { this.$iconList = this.$widget.find(".icon-list"); } - async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (this.noteId && loadResults.isNoteReloaded(this.noteId)) { - this.refresh(); - return; - } - - for (const attr of loadResults.getAttributeRows()) { - if (attr.type === "label" && ["iconClass", "workspaceIconClass"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.note)) { - this.refresh(); - break; - } - } - } - async renderDropdown() { this.$iconList.empty(); diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx index 3f6e8b191..3eaeaaced 100644 --- a/apps/client/src/widgets/note_icon.tsx +++ b/apps/client/src/widgets/note_icon.tsx @@ -1,7 +1,7 @@ import Dropdown from "./react/Dropdown"; import "./note_icon.css"; import { t } from "i18next"; -import { useNoteContext } from "./react/hooks"; +import { useNoteContext, useNoteLabel } from "./react/hooks"; import { useCallback, useEffect, useRef, useState } from "preact/hooks"; import server from "../services/server"; import type { Category, Icon } from "./icon_list"; @@ -28,26 +28,24 @@ let iconToCountCache!: Promise | null; export default function NoteIcon() { const { note, viewScope } = useNoteContext(); - const [ icon, setIcon ] = useState("bx bx-empty"); + const [ icon, setIcon ] = useState(); + const [ iconClass ] = useNoteLabel(note, "iconClass"); + const [ workspaceIconClass ] = useNoteLabel(note, "workspaceIconClass"); - const refreshIcon = useCallback(() => { - if (note) { - setIcon(note.getIcon()); - } - }, [ note ]); - - useEffect(refreshIcon, [ note ]); + useEffect(() => { + setIcon(note?.getIcon()); + }, [ note, iconClass, workspaceIconClass ]); return ( - + { note && } ) } diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 9269e0605..26c41eee0 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -1,5 +1,5 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; -import appContext, { BeforeUploadListener, EventData, EventNames } from "../../components/app_context"; +import { EventData, EventNames } from "../../components/app_context"; import { ParentComponent } from "./react_utils"; import SpacedUpdate from "../../services/spaced_update"; import { OptionNames } from "@triliumnext/commons"; @@ -9,8 +9,7 @@ import Component from "../../components/component"; import NoteContext from "../../components/note_context"; import { ReactWrappedWidget } from "../basic_widget"; import FNote from "../../entities/fnote"; -import froca from "../../services/froca"; -import toast from "../../services/toast"; +import attributes from "../../services/attributes"; type TriliumEventHandler = (data: EventData) => void; const registeredHandlers: Map[]>> = new Map(); @@ -316,3 +315,26 @@ export function useNoteProperty(note: FNote | null | unde return note[property]; } + +export function useNoteLabel(note: FNote | undefined | null, labelName: string): [string | undefined, (newValue: string) => void] { + const [ labelValue, setNoteValue ] = useState(note?.getLabelValue(labelName)); + + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + for (const attr of loadResults.getAttributeRows()) { + if (attr.type === "label" && attr.name === labelName && attributes.isAffecting(attr, note)) { + setNoteValue(attr.value ?? null); + } + } + }); + + const setter = useCallback((value: string | undefined) => { + if (note) { + attributes.setLabel(note.noteId, labelName, value) + } + }, [note]); + + return [ + labelValue, + setter + ] as const; +} \ No newline at end of file