feat(notes): added notes graph

frontend/bun.lock

@@ -5,8 +5,8 @@
       "name": "quicknotes",
       "dependencies": {
         "@types/marked": "^6.0.0",
-        "bulma": "^1.0.3",
         "marked": "^15.0.7",
+        "vis-network": "^9.1.9",
       },
       "devDependencies": {
         "@eslint/compat": "^1.2.5",
@@ -33,6 +33,8 @@
   "packages": {
     "@ampproject/remapping": ["@ampproject/remapping@2.3.0", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw=="],
 
+    "@egjs/hammerjs": ["@egjs/hammerjs@2.0.17", "", { "dependencies": { "@types/hammerjs": "^2.0.36" } }, "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A=="],
+
     "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.24.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA=="],
 
     "@esbuild/android-arm": ["@esbuild/android-arm@0.24.2", "", { "os": "android", "cpu": "arm" }, "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q=="],
@@ -179,6 +181,8 @@
 
     "@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
 
+    "@types/hammerjs": ["@types/hammerjs@2.0.46", "", {}, "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw=="],
+
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
 
     "@types/marked": ["@types/marked@6.0.0", "", { "dependencies": { "marked": "*" } }, "sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA=="],
@@ -223,8 +227,6 @@
 
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
 
-    "bulma": ["bulma@1.0.3", "", {}, "sha512-9eVXBrXwlU337XUXBjIIq7i88A+tRbJYAjXQjT/21lwam+5tpvKF0R7dCesre9N+HV9c6pzCNEPKrtgvBBes2g=="],
-
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
@@ -237,6 +239,8 @@
 
     "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
 
+    "component-emitter": ["component-emitter@1.3.1", "", {}, "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ=="],
+
     "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
 
     "cookie": ["cookie@0.6.0", "", {}, "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="],
@@ -341,6 +345,8 @@
 
     "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
 
+    "keycharm": ["keycharm@0.4.0", "", {}, "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ=="],
+
     "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
 
     "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
@@ -469,6 +475,14 @@
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
+    "uuid": ["uuid@9.0.1", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="],
+
+    "vis-data": ["vis-data@7.1.9", "", { "peerDependencies": { "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", "vis-util": "^5.0.1" } }, "sha512-COQsxlVrmcRIbZMMTYwD+C2bxYCFDNQ2EHESklPiInbD/Pk3JZ6qNL84Bp9wWjYjAzXfSlsNaFtRk+hO9yBPWA=="],
+
+    "vis-network": ["vis-network@9.1.9", "", { "peerDependencies": { "@egjs/hammerjs": "^2.0.0", "component-emitter": "^1.3.0", "keycharm": "^0.2.0 || ^0.3.0 || ^0.4.0", "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", "vis-data": "^6.3.0 || ^7.0.0", "vis-util": "^5.0.1" } }, "sha512-Ft+hLBVyiLstVYSb69Q1OIQeh3FeUxHJn0WdFcq+BFPqs+Vq1ibMi2sb//cxgq1CP7PH4yOXnHxEH/B2VzpZYA=="],
+
+    "vis-util": ["vis-util@5.0.7", "", { "peerDependencies": { "@egjs/hammerjs": "^2.0.0", "component-emitter": "^1.3.0 || ^2.0.0" } }, "sha512-E3L03G3+trvc/X4LXvBfih3YIHcKS2WrP0XTdZefr6W6Qi/2nNCqZfe4JFfJU6DcQLm6Gxqj2Pfl+02859oL5A=="],
+
     "vite": ["vite@6.1.0", "", { "dependencies": { "esbuild": "^0.24.2", "postcss": "^8.5.1", "rollup": "^4.30.1" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ=="],
 
     "vitefu": ["vitefu@1.0.5", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" }, "optionalPeers": ["vite"] }, "sha512-h4Vflt9gxODPFNGPwp4zAMZRpZR7eslzwH2c5hn5kNZ5rhnKyRJ50U+yGCdc2IRaBs8O4haIgLNGrV5CrpMsCA=="],

frontend/package.json

@@ -39,7 +39,7 @@
 	},
 	"dependencies": {
 		"@types/marked": "^6.0.0",
-		"bulma": "^1.0.3",
+		"marked": "^15.0.7",
-		"marked": "^15.0.7"
+		"vis-network": "^9.1.9"
 	}
 }

frontend/src/app.html

@@ -1,15 +1,21 @@
 <!doctype html>
 <html lang="en">
-
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+		/>
 		<link rel="stylesheet" href="/css/bulma.min.css" />
 		<!-- Font Awesome -->
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+		<link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
 			integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
-		crossorigin="anonymous" referrerpolicy="no-referrer" />
+			crossorigin="anonymous"
+			referrerpolicy="no-referrer"
+		/>
 
 		<!-- Dark mode theme using Bulma's CSS variables -->
 		<style>
@@ -75,5 +81,4 @@
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
-
 </html>

frontend/src/lib/index.ts

@@ -120,6 +120,31 @@ function createNotesStore() {
 				console.error('Failed to load notes:', error);
 				set([]);
 			}
+		},
+		importObsidianVault: async (file: File): Promise<{ imported: number }> => {
+			try {
+				const formData = new FormData();
+				formData.append('file', file);
+
+				const response = await fetch('/api/notes/import', {
+					method: 'POST',
+					body: formData
+				});
+
+				if (!response.ok) {
+					throw new Error(`Failed to import Obsidian vault: ${response.statusText}`);
+				}
+
+				const result = await response.json();
+
+				// Reload notes to get the newly imported ones
+				await notes.load();
+
+				return result;
+			} catch (error) {
+				console.error('Error importing Obsidian vault:', error);
+				throw error;
+			}
 		}
 	};
 }

frontend/src/routes/+page.svelte

@@ -3,14 +3,69 @@
 	import type { Note, Feed } from '$lib/types';
 	import { onMount } from 'svelte';
 	import Navigation from '$lib/components/Navigation.svelte';
+	import { notes } from '$lib';
 
-	let notes: Note[] = [];
+	let notesList: Note[] = [];
+	let isImporting = false;
+	let error: string | null = null;
+	let importCount = 0;
+	let obsidianFile: File | null = null;
+
+	// Subscribe to the notes store
+	const unsubscribe = notes.subscribe((value) => {
+		notesList = value;
+	});
+
+	// Clean up subscription when component is destroyed
+	onMount(() => {
+		return () => {
+			unsubscribe();
+		};
+	});
 
 	onMount(async () => {
-		const response = await fetch('/api/notes');
+		await loadNotes();
-		notes = await response.json();
 	});
 
+	async function loadNotes() {
+		error = null;
+		try {
+			await notes.load();
+			// The store subscription will automatically update notesList
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to load notes';
+		}
+	}
+
+	async function handleImportObsidian() {
+		if (!obsidianFile) {
+			error = 'Please select a zip file containing an Obsidian vault';
+			return;
+		}
+
+		isImporting = true;
+		error = null;
+		try {
+			const result = await notes.importObsidianVault(obsidianFile);
+			importCount = result.imported;
+			obsidianFile = null;
+
+			// Refresh the notes list
+			await loadNotes();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to import Obsidian vault';
+		} finally {
+			isImporting = false;
+		}
+	}
+
+	function handleFileChange(event: Event) {
+		const input = event.target as HTMLInputElement;
+		if (input.files && input.files.length > 0) {
+			obsidianFile = input.files[0];
+		}
+	}
+
 	function renderCard(item: Note | Feed) {
 		if (!isNote(item)) {
 			throw new Error('Invalid item type');
@@ -35,8 +90,8 @@
 					label: 'Delete',
 					isDangerous: true,
 					onClick: async () => {
-						await fetch(`/api/notes/${item.id}`, { method: 'DELETE' });
+						await notes.delete(item.id);
-						notes = notes.filter((n) => n.id !== item.id);
+						notesList = notesList.filter((n) => n.id !== item.id);
 					}
 				}
 			]
@@ -62,10 +117,72 @@
 	<section class="section">
 		<h1 class="title">My Notes</h1>
 
-		<div class="buttons">
+		{#if error}
+			<div class="notification is-danger">
+				<p>{error}</p>
+			</div>
+		{/if}
+
+		{#if importCount > 0}
+			<div class="notification is-success">
+				<p>Successfully imported {importCount} notes.</p>
+			</div>
+		{/if}
+
+		<div class="level">
+			<div class="level-left">
+				<div class="level-item">
 					<a href="/notes/new" class="button is-primary"> New Note </a>
 				</div>
+				<div class="level-item">
+					<div class="file has-name">
+						<label class="file-label">
+							<input
+								class="file-input"
+								type="file"
+								name="obsidian"
+								accept=".zip"
+								on:change={handleFileChange}
+							/>
+							<span class="file-cta">
+								<span class="file-icon">
+									<i class="fas fa-upload"></i>
+								</span>
+								<span class="file-label">Choose Obsidian vault zip...</span>
+							</span>
+							{#if obsidianFile}
+								<span class="file-name">{obsidianFile.name}</span>
+							{:else}
+								<span class="file-name">No file selected</span>
+							{/if}
+						</label>
+					</div>
+				</div>
+				<div class="level-item">
+					<button
+						class="button is-info"
+						on:click={handleImportObsidian}
+						disabled={!obsidianFile || isImporting}
+					>
+						<span class="icon">
+							<i class="fas fa-file-import" class:fa-spin={isImporting}></i>
+						</span>
+						<span>Import Notes</span>
+					</button>
+				</div>
+			</div>
+			<div class="level-right">
+				<div class="level-item">
+					<a href="/notes/graph" class="button is-link">
+						<span class="icon">
+							<i class="fas fa-project-diagram"></i>
+						</span>
+						<span>View Notes Graph</span>
+					</a>
+				</div>
+			</div>
+		</div>
 
-		<CardList items={notes} {renderCard} emptyMessage="No notes found." />
+		<CardList items={notesList} {renderCard} emptyMessage="No notes found." />
 	</section>
 </div>

frontend/src/routes/notes/graph/+page.svelte

@@ -0,0 +1,287 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { notes } from '$lib';
+	import Navigation from '$lib/components/Navigation.svelte';
+	import { Network } from 'vis-network';
+	import { DataSet } from 'vis-data';
+	import { browser } from '$app/environment';
+
+	let container;
+	let network = null;
+	let status = 'Waiting for initialization...';
+	let isDarkMode = false;
+	let isLoading = false;
+
+	onMount(() => {
+		// Check for dark mode
+		if (browser) {
+			isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+			// Also check if the app has a theme setting in localStorage
+			const storedTheme = localStorage.getItem('theme');
+			if (storedTheme) {
+				isDarkMode = storedTheme === 'dark';
+			}
+		}
+
+		// Set container background based on theme
+		updateContainerTheme();
+
+		// Create the graph after a short delay
+		setTimeout(() => {
+			createGraph();
+		}, 500);
+	});
+
+	// Update container theme
+	function updateContainerTheme() {
+		if (!container) return;
+
+		if (isDarkMode) {
+			container.style.backgroundColor = '#1a1a1a';
+			container.style.borderColor = '#444';
+		} else {
+			container.style.backgroundColor = '#f9f9f9';
+			container.style.borderColor = '#ddd';
+		}
+	}
+
+	// Create a graph from all notes
+	async function createGraph() {
+		if (!container) {
+			status = 'Container not available';
+			return;
+		}
+
+		isLoading = true;
+		status = 'Loading notes...';
+
+		try {
+			// Load notes
+			await notes.load();
+
+			// Get notes from store
+			let allNotes = [];
+			notes.subscribe((value) => {
+				allNotes = value;
+			})();
+
+			status = `Loaded ${allNotes.length} notes`;
+
+			if (allNotes.length === 0) {
+				status = 'No notes found';
+				isLoading = false;
+				return;
+			}
+
+			status = `Processing ${allNotes.length} notes`;
+
+			// Create nodes for all notes
+			const nodes = new DataSet();
+			allNotes.forEach((note) => {
+				nodes.add({
+					id: note.id,
+					label: note.title,
+					shape: 'dot',
+					// Size based on connections, but with a reasonable range
+					size: Math.min(
+						20,
+						5 + Math.sqrt((note.linksTo?.length || 0) + (note.linkedBy?.length || 0)) * 2
+					)
+				});
+			});
+
+			// Create edges for all connections
+			const edges = new DataSet();
+			let edgeCount = 0;
+
+			allNotes.forEach((note) => {
+				if (note.linksTo && Array.isArray(note.linksTo)) {
+					note.linksTo.forEach((link) => {
+						if (link && link.id) {
+							edges.add({
+								id: `e${edgeCount++}`,
+								from: note.id,
+								to: link.id,
+								width: 1,
+								color: isDarkMode ? '#888' : '#2B7CE9',
+								arrows: 'to'
+							});
+						}
+					});
+				}
+			});
+
+			status = `Created ${nodes.length} nodes and ${edgeCount} edges`;
+
+			// Apply theme to container
+			updateContainerTheme();
+
+			// Create network with optimized options
+			const data = { nodes, edges };
+			const options = {
+				nodes: {
+					font: {
+						color: isDarkMode ? '#fff' : '#000',
+						size: 12
+					},
+					color: {
+						background: isDarkMode ? '#4a9eff' : '#97C2FC',
+						border: isDarkMode ? '#2a6eb0' : '#2B7CE9'
+					}
+				},
+				edges: {
+					smooth: false, // Disable smooth edges for performance
+					arrows: {
+						to: { enabled: true, scaleFactor: 0.5 } // Smaller arrows
+					}
+				},
+				physics: {
+					// Optimized physics for initial layout
+					enabled: true,
+					solver: 'forceAtlas2Based',
+					forceAtlas2Based: {
+						gravitationalConstant: -50,
+						centralGravity: 0.01,
+						springLength: 100,
+						springConstant: 0.08
+					},
+					stabilization: {
+						enabled: true,
+						iterations: 200, // More iterations for better initial layout
+						updateInterval: 50
+					},
+					maxVelocity: 50,
+					minVelocity: 0.1
+				},
+				interaction: {
+					hover: true,
+					multiselect: false,
+					dragNodes: true,
+					zoomView: true
+				},
+				layout: {
+					improvedLayout: false
+				}
+			};
+
+			// Destroy existing network if any
+			if (network) {
+				network.destroy();
+				network = null;
+			}
+
+			// Create new network
+			network = new Network(container, data, options);
+
+			// Add double-click navigation
+			network.on('doubleClick', function (params) {
+				if (params.nodes.length > 0) {
+					const nodeId = params.nodes[0];
+					window.location.href = `/notes/${nodeId}`;
+				}
+			});
+
+			// Add hover tooltip
+			network.on('hoverNode', function (params) {
+				const nodeId = params.node;
+				const note = allNotes.find((n) => n.id === nodeId);
+				if (note) {
+					const preview = note.content.substring(0, 100) + (note.content.length > 100 ? '...' : '');
+					const tooltipHtml = `<div style="max-width: 300px; padding: 5px; background: ${isDarkMode ? '#333' : '#fff'}; color: ${isDarkMode ? '#fff' : '#000'}; border: 1px solid ${isDarkMode ? '#555' : '#ddd'}; border-radius: 4px;">
+						<strong>${note.title}</strong><br/>${preview}
+					</div>`;
+					network.body.nodes[nodeId].options.title = tooltipHtml;
+				}
+			});
+
+			// Add a timeout to stop physics after initial layout
+			setTimeout(() => {
+				if (network) {
+					network.stopSimulation();
+					status = 'Graph created successfully (physics disabled for performance)';
+				}
+			}, 5000);
+
+			status = 'Graph created successfully (initializing layout...)';
+		} catch (err) {
+			status = `Error creating graph: ${err.message}`;
+			console.error('Error creating graph:', err);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	// Toggle physics on/off
+	function togglePhysics() {
+		if (!network) return;
+
+		const physicsEnabled = network.physics.options.enabled;
+		network.setOptions({ physics: { enabled: !physicsEnabled } });
+
+		status = physicsEnabled
+			? 'Physics disabled (better performance, static layout)'
+			: 'Physics enabled (dynamic layout, may affect performance)';
+	}
+</script>
+
+<Navigation />
+
+<div class="container">
+	<h1 class="title">Notes Graph</h1>
+
+	<div class="buttons mb-4">
+		<a href="/" class="button is-info">
+			<span class="icon">
+				<i class="fas fa-arrow-left"></i>
+			</span>
+			<span>Back to Notes</span>
+		</a>
+		<button class="button is-primary" on:click={createGraph} disabled={isLoading}>
+			<span class="icon">
+				<i class="fas fa-sync-alt" class:fa-spin={isLoading}></i>
+			</span>
+			<span>{isLoading ? 'Loading...' : 'Refresh Graph'}</span>
+		</button>
+		<button class="button is-light" on:click={togglePhysics}>
+			<span class="icon">
+				<i class="fas fa-atom"></i>
+			</span>
+			<span>Toggle Physics</span>
+		</button>
+	</div>
+
+	<div class="notification {status.includes('Error') ? 'is-danger' : 'is-info'} mb-4">
+		<p>{status}</p>
+	</div>
+
+	<div class="graph-container" bind:this={container}></div>
+
+	<div class="mt-4 has-text-centered">
+		<p class="is-size-7">
+			Tip: Double-click on a node to open that note. Drag nodes to rearrange the graph. Hover over
+			nodes to see note previews.
+		</p>
+	</div>
+</div>
+
+<style>
+	.container {
+		padding: 2rem;
+	}
+
+	.graph-container {
+		width: 100%;
+		height: 70vh;
+		border: 1px solid #ddd;
+		border-radius: 4px;
+		background-color: #f9f9f9;
+		transition:
+			background-color 0.3s ease,
+			border-color 0.3s ease;
+	}
+
+	:global(.dark-mode) .graph-container {
+		background-color: #1a1a1a;
+		border-color: #444444;
+	}
+</style>

notes/model.go

@@ -49,6 +49,10 @@ func (n *Note) UpdateLinks(db *gorm.DB) error {
 
 	// Extract and create new links
 	titles := n.ExtractLinks(n.Content)
+
+	// Use a map to track unique target IDs to avoid duplicates
+	processedTargets := make(map[string]bool)
+
 	for _, title := range titles {
 		var target Note
 		if err := db.Where("title = ?", title).First(&target).Error; err != nil {
@@ -59,12 +63,22 @@ func (n *Note) UpdateLinks(db *gorm.DB) error {
 			return fmt.Errorf("failed to find target note %q: %w", title, err)
 		}
 
+		// Skip if we've already processed this target
+		if processedTargets[target.ID] {
+			continue
+		}
+		processedTargets[target.ID] = true
+
 		link := NoteLink{
 			SourceNoteID: n.ID,
 			TargetNoteID: target.ID,
 		}
-		if err := db.Create(&link).Error; err != nil {
+
-			return fmt.Errorf("failed to create link to %q: %w", title, err)
+		// Use FirstOrCreate to avoid unique constraint errors
+		var existingLink NoteLink
+		result := db.Where("source_note_id = ? AND target_note_id = ?", n.ID, target.ID).FirstOrCreate(&existingLink, link)
+		if result.Error != nil {
+			return fmt.Errorf("failed to create link to %q: %w", title, result.Error)
 		}
 	}
 

notes/routes.go

@@ -1,6 +1,8 @@
 package notes
 
 import (
+	"archive/zip"
+	"fmt"
 	"net/http"
 
 	"github.com/gin-gonic/gin"
@@ -25,6 +27,7 @@ func (h *Handler) RegisterRoutes(group *gin.RouterGroup) {
 		notes.GET("/:id", h.handleGetNote)
 		notes.PUT("/:id", h.handleUpdateNote)
 		notes.DELETE("/:id", h.handleDeleteNote)
+		notes.POST("/import", h.handleImportObsidianVault)
 	}
 
 	// Test endpoint
@@ -121,3 +124,33 @@ func (h *Handler) handleReset(c *gin.Context) {
 	}
 	c.Status(http.StatusOK)
 }
+
+func (h *Handler) handleImportObsidianVault(c *gin.Context) {
+	file, _, err := c.Request.FormFile("file")
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": fmt.Sprintf("Failed to get file: %v", err)})
+		return
+	}
+	defer func() {
+		if closeErr := file.Close(); closeErr != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": fmt.Sprintf("Failed to close file: %v", closeErr)})
+			return
+		}
+	}()
+
+	// Create a zip reader
+	zipReader, err := zip.NewReader(file, c.Request.ContentLength)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": fmt.Sprintf("Failed to read zip file: %v", err)})
+		return
+	}
+
+	// Import the vault
+	imported, err := h.service.ImportObsidianVault(zipReader)
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{"imported": imported})
+}

notes/service.go

@@ -1,7 +1,12 @@
 package notes
 
 import (
+	"archive/zip"
 	"fmt"
+	"io"
+	"path/filepath"
+	"strings"
+	"time"
 
 	"github.com/google/uuid"
 	"gorm.io/gorm"
@@ -126,6 +131,89 @@ func (s *Service) Delete(id string) error {
 	return nil
 }
 
+// ImportObsidianVault imports notes from an Obsidian vault zip file
+func (s *Service) ImportObsidianVault(zipReader *zip.Reader) (int, error) {
+	// Map to store file paths and their content
+	noteFiles := make(map[string]string)
+
+	// First pass: extract all markdown files
+	for _, file := range zipReader.File {
+		// Skip directories and non-markdown files
+		if file.FileInfo().IsDir() || !strings.HasSuffix(strings.ToLower(file.Name), ".md") {
+			continue
+		}
+
+		// Open the file
+		rc, err := file.Open()
+		if err != nil {
+			return 0, fmt.Errorf("failed to open file %s: %w", file.Name, err)
+		}
+
+		// Read the content
+		content, err := io.ReadAll(rc)
+		if err != nil {
+			if err := rc.Close(); err != nil {
+				return 0, fmt.Errorf("failed to close file %s: %w", file.Name, err)
+			}
+			return 0, fmt.Errorf("failed to read file %s: %w", file.Name, err)
+		}
+		if err := rc.Close(); err != nil {
+			return 0, fmt.Errorf("failed to close file %s: %w", file.Name, err)
+		}
+
+		// Store the content
+		noteFiles[file.Name] = string(content)
+	}
+
+	// Map to store created notes by their original filename
+	createdNotes := make(map[string]*Note)
+
+	// Second pass: create notes without links
+	for filePath, content := range noteFiles {
+		// Extract title from filename
+		fileName := filepath.Base(filePath)
+		title := strings.TrimSuffix(fileName, filepath.Ext(fileName))
+
+		// Create note
+		note := &Note{
+			ID:        uuid.New().String(),
+			Title:     title,
+			Content:   content,
+			CreatedAt: time.Now(),
+			UpdatedAt: time.Now(),
+		}
+
+		// Save note to database
+		if err := s.db.Create(note).Error; err != nil {
+			return len(createdNotes), fmt.Errorf("failed to create note %s: %w", title, err)
+		}
+
+		// Store created note
+		createdNotes[filePath] = note
+	}
+
+	// Third pass: update links between notes
+	for filePath, note := range createdNotes {
+		if err := s.db.Transaction(func(tx *gorm.DB) error {
+			// Load the note
+			if err := tx.First(note, "id = ?", note.ID).Error; err != nil {
+				return fmt.Errorf("failed to load note %s: %w", note.Title, err)
+			}
+
+			// Update links
+			if err := note.UpdateLinks(tx); err != nil {
+				return fmt.Errorf("failed to update links in note %s: %w", note.Title, err)
+			}
+
+			return nil
+		}); err != nil {
+			return len(createdNotes), fmt.Errorf("failed to update links for note %s: %w", filePath, err)
+		}
+	}
+
+	return len(createdNotes), nil
+}
+
 // Reset deletes all notes (for testing)
 func (s *Service) Reset() error {
 	if err := s.db.Session(&gorm.Session{AllowGlobalUpdate: true}).Delete(&Note{}).Error; err != nil {