markupr 2.1.8

package/src/renderer/components/settings/tabConfig.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+export type SettingsTab = 'general' | 'recording' | 'appearance' | 'hotkeys' | 'advanced';
+
+export const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
+  {
+    id: 'general',
+    label: 'General',
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M10 12a2 2 0 100-4 2 2 0 000 4z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M16.472 12.111a1.5 1.5 0 00.3 1.655l.054.055a1.818 1.818 0 11-2.572 2.572l-.055-.055a1.5 1.5 0 00-1.655-.3 1.5 1.5 0 00-.909 1.373v.153a1.818 1.818 0 11-3.636 0v-.082a1.5 1.5 0 00-.982-1.371 1.5 1.5 0 00-1.655.3l-.055.054a1.818 1.818 0 11-2.572-2.572l.055-.055a1.5 1.5 0 00.3-1.655 1.5 1.5 0 00-1.373-.909h-.153a1.818 1.818 0 110-3.636h.082a1.5 1.5 0 001.371-.982 1.5 1.5 0 00-.3-1.655l-.054-.055a1.818 1.818 0 112.572-2.572l.055.055a1.5 1.5 0 001.655.3h.073a1.5 1.5 0 00.909-1.373v-.153a1.818 1.818 0 013.636 0v.082a1.5 1.5 0 00.909 1.371 1.5 1.5 0 001.655-.3l.055-.054a1.818 1.818 0 112.572 2.572l-.055.055a1.5 1.5 0 00-.3 1.655v.073a1.5 1.5 0 001.373.909h.153a1.818 1.818 0 010 3.636h-.082a1.5 1.5 0 00-1.371.909z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+      </svg>
+    ),
+  },
+  {
+    id: 'recording',
+    label: 'Recording',
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <circle cx="10" cy="10" r="7" stroke="currentColor" strokeWidth="1.5" />
+        <circle cx="10" cy="10" r="3" fill="currentColor" />
+      </svg>
+    ),
+  },
+  {
+    id: 'appearance',
+    label: 'Appearance',
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M3 10a7 7 0 1014 0 7 7 0 00-14 0z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path d="M10 3v14M3 10h7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    id: 'hotkeys',
+    label: 'Hotkeys',
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <rect
+          x="2"
+          y="5"
+          width="16"
+          height="10"
+          rx="2"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path d="M5 8h2M8 8h2M11 8h2M14 8h1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        <path d="M6 11h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    id: 'advanced',
+    label: 'Advanced',
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M4 5h12M4 10h12M4 15h12"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+        <circle cx="8" cy="5" r="1.5" fill="currentColor" />
+        <circle cx="14" cy="10" r="1.5" fill="currentColor" />
+        <circle cx="6" cy="15" r="1.5" fill="currentColor" />
+      </svg>
+    ),
+  },
+];

package/src/renderer/components/settings/useSettingsPanel.ts

@@ -0,0 +1,447 @@
+/**
+ * useSettingsPanel
+ *
+ * Encapsulates all settings panel state, handlers, and effects.
+ * Returns everything the SettingsPanel shell needs to render.
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { AppSettings, AudioDevice, HotkeyConfig } from '../../../shared/types';
+import { DEFAULT_SETTINGS, DEFAULT_HOTKEY_CONFIG } from '../../../shared/types';
+import type { ApiKeyState } from '../primitives';
+import type { SettingsTab } from './tabConfig';
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const MASKED_API_KEY_PLACEHOLDER = '********';
+const API_TEST_TIMEOUT_MS = 15000;
+const API_SAVE_TIMEOUT_MS = 12000;
+
+const buildProviderTestFailureMessage = (provider: 'OpenAI' | 'Anthropic', error: unknown): string => {
+  const detail = error instanceof Error ? error.message : 'Unknown error';
+  return `Failed to test ${provider} API key: ${detail}`;
+};
+
+async function withTimeout<T>(promise: Promise<T>, timeoutMs: number, timeoutMessage: string): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const timeout = setTimeout(() => reject(new Error(timeoutMessage)), timeoutMs);
+    promise
+      .then((value) => {
+        clearTimeout(timeout);
+        resolve(value);
+      })
+      .catch((error) => {
+        clearTimeout(timeout);
+        reject(error);
+      });
+  });
+}
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+export function useSettingsPanel(isOpen: boolean, onClose: () => void, initialTab: SettingsTab = 'general') {
+  // State
+  const [activeTab, setActiveTab] = useState<SettingsTab>(initialTab);
+  const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS);
+  const [audioDevices, setAudioDevices] = useState<AudioDevice[]>([]);
+  const [openAiApiKey, setOpenAiApiKey] = useState<ApiKeyState>({
+    value: '', visible: false, testing: false, valid: null, error: null,
+  });
+  const [anthropicApiKey, setAnthropicApiKey] = useState<ApiKeyState>({
+    value: '', visible: false, testing: false, valid: null, error: null,
+  });
+  const [hasChanges, setHasChanges] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [appVersion, setAppVersion] = useState('');
+  const [hasRequiredByokKeys, setHasRequiredByokKeys] = useState(false);
+  const [isCompact, setIsCompact] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth < 760
+  );
+
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // ---------------------------------------------------------------------------
+  // Load settings on mount
+  // ---------------------------------------------------------------------------
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const loadSettings = async () => {
+      try {
+        const allSettings = await window.markupr.settings.getAll();
+        setSettings({ ...DEFAULT_SETTINGS, ...allSettings });
+
+        const devices = await window.markupr.audio.getDevices();
+        setAudioDevices(devices);
+
+        try {
+          const [hasOpenAiKey, hasAnthropicKey] = await Promise.all([
+            window.markupr.settings.hasApiKey('openai'),
+            window.markupr.settings.hasApiKey('anthropic'),
+          ]);
+          if (hasOpenAiKey) {
+            setOpenAiApiKey((prev) => ({ ...prev, value: MASKED_API_KEY_PLACEHOLDER, valid: true }));
+          }
+          if (hasAnthropicKey) {
+            setAnthropicApiKey((prev) => ({ ...prev, value: MASKED_API_KEY_PLACEHOLDER, valid: true }));
+          }
+          const hasRequiredKeys = hasOpenAiKey && hasAnthropicKey;
+          setHasRequiredByokKeys(hasRequiredKeys);
+          if (!hasRequiredKeys && initialTab === 'general') {
+            setActiveTab('advanced');
+          }
+        } catch {
+          setHasRequiredByokKeys(false);
+          if (initialTab === 'general') {
+            setActiveTab('advanced');
+          }
+        }
+
+        try {
+          const ver = await window.markupr.version();
+          setAppVersion(ver);
+        } catch {
+          setAppVersion('');
+        }
+      } catch (error) {
+        console.error('Failed to load settings:', error);
+      }
+    };
+
+    loadSettings();
+  }, [isOpen, initialTab]);
+
+  // ---------------------------------------------------------------------------
+  // Setting change handlers
+  // ---------------------------------------------------------------------------
+
+  const handleSettingChange = useCallback(
+    async <K extends keyof AppSettings>(key: K, value: AppSettings[K]) => {
+      setSettings((prev) => ({ ...prev, [key]: value }));
+      setHasChanges(true);
+      try {
+        await window.markupr.settings.set(key, value);
+      } catch (error) {
+        console.error('Failed to save setting:', error);
+      }
+    },
+    []
+  );
+
+  const handleHotkeyChange = useCallback(
+    async (key: keyof HotkeyConfig, value: string) => {
+      const newHotkeys = { ...settings.hotkeys, [key]: value };
+      setSettings((prev) => ({ ...prev, hotkeys: newHotkeys }));
+      setHasChanges(true);
+      try {
+        await window.markupr.settings.set('hotkeys', newHotkeys);
+        await window.markupr.hotkeys.updateConfig(newHotkeys);
+      } catch (error) {
+        console.error('Failed to update hotkey:', error);
+      }
+    },
+    [settings.hotkeys]
+  );
+
+  // ---------------------------------------------------------------------------
+  // API key handlers
+  // ---------------------------------------------------------------------------
+
+  const handleOpenAiApiKeyChange = useCallback((value: string) => {
+    setOpenAiApiKey((prev) => ({ ...prev, value, valid: null, error: null }));
+  }, []);
+
+  const handleToggleOpenAiApiKeyVisibility = useCallback(() => {
+    setOpenAiApiKey((prev) => ({ ...prev, visible: !prev.visible }));
+  }, []);
+
+  const handleTestOpenAiApiKey = useCallback(async () => {
+    setOpenAiApiKey((prev) => ({ ...prev, testing: true, error: null }));
+    try {
+      let candidateKey = openAiApiKey.value.trim();
+      if (candidateKey === MASKED_API_KEY_PLACEHOLDER) {
+        const storedKey = await window.markupr.settings.getApiKey('openai');
+        if (!storedKey) {
+          setOpenAiApiKey((prev) => ({
+            ...prev, valid: false,
+            error: 'No saved OpenAI key found. Paste your key and test again.',
+          }));
+          return;
+        }
+        candidateKey = storedKey.trim();
+      }
+      const validation = await withTimeout(
+        window.markupr.settings.testApiKey('openai', candidateKey),
+        API_TEST_TIMEOUT_MS,
+        'OpenAI API test timed out. Please try again.'
+      );
+      if (validation.valid) {
+        const saved = await withTimeout(
+          window.markupr.settings.setApiKey('openai', candidateKey),
+          API_SAVE_TIMEOUT_MS,
+          'Saving OpenAI key timed out. Please try again.'
+        );
+        if (!saved) {
+          setOpenAiApiKey((prev) => ({
+            ...prev, valid: false,
+            error: 'OpenAI key validated, but local save verification failed. Relaunch app and try again.',
+          }));
+          return;
+        }
+        const hasAnthropic = await window.markupr.settings.hasApiKey('anthropic').catch(() => false);
+        setHasRequiredByokKeys(Boolean(hasAnthropic));
+        setOpenAiApiKey((prev) => ({ ...prev, valid: true }));
+      } else {
+        setOpenAiApiKey((prev) => ({
+          ...prev, valid: false,
+          error: validation.error || 'OpenAI API key test failed. Please try again.',
+        }));
+      }
+    } catch (error) {
+      setOpenAiApiKey((prev) => ({
+        ...prev, valid: false,
+        error: buildProviderTestFailureMessage('OpenAI', error),
+      }));
+    } finally {
+      setOpenAiApiKey((prev) => ({ ...prev, testing: false }));
+    }
+  }, [openAiApiKey.value]);
+
+  const handleAnthropicApiKeyChange = useCallback((value: string) => {
+    setAnthropicApiKey((prev) => ({ ...prev, value, valid: null, error: null }));
+  }, []);
+
+  const handleToggleAnthropicApiKeyVisibility = useCallback(() => {
+    setAnthropicApiKey((prev) => ({ ...prev, visible: !prev.visible }));
+  }, []);
+
+  const handleTestAnthropicApiKey = useCallback(async () => {
+    setAnthropicApiKey((prev) => ({ ...prev, testing: true, error: null }));
+    try {
+      let candidateKey = anthropicApiKey.value.trim();
+      if (candidateKey === MASKED_API_KEY_PLACEHOLDER) {
+        const storedKey = await window.markupr.settings.getApiKey('anthropic');
+        if (!storedKey) {
+          setAnthropicApiKey((prev) => ({
+            ...prev, valid: false,
+            error: 'No saved Anthropic key found. Paste your key and test again.',
+          }));
+          return;
+        }
+        candidateKey = storedKey.trim();
+      }
+      const validation = await withTimeout(
+        window.markupr.settings.testApiKey('anthropic', candidateKey),
+        API_TEST_TIMEOUT_MS,
+        'Anthropic API test timed out. Please try again.'
+      );
+      if (validation.valid) {
+        const saved = await withTimeout(
+          window.markupr.settings.setApiKey('anthropic', candidateKey),
+          API_SAVE_TIMEOUT_MS,
+          'Saving Anthropic key timed out. Please try again.'
+        );
+        if (!saved) {
+          setAnthropicApiKey((prev) => ({
+            ...prev, valid: false,
+            error: 'Anthropic key validated, but local save verification failed. Relaunch app and try again.',
+          }));
+          return;
+        }
+        const hasOpenAi = await window.markupr.settings.hasApiKey('openai').catch(() => false);
+        setHasRequiredByokKeys(Boolean(hasOpenAi));
+        setAnthropicApiKey((prev) => ({ ...prev, valid: true }));
+      } else {
+        setAnthropicApiKey((prev) => ({
+          ...prev, valid: false,
+          error: validation.error || 'Anthropic API key test failed. Please try again.',
+        }));
+      }
+    } catch (error) {
+      setAnthropicApiKey((prev) => ({
+        ...prev, valid: false,
+        error: buildProviderTestFailureMessage('Anthropic', error),
+      }));
+    } finally {
+      setAnthropicApiKey((prev) => ({ ...prev, testing: false }));
+    }
+  }, [anthropicApiKey.value]);
+
+  // ---------------------------------------------------------------------------
+  // Reset handlers
+  // ---------------------------------------------------------------------------
+
+  const resetGeneralSection = useCallback(async () => {
+    const defaults = {
+      outputDirectory: DEFAULT_SETTINGS.outputDirectory,
+      launchAtLogin: DEFAULT_SETTINGS.launchAtLogin,
+      checkForUpdates: DEFAULT_SETTINGS.checkForUpdates,
+    };
+    setSettings((prev) => ({ ...prev, ...defaults }));
+    for (const [key, value] of Object.entries(defaults)) {
+      await window.markupr.settings.set(key as keyof AppSettings, value);
+    }
+  }, []);
+
+  const resetRecordingSection = useCallback(async () => {
+    const defaults = {
+      defaultCountdown: DEFAULT_SETTINGS.defaultCountdown,
+      showTranscriptionPreview: DEFAULT_SETTINGS.showTranscriptionPreview,
+      showAudioWaveform: DEFAULT_SETTINGS.showAudioWaveform,
+      audioDeviceId: DEFAULT_SETTINGS.audioDeviceId,
+      pauseThreshold: DEFAULT_SETTINGS.pauseThreshold,
+      minTimeBetweenCaptures: DEFAULT_SETTINGS.minTimeBetweenCaptures,
+    };
+    setSettings((prev) => ({ ...prev, ...defaults }));
+    for (const [key, value] of Object.entries(defaults)) {
+      await window.markupr.settings.set(key as keyof AppSettings, value);
+    }
+  }, []);
+
+  const resetAppearanceSection = useCallback(async () => {
+    const defaults = {
+      theme: DEFAULT_SETTINGS.theme,
+      accentColor: DEFAULT_SETTINGS.accentColor,
+    };
+    setSettings((prev) => ({ ...prev, ...defaults }));
+    for (const [key, value] of Object.entries(defaults)) {
+      await window.markupr.settings.set(key as keyof AppSettings, value);
+    }
+  }, []);
+
+  const resetHotkeysSection = useCallback(async () => {
+    const defaults = { ...DEFAULT_HOTKEY_CONFIG };
+    setSettings((prev) => ({ ...prev, hotkeys: defaults }));
+    await window.markupr.settings.set('hotkeys', defaults);
+    // @ts-expect-error - update may be named updateConfig in type definition
+    await (window.markupr.hotkeys.update ?? window.markupr.hotkeys.updateConfig)?.(defaults);
+  }, []);
+
+  const resetAdvancedSection = useCallback(async () => {
+    const defaults = {
+      debugMode: DEFAULT_SETTINGS.debugMode,
+      keepAudioBackups: DEFAULT_SETTINGS.keepAudioBackups,
+    };
+    setSettings((prev) => ({ ...prev, ...defaults }));
+    for (const [key, value] of Object.entries(defaults)) {
+      await window.markupr.settings.set(key as keyof AppSettings, value);
+    }
+  }, []);
+
+  // ---------------------------------------------------------------------------
+  // Data management handlers
+  // ---------------------------------------------------------------------------
+
+  const handleClearAllData = useCallback(async () => {
+    try {
+      await window.markupr.settings.clearAllData();
+      setSettings(DEFAULT_SETTINGS);
+      setOpenAiApiKey({ value: '', visible: false, testing: false, valid: null, error: null });
+      setAnthropicApiKey({ value: '', visible: false, testing: false, valid: null, error: null });
+      setHasRequiredByokKeys(false);
+    } catch (error) {
+      console.error('Failed to clear data:', error);
+    }
+  }, []);
+
+  const handleExportSettings = useCallback(async () => {
+    try {
+      await window.markupr.settings.export();
+    } catch (error) {
+      console.error('Failed to export settings:', error);
+    }
+  }, []);
+
+  const handleImportSettings = useCallback(async () => {
+    try {
+      const imported = await window.markupr.settings.import();
+      if (imported) {
+        setSettings({ ...DEFAULT_SETTINGS, ...imported });
+      }
+    } catch (error) {
+      console.error('Failed to import settings:', error);
+    }
+  }, []);
+
+  // ---------------------------------------------------------------------------
+  // Effects
+  // ---------------------------------------------------------------------------
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!isOpen) return;
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsAnimating(true);
+      const timer = setTimeout(() => setIsAnimating(false), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const onResize = () => {
+      setIsCompact(window.innerWidth < 760);
+    };
+    onResize();
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  // ---------------------------------------------------------------------------
+  // Return value
+  // ---------------------------------------------------------------------------
+
+  return {
+    // State
+    activeTab,
+    setActiveTab,
+    settings,
+    audioDevices,
+    openAiApiKey,
+    anthropicApiKey,
+    hasChanges,
+    isAnimating,
+    appVersion,
+    hasRequiredByokKeys,
+    isCompact,
+    panelRef,
+
+    // Setting handlers
+    handleSettingChange,
+    handleHotkeyChange,
+
+    // API key handlers
+    handleOpenAiApiKeyChange,
+    handleToggleOpenAiApiKeyVisibility,
+    handleTestOpenAiApiKey,
+    handleAnthropicApiKeyChange,
+    handleToggleAnthropicApiKeyVisibility,
+    handleTestAnthropicApiKey,
+
+    // Reset handlers
+    resetGeneralSection,
+    resetRecordingSection,
+    resetAppearanceSection,
+    resetHotkeysSection,
+    resetAdvancedSection,
+
+    // Data management
+    handleClearAllData,
+    handleExportSettings,
+    handleImportSettings,
+  };
+}