Add "Show Hidden Files" menu item

vdavid · vdavid · commit 4af855d7f128 · 2025-12-26T19:58:55.000+01:00
This is the first menu we're adding!
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -23,6 +23,7 @@ tauri = { version = "2", features = [] }
 tauri-plugin-opener = "2"
 tauri-plugin-store = "2"
 serde = { version = "1", features = ["derive"] }
+serde_json = "1"
 notify = "8"
 dirs = "6"
 
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
@@ -3,6 +3,10 @@
 
 mod commands;
 mod file_system;
+mod menu;
+
+use menu::{MenuState, SHOW_HIDDEN_FILES_ID};
+use tauri::{Emitter, Manager};
 
 // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
 #[tauri::command]
@@ -21,6 +25,36 @@ pub fn run() {
     builder
         .plugin(tauri_plugin_store::Builder::new().build())
         .plugin(tauri_plugin_opener::init())
+        .setup(|app| {
+            // Build and set the application menu
+            // Default to showing hidden files (true)
+            let (menu, show_hidden_item) = menu::build_menu(app.handle(), true)?;
+            app.set_menu(menu)?;
+
+            // Store the CheckMenuItem reference in app state
+            let menu_state = MenuState::default();
+            *menu_state.show_hidden_files.lock().unwrap() = Some(show_hidden_item);
+            app.manage(menu_state);
+
+            Ok(())
+        })
+        .on_menu_event(|app, event| {
+            if event.id().as_ref() == SHOW_HIDDEN_FILES_ID {
+                // Get the CheckMenuItem from app state
+                let menu_state = app.state::<MenuState<tauri::Wry>>();
+                let guard = menu_state.show_hidden_files.lock().unwrap();
+                let Some(check_item) = guard.as_ref() else {
+                    return;
+                };
+
+                // CheckMenuItem auto-toggles on click, so is_checked() returns the NEW state
+                // We just need to read and emit it, not toggle again
+                let new_state = check_item.is_checked().unwrap_or(true);
+
+                // Emit event to frontend with the new state
+                let _ = app.emit("settings-changed", serde_json::json!({ "showHiddenFiles": new_state }));
+            }
+        })
         .invoke_handler(tauri::generate_handler![
             greet,
             commands::file_system::list_directory_contents,
diff --git a/src-tauri/src/menu.rs b/src-tauri/src/menu.rs
@@ -0,0 +1,75 @@
+//! Application menu configuration.
+
+use std::sync::Mutex;
+use tauri::{
+    AppHandle, Runtime,
+    menu::{CheckMenuItem, Menu, Submenu},
+};
+
+/// Menu item ID for the "Show Hidden Files" toggle.
+pub const SHOW_HIDDEN_FILES_ID: &str = "show_hidden_files";
+
+/// Stores references to menu items that need to be accessed later.
+pub struct MenuState<R: Runtime> {
+    pub show_hidden_files: Mutex<Option<CheckMenuItem<R>>>,
+}
+
+impl<R: Runtime> Default for MenuState<R> {
+    fn default() -> Self {
+        Self {
+            show_hidden_files: Mutex::new(None),
+        }
+    }
+}
+
+/// Builds the application menu with default macOS items plus a custom View submenu.
+///
+/// This preserves the standard macOS app menu (About, Hide, Quit, etc.) and adds
+/// our Show Hidden Files item to the existing View menu.
+///
+/// # Arguments
+/// * `app` - The Tauri app handle
+/// * `show_hidden_files` - Initial checked state for the "Show Hidden Files" item
+///
+/// # Returns
+/// A tuple of (Menu, CheckMenuItem) so the caller can store the CheckMenuItem reference
+pub fn build_menu<R: Runtime>(
+    app: &AppHandle<R>,
+    show_hidden_files: bool,
+) -> tauri::Result<(Menu<R>, CheckMenuItem<R>)> {
+    // Start with the default menu (includes app menu with Quit, Hide, etc.)
+    let menu = Menu::default(app)?;
+
+    // Create our Show Hidden Files toggle
+    let show_hidden_item = CheckMenuItem::with_id(
+        app,
+        SHOW_HIDDEN_FILES_ID,
+        "Show Hidden Files",
+        true, // enabled
+        show_hidden_files,
+        Some("Cmd+Shift+."),
+    )?;
+
+    // Find the existing View submenu and add our item to it
+    // The default menu on macOS has: App, File, Edit, View, Window, Help
+    let mut found_view = false;
+    for item in menu.items()? {
+        if let tauri::menu::MenuItemKind::Submenu(submenu) = item
+            && submenu.text()? == "View"
+        {
+            // Add separator then our item
+            submenu.append(&tauri::menu::PredefinedMenuItem::separator(app)?)?;
+            submenu.append(&show_hidden_item)?;
+            found_view = true;
+            break;
+        }
+    }
+
+    // If View menu wasn't found (unlikely), create one
+    if !found_view {
+        let view_menu = Submenu::with_items(app, "View", true, &[&show_hidden_item])?;
+        menu.append(&view_menu)?;
+    }
+
+    Ok((menu, show_hidden_item))
+}
diff --git a/src/lib/file-explorer/DualPaneExplorer.svelte b/src/lib/file-explorer/DualPaneExplorer.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
-    import { onMount } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
     import FilePane from './FilePane.svelte'
     import { loadAppStatus, saveAppStatus } from '$lib/app-status-store'
+    import { loadSettings, saveSettings, subscribeToSettingsChanges } from '$lib/settings-store'
     import { pathExists } from '$lib/tauri-commands'
+    import type { UnlistenFn } from '@tauri-apps/api/event'
 
     let leftPath = $state('~')
     let rightPath = $state('~')
     let focusedPane = $state<'left' | 'right'>('left')
+    let showHiddenFiles = $state(true)
     let initialized = $state(false)
 
     let containerElement: HTMLDivElement | undefined = $state()
     let leftPaneRef: FilePane | undefined = $state()
     let rightPaneRef: FilePane | undefined = $state()
+    let unlistenSettings: UnlistenFn | undefined
 
     function handleLeftPathChange(path: string) {
         leftPath = path
@@ -56,16 +60,30 @@
         activePaneRef?.handleKeyDown(e)
     }
 
-    onMount(() => {
-        // Load persisted state
-        void loadAppStatus(pathExists).then((status) => {
-            leftPath = status.leftPath
-            rightPath = status.rightPath
-            focusedPane = status.focusedPane
-            initialized = true
+    onMount(async () => {
+        // Load persisted state and settings in parallel
+        const [status, settings] = await Promise.all([loadAppStatus(pathExists), loadSettings()])
+
+        leftPath = status.leftPath
+        rightPath = status.rightPath
+        focusedPane = status.focusedPane
+        showHiddenFiles = settings.showHiddenFiles
+        initialized = true
+
+        // Subscribe to settings changes from the backend menu
+        unlistenSettings = await subscribeToSettingsChanges((newSettings) => {
+            if (newSettings.showHiddenFiles !== undefined) {
+                showHiddenFiles = newSettings.showHiddenFiles
+                // Persist to settings store
+                void saveSettings({ showHiddenFiles: newSettings.showHiddenFiles })
+            }
         })
     })
 
+    onDestroy(() => {
+        unlistenSettings?.()
+    })
+
     // Focus the container after initialization so keyboard events work
     $effect(() => {
         if (initialized) {
@@ -88,13 +106,15 @@
             bind:this={leftPaneRef}
             initialPath={leftPath}
             isFocused={focusedPane === 'left'}
+            {showHiddenFiles}
             onPathChange={handleLeftPathChange}
             onRequestFocus={handleLeftFocus}
         />
         <FilePane
             bind:this={rightPaneRef}
             initialPath={rightPath}
             isFocused={focusedPane === 'right'}
+            {showHiddenFiles}
             onPathChange={handleRightPathChange}
             onRequestFocus={handleRightFocus}
         />
diff --git a/src/lib/file-explorer/DualPaneExplorer.test.ts b/src/lib/file-explorer/DualPaneExplorer.test.ts
@@ -20,6 +20,15 @@ vi.mock('$lib/tauri-commands', () => ({
     openFile: vi.fn().mockResolvedValue(undefined),
 }))
 
+// Mock settings-store to avoid Tauri event API dependency in tests
+vi.mock('$lib/settings-store', () => ({
+    loadSettings: vi.fn().mockResolvedValue({
+        showHiddenFiles: true,
+    }),
+    saveSettings: vi.fn().mockResolvedValue(undefined),
+    subscribeToSettingsChanges: vi.fn().mockResolvedValue(() => {}),
+}))
+
 describe('DualPaneExplorer', () => {
     it('renders dual pane container', () => {
         const target = document.createElement('div')
diff --git a/src/lib/file-explorer/FilePane.svelte b/src/lib/file-explorer/FilePane.svelte
@@ -10,6 +10,7 @@
         initialPath: string
         fileService?: FileService
         isFocused?: boolean
+        showHiddenFiles?: boolean
         onPathChange?: (path: string) => void
         onRequestFocus?: () => void
     }
@@ -18,17 +19,28 @@
         initialPath,
         fileService = defaultFileService,
         isFocused = false,
+        showHiddenFiles = true,
         onPathChange,
         onRequestFocus,
     }: Props = $props()
 
     let currentPath = $state(initialPath)
-    let files = $state<FileEntry[]>([])
+    let allFiles = $state<FileEntry[]>([])
     let loading = $state(true)
     let error = $state<string | null>(null)
     let selectedIndex = $state(0)
     let fileListRef: FileList | undefined = $state()
 
+    // Filter files based on showHiddenFiles setting
+    // Always keep ".." visible for parent navigation
+    function filterFiles(entries: FileEntry[], showHidden: boolean): FileEntry[] {
+        if (showHidden) return entries
+        return entries.filter((e) => !e.name.startsWith('.') || e.name === '..')
+    }
+
+    // Compute visible files based on showHiddenFiles prop
+    const files = $derived(filterFiles(allFiles, showHiddenFiles))
+
     // Create ".." entry for parent navigation
     function createParentEntry(path: string): FileEntry | null {
         if (path === '/') return null
@@ -46,18 +58,22 @@
         try {
             const entries = await fileService.listDirectory(path)
             const parentEntry = createParentEntry(path)
-            files = parentEntry ? [parentEntry, ...entries] : entries
+            allFiles = parentEntry ? [parentEntry, ...entries] : entries
 
             // If selectName is provided, find and select that entry
+            // But only if it's visible (not filtered out)
             if (selectName) {
-                const targetIndex = files.findIndex((f) => f.name === selectName)
+                const visibleFiles = filterFiles(allFiles, showHiddenFiles)
+                const targetIndex = visibleFiles.findIndex((f) => f.name === selectName)
+                // If target is hidden (e.g., navigating up from .config with hidden files off),
+                // fall back to index 0
                 selectedIndex = targetIndex >= 0 ? targetIndex : 0
             } else {
                 selectedIndex = 0
             }
         } catch (e) {
             error = e instanceof Error ? e.message : String(e)
-            files = []
+            allFiles = []
         } finally {
             loading = false
         }
@@ -120,6 +136,16 @@
         }
     })
 
+    // Reset selection when showHiddenFiles changes and current selection becomes invalid
+    $effect(() => {
+        // Re-run when files change (which depends on showHiddenFiles)
+        if (selectedIndex >= files.length && files.length > 0) {
+            selectedIndex = 0
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            fileListRef?.scrollToIndex(0)
+        }
+    })
+
     onMount(() => {
         void loadDirectory(currentPath)
     })
diff --git a/src/lib/file-explorer/FilePane.test.ts b/src/lib/file-explorer/FilePane.test.ts
@@ -85,4 +85,60 @@ describe('FilePane', () => {
 
         expect(target.textContent).not.toContain('[..]')
     })
+
+    it('hides hidden files when showHiddenFiles is false', async () => {
+        const filesWithHidden: FileEntry[] = [
+            { name: '.hidden', path: '/test/.hidden', isDirectory: false },
+            { name: '.config', path: '/test/.config', isDirectory: true },
+            { name: 'visible.txt', path: '/test/visible.txt', isDirectory: false },
+        ]
+        mockService.setMockData('/test', filesWithHidden)
+        const target = document.createElement('div')
+        mount(FilePane, {
+            target,
+            props: { initialPath: '/test', fileService: mockService, showHiddenFiles: false },
+        })
+
+        await tick()
+        await tick()
+
+        expect(target.textContent).toContain('visible.txt')
+        expect(target.textContent).not.toContain('.hidden')
+        expect(target.textContent).not.toContain('[.config]')
+    })
+
+    it('shows hidden files when showHiddenFiles is true', async () => {
+        const filesWithHidden: FileEntry[] = [
+            { name: '.hidden', path: '/test/.hidden', isDirectory: false },
+            { name: 'visible.txt', path: '/test/visible.txt', isDirectory: false },
+        ]
+        mockService.setMockData('/test', filesWithHidden)
+        const target = document.createElement('div')
+        mount(FilePane, {
+            target,
+            props: { initialPath: '/test', fileService: mockService, showHiddenFiles: true },
+        })
+
+        await tick()
+        await tick()
+
+        expect(target.textContent).toContain('visible.txt')
+        expect(target.textContent).toContain('.hidden')
+    })
+
+    it('always shows .. entry even when showHiddenFiles is false', async () => {
+        const filesWithHidden: FileEntry[] = [{ name: '.hidden', path: '/test/.hidden', isDirectory: false }]
+        mockService.setMockData('/test', filesWithHidden)
+        const target = document.createElement('div')
+        mount(FilePane, {
+            target,
+            props: { initialPath: '/test', fileService: mockService, showHiddenFiles: false },
+        })
+
+        await tick()
+        await tick()
+
+        // Parent entry should still be visible
+        expect(target.textContent).toContain('[..]')
+    })
 })
diff --git a/src/lib/settings-store.ts b/src/lib/settings-store.ts
