From efd4cb39019f0fc4ea30c0a5ddcb94c3cc038eef Mon Sep 17 00:00:00 2001 From: gdilla Date: Fri, 13 Mar 2026 17:22:09 -0700 Subject: [PATCH 1/2] feat: add breadcrumb folder navigation to sidebar - Add clickable breadcrumb path bar showing current folder hierarchy - Separate close-sidebar (hide) from close-folder (clear) actions - Add navigateToFolder action for breadcrumb clicks - Add close-folder icon near breadcrumbs - Tests for breadcrumb parsing and navigation Co-Authored-By: Claude Opus 4.6 (1M context) --- src/__tests__/stores/sidebar.test.ts | 101 +++++++++++++++++++++++++- src/components/sidebar/Sidebar.vue | 105 +++++++++++++++++++++++++-- src/stores/sidebar.ts | 63 +++++++++++++++- src/types/filetree.ts | 10 +++ 4 files changed, 265 insertions(+), 14 deletions(-) diff --git a/src/__tests__/stores/sidebar.test.ts b/src/__tests__/stores/sidebar.test.ts index 9384d6d..bf501bd 100644 --- a/src/__tests__/stores/sidebar.test.ts +++ b/src/__tests__/stores/sidebar.test.ts @@ -1,10 +1,14 @@ -import { describe, it, expect, beforeEach } from 'vitest' +import { describe, it, expect, beforeEach, vi } from 'vitest' import { createPinia, setActivePinia } from 'pinia' import { useSidebarStore } from '../../stores/sidebar' +import { invoke } from '@tauri-apps/api/core' + +const mockedInvoke = vi.mocked(invoke) describe('useSidebarStore', () => { beforeEach(() => { setActivePinia(createPinia()) + vi.clearAllMocks() }) it('defaults to not visible with no root path', () => { @@ -85,8 +89,75 @@ describe('useSidebarStore', () => { }) }) + describe('breadcrumbSegments', () => { + it('returns empty array when no root path', () => { + const store = useSidebarStore() + + expect(store.breadcrumbSegments).toEqual([]) + }) + + it('parses absolute path into segments', () => { + const store = useSidebarStore() + + store.rootPath = '/Users/gautambanerjee/projects/Leaf' + + expect(store.breadcrumbSegments).toEqual([ + { name: '~', path: '/Users/gautambanerjee' }, + { name: 'projects', path: '/Users/gautambanerjee/projects' }, + { name: 'Leaf', path: '/Users/gautambanerjee/projects/Leaf' }, + ]) + }) + + it('uses ~ shorthand for home directory on macOS', () => { + const store = useSidebarStore() + + store.rootPath = '/Users/testuser/Documents' + + expect(store.breadcrumbSegments[0]).toEqual({ + name: '~', + path: '/Users/testuser', + }) + expect(store.breadcrumbSegments[1]).toEqual({ + name: 'Documents', + path: '/Users/testuser/Documents', + }) + }) + + it('uses ~ shorthand for home directory on Linux', () => { + const store = useSidebarStore() + + store.rootPath = '/home/user/code/project' + + expect(store.breadcrumbSegments).toEqual([ + { name: '~', path: '/home/user' }, + { name: 'code', path: '/home/user/code' }, + { name: 'project', path: '/home/user/code/project' }, + ]) + }) + + it('handles path without home directory prefix', () => { + const store = useSidebarStore() + + store.rootPath = '/opt/data/myfiles' + + expect(store.breadcrumbSegments).toEqual([ + { name: 'opt', path: '/opt' }, + { name: 'data', path: '/opt/data' }, + { name: 'myfiles', path: '/opt/data/myfiles' }, + ]) + }) + + it('handles home directory root itself', () => { + const store = useSidebarStore() + + store.rootPath = '/Users/testuser' + + expect(store.breadcrumbSegments).toEqual([{ name: '~', path: '/Users/testuser' }]) + }) + }) + describe('closeFolder', () => { - it('resets state and hides sidebar', () => { + it('resets folder state but does not hide sidebar', () => { const store = useSidebarStore() // Simulate an open folder state @@ -99,7 +170,31 @@ describe('useSidebarStore', () => { expect(store.fileTree).toBeNull() expect(store.rootPath).toBeNull() expect(store.error).toBeNull() - expect(store.visible).toBe(false) + // Sidebar stays visible — user can open another folder + expect(store.visible).toBe(true) + }) + }) + + describe('navigateToFolder', () => { + it('calls openFolder with the given path', async () => { + const store = useSidebarStore() + + const mockTree = { + name: 'projects', + path: '/Users/test/projects', + is_dir: true, + children: [], + } + mockedInvoke.mockResolvedValueOnce(mockTree) + + await store.navigateToFolder('/Users/test/projects') + + expect(mockedInvoke).toHaveBeenCalledWith('read_directory_tree', { + path: '/Users/test/projects', + }) + expect(store.rootPath).toBe('/Users/test/projects') + expect(store.fileTree).toEqual(mockTree) + expect(store.visible).toBe(true) }) }) }) diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue index 8c383fd..6887abe 100644 --- a/src/components/sidebar/Sidebar.vue +++ b/src/components/sidebar/Sidebar.vue @@ -91,13 +91,8 @@ const sidebarStyle = computed(() => ({ /> - - + +
@@ -263,6 +291,69 @@ const sidebarStyle = computed(() => ({ color: var(--sidebar-btn-hover-color, #333); } +.breadcrumb-bar { + display: flex; + align-items: center; + gap: 4px; + padding: 4px 8px; + border-bottom: 1px solid var(--sidebar-border, #e0e0e0); + flex-shrink: 0; + min-height: 24px; +} + +.breadcrumb-segments { + display: flex; + align-items: center; + gap: 2px; + overflow-x: auto; + white-space: nowrap; + flex: 1; + min-width: 0; + font-size: 0.8em; + scrollbar-width: none; +} + +.breadcrumb-segments::-webkit-scrollbar { + display: none; +} + +.breadcrumb-separator { + color: var(--text-secondary, #999); + opacity: 0.6; + flex-shrink: 0; + user-select: none; +} + +.breadcrumb-btn { + border: none; + background: none; + padding: 1px 2px; + cursor: pointer; + color: var(--text-secondary, #999); + font-size: inherit; + font-family: inherit; + border-radius: 2px; + flex-shrink: 0; +} + +.breadcrumb-btn:hover { + text-decoration: underline; + color: var(--sidebar-text-color, #666); +} + +.breadcrumb-current { + color: var(--sidebar-text-color, #333); + font-weight: 600; + flex-shrink: 0; + padding: 1px 2px; +} + +.breadcrumb-close { + width: 20px; + height: 20px; + flex-shrink: 0; +} + .sidebar-content { flex: 1; overflow-y: auto; diff --git a/src/stores/sidebar.ts b/src/stores/sidebar.ts index d1405df..96cd84a 100644 --- a/src/stores/sidebar.ts +++ b/src/stores/sidebar.ts @@ -1,7 +1,7 @@ import { defineStore } from 'pinia' import { ref, computed } from 'vue' import { invoke } from '@tauri-apps/api/core' -import type { FileNode } from '../types/filetree' +import type { FileNode, BreadcrumbSegment } from '../types/filetree' import { useRecentFilesStore } from './recentFiles' export const useSidebarStore = defineStore('sidebar', () => { @@ -33,6 +33,53 @@ export const useSidebarStore = defineStore('sidebar', () => { return parts[parts.length - 1] || rootPath.value }) + /** Detect the home directory prefix (e.g. /Users/username or /home/username) */ + const homeDir = computed(() => { + if (!rootPath.value) return null + // Match /Users/ (macOS) or /home/ (Linux) + const match = rootPath.value.match(/^(\/(?:Users|home)\/[^/]+)/) + return match ? match[1] : null + }) + + /** Breadcrumb segments parsed from rootPath, with ~ shorthand for home */ + const breadcrumbSegments = computed(() => { + if (!rootPath.value) return [] + + const home = homeDir.value + let displayPath = rootPath.value + let basePath = '' + + if (home && rootPath.value.startsWith(home)) { + // Replace home dir with ~ + displayPath = '~' + rootPath.value.slice(home.length) + basePath = home + } + + const parts = displayPath.split('/').filter(Boolean) + const segments: BreadcrumbSegment[] = [] + + if (home && rootPath.value.startsWith(home)) { + // First segment is "~" pointing to home dir + segments.push({ name: '~', path: basePath }) + // Remaining segments after ~ + const remaining = rootPath.value.slice(home.length).split('/').filter(Boolean) + let currentPath = basePath + for (const part of remaining) { + currentPath = currentPath + '/' + part + segments.push({ name: part, path: currentPath }) + } + } else { + // Absolute path without home shorthand + let currentPath = '' + for (const part of parts) { + currentPath = currentPath + '/' + part + segments.push({ name: part, path: currentPath }) + } + } + + return segments + }) + /** * Set the active sidebar panel */ @@ -95,14 +142,20 @@ export const useSidebarStore = defineStore('sidebar', () => { } /** - * Close the currently opened folder. + * Close the currently opened folder (clears tree and path but keeps sidebar visible). */ function closeFolder() { fileTree.value = null rootPath.value = null error.value = null - // Auto-hide sidebar when closing folder (return to single-file mode) - visible.value = false + } + + /** + * Navigate to a folder by path (used by breadcrumb clicks). + * Reloads the file tree for the target directory. + */ + async function navigateToFolder(path: string): Promise { + await openFolder(path) } /** @@ -133,6 +186,7 @@ export const useSidebarStore = defineStore('sidebar', () => { // Computed hasFolderOpen, rootFolderName, + breadcrumbSegments, // Actions setActivePanel, @@ -142,6 +196,7 @@ export const useSidebarStore = defineStore('sidebar', () => { openFolder, refreshTree, closeFolder, + navigateToFolder, openFolderDialog, } }) diff --git a/src/types/filetree.ts b/src/types/filetree.ts index f7e130c..f6fecb9 100644 --- a/src/types/filetree.ts +++ b/src/types/filetree.ts @@ -12,3 +12,13 @@ export interface FileNode { /** Child nodes (only populated for directories) */ children?: FileNode[] } + +/** + * A segment in the breadcrumb path bar. + */ +export interface BreadcrumbSegment { + /** Display name for the segment (folder name, or "~" for home) */ + name: string + /** Absolute path this segment navigates to */ + path: string +} From 71a4a06a818b266f7cdab626b234771c42fa6958 Mon Sep 17 00:00:00 2001 From: gdilla Date: Fri, 13 Mar 2026 18:03:26 -0700 Subject: [PATCH 2/2] perf: add depth limit to directory tree reads - read_dir_recursive now accepts max_depth parameter (default 10) - Breadcrumb navigation uses depth=3 to avoid scanning huge parent trees - Prevents beachball when clicking parent breadcrumb segments - read_directory_tree Tauri command accepts optional maxDepth parameter Co-Authored-By: Claude Opus 4.6 (1M context) --- src-tauri/src/commands/fs.rs | 13 +++++++++---- src/__tests__/stores/sidebar.test.ts | 1 + src/stores/sidebar.ts | 10 +++++++--- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src-tauri/src/commands/fs.rs b/src-tauri/src/commands/fs.rs index 60867d0..846795d 100644 --- a/src-tauri/src/commands/fs.rs +++ b/src-tauri/src/commands/fs.rs @@ -120,7 +120,7 @@ pub struct FileNode { /// /// Hidden files/folders (starting with `.`) are excluded by default. /// Only markdown and common text files are included; all directories are traversed. -fn read_dir_recursive(dir_path: &Path) -> Result, String> { +fn read_dir_recursive(dir_path: &Path, max_depth: u32) -> Result, String> { let entries = fs::read_dir(dir_path) .map_err(|e| format!("Failed to read directory '{}': {}", dir_path.display(), e))?; @@ -141,7 +141,11 @@ fn read_dir_recursive(dir_path: &Path) -> Result, String> { .map_err(|e| format!("Failed to read metadata for '{}': {}", path.display(), e))?; if metadata.is_dir() { - let children = read_dir_recursive(&path)?; + let children = if max_depth > 0 { + read_dir_recursive(&path, max_depth - 1)? + } else { + Vec::new() + }; nodes.push(FileNode { name: file_name, path: path.to_string_lossy().to_string(), @@ -205,7 +209,7 @@ fn read_dir_recursive(dir_path: &Path) -> Result, String> { /// # Returns /// A `FileNode` representing the root folder with its full recursive tree. #[tauri::command] -pub fn read_directory_tree(path: String) -> Result { +pub fn read_directory_tree(path: String, max_depth: Option) -> Result { let dir_path = Path::new(&path); if !dir_path.exists() { @@ -216,7 +220,8 @@ pub fn read_directory_tree(path: String) -> Result { return Err(format!("Path '{}' is not a directory", path)); } - let children = read_dir_recursive(dir_path)?; + let depth = max_depth.unwrap_or(10); + let children = read_dir_recursive(dir_path, depth)?; let root_name = dir_path .file_name() diff --git a/src/__tests__/stores/sidebar.test.ts b/src/__tests__/stores/sidebar.test.ts index bf501bd..be19584 100644 --- a/src/__tests__/stores/sidebar.test.ts +++ b/src/__tests__/stores/sidebar.test.ts @@ -191,6 +191,7 @@ describe('useSidebarStore', () => { expect(mockedInvoke).toHaveBeenCalledWith('read_directory_tree', { path: '/Users/test/projects', + maxDepth: 3, }) expect(store.rootPath).toBe('/Users/test/projects') expect(store.fileTree).toEqual(mockTree) diff --git a/src/stores/sidebar.ts b/src/stores/sidebar.ts index 96cd84a..173bcc4 100644 --- a/src/stores/sidebar.ts +++ b/src/stores/sidebar.ts @@ -112,12 +112,15 @@ export const useSidebarStore = defineStore('sidebar', () => { * Open a folder by path, invoking the Tauri backend to read the directory tree. * Automatically shows the sidebar when a folder is opened. */ - async function openFolder(path: string): Promise { + async function openFolder(path: string, maxDepth?: number): Promise { loading.value = true error.value = null try { - const tree = await invoke('read_directory_tree', { path }) + const tree = await invoke('read_directory_tree', { + path, + maxDepth: maxDepth ?? 10, + }) fileTree.value = tree rootPath.value = path // Automatically show sidebar when opening a folder @@ -155,7 +158,8 @@ export const useSidebarStore = defineStore('sidebar', () => { * Reloads the file tree for the target directory. */ async function navigateToFolder(path: string): Promise { - await openFolder(path) + // Use a shallow depth limit for breadcrumb navigation to avoid scanning huge parent trees + await openFolder(path, 3) } /**