markupr 2.1.8 → 2.5.0

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-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';