(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
persist feed filter state to local storage and update annotation highlight border color to use a CSS variable.
+13
-17
+1
-1
web/src/components/AnnotationCard.jsx
+1
-1
web/src/components/AnnotationCard.jsx
+12
-16
web/src/pages/Feed.jsx
+12
-16
web/src/pages/Feed.jsx
···
12
12
export default function Feed() {
13
13
const [searchParams, setSearchParams] = useSearchParams();
14
14
const tagFilter = searchParams.get("tag");
15
-
const filter = searchParams.get("filter") || "all";
15
+
16
+
const [filter, setFilter] = useState(() => {
17
+
return localStorage.getItem("feedFilter") || "all";
18
+
});
16
19
17
20
const [annotations, setAnnotations] = useState([]);
18
21
const [loading, setLoading] = useState(true);
19
22
const [error, setError] = useState(null);
20
23
21
-
const updateFilter = (newFilter) => {
22
-
setSearchParams(
23
-
(prev) => {
24
-
const next = new URLSearchParams(prev);
25
-
next.set("filter", newFilter);
26
-
return next;
27
-
},
28
-
{ replace: true },
29
-
);
30
-
};
24
+
useEffect(() => {
25
+
localStorage.setItem("feedFilter", filter);
26
+
}, [filter]);
31
27
32
28
const [collectionModalState, setCollectionModalState] = useState({
33
29
isOpen: false,
···
123
119
<div className="feed-filters">
124
120
<button
125
121
className={`filter-tab ${filter === "all" ? "active" : ""}`}
126
-
onClick={() => updateFilter("all")}
122
+
onClick={() => setFilter("all")}
127
123
>
128
124
All
129
125
</button>
130
126
{user && (
131
127
<button
132
128
className={`filter-tab ${filter === "my-tags" ? "active" : ""}`}
133
-
onClick={() => updateFilter("my-tags")}
129
+
onClick={() => setFilter("my-tags")}
134
130
>
135
131
My Feed
136
132
</button>
137
133
)}
138
134
<button
139
135
className={`filter-tab ${filter === "commenting" ? "active" : ""}`}
140
-
onClick={() => updateFilter("commenting")}
136
+
onClick={() => setFilter("commenting")}
141
137
>
142
138
Annotations
143
139
</button>
144
140
<button
145
141
className={`filter-tab ${filter === "highlighting" ? "active" : ""}`}
146
-
onClick={() => updateFilter("highlighting")}
142
+
onClick={() => setFilter("highlighting")}
147
143
>
148
144
Highlights
149
145
</button>
150
146
<button
151
147
className={`filter-tab ${filter === "bookmarking" ? "active" : ""}`}
152
-
onClick={() => updateFilter("bookmarking")}
148
+
onClick={() => setFilter("bookmarking")}
153
149
>
154
150
Bookmarks
155
151
</button>