From 6b32dfe8dc8410e89bf197e46e71b94bc8084227 Mon Sep 17 00:00:00 2001
From: scanash00 <scan@scanash.com>
Date: Wed, 14 Jan 2026 16:58:29 -0900
Subject: [PATCH] persist feed filter state to local storage and update
 annotation highlight border color to use a CSS variable.

---
 web/src/components/AnnotationCard.jsx |  2 +-
 web/src/pages/Feed.jsx                | 28 ++++++++++++---------------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/web/src/components/AnnotationCard.jsx b/web/src/components/AnnotationCard.jsx
index 05f0875..7f78db2 100644
--- a/web/src/components/AnnotationCard.jsx
+++ b/web/src/components/AnnotationCard.jsx
@@ -383,7 +383,7 @@ export default function AnnotationCard({
             rel="noopener noreferrer"
             className="annotation-highlight"
             style={{
-              borderLeftColor: data.color || "#f59e0b",
+              borderLeftColor: data.color || "var(--accent)",
             }}
           >
             <mark>"{highlightedText}"</mark>
diff --git a/web/src/pages/Feed.jsx b/web/src/pages/Feed.jsx
index 8681c53..a74b4e6 100644
--- a/web/src/pages/Feed.jsx
+++ b/web/src/pages/Feed.jsx
@@ -12,22 +12,18 @@ import AddToCollectionModal from "../components/AddToCollectionModal";
 export default function Feed() {
   const [searchParams, setSearchParams] = useSearchParams();
   const tagFilter = searchParams.get("tag");
-  const filter = searchParams.get("filter") || "all";
+
+  const [filter, setFilter] = useState(() => {
+    return localStorage.getItem("feedFilter") || "all";
+  });
 
   const [annotations, setAnnotations] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
-  const updateFilter = (newFilter) => {
-    setSearchParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
-        next.set("filter", newFilter);
-        return next;
-      },
-      { replace: true },
-    );
-  };
+  useEffect(() => {
+    localStorage.setItem("feedFilter", filter);
+  }, [filter]);
 
   const [collectionModalState, setCollectionModalState] = useState({
     isOpen: false,
@@ -123,33 +119,33 @@ export default function Feed() {
       <div className="feed-filters">
         <button
           className={`filter-tab ${filter === "all" ? "active" : ""}`}
-          onClick={() => updateFilter("all")}
+          onClick={() => setFilter("all")}
         >
           All
         </button>
         {user && (
           <button
             className={`filter-tab ${filter === "my-tags" ? "active" : ""}`}
-            onClick={() => updateFilter("my-tags")}
+            onClick={() => setFilter("my-tags")}
           >
             My Feed
           </button>
         )}
         <button
           className={`filter-tab ${filter === "commenting" ? "active" : ""}`}
-          onClick={() => updateFilter("commenting")}
+          onClick={() => setFilter("commenting")}
         >
           Annotations
         </button>
         <button
           className={`filter-tab ${filter === "highlighting" ? "active" : ""}`}
-          onClick={() => updateFilter("highlighting")}
+          onClick={() => setFilter("highlighting")}
         >
           Highlights
         </button>
         <button
           className={`filter-tab ${filter === "bookmarking" ? "active" : ""}`}
-          onClick={() => updateFilter("bookmarking")}
+          onClick={() => setFilter("bookmarking")}
         >
           Bookmarks
         </button>
-- 
2.51.2