Add notes list toggle shortcut (#145)

Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/145

src/lib/components/AppLayout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount, onDestroy, tick } from 'svelte';
 	import { listen } from '@tauri-apps/api/event';
 	import Sidebar from './Sidebar.svelte';
 	import NoteList from './NoteList.svelte';
@@ -15,6 +15,7 @@
 		sidebarWidth,
 		notelistWidth,
 		sidebarCollapsed,
+		notelistCollapsed,
 		collapsedNotebooks,
 		showSearch,
 		showCommandPalette,
@@ -200,6 +201,7 @@
 			sidebar_width: $sidebarWidth,
 			notelist_width: $notelistWidth,
 			sidebar_collapsed: $sidebarCollapsed,
+			notelist_collapsed: $notelistCollapsed,
 			collapsed_notebooks: $collapsedNotebooks,
 			notebook_sort_mode: $notebookSortMode,
 			notebook_order: $notebookOrder,
@@ -227,6 +229,19 @@
 		persistState();
 	}
 
+	function revealNoteList() {
+		$notelistCollapsed = false;
+		tick().then(() => noteList?.refresh());
+	}
+
+	function toggleNoteList() {
+		const nextCollapsed = !$notelistCollapsed;
+		$notelistCollapsed = nextCollapsed;
+		if (!nextCollapsed) {
+			tick().then(() => noteList?.refresh());
+		}
+	}
+
 	// Tasks view: the editor pane shows a placeholder until a task is opened from the list.
 	let taskNoteOpened = $state(false);
 
@@ -455,9 +470,13 @@
 				openNoteWindow($activeNotePath, $activeNote.meta.title);
 			}
 		}
-		if (mod && e.key === '\\') {
+		if (mod && (code === 'Backslash' || e.key === '\\' || e.key === '|')) {
 			e.preventDefault();
-			$sidebarCollapsed = !$sidebarCollapsed;
+			if (e.shiftKey) {
+				toggleNoteList();
+			} else {
+				$sidebarCollapsed = !$sidebarCollapsed;
+			}
 			return;
 		}
 		if (mod && e.shiftKey && code === 'KeyE') {
@@ -512,6 +531,12 @@
 		persistState();
 	});
 
+	$effect(() => {
+		$sidebarCollapsed;
+		$notelistCollapsed;
+		persistState();
+	});
+
 	$effect(() => {
 		$notebookSortMode;
 		$notebookOrder;
@@ -544,6 +569,7 @@
 			$sidebarWidth = state.sidebar_width;
 			$notelistWidth = state.notelist_width;
 			$sidebarCollapsed = state.sidebar_collapsed;
+			$notelistCollapsed = state.notelist_collapsed ?? false;
 			$collapsedNotebooks = state.collapsed_notebooks ?? [];
 			$notebookSortMode = state.notebook_sort_mode === 'manual' ? 'manual' : 'alphabetical';
 			$notebookOrder = state.notebook_order ?? {};
@@ -905,11 +931,24 @@
 					<ResizeHandle onResize={handleSidebarResize} />
 				{/if}
 
-				<div class="notelist-panel" style="width: {$notelistWidth}px">
-					<NoteList bind:this={noteList} onNoteSelected={handleNoteSelected} onBeforeNoteSwitch={() => editor?.flushSave()} onNoteMoved={() => sidebar?.refresh()} onNoteCreated={() => { editor?.focusTitle(); sidebar?.refresh(); }} onToggleTask={toggleTask} onSetTaskPriority={changeTaskPriority} onSetTaskDue={changeTaskDue} />
-				</div>
+				{#if !$notelistCollapsed}
+					<div class="notelist-panel" style="width: {$notelistWidth}px">
+						<NoteList bind:this={noteList} onNoteSelected={handleNoteSelected} onBeforeNoteSwitch={() => editor?.flushSave()} onNoteMoved={() => sidebar?.refresh()} onNoteCreated={() => { editor?.focusTitle(); sidebar?.refresh(); }} onToggleTask={toggleTask} onSetTaskPriority={changeTaskPriority} onSetTaskDue={changeTaskDue} />
+					</div>
 
-				<ResizeHandle onResize={handleNotelistResize} />
+					<ResizeHandle onResize={handleNotelistResize} />
+				{:else}
+					<div class="notelist-restore-panel">
+						<button class="notelist-restore-btn" onclick={revealNoteList} title={`Show notes list (${isMac ? '⌘' : 'Ctrl'}+Shift+\\)`} aria-label="Show notes list">
+							<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<line x1="8" y1="6" x2="20" y2="6" />
+								<line x1="8" y1="12" x2="20" y2="12" />
+								<line x1="8" y1="18" x2="20" y2="18" />
+								<polyline points="5 8 3 12 5 16" />
+							</svg>
+						</button>
+					</div>
+				{/if}
 			{/if}
 
 			<div class="editor-panel">
@@ -959,6 +998,36 @@
 		overflow: hidden;
 	}
 
+	.notelist-restore-panel {
+		flex-shrink: 0;
+		width: 36px;
+		height: 100%;
+		padding-top: 8px;
+		display: flex;
+		justify-content: center;
+		background: var(--bg-primary);
+		border-right: 1px solid var(--border-color);
+	}
+
+	.notelist-restore-btn {
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		border: none;
+		border-radius: 4px;
+		background: transparent;
+		color: var(--text-tertiary);
+		cursor: pointer;
+	}
+
+	.notelist-restore-btn:hover {
+		background: var(--bg-hover);
+		color: var(--text-primary);
+	}
+
 	.editor-panel {
 		flex: 1;
 		height: 100%;

src/lib/components/InfoPanel.svelte

@@ -168,6 +168,7 @@
 
 						<h4 class="shortcuts-group-title">Interface</h4>
 						<div class="shortcut-row"><span class="shortcut-desc">Toggle sidebar</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>\</kbd></span></div>
+						<div class="shortcut-row"><span class="shortcut-desc">Toggle notes list</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>\</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Toggle dark / light theme</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Toggle focus mode</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>E</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Toggle read-only</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd></span></div>

src/lib/components/NoteList.svelte

@@ -12,6 +12,7 @@
 		editorDirty,
 		quickAccessPaths,
 		appConfig,
+		notelistCollapsed,
 		notebooks,
 		tags,
 		mobileView
@@ -861,6 +862,16 @@
 	<div class="list-header">
 		<span class="list-title">{viewTitle}</span>
 		<div class="list-actions">
+			{#if !isMobile}
+				<button class="icon-btn" onclick={() => ($notelistCollapsed = true)} title={`Hide notes list (${modKey}+Shift+\\)`} aria-label="Hide notes list">
+					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<line x1="4" y1="6" x2="16" y2="6" />
+						<line x1="4" y1="12" x2="16" y2="12" />
+						<line x1="4" y1="18" x2="16" y2="18" />
+						<polyline points="19 8 21 12 19 16" />
+					</svg>
+				</button>
+			{/if}
 			{#if $viewMode !== 'tasks'}
 			{#if isAndroid}
 				<button class="icon-btn" class:active-toggle={multiSelectMode} onclick={() => { multiSelectMode = !multiSelectMode; if (!multiSelectMode) clearSelection(); }} title="Multi-select">

src/lib/stores/app.ts

@@ -21,6 +21,7 @@ export const tasksHideCompleted = writable<boolean>(true);
 export const tasksOnlyFlagged = writable<boolean>(false);
 export const tasksSort = writable<"due" | "priority" | "note">("due");
 export const sidebarCollapsed = writable(false);
+export const notelistCollapsed = writable(false);
 export const sidebarWidth = writable(220);
 export const notelistWidth = writable(280);
 export const searchQuery = writable("");
@@ -212,6 +213,7 @@ export const vaultState = derived(
     sidebarWidth,
     notelistWidth,
     sidebarCollapsed,
+    notelistCollapsed,
     collapsedNotebooks,
     notebookSortMode,
     notebookOrder,
@@ -221,6 +223,7 @@ export const vaultState = derived(
     $sidebarWidth,
     $notelistWidth,
     $sidebarCollapsed,
+    $notelistCollapsed,
     $collapsedNotebooks,
     $notebookSortMode,
     $notebookOrder,
@@ -230,6 +233,7 @@ export const vaultState = derived(
       sidebar_width: $sidebarWidth,
       notelist_width: $notelistWidth,
       sidebar_collapsed: $sidebarCollapsed,
+      notelist_collapsed: $notelistCollapsed,
       collapsed_notebooks: $collapsedNotebooks,
       notebook_sort_mode: $notebookSortMode,
       notebook_order: $notebookOrder,

src/lib/types.ts

@@ -105,6 +105,7 @@ export interface VaultState {
   sidebar_width: number;
   notelist_width: number;
   sidebar_collapsed: boolean;
+  notelist_collapsed: boolean;
   collapsed_notebooks: string[];
   notebook_sort_mode?: string;
   notebook_order?: Record<string, number>;