feat(react/floating_buttons): port toc

apps/client/src/widgets/FloatingButtons.tsx

@@ -49,6 +49,13 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
             && (!note.isProtected || protected_session_holder.isProtectedSessionAvailable())
             && !options.is("databaseReadonly")
             && await noteContext?.isReadOnly()
+    },
+    {
+        component: ShowTocWidgetButton,
+        isEnabled: ({ note, noteContext }) => 
+            note.type === "text"
+            && noteContext?.viewScope?.viewMode === "default"
+            && !!noteContext.viewScope?.tocTemporarilyHidden
     }
 ];
 
@@ -94,6 +101,11 @@ export default function FloatingButtons() {
             setRefreshCounter(refreshCounter + 1);
         }
     });
+    useTriliumEvent("reEvaluateTocWidgetVisibility", ({ noteId }) => {
+        if (noteId === note?.noteId) {
+            setRefreshCounter(refreshCounter + 1);
+        }
+    });
     
     // Manage the list of items
     const noteMime = useNoteProperty(note, "mime");
@@ -170,6 +182,19 @@ function EditButton({ noteContext }: FloatingButtonContext) {
     />
 }
 
+function ShowTocWidgetButton({ noteContext }: FloatingButtonContext) {
+    return <ActionButton
+        text={t("show_toc_widget_button.show_toc")}
+        icon="bx bx-tn-toc"
+        onClick={() => {
+            if (noteContext?.viewScope && noteContext.noteId) {
+                noteContext.viewScope.tocTemporarilyHidden = false;
+                appContext.triggerEvent("showTocWidget", { noteId: noteContext.noteId });
+            }
+        }}
+    />
+}
+
 /**
  * Show button that displays floating button after click on close button
  */

apps/client/src/widgets/buttons/show_toc_widget_button.ts

@@ -1,62 +0,0 @@
-import OnClickButtonWidget from "./onclick_button.js";
-import appContext from "../../components/app_context.js";
-import attributeService from "../../services/attributes.js";
-import { t } from "../../services/i18n.js";
-import LoadResults from "../../services/load_results.js";
-import type { AttributeRow } from "../../services/load_results.js";
-
-export default class ShowTocWidgetButton extends OnClickButtonWidget {
-    isEnabled(): boolean {
-        return Boolean(super.isEnabled() && this.note && this.note.type === "text" && this.noteContext?.viewScope?.viewMode === "default");
-    }
-
-    constructor() {
-        super();
-
-        this.icon("bx-tn-toc")
-            .title(t("show_toc_widget_button.show_toc"))
-            .titlePlacement("bottom")
-            .onClick(() => {
-                if (this.noteContext?.viewScope && this.noteId) {
-                    this.noteContext.viewScope.tocTemporarilyHidden = false;
-                    appContext.triggerEvent("showTocWidget", { noteId: this.noteId });
-                }
-                this.toggleInt(false);
-            });
-    }
-
-    async refreshWithNote(): Promise<void> {
-        if (this.noteContext?.viewScope) {
-            this.toggleInt(this.noteContext.viewScope.tocTemporarilyHidden);
-        }
-    }
-
-    async reEvaluateTocWidgetVisibilityEvent({ noteId }: { noteId: string }): Promise<void> {
-        if (noteId === this.noteId) {
-            await this.refresh();
-        }
-    }
-
-    async entitiesReloadedEvent({ loadResults }: { loadResults: LoadResults }): Promise<void> {
-        if (this.noteId && loadResults.isNoteContentReloaded(this.noteId)) {
-            await this.refresh();
-        } else if (
-            loadResults
-                .getAttributeRows()
-                .find((attr: AttributeRow) =>
-                    attr.type === "label" &&
-                    (attr.name?.toLowerCase().includes("readonly") || attr.name === "toc") &&
-                    this.note &&
-                    attributeService.isAffecting(attr, this.note)
-                )
-        ) {
-            await this.refresh();
-        }
-    }
-
-    async noteTypeMimeChangedEvent({ noteId }: { noteId: string }): Promise<void> {
-        if (this.isNote(noteId)) {
-            await this.refresh();
-        }
-    }
-}

apps/client/src/widgets/toc.ts

@@ -475,6 +475,7 @@ export default class TocWidget extends RightPanelWidget {
         if (this.noteId === noteId) {
             await this.refresh();
             this.triggerCommand("reEvaluateRightPaneVisibility");
+            appContext.triggerEvent("reEvaluateTocWidgetVisibility", { noteId: this.noteId });
         }
     }