fix(feeds): simplify import endpoint path and improve note UI

feeds/handler.go

@@ -2,8 +2,10 @@ package feeds
 
 import (
 	"fmt"
+	"io"
 	"net/http"
 	"strconv"
+	"strings"
 
 	"github.com/gin-gonic/gin"
 )
@@ -28,7 +30,7 @@ func (h *Handler) RegisterRoutes(router *gin.RouterGroup) {
 		feeds.DELETE("/:id", h.handleDeleteFeed)
 		feeds.POST("/:id/refresh", h.handleRefreshFeed)
 		feeds.POST("/refresh", h.handleRefreshAllFeeds)
-		feeds.POST("/import/opml", h.handleImportOPML)
+		feeds.POST("/import", h.handleImportOPML)
 
 		// Entry routes
 		feeds.GET("/entries", h.handleListEntries)
@@ -111,15 +113,41 @@ func (h *Handler) handleRefreshAllFeeds(c *gin.Context) {
 	c.Status(http.StatusOK)
 }
 
+// Helper function to get the minimum of two integers
+func min(a, b int) int {
+	if a < b {
+		return a
+	}
+	return b
+}
+
 // handleImportOPML handles POST /api/feeds/import
 func (h *Handler) handleImportOPML(c *gin.Context) {
-	file, _, err := c.Request.FormFile("file")
+	// Set max file size to 10MB
+	const maxFileSize = 10 << 20
+	c.Request.Body = http.MaxBytesReader(c.Writer, c.Request.Body, maxFileSize)
+
+	// Log the content type of the request
+	fmt.Printf("OPML Import - Content-Type: %s\n", c.Request.Header.Get("Content-Type"))
+
+	// Parse the multipart form
+	if err := c.Request.ParseMultipartForm(maxFileSize); err != nil {
+		fmt.Printf("OPML Import - Error parsing multipart form: %v\n", err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": fmt.Sprintf("File too large or invalid form: %v", err)})
+		return
+	}
+
+	file, header, err := c.Request.FormFile("file")
 	if err != nil {
+		fmt.Printf("OPML Import - Error getting form file: %v\n", err)
+		
 		// Check if URL is provided instead
 		url := c.PostForm("url")
 		if url != "" {
+			fmt.Printf("OPML Import - Using URL instead: %s\n", url)
 			resp, err := http.Get(url)
 			if err != nil {
+				fmt.Printf("OPML Import - Error downloading from URL: %v\n", err)
 				c.JSON(http.StatusBadRequest, gin.H{"error": fmt.Sprintf("Failed to download OPML: %v", err)})
 				return
 			}
@@ -131,7 +159,8 @@ func (h *Handler) handleImportOPML(c *gin.Context) {
 
 			feeds, err := h.service.ImportOPML(resp.Body)
 			if err != nil {
-				c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+				fmt.Printf("OPML Import - Error importing from URL: %v\n", err)
+				c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
 				return
 			}
 			c.JSON(http.StatusOK, gin.H{"imported": len(feeds)})
@@ -147,12 +176,53 @@ func (h *Handler) handleImportOPML(c *gin.Context) {
 		}
 	}()
 
-	feeds, err := h.service.ImportOPML(file)
+	// Log file information
-	if err != nil {
+	fmt.Printf("OPML Import - File: %s, Size: %d, Content-Type: %s\n", 
-		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+		header.Filename, header.Size, header.Header.Get("Content-Type"))
+
+	// Check file size
+	if header.Size > maxFileSize {
+		fmt.Printf("OPML Import - File too large: %d bytes\n", header.Size)
+		c.JSON(http.StatusBadRequest, gin.H{"error": "File too large (max 10MB)"})
 		return
 	}
 
+	// Check file extension
+	if !strings.HasSuffix(strings.ToLower(header.Filename), ".opml") && 
+	   !strings.HasSuffix(strings.ToLower(header.Filename), ".xml") {
+		fmt.Printf("OPML Import - Invalid file extension: %s\n", header.Filename)
+		c.JSON(http.StatusBadRequest, gin.H{"error": "File must be an OPML or XML file"})
+		return
+	}
+
+	// Try to read a small sample of the file to check if it looks like XML
+	sampleBuf := make([]byte, 1024)
+	n, err := file.Read(sampleBuf)
+	if err != nil && err != io.EOF {
+		fmt.Printf("OPML Import - Error reading file sample: %v\n", err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": fmt.Sprintf("Error reading file: %v", err)})
+		return
+	}
+	
+	// Log the first few bytes of the file
+	sample := string(sampleBuf[:n])
+	fmt.Printf("OPML Import - File sample: %s\n", sample[:min(100, len(sample))])
+	
+	// Reset the file pointer to the beginning
+	if _, err := file.Seek(0, 0); err != nil {
+		fmt.Printf("OPML Import - Error resetting file pointer: %v\n", err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": fmt.Sprintf("Error processing file: %v", err)})
+		return
+	}
+
+	feeds, err := h.service.ImportOPML(file)
+	if err != nil {
+		fmt.Printf("OPML Import - Error importing OPML: %v\n", err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	fmt.Printf("OPML Import - Successfully imported %d feeds\n", len(feeds))
 	c.JSON(http.StatusOK, gin.H{"imported": len(feeds)})
 }
 

feeds/service.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"io"
 	"log"
+	"strings"
 	"time"
 
 	"github.com/go-co-op/gocron"
@@ -77,8 +78,24 @@ func (s *Service) AddFeed(url string) (*Feed, error) {
 
 // ImportOPML imports feeds from an OPML file
 func (s *Service) ImportOPML(opmlContent io.Reader) ([]Feed, error) {
+	// Read the content into a buffer so we can inspect it if there's an error
+	content, err := io.ReadAll(opmlContent)
+	if err != nil {
+		return nil, fmt.Errorf("failed to read OPML content: %w", err)
+	}
+
+	// Check if the content looks like XML
+	trimmedContent := strings.TrimSpace(string(content))
+	if !strings.HasPrefix(trimmedContent, "<?xml") && !strings.HasPrefix(trimmedContent, "<opml") {
+		// Try to provide a helpful error message
+		if strings.HasPrefix(trimmedContent, "<!DOCTYPE") || strings.HasPrefix(trimmedContent, "<html") {
+			return nil, fmt.Errorf("received HTML instead of OPML XML. Please check that the file is a valid OPML file")
+		}
+		return nil, fmt.Errorf("content does not appear to be valid OPML XML")
+	}
+
 	var opml OPML
-	if err := xml.NewDecoder(opmlContent).Decode(&opml); err != nil {
+	if err := xml.Unmarshal(content, &opml); err != nil {
 		return nil, fmt.Errorf("failed to parse OPML: %w", err)
 	}
 

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,79 +1,84 @@
 <!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"
+		/>
+		<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"
+			integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+			crossorigin="anonymous"
+			referrerpolicy="no-referrer"
+		/>
 
-<head>
+		<!-- Dark mode theme using Bulma's CSS variables -->
-	<meta charset="utf-8" />
+		<style>
-	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+			body.dark-mode {
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+				--bulma-scheme-main: #1a1a1a;
-	<link rel="stylesheet" href="/css/bulma.min.css" />
+				--bulma-scheme-main-bis: #242424;
-	<!-- Font Awesome -->
+				--bulma-scheme-main-ter: #2f2f2f;
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+				--bulma-background: #1a1a1a;
-		integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+				--bulma-text: #e6e6e6;
-		crossorigin="anonymous" referrerpolicy="no-referrer" />
+				--bulma-text-strong: #ffffff;
-
+				--bulma-border: #4a4a4a;
-	<!-- Dark mode theme using Bulma's CSS variables -->
+				--bulma-link: #3273dc;
-	<style>
+				--bulma-link-hover: #5c93e6;
-		body.dark-mode {
-			--bulma-scheme-main: #1a1a1a;
-			--bulma-scheme-main-bis: #242424;
-			--bulma-scheme-main-ter: #2f2f2f;
-			--bulma-background: #1a1a1a;
-			--bulma-text: #e6e6e6;
-			--bulma-text-strong: #ffffff;
-			--bulma-border: #4a4a4a;
-			--bulma-link: #3273dc;
-			--bulma-link-hover: #5c93e6;
-		}
-
-		body.dark-mode .button.is-light {
-			--bulma-button-background-color: #363636;
-			--bulma-button-color: #e6e6e6;
-			--bulma-button-border-color: transparent;
-		}
-
-		body.dark-mode .input,
-		body.dark-mode .textarea {
-			--bulma-input-background-color: #2b2b2b;
-			--bulma-input-color: #e6e6e6;
-			--bulma-input-border-color: #4a4a4a;
-		}
-
-		body.dark-mode .box {
-			--bulma-box-background-color: #2b2b2b;
-			--bulma-box-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3);
-		}
-
-		body.dark-mode .card {
-			--bulma-card-background-color: #2b2b2b;
-			--bulma-card-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3);
-		}
-
-		body.dark-mode .notification.is-info {
-			--bulma-notification-background-color: #1d4ed8;
-			--bulma-notification-color: #e6e6e6;
-		}
-
-		body.dark-mode .notification.is-danger {
-			--bulma-notification-background-color: #dc2626;
-			--bulma-notification-color: #e6e6e6;
-		}
-
-		/* Responsive adjustments */
-		@media (max-width: 768px) {
-			.section {
-				padding: 1.5rem 1rem;
 			}
 
-			.textarea {
+			body.dark-mode .button.is-light {
-				min-height: 200px;
+				--bulma-button-background-color: #363636;
+				--bulma-button-color: #e6e6e6;
+				--bulma-button-border-color: transparent;
 			}
-		}
-	</style>
-	%sveltekit.head%
-</head>
 
-<body data-sveltekit-preload-data="hover">
+			body.dark-mode .input,
-	<div style="display: contents">%sveltekit.body%</div>
+			body.dark-mode .textarea {
-</body>
+				--bulma-input-background-color: #2b2b2b;
+				--bulma-input-color: #e6e6e6;
+				--bulma-input-border-color: #4a4a4a;
+			}
 
-</html>
+			body.dark-mode .box {
+				--bulma-box-background-color: #2b2b2b;
+				--bulma-box-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3);
+			}
+
+			body.dark-mode .card {
+				--bulma-card-background-color: #2b2b2b;
+				--bulma-card-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3);
+			}
+
+			body.dark-mode .notification.is-info {
+				--bulma-notification-background-color: #1d4ed8;
+				--bulma-notification-color: #e6e6e6;
+			}
+
+			body.dark-mode .notification.is-danger {
+				--bulma-notification-background-color: #dc2626;
+				--bulma-notification-color: #e6e6e6;
+			}
+
+			/* Responsive adjustments */
+			@media (max-width: 768px) {
+				.section {
+					padding: 1.5rem 1rem;
+				}
+
+				.textarea {
+					min-height: 200px;
+				}
+			}
+		</style>
+		%sveltekit.head%
+	</head>
+
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

frontend/src/lib/components/SearchBar.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	/**
+	 * A reusable search bar component that emits search events
+	 */
+	export let placeholder = 'Search...';
+	export let value = '';
+	export let debounceTime = 300;
+
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const searchValue = target.value;
+
+		// Clear any existing timeout
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+		}
+
+		// Set a new timeout to debounce the search
+		timeoutId = setTimeout(() => {
+			value = searchValue;
+		}, debounceTime);
+	}
+</script>
+
+<div class="field">
+	<div class="control has-icons-left">
+		<input class="input" type="text" {placeholder} {value} on:input={handleInput} />
+		<span class="icon is-small is-left">
+			<i class="fas fa-search"></i>
+		</span>
+	</div>
+</div>

frontend/src/lib/feeds.ts

@@ -103,24 +103,85 @@ function createFeedsStore() {
 		},
 		importOPML: async (file: File): Promise<{ imported: number }> => {
 			try {
+				// Validate file type
+				if (
+					!file.name.toLowerCase().endsWith('.opml') &&
+					!file.name.toLowerCase().endsWith('.xml')
+				) {
+					throw new Error('Please select a valid OPML or XML file');
+				}
+
+				// Validate file size (max 10MB)
+				const maxSize = 10 * 1024 * 1024; // 10MB
+				if (file.size > maxSize) {
+					throw new Error('File size exceeds the maximum limit of 10MB');
+				}
+
+				console.log('Importing OPML file:', file.name, 'Size:', file.size, 'Type:', file.type);
+
 				const formData = new FormData();
 				formData.append('file', file);
 
-				const response = await fetch('/api/feeds/import', {
+				try {
-					method: 'POST',
+					const response = await fetch('/api/feeds/import', {
-					body: formData
+						method: 'POST',
-				});
+						body: formData
+					});
 
-				if (!response.ok) {
+					console.log('OPML import response status:', response.status, response.statusText);
-					throw new Error(`Failed to import OPML: ${response.statusText}`);
+
+					// Log headers in a type-safe way
+					const headerLog: Record<string, string> = {};
+					response.headers.forEach((value, key) => {
+						headerLog[key] = value;
+					});
+					console.log('OPML import response headers:', headerLog);
+
+					// Handle non-OK responses
+					if (!response.ok) {
+						const contentType = response.headers.get('content-type');
+						console.log('OPML import error content-type:', contentType);
+
+						if (contentType && contentType.includes('application/json')) {
+							// Try to parse error as JSON
+							try {
+								const errorData = await response.json();
+								console.log('OPML import error data:', errorData);
+								throw new Error(errorData.error || `Failed to import OPML: ${response.statusText}`);
+							} catch (jsonError) {
+								console.error('Error parsing JSON error response:', jsonError);
+								throw new Error(
+									`Failed to import OPML: ${response.statusText} (Error parsing error response)`
+								);
+							}
+						} else {
+							// Handle non-JSON responses
+							try {
+								const text = await response.text();
+								console.log('OPML import error text (first 200 chars):', text.substring(0, 200));
+								throw new Error(
+									`Server returned HTML instead of JSON. Status: ${response.status} ${response.statusText}`
+								);
+							} catch (textError) {
+								console.error('Error reading response text:', textError);
+								throw new Error(
+									`Failed to import OPML: ${response.statusText} (Could not read response)`
+								);
+							}
+						}
+					}
+
+					const result = await response.json();
+					console.log('OPML import success:', result);
+
+					// Reload feeds to get the newly imported ones
+					await store.load();
+
+					return result;
+				} catch (fetchError) {
+					console.error('OPML import fetch error:', fetchError);
+					throw fetchError;
 				}
-
-				const result = await response.json();
-
-				// Reload feeds to get the newly imported ones
-				await store.load();
-
-				return result;
 			} catch (error) {
 				console.error('Error importing OPML:', error);
 				throw error;

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

@@ -1,16 +1,73 @@
 <script lang="ts">
 	import CardList from '$lib/components/CardList.svelte';
+	import SearchBar from '$lib/components/SearchBar.svelte';
 	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;
+	let searchQuery = '';
+
+	// 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 +92,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);
 					}
 				}
 			]
@@ -54,6 +111,15 @@
 			'updatedAt' in item
 		);
 	}
+
+	// Filter notes based on search query
+	$: filteredNotes = searchQuery
+		? notesList.filter(
+				(note) =>
+					note.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					note.content.toLowerCase().includes(searchQuery.toLowerCase())
+			)
+		: notesList;
 </script>
 
 <Navigation />
@@ -62,10 +128,76 @@
 	<section class="section">
 		<h1 class="title">My Notes</h1>
 
-		<div class="buttons">
+		{#if error}
-			<a href="/notes/new" class="button is-primary"> New Note </a>
+			<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." />
+		<div class="mb-4">
+			<SearchBar placeholder="Search notes by title or content..." bind:value={searchQuery} />
+		</div>
+
+		<CardList items={filteredNotes} {renderCard} emptyMessage="No notes found." />
 	</section>
 </div>

frontend/src/routes/feeds/+page.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { entries, feeds } from '$lib/feeds';
 	import CardList from '$lib/components/CardList.svelte';
+	import SearchBar from '$lib/components/SearchBar.svelte';
 	import type { Feed, FeedEntry, Note, ReadLaterItem } from '$lib/types';
 
 	// Define the CardProps interface to match what CardList expects
@@ -23,6 +24,7 @@
 	let error: string | null = null;
 	let showUnreadOnly = true;
 	let feedsMap: Map<string, Feed> = new Map();
+	let searchQuery = '';
 
 	onMount(async () => {
 		await loadData();
@@ -153,6 +155,19 @@
 		}
 		return 'No description available';
 	}
+
+	// Filter entries based on search query
+	$: filteredEntries = searchQuery
+		? $entries.filter((entry) => {
+				const feedName = feedsMap.get(entry.feedId)?.title || '';
+				return (
+					entry.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					entry.summary?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					feedName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					entry.content?.toLowerCase().includes(searchQuery.toLowerCase())
+				);
+			})
+		: $entries;
 </script>
 
 <div class="container">
@@ -213,6 +228,13 @@
 		</div>
 	</div>
 
+	<div class="mb-4">
+		<SearchBar
+			placeholder="Search entries by title, content, or feed name..."
+			bind:value={searchQuery}
+		/>
+	</div>
+
 	{#if isLoading && $entries.length === 0}
 		<div class="has-text-centered py-6">
 			<span class="icon is-large">
@@ -221,7 +243,7 @@
 		</div>
 	{:else}
 		<CardList
-			items={$entries}
+			items={filteredEntries}
 			{renderCard}
 			emptyMessage={showUnreadOnly
 				? 'No unread entries found. Try refreshing your feeds or viewing all entries.'

frontend/src/routes/feeds/list/+page.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { feeds } from '$lib/feeds';
 	import CardList from '$lib/components/CardList.svelte';
+	import SearchBar from '$lib/components/SearchBar.svelte';
 	import type { Feed, Note, ReadLaterItem } from '$lib/types';
 
 	// Define the CardProps interface to match what CardList expects
@@ -26,6 +27,7 @@
 	let isRefreshing = false;
 	let error: string | null = null;
 	let importCount = 0;
+	let searchQuery = '';
 
 	onMount(async () => {
 		await loadFeeds();
@@ -156,6 +158,16 @@
 			timestamp: item.createdAt
 		};
 	}
+
+	// Filter feeds based on search query
+	$: filteredFeeds = searchQuery
+		? feedsList.filter(
+				(feed) =>
+					feed.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+					(feed.description || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+					feed.url.toLowerCase().includes(searchQuery.toLowerCase())
+			)
+		: feedsList;
 </script>
 
 <div class="container">
@@ -266,6 +278,13 @@
 		</form>
 	</div>
 
+	<div class="mb-4">
+		<SearchBar
+			placeholder="Search feeds by title, description, or URL..."
+			bind:value={searchQuery}
+		/>
+	</div>
+
 	{#if isLoading && feedsList.length === 0}
 		<div class="has-text-centered py-6">
 			<span class="icon is-large">
@@ -274,7 +293,7 @@
 		</div>
 	{:else}
 		<CardList
-			items={feedsList}
+			items={filteredFeeds}
 			{renderCard}
 			emptyMessage="No feeds found. Add your first feed above."
 		/>

frontend/src/routes/notes/[id]/+page.svelte

@@ -64,6 +64,26 @@
 						<h1 class="title">{note.title}</h1>
 					</div>
 				</div>
+				<div class="level-right">
+					<div class="level-item">
+						<div class="buttons">
+							<a href="/" class="button">
+								<span class="icon">
+									<i class="fas fa-arrow-left"></i>
+								</span>
+								<span>Back to Notes</span>
+							</a>
+							{#if !isEditing}
+								<button class="button is-primary" onclick={() => (isEditing = true)}>
+									<span class="icon">
+										<i class="fas fa-edit"></i>
+									</span>
+									<span>Edit</span>
+								</button>
+							{/if}
+						</div>
+					</div>
+				</div>
 			</div>
 			{#if isEditing}
 				<div class="field">
@@ -102,11 +122,6 @@
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 						{@html html}
 					{/await}
-					<div class="field is-grouped mt-4">
-						<div class="control">
-							<button class="button is-primary" onclick={() => (isEditing = true)}>Edit</button>
-						</div>
-					</div>
 				</div>
 			{/if}
 

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

@@ -0,0 +1,358 @@
+<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';
+	import type { Note } from '$lib/types';
+	import type { Options } from 'vis-network';
+
+	// Define custom interfaces for vis-network types
+	interface NetworkNode {
+		id: string;
+		label: string;
+		shape?: string;
+		size?: number;
+		title?: string;
+		color?: {
+			background?: string;
+			border?: string;
+			highlight?: {
+				background?: string;
+				border?: string;
+			};
+		};
+	}
+
+	interface NetworkEdge {
+		id: string;
+		from: string;
+		to: string;
+		width?: number;
+		color?: string | { color?: string };
+		arrows?: string | { to?: { enabled?: boolean; scaleFactor?: number } };
+	}
+
+	// Define interfaces for network event parameters
+	interface DoubleClickParams {
+		nodes: string[];
+		edges: string[];
+		event: MouseEvent;
+		pointer: { DOM: { x: number; y: number }; canvas: { x: number; y: number } };
+	}
+
+	interface HoverNodeParams {
+		node: string;
+		event: MouseEvent;
+		pointer: { DOM: { x: number; y: number }; canvas: { x: number; y: number } };
+	}
+
+	// Define a type for the Network instance
+	interface NetworkInstance {
+		destroy: () => void;
+		on: <T>(event: string, callback: (params: T) => void) => void;
+		stopSimulation: () => void;
+		setOptions: (options: Partial<Options>) => void;
+		body: {
+			nodes: Record<string, { options: { title: string } }>;
+		};
+		physics: {
+			options: {
+				enabled: boolean;
+			};
+		};
+		fit: () => void;
+	}
+
+	let container: HTMLElement;
+	let network: NetworkInstance | null = 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);
+
+		return () => {
+			if (network) {
+				network.destroy();
+			}
+		};
+	});
+
+	// Update container theme
+	function updateContainerTheme(): void {
+		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(): Promise<void> {
+		if (!container) {
+			status = 'Container not available';
+			return;
+		}
+
+		isLoading = true;
+		status = 'Loading notes...';
+
+		try {
+			// Load notes
+			await notes.load();
+
+			// Get notes from store
+			let allNotes: Note[] = [];
+			const unsubscribe = notes.subscribe((value) => {
+				allNotes = value;
+			});
+			unsubscribe();
+
+			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<NetworkNode>();
+			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<NetworkEdge>();
+			let edgeCount = 0;
+
+			allNotes.forEach((note) => {
+				if (note.linksTo && Array.isArray(note.linksTo)) {
+					note.linksTo.forEach((link: Note) => {
+						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: 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) as unknown as NetworkInstance;
+
+			// Add double-click navigation
+			network?.on<DoubleClickParams>('doubleClick', function (params) {
+				if (params.nodes.length > 0) {
+					const nodeId = params.nodes[0];
+					window.location.href = `/notes/${nodeId}`;
+				}
+			});
+
+			// Add hover tooltip
+			network?.on<HoverNodeParams>('hoverNode', function (params) {
+				const nodeId = params.node;
+				const note = allNotes.find((n) => n.id === nodeId);
+				if (note && network) {
+					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: unknown) {
+			const errorMessage = err instanceof Error ? err.message : String(err);
+			status = `Error creating graph: ${errorMessage}`;
+			console.error('Error creating graph:', err);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	// Toggle physics on/off
+	function togglePhysics(): void {
+		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>

frontend/src/routes/readlist/+page.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { readlist } from '$lib/readlist';
 	import CardList from '$lib/components/CardList.svelte';
+	import SearchBar from '$lib/components/SearchBar.svelte';
 	import type { ReadLaterItem } from '$lib/types';
 
 	let url = '';
@@ -9,6 +10,7 @@
 	let error: string | null = null;
 	let showArchived = false;
 	let archivingItems: Record<string, boolean> = {};
+	let searchQuery = '';
 
 	onMount(() => {
 		loadItems();
@@ -59,7 +61,16 @@
 	}
 
 	function getFilteredItems() {
-		return $readlist;
+		if (!searchQuery) {
+			return $readlist;
+		}
+
+		return $readlist.filter(
+			(item) =>
+				item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+				item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+				item.url.toLowerCase().includes(searchQuery.toLowerCase())
+		);
 	}
 </script>
 
@@ -107,6 +118,13 @@
 		</div>
 	</div>
 
+	<div class="mb-4">
+		<SearchBar
+			placeholder="Search saved links by title, description, or URL..."
+			bind:value={searchQuery}
+		/>
+	</div>
+
 	<CardList
 		items={getFilteredItems()}
 		renderCard={(item) => {

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 {

readlist/service.go

@@ -55,11 +55,11 @@ func (s *Service) Get(id string) (*ReadLaterItem, error) {
 func (s *Service) List(includeArchived bool) ([]ReadLaterItem, error) {
 	var items []ReadLaterItem
 	query := s.db.Order("created_at desc")
-	
+
 	if !includeArchived {
 		query = query.Where("archived_at IS NULL")
 	}
-	
+
 	if err := query.Find(&items).Error; err != nil {
 		return nil, fmt.Errorf("failed to list read later items: %w", err)
 	}