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
  */