local-transcription/src/lib/components/Settings.svelte

<script lang="ts">
  import { configStore } from "$lib/stores/config";
  import { backendStore } from "$lib/stores/backend";

  interface Props {
    onClose: () => void;
  }

  let { onClose }: Props = $props();

  // Local copies of config values for editing
  let userName = $state("");
  let audioDevice = $state("default");
  let model = $state("base.en");
  let language = $state("en");
  let computeDevice = $state("auto");
  let computeType = $state("default");
  let enableRealtime = $state(false);
  let realtimeModel = $state("tiny.en");
  let realtimeProcessingPause = $state(0.1);
  let sileroSensitivity = $state(0.4);
  let webrtcSensitivity = $state(3);
  let postSpeechSilence = $state(0.3);
  let minRecordingLength = $state(0.5);
  let minGapBetween = $state(0);
  let continuousMode = $state(false);
  let showTimestamps = $state(true);
  let fadeSeconds = $state(10);
  let maxLines = $state(100);
  let fontSize = $state(12);
  let userColor = $state("#4CAF50");
  let textColor = $state("#FFFFFF");
  let backgroundColor = $state("#000000");
  let syncEnabled = $state(false);
  let syncUrl = $state("");
  let syncRoom = $state("default");
  let syncPassphrase = $state("");
  let remoteMode = $state("local");
  let remoteServerUrl = $state("");
  let managedEmail = $state("");
  let managedPassword = $state("");
  let autoCheckUpdates = $state(true);

  // Fetched device lists
  let audioDevices = $state<{ id: string; name: string }[]>([]);
  let computeDevices = $state<{ id: string; name: string }[]>([]);

  // Model options
  const modelOptions = [
    "tiny",
    "tiny.en",
    "base",
    "base.en",
    "small",
    "small.en",
    "medium",
    "medium.en",
    "large-v1",
    "large-v2",
    "large-v3",
  ];

  const computeTypeOptions = [
    { value: "default", label: "Default" },
    { value: "int8", label: "int8 (Fastest)" },
    { value: "float16", label: "float16 (GPU)" },
    { value: "float32", label: "float32 (Best Quality)" },
  ];

  const webrtcOptions = [
    { value: 0, label: "0 (Most Sensitive)" },
    { value: 1, label: "1" },
    { value: 2, label: "2" },
    { value: 3, label: "3 (Least Sensitive)" },
  ];

  // Load config values on mount
  $effect(() => {
    const cfg = configStore.config;
    userName = cfg.user.name;
    audioDevice = cfg.audio.input_device;
    model = cfg.transcription.model;
    language = cfg.transcription.language;
    computeDevice = cfg.transcription.device;
    computeType = cfg.transcription.compute_type;
    enableRealtime = cfg.transcription.enable_realtime_transcription;
    realtimeModel = cfg.transcription.realtime_model;
    realtimeProcessingPause = cfg.transcription.realtime_processing_pause;
    sileroSensitivity = cfg.transcription.silero_sensitivity;
    webrtcSensitivity = cfg.transcription.webrtc_sensitivity;
    postSpeechSilence = cfg.transcription.post_speech_silence_duration;
    minRecordingLength = cfg.transcription.min_length_of_recording;
    minGapBetween = cfg.transcription.min_gap_between_recordings;
    continuousMode = cfg.transcription.continuous_mode;
    showTimestamps = cfg.display.show_timestamps;
    fadeSeconds = cfg.display.fade_after_seconds;
    maxLines = cfg.display.max_lines;
    fontSize = cfg.display.font_size;
    userColor = cfg.display.user_color;
    textColor = cfg.display.text_color;
    // Strip alpha from background color for the color picker (only supports 6-char hex)
    const bgHex = cfg.display.background_color.replace("#", "");
    backgroundColor = "#" + bgHex.substring(0, 6);
    syncEnabled = cfg.server_sync.enabled;
    syncUrl = cfg.server_sync.url;
    syncRoom = cfg.server_sync.room;
    syncPassphrase = cfg.server_sync.passphrase;
    remoteMode = cfg.remote.mode;
    remoteServerUrl = cfg.remote.server_url;
    autoCheckUpdates = cfg.updates.auto_check;
  });

  // Fetch audio devices and compute devices on mount
  $effect(() => {
    fetchAudioDevices();
    fetchComputeDevices();
  });

  async function fetchAudioDevices() {
    try {
      const data = await backendStore.apiGet<{
        devices: { id: string; name: string }[];
      }>("/api/audio-devices");
      audioDevices = data.devices ?? [];
    } catch {
      audioDevices = [];
    }
  }

  async function fetchComputeDevices() {
    try {
      const data = await backendStore.apiGet<{
        devices: { id: string; name: string }[];
      }>("/api/compute-devices");
      computeDevices = data.devices ?? [];
    } catch {
      computeDevices = [
        { id: "auto", name: "Auto" },
        { id: "cpu", name: "CPU" },
        { id: "cuda", name: "CUDA (GPU)" },
      ];
    }
  }

  async function handleSave() {
    const updates = {
      user: {
        name: userName,
      },
      audio: {
        input_device: audioDevice,
      },
      transcription: {
        model,
        device: computeDevice,
        language,
        compute_type: computeType,
        enable_realtime_transcription: enableRealtime,
        realtime_model: realtimeModel,
        realtime_processing_pause: realtimeProcessingPause,
        silero_sensitivity: sileroSensitivity,
        webrtc_sensitivity: webrtcSensitivity,
        post_speech_silence_duration: postSpeechSilence,
        min_length_of_recording: minRecordingLength,
        min_gap_between_recordings: minGapBetween,
        continuous_mode: continuousMode,
      },
      display: {
        show_timestamps: showTimestamps,
        fade_after_seconds: fadeSeconds,
        max_lines: maxLines,
        font_size: fontSize,
        user_color: userColor,
        text_color: textColor,
        background_color: backgroundColor,
      },
      server_sync: {
        enabled: syncEnabled,
        url: syncUrl,
        room: syncRoom,
        passphrase: syncPassphrase,
      },
      remote: {
        mode: remoteMode,
        server_url: remoteServerUrl,
      },
      updates: {
        auto_check: autoCheckUpdates,
      },
    };

    try {
      await configStore.saveConfig(updates);
      onClose();
    } catch (err) {
      console.error("Failed to save settings:", err);
    }
  }

  function handleCancel() {
    onClose();
  }

  async function handleCheckUpdates() {
    try {
      await backendStore.apiPost("/api/check-updates");
    } catch (err) {
      console.error("Failed to check for updates:", err);
    }
  }

  async function handleManagedLogin() {
    try {
      await backendStore.apiPost("/api/remote/login", {
        email: managedEmail,
        password: managedPassword,
      });
    } catch (err) {
      console.error("Login failed:", err);
    }
  }

  async function handleManagedRegister() {
    try {
      await backendStore.apiPost("/api/remote/register", {
        email: managedEmail,
        password: managedPassword,
      });
    } catch (err) {
      console.error("Register failed:", err);
    }
  }

  function handleOverlayClick(e: MouseEvent) {
    if ((e.target as HTMLElement).classList.contains("settings-overlay")) {
      handleCancel();
    }
  }

  function handleKeydown(e: KeyboardEvent) {
    if (e.key === "Escape") {
      handleCancel();
    }
  }
</script>

<svelte:window onkeydown={handleKeydown} />

<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
<div class="settings-overlay" role="presentation" onclick={handleOverlayClick}>
  <div class="settings-panel">
    <div class="settings-header">
      <h2>Settings</h2>
      <button class="close-btn" aria-label="Close settings" onclick={handleCancel}>
        <svg
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>

    <div class="settings-content">
      <!-- User Settings -->
      <section class="settings-section">
        <h3>User Settings</h3>
        <div class="field">
          <label for="user-name">Display Name</label>
          <input id="user-name" type="text" bind:value={userName} />
        </div>
      </section>

      <!-- Audio Settings -->
      <section class="settings-section">
        <h3>Audio Settings</h3>
        <div class="field">
          <label for="audio-device">Audio Device</label>
          <select id="audio-device" bind:value={audioDevice}>
            <option value="default">Default</option>
            {#each audioDevices as device}
              <option value={device.id}>{device.name}</option>
            {/each}
          </select>
        </div>
      </section>

      <!-- Transcription Settings -->
      <section class="settings-section">
        <h3>Transcription Settings</h3>
        <div class="field">
          <label for="model">Model</label>
          <select id="model" bind:value={model}>
            {#each modelOptions as opt}
              <option value={opt}>{opt}</option>
            {/each}
          </select>
        </div>
        <div class="field">
          <label for="language">Language</label>
          <input id="language" type="text" bind:value={language} placeholder="en" />
        </div>
        <div class="field">
          <label for="compute-device">Compute Device</label>
          <select id="compute-device" bind:value={computeDevice}>
            {#each computeDevices as dev}
              <option value={dev.id}>{dev.name}</option>
            {/each}
          </select>
        </div>
        <div class="field">
          <label for="compute-type">Compute Type</label>
          <select id="compute-type" bind:value={computeType}>
            {#each computeTypeOptions as opt}
              <option value={opt.value}>{opt.label}</option>
            {/each}
          </select>
        </div>
      </section>

      <!-- Realtime Preview -->
      <section class="settings-section">
        <h3>Realtime Preview</h3>
        <div class="field-row">
          <label for="enable-realtime">Enable Realtime Preview</label>
          <input
            id="enable-realtime"
            type="checkbox"
            bind:checked={enableRealtime}
          />
        </div>
        {#if enableRealtime}
          <div class="field">
            <label for="realtime-model">Realtime Model</label>
            <select id="realtime-model" bind:value={realtimeModel}>
              {#each modelOptions as opt}
                <option value={opt}>{opt}</option>
              {/each}
            </select>
          </div>
          <div class="field">
            <label for="realtime-pause"
              >Processing Pause: {realtimeProcessingPause.toFixed(2)}s</label
            >
            <input
              id="realtime-pause"
              type="range"
              min="0.01"
              max="1.0"
              step="0.01"
              bind:value={realtimeProcessingPause}
            />
          </div>
        {/if}
      </section>

      <!-- VAD Settings -->
      <section class="settings-section">
        <h3>VAD Settings</h3>
        <div class="field">
          <label for="silero-sensitivity"
            >Silero Sensitivity: {sileroSensitivity.toFixed(2)}</label
          >
          <input
            id="silero-sensitivity"
            type="range"
            min="0.0"
            max="1.0"
            step="0.05"
            bind:value={sileroSensitivity}
          />
        </div>
        <div class="field">
          <label for="webrtc-sensitivity">WebRTC Sensitivity</label>
          <select id="webrtc-sensitivity" bind:value={webrtcSensitivity}>
            {#each webrtcOptions as opt}
              <option value={opt.value}>{opt.label}</option>
            {/each}
          </select>
        </div>
      </section>

      <!-- Timing -->
      <section class="settings-section">
        <h3>Timing</h3>
        <div class="field">
          <label for="post-speech-silence"
            >Post-Speech Silence: {postSpeechSilence.toFixed(2)}s</label
          >
          <input
            id="post-speech-silence"
            type="range"
            min="0.1"
            max="3.0"
            step="0.1"
            bind:value={postSpeechSilence}
          />
        </div>
        <div class="field">
          <label for="min-recording"
            >Min Recording Length: {minRecordingLength.toFixed(2)}s</label
          >
          <input
            id="min-recording"
            type="range"
            min="0.1"
            max="5.0"
            step="0.1"
            bind:value={minRecordingLength}
          />
        </div>
        <div class="field">
          <label for="min-gap"
            >Min Gap Between Recordings: {minGapBetween.toFixed(2)}s</label
          >
          <input
            id="min-gap"
            type="range"
            min="0"
            max="3.0"
            step="0.1"
            bind:value={minGapBetween}
          />
        </div>
        <div class="field-row">
          <label for="continuous-mode">Continuous Mode</label>
          <input
            id="continuous-mode"
            type="checkbox"
            bind:checked={continuousMode}
          />
        </div>
      </section>

      <!-- Display Settings -->
      <section class="settings-section">
        <h3>Display Settings</h3>
        <div class="field-row">
          <label for="show-timestamps">Show Timestamps</label>
          <input
            id="show-timestamps"
            type="checkbox"
            bind:checked={showTimestamps}
          />
        </div>
        <div class="field">
          <label for="fade-seconds"
            >Fade After Seconds: {fadeSeconds} (0 = never)</label
          >
          <input
            id="fade-seconds"
            type="range"
            min="0"
            max="60"
            step="1"
            bind:value={fadeSeconds}
          />
        </div>
        <div class="field">
          <label for="max-lines">Max Lines: {maxLines}</label>
          <input
            id="max-lines"
            type="range"
            min="10"
            max="500"
            step="10"
            bind:value={maxLines}
          />
        </div>
        <div class="field">
          <label for="font-size">Font Size: {fontSize}px</label>
          <input
            id="font-size"
            type="range"
            min="8"
            max="32"
            step="1"
            bind:value={fontSize}
          />
        </div>
      </section>

      <!-- Color Settings -->
      <section class="settings-section">
        <h3>Color Settings</h3>
        <div class="field-row">
          <label for="user-color">User Color</label>
          <input id="user-color" type="color" bind:value={userColor} />
        </div>
        <div class="field-row">
          <label for="text-color">Text Color</label>
          <input id="text-color" type="color" bind:value={textColor} />
        </div>
        <div class="field-row">
          <label for="bg-color">Background Color</label>
          <input id="bg-color" type="color" bind:value={backgroundColor} />
        </div>
      </section>

      <!-- Server Sync -->
      <section class="settings-section">
        <h3>Server Sync</h3>
        <div class="field-row">
          <label for="sync-enabled">Enable Server Sync</label>
          <input
            id="sync-enabled"
            type="checkbox"
            bind:checked={syncEnabled}
          />
        </div>
        {#if syncEnabled}
          <div class="field">
            <label for="sync-url">Server URL</label>
            <input
              id="sync-url"
              type="url"
              bind:value={syncUrl}
              placeholder="http://localhost:3000/api/send"
            />
          </div>
          <div class="field">
            <label for="sync-room">Room</label>
            <input id="sync-room" type="text" bind:value={syncRoom} />
          </div>
          <div class="field">
            <label for="sync-passphrase">Passphrase</label>
            <input
              id="sync-passphrase"
              type="password"
              bind:value={syncPassphrase}
            />
          </div>
        {/if}
      </section>

      <!-- Remote Transcription -->
      <section class="settings-section">
        <h3>Remote Transcription</h3>
        <div class="radio-group">
          <label>
            <input
              type="radio"
              name="remote-mode"
              value="local"
              bind:group={remoteMode}
            />
            Local
          </label>
          <label>
            <input
              type="radio"
              name="remote-mode"
              value="managed"
              bind:group={remoteMode}
            />
            Managed
          </label>
          <label>
            <input
              type="radio"
              name="remote-mode"
              value="byok"
              bind:group={remoteMode}
            />
            BYOK (Bring Your Own Key)
          </label>
        </div>
        {#if remoteMode !== "local"}
          <div class="field">
            <label for="remote-url">Server URL</label>
            <input
              id="remote-url"
              type="url"
              bind:value={remoteServerUrl}
              placeholder="wss://your-proxy.com"
            />
          </div>
        {/if}
        {#if remoteMode === "managed"}
          <div class="managed-auth">
            <div class="field">
              <label for="managed-email">Email</label>
              <input
                id="managed-email"
                type="email"
                bind:value={managedEmail}
                placeholder="email@example.com"
              />
            </div>
            <div class="field">
              <label for="managed-password">Password</label>
              <input
                id="managed-password"
                type="password"
                bind:value={managedPassword}
              />
            </div>
            <div class="auth-buttons">
              <button onclick={handleManagedLogin}>Login</button>
              <button onclick={handleManagedRegister}>Register</button>
            </div>
          </div>
        {/if}
      </section>

      <!-- Updates -->
      <section class="settings-section">
        <h3>Updates</h3>
        <div class="field-row">
          <label for="auto-check-updates">Auto-Check for Updates</label>
          <input
            id="auto-check-updates"
            type="checkbox"
            bind:checked={autoCheckUpdates}
          />
        </div>
        <button onclick={handleCheckUpdates}>Check Now</button>
      </section>
    </div>

    <div class="settings-footer">
      <button onclick={handleCancel}>Cancel</button>
      <button class="primary" onclick={handleSave}>Save</button>
    </div>
  </div>
</div>

<style>
  .settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .settings-panel {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 560px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  .settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
  }

  .settings-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
  }

  .close-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
  }

  .settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
  }

  .settings-section {
    margin-bottom: 24px;
  }

  .settings-section:last-child {
    margin-bottom: 0;
  }

  .settings-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
  }

  .field {
    margin-bottom: 12px;
  }

  .field label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-secondary);
  }

  .field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .field-row label {
    font-size: 13px;
    color: var(--text-primary);
  }

  .radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }

  .radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
  }

  .managed-auth {
    margin-top: 8px;
    padding: 12px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
  }

  .auth-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }

  .settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
  }
</style>