(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol. margin.at
extension web atproto comments
98
fork

Configure Feed

Select the types of activity you want to include in your feed.

persist feed filter state to local storage and update annotation highlight border color to use a CSS variable.

scanash00 6b32dfe8 db36e33e

+13 -17
+1 -1
web/src/components/AnnotationCard.jsx
··· 383 383 rel="noopener noreferrer" 384 384 className="annotation-highlight" 385 385 style={{ 386 - borderLeftColor: data.color || "#f59e0b", 386 + borderLeftColor: data.color || "var(--accent)", 387 387 }} 388 388 > 389 389 <mark>"{highlightedText}"</mark>
+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>