chore(react/ribbon): port revisions button

apps/client/src/widgets/buttons/revisions_button.ts

@@ -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 ?? "");
-    }
-}

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}
     />;
 }

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"
+    />
+  )
+}

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">