feat: enhance settings panel with unsaved changes confirmation and add open in explorer functionality

Author: tphakala

messages/en.json

@@ -41,9 +41,14 @@
 
   "settings_storage_title": "Storage",
   "settings_storage_clipDir": "Clip Output Directory",
+  "settings_storage_openClipDir": "Open clip directory",
   "settings_storage_dbLocation": "Database Location",
 
   "settings_saved": "Saved",
+  "settings_unsavedModal_title": "Unsaved Changes",
+  "settings_unsavedModal_warning": "You have unsaved settings changes. If you leave now, your changes will be lost.",
+  "settings_unsavedModal_discard": "Discard Changes",
+  "settings_unsavedModal_stayOnPage": "Stay on Page",
 
   "settings_models_installed": "Installed",
   "settings_models_catalog": "Catalog",
@@ -192,6 +197,8 @@
   "analysis_openFolder": "Open Folder",
   "analysis_model": "Model",
   "analysis_locationDate": "Location & Date",
+  "analysis_statusCoords": "Coords",
+  "analysis_statusDate": "Date",
   "analysis_previousLocation": "Previous location...",
   "analysis_recordingDatePlaceholder": "Recording date...",
   "analysis_recordingDate": "Recording Date",

src/main/ipc/settings.ts

@@ -1,4 +1,4 @@
-import { ipcMain, dialog, app } from 'electron';
+import { ipcMain, dialog, shell, app } from 'electron';
 import fs from 'fs';
 import path from 'path';
 import { getConfig, getConfigPath } from '../birda/config';
@@ -116,13 +116,18 @@ export async function registerSettingsHandlers(): Promise<void> {
     return result.canceled ? null : result.filePaths[0];
   });
 
-  ipcMain.handle('fs:open-folder-dialog', async (_event) => {
+  ipcMain.handle('fs:open-folder-dialog', async (_event, defaultPath?: string) => {
     const result = await dialog.showOpenDialog({
       properties: ['openDirectory'],
+      ...(defaultPath ? { defaultPath } : {}),
     });
     return result.canceled ? null : result.filePaths[0];
   });
 
+  ipcMain.handle('fs:open-in-explorer', async (_event, folderPath: string) => {
+    await shell.openPath(folderPath);
+  });
+
   ipcMain.handle('fs:read-coordinates', async (_event, folderPath: string) => {
     const coordFile = path.join(folderPath, 'coordinates.txt');
     try {

src/preload/index.ts

@@ -34,6 +34,7 @@ const ALLOWED_INVOKE_CHANNELS = new Set([
   'fs:open-folder-dialog',
   'fs:read-coordinates',
   'fs:scan-source',
+  'fs:open-in-explorer',
 ]);
 
 const ALLOWED_RECEIVE_CHANNELS = new Set([

src/renderer/src/app.css

@@ -91,6 +91,19 @@
   --noise: 0;
 }
 
+/* Opt in to stylable select popups (Chromium 134+) */
+.select {
+  appearance: base-select;
+}
+
+.select::picker(select) {
+  border: 1px solid var(--color-base-300);
+  border-radius: var(--radius-box);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
 /* Override daisyUI double-border focus style with a clean single highlight */
 .input:focus,
 .input:focus-within,

src/renderer/src/lib/components/SettingsPanel.svelte

@@ -24,6 +24,7 @@
     getBirdaConfig,
     openExecutableDialog,
     openFolderDialog,
+    openInExplorer,
     getAvailableLanguages,
     getCatalogStats,
     clearDatabase,
@@ -96,6 +97,7 @@
   let birdaStatus = $state<{ available: boolean; path?: string; error?: string } | null>(null);
   let birdaConfig = $state<Record<string, unknown> | null>(null);
   let availableLanguages = $state<{ code: string; name: string }[]>([]);
+  let savedSettings = $state<AppSettings | null>(null);
   let saving = $state(false);
   let saved = $state(false);
   let error = $state<string | null>(null);
@@ -143,10 +145,19 @@
     appState.theme = settings.theme;
   });
 
+  $effect(() => {
+    if (!savedSettings) {
+      appState.settingsHasUnsavedChanges = false;
+      return;
+    }
+    appState.settingsHasUnsavedChanges = JSON.stringify($state.snapshot(settings)) !== JSON.stringify(savedSettings);
+  });
+
   async function load() {
     try {
       const loaded = await getSettings();
       settings = { ...settings, ...loaded };
+      savedSettings = structuredClone($state.snapshot(settings));
       appState.theme = loaded.theme;
 
       birdaStatus = await checkBirda();
@@ -200,6 +211,7 @@
     error = null;
     try {
       settings = await setSettings($state.snapshot(settings));
+      savedSettings = structuredClone($state.snapshot(settings));
     } catch (e) {
       error = (e as Error).message;
     } finally {
@@ -214,6 +226,7 @@
     try {
       const previousLang = settings.ui_language;
       settings = await setSettings($state.snapshot(settings));
+      savedSettings = structuredClone($state.snapshot(settings));
       birdaStatus = await checkBirda();
 
       // If UI language changed, reload to apply new locale
@@ -238,7 +251,7 @@
   }
 
   async function browseClipDir() {
-    const path = await openFolderDialog();
+    const path = await openFolderDialog(settings.clip_output_dir || undefined);
     if (path) settings.clip_output_dir = path;
   }
 
@@ -263,6 +276,7 @@
   onDestroy(() => {
     if (savedTimer) clearTimeout(savedTimer);
     if (clearResultTimer) clearTimeout(clearResultTimer);
+    appState.settingsHasUnsavedChanges = false;
   });
 </script>
 
@@ -437,6 +451,14 @@
             <span class="text-base-content/70 text-sm font-medium">{m.settings_storage_clipDir()}</span>
             <div class="mt-1 flex gap-2">
               <input type="text" bind:value={settings.clip_output_dir} class="input input-bordered flex-1" />
+              <button
+                onclick={() => settings.clip_output_dir && openInExplorer(settings.clip_output_dir)}
+                disabled={!settings.clip_output_dir}
+                class="btn btn-outline gap-1.5"
+                title={m.settings_storage_openClipDir()}
+              >
+                <ExternalLink size={16} />
+              </button>
               <button onclick={browseClipDir} class="btn btn-outline gap-1.5">
                 <FolderOpen size={16} />
                 {m.common_button_browse()}

src/renderer/src/lib/components/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AudioLines, List, Map, Settings } from '@lucide/svelte';
+  import { AudioLines, List, Map, Settings, TriangleAlert } from '@lucide/svelte';
   import { appState, type Tab } from '$lib/stores/app.svelte';
   import * as m from '$paraglide/messages';
 
@@ -9,13 +9,37 @@
     { id: 'map', label: m.sidebar_map(), icon: Map },
     { id: 'settings', label: m.sidebar_settings(), icon: Settings },
   ];
+
+  let pendingTab = $state<Tab | null>(null);
+
+  function handleTabClick(tabId: Tab) {
+    if (tabId === appState.activeTab) return;
+    if (appState.activeTab === 'settings' && appState.settingsHasUnsavedChanges) {
+      pendingTab = tabId;
+      return;
+    }
+    appState.activeTab = tabId;
+  }
+
+  function confirmDiscard() {
+    if (pendingTab) {
+      appState.activeTab = pendingTab;
+      pendingTab = null;
+    }
+  }
+
+  function cancelDiscard() {
+    pendingTab = null;
+  }
 </script>
 
 <nav class="border-base-300 bg-base-200 flex w-[72px] shrink-0 flex-col border-r">
   <div class="flex flex-col gap-1 py-2">
     {#each tabs as tab (tab.id)}
       <button
-        onclick={() => (appState.activeTab = tab.id)}
+        onclick={() => {
+          handleTabClick(tab.id);
+        }}
         class="relative mx-auto flex w-full flex-col items-center gap-0.5 px-1 py-2.5 transition-colors
           {appState.activeTab === tab.id
           ? 'text-primary'
@@ -32,3 +56,29 @@
     {/each}
   </div>
 </nav>
+
+<!-- Unsaved Settings Confirmation Modal -->
+{#if pendingTab}
+  <dialog class="modal modal-open">
+    <div class="modal-box">
+      <div class="text-warning flex items-center gap-3">
+        <TriangleAlert size={24} />
+        <h3 class="text-lg font-semibold">{m.settings_unsavedModal_title()}</h3>
+      </div>
+      <p class="text-base-content/70 mt-3 text-sm">
+        {m.settings_unsavedModal_warning()}
+      </p>
+      <div class="modal-action">
+        <button onclick={confirmDiscard} class="btn btn-warning">
+          {m.settings_unsavedModal_discard()}
+        </button>
+        <button onclick={cancelDiscard} class="btn btn-primary">
+          {m.settings_unsavedModal_stayOnPage()}
+        </button>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button onclick={cancelDiscard}>close</button>
+    </form>
+  </dialog>
+{/if}

src/renderer/src/lib/stores/app.svelte.ts

@@ -20,4 +20,5 @@ export const appState = $state({
   lastRunId: null as number | null,
   lastSourceFile: null as string | null,
   theme: 'system' as 'system' | 'light' | 'dark',
+  settingsHasUnsavedChanges: false,
 });

src/renderer/src/lib/utils/ipc.ts

@@ -122,8 +122,12 @@ export function openExecutableDialog(): Promise<string | null> {
   return window.birda.invoke('fs:open-executable-dialog') as Promise<string | null>;
 }
 
-export function openFolderDialog(): Promise<string | null> {
-  return window.birda.invoke('fs:open-folder-dialog') as Promise<string | null>;
+export function openFolderDialog(defaultPath?: string): Promise<string | null> {
+  return window.birda.invoke('fs:open-folder-dialog', defaultPath) as Promise<string | null>;
+}
+
+export function openInExplorer(folderPath: string): Promise<void> {
+  return window.birda.invoke('fs:open-in-explorer', folderPath) as Promise<void>;
 }
 
 export function scanSource(sourcePath: string): Promise<SourceScanResult> {

src/renderer/src/pages/AnalysisPage.svelte

@@ -11,6 +11,8 @@
     ChevronLeft,
     ChevronRight,
     TriangleAlert,
+    Check,
+    Minus,
   } from '@lucide/svelte';
   import AnalysisTable from '$lib/components/AnalysisTable.svelte';
   import CoordinateInput from '$lib/components/CoordinateInput.svelte';
@@ -499,7 +501,19 @@
 
         <!-- Location & Date section -->
         <div class="border-base-300 space-y-3 rounded-lg border p-3">
-          <h3 class="text-base-content/50 text-xs font-medium">{m.analysis_locationDate()}</h3>
+          <div class="flex items-center gap-1.5">
+            <h3 class="text-base-content/50 text-xs font-medium">{m.analysis_locationDate()}</h3>
+            <div class="ml-auto flex gap-1">
+              <span class="badge badge-xs gap-0.5 {hasCoords ? 'badge-success' : 'badge-ghost text-base-content/30'}">
+                {#if hasCoords}<Check size={10} />{:else}<Minus size={10} />{/if}
+                {m.analysis_statusCoords()}
+              </span>
+              <span class="badge badge-xs gap-0.5 {hasDate ? 'badge-success' : 'badge-ghost text-base-content/30'}">
+                {#if hasDate}<Check size={10} />{:else}<Minus size={10} />{/if}
+                {m.analysis_statusDate()}
+              </span>
+            </div>
+          </div>
 
           <!-- Previous locations dropdown -->
           {#if previousLocations.length > 0}
@@ -581,7 +595,7 @@
           {:else}
             <button
               onclick={handleStartClick}
-              class="btn btn-primary shadow-primary/25 hover:shadow-primary/30 w-full gap-2 shadow-lg transition-all duration-200 hover:shadow-xl hover:brightness-110"
+              class="btn btn-primary w-full gap-2 transition-all duration-200 hover:brightness-110"
             >
               <Play size={18} />
               {m.analysis_startAnalysis()}