markupr 2.1.8

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

@@ -0,0 +1,174 @@
+import React from 'react';
+import type { AppSettings } from '../../../shared/types';
+import { useTheme } from '../../hooks/useTheme';
+import { SettingsSection, ToggleSetting, ApiKeyInput, DangerButton } from '../primitives';
+import type { ApiKeyState } from '../primitives';
+import { styles } from './settingsStyles';
+
+export const AdvancedTab: React.FC<{
+  settings: AppSettings;
+  openAiApiKey: ApiKeyState;
+  anthropicApiKey: ApiKeyState;
+  onSettingChange: <K extends keyof AppSettings>(key: K, value: AppSettings[K]) => void;
+  onOpenAiApiKeyChange: (value: string) => void;
+  onToggleOpenAiApiKeyVisibility: () => void;
+  onTestOpenAiApiKey: () => void;
+  onAnthropicApiKeyChange: (value: string) => void;
+  onToggleAnthropicApiKeyVisibility: () => void;
+  onTestAnthropicApiKey: () => void;
+  onClearAllData: () => void;
+  onExportSettings: () => void;
+  onImportSettings: () => void;
+  onResetSection: () => void;
+}> = ({
+  settings,
+  openAiApiKey,
+  anthropicApiKey,
+  onSettingChange,
+  onOpenAiApiKeyChange,
+  onToggleOpenAiApiKeyVisibility,
+  onTestOpenAiApiKey,
+  onAnthropicApiKeyChange,
+  onToggleAnthropicApiKeyVisibility,
+  onTestAnthropicApiKey,
+  onClearAllData,
+  onExportSettings,
+  onImportSettings,
+  onResetSection,
+}) => {
+  const { colors } = useTheme();
+  return (
+  <div style={styles.tabContent}>
+    {/* Transcription workflow */}
+    <SettingsSection
+      title="Transcription Workflow"
+      description="Simple and reliable capture pipeline"
+      onReset={onResetSection}
+    >
+      <div style={styles.settingDescription}>
+        markupr records screen + microphone first, then runs transcription after you stop.
+        OpenAI is the primary cloud path. Local Whisper is optional fallback when available.
+      </div>
+    </SettingsSection>
+
+    <SettingsSection
+      title="BYOK Mode"
+      description="This open-source build uses your own keys for both transcription and AI analysis."
+    >
+      <div style={styles.settingDescription}>
+        Set both the OpenAI key (transcription) and Anthropic key (analysis) below for full end-to-end reports.
+      </div>
+    </SettingsSection>
+
+    {/* OpenAI API Key (BYOK primary transcription fallback) */}
+    <SettingsSection
+      title="OpenAI API Key"
+      description="Required for BYOK post-session transcription"
+    >
+      <div style={styles.serviceInfo}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M12 3l2.4 1.4 2.8-.3 1.2 2.6 2.3 1.6-.8 2.7.8 2.7-2.3 1.6-1.2 2.6-2.8-.3L12 21l-2.4-1.4-2.8.3-1.2-2.6-2.3-1.6.8-2.7-.8-2.7 2.3-1.6 1.2-2.6 2.8.3L12 3z"
+            stroke={colors.status.success}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path d="M9.5 12h5M12 9.5v5" stroke={colors.status.success} strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+        <div>
+          <span style={styles.serviceName}>OpenAI Audio Transcription</span>
+          <span style={styles.serviceDescription}>
+            Used for reliable post-session narration transcription when local models are unavailable.
+          </span>
+        </div>
+      </div>
+      <ApiKeyInput
+        label="API Key"
+        description="Required for BYOK transcription"
+        serviceName="OpenAI"
+        apiKey={openAiApiKey}
+        onApiKeyChange={onOpenAiApiKeyChange}
+        onToggleVisibility={onToggleOpenAiApiKeyVisibility}
+        onTest={onTestOpenAiApiKey}
+      />
+    </SettingsSection>
+
+    {/* Anthropic API Key (BYOK AI analysis) */}
+    <SettingsSection
+      title="Anthropic API Key"
+      description="Required for BYOK AI analysis in this version"
+    >
+      <div style={styles.serviceInfo}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M4 20L10.5 4h3L20 20h-3.5l-1.3-3.3H8.8L7.5 20H4zM9.9 13.9h4.2L12 8.4l-2.1 5.5z"
+            fill={colors.status.warning}
+          />
+        </svg>
+        <div>
+          <span style={styles.serviceName}>Anthropic Analysis</span>
+          <span style={styles.serviceDescription}>
+            Used to generate structured, agent-ready markdown insights from your capture session.
+          </span>
+        </div>
+      </div>
+      <ApiKeyInput
+        label="API Key"
+        description="Required for BYOK AI analysis"
+        serviceName="Anthropic"
+        apiKey={anthropicApiKey}
+        onApiKeyChange={onAnthropicApiKeyChange}
+        onToggleVisibility={onToggleAnthropicApiKeyVisibility}
+        onTest={onTestAnthropicApiKey}
+      />
+    </SettingsSection>
+
+    <SettingsSection title="Debug & Backup">
+      <ToggleSetting
+        label="Debug Mode"
+        description="Enable verbose logging for troubleshooting"
+        value={settings.debugMode}
+        onChange={(value) => onSettingChange('debugMode', value)}
+      />
+      <ToggleSetting
+        label="Keep Audio Backups"
+        description="Save audio recordings alongside transcriptions"
+        value={settings.keepAudioBackups}
+        onChange={(value) => onSettingChange('keepAudioBackups', value)}
+      />
+    </SettingsSection>
+
+    <SettingsSection title="Settings Management">
+      <div style={styles.settingRow}>
+        <div style={styles.settingInfo}>
+          <span style={styles.settingLabel}>Export Settings</span>
+          <span style={styles.settingDescription}>Save your settings to a file</span>
+        </div>
+        <button style={styles.secondaryButton} onClick={onExportSettings}>
+          Export
+        </button>
+      </div>
+      <div style={styles.settingRow}>
+        <div style={styles.settingInfo}>
+          <span style={styles.settingLabel}>Import Settings</span>
+          <span style={styles.settingDescription}>Load settings from a file</span>
+        </div>
+        <button style={styles.secondaryButton} onClick={onImportSettings}>
+          Import
+        </button>
+      </div>
+    </SettingsSection>
+
+    <SettingsSection title="Danger Zone">
+      <DangerButton
+        label="Clear All Data"
+        description="Delete all sessions, screenshots, and reset settings"
+        buttonText="Clear All Data"
+        confirmText="Click to confirm deletion"
+        onConfirm={onClearAllData}
+      />
+    </SettingsSection>
+  </div>
+  );
+};

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import type { AppSettings } from '../../../shared/types';
+// useTheme available for future theme-aware styling
+import { darkTheme, lightTheme } from '../../styles/theme';
+import { SettingsSection, DropdownSetting, ColorPicker } from '../primitives';
+import { styles } from './settingsStyles';
+
+export const AppearanceTab: React.FC<{
+  settings: AppSettings;
+  onSettingChange: <K extends keyof AppSettings>(key: K, value: AppSettings[K]) => void;
+  onResetSection: () => void;
+}> = ({ settings, onSettingChange, onResetSection }) => {
+  const previewColors = settings.theme === 'light' ? lightTheme : darkTheme;
+  return (
+  <div style={styles.tabContent}>
+    <SettingsSection
+      title="Theme"
+      description="Choose how markupr looks"
+      onReset={onResetSection}
+    >
+      <DropdownSetting
+        label="Theme Mode"
+        description="Match your system or choose a specific theme"
+        value={settings.theme}
+        options={[
+          { value: 'system', label: 'System' },
+          { value: 'dark', label: 'Dark' },
+          { value: 'light', label: 'Light' },
+        ]}
+        onChange={(value) => onSettingChange('theme', value as 'system' | 'dark' | 'light')}
+      />
+    </SettingsSection>
+
+    <SettingsSection title="Accent Color">
+      <ColorPicker
+        label="Accent Color"
+        description="Used for buttons, links, and highlights"
+        value={settings.accentColor}
+        onChange={(value) => onSettingChange('accentColor', value)}
+      />
+    </SettingsSection>
+
+    {/* Live Preview */}
+    <SettingsSection title="Preview">
+      <div style={styles.themePreview}>
+        <div
+          style={{
+            ...styles.previewCard,
+            backgroundColor: previewColors.bg.primary,
+            borderColor: previewColors.border.default,
+          }}
+        >
+          <div style={styles.previewHeader}>
+            <div style={{ ...styles.previewDot, backgroundColor: settings.accentColor }} />
+            <span
+              style={{
+                ...styles.previewTitle,
+                color: previewColors.text.primary,
+              }}
+            >
+              Recording Session
+            </span>
+          </div>
+          <button
+            style={{
+              ...styles.previewButton,
+              backgroundColor: settings.accentColor,
+            }}
+          >
+            Start Recording
+          </button>
+        </div>
+      </div>
+    </SettingsSection>
+  </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { AppSettings } from '../../../shared/types';
+import { SettingsSection, ToggleSetting, DirectoryPicker } from '../primitives';
+import { styles } from './settingsStyles';
+
+export const GeneralTab: React.FC<{
+  settings: AppSettings;
+  onSettingChange: <K extends keyof AppSettings>(key: K, value: AppSettings[K]) => void;
+  onResetSection: () => void;
+}> = ({ settings, onSettingChange, onResetSection }) => (
+  <div style={styles.tabContent}>
+    <SettingsSection
+      title="Output"
+      description="Where your feedback sessions are saved"
+      onReset={onResetSection}
+    >
+      <DirectoryPicker
+        label="Output Directory"
+        description="Screenshots and markdown files will be saved here"
+        value={settings.outputDirectory}
+        onChange={(value) => onSettingChange('outputDirectory', value)}
+      />
+    </SettingsSection>
+
+    <SettingsSection title="Startup">
+      <ToggleSetting
+        label="Launch at Login"
+        description="Start markupr automatically when you log in"
+        value={settings.launchAtLogin}
+        onChange={(value) => onSettingChange('launchAtLogin', value)}
+      />
+      <ToggleSetting
+        label="Check for Updates"
+        description="Automatically check on launch and while the app is running"
+        value={settings.checkForUpdates}
+        onChange={(value) => onSettingChange('checkForUpdates', value)}
+      />
+    </SettingsSection>
+  </div>
+);

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

@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+import type { AppSettings, HotkeyConfig } from '../../../shared/types';
+import { SettingsSection, KeyRecorder } from '../primitives';
+import { HotkeyHint } from '../HotkeyHint';
+import { styles } from './settingsStyles';
+
+export const HotkeysTab: React.FC<{
+  settings: AppSettings;
+  onHotkeyChange: (key: keyof HotkeyConfig, value: string) => void;
+  onResetSection: () => void;
+}> = ({ settings, onHotkeyChange, onResetSection }) => {
+  // Detect conflicts
+  const findConflict = useCallback(
+    (currentKey: keyof HotkeyConfig, value: string): string | null => {
+      const entries = Object.entries(settings.hotkeys) as [keyof HotkeyConfig, string][];
+      for (const [key, hotkey] of entries) {
+        if (key !== currentKey && hotkey === value) {
+          const labels: Record<keyof HotkeyConfig, string> = {
+            toggleRecording: 'Start/Stop Recording',
+            manualScreenshot: 'Manual Screenshot',
+            pauseResume: 'Pause/Resume',
+          };
+          return labels[key];
+        }
+      }
+      return null;
+    },
+    [settings.hotkeys]
+  );
+
+  return (
+    <div style={styles.tabContent}>
+      <SettingsSection
+        title="Keyboard Shortcuts"
+        description="Customize global hotkeys for markupr"
+        onReset={onResetSection}
+      >
+        <KeyRecorder
+          label="Start/Stop Recording"
+          description="Toggle recording on and off"
+          value={settings.hotkeys.toggleRecording}
+          onChange={(value) => onHotkeyChange('toggleRecording', value)}
+          conflict={findConflict('toggleRecording', settings.hotkeys.toggleRecording)}
+        />
+        <KeyRecorder
+          label="Manual Screenshot"
+          description="Capture a screenshot immediately"
+          value={settings.hotkeys.manualScreenshot}
+          onChange={(value) => onHotkeyChange('manualScreenshot', value)}
+          conflict={findConflict('manualScreenshot', settings.hotkeys.manualScreenshot)}
+        />
+        <KeyRecorder
+          label="Pause/Resume"
+          description="Temporarily pause active capture"
+          value={settings.hotkeys.pauseResume}
+          onChange={(value) => onHotkeyChange('pauseResume', value)}
+          conflict={findConflict('pauseResume', settings.hotkeys.pauseResume)}
+        />
+      </SettingsSection>
+
+      <SettingsSection title="Quick Reference">
+        <div style={styles.hotkeyReference}>
+          <div style={styles.hotkeyRefItem}>
+            <span style={styles.hotkeyRefLabel}>Start/Stop Recording</span>
+            <HotkeyHint keys={settings.hotkeys.toggleRecording} size="medium" />
+          </div>
+          <div style={styles.hotkeyRefItem}>
+            <span style={styles.hotkeyRefLabel}>Manual Screenshot</span>
+            <HotkeyHint keys={settings.hotkeys.manualScreenshot} size="medium" />
+          </div>
+          <div style={styles.hotkeyRefItem}>
+            <span style={styles.hotkeyRefLabel}>Pause/Resume</span>
+            <HotkeyHint keys={settings.hotkeys.pauseResume} size="medium" />
+          </div>
+        </div>
+      </SettingsSection>
+    </div>
+  );
+};

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import type { AppSettings, AudioDevice } from '../../../shared/types';
+import { SettingsSection, ToggleSetting, DropdownSetting, SliderSetting } from '../primitives';
+import { styles } from './settingsStyles';
+
+export const RecordingTab: React.FC<{
+  settings: AppSettings;
+  audioDevices: AudioDevice[];
+  onSettingChange: <K extends keyof AppSettings>(key: K, value: AppSettings[K]) => void;
+  onResetSection: () => void;
+}> = ({ settings, audioDevices, onSettingChange, onResetSection }) => (
+  <div style={styles.tabContent}>
+    <SettingsSection
+      title="Recording Behavior"
+      description="Customize how recording sessions work"
+      onReset={onResetSection}
+    >
+      <DropdownSetting
+        label="Countdown Before Recording"
+        description="Give yourself time to prepare"
+        value={settings.defaultCountdown}
+        options={[
+          { value: 0, label: 'No countdown' },
+          { value: 3, label: '3 seconds' },
+          { value: 5, label: '5 seconds' },
+        ]}
+        onChange={(value) => onSettingChange('defaultCountdown', Number(value) as 0 | 3 | 5)}
+      />
+      <ToggleSetting
+        label="Show Recording HUD"
+        description="Display mic activity and shortcut hints while recording"
+        value={settings.showTranscriptionPreview}
+        onChange={(value) => onSettingChange('showTranscriptionPreview', value)}
+      />
+      <ToggleSetting
+        label="Show Audio Waveform"
+        description="Visual feedback of your voice levels"
+        value={settings.showAudioWaveform}
+        onChange={(value) => onSettingChange('showAudioWaveform', value)}
+      />
+    </SettingsSection>
+
+    <SettingsSection title="Audio Input">
+      <DropdownSetting
+        label="Microphone"
+        description="Select which microphone to use for voice capture"
+        value={settings.audioDeviceId || 'default'}
+        options={[
+          { value: 'default', label: 'System Default' },
+          ...audioDevices.map((device) => ({
+            value: device.id,
+            label: device.name + (device.isDefault ? ' (Default)' : ''),
+          })),
+        ]}
+        onChange={(value) => onSettingChange('audioDeviceId', value === 'default' ? null : String(value))}
+      />
+    </SettingsSection>
+
+    <SettingsSection title="Screenshot Timing">
+      <SliderSetting
+        label="Pause Threshold"
+        description="How long to pause before capturing a screenshot"
+        value={settings.pauseThreshold}
+        min={500}
+        max={3000}
+        step={100}
+        unit="ms"
+        formatValue={(v) => `${(v / 1000).toFixed(1)}s`}
+        onChange={(value) => onSettingChange('pauseThreshold', value)}
+      />
+      <SliderSetting
+        label="Minimum Time Between Captures"
+        description="Prevent too many screenshots in quick succession"
+        value={settings.minTimeBetweenCaptures}
+        min={300}
+        max={2000}
+        step={100}
+        unit="ms"
+        formatValue={(v) => `${(v / 1000).toFixed(1)}s`}
+        onChange={(value) => onSettingChange('minTimeBetweenCaptures', value)}
+      />
+    </SettingsSection>
+  </div>
+);

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

@@ -0,0 +1,9 @@
+export { GeneralTab } from './GeneralTab';
+export { RecordingTab } from './RecordingTab';
+export { AppearanceTab } from './AppearanceTab';
+export { HotkeysTab } from './HotkeysTab';
+export { AdvancedTab } from './AdvancedTab';
+export { TABS } from './tabConfig';
+export type { SettingsTab } from './tabConfig';
+export { styles as settingsStyles } from './settingsStyles';
+export { useSettingsPanel } from './useSettingsPanel';