@yancyyu/openhermit 1.5.8

package/src/renderer/hooks/useCreateTeamDraft.ts

@@ -0,0 +1,280 @@
+/**
+ * Unified draft hook for CreateTeamDialog form state.
+ *
+ * Persists team name, paths, and color to IndexedDB so navigating away from
+ * the Teams tab and back preserves user input.
+ *
+ * Key guarantees:
+ * - Single IndexedDB key (`createTeamDraft:form`), no TTL.
+ * - Race-safe: late async load never overwrites fresh user input.
+ * - Debounced writes with immediate flush on unmount.
+ * - Draft is cleared only on successful team creation.
+ *
+ * Pattern mirrors `useComposerDraft.ts`.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+  type CreateTeamDraftSnapshot,
+  createTeamDraftStorage,
+} from '@renderer/services/createTeamDraftStorage';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface UseCreateTeamDraftResult {
+  teamName: string;
+  setTeamName: (v: string) => void;
+  cwdMode: 'project' | 'custom';
+  setCwdMode: (v: 'project' | 'custom') => void;
+  selectedProjectPath: string;
+  setSelectedProjectPath: (v: string) => void;
+  customCwd: string;
+  setCustomCwd: (v: string) => void;
+  teamColor: string;
+  setTeamColor: (v: string) => void;
+
+  /** `true` after the initial IndexedDB load completes. */
+  isLoaded: boolean;
+  /** Clear all draft state and delete the IndexedDB entry. */
+  clearDraft: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const DEBOUNCE_MS = 400;
+const SNAPSHOT_VERSION = 2;
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export function useCreateTeamDraft(): UseCreateTeamDraftResult {
+  // ── State ──────────────────────────────────────────────────────────────
+  const [teamName, setTeamNameState] = useState('');
+  const [cwdMode, setCwdModeState] = useState<'project' | 'custom'>('project');
+  const [selectedProjectPath, setSelectedProjectPathState] = useState('');
+  const [customCwd, setCustomCwdState] = useState('');
+  const [teamColor, setTeamColorState] = useState('');
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  // ── Refs (latest values for debounced callbacks) ───────────────────────
+  const teamNameRef = useRef('');
+  const cwdModeRef = useRef<'project' | 'custom'>('project');
+  const selectedProjectPathRef = useRef('');
+  const customCwdRef = useRef('');
+  const teamColorRef = useRef('');
+  const mountedRef = useRef(true);
+  const userTouchedRef = useRef(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingRef = useRef<CreateTeamDraftSnapshot | null>(null);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  // ── Snapshot builder ───────────────────────────────────────────────────
+
+  const buildSnapshot = useCallback((): CreateTeamDraftSnapshot => {
+    return {
+      version: SNAPSHOT_VERSION,
+      teamName: teamNameRef.current,
+      cwdMode: cwdModeRef.current,
+      selectedProjectPath: selectedProjectPathRef.current,
+      customCwd: customCwdRef.current,
+      teamColor: teamColorRef.current,
+      updatedAt: Date.now(),
+    };
+  }, []);
+
+  // ── Flush / schedule ───────────────────────────────────────────────────
+
+  const flushPending = useCallback(() => {
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (pendingRef.current != null) {
+      const pending = pendingRef.current;
+      pendingRef.current = null;
+      const isEmpty = pending.teamName === '';
+      if (isEmpty) {
+        void createTeamDraftStorage.deleteSnapshot();
+      } else {
+        void createTeamDraftStorage.saveSnapshot(pending);
+      }
+    }
+  }, []);
+
+  const scheduleSave = useCallback(() => {
+    const snapshot = buildSnapshot();
+    pendingRef.current = snapshot;
+
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = setTimeout(() => {
+      timerRef.current = null;
+      const pending = pendingRef.current;
+      pendingRef.current = null;
+      if (pending == null) return;
+
+      const isEmpty = pending.teamName === '';
+      if (isEmpty) {
+        void createTeamDraftStorage.deleteSnapshot();
+      } else {
+        void createTeamDraftStorage.saveSnapshot(pending);
+      }
+    }, DEBOUNCE_MS);
+  }, [buildSnapshot]);
+
+  // ── Apply snapshot to state ────────────────────────────────────────────
+
+  const applySnapshot = useCallback((snap: CreateTeamDraftSnapshot) => {
+    teamNameRef.current = snap.teamName;
+    cwdModeRef.current = snap.cwdMode;
+    selectedProjectPathRef.current = snap.selectedProjectPath;
+    customCwdRef.current = snap.customCwd;
+    teamColorRef.current = snap.teamColor;
+
+    setTeamNameState(snap.teamName);
+    setCwdModeState(snap.cwdMode);
+    setSelectedProjectPathState(snap.selectedProjectPath);
+    setCustomCwdState(snap.customCwd);
+    setTeamColorState(snap.teamColor);
+  }, []);
+
+  // ── Load on mount ──────────────────────────────────────────────────────
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void (async () => {
+      const snapshot = await createTeamDraftStorage.loadSnapshot();
+      if (cancelled) return;
+
+      // Race protection: if user already interacted, don't overwrite
+      if (userTouchedRef.current) {
+        if (mountedRef.current) setIsLoaded(true);
+        return;
+      }
+
+      if (snapshot != null) {
+        applySnapshot(snapshot);
+      }
+
+      if (mountedRef.current) setIsLoaded(true);
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [applySnapshot]);
+
+  // Flush on unmount
+  useEffect(() => {
+    return () => {
+      flushPending();
+    };
+  }, [flushPending]);
+
+  // ── Setters ────────────────────────────────────────────────────────────
+
+  const setTeamName = useCallback(
+    (v: string) => {
+      userTouchedRef.current = true;
+      teamNameRef.current = v;
+      setTeamNameState(v);
+      scheduleSave();
+    },
+    [scheduleSave]
+  );
+
+  const setCwdMode = useCallback(
+    (v: 'project' | 'custom') => {
+      userTouchedRef.current = true;
+      cwdModeRef.current = v;
+      setCwdModeState(v);
+      scheduleSave();
+    },
+    [scheduleSave]
+  );
+
+  const setSelectedProjectPath = useCallback(
+    (v: string) => {
+      userTouchedRef.current = true;
+      selectedProjectPathRef.current = v;
+      setSelectedProjectPathState(v);
+      scheduleSave();
+    },
+    [scheduleSave]
+  );
+
+  const setCustomCwd = useCallback(
+    (v: string) => {
+      userTouchedRef.current = true;
+      customCwdRef.current = v;
+      setCustomCwdState(v);
+      scheduleSave();
+    },
+    [scheduleSave]
+  );
+
+  const setTeamColor = useCallback(
+    (v: string) => {
+      userTouchedRef.current = true;
+      teamColorRef.current = v;
+      setTeamColorState(v);
+      scheduleSave();
+    },
+    [scheduleSave]
+  );
+
+  // ── Clear all ──────────────────────────────────────────────────────────
+
+  const clearDraft = useCallback(() => {
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    pendingRef.current = null;
+    userTouchedRef.current = true;
+
+    teamNameRef.current = '';
+    cwdModeRef.current = 'project';
+    selectedProjectPathRef.current = '';
+    customCwdRef.current = '';
+    teamColorRef.current = '';
+
+    setTeamNameState('');
+    setCwdModeState('project');
+    setSelectedProjectPathState('');
+    setCustomCwdState('');
+    setTeamColorState('');
+
+    void createTeamDraftStorage.deleteSnapshot();
+  }, []);
+
+  return {
+    teamName,
+    setTeamName,
+    cwdMode,
+    setCwdMode,
+    selectedProjectPath,
+    setSelectedProjectPath,
+    customCwd,
+    setCustomCwd,
+    teamColor,
+    setTeamColor,
+    isLoaded,
+    clearDraft,
+  };
+}

package/src/renderer/hooks/useDraftPersistence.ts

@@ -0,0 +1,140 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { draftStorage } from '@renderer/services/draftStorage';
+
+interface UseDraftPersistenceOptions {
+  key: string;
+  initialValue?: string;
+  enabled?: boolean;
+  debounceMs?: number;
+}
+
+interface UseDraftPersistenceResult {
+  value: string;
+  setValue: (v: string) => void;
+  isSaved: boolean;
+  clearDraft: () => void;
+}
+
+export function useDraftPersistence({
+  key,
+  initialValue,
+  enabled = true,
+  debounceMs = 500,
+}: UseDraftPersistenceOptions): UseDraftPersistenceResult {
+  const [value, setValueState] = useState(initialValue ?? '');
+  const [isSaved, setIsSaved] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingValueRef = useRef<{ key: string; value: string } | null>(null);
+  const keyRef = useRef(key);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    keyRef.current = key;
+  }, [key]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const flushPending = useCallback(() => {
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (pendingValueRef.current != null) {
+      const pending = pendingValueRef.current;
+      pendingValueRef.current = null;
+      if (pending.value.length === 0) {
+        void draftStorage.deleteDraft(pending.key);
+      } else {
+        void draftStorage.saveDraft(pending.key, pending.value);
+      }
+    }
+  }, []);
+
+  // Load draft on mount / key change
+  useEffect(() => {
+    let cancelled = false;
+    // Prevent debounced saves for the previous key from landing under the new key.
+    flushPending();
+    // Reset local state for the new key immediately. If a draft exists, it will overwrite below.
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional reset on key change before async load
+    setValueState(initialValue ?? '');
+
+    setIsSaved(false);
+
+    if (!enabled)
+      return () => {
+        cancelled = true;
+      };
+    void (async () => {
+      const draft = await draftStorage.loadDraft(key);
+      if (cancelled) return;
+      if (draft != null && initialValue == null) {
+        setValueState(draft);
+        setIsSaved(true);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [key, enabled, initialValue, flushPending]);
+
+  // Flush on unmount
+  useEffect(() => {
+    return () => {
+      flushPending();
+    };
+  }, [flushPending]);
+
+  const setValue = useCallback(
+    (v: string) => {
+      setValueState(v);
+      setIsSaved(false);
+
+      if (!enabled) return;
+
+      pendingValueRef.current = { key: keyRef.current, value: v };
+
+      if (timerRef.current != null) {
+        clearTimeout(timerRef.current);
+      }
+
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        const pending = pendingValueRef.current;
+        pendingValueRef.current = null;
+        if (pending == null) return;
+
+        if (pending.value.length === 0) {
+          void draftStorage.deleteDraft(pending.key);
+        } else {
+          void draftStorage.saveDraft(pending.key, pending.value).then(() => {
+            if (mountedRef.current) setIsSaved(true);
+          });
+        }
+      }, debounceMs);
+    },
+    [enabled, debounceMs]
+  );
+
+  const clearDraft = useCallback(() => {
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    pendingValueRef.current = null;
+    setValueState('');
+    setIsSaved(false);
+    if (enabled) {
+      void draftStorage.deleteDraft(keyRef.current);
+    }
+  }, [enabled]);
+
+  return { value, setValue, isSaved, clearDraft };
+}

package/src/renderer/hooks/useEditorKeyboardShortcuts.ts

@@ -0,0 +1,257 @@
+/**
+ * useEditorKeyboardShortcuts — keyboard shortcuts scoped to the project editor overlay.
+ *
+ * All shortcuts use stopPropagation to prevent conflicts with global useKeyboardShortcuts.
+ * CM6-internal shortcuts (Cmd+Z, Cmd+Shift+Z, Cmd+A, Cmd+D) are handled by CodeMirror directly.
+ */
+
+import { useCallback, useEffect, useRef } from 'react';
+
+import { openSearchPanel } from '@codemirror/search';
+import { useStore } from '@renderer/store';
+import { editorBridge } from '@renderer/utils/editorBridge';
+import { physicalKey } from '@renderer/utils/keyboardUtils';
+import { useShallow } from 'zustand/react/shallow';
+
+import type { EditorFileTab } from '@shared/types/editor';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface UseEditorKeyboardShortcutsOptions {
+  onToggleQuickOpen: () => void;
+  onToggleSearchPanel: () => void;
+  onToggleGoToLine: () => void;
+  onToggleSidebar: () => void;
+  onClose: () => void;
+  onToggleMdSplit?: () => void;
+  onToggleMdPreview?: () => void;
+}
+
+/** Dependencies injected into the key handler for testability. */
+export interface EditorKeyHandlerDeps {
+  activeTabId: string | null;
+  openTabs: EditorFileTab[];
+  setActiveEditorTab: (id: string) => void;
+  saveFile: (tabId: string) => Promise<void>;
+  saveAllFiles: () => Promise<void>;
+  hasUnsavedChanges: () => boolean;
+  onToggleQuickOpen: () => void;
+  onToggleSearchPanel: () => void;
+  onToggleGoToLine: () => void;
+  onToggleSidebar: () => void;
+  onToggleLineWrap: () => void;
+  onToggleMdSplit?: () => void;
+  onToggleMdPreview?: () => void;
+  getEditorView: () => { dispatch: unknown } | null;
+}
+
+// =============================================================================
+// Pure key handler (exported for testing)
+// =============================================================================
+
+/**
+ * Create a keyboard event handler for editor shortcuts.
+ * Extracted from the hook for unit-testability.
+ */
+export function createEditorKeyHandler(deps: EditorKeyHandlerDeps): (e: KeyboardEvent) => void {
+  return (e: KeyboardEvent) => {
+    const isMod = e.metaKey || e.ctrlKey;
+    if (!isMod) return;
+
+    // Layout-independent key (uses event.code for letters/symbols)
+    const key = physicalKey(e);
+
+    // Cmd+P: Quick Open
+    if (key === 'p' && !e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      deps.onToggleQuickOpen();
+      return;
+    }
+
+    // Cmd+Shift+F: Search in files
+    if (key === 'f' && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      deps.onToggleSearchPanel();
+      return;
+    }
+
+    // Cmd+F: Find in current file (CM6)
+    if (key === 'f' && !e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      const view = deps.getEditorView();
+      if (view) openSearchPanel(view as Parameters<typeof openSearchPanel>[0]);
+      return;
+    }
+
+    // Cmd+G: Go to line
+    if (key === 'g' && !e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      deps.onToggleGoToLine();
+      return;
+    }
+
+    // Cmd+S: Save current file
+    if (key === 's' && !e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (deps.activeTabId) void deps.saveFile(deps.activeTabId);
+      return;
+    }
+
+    // Cmd+Shift+S: Save all files
+    if (key === 's' && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (deps.hasUnsavedChanges()) void deps.saveAllFiles();
+      return;
+    }
+
+    // Cmd+Shift+M: Toggle markdown split preview
+    if (key === 'm' && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      deps.onToggleMdSplit?.();
+      return;
+    }
+
+    // Cmd+Shift+V: Toggle markdown full preview
+    if (key === 'v' && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      deps.onToggleMdPreview?.();
+      return;
+    }
+
+    // Cmd+Shift+W: Toggle line wrap
+    if (key === 'w' && e.shiftKey && !e.altKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      deps.onToggleLineWrap();
+      return;
+    }
+
+    // Cmd+W: Close current editor tab
+    if (key === 'w' && !e.shiftKey && !e.altKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (deps.activeTabId) {
+        // Let overlay handle dirty check via onRequestCloseTab
+        const closeEvent = new CustomEvent('editor-close-tab', { detail: deps.activeTabId });
+        window.dispatchEvent(closeEvent);
+      }
+      return;
+    }
+
+    // Cmd+B: Toggle sidebar
+    if (key === 'b') {
+      e.preventDefault();
+      e.stopPropagation();
+      deps.onToggleSidebar();
+      return;
+    }
+
+    // Cmd+Shift+]: Next tab
+    if (key === ']' && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      const idx = deps.openTabs.findIndex((t) => t.id === deps.activeTabId);
+      if (idx !== -1 && idx < deps.openTabs.length - 1) {
+        deps.setActiveEditorTab(deps.openTabs[idx + 1].id);
+      } else if (deps.openTabs.length > 0) {
+        deps.setActiveEditorTab(deps.openTabs[0].id); // wrap
+      }
+      return;
+    }
+
+    // Cmd+Shift+[: Previous tab
+    if (key === '[' && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      const idx = deps.openTabs.findIndex((t) => t.id === deps.activeTabId);
+      if (idx > 0) {
+        deps.setActiveEditorTab(deps.openTabs[idx - 1].id);
+      } else if (deps.openTabs.length > 0) {
+        deps.setActiveEditorTab(deps.openTabs[deps.openTabs.length - 1].id); // wrap
+      }
+      return;
+    }
+
+    // Ctrl+Tab / Ctrl+Shift+Tab: Tab cycling
+    if (e.ctrlKey && key === 'Tab') {
+      e.preventDefault();
+      e.stopPropagation();
+      const idx = deps.openTabs.findIndex((t) => t.id === deps.activeTabId);
+      if (e.shiftKey) {
+        const prev = idx > 0 ? idx - 1 : deps.openTabs.length - 1;
+        if (deps.openTabs[prev]) deps.setActiveEditorTab(deps.openTabs[prev].id);
+      } else {
+        const next = idx < deps.openTabs.length - 1 ? idx + 1 : 0;
+        if (deps.openTabs[next]) deps.setActiveEditorTab(deps.openTabs[next].id);
+      }
+    }
+
+    // Escape: Close editor (handled separately in overlay with dialog guards)
+  };
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+export function useEditorKeyboardShortcuts({
+  onToggleQuickOpen,
+  onToggleSearchPanel,
+  onToggleGoToLine,
+  onToggleSidebar,
+  onClose: _onClose,
+  onToggleMdSplit,
+  onToggleMdPreview,
+}: UseEditorKeyboardShortcutsOptions): void {
+  const { openTabs, activeTabId } = useStore(
+    useShallow((s) => ({
+      openTabs: s.editorOpenTabs,
+      activeTabId: s.editorActiveTabId,
+    }))
+  );
+  const setActiveEditorTab = useStore((s) => s.setActiveEditorTab);
+  const saveFile = useStore((s) => s.saveFile);
+  const saveAllFiles = useStore((s) => s.saveAllFiles);
+  const hasUnsavedChanges = useStore((s) => s.hasUnsavedChanges);
+  const toggleLineWrap = useStore((s) => s.toggleLineWrap);
+
+  // Store all deps in a ref so the keydown handler has a stable identity
+  const depsRef = useRef<EditorKeyHandlerDeps>(null!);
+  // eslint-disable-next-line react-hooks/refs -- sync ref with deps for stable keydown handler
+  depsRef.current = {
+    activeTabId,
+    openTabs,
+    setActiveEditorTab,
+    saveFile,
+    saveAllFiles,
+    hasUnsavedChanges,
+    onToggleQuickOpen,
+    onToggleSearchPanel,
+    onToggleGoToLine,
+    onToggleSidebar,
+    onToggleLineWrap: toggleLineWrap,
+    onToggleMdSplit,
+    onToggleMdPreview,
+    getEditorView: () => editorBridge.getView(),
+  };
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    const handler = createEditorKeyHandler(depsRef.current);
+    handler(e);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown, true); // capture phase
+    return () => window.removeEventListener('keydown', handleKeyDown, true);
+  }, [handleKeyDown]);
+}