From 2d950e8f3abcc9a80a617740227a8ffdbeef68ad Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 27 Aug 2025 21:37:48 +0300
Subject: [PATCH] refactor(react/floating_buttons): use component-driven
 approach

---
 apps/client/src/widgets/FloatingButtons.tsx | 25 +++++++++++----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/widgets/FloatingButtons.tsx b/apps/client/src/widgets/FloatingButtons.tsx
index c0677ab9c..864e9449e 100644
--- a/apps/client/src/widgets/FloatingButtons.tsx
+++ b/apps/client/src/widgets/FloatingButtons.tsx
@@ -8,6 +8,7 @@ import { useNoteContext } from "./react/hooks";
 import { useContext, useEffect, useMemo } from "preact/hooks";
 import { ParentComponent } from "./react/react_utils";
 import Component from "../components/component";
+import { VNode } from "preact";
 
 interface FloatingButtonContext {
     parentComponent: Component;
@@ -16,18 +17,14 @@ interface FloatingButtonContext {
 }
 
 interface FloatingButtonDefinition {
-    title: string;
-    icon: string;
+    component: (context: FloatingButtonContext) => VNode;    
     isEnabled: (context: FloatingButtonContext) => boolean;
-    onClick: (context: FloatingButtonContext) => void;
 }
 
 const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
     {
-        title: t("backend_log.refresh"),
-        icon: "bx bx-refresh",
+        component: RefreshBackendLogButton,
         isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default",
-        onClick: ({ parentComponent, noteContext }) => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId })
     }
 ];
 
@@ -59,12 +56,8 @@ export default function FloatingButtons() {
     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)}
-                    />
+                {context && definitions.map(({ component: Component }) => (
+                    <Component {...context} />
                 ))}
             </div>
 
@@ -73,6 +66,14 @@ export default function FloatingButtons() {
     )
 }
 
+function RefreshBackendLogButton({ parentComponent, noteContext }: FloatingButtonContext) {
+    return <ActionButton
+        text={t("backend_log.refresh")}
+        icon="bx bx-refresh"
+        onClick={() => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId })}
+    />
+}
+
 /**
  * Show button that displays floating button after click on close button
  */