v1.2.1 - Internal note links, mobile improvements, window state persistence

src/lib/components/AppLayout.svelte

@@ -192,34 +192,49 @@
 	}
 
 	// Android back gesture / hardware back button support
-	let mobileNavFromPopstate = false;
+	// We maintain a simple counter of how many views deep we are.
+	// sidebar=0, notelist=1, editor=2. Each forward nav pushes, back pops.
+	let historyDepth = 0;
+	let navFromPopstate = false;
 
 	if (isMobile) {
-		// Seed initial history state
-		history.replaceState({ mobileView: 'sidebar' }, '');
+		history.replaceState({ mobileView: 'sidebar', depth: 0 }, '');
 
-		// When mobileView changes forward, push browser history so Android back gesture works
 		$effect(() => {
 			const view = $mobileView;
-			if (mobileNavFromPopstate) {
-				mobileNavFromPopstate = false;
+			if (navFromPopstate) {
+				navFromPopstate = false;
 				return;
 			}
-			// Replace state to track current view
-			history.pushState({ mobileView: view }, '');
+			const targetDepth = view === 'sidebar' ? 0 : view === 'notelist' ? 1 : 2;
+			if (targetDepth > historyDepth) {
+				// Forward navigation — push entries for each level skipped
+				for (let d = historyDepth + 1; d <= targetDepth; d++) {
+					const v = d === 1 ? 'notelist' : 'editor';
+					history.pushState({ mobileView: v, depth: d }, '');
+				}
+				historyDepth = targetDepth;
+			} else if (targetDepth < historyDepth) {
+				// Programmatic back (e.g. mobileBack button) — go back in history
+				const steps = historyDepth - targetDepth;
+				historyDepth = targetDepth;
+				navFromPopstate = true; // suppress the popstate that history.go triggers
+				history.go(-steps);
+			}
 		});
 
 		window.addEventListener('popstate', (e) => {
-			const currentView = $mobileView;
-			if (currentView === 'sidebar') {
-				// Already at root — let Android handle it (exit app)
+			if (navFromPopstate) {
+				navFromPopstate = false;
 				return;
 			}
-			mobileNavFromPopstate = true;
-			if (currentView === 'editor') $mobileView = 'notelist';
-			else if (currentView === 'notelist') $mobileView = 'sidebar';
-			// Push state again so next back gesture also works
-			history.pushState({ mobileView: $mobileView }, '');
+			const state = e.state;
+			const targetDepth = state?.depth ?? 0;
+			historyDepth = targetDepth;
+			navFromPopstate = true;
+			if (targetDepth === 0) $mobileView = 'sidebar';
+			else if (targetDepth === 1) $mobileView = 'notelist';
+			else $mobileView = 'editor';
 		});
 	}
 
@@ -525,12 +540,7 @@
 							<line x1="21" y1="21" x2="16.65" y2="16.65" />
 						</svg>
 					</button>
-					<button class="mobile-header-btn" onclick={createAndFocusNote} title="New Note">
-						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
-							<path d="M12 5v14M5 12h14" />
-						</svg>
-					</button>
-					<button class="mobile-header-btn" onclick={handleDailyNote} title="Daily Note">
+						<button class="mobile-header-btn" onclick={handleDailyNote} title="Daily Note">
 						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 							<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
 							<line x1="16" y1="2" x2="16" y2="6" />
@@ -555,6 +565,11 @@
 			</div>
 			<div class="mobile-panel" class:active={$mobileView === 'notelist'}>
 				<NoteList bind:this={noteList} onNoteSelected={handleNoteSelected} onBeforeNoteSwitch={() => editor?.flushSave()} onNoteMoved={() => sidebar?.refresh()} />
+				<button class="mobile-fab" onclick={createAndFocusNote} title="New Note">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+						<path d="M12 5v14M5 12h14" />
+					</svg>
+				</button>
 			</div>
 			<div class="mobile-panel" class:active={$mobileView === 'editor'}>
 				<Editor bind:this={editor} />
@@ -831,4 +846,27 @@
 		pointer-events: auto;
 	}
 
+	.mobile-fab {
+		position: absolute;
+		bottom: 24px;
+		right: 20px;
+		width: 56px;
+		height: 56px;
+		border-radius: 16px;
+		background: var(--accent);
+		color: white;
+		border: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+		cursor: pointer;
+		z-index: 10;
+	}
+
+	.mobile-fab:active {
+		transform: scale(0.93);
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	}
+
 </style>

src/lib/components/Editor.svelte

@@ -199,6 +199,13 @@
 	let linkModalInput = $state<HTMLInputElement>(null!);
 	let linkSelectionFrom = 0;
 	let linkSelectionTo = 0;
+	let linkSuggestIndex = $state(0);
+	let linkSuggestTitles = $state<NoteTitleEntry[]>([]);
+	let linkSuggestFiltered = $derived.by(() => {
+		const q = linkModalUrl.trim().toLowerCase();
+		if (!q || q.startsWith('http://') || q.startsWith('https://') || q.startsWith('mailto:')) return [];
+		return linkSuggestTitles.filter(e => e.title.toLowerCase().includes(q)).slice(0, 8);
+	});
 	let textContextMenu = $state<{ x: number; y: number } | null>(null);
 	let tableContextMenu = $state<{ x: number; y: number } | null>(null);
 	let tablePickerOpen = $state(false);
@@ -1823,7 +1830,12 @@
 				.replace(/<p[^>]*>(.*?)<\/p>/gi, '> $1\n')
 				.replace(/<br\s*\/?>/gi, '\n> ');
 		});
-		md = md.replace(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/gi, '[$2]($1)');
+		md = md.replace(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/gi, (_m, href, text) => {
+			// Decode percent-encoded href back to readable form for markdown source
+			// Spaces are re-encoded by markdownToHtml preprocessing before markdown-it parsing
+			const decoded = decodeURIComponent(href);
+			return `[${text}](${decoded})`;
+		});
 		md = md.replace(/<img[^>]*>/gi, (match) => {
 			const srcMatch = match.match(/src="([^"]*)"/);
 			const altMatch = match.match(/alt="([^"]*)"/);
@@ -1920,6 +1932,12 @@
 			return `![${alt}](${url.replace(/ /g, '%20')})`;
 		});
 
+		// Pre-process: percent-encode spaces in link URLs so markdown-it parses them correctly
+		// Matches [text](url with spaces) but not ![image](url) (already handled above)
+		src = src.replace(/(?<!!)\[([^\]]*)\]\(([^)]*\s[^)]*)\)/g, (_match, text, url) => {
+			return `[${text}](${url.replace(/ /g, '%20')})`;
+		});
+
 		// Pre-process: transform PDF embed divs — iframes on desktop, clickable links on mobile
 		src = src.replace(/<div[^>]*data-pdf-src="([^"]*)"[^>]*data-pdf-name="([^"]*)"[^>]*>[^<]*<\/div>/gi, (_, pdfSrc, name) => {
 			const vaultRoot = $appConfig?.active_vault ?? '';
@@ -2232,8 +2250,11 @@
 		linkSelectionFrom = from;
 		linkSelectionTo = to;
 		const previousUrl = editor.getAttributes('link').href || '';
-		linkModalUrl = previousUrl;
+		linkModalUrl = decodeURIComponent(previousUrl);
+		linkSuggestIndex = 0;
 		linkModal = true;
+		// Load note titles for autocomplete
+		getAllNoteTitles().then(t => { linkSuggestTitles = t; }).catch(() => {});
 		tick().then(() => linkModalInput?.focus());
 	}
 
@@ -2243,15 +2264,37 @@
 		if (url === '') {
 			editor.chain().focus().setTextSelection({ from: linkSelectionFrom, to: linkSelectionTo }).extendMarkRange('link').unsetLink().run();
 		} else {
-			if (url && !/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url) && !url.startsWith('/') && !url.startsWith('#')) {
+			if (url && !/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url) && !url.startsWith('/') && !url.startsWith('#') && !url.endsWith('.md')) {
 				url = 'https://' + url;
 			}
-			editor.chain().focus().setTextSelection({ from: linkSelectionFrom, to: linkSelectionTo }).setMark('link', { href: url }).run();
+			// Store raw URL — encoding is handled during markdown serialization/parsing
+			const href = url.replace(/[()]/g, (c) => encodeURIComponent(c));
+			editor.chain().focus().setTextSelection({ from: linkSelectionFrom, to: linkSelectionTo }).setMark('link', { href }).run();
 		}
 		linkModal = false;
 		linkModalUrl = '';
 	}
 
+	function linkModalSelectNote(entry: NoteTitleEntry) {
+		// Build a relative .md path from the selected note and confirm immediately
+		const vaultRoot = $appConfig?.active_vault;
+		const currentNote = $activeNotePath;
+		if (vaultRoot && currentNote) {
+			const noteDir = currentNote.substring(0, currentNote.lastIndexOf('/'));
+			const targetRel = entry.path.startsWith(vaultRoot) ? entry.path.substring(vaultRoot.length + 1) : entry.path;
+			const currentRel = noteDir.startsWith(vaultRoot) ? noteDir.substring(vaultRoot.length + 1) : noteDir;
+			const targetParts = targetRel.split('/');
+			const currentParts = currentRel ? currentRel.split('/') : [];
+			let common = 0;
+			while (common < targetParts.length && common < currentParts.length && targetParts[common] === currentParts[common]) common++;
+			const ups = currentParts.length - common;
+			linkModalUrl = (ups > 0 ? '../'.repeat(ups) : './') + targetParts.slice(common).join('/');
+		} else {
+			linkModalUrl = entry.title + '.md';
+		}
+		linkModalConfirm();
+	}
+
 	function linkModalCancel() {
 		linkModal = false;
 		linkModalUrl = '';
@@ -2793,19 +2836,43 @@
 		linkContextMenu = null;
 	}
 
+	/** Resolve a link href to an absolute .md note path, or null if not a note link. */
+	function resolveNoteHref(href: string): string | null {
+		const decoded = decodeURIComponent(href);
+		if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(decoded)) return null;
+		let absPath = decoded;
+		if (!decoded.startsWith('/')) {
+			const notePath = $activeNotePath;
+			if (notePath) {
+				const noteDir = notePath.substring(0, notePath.lastIndexOf('/'));
+				absPath = normalizePath(`${noteDir}/${decoded}`);
+			} else {
+				const vaultRoot = $appConfig?.active_vault;
+				if (vaultRoot) absPath = normalizePath(`${vaultRoot}/${decoded}`);
+			}
+		}
+		return absPath.endsWith('.md') ? absPath : null;
+	}
+
 	function linkMenuOpen() {
 		if (!linkContextMenu) return;
 		const href = linkContextMenu.href;
 		closeLinkContextMenu();
+		// Internal .md note link — navigate within the app
+		const notePath = resolveNoteHref(href);
+		if (notePath) {
+			navigateToWikiLink(notePath, '');
+			return;
+		}
 		if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('mailto:')) {
 			openUrl(href).catch(console.error);
 		} else {
 			const decoded = decodeURIComponent(href);
 			let absPath = decoded;
 			if (!decoded.startsWith('/')) {
-				const notePath = $activeNotePath;
-				if (notePath) {
-					const noteDir = notePath.substring(0, notePath.lastIndexOf('/'));
+				const np = $activeNotePath;
+				if (np) {
+					const noteDir = np.substring(0, np.lastIndexOf('/'));
 					absPath = normalizePath(`${noteDir}/${decoded}`);
 				} else {
 					const vaultRoot = $appConfig?.active_vault;
@@ -2832,7 +2899,7 @@
 		if (pos >= 0) {
 			editor.chain().focus().setTextSelection(pos).extendMarkRange('link').run();
 		}
-		linkModalUrl = href;
+		linkModalUrl = decodeURIComponent(href);
 		linkModal = true;
 		tick().then(() => linkModalInput?.focus());
 	}
@@ -4574,12 +4641,34 @@
 				class="link-modal-input"
 				bind:this={linkModalInput}
 				bind:value={linkModalUrl}
+				oninput={() => { linkSuggestIndex = 0; }}
 				onkeydown={(e) => {
-					if (e.key === 'Enter') { e.preventDefault(); linkModalConfirm(); }
+					if (linkSuggestFiltered.length > 0) {
+						if (e.key === 'ArrowDown') { e.preventDefault(); linkSuggestIndex = Math.min(linkSuggestIndex + 1, linkSuggestFiltered.length - 1); return; }
+						if (e.key === 'ArrowUp') { e.preventDefault(); linkSuggestIndex = Math.max(linkSuggestIndex - 1, 0); return; }
+						if (e.key === 'Enter') { e.preventDefault(); linkModalSelectNote(linkSuggestFiltered[linkSuggestIndex]); return; }
+					} else {
+						if (e.key === 'Enter') { e.preventDefault(); linkModalConfirm(); }
+					}
 					if (e.key === 'Escape') { e.preventDefault(); linkModalCancel(); }
 				}}
-				placeholder="https://example.com"
+				placeholder="URL or note name"
 			/>
+			{#if linkSuggestFiltered.length > 0}
+				<div class="link-suggest-list">
+					{#each linkSuggestFiltered as entry, i}
+						<button
+							class="link-suggest-item"
+							class:selected={i === linkSuggestIndex}
+							onmouseenter={() => linkSuggestIndex = i}
+							onmousedown={(e) => { e.preventDefault(); linkModalSelectNote(entry); }}
+						>
+							<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
+							<span class="link-suggest-title">{entry.title}</span>
+						</button>
+					{/each}
+				</div>
+			{/if}
 			<div class="link-modal-actions">
 				<button class="link-modal-btn cancel" onclick={linkModalCancel}>Cancel</button>
 				<button class="link-modal-btn confirm" onclick={linkModalConfirm}>
@@ -5617,10 +5706,27 @@
 		text-decoration-color: color-mix(in srgb, var(--text-accent) 40%, transparent);
 	}
 
+	:global(.tiptap-wrapper .tiptap a::after) {
+		content: '↗';
+		display: inline;
+		font-size: 0.65em;
+		margin-left: 2px;
+		opacity: 0.5;
+		vertical-align: 15%;
+	}
+
+	:global(.tiptap-wrapper .tiptap a[href$=".md"]::after) {
+		content: '⤴';
+	}
+
 	:global(.tiptap-wrapper .tiptap a:hover) {
 		text-decoration-color: var(--text-accent);
 	}
 
+	:global(.tiptap-wrapper .tiptap a:hover::after) {
+		opacity: 0.8;
+	}
+
 	:global(.tiptap-wrapper .tiptap img) {
 		display: block;
 		max-width: 100%;
@@ -5978,6 +6084,52 @@
 		opacity: 0.9;
 	}
 
+	.link-suggest-list {
+		max-height: 240px;
+		overflow-y: auto;
+		margin-top: 8px;
+		border: 1px solid var(--border-light);
+		border-radius: 8px;
+		padding: 4px;
+	}
+
+	.link-suggest-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		padding: 7px 10px;
+		border: none;
+		border-radius: 6px;
+		background: none;
+		color: var(--text-primary);
+		font-size: 13px;
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.link-suggest-item:hover,
+	.link-suggest-item.selected {
+		background: var(--accent-light);
+		color: var(--accent);
+	}
+
+	.link-suggest-item svg {
+		flex-shrink: 0;
+		color: var(--text-tertiary);
+	}
+
+	.link-suggest-item:hover svg,
+	.link-suggest-item.selected svg {
+		color: var(--accent);
+	}
+
+	.link-suggest-title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
 	/* Text context menu */
 	.text-ctx-overlay {
 		position: fixed;

src/lib/components/NoteList.svelte

@@ -80,6 +80,52 @@
 	let batchMovePicker = $state(false);
 	let batchTagEdit = $state(false);
 
+	// Mobile long-press selection
+	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+	let longPressTriggered = false;
+	let touchStartPos = { x: 0, y: 0 };
+	const LONG_PRESS_MS = 500;
+	const LONG_PRESS_MOVE_THRESHOLD = 10;
+
+	function handleTouchStart(e: TouchEvent, note: NoteEntry) {
+		longPressTriggered = false;
+		const touch = e.touches[0];
+		touchStartPos = { x: touch.clientX, y: touch.clientY };
+		longPressTimer = setTimeout(() => {
+			longPressTriggered = true;
+			// Vibrate for haptic feedback if available
+			if (navigator.vibrate) navigator.vibrate(30);
+			const next = new Set(selectedPaths);
+			if (next.size === 0 && $activeNotePath && $activeNotePath !== note.path) {
+				next.add($activeNotePath);
+			}
+			if (next.has(note.path)) {
+				next.delete(note.path);
+			} else {
+				next.add(note.path);
+			}
+			selectedPaths = next;
+		}, LONG_PRESS_MS);
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!longPressTimer) return;
+		const touch = e.touches[0];
+		const dx = touch.clientX - touchStartPos.x;
+		const dy = touch.clientY - touchStartPos.y;
+		if (Math.abs(dx) > LONG_PRESS_MOVE_THRESHOLD || Math.abs(dy) > LONG_PRESS_MOVE_THRESHOLD) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+	}
+
+	function handleTouchEnd() {
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+	}
+
 	// Quick Access drag-to-reorder
 	let qaDragFrom = $state<number | null>(null);
 	let qaDragOver = $state<number | null>(null);
@@ -504,6 +550,23 @@
 	}
 
 	function handleNoteClick(e: MouseEvent, note: NoteEntry) {
+		// Mobile: if long-press just fired, ignore the click
+		if (isMobile && longPressTriggered) {
+			longPressTriggered = false;
+			e.preventDefault();
+			return;
+		}
+		// Mobile: if in selection mode, tap toggles selection
+		if (isMobile && selectedPaths.size > 0) {
+			const next = new Set(selectedPaths);
+			if (next.has(note.path)) {
+				next.delete(note.path);
+			} else {
+				next.add(note.path);
+			}
+			selectedPaths = next;
+			return;
+		}
 		if (e.ctrlKey || e.metaKey) {
 			// Toggle individual selection
 			const next = new Set(selectedPaths);
@@ -599,7 +662,11 @@
 	function openSortMenu(e: MouseEvent) {
 		e.stopPropagation();
 		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-		sortMenu = { x: rect.left, y: rect.bottom + 4 };
+		const menuWidth = isMobile ? 220 : 180;
+		let x = rect.left;
+		if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 8;
+		if (x < 4) x = 4;
+		sortMenu = { x, y: rect.bottom + 4 };
 	}
 
 	function setSortMode(mode: SortMode) {
@@ -632,8 +699,8 @@
 				</svg>
 			</button>
 			{#if $viewMode !== 'trash'}
-				<button class="icon-btn" onclick={handleCreateNote} title={`New note (${modKey}+N)`}>
-					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<button class={isMobile ? 'mobile-create-btn' : 'icon-btn'} onclick={handleCreateNote} title={`New note (${modKey}+N)`}>
+					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width={isMobile ? '3' : '2'} 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>
 				</button>
@@ -726,6 +793,10 @@
 					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)}
+					ontouchstart={(e) => { if (isMobile) handleTouchStart(e, note); }}
+					ontouchmove={(e) => { if (isMobile) handleTouchMove(e); }}
+					ontouchend={() => { if (isMobile) handleTouchEnd(); }}
+					ontouchcancel={() => { if (isMobile) handleTouchEnd(); }}
 					oncontextmenu={(e) => {
 						e.preventDefault();
 						const pos = clampMenu(e.clientX, e.clientY);
@@ -775,6 +846,13 @@
 					}}
 					ondragend={() => { qaDragFrom = null; qaDragOver = null; }}
 				>
+					{#if isMobile && selectedPaths.size > 0}
+						<div class="mobile-select-check" class:checked={selectedPaths.has(note.path)}>
+							{#if selectedPaths.has(note.path)}
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+							{/if}
+						</div>
+					{/if}
 					{#if compact}
 						<div class="note-compact-row" title={getNotebookPath(note) ? `${getNotebookPath(note)}/${note.meta.title}` : note.meta.title}>
 							<span class="note-title">
@@ -1066,6 +1144,7 @@
 
 	.list-actions {
 		display: flex;
+		align-items: center;
 		gap: 2px;
 	}
 
@@ -1566,6 +1645,10 @@
 		padding: 12px 16px;
 	}
 
+	.note-list.mobile .list-actions {
+		gap: 10px;
+	}
+
 	.note-list.mobile .list-title {
 		font-size: 16px;
 	}
@@ -1684,4 +1767,43 @@
 		font-size: 15px;
 		min-height: 44px;
 	}
+
+	/* Mobile selection checkboxes */
+	.mobile-select-check {
+		width: 22px;
+		height: 22px;
+		border-radius: 50%;
+		border: 2px solid var(--text-tertiary);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		margin-bottom: 4px;
+		transition: all 0.15s ease;
+	}
+
+	.mobile-select-check.checked {
+		background: var(--accent);
+		border-color: var(--accent);
+		color: white;
+	}
+
+	/* Mobile create note button (round, accent-colored) */
+	.mobile-create-btn {
+		background: var(--accent);
+		color: white;
+		border: none;
+		width: 32px;
+		height: 32px;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+
+	.mobile-create-btn:active {
+		opacity: 0.8;
+	}
 </style>