markupr 2.1.8 → 2.5.0

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

@@ -1,85 +0,0 @@
-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

@@ -1,447 +0,0 @@
-/**
- * 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,
-  };
-}