forked from
margin.at/margin
Write on the margins of the internet. Powered by the AT Protocol.
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>