From 7624c42e02825e59b10861a5fe3e95929a6f688b Mon Sep 17 00:00:00 2001
From: Yuri Karamian <yuri@arkhost.com>
Date: Fri, 27 Mar 2026 14:05:59 +0100
Subject: [PATCH] v1.2.8 - fix url links, tab indent, todo state, graph rework,
 collapsible sections, nav history, page breaks, folder/tag display

---
 package.json                            |   2 +-
 src-tauri/Cargo.lock                    |   2 +-
 src-tauri/Cargo.toml                    |   2 +-
 src-tauri/src/commands.rs               |  90 ++-
 src-tauri/src/lib.rs                    |   1 +
 src-tauri/src/types.rs                  |   1 +
 src-tauri/tauri.conf.json               |   2 +-
 src/lib/api.ts                          |   4 +
 src/lib/components/AppLayout.svelte     |  35 +-
 src/lib/components/Editor.svelte        | 438 +++++++++++-
 src/lib/components/GraphView.svelte     | 905 ++++++++++++++++--------
 src/lib/components/InfoPanel.svelte     |   2 +-
 src/lib/components/NoteList.svelte      |  26 +-
 src/lib/components/SettingsPanel.svelte |   2 +-
 src/lib/components/Sidebar.svelte       |   1 +
 src/lib/components/TitleBar.svelte      |   1 +
 src/lib/stores/app.ts                   |  31 +-
 src/routes/+layout.svelte               |   3 +-
 18 files changed, 1187 insertions(+), 361 deletions(-)

diff --git a/package.json b/package.json
index 10cdab2..e60cfb7 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "helixnotes",
   "private": true,
   "license": "AGPL-3.0-or-later",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 3c7fb29..0640492 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1850,7 +1850,7 @@ checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
 
 [[package]]
 name = "helixnotes"
-version = "1.2.7"
+version = "1.2.8"
 dependencies = [
  "arboard",
  "chrono",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index cc9eaec..97fb35e 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "helixnotes"
-version = "1.2.7"
+version = "1.2.8"
 description = "Local markdown note-taking app"
 authors = ["HelixNotes"]
 license = "AGPL-3.0-or-later"
diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
index d318320..acc5262 100644
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -430,9 +430,14 @@ pub fn get_graph_data(state: State<'_, AppState>) -> Result<crate::types::GraphD
     let vault_path = config.active_vault.as_ref().ok_or("No active vault")?;
     let vault = std::path::Path::new(vault_path);
 
-    // Pass 1: collect all notes with titles (fast title extraction, no YAML parsing)
+    // Pass 1: collect ALL notes as nodes (no title deduplication — every note must appear)
     let mut graph_nodes = Vec::new();
-    let mut title_to_idx: HashMap<String, usize> = HashMap::new();
+    // title → list of node indices (one title can map to multiple notes in different folders)
+    let mut title_to_idxs: HashMap<String, Vec<usize>> = HashMap::new();
+    // vault-relative path without extension → idx (for [[subfolder/note]] style links)
+    let mut relpath_to_idx: HashMap<String, usize> = HashMap::new();
+    // absolute path → idx (for fast active-note lookup)
+    let mut path_to_idx: HashMap<String, usize> = HashMap::new();
     let mut seen_paths: HashSet<String> = HashSet::new();
     let mut contents: Vec<String> = Vec::new();
 
@@ -462,12 +467,18 @@ pub fn get_graph_data(state: State<'_, AppState>) -> Result<crate::types::GraphD
             path.file_stem().unwrap_or_default().to_string_lossy().to_string()
         });
 
-        // Deduplicate by title — skip if we already have a node with this title
-        let title_lower = title.to_lowercase();
-        if title_to_idx.contains_key(&title_lower) { continue; }
-
         let idx = graph_nodes.len();
-        title_to_idx.insert(title_lower, idx);
+        let title_lower = title.to_lowercase();
+        title_to_idxs.entry(title_lower).or_default().push(idx);
+        path_to_idx.insert(path_str.clone(), idx);
+
+        // Also index by vault-relative path without extension (e.g. "subfolder/note name")
+        if let Ok(rel) = path.strip_prefix(vault) {
+            let rel_no_ext = rel.with_extension("");
+            let rel_lower = rel_no_ext.to_string_lossy().to_lowercase();
+            relpath_to_idx.entry(rel_lower).or_insert(idx);
+        }
+
         graph_nodes.push(crate::types::GraphNode {
             title,
             path: path_str,
@@ -476,8 +487,22 @@ pub fn get_graph_data(state: State<'_, AppState>) -> Result<crate::types::GraphD
     }
 
     // Pass 2: extract edges from wiki-links (inline scan, no regex)
-    let mut edges = Vec::new();
-    let mut edge_set: HashSet<(usize, usize)> = HashSet::new();
+    // edge_map: (src, tgt) → index in edges vec, used to detect reverse links
+    let mut edges: Vec<crate::types::GraphEdge> = Vec::new();
+    let mut edge_map: HashMap<(usize, usize), usize> = HashMap::new();
+
+    let add_edge = |edges: &mut Vec<crate::types::GraphEdge>, edge_map: &mut HashMap<(usize, usize), usize>, src: usize, tgt: usize| {
+        if src == tgt { return; }
+        if edge_map.contains_key(&(src, tgt)) { return; } // exact duplicate
+        if let Some(&rev_idx) = edge_map.get(&(tgt, src)) {
+            // Reverse direction already exists — mark it as bidirectional
+            edges[rev_idx].bidirectional = true;
+        } else {
+            let idx = edges.len();
+            edge_map.insert((src, tgt), idx);
+            edges.push(crate::types::GraphEdge { source: src, target: tgt, bidirectional: false });
+        }
+    };
 
     for (source_idx, body) in contents.iter().enumerate() {
         let bytes = body.as_bytes();
@@ -498,11 +523,21 @@ pub fn get_graph_data(state: State<'_, AppState>) -> Result<crate::types::GraphD
                     let link = link.split('^').next().unwrap_or(link);
                     let link = link.trim().to_lowercase();
 
-                    if let Some(&target_idx) = title_to_idx.get(&link) {
-                        if target_idx != source_idx {
-                            let key = if source_idx < target_idx { (source_idx, target_idx) } else { (target_idx, source_idx) };
-                            if edge_set.insert(key) {
-                                edges.push(crate::types::GraphEdge { source: source_idx, target: target_idx });
+                    // 1. Try vault-relative path match (e.g. "arkhost/note name")
+                    if let Some(&target_idx) = relpath_to_idx.get(&link) {
+                        add_edge(&mut edges, &mut edge_map, source_idx, target_idx);
+                    } else if let Some(targets) = title_to_idxs.get(&link) {
+                        // 2. Title match — connect to all notes with this title
+                        for &target_idx in targets {
+                            add_edge(&mut edges, &mut edge_map, source_idx, target_idx);
+                        }
+                    } else if link.contains('/') {
+                        // 3. Path-based ref: try last segment as title fallback
+                        if let Some(seg) = link.rsplit('/').next() {
+                            if let Some(targets) = title_to_idxs.get(seg) {
+                                for &target_idx in targets {
+                                    add_edge(&mut edges, &mut edge_map, source_idx, target_idx);
+                                }
                             }
                         }
                     }
@@ -1370,14 +1405,13 @@ fn resolve_wiki_ref(
     reference.to_string()
 }
 
-// ── Open file with system default handler ──
+// ── Open file/URL with system default handler ──
 
-#[tauri::command]
-pub fn open_file(path: String) -> Result<(), String> {
+fn xdg_open(arg: &str) -> Result<(), String> {
     #[cfg(target_os = "linux")]
     {
         let mut cmd = std::process::Command::new("xdg-open");
-        cmd.arg(&path);
+        cmd.arg(arg);
         // Clear AppImage environment so child processes find host binaries
         // (e.g. gio-launch-desktop on GNOME)
         if std::env::var("APPIMAGE").is_ok() {
@@ -1390,25 +1424,35 @@ pub fn open_file(path: String) -> Result<(), String> {
             }
         }
         cmd.spawn()
-            .map_err(|e| format!("Failed to open {}: {}", path, e))?;
+            .map_err(|e| format!("Failed to open {}: {}", arg, e))?;
     }
     #[cfg(target_os = "macos")]
     {
         std::process::Command::new("open")
-            .arg(&path)
+            .arg(arg)
             .spawn()
-            .map_err(|e| format!("Failed to open {}: {}", path, e))?;
+            .map_err(|e| format!("Failed to open {}: {}", arg, e))?;
     }
     #[cfg(target_os = "windows")]
     {
         std::process::Command::new("cmd")
-            .args(["/C", "start", "", &path])
+            .args(["/C", "start", "", arg])
             .spawn()
-            .map_err(|e| format!("Failed to open {}: {}", path, e))?;
+            .map_err(|e| format!("Failed to open {}: {}", arg, e))?;
     }
     Ok(())
 }
 
+#[tauri::command]
+pub fn open_file(path: String) -> Result<(), String> {
+    xdg_open(&path)
+}
+
+#[tauri::command]
+pub fn open_url(url: String) -> Result<(), String> {
+    xdg_open(&url)
+}
+
 #[tauri::command]
 pub fn copy_file_to(source: String, destination: String) -> Result<(), String> {
     std::fs::copy(&source, &destination).map_err(|e| format!("Failed to copy file: {}", e))?;
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index b6649cf..bc33d6e 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -137,6 +137,7 @@ pub fn run() {
             commands::get_vault_stats,
             commands::import_obsidian,
             commands::open_file,
+            commands::open_url,
             commands::copy_file_to,
             commands::create_backup,
             commands::list_backups,
diff --git a/src-tauri/src/types.rs b/src-tauri/src/types.rs
index df7b322..1b54f67 100644
--- a/src-tauri/src/types.rs
+++ b/src-tauri/src/types.rs
@@ -285,4 +285,5 @@ pub struct GraphNode {
 pub struct GraphEdge {
     pub source: usize,
     pub target: usize,
+    pub bidirectional: bool,
 }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index d8c523a..386591b 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "HelixNotes",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "identifier": "com.helixnotes.app",
   "build": {
     "frontendDist": "../build",
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 77794cc..b4a77d9 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -267,6 +267,10 @@ export async function openFile(path: string): Promise<void> {
   return invoke("open_file", { path });
 }
 
+export async function openUrl(url: string): Promise<void> {
+  return invoke("open_url", { url });
+}
+
 export async function copyFileTo(
   source: string,
   destination: string,
diff --git a/src/lib/components/AppLayout.svelte b/src/lib/components/AppLayout.svelte
index 8381fda..1f80525 100644
--- a/src/lib/components/AppLayout.svelte
+++ b/src/lib/components/AppLayout.svelte
@@ -34,8 +34,10 @@
 		tags,
 		notes,
 		viewMode,
+		activeTag,
 		updateAvailable as globalUpdateAvailable,
-		settingsTab
+		settingsTab,
+		navHistory
 	} from '$lib/stores/app';
 
 	const appWindow = getCurrentWindow();
@@ -58,9 +60,7 @@
 	let isQuickAccess = $derived(noteRelativePath ? $quickAccessPaths.includes(noteRelativePath) : false);
 	let backupInterval: ReturnType<typeof setInterval> | null = null;
 
-	let navigatingFromHistory = false;
-	let noteHistory: string[] = [];
-	let noteHistoryIndex = -1;
+
 
 	function parseFrequencyMs(freq: string): number {
 		switch (freq) {
@@ -91,32 +91,19 @@
 	// Track note navigation in history stack
 	$effect(() => {
 		const path = $activeNotePath;
-		if (navigatingFromHistory) {
-			navigatingFromHistory = false;
-			return;
-		}
-		if (path) {
-			// Trim forward history and push
-			noteHistory = [...noteHistory.slice(0, noteHistoryIndex + 1), path];
-			noteHistoryIndex = noteHistory.length - 1;
-		}
+		if (path) navHistory.push(path);
 	});
 
 	function navigateHistory(direction: -1 | 1) {
-		const newIndex = noteHistoryIndex + direction;
-		if (newIndex < 0 || newIndex >= noteHistory.length) return;
-		const path = noteHistory[newIndex];
-		noteHistoryIndex = newIndex;
-		navigatingFromHistory = true;
+		const path = navHistory.go(direction);
+		if (!path) return;
 		readNote(path).then((content) => {
 			editor?.flushSave();
 			$activeNote = content;
 			$activeNotePath = path;
 			$editorDirty = false;
 			editor?.loadNote(path, content.content);
-		}).catch(() => {
-			// Note may have been deleted, ignore
-		});
+		}).catch(() => {});
 	}
 
 	async function handleOpenFile(filePath: string) {
@@ -493,7 +480,7 @@
 					{#if $mobileView === 'sidebar'}
 						HelixNotes
 					{:else}
-						{$activeNotebook?.name || 'All Notes'}
+						{#if $viewMode === 'notebook'}{$activeNotebook?.name ?? 'Notebook'}{:else if $viewMode === 'tag'}#{$activeTag}{:else if $viewMode === 'quickaccess'}Quick Access{:else if $viewMode === 'daily'}Daily Notes{:else if $viewMode === 'trash'}Trash{:else}All Notes{/if}
 					{/if}
 				</span>
 				{#if $globalUpdateAvailable && $mobileView === 'sidebar'}
@@ -597,7 +584,7 @@
 				<Sidebar bind:this={sidebar} onViewChanged={handleViewChanged} />
 			</div>
 			<div class="mobile-panel" class:active={$mobileView === 'notelist'}>
-				<NoteList bind:this={noteList} onNoteSelected={handleNoteSelected} onBeforeNoteSwitch={() => editor?.flushSave()} onNoteMoved={() => sidebar?.refresh()} />
+				<NoteList bind:this={noteList} onNoteSelected={handleNoteSelected} onBeforeNoteSwitch={() => editor?.flushSave()} onNoteMoved={() => sidebar?.refresh()} onNoteCreated={() => editor?.focusTitle()} />
 				<button class="mobile-fab" onclick={createAndFocusNote} title="New Note">
 					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
 						<path d="M12 5v14M5 12h14" />
@@ -662,7 +649,7 @@
 				{/if}
 
 				<div class="notelist-panel" style="width: {$notelistWidth}px">
-					<NoteList bind:this={noteList} onNoteSelected={handleNoteSelected} onBeforeNoteSwitch={() => editor?.flushSave()} onNoteMoved={() => sidebar?.refresh()} />
+					<NoteList bind:this={noteList} onNoteSelected={handleNoteSelected} onBeforeNoteSwitch={() => editor?.flushSave()} onNoteMoved={() => sidebar?.refresh()} onNoteCreated={() => editor?.focusTitle()} />
 				</div>
 
 				<ResizeHandle onResize={handleNotelistResize} />
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index 5d822cd..178d77f 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -29,16 +29,15 @@
 	import katex from 'katex';
 	import 'katex/dist/katex.min.css';
 	import { Extension, Node as TiptapNode, Mark as TiptapMark, mergeAttributes } from '@tiptap/core';
-	import { Plugin, PluginKey, EditorState } from '@tiptap/pm/state';
+	import { Plugin, PluginKey, EditorState, TextSelection } from '@tiptap/pm/state';
 	import { Decoration, DecorationSet } from '@tiptap/pm/view';
 	import { DOMSerializer } from '@tiptap/pm/model';
 	import { convertFileSrc } from '@tauri-apps/api/core';
 	import { getCurrentWindow } from '@tauri-apps/api/window';
 	import { readFile } from '@tauri-apps/plugin-fs';
-	import { openUrl } from '@tauri-apps/plugin-opener';
-	import { openFile, copyFileTo, copyImageToClipboard as copyImageToClipboardCmd } from '$lib/api';
+	import { openFile, openUrl, copyFileTo, copyImageToClipboard as copyImageToClipboardCmd } from '$lib/api';
 	import { save as saveDialog } from '@tauri-apps/plugin-dialog';
-	import { activeNote, activeNotePath, appConfig, editorDirty, sourceMode, focusMode, readOnly, quickAccessPaths, notes } from '$lib/stores/app';
+	import { activeNote, activeNotePath, appConfig, editorDirty, sourceMode, focusMode, readOnly, quickAccessPaths, notes, navHistory, canGoBack, canGoForward } from '$lib/stores/app';
 	import { saveNote, saveImage, saveAttachment, readClipboardImage, addQuickAccess, removeQuickAccess, getQuickAccess, getNoteVersions, getNoteVersionContent, createVersion, aiAsk, getAllNoteTitles, readNote, renameNote } from '$lib/api';
 	import type { VersionEntry, AiStreamEvent, NoteTitleEntry } from '$lib/types';
 	import { listen } from '@tauri-apps/api/event';
@@ -177,9 +176,10 @@
 			{ label: 'Task List', aliases: ['checklist', 'checkbox', 'todo', 'check'], icon: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="6" height="6" rx="1"/><path d="M5 8l1.5 1.5L9 7"/><line x1="13" y1="8" x2="21" y2="8"/><rect x="3" y="14" width="6" height="6" rx="1"/><line x1="13" y1="17" x2="21" y2="17"/></svg>', action: () => editor?.chain().focus().toggleTaskList().run() },
 			{ label: 'Code Block', aliases: ['code', 'codeblock', 'pre', 'snippet'], icon: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>', action: () => editor?.chain().focus().toggleCodeBlock().run() },
 			{ label: 'Blockquote', aliases: ['quote', 'blockquote', 'citation'], icon: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>', action: () => editor?.chain().focus().toggleBlockquote().run() },
-			{ label: 'Collapsible Section', aliases: ['details', 'accordion', 'collapse', 'toggle', 'summary'], icon: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><polyline points="10 8 14 12 10 16"/></svg>', action: () => editor?.chain().focus().setDetails().run() },
+			{ label: 'Collapsible Section', aliases: ['details', 'accordion', 'collapse', 'toggle', 'summary'], icon: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><polyline points="10 8 14 12 10 16"/></svg>', action: () => insertDetails() },
 			{ label: 'Table', aliases: ['table', 'grid'], icon: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>', action: () => { slashTablePicker = true; slashTableHover = { rows: 0, cols: 0 }; } },
 			{ label: 'Horizontal Rule', aliases: ['hr', 'divider', 'line', 'separator', 'rule'], icon: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="2" y1="12" x2="22" y2="12"/></svg>', action: () => editor?.chain().focus().setHorizontalRule().run() },
+			{ label: 'Page Break', aliases: ['pagebreak', 'page', 'break', 'newpage', 'print'], icon: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="2" y1="9" x2="22" y2="9" stroke-dasharray="4 2"/><line x1="2" y1="15" x2="22" y2="15" stroke-dasharray="4 2"/><path d="M6 5v4M18 5v4M6 15v4M18 15v4"/></svg>', action: () => editor?.chain().focus().insertContent({ type: 'pageBreak' }).run() },
 		];
 	}
 
@@ -214,6 +214,7 @@
 	let imageToolbar = $state<{ pos: number; x: number; y: number; size: string; src: string } | null>(null);
 	let copyToast = $state<'copying' | 'done' | null>(null);
 	let noteRelativePath = $derived($activeNotePath && $appConfig?.active_vault ? $activeNotePath.replace($appConfig.active_vault + '/', '') : '');
+	let noteFolder = $derived(noteRelativePath ? noteRelativePath.substring(0, noteRelativePath.lastIndexOf('/')) : '');
 	let isQuickAccess = $derived(noteRelativePath ? $quickAccessPaths.includes(noteRelativePath) : false);
 
 	const lowlight = createLowlight(common);
@@ -389,6 +390,27 @@
 		},
 	});
 
+	const PageBreak = TiptapNode.create({
+		name: 'pageBreak',
+		group: 'block',
+		atom: true,
+		parseHTML() {
+			return [
+				{ tag: 'div[data-page-break]' },
+				{
+					tag: 'div',
+					getAttrs: (el: HTMLElement) => {
+						const style = el.getAttribute('style') || '';
+						return style.includes('page-break-after') ? {} : false;
+					},
+				},
+			];
+		},
+		renderHTML() {
+			return ['div', { 'data-page-break': 'true', style: 'page-break-after: always; break-after: page;', class: 'page-break' }];
+		},
+	});
+
 	let codeLangDropdown = $state<{ pos: number; x: number; y: number; current: string } | null>(null);
 
 	function openCodeLangDropdown(pos: number, current: string, triggerEl: HTMLElement) {
@@ -497,6 +519,30 @@
 		},
 	});
 
+	// Tab inserts a tab character in plain paragraphs/headings.
+	// Priority 50 < default 100, so list/task/table/codeblock extensions handle Tab first for their own nodes.
+	const TabIndent = Extension.create({
+		name: 'tabIndent',
+		priority: 50,
+		addKeyboardShortcuts() {
+			return {
+				Tab: () => {
+					const sel = this.editor.state.selection;
+					const from = sel.$from;
+					const node = from.node();
+					if (node.type.name !== 'paragraph' && node.type.name !== 'heading') return false;
+					// Don't intercept if inside a list or task item (their extensions handle Tab first,
+					// but guard here too in case of priority edge cases)
+					for (let d = from.depth - 1; d > 0; d--) {
+						const name = from.node(d).type.name;
+						if (name === 'listItem' || name === 'taskItem') return false;
+					}
+					return this.editor.commands.insertContent('\t');
+				},
+			};
+		},
+	});
+
 	const CodeBlockLanguageSelect = Extension.create({
 		name: 'codeBlockLanguageSelect',
 		addGlobalAttributes() {
@@ -597,6 +643,22 @@
 		slashTableHover = { rows: 0, cols: 0 };
 	}
 
+	$effect(() => {
+		if (!slashMenu || slashSelectedIndex < 0) return;
+		slashSelectedIndex; // track
+		tick().then(() => {
+			document.querySelector('.slash-menu .slash-menu-item.selected')?.scrollIntoView({ block: 'nearest' });
+		});
+	});
+
+	$effect(() => {
+		if (!wikiLinkMenu || wikiLinkSelectedIndex < 0) return;
+		wikiLinkSelectedIndex; // track
+		tick().then(() => {
+			document.querySelector('.wiki-link-menu .wiki-link-item.selected')?.scrollIntoView({ block: 'nearest' });
+		});
+	});
+
 	function updateSlashMenu() {
 		const wasSlashTyped = slashTypedByUser;
 		slashTypedByUser = false;
@@ -639,9 +701,11 @@
 
 		// Keep menu within viewport (account for virtual keyboard on mobile)
 		if (x + 240 > window.innerWidth) x = window.innerWidth - 250;
-		let y = coords.bottom + 4;
 		const visibleBottom = window.innerHeight - keyboardHeight;
-		if (y + 300 > visibleBottom) y = Math.max(4, visibleBottom - 300);
+		const menuHeight = 300;
+		let y = coords.bottom + 4;
+		if (y + menuHeight > visibleBottom) y = coords.top - menuHeight - 4;
+		if (y < 4) y = 4;
 
 		slashMenu = { x, y, query, from, to };
 		slashSelectedIndex = 0;
@@ -761,9 +825,22 @@
 		if (pipeIdx >= 0) q = q.slice(0, pipeIdx);
 		q = q.replace(/#.*$/, '').replace(/\^.*$/, '').trim();
 		if (!q) return wikiLinkTitlesCache;
-		return wikiLinkTitlesCache.filter(entry =>
-			entry.title.toLowerCase().includes(q)
-		);
+		// Score: 0 = exact, 1 = starts-with, 2 = word-start, 3 = contains
+		const scored = wikiLinkTitlesCache
+			.map(entry => {
+				const t = entry.title.toLowerCase();
+				let score: number;
+				if (t === q) score = 0;
+				else if (t.startsWith(q)) score = 1;
+				else if (t.includes(' ' + q) || t.includes('-' + q)) score = 2;
+				else if (t.includes(q)) score = 3;
+				else score = -1;
+				return { entry, score };
+			})
+			.filter(x => x.score >= 0)
+			.sort((a, b) => a.score - b.score)
+			.map(x => x.entry);
+		return scored;
 	});
 
 	// Set of lowercase titles that appear more than once (for disambiguation display)
@@ -1047,9 +1124,11 @@
 		const coords = editor.view.coordsAtPos(from);
 		let x = coords.left;
 		if (x + 280 > window.innerWidth) x = window.innerWidth - 290;
-		let y = coords.bottom + 4;
 		const visibleBottom = window.innerHeight - keyboardHeight;
-		if (y + 300 > visibleBottom) y = Math.max(4, visibleBottom - 300);
+		const menuHeight = 360;
+		let y = coords.bottom + 4;
+		if (y + menuHeight > visibleBottom) y = coords.top - menuHeight - 4;
+		if (y < 4) y = 4;
 		wikiLinkMenu = { x, y, query, from };
 		wikiLinkSelectedIndex = 0;
 	}
@@ -1377,6 +1456,18 @@
 		});
 	}
 
+	async function editorNavigateHistory(direction: -1 | 1) {
+		const path = navHistory.go(direction);
+		if (!path) return;
+		flushSave();
+		try {
+			const content = await readNote(path);
+			$activeNote = content;
+			$activeNotePath = path;
+			$editorDirty = false;
+		} catch {}
+	}
+
 	/** Flush unsaved editor content to disk (synchronous serialize + fire-and-forget save).
 	 *  Call BEFORE updating $activeNote/$activeNotePath stores when switching notes. */
 	export function flushSave() {
@@ -1404,9 +1495,11 @@
 		const shouldBeReadOnly = isNewNote ? false : ($appConfig?.default_view_mode ?? false);
 		$readOnly = shouldBeReadOnly;
 		if (editor) editor.setEditable(!shouldBeReadOnly);
+		const editorBody = editorElement?.closest('.editor-body') as HTMLElement | null;
 		if ($sourceMode) {
 			sourceContent = stripTitleH1(content);
 			resetSourceHistory(sourceContent);
+			if (editorBody) editorBody.scrollTop = 0;
 			isLoadingNote = false;
 		} else if (editorElement && editor) {
 			// Editor already exists, just swap content
@@ -1415,8 +1508,19 @@
 			editor.commands.setContent(html);
 			// Clear undo/redo history so it doesn't bleed across notes
 			clearEditorHistory();
-			// Clear loading flag after setContent updates have fired
-			tick().then(() => { isLoadingNote = false; });
+			// Reset scroll and cursor after all ProseMirror/Svelte DOM updates settle
+			tick().then(() => {
+				if (editorBody) editorBody.scrollTop = 0;
+				// Explicitly reset ProseMirror selection to start so TipTap's focus()
+				// (triggered by checkbox clicks etc.) doesn't scroll to the old note's cursor position.
+				if (editor) {
+					const tr = editor.state.tr.setSelection(TextSelection.atStart(editor.state.doc));
+					// No tr.scrollIntoView() — must not trigger any scroll
+					editor.view.dispatch(tr);
+				}
+				requestAnimationFrame(() => { if (editorBody) editorBody.scrollTop = 0; });
+				isLoadingNote = false;
+			});
 		} else {
 			// Editor element not in DOM yet (first note load).
 			// Store content and let the $effect on editorElement handle init.
@@ -1571,6 +1675,8 @@
 				return serializeListItem(node);
 			case 'horizontalRule':
 				return '---\n';
+			case 'pageBreak':
+				return '<div style="page-break-after: always;"></div>\n';
 			case 'table': {
 				// Preserve tables as raw HTML
 				const tempDiv = document.createElement('div');
@@ -2291,12 +2397,62 @@
 				PdfEmbed,
 				MathBlock,
 				MathInline,
-				Details.configure({ persist: false, HTMLAttributes: { class: 'editor-details' } }),
+				PageBreak,
+				Details.configure({ persist: true, HTMLAttributes: { class: 'editor-details' } }),
 				DetailsSummary,
 				DetailsContent,
+				Extension.create({
+					name: 'collapsibleKeymap',
+					addProseMirrorPlugins() {
+						return [new Plugin({
+							key: new PluginKey('collapsibleKeymap'),
+							props: {
+								handleDOMEvents: {
+									keydown(view, event) {
+										const isTab = event.key === 'Tab' && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
+										const isEnter = event.key === 'Enter' && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
+										if (!isTab && !isEnter) return false;
+										const { schema, selection } = view.state;
+										const from = selection.$from;
+										let summaryDepth = -1;
+										for (let d = from.depth; d >= 0; d--) {
+											if (from.node(d).type === schema.nodes.detailsSummary) { summaryDepth = d; break; }
+										}
+										if (summaryDepth === -1) return false;
+										event.preventDefault();
+										const detailsDepth = summaryDepth - 1;
+										const detailsNode = from.node(detailsDepth);
+										let detailsContentPos: number | null = null;
+										let pos = from.start(detailsDepth);
+										for (let i = 0; i < detailsNode.childCount; i++) {
+											const child = detailsNode.child(i);
+											if (child.type === schema.nodes.detailsContent) { detailsContentPos = pos + 1; break; }
+											pos += child.nodeSize;
+										}
+										if (detailsContentPos === null) return true;
+										// Open the section if it is closed
+										const domPos = view.domAtPos(from.pos);
+										let domNode = domPos.node as HTMLElement;
+										if (domNode.nodeType === 3) domNode = domNode.parentElement as HTMLElement;
+										const detailsEl = domNode?.closest('[data-type="details"]') as HTMLElement | null;
+										if (detailsEl) openDetailsEl(detailsEl);
+										// Sync open state into document + move cursor (single transaction)
+										const detailsPos = from.before(detailsDepth);
+										view.dispatch(view.state.tr
+											.setNodeMarkup(detailsPos, undefined, { open: true })
+											.setSelection(TextSelection.create(view.state.doc, detailsContentPos))
+										);
+										return true;
+									}
+								}
+							}
+						})];
+					}
+				}),
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				SlashCommands,
 				MoveLineShortcuts,
+				TabIndent,
 				NoteSearchExtension,
 				...($appConfig?.enable_wiki_links ? [WikiLink, WikiLinkAutocomplete] : []),
 			],
@@ -2304,9 +2460,11 @@
 			editorProps: {
 				attributes: { class: 'editor-content' },
 				handleDOMEvents: {
-					// Prevent details toggle button from stealing focus, which causes scroll-to-top.
-					// Also pre-focus the editor with preventScroll so TipTap's focus command
-					// sees hasFocus()=true and skips its scrolling view.focus() call.
+					// Prevent focus-caused scroll jumps when clicking details toggle buttons.
+					// Pre-focusing with preventScroll means TipTap's focus() call sees
+					// hasFocus()=true and skips its scrolling view.focus() call.
+					// For task checkboxes: lock scroll on mousedown (before any dispatch fires)
+					// so that any synchronous or async scroll caused by the toggle is reverted.
 					mousedown: (view, event) => {
 						const target = event.target as HTMLElement;
 						if (target.closest('[data-type="details"] > button')) {
@@ -2315,6 +2473,16 @@
 								(view.dom as HTMLElement).focus({ preventScroll: true });
 							}
 						}
+						if (target.closest('[data-type="taskItem"] input[type="checkbox"]')) {
+							const editorBody = target.closest('.editor-body') as HTMLElement | null;
+							if (editorBody) {
+								const savedScroll = editorBody.scrollTop;
+								const restore = () => { editorBody!.scrollTop = savedScroll; };
+								editorBody.addEventListener('scroll', restore);
+								// Remove after 200ms — covers synchronous, rAF, and setTimeout-based scrolls
+								setTimeout(() => editorBody!.removeEventListener('scroll', restore), 200);
+							}
+						}
 					},
 					// Prevent native text drag — it causes copy-instead-of-move in Tauri's webview.
 					// File drops from OS are handled by Tauri's onDragDropEvent listener instead.
@@ -2756,8 +2924,31 @@
 		closeTextContextMenu();
 	}
 
+	function openDetailsEl(el: HTMLElement) {
+		if (!el.classList.contains('is-open')) {
+			el.classList.add('is-open');
+			(el.querySelector('[data-type="detailsContent"]') as HTMLElement | null)
+				?.dispatchEvent(new Event('toggleDetailsContent'));
+		}
+	}
+
+	function insertDetails() {
+		if (!editor) return;
+		editor.chain().focus().setDetails().run();
+		requestAnimationFrame(() => {
+			if (!editor) return;
+			const domPos = editor.view.domAtPos(editor.state.selection.from);
+			let node = domPos.node as HTMLElement;
+			if (node.nodeType === 3) node = node.parentElement as HTMLElement;
+			const detailsEl = node.closest('[data-type="details"]') as HTMLElement | null;
+			if (detailsEl) openDetailsEl(detailsEl);
+			// Sync open: true into the document so it saves with the note
+			editor.chain().updateAttributes('details', { open: true }).run();
+		});
+	}
+
 	function ctxDetails() {
-		editor?.chain().focus().setDetails().run();
+		insertDetails();
 		closeTextContextMenu();
 	}
 
@@ -3429,6 +3620,16 @@
 			</div>
 			{#if !isMobile}
 			<div class="toolbar-actions">
+				{#if $canGoBack || $canGoForward}
+				<div class="nav-history-btns">
+					<button class="nav-history-btn" disabled={!$canGoBack} onclick={() => editorNavigateHistory(-1)} title="Back (Alt+←)">
+						<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+					</button>
+					<button class="nav-history-btn" disabled={!$canGoForward} onclick={() => editorNavigateHistory(1)} title="Forward (Alt+→)">
+						<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+					</button>
+				</div>
+				{/if}
 				{#if $editorDirty}
 					<span class="save-indicator">Unsaved</span>
 				{/if}
@@ -3545,6 +3746,31 @@
 			{/if}
 		</div>
 
+		{#if !$focusMode}
+		<div class="note-meta-bar">
+			<span class="note-folder" class:unfiled={!noteFolder}>
+				<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+				{#if noteFolder}
+					{#each noteFolder.split('/') as segment, i}
+						{#if i > 0}<span class="path-sep">›</span>{/if}{segment}
+					{/each}
+				{:else}
+					Unfiled Notes
+				{/if}
+			</span>
+			{#if $activeNote.meta.tags?.length > 0}
+				<span class="meta-divider">·</span>
+			{/if}
+			{#if $activeNote.meta.tags?.length > 0}
+			<span class="note-tags">
+				{#each $activeNote.meta.tags as tag}
+					<span class="note-tag">#{tag}</span>
+				{/each}
+			</span>
+			{/if}
+		</div>
+		{/if}
+
 		<div class="editor-body-wrapper">
 			{#if noteSearchOpen}
 				<div class="note-search-bar">
@@ -3970,7 +4196,7 @@
 								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 5H3"/><path d="M21 12H8"/><path d="M21 19H8"/><path d="M3 12v7"/></svg>
 								Quote
 							</button>
-							<button onclick={() => { insertDropdown = false; editor?.chain().focus().setDetails().run(); }}>
+							<button onclick={() => { insertDropdown = false; insertDetails(); }}>
 								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="13" height="7" x="8" y="3" rx="1"/><path d="m2 9 3 3-3 3"/><rect width="13" height="7" x="8" y="14" rx="1"/></svg>
 								Collapsible Section
 							</button>
@@ -4079,7 +4305,7 @@
 				</button>
 
 				<!-- Collapsible Section -->
-				<button class="fmt-btn" class:active={(editorState, editor.isActive('details'))} onclick={() => editor?.chain().focus().setDetails().run()} title="Collapsible Section">
+				<button class="fmt-btn" class:active={(editorState, editor.isActive('details'))} onclick={() => insertDetails()} title="Collapsible Section">
 					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="13" height="7" x="8" y="3" rx="1"/><path d="m2 9 3 3-3 3"/><rect width="13" height="7" x="8" y="14" rx="1"/></svg>
 				</button>
 
@@ -4618,8 +4844,8 @@
 						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
 						<span class="wiki-link-title-col">
 							<span class="wiki-link-title">{entry.title}</span>
-							{#if wikiLinkDuplicateTitles.has(entry.title.toLowerCase())}
-								<span class="wiki-link-folder">{wikiLinkFolderPath(entry) || '(vault root)'}</span>
+							{#if wikiLinkFolderPath(entry)}
+								<span class="wiki-link-folder">{wikiLinkFolderPath(entry)}</span>
 							{/if}
 						</span>
 					</button>
@@ -4908,6 +5134,40 @@
 		flex-shrink: 0;
 	}
 
+	.nav-history-btns {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		margin-right: auto;
+		flex-shrink: 0;
+	}
+
+	.nav-history-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border: none;
+		background: none;
+		color: var(--text-tertiary);
+		border-radius: 5px;
+		cursor: pointer;
+		padding: 0;
+		transition: color 0.15s, background 0.15s;
+	}
+
+	.nav-history-btn:hover {
+		color: var(--text-primary);
+		background: var(--bg-hover);
+	}
+
+	.nav-history-btn:disabled {
+		opacity: 0.3;
+		cursor: default;
+		pointer-events: none;
+	}
+
 	.editor-title {
 		flex: 1;
 	}
@@ -4929,6 +5189,57 @@
 		color: var(--text-tertiary);
 	}
 
+	.note-meta-bar {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 5px;
+		padding: 0 20px 10px;
+		flex-shrink: 0;
+	}
+
+	.note-folder {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		font-size: 11px;
+		color: var(--text-tertiary);
+		letter-spacing: 0.01em;
+	}
+
+	.note-folder.unfiled {
+		opacity: 0.6;
+		font-style: italic;
+	}
+
+	.path-sep {
+		font-size: 10px;
+		opacity: 0.5;
+	}
+
+	.meta-divider {
+		font-size: 11px;
+		color: var(--text-tertiary);
+		opacity: 0.4;
+		user-select: none;
+	}
+
+	.note-tags {
+		display: inline-flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 4px;
+	}
+
+	.note-tag {
+		font-size: 11px;
+		color: var(--text-tertiary);
+		background: var(--bg-tertiary);
+		padding: 1px 7px;
+		border-radius: 10px;
+		letter-spacing: 0.01em;
+	}
+
 	.toolbar-actions {
 		display: flex;
 		align-items: center;
@@ -5198,11 +5509,25 @@
 	.editor-body {
 		flex: 1;
 		overflow-y: auto;
+		overflow-anchor: none;
 		padding: 8px 20px;
 		min-width: 0;
 		position: relative;
 	}
 
+	.editor-body::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.editor-body::-webkit-scrollbar-thumb {
+		background: var(--text-tertiary);
+		border-radius: 4px;
+	}
+
+	.editor-body::-webkit-scrollbar-thumb:hover {
+		background: var(--text-secondary);
+	}
+
 	.editor-body:has(.source-editor) {
 		overflow: hidden;
 	}
@@ -5738,6 +6063,12 @@
 		transform: rotate(90deg);
 	}
 
+	@starting-style {
+		:global(.tiptap-wrapper .tiptap [data-type="details"].is-open > button::after) {
+			transform: rotate(0deg);
+		}
+	}
+
 	:global(.tiptap-wrapper .tiptap [data-type="details"] summary) {
 		padding: 10px 14px 10px 32px;
 		font-weight: 600;
@@ -5864,7 +6195,10 @@
 		min-width: 0;
 	}
 
-	:global(.tiptap-wrapper .tiptap ul[data-type="taskList"] li[data-checked="true"] > div) {
+	/* Strike through only the direct paragraph content of a checked task item.
+	   Using > p instead of > div prevents text-decoration from bleeding into
+	   nested task lists, since CSS text-decoration cannot be cancelled by descendants. */
+	:global(.tiptap-wrapper .tiptap ul[data-type="taskList"] li[data-checked="true"] > div > p) {
 		text-decoration: line-through;
 		color: var(--text-tertiary);
 	}
@@ -6111,10 +6445,34 @@
 		padding-left: 2px;
 	}
 
-	:global(.tiptap-wrapper .tiptap ul[data-type="taskList"] .is-empty::before) {
+	/* Suppress placeholder on task list / details containers — overlaps with checkbox / toggle button */
+	:global(.tiptap-wrapper .tiptap > ul[data-type="taskList"].is-empty::before),
+	:global(.tiptap-wrapper .tiptap > [data-type="details"].is-empty::before) {
 		content: none;
 	}
 
+	/* Show placeholder on the paragraph inside task item content div */
+	:global(.tiptap-wrapper .tiptap ul[data-type="taskList"] li > div > p.is-empty::before) {
+		content: attr(data-placeholder);
+		color: var(--text-tertiary);
+		pointer-events: none;
+		float: left;
+		height: 0;
+		padding-left: 2px;
+	}
+
+	/* Show placeholder on paragraphs inside collapsible section summary and content */
+	:global(.tiptap-wrapper .tiptap [data-type="detailsSummary"] p.is-empty::before),
+	:global(.tiptap-wrapper .tiptap [data-type="detailsContent"] p.is-empty::before) {
+		content: attr(data-placeholder);
+		color: var(--text-tertiary);
+		pointer-events: none;
+		float: left;
+		height: 0;
+		padding-left: 2px;
+	}
+
+
 	.link-context-overlay {
 		position: fixed;
 		inset: 0;
@@ -6575,6 +6933,36 @@
 		border-top: 1px solid var(--border);
 		margin: 0;
 	}
+	:global(.tiptap .page-break) {
+		position: relative;
+		margin: 12px 0;
+		height: 20px;
+		border: none;
+		pointer-events: none;
+		user-select: none;
+	}
+	:global(.tiptap .page-break::before) {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		height: 0;
+		border-top: 2px dashed var(--text-tertiary, #aaa);
+		opacity: 0.5;
+	}
+	:global(.tiptap .page-break::after) {
+		content: 'Page Break';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: var(--bg-primary, #fff);
+		padding: 0 8px;
+		font-size: 11px;
+		color: var(--text-tertiary, #aaa);
+		white-space: nowrap;
+	}
 	:global(.tiptap .pdf-embed-mobile) {
 		margin: 8px 0;
 	}
diff --git a/src/lib/components/GraphView.svelte b/src/lib/components/GraphView.svelte
index c5ab1cc..9e2d778 100644
--- a/src/lib/components/GraphView.svelte
+++ b/src/lib/components/GraphView.svelte
@@ -1,38 +1,34 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import { getGraphData } from '$lib/api';
-	import { activeNotePath } from '$lib/stores/app';
+	import { activeNotePath, appConfig } from '$lib/stores/app';
 
 	let { onclose, onnavigate }: {
 		onclose: () => void;
 		onnavigate: (path: string, title: string) => void;
 	} = $props();
 
+	const isMobile = /android|ios/i.test(navigator.userAgent);
+
 	let canvas = $state<HTMLCanvasElement>(null!);
 	let loading = $state(true);
+	let searchQuery = $state('');
+	let localMode = $state(true); // default: show only active note's neighborhood
 
-	// Start fetching data immediately — don't wait for canvas mount
 	const dataPromise = getGraphData();
 
-	interface GraphNode {
-		id: string;
-		title: string;
-		path: string;
-		x: number;
-		y: number;
-		vx: number;
-		vy: number;
-	}
-
-	interface GraphEdge {
-		sourceIdx: number;
-		targetIdx: number;
-	}
+	interface GraphNode { id: string; title: string; path: string; x: number; y: number; vx: number; vy: number; }
+	interface GraphEdge { sourceIdx: number; targetIdx: number; bidirectional: boolean; }
+	interface LabelRect { x: number; y: number; w: number; h: number; }
 
 	let nodes: GraphNode[] = [];
 	let edges: GraphEdge[] = [];
 	let nodeIndexMap: Map<string, number> = new Map();
 	let connectedSet: Set<number> = new Set();
+	let nodeDegree: number[] = [];
+	let searchMatchSet: Set<number> | null = null;
+	let folderColorMap = new Map<string, string>();
+
 	let pan = { x: 0, y: 0 };
 	let zoom = 1;
 	let dragging: GraphNode | null = null;
@@ -41,34 +37,127 @@
 	let panning = false;
 	let panStart = { x: 0, y: 0 };
 	let hoveredNode: GraphNode | null = null;
+	let hoveredIdx = -1;
+	let hoveredNeighborSet: Set<number> = new Set();
+	let hoveredEdgeSet: Set<number> = new Set();
 	let glowPhase = 0;
-	let glowFrame = 0;
+	let activeNodeIdx = -1;
+	let navigatedFromGraph = false;
 
-	// Cache computed styles — read once, not every frame
-	let cachedStyles: { border: string; text: string; textSec: string; accent: string } | null = null;
+	// Combined animation loop
+	let physicsRemaining = 0;
+	let animFrameId = 0;
+	let lastGlowTs = 0;
+
+	// DPI fix
+	let dpr = 1;
+	let canvasW = 0;
+	let canvasH = 0;
+
+	// Style cache — cleared on theme change
+	let cachedStyles: { border: string; text: string; textSec: string; accent: string; bg: string } | null = null;
+
+	const FOLDER_PALETTE = [
+		'#60a5fa', '#34d399', '#f59e0b', '#a78bfa',
+		'#fb7185', '#22d3ee', '#fb923c', '#86efac',
+	];
 
 	function getStyles() {
 		if (cachedStyles) return cachedStyles;
-		const style = getComputedStyle(document.documentElement);
+		const s = getComputedStyle(document.documentElement);
 		cachedStyles = {
-			border: style.getPropertyValue('--border-color').trim() || '#444',
-			text: style.getPropertyValue('--text-primary').trim() || '#eee',
-			textSec: style.getPropertyValue('--text-tertiary').trim() || '#888',
-			accent: style.getPropertyValue('--accent').trim() || '#7b9bd4',
+			border:  s.getPropertyValue('--border-color').trim() || '#444',
+			text:    s.getPropertyValue('--text-primary').trim() || '#eee',
+			textSec: s.getPropertyValue('--text-secondary').trim() || '#aaa',
+			accent:  s.getPropertyValue('--accent').trim() || '#7b9bd4',
+			bg:      s.getPropertyValue('--bg-primary').trim() || '#1a1a1a',
 		};
 		return cachedStyles;
 	}
 
+	function getFolderKey(path: string): string {
+		const vaultRoot = $appConfig?.active_vault || '';
+		const rel = vaultRoot && path.startsWith(vaultRoot + '/') ? path.slice(vaultRoot.length + 1) : path;
+		const slash = rel.indexOf('/');
+		return slash >= 0 ? rel.slice(0, slash) : '';
+	}
+
+	function buildFolderColors() {
+		const seen = new Map<string, string>();
+		let colorIdx = 0;
+		for (const n of nodes) {
+			const key = getFolderKey(n.path);
+			if (key && !seen.has(key)) {
+				seen.set(key, FOLDER_PALETTE[colorIdx % FOLDER_PALETTE.length]);
+				colorIdx++;
+			}
+		}
+		folderColorMap = seen;
+	}
+
+	function getNodeBaseColor(i: number): string {
+		const { textSec, border } = getStyles();
+		if ((nodeDegree[i] || 0) === 0) return border;
+		const key = getFolderKey(nodes[i].path);
+		return folderColorMap.get(key) || textSec;
+	}
+
+	function getNodeRadius(i: number, isActive: boolean): number {
+		if (isActive) return 8;
+		const deg = nodeDegree[i] || 0;
+		if (deg === 0) return 3;
+		return Math.min(4.5 + deg * 0.7, 9);
+	}
+
+	function updateHoveredState(node: GraphNode | null) {
+		hoveredNode = node;
+		hoveredIdx = node ? nodes.indexOf(node) : -1;
+		hoveredNeighborSet = new Set();
+		hoveredEdgeSet = new Set();
+		if (hoveredIdx < 0) return;
+		hoveredNeighborSet.add(hoveredIdx);
+		for (let i = 0; i < edges.length; i++) {
+			const e = edges[i];
+			if (e.sourceIdx === hoveredIdx || e.targetIdx === hoveredIdx) {
+				hoveredEdgeSet.add(i);
+				hoveredNeighborSet.add(e.sourceIdx);
+				hoveredNeighborSet.add(e.targetIdx);
+			}
+		}
+	}
+
+	// Nodes/edges visible in local mode (active note + direct neighbours)
+	function computeLocalSets(): { nodeSet: Set<number>; edgeSet: Set<number> } {
+		const nodeSet = new Set<number>();
+		const edgeSet = new Set<number>();
+		if (activeNodeIdx < 0) return { nodeSet, edgeSet };
+		nodeSet.add(activeNodeIdx);
+		for (let i = 0; i < edges.length; i++) {
+			const e = edges[i];
+			if (e.sourceIdx === activeNodeIdx || e.targetIdx === activeNodeIdx) {
+				edgeSet.add(i);
+				nodeSet.add(e.sourceIdx);
+				nodeSet.add(e.targetIdx);
+			}
+		}
+		return { nodeSet, edgeSet };
+	}
+
+	function updateSearchMatch() {
+		const q = searchQuery.trim().toLowerCase();
+		if (!q) { searchMatchSet = null; return; }
+		const matched = new Set<number>();
+		nodes.forEach((n, i) => { if (n.title.toLowerCase().includes(q)) matched.add(i); });
+		searchMatchSet = matched;
+	}
+
 	async function buildGraph() {
 		loading = true;
 		try {
-			// Use the pre-fetched promise (started before canvas mount)
 			const data = await dataPromise;
+			const w = canvasW || 800;
+			const h = canvasH || 600;
 
-			const w = canvas?.width ?? 800;
-			const h = canvas?.height ?? 600;
-
-			// Build node index map
 			nodeIndexMap = new Map();
 			nodes = data.nodes.map((n, i) => {
 				nodeIndexMap.set(n.title.toLowerCase(), i);
@@ -76,20 +165,25 @@
 					id: n.title.toLowerCase(),
 					title: n.title,
 					path: n.path,
-					x: w / 2 + (Math.random() - 0.5) * Math.min(w, h) * 0.6,
-					y: h / 2 + (Math.random() - 0.5) * Math.min(w, h) * 0.6,
-					vx: 0,
-					vy: 0,
+					x: w / 2 + (Math.random() - 0.5) * Math.min(w, h) * 0.5,
+					y: h / 2 + (Math.random() - 0.5) * Math.min(w, h) * 0.5,
+					vx: 0, vy: 0,
 				};
 			});
 
-			// Map edges and track connected nodes
 			connectedSet = new Set();
+			nodeDegree = new Array(nodes.length).fill(0);
 			edges = data.edges.map(e => {
 				connectedSet.add(e.source);
 				connectedSet.add(e.target);
-				return { sourceIdx: e.source, targetIdx: e.target };
+				nodeDegree[e.source] = (nodeDegree[e.source] || 0) + 1;
+				nodeDegree[e.target] = (nodeDegree[e.target] || 0) + 1;
+				return { sourceIdx: e.source, targetIdx: e.target, bidirectional: e.bidirectional };
 			});
+
+			buildFolderColors();
+			updateSearchMatch();
+			activeNodeIdx = nodes.findIndex(n => n.path === ($activeNotePath || ''));
 		} catch (e) {
 			console.error('Failed to build graph:', e);
 		}
@@ -98,181 +192,142 @@
 	}
 
 	function centerOnActiveNote() {
-		if (!canvas || nodes.length === 0) return;
-		const activePath = $activeNotePath || '';
-		const activeNode = nodes.find(n => n.path === activePath);
-		if (!activeNode) return;
-
-		const activeIdx = nodeIndexMap.get(activeNode.id);
-
-		// Gather the active node and its direct neighbors
+		if (!canvas || nodes.length === 0 || activeNodeIdx < 0) return;
+		const activeNode = nodes[activeNodeIdx];
 		const neighborhood: GraphNode[] = [activeNode];
-		if (activeIdx !== undefined) {
-			for (const edge of edges) {
-				if (edge.sourceIdx === activeIdx) neighborhood.push(nodes[edge.targetIdx]);
-				else if (edge.targetIdx === activeIdx) neighborhood.push(nodes[edge.sourceIdx]);
-			}
+		for (const edge of edges) {
+			if (edge.sourceIdx === activeNodeIdx) neighborhood.push(nodes[edge.targetIdx]);
+			else if (edge.targetIdx === activeNodeIdx) neighborhood.push(nodes[edge.sourceIdx]);
 		}
-
-		const w = canvas.width;
-		const h = canvas.height;
-		const padding = 80;
-
+		const w = canvasW, h = canvasH, padding = 100;
 		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
 		for (const n of neighborhood) {
-			if (n.x < minX) minX = n.x;
-			if (n.y < minY) minY = n.y;
-			if (n.x > maxX) maxX = n.x;
-			if (n.y > maxY) maxY = n.y;
+			if (n.x < minX) minX = n.x; if (n.y < minY) minY = n.y;
+			if (n.x > maxX) maxX = n.x; if (n.y > maxY) maxY = n.y;
 		}
-
-		const graphW = maxX - minX || 1;
-		const graphH = maxY - minY || 1;
-		const centerX = (minX + maxX) / 2;
-		const centerY = (minY + maxY) / 2;
-
-		zoom = Math.min(
-			(w - padding * 2) / graphW,
-			(h - padding * 2) / graphH,
-			1.8
-		);
-		zoom = Math.max(zoom, 0.5);
-
-		pan.x = w / 2 - centerX * zoom;
-		pan.y = h / 2 - centerY * zoom;
+		const graphW = maxX - minX || 1, graphH = maxY - minY || 1;
+		zoom = Math.max(Math.min((w - padding * 2) / graphW, (h - padding * 2) / graphH, 2), 0.4);
+		pan.x = w / 2 - ((minX + maxX) / 2) * zoom;
+		pan.y = h / 2 - ((minY + maxY) / 2) * zoom;
 	}
 
 	function fitToView() {
 		if (!canvas || nodes.length === 0) return;
-		const w = canvas.width;
-		const h = canvas.height;
-		const padding = 60;
-
+		const w = canvasW, h = canvasH, padding = 70;
 		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-		for (const node of nodes) {
-			if (node.x < minX) minX = node.x;
-			if (node.y < minY) minY = node.y;
-			if (node.x > maxX) maxX = node.x;
-			if (node.y > maxY) maxY = node.y;
+		for (const n of nodes) {
+			if (n.x < minX) minX = n.x; if (n.y < minY) minY = n.y;
+			if (n.x > maxX) maxX = n.x; if (n.y > maxY) maxY = n.y;
 		}
+		const graphW = maxX - minX || 1, graphH = maxY - minY || 1;
+		zoom = Math.max(Math.min((w - padding * 2) / graphW, (h - padding * 2) / graphH, 2), 0.2);
+		pan.x = w / 2 - ((minX + maxX) / 2) * zoom;
+		pan.y = h / 2 - ((minY + maxY) / 2) * zoom;
+	}
 
-		const graphW = maxX - minX || 1;
-		const graphH = maxY - minY || 1;
-		const centerGraphX = (minX + maxX) / 2;
-		const centerGraphY = (minY + maxY) / 2;
-
-		zoom = Math.min(
-			(w - padding * 2) / graphW,
-			(h - padding * 2) / graphH,
-			2
-		);
-		zoom = Math.max(zoom, 0.2);
-
-		pan.x = w / 2 - centerGraphX * zoom;
-		pan.y = h / 2 - centerGraphY * zoom;
+	function focusActive() {
+		if (activeNodeIdx >= 0) centerOnActiveNote(); else fitToView();
+		draw();
 	}
 
 	function startSimulation() {
-		// Run a small batch synchronously for an instant first render
-		for (let i = 0; i < 30; i++) simulate();
-
-		// Center/fit immediately so the user sees something right away
-		const activePath = $activeNotePath || '';
-		const activeNode = nodes.find(n => n.path === activePath);
-		if (activeNode) {
-			centerOnActiveNote();
-		} else {
-			fitToView();
-		}
+		// Initial settle — enough for a rough layout, camera set after full physics
+		for (let i = 0; i < 80; i++) simulate();
 
+		// Show the full graph while physics finishes settling
+		fitToView();
 		draw();
-		startGlowLoop();
 
-		// Continue settling asynchronously in small batches
-		const totalRemaining = Math.min(270, Math.max(70, nodes.length * 2));
-		let done = 0;
-		function settle() {
-			if (done >= totalRemaining) return;
-			const batch = Math.min(20, totalRemaining - done);
-			for (let i = 0; i < batch; i++) simulate();
-			done += batch;
-			// Re-center while settling
-			if (activeNode) centerOnActiveNote(); else fitToView();
-			requestAnimationFrame(settle);
-		}
-		requestAnimationFrame(settle);
+		// Queue remaining physics — camera will snap to active note when done
+		physicsRemaining = Math.min(400, Math.max(150, nodes.length * 3));
+		startAnimLoop();
 	}
 
-	function startGlowLoop() {
-		if (glowFrame) cancelAnimationFrame(glowFrame);
-		function loop() {
-			glowPhase += 0.04;
-			draw();
-			glowFrame = requestAnimationFrame(loop);
+	function startAnimLoop() {
+		if (animFrameId) cancelAnimationFrame(animFrameId);
+		lastGlowTs = 0;
+
+		function loop(ts: number) {
+			let needsDraw = false;
+
+			// Physics batch
+			if (physicsRemaining > 0) {
+				const batch = Math.min(20, physicsRemaining);
+				for (let i = 0; i < batch; i++) simulate();
+				physicsRemaining -= batch;
+				// When physics is fully settled, snap camera to active note
+				if (physicsRemaining === 0) {
+					if (activeNodeIdx >= 0) centerOnActiveNote(); else fitToView();
+				}
+				needsDraw = true;
+			}
+
+			// Glow pulse for active node — throttled to ~30fps
+			if (activeNodeIdx >= 0) {
+				const elapsed = lastGlowTs > 0 ? Math.min(ts - lastGlowTs, 100) : 16.67;
+				if (lastGlowTs === 0 || ts - lastGlowTs >= 33) {
+					glowPhase += 0.04 * (elapsed / 16.67);
+					lastGlowTs = ts;
+					needsDraw = true;
+				}
+			}
+
+			if (needsDraw) draw();
+
+			if (physicsRemaining > 0 || activeNodeIdx >= 0) {
+				animFrameId = requestAnimationFrame(loop);
+			} else {
+				animFrameId = 0;
+			}
 		}
-		glowFrame = requestAnimationFrame(loop);
+		animFrameId = requestAnimationFrame(loop);
 	}
 
 	function simulate() {
 		const nodeCount = nodes.length;
 		if (nodeCount === 0) return;
+		const w = canvasW || 800, h = canvasH || 600;
+		const centerX = w / 2, centerY = h / 2;
 
-		const w = canvas?.width ?? 800;
-		const h = canvas?.height ?? 600;
-		const centerX = w / 2;
-		const centerY = h / 2;
-
-		// Repulsion between all nodes (skip pairs that are very far apart)
+		// Repulsion
 		for (let i = 0; i < nodeCount; i++) {
 			const a = nodes[i];
 			for (let j = i + 1; j < nodeCount; j++) {
 				const b = nodes[j];
-				const dx = b.x - a.x;
-				const dy = b.y - a.y;
+				const dx = b.x - a.x, dy = b.y - a.y;
 				const distSq = dx * dx + dy * dy;
-				// Skip very distant pairs — negligible force
-				if (distSq > 250000) continue;
+				if (distSq > 360000) continue;
 				const d = distSq || 1;
-				const force = 800 / d;
+				const force = 1500 / d;
 				const dist = Math.sqrt(d);
-				const fx = (dx / dist) * force;
-				const fy = (dy / dist) * force;
-				a.vx -= fx;
-				a.vy -= fy;
-				b.vx += fx;
-				b.vy += fy;
+				const fx = (dx / dist) * force, fy = (dy / dist) * force;
+				a.vx -= fx; a.vy -= fy; b.vx += fx; b.vy += fy;
 			}
 		}
 
-		// Attraction along edges
+		// Spring attraction along edges
 		for (const edge of edges) {
-			const a = nodes[edge.sourceIdx];
-			const b = nodes[edge.targetIdx];
-			const dx = b.x - a.x;
-			const dy = b.y - a.y;
+			const a = nodes[edge.sourceIdx], b = nodes[edge.targetIdx];
+			const dx = b.x - a.x, dy = b.y - a.y;
 			const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-			const force = (dist - 100) * 0.01;
-			const fx = (dx / dist) * force;
-			const fy = (dy / dist) * force;
-			a.vx += fx;
-			a.vy += fy;
-			b.vx -= fx;
-			b.vy -= fy;
+			const force = (dist - 130) * 0.012;
+			const fx = (dx / dist) * force, fy = (dy / dist) * force;
+			a.vx += fx; a.vy += fy; b.vx -= fx; b.vy -= fy;
 		}
 
-		// Center gravity
-		for (const node of nodes) {
-			node.vx += (centerX - node.x) * 0.001;
-			node.vy += (centerY - node.y) * 0.001;
+		// Center gravity — weaker for isolated nodes so they spread instead of clustering
+		for (let i = 0; i < nodeCount; i++) {
+			const node = nodes[i];
+			const gravity = (nodeDegree[i] || 0) === 0 ? 0.0002 : 0.0008;
+			node.vx += (centerX - node.x) * gravity;
+			node.vy += (centerY - node.y) * gravity;
 		}
 
-		// Apply velocity with damping
+		// Damping + integration
 		for (const node of nodes) {
 			if (node === dragging) continue;
-			node.vx *= 0.85;
-			node.vy *= 0.85;
-			node.x += node.vx;
-			node.y += node.vy;
+			node.vx *= 0.85; node.vy *= 0.85;
+			node.x += node.vx; node.y += node.vy;
 		}
 	}
 
@@ -280,89 +335,253 @@
 		if (!canvas) return;
 		const ctx = canvas.getContext('2d');
 		if (!ctx) return;
-		const w = canvas.width;
-		const h = canvas.height;
 
-		ctx.clearRect(0, 0, w, h);
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
 		ctx.save();
+		ctx.scale(dpr, dpr);
 		ctx.translate(pan.x, pan.y);
 		ctx.scale(zoom, zoom);
 
-		const { border: borderColor, text: textColor, textSec: textSecondary, accent } = getStyles();
+		const { border: borderColor, text: textColor, textSec, accent, bg: bgColor } = getStyles();
+		const activePath = $activeNotePath || '';
+		const pulse = 0.5 + 0.5 * Math.sin(glowPhase);
+		const isHovering = hoveredIdx >= 0;
+		const isSearching = searchMatchSet !== null;
 
-		// Draw edges
-		ctx.strokeStyle = borderColor;
-		ctx.lineWidth = 1;
-		ctx.globalAlpha = 0.4;
-		ctx.beginPath();
-		for (const edge of edges) {
-			const a = nodes[edge.sourceIdx];
-			const b = nodes[edge.targetIdx];
-			ctx.moveTo(a.x, a.y);
-			ctx.lineTo(b.x, b.y);
+		// Local mode: restrict which nodes/edges are visible
+		const { nodeSet: localNodeSet, edgeSet: localEdgeSet } = localMode ? computeLocalSets() : { nodeSet: null as Set<number> | null, edgeSet: null as Set<number> | null };
+
+		// ── Edges ──────────────────────────────────────────────────────────────
+		if (isHovering) {
+			// Dimmed non-connected edges
+			ctx.globalAlpha = 0.06;
+			ctx.strokeStyle = borderColor;
+			ctx.lineWidth = 1;
+			ctx.beginPath();
+			for (let i = 0; i < edges.length; i++) {
+				if (hoveredEdgeSet.has(i)) continue;
+				if (localEdgeSet && !localEdgeSet.has(i)) continue;
+				ctx.moveTo(nodes[edges[i].sourceIdx].x, nodes[edges[i].sourceIdx].y);
+				ctx.lineTo(nodes[edges[i].targetIdx].x, nodes[edges[i].targetIdx].y);
+			}
+			ctx.stroke();
+
+			// Highlighted connected edges
+			ctx.globalAlpha = 0.8;
+			ctx.strokeStyle = accent;
+			ctx.lineWidth = 1.5;
+			ctx.beginPath();
+			for (const i of hoveredEdgeSet) {
+				ctx.moveTo(nodes[edges[i].sourceIdx].x, nodes[edges[i].sourceIdx].y);
+				ctx.lineTo(nodes[edges[i].targetIdx].x, nodes[edges[i].targetIdx].y);
+			}
+			ctx.stroke();
+
+			// Arrowheads on highlighted edges
+			ctx.fillStyle = accent;
+			ctx.globalAlpha = 0.8;
+			const drawArrow = (tipX: number, tipY: number, ux: number, uy: number) => {
+				const bx = tipX - ux * 7, by = tipY - uy * 7;
+				ctx.beginPath();
+				ctx.moveTo(tipX, tipY);
+				ctx.lineTo(bx - uy * 3.5, by + ux * 3.5);
+				ctx.lineTo(bx + uy * 3.5, by - ux * 3.5);
+				ctx.closePath();
+				ctx.fill();
+			};
+			for (const i of hoveredEdgeSet) {
+				const e = edges[i];
+				const src = nodes[e.sourceIdx];
+				const tgt = nodes[e.targetIdx];
+				const dx = tgt.x - src.x, dy = tgt.y - src.y;
+				const dist = Math.sqrt(dx * dx + dy * dy);
+				if (dist < 1) continue;
+				const ux = dx / dist, uy = dy / dist;
+				// Arrow at target end (source → target)
+				const tgtR = getNodeRadius(e.targetIdx, tgt.path === activePath);
+				drawArrow(tgt.x - ux * tgtR, tgt.y - uy * tgtR, ux, uy);
+				// If bidirectional, also draw arrow at source end (target → source)
+				if (e.bidirectional) {
+					const srcR = getNodeRadius(e.sourceIdx, src.path === activePath);
+					drawArrow(src.x + ux * srcR, src.y + uy * srcR, -ux, -uy);
+				}
+			}
+		} else if (isSearching) {
+			// All visible edges faint
+			ctx.strokeStyle = borderColor;
+			ctx.lineWidth = 1;
+			ctx.globalAlpha = 0.07;
+			ctx.beginPath();
+			for (let i = 0; i < edges.length; i++) {
+				if (localEdgeSet && !localEdgeSet.has(i)) continue;
+				ctx.moveTo(nodes[edges[i].sourceIdx].x, nodes[edges[i].sourceIdx].y);
+				ctx.lineTo(nodes[edges[i].targetIdx].x, nodes[edges[i].targetIdx].y);
+			}
+			ctx.stroke();
+			// Edges connected to search matches — brighter
+			ctx.globalAlpha = 0.4;
+			ctx.beginPath();
+			for (let i = 0; i < edges.length; i++) {
+				if (localEdgeSet && !localEdgeSet.has(i)) continue;
+				const e = edges[i];
+				if (searchMatchSet!.has(e.sourceIdx) || searchMatchSet!.has(e.targetIdx)) {
+					ctx.moveTo(nodes[e.sourceIdx].x, nodes[e.sourceIdx].y);
+					ctx.lineTo(nodes[e.targetIdx].x, nodes[e.targetIdx].y);
+				}
+			}
+			ctx.stroke();
+		} else {
+			ctx.strokeStyle = borderColor;
+			ctx.lineWidth = isMobile ? 1.5 : 1;
+			ctx.globalAlpha = isMobile ? 0.65 : 0.35;
+			ctx.beginPath();
+			for (let i = 0; i < edges.length; i++) {
+				if (localEdgeSet && !localEdgeSet.has(i)) continue;
+				ctx.moveTo(nodes[edges[i].sourceIdx].x, nodes[edges[i].sourceIdx].y);
+				ctx.lineTo(nodes[edges[i].targetIdx].x, nodes[edges[i].targetIdx].y);
+			}
+			ctx.stroke();
+
+			// On mobile draw arrowheads always (no hover available)
+			// Sizes divided by zoom so they stay fixed screen size regardless of zoom level
+			if (isMobile) {
+				ctx.fillStyle = borderColor;
+				ctx.globalAlpha = 0.6;
+				const al = 8 / zoom, aw = 4 / zoom;
+				const drawArrow = (tipX: number, tipY: number, ux: number, uy: number) => {
+					const bx = tipX - ux * al, by = tipY - uy * al;
+					ctx.beginPath();
+					ctx.moveTo(tipX, tipY);
+					ctx.lineTo(bx - uy * aw, by + ux * aw);
+					ctx.lineTo(bx + uy * aw, by - ux * aw);
+					ctx.closePath();
+					ctx.fill();
+				};
+				for (let i = 0; i < edges.length; i++) {
+					if (localEdgeSet && !localEdgeSet.has(i)) continue;
+					const e = edges[i];
+					const src = nodes[e.sourceIdx], tgt = nodes[e.targetIdx];
+					const dx = tgt.x - src.x, dy = tgt.y - src.y;
+					const dist = Math.sqrt(dx * dx + dy * dy);
+					if (dist < 1) continue;
+					const ux = dx / dist, uy = dy / dist;
+					const tgtR = getNodeRadius(e.targetIdx, tgt.path === activePath);
+					drawArrow(tgt.x - ux * tgtR, tgt.y - uy * tgtR, ux, uy);
+					if (e.bidirectional) {
+						const srcR = getNodeRadius(e.sourceIdx, src.path === activePath);
+						drawArrow(src.x + ux * srcR, src.y + uy * srcR, -ux, -uy);
+					}
+				}
+			}
 		}
-		ctx.stroke();
 		ctx.globalAlpha = 1;
 
-		// Determine active note
-		const activePath = $activeNotePath || '';
-
-		// Draw nodes
-		const pulse = 0.5 + 0.5 * Math.sin(glowPhase);
+		// ── Nodes + label collection ────────────────────────────────────────────
+		type LabelSpec = { x: number; y: number; text: string; fontSize: number; weight: string; color: string; alpha: number; priority: number; };
+		const labelQueue: LabelSpec[] = [];
 
 		for (let i = 0; i < nodes.length; i++) {
+			// Skip nodes outside local view
+			if (localNodeSet && !localNodeSet.has(i)) continue;
+
 			const node = nodes[i];
 			const isActive = node.path === activePath;
 			const isHovered = node === hoveredNode;
+			const isNeighbor = hoveredNeighborSet.has(i);
 			const hasLinks = connectedSet.has(i);
-			const baseRadius = isActive ? 9 : hasLinks ? 5 : 3.5;
-			const radius = isActive ? baseRadius + pulse * 2 : baseRadius;
+			const matchesSearch = !isSearching || searchMatchSet!.has(i);
 
-			// Active node glow
+			const dimBySearch = isSearching && !matchesSearch;
+			const dimByHover = isHovering && !isActive && !isNeighbor;
+			const dimmed = dimBySearch || dimByHover;
+
+			const radius = getNodeRadius(i, isActive);
+
+			// Active glow ring — opacity pulse, no radius change
 			if (isActive) {
-				const glowRadius = radius + 10 + pulse * 6;
-				const glow = ctx.createRadialGradient(node.x, node.y, radius, node.x, node.y, glowRadius);
-				glow.addColorStop(0, accent + '60');
+				const glowR = radius + 12;
+				const glow = ctx.createRadialGradient(node.x, node.y, radius, node.x, node.y, glowR);
+				const glowAlpha = Math.round((0.25 + pulse * 0.45) * 255).toString(16).padStart(2, '0');
+				glow.addColorStop(0, accent + glowAlpha);
 				glow.addColorStop(1, accent + '00');
+				ctx.globalAlpha = 1;
 				ctx.beginPath();
-				ctx.arc(node.x, node.y, glowRadius, 0, Math.PI * 2);
+				ctx.arc(node.x, node.y, glowR, 0, Math.PI * 2);
 				ctx.fillStyle = glow;
 				ctx.fill();
 			}
 
-			// Node circle
+			// Node fill
+			ctx.globalAlpha = dimmed ? (dimBySearch ? 0.07 : 0.12) : 1;
 			ctx.beginPath();
 			ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
-			if (isActive) {
+			if (isActive || isHovered) {
 				ctx.fillStyle = accent;
-			} else if (isHovered) {
-				ctx.fillStyle = accent;
-			} else if (hasLinks) {
-				ctx.fillStyle = textSecondary;
+			} else if (isHovering && isNeighbor) {
+				ctx.fillStyle = accent + 'bb';
 			} else {
-				ctx.fillStyle = borderColor;
+				ctx.fillStyle = getNodeBaseColor(i);
 			}
 			ctx.fill();
 
-			// Active node ring
+			// Active outer ring — static, alpha pulse only
 			if (isActive) {
+				ctx.globalAlpha = 0.35 + pulse * 0.3;
 				ctx.beginPath();
 				ctx.arc(node.x, node.y, radius + 3, 0, Math.PI * 2);
 				ctx.strokeStyle = accent;
 				ctx.lineWidth = 1.5;
-				ctx.globalAlpha = 0.4 + pulse * 0.3;
 				ctx.stroke();
-				ctx.globalAlpha = 1;
 			}
 
-			// Label — only for connected/active/hovered nodes
-			if (isActive || isHovered || hasLinks) {
-				ctx.font = `${isActive ? 'bold 13' : isHovered ? '12' : '10'}px -apple-system, BlinkMacSystemFont, sans-serif`;
-				ctx.fillStyle = isActive || isHovered ? textColor : textSecondary;
-				ctx.textAlign = 'center';
-				ctx.fillText(node.title, node.x, node.y - radius - 6);
+			ctx.globalAlpha = 1;
+
+			// Queue label (skip for heavily dimmed nodes)
+			if (dimBySearch) continue;
+			const showLabel = isActive || isHovered ||
+				(matchesSearch && isSearching) ||
+				(hasLinks && zoom > 0.45);
+			if (!showLabel) continue;
+
+			const raw = node.title;
+			const text = raw.length > 24 ? raw.slice(0, 22) + '…' : raw;
+			const fontSize = isActive ? 12 : isHovered ? 11 : 10;
+			const weight = isActive ? '600' : '400';
+			const color = isActive || isHovered ? textColor : textSec;
+			const alpha = dimByHover ? 0 : 1;
+			const priority = isActive ? 0 : isHovered ? 1 : (matchesSearch && isSearching ? 2 : 3);
+
+			labelQueue.push({ x: node.x, y: node.y - radius - 5, text, fontSize, weight, color, alpha, priority });
+		}
+
+		// Draw labels with collision avoidance — high-priority labels drawn first
+		labelQueue.sort((a, b) => a.priority - b.priority);
+		const drawnRects: LabelRect[] = [];
+		ctx.textAlign = 'center';
+		ctx.textBaseline = 'bottom';
+
+		for (const lab of labelQueue) {
+			if (lab.alpha === 0) continue;
+			ctx.font = `${lab.weight} ${lab.fontSize}px -apple-system, BlinkMacSystemFont, sans-serif`;
+			const tw = ctx.measureText(lab.text).width;
+			const th = lab.fontSize + 2;
+			const rx = lab.x - tw / 2, ry = lab.y - th;
+			const overlaps = drawnRects.some(r =>
+				rx < r.x + r.w + 6 && rx + tw > r.x - 6 &&
+				ry < r.y + r.h + 3 && ry + th > r.y - 3
+			);
+			if (!overlaps) {
+				drawnRects.push({ x: rx, y: ry, w: tw, h: th });
+				ctx.globalAlpha = lab.alpha;
+				ctx.fillStyle = lab.color;
+				ctx.shadowColor = bgColor;
+				ctx.shadowBlur = 5 / zoom;
+				ctx.fillText(lab.text, lab.x, lab.y);
 			}
 		}
+		ctx.shadowBlur = 0;
+		ctx.globalAlpha = 1;
+		ctx.textBaseline = 'alphabetic';
 
 		ctx.restore();
 	}
@@ -374,9 +593,9 @@
 		const y = (clientY - rect.top - pan.y) / zoom;
 		for (let i = nodes.length - 1; i >= 0; i--) {
 			const n = nodes[i];
-			const dx = n.x - x;
-			const dy = n.y - y;
-			if (dx * dx + dy * dy < 100) return n;
+			const dx = n.x - x, dy = n.y - y;
+			const r = getNodeRadius(i, n.path === ($activeNotePath || '')) + 4;
+			if (dx * dx + dy * dy < r * r) return n;
 		}
 		return null;
 	}
@@ -385,27 +604,19 @@
 		mouseDownPos = { x: e.clientX, y: e.clientY };
 		dragMoved = false;
 		const node = getNodeAt(e.clientX, e.clientY);
-		if (node) {
-			dragging = node;
-		} else {
-			panning = true;
-			panStart = { x: e.clientX - pan.x, y: e.clientY - pan.y };
-		}
+		if (node) { dragging = node; }
+		else { panning = true; panStart = { x: e.clientX - pan.x, y: e.clientY - pan.y }; }
 	}
 
 	function handleMouseMove(e: MouseEvent) {
-		const dx = e.clientX - mouseDownPos.x;
-		const dy = e.clientY - mouseDownPos.y;
-		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
-			dragMoved = true;
-		}
+		const dx = e.clientX - mouseDownPos.x, dy = e.clientY - mouseDownPos.y;
+		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dragMoved = true;
 
 		if (dragging && dragMoved) {
 			const rect = canvas.getBoundingClientRect();
 			dragging.x = (e.clientX - rect.left - pan.x) / zoom;
 			dragging.y = (e.clientY - rect.top - pan.y) / zoom;
-			dragging.vx = 0;
-			dragging.vy = 0;
+			dragging.vx = 0; dragging.vy = 0;
 			draw();
 		} else if (panning) {
 			pan.x = e.clientX - panStart.x;
@@ -414,18 +625,19 @@
 		} else if (!dragging) {
 			const node = getNodeAt(e.clientX, e.clientY);
 			if (node !== hoveredNode) {
-				hoveredNode = node;
+				updateHoveredState(node);
 				if (canvas) canvas.style.cursor = node ? 'pointer' : 'grab';
-				draw();
+				// Restart loop if it stopped (for immediate hover redraws)
+				if (!animFrameId) draw();
 			}
 		}
 	}
 
 	function handleMouseUp(e: MouseEvent) {
 		if (dragging && !dragMoved) {
-			// It was a click, not a drag — navigate
 			const node = dragging;
 			dragging = null;
+			navigatedFromGraph = true;
 			onnavigate(node.path, node.title);
 			return;
 		}
@@ -436,22 +648,21 @@
 	function handleWheel(e: WheelEvent) {
 		e.preventDefault();
 		const rect = canvas.getBoundingClientRect();
-		const mx = e.clientX - rect.left;
-		const my = e.clientY - rect.top;
+		const mx = e.clientX - rect.left, my = e.clientY - rect.top;
 		const oldZoom = zoom;
-		const delta = e.deltaY > 0 ? 0.9 : 1.1;
-		zoom = Math.max(0.2, Math.min(5, zoom * delta));
-		// Zoom toward mouse position
+		zoom = Math.max(0.2, Math.min(5, zoom * (e.deltaY > 0 ? 0.9 : 1.1)));
 		pan.x = mx - (mx - pan.x) * (zoom / oldZoom);
 		pan.y = my - (my - pan.y) * (zoom / oldZoom);
 		draw();
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') onclose();
+		if (e.key === 'Escape') {
+			if (searchQuery) { searchQuery = ''; return; }
+			onclose();
+		}
 	}
 
-	// Touch support for mobile
 	let lastTouchDist = 0;
 
 	function handleTouchStart(e: TouchEvent) {
@@ -460,15 +671,10 @@
 			mouseDownPos = { x: t.clientX, y: t.clientY };
 			dragMoved = false;
 			const node = getNodeAt(t.clientX, t.clientY);
-			if (node) {
-				dragging = node;
-			} else {
-				panning = true;
-				panStart = { x: t.clientX - pan.x, y: t.clientY - pan.y };
-			}
+			if (node) { dragging = node; }
+			else { panning = true; panStart = { x: t.clientX - pan.x, y: t.clientY - pan.y }; }
 		} else if (e.touches.length === 2) {
-			dragging = null;
-			panning = false;
+			dragging = null; panning = false;
 			const dx = e.touches[0].clientX - e.touches[1].clientX;
 			const dy = e.touches[0].clientY - e.touches[1].clientY;
 			lastTouchDist = Math.sqrt(dx * dx + dy * dy);
@@ -479,16 +685,13 @@
 		e.preventDefault();
 		if (e.touches.length === 1) {
 			const t = e.touches[0];
-			const dx = t.clientX - mouseDownPos.x;
-			const dy = t.clientY - mouseDownPos.y;
+			const dx = t.clientX - mouseDownPos.x, dy = t.clientY - mouseDownPos.y;
 			if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dragMoved = true;
-
 			if (dragging && dragMoved) {
 				const rect = canvas.getBoundingClientRect();
 				dragging.x = (t.clientX - rect.left - pan.x) / zoom;
 				dragging.y = (t.clientY - rect.top - pan.y) / zoom;
-				dragging.vx = 0;
-				dragging.vy = 0;
+				dragging.vx = 0; dragging.vy = 0;
 				draw();
 			} else if (panning) {
 				pan.x = t.clientX - panStart.x;
@@ -503,8 +706,7 @@
 				const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
 				const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
 				const rect = canvas.getBoundingClientRect();
-				const mx = midX - rect.left;
-				const my = midY - rect.top;
+				const mx = midX - rect.left, my = midY - rect.top;
 				const oldZoom = zoom;
 				zoom = Math.max(0.2, Math.min(5, zoom * (dist / lastTouchDist)));
 				pan.x = mx - (mx - pan.x) * (zoom / oldZoom);
@@ -520,44 +722,115 @@
 			if (dragging && !dragMoved) {
 				const node = dragging;
 				dragging = null;
+				navigatedFromGraph = true;
 				onnavigate(node.path, node.title);
 				return;
 			}
-			dragging = null;
-			panning = false;
-			lastTouchDist = 0;
+			dragging = null; panning = false; lastTouchDist = 0;
 		}
 	}
 
+	// Canvas setup
 	$effect(() => {
 		if (canvas) {
 			const rect = canvas.parentElement?.getBoundingClientRect();
 			if (rect) {
-				canvas.width = rect.width;
-				canvas.height = rect.height;
+				dpr = window.devicePixelRatio || 1;
+				canvasW = rect.width;
+				canvasH = rect.height;
+				canvas.width = canvasW * dpr;
+				canvas.height = canvasH * dpr;
 			}
 			buildGraph();
 		}
 	});
 
+	// React to active note changes (e.g., user clicks node → navigates → re-center)
+	$effect(() => {
+		const ap = $activeNotePath;
+		const newIdx = nodes.findIndex(n => n.path === (ap || ''));
+		activeNodeIdx = newIdx;
+		if (navigatedFromGraph && newIdx >= 0 && canvas) {
+			navigatedFromGraph = false;
+			centerOnActiveNote();
+		}
+		if (newIdx >= 0 && !animFrameId && canvas) startAnimLoop();
+		else if (newIdx < 0 && !animFrameId && canvas) draw(); // remove stale glow immediately
+	});
+
+	// React to search query changes
+	$effect(() => {
+		const _q = searchQuery; // track
+		updateSearchMatch();
+		if (canvas && !animFrameId) draw();
+		if (activeNodeIdx >= 0 && !animFrameId && canvas) startAnimLoop();
+	});
+
 	onDestroy(() => {
-		if (glowFrame) cancelAnimationFrame(glowFrame);
+		if (animFrameId) cancelAnimationFrame(animFrameId);
 	});
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="graph-overlay" onkeydown={handleKeydown}>
-	<div class="graph-panel">
+	<div class="graph-panel" class:mobile={isMobile}>
 		<div class="graph-header">
 			<h3>Graph View</h3>
-			<div class="graph-stats">
-				{#if !loading}
-					{nodes.length} notes, {edges.length} connections
+			<div class="graph-search">
+				<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+				</svg>
+				<!-- svelte-ignore a11y_autofocus -->
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Filter notes..."
+					class:active={!!searchQuery}
+				/>
+				{#if searchQuery}
+					<button class="graph-search-clear" aria-label="Clear search" onclick={() => { searchQuery = ''; }}>
+						<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+							<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+						</svg>
+					</button>
 				{/if}
 			</div>
-			<button class="graph-close" onclick={onclose}>
+			<div class="graph-stats">
+				{#if !loading}
+					{#if localMode && activeNodeIdx >= 0}
+						{computeLocalSets().nodeSet.size} notes · {computeLocalSets().edgeSet.size} links
+					{:else}
+						{nodes.length} notes · {edges.length} links
+					{/if}
+					{#if searchMatchSet}
+						· <span class="search-count">{searchMatchSet.size} matched</span>
+					{/if}
+				{/if}
+			</div>
+			<button
+				class="graph-btn"
+				class:active={localMode}
+				title={localMode ? 'Show all notes' : 'Show local graph'}
+				onclick={() => { localMode = !localMode; focusActive(); }}
+			>
+				<!-- network/local icon -->
+				<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/>
+					<line x1="12" y1="7" x2="5" y2="17"/><line x1="12" y1="7" x2="19" y2="17"/>
+				</svg>
+			</button>
+			<button class="graph-btn" onclick={focusActive} title="Focus active note">
+				<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<circle cx="12" cy="12" r="3"/>
+					<line x1="12" y1="2" x2="12" y2="6"/>
+					<line x1="12" y1="18" x2="12" y2="22"/>
+					<line x1="2" y1="12" x2="6" y2="12"/>
+					<line x1="18" y1="12" x2="22" y2="12"/>
+				</svg>
+			</button>
+			<button class="graph-close" aria-label="Close graph" onclick={onclose}>
 				<svg width="16" height="16" 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 x1="6" y1="6" x2="18" y2="18" />
+					<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
 				</svg>
 			</button>
 		</div>
@@ -565,8 +838,8 @@
 			{#if loading}
 				<div class="graph-loading">
 					<svg class="spinner" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-						<circle cx="12" cy="12" r="10" opacity="0.25" />
-						<path d="M12 2a10 10 0 019.95 9" />
+						<circle cx="12" cy="12" r="10" opacity="0.25"/>
+						<path d="M12 2a10 10 0 019.95 9"/>
 					</svg>
 					Building graph...
 				</div>
@@ -615,39 +888,106 @@
 	.graph-header {
 		display: flex;
 		align-items: center;
-		gap: 12px;
-		padding: 14px 20px;
+		gap: 10px;
+		padding: 12px 16px;
 		border-bottom: 1px solid var(--border-light);
 		flex-shrink: 0;
 	}
 
-	@media (max-width: 768px) {
-		.graph-panel {
-			width: 100vw;
-			height: 100vh;
-			max-width: none;
-			max-height: none;
-			border-radius: 0;
-			border: none;
-		}
-		.graph-header {
-			padding-top: calc(env(safe-area-inset-top, 36px) + 14px);
-		}
+	.graph-panel.mobile {
+		width: 100vw;
+		height: 100vh;
+		max-width: none;
+		max-height: none;
+		border-radius: 0;
+		border: none;
+	}
+
+	.graph-panel.mobile .graph-header {
+		padding-top: calc(env(safe-area-inset-top, 36px) + 12px);
+	}
+
+	.graph-panel.mobile .graph-header h3 {
+		display: none;
+	}
+
+	.graph-panel.mobile .graph-stats {
+		display: none;
+	}
+
+	.graph-panel.mobile .graph-search {
+		max-width: none;
 	}
 
 	.graph-header h3 {
-		font-size: 15px;
+		font-size: 14px;
 		font-weight: 600;
 		color: var(--text-primary);
 		margin: 0;
+		white-space: nowrap;
+	}
+
+	.graph-search {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		flex: 1;
+		max-width: 260px;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-light);
+		border-radius: 8px;
+		padding: 4px 8px;
+		color: var(--text-tertiary);
+		transition: border-color 0.15s;
+	}
+
+	.graph-search:focus-within {
+		border-color: var(--accent);
+		color: var(--text-secondary);
+	}
+
+	.graph-search input {
+		background: none;
+		border: none;
+		outline: none;
+		font-size: 12px;
+		color: var(--text-primary);
+		flex: 1;
+		min-width: 0;
+	}
+
+	.graph-search input::placeholder {
+		color: var(--text-tertiary);
+	}
+
+	.graph-search-clear {
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		color: var(--text-tertiary);
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.graph-search-clear:hover {
+		color: var(--text-primary);
 	}
 
 	.graph-stats {
 		flex: 1;
-		font-size: 12px;
+		font-size: 11px;
 		color: var(--text-tertiary);
+		white-space: nowrap;
 	}
 
+	.search-count {
+		color: var(--accent);
+		font-weight: 500;
+	}
+
+	.graph-btn,
 	.graph-close {
 		background: none;
 		border: none;
@@ -657,8 +997,15 @@
 		border-radius: 6px;
 		display: flex;
 		align-items: center;
+		flex-shrink: 0;
 	}
 
+	.graph-btn.active {
+		color: var(--accent);
+		background: var(--accent-light);
+	}
+
+	.graph-btn:hover,
 	.graph-close:hover {
 		background: var(--bg-hover);
 		color: var(--text-primary);
diff --git a/src/lib/components/InfoPanel.svelte b/src/lib/components/InfoPanel.svelte
index 24a3afd..40f3739 100644
--- a/src/lib/components/InfoPanel.svelte
+++ b/src/lib/components/InfoPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { showInfo, appConfig } from '$lib/stores/app';
 	import { getVaultStats } from '$lib/api';
-	import { openUrl } from '@tauri-apps/plugin-opener';
+	import { openUrl } from '$lib/api';
 	import { getVersion } from '@tauri-apps/api/app';
 	import type { VaultStats } from '$lib/types';
 
diff --git a/src/lib/components/NoteList.svelte b/src/lib/components/NoteList.svelte
index 2743630..a7915b7 100644
--- a/src/lib/components/NoteList.svelte
+++ b/src/lib/components/NoteList.svelte
@@ -38,10 +38,11 @@
 	import { openNoteWindow } from '$lib/utils/window';
 	import type { NoteEntry, TrashNotebookEntry, SortMode } from '$lib/types';
 
-	let { onNoteSelected = (_path: string, _content: string) => {}, onNoteMoved = () => {}, onBeforeNoteSwitch = () => {} }: {
+	let { onNoteSelected = (_path: string, _content: string) => {}, onNoteMoved = () => {}, onBeforeNoteSwitch = () => {}, onNoteCreated = () => {} }: {
 		onNoteSelected?: (path: string, content: string) => void;
 		onNoteMoved?: () => void;
 		onBeforeNoteSwitch?: () => void;
+		onNoteCreated?: () => void;
 	} = $props();
 
 	const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
@@ -230,6 +231,15 @@
 		if (listContainer) listContainer.scrollTop = 0;
 	});
 
+	// Invalidate quickaccess cache when starred notes change (e.g. from Editor star toggle)
+	$effect(() => {
+		$quickAccessPaths;
+		noteCache.delete('quickaccess');
+		if ($viewMode === 'quickaccess') {
+			refresh();
+		}
+	});
+
 	// Track container height via ResizeObserver
 	$effect(() => {
 		if (!listContainer) return;
@@ -369,6 +379,7 @@
 			noteCache.clear();
 			await refresh();
 			await selectNote(entry);
+			onNoteCreated();
 		} catch (e) {
 			console.error('Failed to create note:', e);
 		}
@@ -1412,6 +1423,19 @@
 		padding: 4px;
 	}
 
+	.list-content::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.list-content::-webkit-scrollbar-thumb {
+		background: var(--text-tertiary);
+		border-radius: 4px;
+	}
+
+	.list-content::-webkit-scrollbar-thumb:hover {
+		background: var(--text-secondary);
+	}
+
 	.note-item {
 		display: block;
 		width: 100%;
diff --git a/src/lib/components/SettingsPanel.svelte b/src/lib/components/SettingsPanel.svelte
index b682d03..33f43df 100644
--- a/src/lib/components/SettingsPanel.svelte
+++ b/src/lib/components/SettingsPanel.svelte
@@ -4,7 +4,7 @@
 	import { open as openDialog } from '@tauri-apps/plugin-dialog';
 	import { listen } from '@tauri-apps/api/event';
 	import { getVersion } from '@tauri-apps/api/app';
-	import { openUrl } from '@tauri-apps/plugin-opener';
+	import { openUrl } from '$lib/api';
 	import type { ImportResult, BackupEntry } from '$lib/types';
 
 	const isMobile = /android|ios/i.test(navigator.userAgent);
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 68cbb1e..998001c 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -50,6 +50,7 @@
 		}
 	}
 
+
 	export async function refresh() {
 		try {
 			if (isMobile) {
diff --git a/src/lib/components/TitleBar.svelte b/src/lib/components/TitleBar.svelte
index b5187f2..f9fccd7 100644
--- a/src/lib/components/TitleBar.svelte
+++ b/src/lib/components/TitleBar.svelte
@@ -221,6 +221,7 @@
 		color: var(--text-primary);
 	}
 
+
 	.switch-vault-btn.active {
 		background: color-mix(in srgb, var(--accent) 18%, transparent);
 		color: var(--accent);
diff --git a/src/lib/stores/app.ts b/src/lib/stores/app.ts
index 8189016..916c14e 100644
--- a/src/lib/stores/app.ts
+++ b/src/lib/stores/app.ts
@@ -1,4 +1,4 @@
-import { writable, derived } from "svelte/store";
+import { writable, derived, get } from "svelte/store";
 import type {
   AppConfig,
   NoteEntry,
@@ -106,6 +106,35 @@ export async function checkForUpdateMobile() {
   }
 }
 
+// Note navigation history
+interface NavHistoryState { stack: string[]; index: number; skipping: boolean; }
+function createNavHistory() {
+  const store = writable<NavHistoryState>({ stack: [], index: -1, skipping: false });
+  return {
+    subscribe: store.subscribe,
+    push(path: string) {
+      store.update(s => {
+        if (s.skipping) return { ...s, skipping: false };
+        const trimmed = s.stack.slice(0, s.index + 1);
+        return { stack: [...trimmed, path], index: trimmed.length, skipping: false };
+      });
+    },
+    go(direction: -1 | 1): string | null {
+      let target: string | null = null;
+      store.update(s => {
+        const newIdx = s.index + direction;
+        if (newIdx < 0 || newIdx >= s.stack.length) return s;
+        target = s.stack[newIdx];
+        return { ...s, index: newIdx, skipping: true };
+      });
+      return target;
+    },
+  };
+}
+export const navHistory = createNavHistory();
+export const canGoBack = derived(navHistory, $h => $h.index > 0);
+export const canGoForward = derived(navHistory, $h => $h.index < $h.stack.length - 1);
+
 // Derived
 export const sortedNotes = derived(
   [notes, sortMode, viewMode],
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2189156..71aa7c8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,8 +2,7 @@
 	import { onMount } from 'svelte';
 	import '../app.css';
 	import { theme, appConfig, activeNote, activeNotePath, installType, checkForUpdate, checkForUpdateMobile } from '$lib/stores/app';
-	import { openUrl } from '@tauri-apps/plugin-opener';
-	import { openFile, readNote, getInstallType } from '$lib/api';
+	import { openFile, openUrl, readNote, getInstallType } from '$lib/api';
 	import { get } from 'svelte/store';
 
 	let { children } = $props();