feat(react/floating_buttons): port highlights list

apps/client/src/widgets/FloatingButtons.tsx

@@ -53,9 +53,14 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
     {
         component: ShowTocWidgetButton,
         isEnabled: ({ note, noteContext }) => 
-            note.type === "text"
+            note.type === "text" && noteContext?.viewScope?.viewMode === "default"
-            && noteContext?.viewScope?.viewMode === "default"
             && !!noteContext.viewScope?.tocTemporarilyHidden
+    },
+    {
+        component: ShowHighlightsListWidgetButton,
+        isEnabled: ({ note, noteContext }) => 
+            note.type === "text" && noteContext?.viewScope?.viewMode === "default"
+            && !!noteContext.viewScope?.highlightsListTemporarilyHidden
     }
 ];
 
@@ -101,7 +106,7 @@ export default function FloatingButtons() {
             setRefreshCounter(refreshCounter + 1);
         }
     });
-    useTriliumEvent("reEvaluateTocWidgetVisibility", ({ noteId }) => {
+    useTriliumEvents(["reEvaluateTocWidgetVisibility", "reEvaluateHighlightsListWidgetVisibility"], ({ noteId }) => {
         if (noteId === note?.noteId) {
             setRefreshCounter(refreshCounter + 1);
         }
@@ -195,6 +200,19 @@ function ShowTocWidgetButton({ noteContext }: FloatingButtonContext) {
     />
 }
 
+function ShowHighlightsListWidgetButton({ noteContext }: FloatingButtonContext) {
+    return <ActionButton
+        text={t("show_highlights_list_widget_button.show_highlights_list")}
+        icon="bx bx-bookmarks"
+        onClick={() => {
+            if (noteContext?.viewScope && noteContext.noteId) {
+                noteContext.viewScope.highlightsListTemporarilyHidden = false;
+                appContext.triggerEvent("showHighlightsListWidget", { noteId: noteContext.noteId });
+            }
+        }}
+    />
+}
+
 /**
  * Show button that displays floating button after click on close button
  */

apps/client/src/widgets/buttons/show_highlights_list_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 ShowHighlightsListWidgetButton extends OnClickButtonWidget {
-    isEnabled(): boolean {
-        return Boolean(super.isEnabled() && this.note && this.note.type === "text" && this.noteContext?.viewScope?.viewMode === "default");
-    }
-
-    constructor() {
-        super();
-
-        this.icon("bx-bookmarks")
-            .title(t("show_highlights_list_widget_button.show_highlights_list"))
-            .titlePlacement("bottom")
-            .onClick(() => {
-                if (this.noteContext?.viewScope && this.noteId) {
-                    this.noteContext.viewScope.highlightsListTemporarilyHidden = false;
-                    appContext.triggerEvent("showHighlightsListWidget", { noteId: this.noteId });
-                }
-                this.toggleInt(false);
-            });
-    }
-
-    async refreshWithNote(): Promise<void> {
-        if (this.noteContext?.viewScope) {
-            this.toggleInt(this.noteContext.viewScope.highlightsListTemporarilyHidden);
-        }
-    }
-
-    async reEvaluateHighlightsListWidgetVisibilityEvent({ 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 === "hideHighlightWidget") &&
-                    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/highlights_list.ts

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