feat: add keyboard shortcut tooltips

2026-03-02 13:41:57 -06:00
parent 579f4730c8
commit e2a4643419
16 changed files with 217 additions and 53 deletions
@@ -0,0 +1,51 @@
+const dwellTimeout = 400;
+const persistTimeout = 150;
+
+export const useTooltip = () => {
+    const activeElement = useState<HTMLElement | null>('tooltip:activeElement', () => null);
+    const activeHotkey = useState<string[] | null>('tooltip:activeHotkey', () => null);
+    const isVisible = useState<boolean>('tooltip:isVisible', () => false);
+    const dwellTimeoutId = useState<NodeJS.Timeout | null>('tooltip:dwellTimeoutId', () => null);
+    const closeTimeoutId = useState<NodeJS.Timeout | null>('tooltip:closeTimeout', () => null);
+
+    const show = (el: HTMLElement, hotkey?: string[]) => {
+        if (closeTimeoutId.value) {
+            clearTimeout(closeTimeoutId.value);
+        }
+
+        if (isVisible.value) {
+            activeElement.value = el;
+            activeHotkey.value = hotkey || null;
+        } else {
+            dwellTimeoutId.value = setTimeout(() => {
+                activeElement.value = el;
+                activeHotkey.value = hotkey || null;
+                isVisible.value = true;
+            }, dwellTimeout);
+        }
+    };
+
+    const hide = () => {
+        if (dwellTimeoutId.value) {
+            clearTimeout(dwellTimeoutId.value);
+        }
+
+        if (closeTimeoutId.value) {
+            clearTimeout(closeTimeoutId.value);
+        }
+
+        closeTimeoutId.value = setTimeout(() => {
+            isVisible.value = false;
+            activeElement.value = null;
+            closeTimeoutId.value = null;
+        }, persistTimeout);
+    };
+
+    return {
+        activeElement: readonly(activeElement),
+        activeHotkey: readonly(activeHotkey),
+        isVisible: readonly(isVisible),
+        show,
+        hide,
+    };
+};