From f91c1f418064541a908988b1bfc537c57e066996 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 24 Aug 2025 22:56:47 +0300
Subject: [PATCH] chore(react/ribbon): port revisions button

---
 .../src/widgets/buttons/revisions_button.ts   | 14 ----------
 .../client/src/widgets/react/ActionButton.tsx |  7 ++++-
 .../client/src/widgets/ribbon/NoteActions.tsx | 28 +++++++++++++++++++
 apps/client/src/widgets/ribbon/Ribbon.tsx     |  5 +++-
 4 files changed, 38 insertions(+), 16 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/revisions_button.ts
 create mode 100644 apps/client/src/widgets/ribbon/NoteActions.tsx

diff --git a/apps/client/src/widgets/buttons/revisions_button.ts b/apps/client/src/widgets/buttons/revisions_button.ts
deleted file mode 100644
index 089c6a4c6..000000000
--- a/apps/client/src/widgets/buttons/revisions_button.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { t } from "../../services/i18n.js";
-import CommandButtonWidget from "./command_button.js";
-
-export default class RevisionsButton extends CommandButtonWidget {
-    constructor() {
-        super();
-
-        this.icon("bx-history").title(t("revisions_button.note_revisions")).command("showRevisions").titlePlacement("bottom").class("icon-action");
-    }
-
-    isEnabled() {
-        return super.isEnabled() && !["launcher", "doc"].includes(this.note?.type ?? "");
-    }
-}
diff --git a/apps/client/src/widgets/react/ActionButton.tsx b/apps/client/src/widgets/react/ActionButton.tsx
index a6a1ee740..9fa0e69b4 100644
--- a/apps/client/src/widgets/react/ActionButton.tsx
+++ b/apps/client/src/widgets/react/ActionButton.tsx
@@ -1,14 +1,19 @@
+import { CommandNames } from "../../components/app_context";
+
 interface ActionButtonProps {
     text: string;
+    titlePosition?: "bottom"; // TODO: Use it
     icon: string;
     className?: string;
     onClick?: (e: MouseEvent) => void;
+    triggerCommand?: CommandNames;
 }
 
-export default function ActionButton({ text, icon, className, onClick }: ActionButtonProps) {
+export default function ActionButton({ text, icon, className, onClick, triggerCommand }: ActionButtonProps) {
     return <button
         class={`icon-action ${icon} ${className ?? ""}`}
         title={text}
         onClick={onClick}        
+        data-trigger-command={triggerCommand}
     />;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/NoteActions.tsx b/apps/client/src/widgets/ribbon/NoteActions.tsx
new file mode 100644
index 000000000..eb6781e16
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/NoteActions.tsx
@@ -0,0 +1,28 @@
+import FNote from "../../entities/fnote"
+import { t } from "../../services/i18n"
+import ActionButton from "../react/ActionButton"
+
+interface NoteActionsProps {
+  note?: FNote;
+}
+
+export default function NoteActions(props: NoteActionsProps) {
+  return (
+    <>
+      <RevisionsButton {...props} />
+    </>
+  )
+}
+
+function RevisionsButton({ note }: NoteActionsProps) {
+  const isEnabled = !["launcher", "doc"].includes(note?.type ?? "");
+
+  return (isEnabled &&
+    <ActionButton
+      icon="bx bx-history"
+      text={t("revisions_button.note_revisions")}
+      triggerCommand="showRevisions"
+      titlePosition="bottom"
+    />
+  )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
index 2a64d34de..fee6c09eb 100644
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -23,6 +23,7 @@ import OwnedAttributesTab from "./OwnedAttributesTab";
 import InheritedAttributesTab from "./InheritedAttributesTab";
 import CollectionPropertiesTab from "./CollectionPropertiesTab";
 import SearchDefinitionTab from "./SearchDefinitionTab";
+import NoteActions from "./NoteActions";
 
 interface TitleContext {
     note: FNote | null | undefined;
@@ -203,7 +204,9 @@ export default function Ribbon() {
                         />
                     ))}
                 </div>
-                <div className="ribbon-button-container"></div>
+                <div className="ribbon-button-container">
+                    <NoteActions note={note} />
+                </div>
             </div>
         
             <div className="ribbon-body-container">