feat(react/floating_buttons): port refresh button

apps/client/src/widgets/FloatingButtons.tsx

@@ -1,6 +1,35 @@
 import { t } from "i18next";
 import "./FloatingButtons.css";
 import Button from "./react/Button";
+import ActionButton from "./react/ActionButton";
+import FNote from "../entities/fnote";
+import NoteContext from "../components/note_context";
+import { useNoteContext } from "./react/hooks";
+import { useContext, useEffect, useMemo } from "preact/hooks";
+import { ParentComponent } from "./react/react_utils";
+import Component from "../components/component";
+
+interface FloatingButtonContext {
+    parentComponent: Component;
+    note: FNote;    
+    noteContext: NoteContext;
+}
+
+interface FloatingButtonDefinition {
+    title: string;
+    icon: string;
+    isEnabled: (context: FloatingButtonContext) => boolean;
+    onClick: (context: FloatingButtonContext) => void;
+}
+
+const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
+    {
+        title: t("backend_log.refresh"),
+        icon: "bx bx-refresh",
+        isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default",
+        onClick: ({ parentComponent, noteContext }) => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId })
+    }
+];
 
 /*
  * Note:
@@ -10,10 +39,33 @@ import Button from "./react/Button";
  * properly handle rounded corners, as defined by the --border-radius CSS variable.
  */
 export default function FloatingButtons() {
+    const { note, noteContext } = useNoteContext();
+    const parentComponent = useContext(ParentComponent);
+    const context = useMemo<FloatingButtonContext | null>(() => {
+        if (!note || !noteContext || !parentComponent) return null;
+
+        return {
+            note,
+            noteContext,
+            parentComponent
+        };
+    }, [ note, noteContext, parentComponent ]);
+
+    const definitions = useMemo<FloatingButtonDefinition[]>(() => {    
+        if (!context) return [];
+        return FLOATING_BUTTON_DEFINITIONS.filter(def => def.isEnabled(context));
+    }, [ context ]);
+    
     return (
         <div className="floating-buttons no-print">
             <div className="floating-buttons-children">
-
+                {context && definitions.map(({ title, icon, onClick }) => (
+                    <ActionButton
+                        text={title}
+                        icon={icon}
+                        onClick={() => onClick(context)}
+                    />
+                ))}
             </div>
 
             <ShowFloatingButton />

apps/client/src/widgets/floating_buttons/refresh_button.ts

@@ -1,21 +0,0 @@
-import appContext from "../../components/app_context.js";
-import { t } from "../../services/i18n.js";
-import OnClickButtonWidget from "../buttons/onclick_button.js";
-
-export default class RefreshButton extends OnClickButtonWidget {
-    constructor() {
-        super();
-
-        this
-            .title(t("backend_log.refresh"))
-            .icon("bx-refresh")
-            .onClick(() => this.triggerEvent("refreshData", { ntxId: this.noteContext?.ntxId }))
-    }
-
-    isEnabled(): boolean | null | undefined {
-        return super.isEnabled()
-            && this.note?.noteId === "_backendLog"
-            && this.noteContext?.viewScope?.viewMode === "default";
-    }
-
-}