v1.0.8 - Fix task list checkbox loss and empty line preservation on markdown roundtrip

BUG FIXES:
- Slash command panel no longer triggers on existing unix paths (e.g. /usr/local/bin)
- Formatting dropdowns (Insert, Color, Highlight, etc.) now dismiss when clicking outside

ENHANCEMENTS:
- All toolbar icons replaced with official Lucide icons for consistent style
- Bold icon now visually appears bold
- Ordered list icon no longer has overlapping numbers
- Highlight marker padding balanced (top/bottom/sides)
- Version bump to 1.0.6

README.md

@@ -6,11 +6,12 @@ Your notes are stored as standard Markdown files on your local filesystem. No cl
 
 ## Download
 
-| Platform | Download |
-|----------|----------|
-| Linux | [HelixNotes_1.0.0_amd64.AppImage](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.0/HelixNotes_1.0.0_amd64.AppImage) |
-| Windows | Coming soon |
-| macOS | Coming soon |
+| Platform | Download | Notes |
+|----------|----------|-------|
+| Linux (Arch/rolling) | [HelixNotes_1.0.6_amd64.AppImage](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.6/HelixNotes_1.0.6_amd64.AppImage) | Best for Arch, Fedora, openSUSE |
+| Linux (Debian/Ubuntu/Mint) | [HelixNotes_1.0.6_amd64.deb](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.6/HelixNotes_1.0.6_amd64.deb) | Ubuntu 22.04+ |
+| Windows | [HelixNotes_1.0.6_x64-setup.exe](https://codeberg.org/ArkHost/HelixNotes/releases/download/v1.0.6/HelixNotes_1.0.6_x64-setup.exe) | Windows 10/11 |
+| macOS | Coming soon | |
 
 See all releases: [codeberg.org/ArkHost/HelixNotes/releases](https://codeberg.org/ArkHost/HelixNotes/releases)
 

package.json

@@ -2,7 +2,7 @@
   "name": "helixnotes",
   "private": true,
   "license": "AGPL-3.0-or-later",
-  "version": "1.0.0",
+  "version": "1.0.8",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

src-tauri/Cargo.lock

@@ -1778,7 +1778,7 @@ checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
 
 [[package]]
 name = "helixnotes"
-version = "1.0.0"
+version = "1.0.8"
 dependencies = [
  "chrono",
  "dirs",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "helixnotes"
-version = "1.0.0"
+version = "1.0.8"
 description = "Local-first markdown note-taking app"
 authors = ["HelixNotes"]
 license = "AGPL-3.0-or-later"

src-tauri/src/commands.rs

@@ -2,6 +2,7 @@ use crate::search::SearchIndex;
 use crate::state::AppState;
 use crate::types::*;
 use crate::vault::{operations, watcher};
+use std::path::Path;
 use tauri::{AppHandle, Manager, State};
 
 // ── Vault Management ──
@@ -195,8 +196,39 @@ pub fn delete_note(state: State<'_, AppState>, path: String) -> Result<(), Strin
 }
 
 #[tauri::command]
-pub fn move_note(note_path: String, dest_notebook: String) -> Result<String, String> {
-    operations::move_note(&note_path, &dest_notebook)
+pub fn move_note(
+    state: State<'_, AppState>,
+    note_path: String,
+    dest_notebook: String,
+) -> Result<String, String> {
+    let config = state.config.lock().map_err(|e| e.to_string())?;
+    let vault_path = config.active_vault.as_ref().ok_or("No active vault")?;
+
+    // Compute old relative path before move
+    let old_relative = Path::new(&note_path)
+        .strip_prefix(vault_path)
+        .map(|p| p.to_string_lossy().to_string())
+        .unwrap_or_default();
+
+    let new_full_path = operations::move_note(&note_path, &dest_notebook)?;
+
+    // Update quick access if the moved note was in it
+    if !old_relative.is_empty() {
+        if let Ok(mut qa) = operations::load_quick_access(vault_path) {
+            if let Some(pos) = qa.iter().position(|p| *p == old_relative) {
+                let new_relative = Path::new(&new_full_path)
+                    .strip_prefix(vault_path)
+                    .map(|p| p.to_string_lossy().to_string())
+                    .unwrap_or_default();
+                if !new_relative.is_empty() {
+                    qa[pos] = new_relative;
+                    let _ = operations::save_quick_access(vault_path, &qa);
+                }
+            }
+        }
+    }
+
+    Ok(new_full_path)
 }
 
 // ── Tags ──
@@ -391,6 +423,7 @@ pub fn set_general_settings(
     hide_title_in_body: bool,
     default_view_mode: bool,
     show_tray_icon: bool,
+    close_to_tray: bool,
     enable_wiki_links: bool,
 ) -> Result<(), String> {
     let mut config = state.config.lock().map_err(|e| e.to_string())?;
@@ -404,6 +437,7 @@ pub fn set_general_settings(
     config.hide_title_in_body = hide_title_in_body;
     config.default_view_mode = default_view_mode;
     config.show_tray_icon = show_tray_icon;
+    config.close_to_tray = close_to_tray;
     config.enable_wiki_links = enable_wiki_links;
     save_app_config(&config)?;
     Ok(())
@@ -435,6 +469,13 @@ pub fn remove_quick_access(
     operations::remove_quick_access(vault_path, &note_relative)
 }
 
+#[tauri::command]
+pub fn reorder_quick_access(state: State<'_, AppState>, paths: Vec<String>) -> Result<(), String> {
+    let config = state.config.lock().map_err(|e| e.to_string())?;
+    let vault_path = config.active_vault.as_ref().ok_or("No active vault")?;
+    operations::save_quick_access(vault_path, &paths)
+}
+
 #[tauri::command]
 pub fn get_vault_stats(state: State<'_, AppState>) -> Result<VaultStats, String> {
     let config = state.config.lock().map_err(|e| e.to_string())?;
@@ -1339,3 +1380,18 @@ fn save_app_config(config: &AppConfig) -> Result<(), String> {
     std::fs::write(path, data).map_err(|e| e.to_string())?;
     Ok(())
 }
+
+// ── Install Type Detection ──
+
+#[tauri::command]
+pub fn get_install_type() -> String {
+    if cfg!(target_os = "windows") {
+        "windows".to_string()
+    } else if std::env::var("APPIMAGE").is_ok() {
+        "appimage".to_string()
+    } else if std::path::Path::new("/var/lib/dpkg/info/helix-notes.list").exists() {
+        "deb".to_string()
+    } else {
+        "native".to_string()
+    }
+}

src-tauri/src/lib.rs

@@ -19,9 +19,10 @@ use tauri::{
 pub fn run() {
     let config = commands::load_app_config();
     let show_tray = config.show_tray_icon;
+    let close_to_tray = config.close_to_tray && show_tray;
     let app_state = AppState::new(config);
 
-    tauri::Builder::default()
+    let mut builder = tauri::Builder::default()
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_opener::init())
@@ -78,6 +79,7 @@ pub fn run() {
             commands::get_quick_access,
             commands::add_quick_access,
             commands::remove_quick_access,
+            commands::reorder_quick_access,
             commands::get_vault_stats,
             commands::import_obsidian,
             commands::open_file,
@@ -93,7 +95,19 @@ pub fn run() {
             commands::set_ai_settings,
             commands::test_ai_connection,
             commands::ai_ask,
-        ])
+            commands::get_install_type,
+        ]);
+
+    if close_to_tray {
+        builder = builder.on_window_event(|window, event| {
+            if let tauri::WindowEvent::CloseRequested { api, .. } = event {
+                api.prevent_close();
+                let _ = window.hide();
+            }
+        });
+    }
+
+    builder
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/src/types.rs

@@ -97,6 +97,8 @@ pub struct AppConfig {
     pub default_view_mode: bool,
     #[serde(default)]
     pub show_tray_icon: bool,
+    #[serde(default)]
+    pub close_to_tray: bool,
     #[serde(default = "default_true")]
     pub enable_wiki_links: bool,
 }
@@ -160,6 +162,7 @@ impl Default for AppConfig {
             ai_writing_style: None,
             default_view_mode: false,
             show_tray_icon: false,
+            close_to_tray: false,
             enable_wiki_links: true,
         }
     }

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "HelixNotes",
-  "version": "1.0.0",
+  "version": "1.0.8",
   "identifier": "com.helixnotes.app",
   "build": {
     "frontendDist": "../build",

src-tauri/tauri.macos.conf.json

@@ -0,0 +1,16 @@
+{
+  "app": {
+    "windows": [
+      {
+        "label": "main",
+        "decorations": true,
+        "titleBarStyle": "Overlay",
+        "hiddenTitle": true,
+        "trafficLightPosition": {
+          "x": 12,
+          "y": 10
+        }
+      }
+    ]
+  }
+}

src/app.css

@@ -31,7 +31,7 @@
     --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
     --sidebar-width: 220px;
     --notelist-width: 280px;
-    --panel-resize-handle: 4px;
+    --panel-resize-handle: 3px;
 }
 
 :root.dark {
@@ -149,3 +149,12 @@ body {
 .resize-handle.active {
     background: var(--accent);
 }
+
+body.resizing .ProseMirror {
+    pointer-events: none;
+    contain: strict;
+}
+
+body.resizing {
+    user-select: none;
+}

src/lib/api.ts

@@ -182,6 +182,7 @@ export async function setGeneralSettings(
   hideTitleInBody: boolean,
   defaultViewMode: boolean,
   showTrayIcon: boolean,
+  closeToTray: boolean,
   enableWikiLinks: boolean,
 ): Promise<void> {
   return invoke("set_general_settings", {
@@ -195,6 +196,7 @@ export async function setGeneralSettings(
     hideTitleInBody,
     defaultViewMode,
     showTrayIcon,
+    closeToTray,
     enableWikiLinks,
   });
 }
@@ -211,6 +213,10 @@ export async function removeQuickAccess(noteRelative: string): Promise<void> {
   return invoke("remove_quick_access", { noteRelative });
 }
 
+export async function reorderQuickAccess(paths: string[]): Promise<void> {
+  return invoke("reorder_quick_access", { paths });
+}
+
 export async function getVaultStats(): Promise<VaultStats> {
   return invoke("get_vault_stats");
 }
@@ -307,3 +313,7 @@ export async function aiAsk(
 ): Promise<void> {
   return invoke("ai_ask", { action, text, customPrompt, requestId });
 }
+
+export async function getInstallType(): Promise<string> {
+  return invoke("get_install_type");
+}

src/lib/components/AppLayout.svelte

@@ -20,11 +20,16 @@
 		showCommandPalette,
 		theme,
 		focusMode,
-		activeNote
+		activeNote,
+		activeNotePath,
+		editorDirty,
+		showInfo,
+		showSettings
 	} from '$lib/stores/app';
 
 	const appWindow = getCurrentWindow();
-	import { loadVaultState, saveVaultState } from '$lib/api';
+	const isMac = navigator.platform.startsWith('Mac');
+	import { loadVaultState, saveVaultState, readNote } from '$lib/api';
 	import { debounce } from '$lib/utils/debounce';
 	import type { VaultState, FileEvent } from '$lib/types';
 
@@ -32,6 +37,39 @@
 	let noteList: NoteList;
 	let editor: Editor;
 	let unlistenFileChange: (() => void) | null = null;
+	let navigatingFromHistory = false;
+	let noteHistory: string[] = [];
+	let noteHistoryIndex = -1;
+
+	// 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;
+		}
+	});
+
+	function navigateHistory(direction: -1 | 1) {
+		const newIndex = noteHistoryIndex + direction;
+		if (newIndex < 0 || newIndex >= noteHistory.length) return;
+		const path = noteHistory[newIndex];
+		noteHistoryIndex = newIndex;
+		navigatingFromHistory = true;
+		readNote(path).then((content) => {
+			$activeNote = content;
+			$activeNotePath = path;
+			$editorDirty = false;
+			editor?.loadNote(path, content.content);
+		}).catch(() => {
+			// Note may have been deleted, ignore
+		});
+	}
 
 	const persistState = debounce(async () => {
 		const state: VaultState = {
@@ -69,7 +107,22 @@
 		editor?.focusTitle();
 	}
 
+	function handleMouseDown(e: MouseEvent) {
+		if (e.button === 3) { e.preventDefault(); navigateHistory(-1); }
+		if (e.button === 4) { e.preventDefault(); navigateHistory(1); }
+	}
+
 	function handleKeydown(e: KeyboardEvent) {
+		if (e.altKey && e.key === 'ArrowLeft') {
+			e.preventDefault();
+			navigateHistory(-1);
+			return;
+		}
+		if (e.altKey && e.key === 'ArrowRight') {
+			e.preventDefault();
+			navigateHistory(1);
+			return;
+		}
 		if (e.ctrlKey && !e.shiftKey && e.key === 'n') {
 			e.preventDefault();
 			createAndFocusNote();
@@ -77,9 +130,19 @@
 		if (e.ctrlKey && e.shiftKey && e.key === 'N') {
 			e.preventDefault();
 		}
-		if (e.ctrlKey && e.key === 'f') {
+		if (e.ctrlKey && e.shiftKey && e.key === 'F') {
 			e.preventDefault();
 			$showSearch = true;
+			return;
+		}
+		if (e.ctrlKey && !e.shiftKey && e.key === 'f') {
+			e.preventDefault();
+			if ($activeNotePath) {
+				editor?.openNoteSearch();
+			} else {
+				$showSearch = true;
+			}
+			return;
 		}
 		if (e.ctrlKey && e.key === 'p') {
 			e.preventDefault();
@@ -90,7 +153,9 @@
 			editor?.forceSave();
 		}
 		if (e.key === 'Escape') {
-			if ($focusMode) $focusMode = false;
+			if ($showSettings) $showSettings = false;
+			else if ($showInfo) $showInfo = false;
+			else if ($focusMode) $focusMode = false;
 			else if ($showSearch) $showSearch = false;
 			else if ($showCommandPalette) $showCommandPalette = false;
 		}
@@ -142,12 +207,12 @@
 	});
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} onmousedown={handleMouseDown} />
 
 <div class="app-shell">
 	{#if $focusMode}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="focus-topbar" onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button')) appWindow.startDragging(); }}>
+		<div class="focus-topbar" class:macos={isMac} onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button')) appWindow.startDragging(); }}>
 			<span class="focus-title">{$activeNote?.meta.title || 'Untitled'}</span>
 			<div class="focus-controls">
 				<button class="focus-btn focus-active" onclick={() => ($focusMode = false)} title="Exit focus mode (Escape)">
@@ -155,6 +220,7 @@
 						<path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/>
 					</svg>
 				</button>
+				{#if !isMac}
 				<button class="focus-btn" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.minimize()} title="Minimize">
 					<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
 				</button>
@@ -164,6 +230,7 @@
 				<button class="focus-btn focus-close" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.close()} title="Close">
 					<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1.5" y1="1.5" x2="8.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="8.5" y1="1.5" x2="1.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
 				</button>
+				{/if}
 			</div>
 		</div>
 	{:else}
@@ -285,4 +352,8 @@
 		background: #e81123;
 		color: white;
 	}
+
+	.focus-topbar.macos {
+		padding-left: 78px;
+	}
 </style>

src/lib/components/Editor.svelte

@@ -63,6 +63,17 @@
 	let highlightDropdown = $state(false);
 	let alignDropdown = $state(false);
 	let insertDropdown = $state(false);
+
+	function closeAllDropdowns() {
+		headingDropdown = false;
+		colorDropdown = false;
+		highlightDropdown = false;
+		alignDropdown = false;
+		insertDropdown = false;
+		tablePickerOpen = false;
+	}
+
+	let anyDropdownOpen = $derived(headingDropdown || colorDropdown || highlightDropdown || alignDropdown || insertDropdown || tablePickerOpen);
 	let editorState = $state(0);
 
 	// AI
@@ -93,6 +104,14 @@
 	let historySelected = $state<VersionEntry | null>(null);
 	let historyLoading = $state(false);
 
+	// In-note search
+	let noteSearchOpen = $state(false);
+	let noteSearchQuery = $state('');
+	let noteSearchIndex = $state(0);
+	let noteSearchResults = $state<{from: number, to: number}[]>([]);
+	let noteSearchInput = $state<HTMLInputElement>(null!);
+	const noteSearchPluginKey = new PluginKey('noteSearch');
+
 	// Slash commands
 	let slashMenu = $state<{ x: number; y: number; query: string; from: number; to: number } | null>(null);
 	let slashSelectedIndex = $state(0);
@@ -267,6 +286,31 @@
 		codeLangDropdown = null;
 	}
 
+	// ── In-note search extension ──
+	const NoteSearchExtension = Extension.create({
+		name: 'noteSearch',
+		addProseMirrorPlugins() {
+			return [
+				new Plugin({
+					key: noteSearchPluginKey,
+					state: {
+						init() { return DecorationSet.empty; },
+						apply(tr, old) {
+							const meta = tr.getMeta(noteSearchPluginKey);
+							if (meta !== undefined) return meta;
+							return old.map(tr.mapping, tr.doc);
+						},
+					},
+					props: {
+						decorations(state) {
+							return this.getState(state);
+						},
+					},
+				}),
+			];
+		},
+	});
+
 	const CodeBlockLanguageSelect = Extension.create({
 		name: 'codeBlockLanguageSelect',
 		addProseMirrorPlugins() {
@@ -334,6 +378,9 @@
 		closeSlashMenu();
 	}
 
+	// Track whether the user just typed a slash (vs cursor moving into existing text)
+	let slashTypedByUser = false;
+
 	function closeSlashMenu() {
 		slashMenu = null;
 		slashSelectedIndex = 0;
@@ -363,6 +410,13 @@
 			return;
 		}
 
+		// Only open the menu if the user typed the slash, or the menu is already open
+		// This prevents triggering when clicking/arrowing into existing paths like /usr/local/bin
+		if (!slashMenu && !slashTypedByUser) {
+			return;
+		}
+		slashTypedByUser = false;
+
 		const query = match[2];
 		const slashOffset = textBefore.length - match[0].length + (match[1].length); // position of "/"
 		const from = resolvedFrom.start() + slashOffset;
@@ -389,6 +443,12 @@
 				new Plugin({
 					key: new PluginKey('slashCommands'),
 					props: {
+						handleTextInput: (_view, _from, _to, text) => {
+							if (text === '/') {
+								slashTypedByUser = true;
+							}
+							return false;
+						},
 						handleKeyDown: (_view, event) => {
 							if (!slashMenu) return false;
 							if (slashTablePicker) {
@@ -397,7 +457,14 @@
 									closeSlashMenu();
 									return true;
 								}
-								if (event.key === 'ArrowRight' || event.key === 'Tab') {
+								if (event.key === 'Tab') {
+									event.preventDefault();
+									if (slashTableHover.rows > 0 && slashTableHover.cols > 0) {
+										slashInsertTable(slashTableHover.rows, slashTableHover.cols);
+									}
+									return true;
+								}
+								if (event.key === 'ArrowRight') {
 									event.preventDefault();
 									slashTableHover = { rows: Math.max(1, slashTableHover.rows), cols: Math.min(10, (slashTableHover.cols || 0) + 1) };
 									return true;
@@ -436,7 +503,7 @@
 								slashSelectedIndex = (slashSelectedIndex - 1 + slashFiltered.length) % Math.max(1, slashFiltered.length);
 								return true;
 							}
-							if (event.key === 'Enter') {
+							if (event.key === 'Enter' || event.key === 'Tab') {
 								if (slashFiltered.length > 0) {
 									event.preventDefault();
 									executeSlashCommand(slashSelectedIndex);
@@ -656,6 +723,8 @@
 			closeWikiLinkMenu();
 			return;
 		}
+		// Refresh titles when the menu first opens so newly created notes are found
+		if (!wikiLinkMenu) refreshWikiLinkTitles();
 		const query = match[1];
 		const bracketOffset = textBefore.length - match[0].length;
 		const from = resolvedFrom.start() + bracketOffset;
@@ -1002,14 +1071,23 @@
 	}
 
 	function prosemirrorToMarkdown(doc: any): string {
+		const listTypes = new Set(['bulletList', 'orderedList', 'taskList']);
 		const parts: string[] = [];
 		let prevType = '';
+		let preserveEmptyParas = false;
 		doc.forEach((node: any) => {
-			// Skip empty paragraphs right after code blocks (TipTap cursor placeholder)
-			if (node.type.name === 'paragraph' && node.childCount === 0 && prevType === 'codeBlock') {
+			const isEmpty = node.type.name === 'paragraph' && node.childCount === 0;
+			// After a list or code block, preserve empty paragraphs as HTML comments
+			// so markdown-it doesn't merge adjacent lists or collapse spacing
+			if (listTypes.has(prevType) || prevType === 'codeBlock') {
+				preserveEmptyParas = true;
+			}
+			if (isEmpty && preserveEmptyParas) {
+				parts.push('<!-- -->');
 				prevType = node.type.name;
 				return;
 			}
+			preserveEmptyParas = false;
 			parts.push(serializeNode(node));
 			prevType = node.type.name;
 		});
@@ -1038,9 +1116,12 @@
 				return '```' + lang + '\n' + code + '\n```\n';
 			}
 			case 'blockquote': {
-				const inner: string[] = [];
-				node.forEach((child: any) => inner.push(serializeNode(child)));
-				return inner.join('').split('\n').filter((l: string) => l !== '').map((l: string) => '> ' + l).join('\n') + '\n';
+				const blocks: string[] = [];
+				node.forEach((child: any) => {
+					const lines = serializeNode(child).replace(/\n$/, '').split('\n');
+					blocks.push(lines.map((l: string) => '> ' + l).join('\n'));
+				});
+				return blocks.join('\n>\n') + '\n';
 			}
 			case 'bulletList': {
 				const items: string[] = [];
@@ -1125,7 +1206,15 @@
 						case 'underline': text = `<u>${text}</u>`; break;
 						case 'subscript': text = `~${text}~`; break;
 						case 'superscript': text = `^${text}^`; break;
-						case 'highlight': text = `==${text}==`; break;
+						case 'highlight': {
+							const color = mark.attrs?.color;
+							if (color) {
+								text = `<mark data-color="${color}">${text}</mark>`;
+							} else {
+								text = `==${text}==`;
+							}
+							break;
+						}
 						case 'link': text = `[${text}](${mark.attrs.href})`; break;
 						case 'wikiLink': text = `[[${mark.attrs.title || text}]]`; break;
 					}
@@ -1144,6 +1233,91 @@
 		return parts.join('');
 	}
 
+	function autofocus(el: HTMLElement) {
+		requestAnimationFrame(() => el.focus());
+	}
+
+	// ── In-note search functions ──
+	let noteSearchTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function updateNoteSearch(query: string) {
+		if (noteSearchTimer) clearTimeout(noteSearchTimer);
+		if (!editor) return;
+		if (!query) {
+			noteSearchResults = [];
+			noteSearchIndex = 0;
+			const tr = editor.state.tr.setMeta(noteSearchPluginKey, DecorationSet.empty);
+			editor.view.dispatch(tr);
+			return;
+		}
+		noteSearchTimer = setTimeout(() => {
+			if (!editor) return;
+			const results: {from: number, to: number}[] = [];
+			const lowerQuery = query.toLowerCase();
+			editor.state.doc.descendants((node, pos) => {
+				if (!node.isText || !node.text) return;
+				const text = node.text.toLowerCase();
+				let idx = text.indexOf(lowerQuery);
+				while (idx !== -1) {
+					results.push({ from: pos + idx, to: pos + idx + query.length });
+					idx = text.indexOf(lowerQuery, idx + 1);
+				}
+			});
+			noteSearchResults = results;
+			if (noteSearchIndex >= results.length) noteSearchIndex = 0;
+			applySearchDecorations();
+		}, 100);
+	}
+
+	function applySearchDecorations() {
+		if (!editor) return;
+		const decorations = noteSearchResults.map((m, i) =>
+			Decoration.inline(m.from, m.to, { class: i === noteSearchIndex ? 'note-search-match note-search-active' : 'note-search-match' })
+		);
+		const decoSet = DecorationSet.create(editor.state.doc, decorations);
+		const tr = editor.state.tr.setMeta(noteSearchPluginKey, decoSet);
+		editor.view.dispatch(tr);
+		scrollToCurrentMatch();
+	}
+
+	function scrollToCurrentMatch() {
+		if (!editor || noteSearchResults.length === 0) return;
+		requestAnimationFrame(() => {
+			const el = editor?.view.dom.querySelector('.note-search-active');
+			if (el) {
+				el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+			}
+		});
+	}
+
+	function noteSearchNext() {
+		if (noteSearchResults.length === 0) return;
+		noteSearchIndex = (noteSearchIndex + 1) % noteSearchResults.length;
+		applySearchDecorations();
+	}
+
+	function noteSearchPrev() {
+		if (noteSearchResults.length === 0) return;
+		noteSearchIndex = (noteSearchIndex - 1 + noteSearchResults.length) % noteSearchResults.length;
+		applySearchDecorations();
+	}
+
+	export function openNoteSearch() {
+		noteSearchOpen = true;
+	}
+
+	function closeNoteSearch() {
+		noteSearchOpen = false;
+		noteSearchQuery = '';
+		noteSearchResults = [];
+		noteSearchIndex = 0;
+		if (editor) {
+			const tr = editor.state.tr.setMeta(noteSearchPluginKey, DecorationSet.empty);
+			editor.view.dispatch(tr);
+			editor.commands.focus();
+		}
+	}
+
 	function stripAssetSrc(src: string): string {
 		// blob: URLs are not persistable — they were temporary browser references
 		if (src.startsWith('blob:')) return '';
@@ -1203,6 +1377,7 @@
 		md = md.replace(/<sub>(.*?)<\/sub>/gi, '~$1~');
 		md = md.replace(/<sup>(.*?)<\/sup>/gi, '^$1^');
 		md = md.replace(/<code>(.*?)<\/code>/gi, '`$1`');
+		md = md.replace(/<mark data-color="([^"]*)">(.*?)<\/mark>/gi, '<mark data-color="$1">$2</mark>');
 		md = md.replace(/<mark>(.*?)<\/mark>/gi, '==$1==');
 		md = md.replace(/<blockquote[^>]*>([\s\S]*?)<\/blockquote>/gi, (_, content) => {
 			return content
@@ -1310,8 +1485,10 @@
 		});
 
 		// Pre-process: convert task list syntax before markdown-it (it doesn't know TipTap's format)
-		src = src.replace(/^- \[x\]\s+(.+)$/gm, '- <tiptask checked="true">$1</tiptask>');
-		src = src.replace(/^- \[ \]\s+(.+)$/gm, '- <tiptask checked="false">$1</tiptask>');
+		src = src.replace(/^- \[x\][^\S\n]+(.+)$/gm, '- <tiptask checked="true">$1</tiptask>');
+		src = src.replace(/^- \[x\][^\S\n]*$/gm, '- <tiptask checked="true">&nbsp;</tiptask>');
+		src = src.replace(/^- \[ \][^\S\n]+(.+)$/gm, '- <tiptask checked="false">$1</tiptask>');
+		src = src.replace(/^- \[ \][^\S\n]*$/gm, '- <tiptask checked="false">&nbsp;</tiptask>');
 
 		// Run markdown-it (single-pass parser — handles headings, bold, italic, strike, code, blockquote, lists, links, images, hr, tables, raw HTML)
 		let html = mdit.render(src);
@@ -1320,8 +1497,11 @@
 		html = html.replace(/<code([^>]*)>\n?/g, '<code$1>');
 		html = html.replace(/\n<\/code>/g, '</code>');
 
-		// Post-process: convert task list items to TipTap format
-		html = html.replace(/<li><tiptask checked="(true|false)">([\s\S]*?)<\/tiptask><\/li>/gi, (_, checked, content) => {
+		// Post-process: convert list-separator comments back to empty paragraphs for TipTap
+		html = html.replace(/<!-- -->/g, '<p></p>');
+
+		// Post-process: convert task list items to TipTap format (handle both tight and loose lists — loose lists wrap content in <p> tags)
+		html = html.replace(/<li>\s*(?:<p>)?\s*<tiptask checked="(true|false)">([\s\S]*?)<\/tiptask>\s*(?:<\/p>)?\s*<\/li>/gi, (_, checked, content) => {
 			return `<li data-type="taskItem" data-checked="${checked}">${content}</li>`;
 		});
 		html = html.replace(/<ul>\s*(<li data-type="taskItem")/gi, '<ul data-type="taskList">$1');
@@ -1353,6 +1533,19 @@
 		}
 	});
 
+	// Close formatting dropdowns when clicking outside the formatting bar
+	$effect(() => {
+		if (!anyDropdownOpen) return;
+		function onClickAway(e: MouseEvent) {
+			const bar = document.querySelector('.editor-formatting-bar');
+			if (bar && !bar.contains(e.target as Node)) {
+				closeAllDropdowns();
+			}
+		}
+		document.addEventListener('mousedown', onClickAway);
+		return () => document.removeEventListener('mousedown', onClickAway);
+	});
+
 	// React to activeNotePath changes from external sources (e.g. search panel)
 	$effect(() => {
 		const path = $activeNotePath;
@@ -1418,6 +1611,7 @@
 				DetailsContent,
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				SlashCommands,
+				NoteSearchExtension,
 				...($appConfig?.enable_wiki_links ? [WikiLink, WikiLinkAutocomplete] : []),
 			],
 			content: html,
@@ -1579,7 +1773,7 @@
 		let x = event.clientX;
 		let y = event.clientY;
 		const menuWidth = 220;
-		const menuHeight = 640;
+		const menuHeight = 740;
 		if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 8;
 		if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 8;
 		if (x < 4) x = 4;
@@ -1875,8 +2069,17 @@
 		}
 	}
 
-	function aiApplyResult() {
+	async function aiApplyResult() {
 		if (!editor || !aiResult) return;
+		// Save a version snapshot before applying AI changes
+		if ($activeNotePath && $activeNote && !aiEmptyNote) {
+			try {
+				await forceSave();
+				await createVersion($activeNotePath, $activeNote.meta.id);
+			} catch (e) {
+				console.error('Failed to create version before AI apply:', e);
+			}
+		}
 		if (aiEmptyNote) {
 			// Parse title from first line, rest is content
 			const lines = aiResult.split('\n');
@@ -2285,6 +2488,16 @@
 				{#if readOnly}
 					<span class="readonly-indicator">View Mode</span>
 				{/if}
+				<button
+					class="icon-btn"
+					class:active={noteSearchOpen}
+					onclick={() => noteSearchOpen ? closeNoteSearch() : openNoteSearch()}
+					title="Find in note (Ctrl+F)"
+				>
+					<svg width="16" height="16" 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>
+				</button>
 				<button
 					class="icon-btn"
 					class:active={readOnly}
@@ -2392,6 +2605,41 @@
 		</div>
 
 		<div class="editor-body-wrapper">
+			{#if noteSearchOpen}
+				<div class="note-search-bar">
+					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.5;flex-shrink:0"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+					<input
+						bind:this={noteSearchInput}
+						type="text"
+						class="note-search-input"
+						placeholder="Find in note..."
+						bind:value={noteSearchQuery}
+						oninput={() => updateNoteSearch(noteSearchQuery)}
+						onkeydown={(e) => {
+							if (e.key === 'Enter') { e.preventDefault(); e.shiftKey ? noteSearchPrev() : noteSearchNext(); }
+							if (e.key === 'Escape') { e.preventDefault(); closeNoteSearch(); }
+						}}
+						use:autofocus
+					/>
+					<span class="note-search-count">
+						{#if noteSearchQuery && noteSearchResults.length > 0}
+							{noteSearchIndex + 1} / {noteSearchResults.length}
+						{:else if noteSearchQuery}
+							No results
+						{/if}
+					</span>
+					<button class="note-search-btn" onclick={noteSearchPrev} title="Previous (Shift+Enter)">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
+					</button>
+					<button class="note-search-btn" onclick={noteSearchNext} title="Next (Enter)">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+					</button>
+					<button class="note-search-btn" onclick={closeNoteSearch} title="Close (Esc)">
+						<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="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+					</button>
+				</div>
+			{/if}
+			<div class="editor-body-row">
 			<div class="editor-body">
 				{#if $sourceMode}
 					<textarea
@@ -2461,6 +2709,7 @@
 					{/if}
 				</div>
 			{/if}
+			</div>
 		</div>
 
 		{#if editorReady && !$sourceMode}
@@ -2469,37 +2718,37 @@
 				<!-- Insert (+) dropdown -->
 				<div class="fmt-dropdown-wrap">
 					<button class="fmt-btn insert-btn" onclick={(e) => { e.stopPropagation(); insertDropdown = !insertDropdown; headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; }} title="Insert">
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
 					</button>
 					{#if insertDropdown}
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div class="fmt-dropdown insert-dropdown" onclick={(e) => e.stopPropagation()}>
 							<button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-image-input')?.click(); }}>
-								<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"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+								<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="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 00-2.828 0L6 21"/></svg>
 								Image
 							</button>
 							<button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-file-input')?.click(); }}>
-								<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="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
+								<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="M6 22a2 2 0 01-2-2V4a2 2 0 012-2h8a2.4 2.4 0 011.704.706l3.588 3.588A2.4 2.4 0 0120 8v12a2 2 0 01-2 2z"/><path d="M14 2v5a1 1 0 001 1h5"/></svg>
 								File
 							</button>
 							<button onclick={() => { insertDropdown = false; tablePickerOpen = true; }}>
-								<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"/><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>
+								<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="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>
 								Table
 							</button>
 							<button onclick={() => { insertDropdown = false; editor?.chain().focus().setHorizontalRule().run(); }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"/></svg>
+								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/></svg>
 								Horizontal Rule
 							</button>
 							<button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleCodeBlock().run(); }}>
-								<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>
+								<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="m10 9-3 3 3 3"/><path d="m14 15 3-3-3-3"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
 								Code Block
 							</button>
 							<button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleBlockquote().run(); }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M3 6h4v4l-2 6H3l2-6H3V6zm10 0h4v4l-2 6h-2l2-6h-2V6z"/></svg>
+								<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(); }}>
-								<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>
+								<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>
 						</div>
@@ -2511,7 +2760,7 @@
 				<!-- Heading dropdown -->
 				<div class="fmt-dropdown-wrap">
 					<button class="fmt-btn" class:active={(editorState, editor.isActive('heading'))} onclick={(e) => { e.stopPropagation(); headingDropdown = !headingDropdown; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }} title="Heading">
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16M4 6v12M20 6v12"/></svg>
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h12"/><path d="M6 20V4"/><path d="M18 20V4"/></svg>
 					</button>
 					{#if headingDropdown}
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -2529,22 +2778,22 @@
 
 				<!-- Text formatting -->
 				<button class="fmt-btn" class:active={(editorState, editor.isActive('bold'))} onclick={() => editor?.chain().focus().toggleBold().run()} title="Bold (Ctrl+B)">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h8a4 4 0 014 4 4 4 0 01-4 4H6zm0 8h9a4 4 0 014 4 4 4 0 01-4 4H6z" stroke="currentColor" stroke-width="1" fill="none"/></svg>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h9a4 4 0 010 8H7a1 1 0 01-1-1V5a1 1 0 011-1h7a4 4 0 010 8"/></svg>
 				</button>
 				<button class="fmt-btn" class:active={(editorState, editor.isActive('italic'))} onclick={() => editor?.chain().focus().toggleItalic().run()} title="Italic (Ctrl+I)">
-					<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="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
+					<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="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
 				</button>
 				<button class="fmt-btn" class:active={(editorState, editor.isActive('underline'))} onclick={() => editor?.chain().focus().toggleUnderline().run()} title="Underline (Ctrl+U)">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v7a6 6 0 006 6 6 6 0 006-6V3"/><line x1="4" y1="21" x2="20" y2="21"/></svg>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0012 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
 				</button>
-				<button class="fmt-btn" class:active={(editorState, editor.isActive('strike'))} onclick={() => editor?.chain().focus().toggleStrike().run()} title="Strikethrough">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 00-3 3 3 3 0 003 3h6"/><line x1="4" y1="12" x2="20" y2="12"/><path d="M8 20h7a3 3 0 003-3 3 3 0 00-3-3H8"/></svg>
+				<button class="fmt-btn" class:active={(editorState, editor.isActive('strike'))} onclick={() => editor?.chain().focus().toggleStrike().run()} title="Strikethrough (Ctrl+Shift+X)">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 00-2.83 4"/><path d="M14 12a4 4 0 010 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
 				</button>
 
 				<!-- Text color -->
 				<div class="fmt-dropdown-wrap">
 					<button class="fmt-btn" onclick={(e) => { e.stopPropagation(); colorDropdown = !colorDropdown; headingDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }} title="Text Color">
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2l5 0M12 2l-5 17M17 19H5M15 7l4 12"/></svg>
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16"/><path d="m6 16 6-12 6 12"/><path d="M8 12h8"/></svg>
 						<span class="color-indicator" style="background: {editor.getAttributes('textStyle').color || 'var(--accent)'}"></span>
 					</button>
 					{#if colorDropdown}
@@ -2564,57 +2813,57 @@
 				<div class="fmt-sep"></div>
 
 				<!-- Link -->
-				<button class="fmt-btn" class:active={(editorState, editor.isActive('link'))} onclick={addLinkFromToolbar} title="Link">
+				<button class="fmt-btn" class:active={(editorState, editor.isActive('link'))} onclick={addLinkFromToolbar} title="Link (Ctrl+K)">
 					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
 				</button>
 
 				<div class="fmt-sep"></div>
 
 				<!-- Lists -->
-				<button class="fmt-btn" class:active={(editorState, editor.isActive('bulletList'))} onclick={() => editor?.chain().focus().toggleBulletList().run()} title="Bullet List">
-					<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="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="3.5" cy="6" r="1.5" fill="currentColor"/><circle cx="3.5" cy="12" r="1.5" fill="currentColor"/><circle cx="3.5" cy="18" r="1.5" fill="currentColor"/></svg>
+				<button class="fmt-btn" class:active={(editorState, editor.isActive('bulletList'))} onclick={() => editor?.chain().focus().toggleBulletList().run()} title="Bullet List (Ctrl+Shift+8)">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>
 				</button>
-				<button class="fmt-btn" class:active={(editorState, editor.isActive('orderedList'))} onclick={() => editor?.chain().focus().toggleOrderedList().run()} title="Ordered List">
-					<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="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><text x="1" y="8" font-size="8" fill="currentColor" stroke="none" font-weight="600">1</text><text x="1" y="14" font-size="8" fill="currentColor" stroke="none" font-weight="600">2</text><text x="1" y="20" font-size="8" fill="currentColor" stroke="none" font-weight="600">3</text></svg>
+				<button class="fmt-btn" class:active={(editorState, editor.isActive('orderedList'))} onclick={() => editor?.chain().focus().toggleOrderedList().run()} title="Ordered List (Ctrl+Shift+7)">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5h10"/><path d="M11 12h10"/><path d="M11 19h10"/><path d="M4 4h1v5"/><path d="M4 9h2"/><path d="M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 00-2.6-1.02"/></svg>
 				</button>
-				<button class="fmt-btn" class:active={(editorState, editor.isActive('taskList'))} onclick={() => editor?.chain().focus().toggleTaskList().run()} title="Task List">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><polyline points="4.5 6.5 6 8 8.5 4.5"/><line x1="13" y1="6.5" x2="21" y2="6.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><line x1="13" y1="17.5" x2="21" y2="17.5"/></svg>
+				<button class="fmt-btn" class:active={(editorState, editor.isActive('taskList'))} onclick={() => editor?.chain().focus().toggleTaskList().run()} title="Task List (Ctrl+Shift+9)">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 5h8"/><path d="M13 12h8"/><path d="M13 19h8"/><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/></svg>
 				</button>
 
 				<div class="fmt-sep"></div>
 
 				<!-- Undo / Redo -->
 				<button class="fmt-btn" onclick={() => editor?.chain().focus().undo().run()} title="Undo (Ctrl+Z)">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 015.5 5.5 5.5 5.5 0 01-5.5 5.5H11"/></svg>
 				</button>
 				<button class="fmt-btn" onclick={() => editor?.chain().focus().redo().run()} title="Redo (Ctrl+Shift+Z)">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.13-9.36L23 10"/></svg>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 004 14.5 5.5 5.5 0 009.5 20H13"/></svg>
 				</button>
 
 				<div class="fmt-sep"></div>
 
 				<!-- Code & Code Block -->
-				<button class="fmt-btn" class:active={(editorState, editor.isActive('code'))} onclick={() => editor?.chain().focus().toggleCode().run()} title="Inline Code">
-					<svg width="16" height="16" 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>
+				<button class="fmt-btn" class:active={(editorState, editor.isActive('code'))} onclick={() => editor?.chain().focus().toggleCode().run()} title="Inline Code (Ctrl+E)">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg>
 				</button>
-				<button class="fmt-btn" class:active={(editorState, editor.isActive('codeBlock'))} onclick={() => editor?.chain().focus().toggleCodeBlock().run()} title="Code Block">
-					<svg width="16" height="16" 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="9 8 5 12 9 16"/><polyline points="15 8 19 12 15 16"/></svg>
+				<button class="fmt-btn" class:active={(editorState, editor.isActive('codeBlock'))} onclick={() => editor?.chain().focus().toggleCodeBlock().run()} title="Code Block (Ctrl+Alt+C)">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m10 9-3 3 3 3"/><path d="m14 15 3-3-3-3"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
 				</button>
 
 				<!-- Blockquote -->
-				<button class="fmt-btn" class:active={(editorState, editor.isActive('blockquote'))} onclick={() => editor?.chain().focus().toggleBlockquote().run()} title="Quote">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3 6h4v4l-2 6H3l2-6H3V6zm10 0h4v4l-2 6h-2l2-6h-2V6z"/></svg>
+				<button class="fmt-btn" class:active={(editorState, editor.isActive('blockquote'))} onclick={() => editor?.chain().focus().toggleBlockquote().run()} title="Quote (Ctrl+Shift+B)">
+					<svg width="16" height="16" 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>
 				</button>
 
 				<!-- Collapsible Section -->
 				<button class="fmt-btn" class:active={(editorState, editor.isActive('details'))} onclick={() => editor?.chain().focus().setDetails().run()} 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 x="3" y="3" width="18" height="18" rx="2"/><polyline points="10 8 14 12 10 16"/></svg>
+					<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>
 
 				<!-- Table -->
 				<div class="fmt-dropdown-wrap">
 					<button class="fmt-btn" onclick={(e) => { e.stopPropagation(); tablePickerOpen = !tablePickerOpen; headingDropdown = false; colorDropdown = false; highlightDropdown = false; alignDropdown = false; insertDropdown = false; }} title="Insert Table">
-						<svg width="16" height="16" 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"/><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>
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>
 					</button>
 					{#if tablePickerOpen}
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -2641,15 +2890,15 @@
 
 				<!-- Horizontal Rule -->
 				<button class="fmt-btn" onclick={() => editor?.chain().focus().setHorizontalRule().run()} title="Horizontal Rule">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"/></svg>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/></svg>
 				</button>
 
 				<div class="fmt-sep"></div>
 
 				<!-- Highlight -->
 				<div class="fmt-dropdown-wrap">
-					<button class="fmt-btn" class:active={(editorState, editor.isActive('highlight'))} onclick={(e) => { e.stopPropagation(); highlightDropdown = !highlightDropdown; headingDropdown = false; colorDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }} title="Highlight">
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/><path d="M15 5l3 3"/></svg>
+					<button class="fmt-btn" class:active={(editorState, editor.isActive('highlight'))} onclick={(e) => { e.stopPropagation(); highlightDropdown = !highlightDropdown; headingDropdown = false; colorDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }} title="Highlight (Ctrl+Shift+H)">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 01-2.8 0l-5.2-5.2a2 2 0 010-2.8L14 4"/></svg>
 						<span class="color-indicator" style="background: {editor.getAttributes('highlight').color || 'var(--accent)'}"></span>
 					</button>
 					{#if highlightDropdown}
@@ -2675,10 +2924,10 @@
 
 				<!-- Subscript & Superscript -->
 				<button class="fmt-btn" class:active={(editorState, editor.isActive('subscript'))} onclick={() => editor?.chain().focus().toggleSubscript().run()} title="Subscript">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><text x="2" y="14" font-size="14" fill="currentColor" stroke="none" font-weight="600">x</text><text x="14" y="20" font-size="10" fill="currentColor" stroke="none">2</text></svg>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 5 8 8"/><path d="m12 5-8 8"/><path d="M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 00-2.62-.44c-.42.24-.74.62-.9 1.07"/></svg>
 				</button>
 				<button class="fmt-btn" class:active={(editorState, editor.isActive('superscript'))} onclick={() => editor?.chain().focus().toggleSuperscript().run()} title="Superscript">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><text x="2" y="16" font-size="14" fill="currentColor" stroke="none" font-weight="600">x</text><text x="14" y="10" font-size="10" fill="currentColor" stroke="none">2</text></svg>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 19 8-8"/><path d="m12 19-8-8"/><path d="M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 00-2.617-.436c-.42.239-.738.614-.899 1.06"/></svg>
 				</button>
 
 				<div class="fmt-sep"></div>
@@ -2687,32 +2936,32 @@
 				<div class="fmt-dropdown-wrap">
 					<button class="fmt-btn" onclick={(e) => { e.stopPropagation(); alignDropdown = !alignDropdown; headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; insertDropdown = false; }} title="Text Alignment">
 						{#if (editorState, editor.isActive({ textAlign: 'center' }))}
-							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="10" x2="18" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="6" y1="18" x2="18" y2="18"/></svg>
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"/><path d="M17 12H7"/><path d="M19 19H5"/></svg>
 						{:else if (editorState, editor.isActive({ textAlign: 'right' }))}
-							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="9" y1="18" x2="21" y2="18"/></svg>
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"/><path d="M21 12H9"/><path d="M21 19H7"/></svg>
 						{:else if (editorState, editor.isActive({ textAlign: 'justify' }))}
-							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18"/><path d="M3 12h18"/><path d="M3 19h18"/></svg>
 						{:else}
-							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="10" x2="15" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="3" y1="18" x2="15" y2="18"/></svg>
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"/><path d="M15 12H3"/><path d="M17 19H3"/></svg>
 						{/if}
 					</button>
 					{#if alignDropdown}
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div class="fmt-dropdown align-dropdown" onclick={(e) => e.stopPropagation()}>
 							<button class:active={(editorState, editor.isActive({ textAlign: 'left' }))} onclick={() => { editor?.chain().focus().setTextAlign('left').run(); alignDropdown = false; }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="10" x2="15" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="3" y1="18" x2="15" y2="18"/></svg>
+								<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="M21 5H3"/><path d="M15 12H3"/><path d="M17 19H3"/></svg>
 								Left
 							</button>
 							<button class:active={(editorState, editor.isActive({ textAlign: 'center' }))} onclick={() => { editor?.chain().focus().setTextAlign('center').run(); alignDropdown = false; }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="10" x2="18" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="6" y1="18" x2="18" y2="18"/></svg>
+								<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="M21 5H3"/><path d="M17 12H7"/><path d="M19 19H5"/></svg>
 								Center
 							</button>
 							<button class:active={(editorState, editor.isActive({ textAlign: 'right' }))} onclick={() => { editor?.chain().focus().setTextAlign('right').run(); alignDropdown = false; }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="9" y1="18" x2="21" y2="18"/></svg>
+								<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="M21 5H3"/><path d="M21 12H9"/><path d="M21 19H7"/></svg>
 								Right
 							</button>
 							<button class:active={(editorState, editor.isActive({ textAlign: 'justify' }))} onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); alignDropdown = false; }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+								<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="M3 5h18"/><path d="M3 12h18"/><path d="M3 19h18"/></svg>
 								Justify
 							</button>
 						</div>
@@ -3175,6 +3424,7 @@
 						placeholder="Tell AI what to do with the selected text..."
 						bind:value={aiCustomPrompt}
 						onkeydown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); runAiAction('custom', aiCustomPrompt); } }}
+						use:autofocus
 					></textarea>
 					<button class="ai-custom-submit" onclick={() => runAiAction('custom', aiCustomPrompt)} disabled={!aiCustomPrompt.trim()}>
 						<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="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></svg>
@@ -3203,6 +3453,7 @@
 						placeholder="Describe the note you want to create..."
 						bind:value={aiCustomPrompt}
 						onkeydown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); runAiAction('custom', aiCustomPrompt); } }}
+						use:autofocus
 					></textarea>
 					<button class="ai-custom-submit" onclick={() => runAiAction('custom', aiCustomPrompt)} disabled={!aiCustomPrompt.trim()}>
 						<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="M12 8V4l-2-2"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M9 13v2"/><path d="M15 13v2"/></svg>
@@ -3591,9 +3842,66 @@
 	.editor-body-wrapper {
 		flex: 1;
 		display: flex;
+		flex-direction: column;
 		overflow: hidden;
 	}
 
+	.note-search-bar {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 6px 12px;
+		background: var(--bg-secondary);
+		border-bottom: 1px solid var(--border);
+		flex-shrink: 0;
+	}
+	.note-search-input {
+		flex: 1;
+		background: transparent;
+		border: none;
+		color: var(--text-primary);
+		font-size: 13px;
+		outline: none;
+		min-width: 0;
+	}
+	.note-search-input::placeholder {
+		color: var(--text-secondary);
+	}
+	.note-search-count {
+		font-size: 12px;
+		color: var(--text-secondary);
+		white-space: nowrap;
+	}
+	.note-search-btn {
+		background: none;
+		border: none;
+		color: var(--text-secondary);
+		cursor: pointer;
+		padding: 2px;
+		border-radius: 4px;
+		display: flex;
+		align-items: center;
+	}
+	.note-search-btn:hover {
+		background: var(--bg-hover);
+		color: var(--text-primary);
+	}
+	:global(.note-search-match) {
+		background: rgba(255, 200, 0, 0.3);
+		border-radius: 2px;
+	}
+	:global(.note-search-active) {
+		background: rgba(255, 150, 0, 0.6);
+	}
+
+	.editor-body-row {
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		overflow: hidden;
+		min-height: 0;
+	}
+
 	.editor-body {
 		flex: 1;
 		overflow-y: auto;
@@ -4190,9 +4498,11 @@
 	}
 
 	:global(.tiptap-wrapper .tiptap mark) {
-		padding: 1px 3px;
+		padding: 0px 5px 2px;
 		border-radius: 3px;
 		color: #333 !important;
+		box-decoration-break: clone;
+		-webkit-box-decoration-break: clone;
 	}
 
 	:global(.dark .tiptap-wrapper .tiptap mark) {

src/lib/components/GraphView.svelte

@@ -20,16 +20,17 @@
 		y: number;
 		vx: number;
 		vy: number;
-		links: string[]; // titles this note links to
 	}
 
 	interface GraphEdge {
-		source: string;
-		target: string;
+		sourceIdx: number;
+		targetIdx: number;
 	}
 
 	let nodes: GraphNode[] = [];
 	let edges: GraphEdge[] = [];
+	let nodeIndexMap: Map<string, number> = new Map();
+	let connectedSet: Set<number> = new Set();
 	let animFrame = 0;
 	let pan = { x: 0, y: 0 };
 	let zoom = 1;
@@ -39,6 +40,7 @@
 	let panning = false;
 	let panStart = { x: 0, y: 0 };
 	let hoveredNode: GraphNode | null = null;
+	let glowPhase = 0;
 
 	const wikiLinkRegex = /\[\[([^\]]+)\]\]/g;
 
@@ -54,7 +56,7 @@
 			// Create nodes
 			const w = canvas?.width ?? 800;
 			const h = canvas?.height ?? 600;
-			nodes = titles.map((t, i) => ({
+			nodes = titles.map((t) => ({
 				id: t.title.toLowerCase(),
 				title: t.title,
 				path: t.path,
@@ -62,33 +64,45 @@
 				y: h / 2 + (Math.random() - 0.5) * Math.min(w, h) * 0.6,
 				vx: 0,
 				vy: 0,
-				links: [],
 			}));
 
-			const nodeMap = new Map<string, GraphNode>();
-			for (const n of nodes) nodeMap.set(n.id, n);
+			// Build index map for O(1) lookups
+			nodeIndexMap = new Map();
+			for (let i = 0; i < nodes.length; i++) {
+				nodeIndexMap.set(nodes[i].id, i);
+			}
 
-			// Read each note to extract [[wiki-links]]
+			// Read all notes in parallel (batched) to extract [[wiki-links]]
 			const edgeSet = new Set<string>();
-			for (const node of nodes) {
-				try {
-					const content = await readNote(node.path);
-					const body = content.content || '';
+			edges = [];
+			const BATCH_SIZE = 20;
+			for (let b = 0; b < nodes.length; b += BATCH_SIZE) {
+				const batch = nodes.slice(b, b + BATCH_SIZE);
+				const results = await Promise.allSettled(
+					batch.map(async (node) => {
+						const content = await readNote(node.path);
+						return { node, body: content.content || '' };
+					})
+				);
+				for (const result of results) {
+					if (result.status !== 'fulfilled') continue;
+					const { node, body } = result.value;
+					const nodeIdx = nodeIndexMap.get(node.id)!;
 					let match;
 					wikiLinkRegex.lastIndex = 0;
 					while ((match = wikiLinkRegex.exec(body)) !== null) {
 						const linkTitle = match[1].trim().toLowerCase();
-						if (linkTitle !== node.id && nodeMap.has(linkTitle)) {
-							node.links.push(linkTitle);
-							const edgeKey = [node.id, linkTitle].sort().join('|');
+						const targetIdx = nodeIndexMap.get(linkTitle);
+						if (linkTitle !== node.id && targetIdx !== undefined) {
+							const edgeKey = nodeIdx < targetIdx ? `${nodeIdx}|${targetIdx}` : `${targetIdx}|${nodeIdx}`;
 							if (!edgeSet.has(edgeKey)) {
 								edgeSet.add(edgeKey);
-								edges.push({ source: node.id, target: linkTitle });
+								edges.push({ sourceIdx: nodeIdx, targetIdx });
+								connectedSet.add(nodeIdx);
+								connectedSet.add(targetIdx);
 							}
 						}
 					}
-				} catch {
-					// Skip notes that can't be read
 				}
 			}
 		} catch (e) {
@@ -98,13 +112,57 @@
 		startSimulation();
 	}
 
+	function centerOnActiveNote() {
+		if (!canvas || nodes.length === 0) return;
+		const activePath = $activeNotePath || '';
+		const activeNode = nodes.find(n => n.path === activePath);
+
+		// Only center on active note if it has connections
+		if (!activeNode) return;
+		const activeIdx = nodeIndexMap.get(activeNode.id);
+		if (activeIdx === undefined || !connectedSet.has(activeIdx)) return;
+
+		// Gather the active node and its direct neighbors
+		const neighborhood: GraphNode[] = [activeNode];
+		for (const edge of edges) {
+			if (edge.sourceIdx === activeIdx) neighborhood.push(nodes[edge.targetIdx]);
+			else if (edge.targetIdx === activeIdx) neighborhood.push(nodes[edge.sourceIdx]);
+		}
+
+		const w = canvas.width;
+		const h = canvas.height;
+		const padding = 80;
+
+		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;
+		}
+
+		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;
+	}
+
 	function fitToView() {
 		if (!canvas || nodes.length === 0) return;
 		const w = canvas.width;
 		const h = canvas.height;
 		const padding = 60;
 
-		// Compute bounding box of all nodes
 		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
 		for (const node of nodes) {
 			if (node.x < minX) minX = node.x;
@@ -118,36 +176,49 @@
 		const centerGraphX = (minX + maxX) / 2;
 		const centerGraphY = (minY + maxY) / 2;
 
-		// Compute zoom to fit
 		zoom = Math.min(
 			(w - padding * 2) / graphW,
 			(h - padding * 2) / graphH,
-			2 // max zoom
+			2
 		);
 		zoom = Math.max(zoom, 0.2);
 
-		// Center the graph
 		pan.x = w / 2 - centerGraphX * zoom;
 		pan.y = h / 2 - centerGraphY * zoom;
 	}
 
 	function startSimulation() {
 		if (animFrame) cancelAnimationFrame(animFrame);
-		let iterations = 0;
-		const maxIterations = 300;
 
-		function tick() {
-			if (iterations >= maxIterations) {
-				fitToView();
-				draw();
-				return;
-			}
+		// Run physics synchronously — no need to animate the settling
+		for (let i = 0; i < 300; i++) {
 			simulate();
-			draw();
-			iterations++;
-			animFrame = requestAnimationFrame(tick);
 		}
-		animFrame = requestAnimationFrame(tick);
+
+		// Center on active note if it has links, otherwise fit all
+		const activePath = $activeNotePath || '';
+		const activeNode = nodes.find(n => n.path === activePath);
+		const activeIdx = activeNode ? nodeIndexMap.get(activeNode.id) : undefined;
+		if (activeIdx !== undefined && connectedSet.has(activeIdx)) {
+			centerOnActiveNote();
+		} else {
+			fitToView();
+		}
+
+		draw();
+		startGlowLoop();
+	}
+
+	let glowFrame = 0;
+
+	function startGlowLoop() {
+		if (glowFrame) cancelAnimationFrame(glowFrame);
+		function loop() {
+			glowPhase += 0.04;
+			draw();
+			glowFrame = requestAnimationFrame(loop);
+		}
+		glowFrame = requestAnimationFrame(loop);
 	}
 
 	function simulate() {
@@ -161,13 +232,14 @@
 
 		// Repulsion between all nodes
 		for (let i = 0; i < nodeCount; i++) {
+			const a = nodes[i];
 			for (let j = i + 1; j < nodeCount; j++) {
-				const a = nodes[i];
 				const b = nodes[j];
-				let dx = b.x - a.x;
-				let dy = b.y - a.y;
-				let dist = Math.sqrt(dx * dx + dy * dy) || 1;
-				const force = 800 / (dist * dist);
+				const dx = b.x - a.x;
+				const dy = b.y - a.y;
+				const distSq = dx * dx + dy * dy || 1;
+				const force = 800 / distSq;
+				const dist = Math.sqrt(distSq);
 				const fx = (dx / dist) * force;
 				const fy = (dy / dist) * force;
 				a.vx -= fx;
@@ -177,14 +249,13 @@
 			}
 		}
 
-		// Attraction along edges
+		// Attraction along edges (indexed lookups)
 		for (const edge of edges) {
-			const a = nodes.find(n => n.id === edge.source);
-			const b = nodes.find(n => n.id === edge.target);
-			if (!a || !b) continue;
-			let dx = b.x - a.x;
-			let dy = b.y - a.y;
-			let dist = Math.sqrt(dx * dx + dy * dy) || 1;
+			const a = nodes[edge.sourceIdx];
+			const b = nodes[edge.targetIdx];
+			const dx = b.x - a.x;
+			const 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;
@@ -227,16 +298,14 @@
 		const textColor = style.getPropertyValue('--text-primary').trim() || '#eee';
 		const textSecondary = style.getPropertyValue('--text-tertiary').trim() || '#888';
 		const accent = style.getPropertyValue('--accent').trim() || '#7b9bd4';
-		const accentLight = style.getPropertyValue('--accent-light').trim() || 'rgba(123,155,212,0.15)';
 
 		// Draw edges
 		ctx.strokeStyle = borderColor;
 		ctx.lineWidth = 1;
 		ctx.globalAlpha = 0.4;
 		for (const edge of edges) {
-			const a = nodes.find(n => n.id === edge.source);
-			const b = nodes.find(n => n.id === edge.target);
-			if (!a || !b) continue;
+			const a = nodes[edge.sourceIdx];
+			const b = nodes[edge.targetIdx];
 			ctx.beginPath();
 			ctx.moveTo(a.x, a.y);
 			ctx.lineTo(b.x, b.y);
@@ -248,11 +317,27 @@
 		const activePath = $activeNotePath || '';
 
 		// Draw nodes
-		for (const node of nodes) {
+		const pulse = 0.5 + 0.5 * Math.sin(glowPhase);
+
+		for (let i = 0; i < nodes.length; i++) {
+			const node = nodes[i];
 			const isActive = node.path === activePath;
 			const isHovered = node === hoveredNode;
-			const hasLinks = node.links.length > 0 || edges.some(e => e.source === node.id || e.target === node.id);
-			const radius = isActive ? 7 : hasLinks ? 5 : 3.5;
+			const hasLinks = connectedSet.has(i);
+			const baseRadius = isActive ? 9 : hasLinks ? 5 : 3.5;
+			const radius = isActive ? baseRadius + pulse * 2 : baseRadius;
+
+			// Active node glow
+			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');
+				glow.addColorStop(1, accent + '00');
+				ctx.beginPath();
+				ctx.arc(node.x, node.y, glowRadius, 0, Math.PI * 2);
+				ctx.fillStyle = glow;
+				ctx.fill();
+			}
 
 			// Node circle
 			ctx.beginPath();
@@ -268,12 +353,23 @@
 			}
 			ctx.fill();
 
+			// Active node ring
+			if (isActive) {
+				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
 			if (isActive || isHovered || hasLinks) {
-				ctx.font = `${isActive || isHovered ? '12' : '10'}px -apple-system, BlinkMacSystemFont, sans-serif`;
+				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 - 5);
+				ctx.fillText(node.title, node.x, node.y - radius - 6);
 			}
 		}
 
@@ -377,6 +473,7 @@
 
 	onDestroy(() => {
 		if (animFrame) cancelAnimationFrame(animFrame);
+		if (glowFrame) cancelAnimationFrame(glowFrame);
 	});
 </script>
 

src/lib/components/InfoPanel.svelte

@@ -2,10 +2,14 @@
 	import { showInfo, appConfig } from '$lib/stores/app';
 	import { getVaultStats } from '$lib/api';
 	import { openUrl } from '@tauri-apps/plugin-opener';
+	import { getVersion } from '@tauri-apps/api/app';
 	import type { VaultStats } from '$lib/types';
 
 	let stats = $state<VaultStats | null>(null);
 	let activeTab = $state<'about' | 'shortcuts'>('shortcuts');
+	let appVersion = $state('...');
+
+	getVersion().then(v => appVersion = v).catch(() => appVersion = '0.0.0');
 
 	function close() {
 		$showInfo = false;
@@ -66,7 +70,7 @@
 						</svg>
 					</div>
 					<h3 class="app-name">HelixNotes</h3>
-					<p class="app-version">v1.0.0</p>
+					<p class="app-version">v{appVersion}</p>
 					<p class="app-description">A local-first markdown note-taking app.</p>
 
 					{#if stats}
@@ -110,13 +114,16 @@
 						<h4 class="shortcuts-group-title">Keyboard Shortcuts</h4>
 						<div class="shortcut-row"><span class="shortcut-desc">New note</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>N</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Quick open</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>P</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Search</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>F</kbd></span></div>
+						<div class="shortcut-row"><span class="shortcut-desc">Find in note</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>F</kbd></span></div>
+						<div class="shortcut-row"><span class="shortcut-desc">Search vault</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Save</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>S</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Bold</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>B</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Italic</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>I</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Underline</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>U</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Undo</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Z</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Redo</span><span class="shortcut-keys"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></span></div>
+						<div class="shortcut-row"><span class="shortcut-desc">Go back</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>←</kbd></span></div>
+						<div class="shortcut-row"><span class="shortcut-desc">Go forward</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>→</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Exit focus mode</span><span class="shortcut-keys"><kbd>Esc</kbd></span></div>
 
 						<h4 class="shortcuts-group-title">Editor Commands</h4>

src/lib/components/NoteList.svelte

@@ -26,6 +26,7 @@
 		getQuickAccess,
 		addQuickAccess,
 		removeQuickAccess,
+		reorderQuickAccess,
 		moveNote
 	} from '$lib/api';
 	import { formatRelativeTime } from '$lib/utils/time';
@@ -48,16 +49,52 @@
 	let lastClickedPath = $state<string | null>(null);
 	let batchMovePicker = $state(false);
 
+	// Quick Access drag-to-reorder
+	let qaDragFrom = $state<number | null>(null);
+	let qaDragOver = $state<number | null>(null);
+	let qaDragHalf = $state<'top' | 'bottom'>('bottom');
+
+	// Virtual scroll
+	let listContainer = $state<HTMLDivElement>(null!);
+	let scrollTop = $state(0);
+	let containerHeight = $state(600);
+	let itemHeight = $derived(compact ? 33 : 62);
+	const BUFFER = 10;
+
+	let totalHeight = $derived($sortedNotes.length * itemHeight);
+	let startIndex = $derived(Math.max(0, Math.floor(scrollTop / itemHeight) - BUFFER));
+	let endIndex = $derived(Math.min($sortedNotes.length, Math.ceil((scrollTop + containerHeight) / itemHeight) + BUFFER));
+	let visibleNotes = $derived($sortedNotes.slice(startIndex, endIndex));
+	let topPad = $derived(startIndex * itemHeight);
+	let bottomPad = $derived(Math.max(0, ($sortedNotes.length - endIndex) * itemHeight));
+
+	function onListScroll(e: Event) {
+		const el = e.currentTarget as HTMLDivElement;
+		scrollTop = el.scrollTop;
+	}
+
 	function clearSelection() {
 		selectedPaths = new Set();
 		lastClickedPath = null;
 		batchMovePicker = false;
 	}
 
-	// Clear selection when view/notebook changes
+	// Clear selection and reset scroll when view/notebook changes
 	$effect(() => {
 		const _ = [$viewMode, $activeNotebook, $activeTag];
 		clearSelection();
+		scrollTop = 0;
+		if (listContainer) listContainer.scrollTop = 0;
+	});
+
+	// Track container height via ResizeObserver
+	$effect(() => {
+		if (!listContainer) return;
+		const ro = new ResizeObserver((entries) => {
+			containerHeight = entries[0].contentRect.height;
+		});
+		ro.observe(listContainer);
+		return () => ro.disconnect();
 	});
 
 	interface FlatNotebook { name: string; path: string; depth: number; }
@@ -260,12 +297,33 @@
 			await removeQuickAccess(note.relative_path);
 			const qaNotes = await getQuickAccess();
 			$quickAccessPaths = qaNotes.map(n => n.relative_path);
-			if ($viewMode === 'quickaccess') await refresh();
+			if ($viewMode === 'quickaccess') await refresh(true);
 		} catch (e) {
 			console.error('Failed to remove from quick access:', e);
 		}
 	}
 
+	async function handleQaDrop(targetIndex: number) {
+		if (qaDragFrom === null) { qaDragFrom = null; qaDragOver = null; return; }
+		// Compute the actual insert position based on which half we're hovering
+		let insertAt = qaDragHalf === 'bottom' ? targetIndex + 1 : targetIndex;
+		if (qaDragFrom === insertAt || qaDragFrom + 1 === insertAt) {
+			qaDragFrom = null; qaDragOver = null; return;
+		}
+		const arr = [...$sortedNotes];
+		const [moved] = arr.splice(qaDragFrom, 1);
+		if (insertAt > qaDragFrom) insertAt--;
+		arr.splice(insertAt, 0, moved);
+		$notes = arr;
+		qaDragFrom = null;
+		qaDragOver = null;
+		try {
+			await reorderQuickAccess(arr.map(n => n.relative_path));
+		} catch (e) {
+			console.error('Failed to reorder quick access:', e);
+		}
+	}
+
 	async function handleMoveNote(note: NoteEntry, destPath: string) {
 		contextMenu = null;
 		movePickerNote = null;
@@ -479,7 +537,7 @@
 		</div>
 	{/if}
 
-	<div class="list-content">
+	<div class="list-content" bind:this={listContainer} onscroll={onListScroll}>
 		{#if $sortedNotes.length === 0}
 			<div class="empty-state">
 				{#if $viewMode === 'trash'}
@@ -491,7 +549,9 @@
 			</div>
 		{/if}
 
-		{#each $sortedNotes as note (note.path)}
+		<div style="height: {topPad}px"></div>
+		{#each visibleNotes as note, i (note.path)}
+			{@const noteIndex = startIndex + i}
 			{#if editingNote === note.path}
 				<div class="note-item active">
 					<input
@@ -512,6 +572,8 @@
 					class:selected={selectedPaths.has(note.path)}
 					class:pinned={note.meta.pinned}
 					class:compact={compact}
+					class:qa-drag-above={$viewMode === 'quickaccess' && qaDragOver === noteIndex && qaDragFrom !== null && qaDragHalf === 'top'}
+					class:qa-drag-below={$viewMode === 'quickaccess' && qaDragOver === noteIndex && qaDragFrom !== null && qaDragHalf === 'bottom'}
 					onclick={(e) => handleNoteClick(e, note)}
 					oncontextmenu={(e) => {
 						e.preventDefault();
@@ -528,6 +590,12 @@
 					}}
 					draggable="true"
 					ondragstart={(e) => {
+						if ($viewMode === 'quickaccess') {
+							qaDragFrom = noteIndex;
+							e.dataTransfer!.setData('text/plain', note.path);
+							e.dataTransfer!.effectAllowed = 'move';
+							return;
+						}
 						if (selectedPaths.size > 1 && selectedPaths.has(note.path)) {
 							e.dataTransfer!.setData('text/plain', [...selectedPaths].join('\n'));
 						} else {
@@ -535,6 +603,25 @@
 						}
 						e.dataTransfer!.effectAllowed = 'move';
 					}}
+					ondragover={(e) => {
+						if ($viewMode === 'quickaccess' && qaDragFrom !== null) {
+							e.preventDefault();
+							e.dataTransfer!.dropEffect = 'move';
+							const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+							qaDragHalf = e.clientY < rect.top + rect.height / 2 ? 'top' : 'bottom';
+							qaDragOver = noteIndex;
+						}
+					}}
+					ondragleave={() => {
+						if (qaDragOver === noteIndex) qaDragOver = null;
+					}}
+					ondrop={(e) => {
+						if ($viewMode === 'quickaccess' && qaDragFrom !== null) {
+							e.preventDefault();
+							handleQaDrop(noteIndex);
+						}
+					}}
+					ondragend={() => { qaDragFrom = null; qaDragOver = null; }}
 				>
 					{#if compact}
 						<div class="note-compact-row">
@@ -572,6 +659,7 @@
 				</button>
 			{/if}
 		{/each}
+		<div style="height: {bottomPad}px"></div>
 	</div>
 </div>
 
@@ -761,8 +849,8 @@
 		border-radius: 6px;
 		cursor: pointer;
 		text-align: left;
-		transition: background 0.1s;
 		margin-bottom: 1px;
+		contain: content;
 	}
 
 	.note-item:hover {
@@ -1133,4 +1221,12 @@
 		color: var(--accent);
 		font-size: 14px;
 	}
+
+	.note-item.qa-drag-above {
+		border-top: 2px solid var(--accent);
+	}
+
+	.note-item.qa-drag-below {
+		border-bottom: 2px solid var(--accent);
+	}
 </style>

src/lib/components/ResizeHandle.svelte

@@ -2,23 +2,35 @@
 	let { onResize }: { onResize: (delta: number) => void } = $props();
 	let active = $state(false);
 	let startX = 0;
+	let rafId = 0;
+	let pendingDelta = 0;
 
 	function onMouseDown(e: MouseEvent) {
 		e.preventDefault();
 		active = true;
 		startX = e.clientX;
+		document.body.classList.add('resizing');
 		window.addEventListener('mousemove', onMouseMove);
 		window.addEventListener('mouseup', onMouseUp);
 	}
 
 	function onMouseMove(e: MouseEvent) {
-		const delta = e.clientX - startX;
+		pendingDelta += e.clientX - startX;
 		startX = e.clientX;
-		onResize(delta);
+		if (!rafId) {
+			rafId = requestAnimationFrame(() => {
+				onResize(pendingDelta);
+				pendingDelta = 0;
+				rafId = 0;
+			});
+		}
 	}
 
 	function onMouseUp() {
 		active = false;
+		document.body.classList.remove('resizing');
+		if (rafId) { cancelAnimationFrame(rafId); rafId = 0; }
+		if (pendingDelta) { onResize(pendingDelta); pendingDelta = 0; }
 		window.removeEventListener('mousemove', onMouseMove);
 		window.removeEventListener('mouseup', onMouseUp);
 	}

src/lib/components/SettingsPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { showSettings, theme, appConfig } from '$lib/stores/app';
+	import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, installType, settingsTab } from '$lib/stores/app';
 	import { setTheme, setAccentColor, setFontSize, setFontFamily, setGeneralSettings, importObsidian, createBackup, listBackups, restoreBackup, deleteBackup, setBackupSettings, setAiSettings, testAiConnection } from '$lib/api';
 	import { open as openDialog } from '@tauri-apps/plugin-dialog';
 	import { listen } from '@tauri-apps/api/event';
@@ -24,6 +24,23 @@
 	}
 	loadAppVersion();
 
+	// Switch to requested tab if set externally (e.g. from update badge)
+	$effect(() => {
+		const tab = $settingsTab;
+		if (tab) {
+			activeTab = tab as Tab;
+			$settingsTab = null;
+		}
+	});
+
+	// Pre-populate from global store if update was already detected at startup
+	$effect(() => {
+		const global = $globalUpdateAvailable;
+		if (global && !updateAvailable) {
+			updateAvailable = { version: global.version, body: global.body };
+		}
+	});
+
 	async function handleCheckUpdate() {
 		updateChecking = true;
 		updateMessage = null;
@@ -33,6 +50,7 @@
 			if (update) {
 				updateObj = update;
 				updateAvailable = { version: update.version, body: update.body, date: update.date };
+				globalUpdateAvailable.set({ version: update.version, body: update.body });
 				updateMessage = { type: 'info', text: `Version ${update.version} is available!` };
 			} else {
 				updateMessage = { type: 'success', text: 'You are on the latest version.' };
@@ -283,6 +301,7 @@
 	let hideTitleInBody = $state($appConfig?.hide_title_in_body ?? false);
 	let defaultViewMode = $state($appConfig?.default_view_mode ?? false);
 	let showTrayIcon = $state($appConfig?.show_tray_icon ?? false);
+	let closeToTray = $state($appConfig?.close_to_tray ?? false);
 	let enableWikiLinks = $state($appConfig?.enable_wiki_links ?? true);
 
 	const pdfHeightPresets = [
@@ -334,9 +353,10 @@
 			$appConfig.hide_title_in_body = hideTitleInBody;
 			$appConfig.default_view_mode = defaultViewMode;
 			$appConfig.show_tray_icon = showTrayIcon;
+			$appConfig.close_to_tray = closeToTray;
 			$appConfig.enable_wiki_links = enableWikiLinks;
 		}
-		setGeneralSettings(compactNotes, timeFormat, gpuAcceleration, autostart, pdfPreview, pdfHeight, titleMode, hideTitleInBody, defaultViewMode, showTrayIcon, enableWikiLinks)
+		setGeneralSettings(compactNotes, timeFormat, gpuAcceleration, autostart, pdfPreview, pdfHeight, titleMode, hideTitleInBody, defaultViewMode, showTrayIcon, closeToTray, enableWikiLinks)
 			.catch((e) => console.error('Failed to save general settings:', e));
 	}
 
@@ -560,10 +580,21 @@
 										<span class="setting-name">Show in system tray</span>
 										<span class="setting-desc">Show an icon in the notification area (requires restart)</span>
 									</span>
-									<button class="toggle-switch" class:on={showTrayIcon} onclick={() => { showTrayIcon = !showTrayIcon; saveGeneralSettings(); }}>
+									<button class="toggle-switch" class:on={showTrayIcon} onclick={() => { showTrayIcon = !showTrayIcon; if (!showTrayIcon) closeToTray = false; saveGeneralSettings(); }}>
 										<span class="toggle-knob"></span>
 									</button>
 								</label>
+								{#if showTrayIcon}
+								<label class="setting-toggle">
+									<span class="setting-label">
+										<span class="setting-name">Close to tray</span>
+										<span class="setting-desc">Minimize to tray instead of quitting when closing the window (requires restart)</span>
+									</span>
+									<button class="toggle-switch" class:on={closeToTray} onclick={() => { closeToTray = !closeToTray; saveGeneralSettings(); }}>
+										<span class="toggle-knob"></span>
+									</button>
+								</label>
+								{/if}
 							</div>
 						</div>
 					{:else if activeTab === 'editor'}
@@ -1021,6 +1052,7 @@
 											<div class="update-notes">{updateAvailable.body}</div>
 										{/if}
 									</div>
+									{#if $installType === 'appimage' || $installType === 'windows'}
 									<button class="update-install-btn" onclick={handleDownloadAndInstall} disabled={updateDownloading}>
 										{#if updateDownloading}
 											<svg class="spinner-icon" width="16" height="16" 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" /></svg>
@@ -1037,6 +1069,19 @@
 											<div class="update-progress-fill" style="width: {updateProgress}%"></div>
 										</div>
 									{/if}
+								{:else if $installType === 'deb'}
+									<div class="update-apt-info">
+										<p>Update via your package manager:</p>
+										<code>sudo apt update && sudo apt upgrade helix-notes</code>
+									</div>
+								{:else}
+									<a class="update-install-btn" href="https://codeberg.org/ArkHost/HelixNotes/releases" target="_blank" rel="noopener">
+										<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+											<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
+										</svg>
+										Download from Codeberg
+									</a>
+								{/if}
 								</div>
 							{/if}
 
@@ -1905,6 +1950,23 @@
 		cursor: not-allowed;
 	}
 
+	.update-apt-info {
+		margin-top: 8px;
+	}
+	.update-apt-info p {
+		margin: 0 0 6px 0;
+		font-size: 13px;
+		color: var(--text-secondary);
+	}
+	.update-apt-info code {
+		display: block;
+		padding: 8px 12px;
+		background: var(--bg-secondary);
+		border-radius: 6px;
+		font-size: 12px;
+		user-select: all;
+	}
+
 	.update-progress-bar {
 		margin-top: 10px;
 		height: 6px;

src/lib/components/TitleBar.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { getCurrentWindow } from '@tauri-apps/api/window';
-	import { vaultReady, focusMode } from '$lib/stores/app';
+	import { vaultReady, focusMode, updateAvailable, showSettings, settingsTab } from '$lib/stores/app';
 
 	let { onNewNote = () => {} }: {
 		onNewNote?: () => void;
 	} = $props();
 
 	const appWindow = getCurrentWindow();
+	const isMac = navigator.platform.startsWith('Mac');
 	let maximized = $state(false);
 
 	async function checkMaximized() {
@@ -21,11 +22,19 @@
 
 	let lastMouseDown = 0;
 
+	const RESIZE_EDGE = 6;
+
 	function handleMouseDown(e: MouseEvent) {
 		if (e.button !== 0) return;
 		const target = e.target as HTMLElement;
 		if (target.closest('.titlebar-controls') || target.closest('.titlebar-actions')) return;
 
+		// Don't start dragging near window edges — let Tauri handle resize
+		if (!maximized) {
+			const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+			if (e.clientY - rect.top < RESIZE_EDGE || e.clientX - rect.left < RESIZE_EDGE) return;
+		}
+
 		const now = Date.now();
 		if (now - lastMouseDown < 300) {
 			// Double-click detected — maximize/restore
@@ -51,7 +60,7 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="titlebar" onmousedown={handleMouseDown}>
+<div class="titlebar" class:macos={isMac} onmousedown={handleMouseDown}>
 	<div class="titlebar-brand">
 		<svg width="18" height="18" viewBox="0 0 48 48" fill="none">
 			<rect width="48" height="48" rx="12" fill="var(--accent)" />
@@ -63,6 +72,12 @@
 			<line x1="29" y1="18" x2="19" y2="30" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.7" />
 		</svg>
 		<span class="titlebar-title">HelixNotes</span>
+		{#if $updateAvailable}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<button class="update-badge" onmousedown={(e) => e.stopPropagation()} onclick={() => { $settingsTab = 'updates'; $showSettings = true; }}>
+				v{$updateAvailable.version} available
+			</button>
+		{/if}
 	</div>
 	<div class="titlebar-actions">
 		<button class="switch-vault-btn" onclick={() => ($vaultReady = false)} title="Switch Vault">
@@ -82,6 +97,7 @@
 			New Note
 		</button>
 	</div>
+	{#if !isMac}
 	<div class="titlebar-controls">
 		<button class="titlebar-btn" onclick={minimize} title="Minimize">
 			<svg width="10" height="10" viewBox="0 0 10 10">
@@ -107,6 +123,7 @@
 			</svg>
 		</button>
 	</div>
+	{/if}
 </div>
 
 <style>
@@ -136,6 +153,25 @@
 		color: var(--text-tertiary);
 	}
 
+	.update-badge {
+		font-size: 10px;
+		font-weight: 600;
+		color: var(--accent);
+		background: color-mix(in srgb, var(--accent) 12%, transparent);
+		border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
+		border-radius: 10px;
+		padding: 1px 8px;
+		cursor: pointer;
+		pointer-events: auto;
+		-webkit-app-region: no-drag;
+		transition: background 0.15s, border-color 0.15s;
+	}
+
+	.update-badge:hover {
+		background: color-mix(in srgb, var(--accent) 20%, transparent);
+		border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+	}
+
 	.titlebar-actions {
 		display: flex;
 		align-items: center;
@@ -219,4 +255,9 @@
 		background: #e81123;
 		color: white;
 	}
+
+	/* macOS: add left padding for native traffic light buttons */
+	.titlebar.macos .titlebar-brand {
+		padding-left: 78px;
+	}
 </style>

src/lib/stores/app.ts

@@ -23,6 +23,7 @@ export const searchQuery = writable("");
 export const showCommandPalette = writable(false);
 export const showSearch = writable(false);
 export const showSettings = writable(false);
+export const settingsTab = writable<string | null>(null);
 export const showInfo = writable(false);
 export const notebookIcons = writable<Record<string, string>>({});
 export const quickAccessPaths = writable<string[]>([]);
@@ -45,31 +46,56 @@ export const focusMode = writable(false);
 // Theme
 export const theme = writable<string>("system");
 
-// Derived
-export const sortedNotes = derived([notes, sortMode], ([$notes, $sortMode]) => {
-  const pinned = $notes.filter((n) => n.meta.pinned);
-  const unpinned = $notes.filter((n) => !n.meta.pinned);
+// Update state
+export const updateAvailable = writable<{
+  version: string;
+  body?: string;
+} | null>(null);
+export const installType = writable<string>("native");
 
-  const sortFn = (a: NoteEntry, b: NoteEntry) => {
-    switch ($sortMode) {
-      case "title":
-        return a.meta.title.localeCompare(b.meta.title);
-      case "created":
-        return (
-          new Date(b.meta.created).getTime() -
-          new Date(a.meta.created).getTime()
-        );
-      case "modified":
-      default:
-        return (
-          new Date(b.meta.modified).getTime() -
-          new Date(a.meta.modified).getTime()
-        );
+export async function checkForUpdate() {
+  try {
+    const { check } = await import("@tauri-apps/plugin-updater");
+    const update = await check();
+    if (update) {
+      updateAvailable.set({ version: update.version, body: update.body });
     }
-  };
+  } catch {
+    // Silent fail — don't disrupt app startup
+  }
+}
 
-  return [...pinned.sort(sortFn), ...unpinned.sort(sortFn)];
-});
+// Derived
+export const sortedNotes = derived(
+  [notes, sortMode, viewMode],
+  ([$notes, $sortMode, $viewMode]) => {
+    // Quick Access preserves stored order
+    if ($viewMode === "quickaccess") return $notes;
+
+    const pinned = $notes.filter((n) => n.meta.pinned);
+    const unpinned = $notes.filter((n) => !n.meta.pinned);
+
+    const sortFn = (a: NoteEntry, b: NoteEntry) => {
+      switch ($sortMode) {
+        case "title":
+          return a.meta.title.localeCompare(b.meta.title);
+        case "created":
+          return (
+            new Date(b.meta.created).getTime() -
+            new Date(a.meta.created).getTime()
+          );
+        case "modified":
+        default:
+          return (
+            new Date(b.meta.modified).getTime() -
+            new Date(a.meta.modified).getTime()
+          );
+      }
+    };
+
+    return [...pinned.sort(sortFn), ...unpinned.sort(sortFn)];
+  },
+);
 
 export const vaultState = derived(
   [

src/routes/+layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import '../app.css';
-	import { theme, appConfig, activeNotePath } from '$lib/stores/app';
+	import { theme, appConfig, activeNotePath, installType, checkForUpdate } from '$lib/stores/app';
 	import { openUrl } from '@tauri-apps/plugin-opener';
-	import { openFile } from '$lib/api';
+	import { openFile, getInstallType } from '$lib/api';
 	import { get } from 'svelte/store';
 
 	let { children } = $props();
@@ -31,6 +31,12 @@
 		return resolved.join('/');
 	}
 
+	// Detect install type and check for updates on startup
+	onMount(() => {
+		getInstallType().then(t => installType.set(t)).catch(() => {});
+		checkForUpdate();
+	});
+
 	// Intercept all link clicks in capture phase to prevent webview navigation
 	onMount(() => {
 		function handleLinkClick(e: MouseEvent) {