Write on the margins of the internet. Powered by the AT Protocol. margin.at
extension web atproto comments

Merge pull request #25 from hacdias/fix/maybe-improvements

feat: consistency adjustments, all page

authored by

Scan and committed by
GitHub
bf79686a babbce21

+46 -14
+13
web/src/App.tsx
··· 46 46 <Route path="/my-feed" element={<Navigate to="/home" replace />} /> 47 47 48 48 <Route 49 + path="/annotations" 50 + element={ 51 + <AppLayout> 52 + <MasonryFeed 53 + motivation="commenting" 54 + emptyMessage="You haven't annotated anything yet." 55 + showTabs={true} 56 + title="Annotations" 57 + /> 58 + </AppLayout> 59 + } 60 + /> 61 + <Route 49 62 path="/bookmarks" 50 63 element={ 51 64 <AppLayout>
+14 -6
web/src/components/navigation/Sidebar.tsx
··· 2 2 import { 3 3 Home, 4 4 Bookmark, 5 - PenTool, 6 5 Settings, 7 6 LogOut, 8 7 Bell, ··· 12 11 Folder, 13 12 LogIn, 14 13 PenSquare, 14 + MessageSquareText, 15 + Highlighter, 15 16 } from "lucide-react"; 16 17 import { useStore } from "@nanostores/react"; 17 18 import { $user, logout } from "../../store/auth"; ··· 43 44 const publicNavItems = [ 44 45 { icon: Home, label: "Feed", href: "/home", badge: undefined }, 45 46 { 46 - icon: Bookmark, 47 - label: "Bookmarks", 48 - href: "/bookmarks", 47 + icon: MessageSquareText, 48 + label: "Annotations", 49 + href: "/annotations", 49 50 badge: undefined, 50 51 }, 51 52 { 52 - icon: PenTool, 53 + icon: Highlighter, 53 54 label: "Highlights", 54 55 href: "/highlights", 56 + badge: undefined, 57 + }, 58 + { 59 + icon: Bookmark, 60 + label: "Bookmarks", 61 + href: "/bookmarks", 55 62 badge: undefined, 56 63 }, 57 64 ]; ··· 64 71 href: "/notifications", 65 72 badge: unreadCount, 66 73 }, 74 + { icon: MessageSquareText, label: "Annotations", href: "/annotations" }, 75 + { icon: Highlighter, label: "Highlights", href: "/highlights" }, 67 76 { icon: Bookmark, label: "Bookmarks", href: "/bookmarks" }, 68 - { icon: PenTool, label: "Highlights", href: "/highlights" }, 69 77 { icon: Folder, label: "Collections", href: "/collections" }, 70 78 ]; 71 79
+2 -2
web/src/views/core/Feed.tsx
··· 6 6 Loader2, 7 7 Clock, 8 8 Bookmark, 9 - MessageSquare, 10 9 Highlighter, 10 + MessageSquareText, 11 11 } from "lucide-react"; 12 12 import { useStore } from "@nanostores/react"; 13 13 import { $user } from "../../store/auth"; ··· 225 225 226 226 const filters = [ 227 227 { id: "all", label: "All", icon: null }, 228 - { id: "commenting", label: "Annotations", icon: MessageSquare }, 228 + { id: "commenting", label: "Annotations", icon: MessageSquareText }, 229 229 { id: "highlighting", label: "Highlights", icon: Highlighter }, 230 230 { id: "bookmarking", label: "Bookmarks", icon: Bookmark }, 231 231 ];
+17 -6
web/src/views/profile/Profile.tsx
··· 61 61 did: string; 62 62 } 63 63 64 - type Tab = "annotations" | "highlights" | "bookmarks" | "collections"; 64 + type Tab = "all" | "annotations" | "highlights" | "bookmarks" | "collections"; 65 65 66 66 export default function Profile({ did }: ProfileProps) { 67 67 const [profile, setProfile] = useState<UserProfile | null>(null); 68 68 const [loading, setLoading] = useState(true); 69 - const [activeTab, setActiveTab] = useState<Tab>("annotations"); 69 + const [activeTab, setActiveTab] = useState<Tab>("all"); 70 70 71 + const [all, setAll] = useState<AnnotationItem[]>([]); 71 72 const [annotations, setAnnotations] = useState<AnnotationItem[]>([]); 72 73 const [highlights, setHighlights] = useState<AnnotationItem[]>([]); 73 74 const [bookmarks, setBookmarks] = useState<AnnotationItem[]>([]); ··· 116 117 117 118 useEffect(() => { 118 119 setProfile(null); 120 + setAll([]); 119 121 setAnnotations([]); 120 122 setHighlights([]); 121 123 setBookmarks([]); 122 124 setCollections([]); 123 - setActiveTab("annotations"); 125 + setActiveTab("all"); 124 126 setLoading(true); 125 127 126 128 const loadProfile = async () => { ··· 188 190 189 191 setDataLoading(true); 190 192 try { 191 - if (activeTab === "annotations") { 193 + if (activeTab === "all") { 194 + const res = await getFeed({ 195 + creator: resolvedDid, 196 + limit: 50, 197 + }); 198 + setAll(res.items || []); 199 + } else if (activeTab === "annotations") { 192 200 const res = await getFeed({ 193 201 creator: resolvedDid, 194 202 motivation: "commenting", ··· 254 262 } 255 263 256 264 const tabs = [ 257 - { id: "annotations", label: "Notes" }, 265 + { id: "all", label: "All" }, 266 + { id: "annotations", label: "Annotations" }, 258 267 { id: "highlights", label: "Highlights" }, 259 268 { id: "bookmarks", label: "Bookmarks" }, 260 269 { id: "collections", label: "Collections" }, ··· 265 274 ? annotations 266 275 : activeTab === "highlights" 267 276 ? highlights 268 - : bookmarks; 277 + : activeTab === "all" 278 + ? all 279 + : bookmarks; 269 280 270 281 const LABEL_DESCRIPTIONS: Record<string, string> = { 271 282 sexual: "Sexual Content",