feat(react/floating_buttons): fancy title + keyboard shortcut

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

@@ -1,49 +0,0 @@
-import { t } from "../../services/i18n.js";
-import server from "../../services/server.js";
-import ws from "../../services/ws.js";
-import appContext, { type EventData } from "../../components/app_context.js";
-import toastService from "../../services/toast.js";
-import treeService from "../../services/tree.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import keyboardActionService from "../../services/keyboard_actions.js";
-import type FNote from "../../entities/fnote.js";
-
-const TPL = /*html*/`
-<div class="code-buttons-widget">
-    <style>
-        .code-buttons-widget {
-            display: flex;
-            gap: 10px;
-        }
-    </style>
-
-    <button class="save-to-note-button floating-button btn" title="${}">
-    </button>
-</div>`;
-
-export default class CodeButtonsWidget extends NoteContextAwareWidget {
-
-    private $openTriliumApiDocsButton!: JQuery<HTMLElement>;
-    private $saveToNoteButton!: JQuery<HTMLElement>;
-
-    isEnabled() {
-        return super.isEnabled() && this.note && (this.note.mime.startsWith("application/javascript") || this.note.mime === "text/x-sqlite;schema=trilium");
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.$executeButton = this.$widget.find(".execute-button");
-        this.$saveToNoteButton = this.$widget.find(".save-to-note-button");
-        this.$saveToNoteButton.on("click", async () => {
-
-        });
-
-        keyboardActionService.updateDisplayedShortcuts(this.$widget);
-
-        this.contentSized();
-
-        super.doRender();
-    }
-
-}

apps/client/src/widgets/react/ActionButton.tsx

@@ -1,18 +1,36 @@
+import { useEffect, useRef, useState } from "preact/hooks";
 import { CommandNames } from "../../components/app_context";
+import { useStaticTooltip } from "./hooks";
+import keyboard_actions from "../../services/keyboard_actions";
 
 interface ActionButtonProps {
     text: string;
-    titlePosition?: "bottom"; // TODO: Use it
+    titlePosition?: "bottom" | "left"; // TODO: Use it
     icon: string;
     className?: string;
     onClick?: (e: MouseEvent) => void;
     triggerCommand?: CommandNames;
 }
 
-export default function ActionButton({ text, icon, className, onClick, triggerCommand }: ActionButtonProps) {
+export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition }: ActionButtonProps) {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
+    
+    useStaticTooltip(buttonRef, {
+        title: keyboardShortcut?.length ? `${text} (${keyboardShortcut?.join(",")})` : text,
+        placement: titlePosition ?? "bottom",
+        fallbackPlacements: [ titlePosition ?? "bottom" ]
+    });
+    
+    useEffect(() => {
+        if (triggerCommand) {
+            keyboard_actions.getAction(triggerCommand).then(action => setKeyboardShortcut(action?.effectiveShortcuts));
+        }
+    }, [triggerCommand]);
+
     return <button
+        ref={buttonRef}
         class={`icon-action ${icon} ${className ?? ""}`}
-        title={text}
         onClick={onClick}        
         data-trigger-command={triggerCommand}
     />;