mirror of
https://github.com/layer-systems/website.git
synced 2026-09-13 06:07:29 +02:00
feat: bookmarks for notes and articles (NIP-51) (#29)
* feat: bookmarks for notes and articles (NIP-51) Adds a Bookmarks app backed by a kind 10003 NIP-51 bookmark list: - BookmarkButton toggles a note (`e` tag) or article (`a` tag) in and out of the signed-in user's list, reading it back before publishing so an update never clobbers other entries — the same whole-list replacement trap follow lists have. - Wired into NoteCard's action row and the Reader's article toolbar. - The new Bookmarks app lists saved notes and articles, opening articles back in the Reader. Closes #21 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto * fix: address review feedback and add a Bookmarked tab to the Reader Per review: - useToggleBookmark now fetches the bookmark list fresh from relays right before writing instead of trusting the query cache (60s staleTime), which could otherwise clobber concurrent edits from another tab or device. - The article BookmarkButton only renders when the article actually has a `d` tag, instead of falling back to an unresolvable "kind:pubkey:" address. - Bookmarked note/article ids are filtered for a non-empty tag value before use, and article addresses are parsed properly (kind, author, `d`) instead of a naive split(':')[2] — the relay query is now also constrained by kind and author, not just `d`, and identifiers containing ':' round-trip correctly. - BookmarkButton sets type="button" so it can't misbehave as a form submit button. Per a reviewer comment: added a "Recent" / "Bookmarked" tab to the Reader's sidebar (src/apps/articles/index.tsx) so bookmarked articles are reachable without leaving the app — the dedicated Bookmarks app stays as-is. Both now share useMyBookmarkedArticles from src/hooks/useBookmarks.ts rather than duplicating the address-parsing logic. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto * fix: reject empty-identifier addresses and surface bookmark load errors Per review: - parseAddress() now rejects an empty d-identifier as malformed (e.g. "30023:<pubkey>:") instead of producing a "#d: ['']" relay query and an unopenable bookmark. - useMyBookmarkedArticles() filters out matched events with empty content, the same non-renderable criteria the Reader's own list uses, so a broken/blank article can't land in the Bookmarked view. - BookmarksApp now distinguishes "the query failed" from "there are no bookmarks" — React Query leaves data undefined in both cases, so a relay/network failure no longer reads as an empty list. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BYiUtZMQeA5RHggQw73wto --------- Co-authored-by: highperfocused <highperfocused@pm.me> Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
51
src/components/nostr/BookmarkButton.tsx
Normal file
51
src/components/nostr/BookmarkButton.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { Bookmark, BookmarkCheck, Loader2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import { isBookmarked, useBookmarkedTargets, useToggleBookmark, type BookmarkTarget } from '@/hooks/useBookmarks';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** Toggles `target` in and out of the signed-in user's NIP-51 bookmark list. */
|
||||
export function BookmarkButton({ target, className }: { target: BookmarkTarget; className?: string }) {
|
||||
const { user } = useCurrentUser();
|
||||
const targets = useBookmarkedTargets();
|
||||
const toggle = useToggleBookmark();
|
||||
const { toast } = useToast();
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const bookmarked = isBookmarked(targets, target);
|
||||
|
||||
const handleClick = async () => {
|
||||
try {
|
||||
await toggle.mutateAsync(target);
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: bookmarked ? 'Could not remove bookmark' : 'Could not bookmark',
|
||||
description: error instanceof Error ? error.message : 'No relay accepted the update.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={cn('h-7 gap-1.5 px-2 text-xs text-muted-foreground', bookmarked && 'text-primary', className)}
|
||||
onClick={handleClick}
|
||||
disabled={toggle.isPending}
|
||||
aria-pressed={bookmarked}
|
||||
>
|
||||
{toggle.isPending ? (
|
||||
<Loader2 className="size-3.5 animate-spin" aria-hidden />
|
||||
) : bookmarked ? (
|
||||
<BookmarkCheck className="size-3.5" aria-hidden />
|
||||
) : (
|
||||
<Bookmark className="size-3.5" aria-hidden />
|
||||
)}
|
||||
{bookmarked ? 'Bookmarked' : 'Bookmark'}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import type { NostrEvent } from '@nostrify/nostrify';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { AuthorLine } from './AuthorLine';
|
||||
import { NoteContent } from './NoteContent';
|
||||
import { BookmarkButton } from './BookmarkButton';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useWindowManager } from '@/os/useWindowManager';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
@@ -69,6 +70,7 @@ export function NoteCard({ event, compact, className }: NoteCardProps) {
|
||||
<Repeat2 className="size-3.5" aria-hidden />
|
||||
Copy link
|
||||
</Button>
|
||||
<BookmarkButton target={{ type: 'e', value: event.id }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user