(READ ONLY) Margin is an open annotation layer for 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
+46
-14
+13
web/src/App.tsx
+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>
+2
-2
web/src/views/core/Feed.tsx
+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
+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",