feat: NIP-51 people lists (kind 30000) with unified discovery

src/AppRouter.tsx

@@ -26,6 +26,9 @@ import VideoPage from "./pages/VideoPage";
 import { TagPage } from "./pages/TagPage";
 import ListsPage from "./pages/ListsPage";
 import ListDetailPage from "./pages/ListDetailPage";
+import ListEditPage from "./pages/ListEditPage";
+import ListMembersPage from "./pages/ListMembersPage";
+import ListVideosPage from "./pages/ListVideosPage";
 import ModerationSettingsPage from "./pages/ModerationSettingsPage";
 import LinkedAccountsSettingsPage from "./pages/LinkedAccountsSettingsPage";
 // import { NIP05ProfilePage } from "./pages/NIP05ProfilePage";
@@ -130,6 +133,8 @@ export function AppRouter() {
           <Route path="/merch" element={<MerchPage />} />
           <Route path="/u/:userId" element={<UniversalUserPage />} />
           <Route path="/list/:pubkey/:listId" element={<ListDetailPage />} />
+          <Route path="/list/:pubkey/:listId/members" element={<ListMembersPage />} />
+          <Route path="/list/:pubkey/:listId/videos" element={<ListVideosPage />} />
           <Route path="/event/:eventId" element={<EventPage />} />
           <Route path="/event/a/:kind/:pubkey/:identifier" element={<EventPage />} />
           <Route path="/:nip19" element={<NIP19Page />} />
@@ -143,6 +148,7 @@ export function AppRouter() {
               <Route path="/messages/:conversationId" element={<ConversationPage />} />
               <Route path="/analytics" element={<AnalyticsPage />} />
               <Route path="/lists" element={<ListsPage />} />
+              <Route path="/list/:pubkey/:listId/edit" element={<ListEditPage />} />
               {/* DISABLED: Upload route - not supported on web at this time
               <Route path="/upload" element={<UploadPage />} />
               */}

src/components/AddToPeopleListDialog.test.tsx

@@ -0,0 +1,206 @@
+// ABOUTME: Tests for AddToPeopleListDialog component
+// ABOUTME: Covers list rendering, pre-check logic, toggle mutations, and empty state
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { AddToPeopleListDialog } from './AddToPeopleListDialog';
+import type { PeopleList } from '@/types/peopleList';
+
+const MEMBER_PUBKEY = 'aaaa'.repeat(16);
+const OTHER_PUBKEY = 'bbbb'.repeat(16);
+const CURRENT_USER_PUBKEY = 'cccc'.repeat(16);
+
+const LIST_A: PeopleList = {
+  id: 'list-a',
+  pubkey: CURRENT_USER_PUBKEY,
+  name: 'Alpha List',
+  members: [],
+  createdAt: 1700000001,
+};
+
+const LIST_B: PeopleList = {
+  id: 'list-b',
+  pubkey: CURRENT_USER_PUBKEY,
+  name: 'Beta List',
+  members: [MEMBER_PUBKEY],
+  createdAt: 1700000002,
+};
+
+const { mockAddMutateAsync, mockRemoveMutateAsync } = vi.hoisted(() => ({
+  mockAddMutateAsync: vi.fn(),
+  mockRemoveMutateAsync: vi.fn(),
+}));
+
+vi.mock('@/hooks/usePeopleLists', () => ({
+  usePeopleLists: vi.fn(),
+}));
+
+vi.mock('@/hooks/usePeopleListMutations', () => ({
+  useAddToPeopleList: () => ({
+    mutateAsync: mockAddMutateAsync,
+    isPending: false,
+  }),
+  useRemoveFromPeopleList: () => ({
+    mutateAsync: mockRemoveMutateAsync,
+    isPending: false,
+  }),
+}));
+
+vi.mock('@/hooks/useCurrentUser', () => ({
+  useCurrentUser: () => ({
+    user: { pubkey: CURRENT_USER_PUBKEY },
+  }),
+}));
+
+vi.mock('@/components/CreatePeopleListDialog', () => ({
+  CreatePeopleListDialog: ({ open }: { open: boolean; onOpenChange: (v: boolean) => void; prefilledMembers?: string[] }) =>
+    open ? <div data-testid="create-dialog">Create Dialog</div> : null,
+}));
+
+vi.mock('@/components/ui/dialog', () => ({
+  Dialog: ({
+    open,
+    children,
+  }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+  }) => (open ? <div>{children}</div> : null),
+  DialogContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogHeader: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <h2>{children}</h2>
+  ),
+  DialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <p>{children}</p>
+  ),
+}));
+
+vi.mock('@/components/ui/checkbox', () => ({
+  Checkbox: ({
+    id,
+    checked,
+    onCheckedChange,
+  }: {
+    id: string;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+  }) => (
+    <input
+      type="checkbox"
+      id={id}
+      checked={checked}
+      onChange={(e) => onCheckedChange(e.target.checked)}
+      data-testid={`checkbox-${id}`}
+    />
+  ),
+}));
+
+import { usePeopleLists } from '@/hooks/usePeopleLists';
+const mockUsePeopleLists = vi.mocked(usePeopleLists);
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockAddMutateAsync.mockResolvedValue(undefined);
+  mockRemoveMutateAsync.mockResolvedValue(undefined);
+});
+
+describe('AddToPeopleListDialog', () => {
+  it('renders one row per list with the correct names', () => {
+    mockUsePeopleLists.mockReturnValue({
+      data: [LIST_A, LIST_B],
+      isLoading: false,
+    } as unknown as ReturnType<typeof usePeopleLists>);
+
+    render(
+      <AddToPeopleListDialog
+        open
+        onOpenChange={vi.fn()}
+        memberPubkey={OTHER_PUBKEY}
+      />,
+    );
+
+    expect(screen.getByText('Alpha List')).toBeInTheDocument();
+    expect(screen.getByText('Beta List')).toBeInTheDocument();
+  });
+
+  it('pre-checks rows for lists that already contain memberPubkey', () => {
+    mockUsePeopleLists.mockReturnValue({
+      data: [LIST_A, LIST_B],
+      isLoading: false,
+    } as unknown as ReturnType<typeof usePeopleLists>);
+
+    render(
+      <AddToPeopleListDialog
+        open
+        onOpenChange={vi.fn()}
+        memberPubkey={MEMBER_PUBKEY}
+      />,
+    );
+
+    // LIST_B contains MEMBER_PUBKEY — its checkbox should be checked
+    expect(screen.getByTestId('checkbox-list-b')).toBeChecked();
+    // LIST_A does not — its checkbox should be unchecked
+    expect(screen.getByTestId('checkbox-list-a')).not.toBeChecked();
+  });
+
+  it('toggling an unchecked row calls addMutation, toggling a checked row calls removeMutation', async () => {
+    const user = userEvent.setup();
+
+    mockUsePeopleLists.mockReturnValue({
+      data: [LIST_A, LIST_B],
+      isLoading: false,
+    } as unknown as ReturnType<typeof usePeopleLists>);
+
+    render(
+      <AddToPeopleListDialog
+        open
+        onOpenChange={vi.fn()}
+        memberPubkey={MEMBER_PUBKEY}
+      />,
+    );
+
+    // LIST_A is unchecked → checking it should call add
+    await user.click(screen.getByTestId('checkbox-list-a'));
+    await waitFor(() =>
+      expect(mockAddMutateAsync).toHaveBeenCalledWith({
+        listId: 'list-a',
+        memberPubkey: MEMBER_PUBKEY,
+      }),
+    );
+
+    // LIST_B is checked → unchecking it should call remove
+    await user.click(screen.getByTestId('checkbox-list-b'));
+    await waitFor(() =>
+      expect(mockRemoveMutateAsync).toHaveBeenCalledWith({
+        listId: 'list-b',
+        memberPubkey: MEMBER_PUBKEY,
+      }),
+    );
+  });
+
+  it('shows empty state headline and create CTA when user has no lists', () => {
+    mockUsePeopleLists.mockReturnValue({
+      data: [],
+      isLoading: false,
+    } as unknown as ReturnType<typeof usePeopleLists>);
+
+    render(
+      <AddToPeopleListDialog
+        open
+        onOpenChange={vi.fn()}
+        memberPubkey={OTHER_PUBKEY}
+      />,
+    );
+
+    expect(screen.getByText(/you don't have any lists yet/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /create new list/i })).toBeInTheDocument();
+    // No list rows
+    expect(screen.queryByTestId(/^checkbox-/)).not.toBeInTheDocument();
+  });
+});

src/components/AddToPeopleListDialog.tsx

@@ -0,0 +1,131 @@
+// ABOUTME: Dialog for quickly adding/removing a person from the current user's people lists
+// ABOUTME: Checkbox rows give instant per-list toggle; footer opens CreatePeopleListDialog
+
+import { useState } from 'react';
+import { usePeopleLists } from '@/hooks/usePeopleLists';
+import {
+  useAddToPeopleList,
+  useRemoveFromPeopleList,
+} from '@/hooks/usePeopleListMutations';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Plus, Users } from '@phosphor-icons/react';
+import { CreatePeopleListDialog } from '@/components/CreatePeopleListDialog';
+
+interface AddToPeopleListDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  memberPubkey: string;
+}
+
+export function AddToPeopleListDialog({
+  open,
+  onOpenChange,
+  memberPubkey,
+}: AddToPeopleListDialogProps) {
+  const { user } = useCurrentUser();
+  const { data: userLists, isLoading } = usePeopleLists(user?.pubkey);
+  const addToList = useAddToPeopleList();
+  const removeFromList = useRemoveFromPeopleList();
+
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+
+  const handleToggle = async (listId: string, currentlyChecked: boolean) => {
+    if (currentlyChecked) {
+      await removeFromList.mutateAsync({ listId, memberPubkey });
+    } else {
+      await addToList.mutateAsync({ listId, memberPubkey });
+    }
+  };
+
+  const isEmpty = !isLoading && (!userLists || userLists.length === 0);
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Add to a list</DialogTitle>
+            <DialogDescription>
+              Pick which of your people lists to add this person to.
+            </DialogDescription>
+          </DialogHeader>
+
+          {isLoading && (
+            <div className="space-y-2 py-2">
+              {[...Array(3)].map((_, i) => (
+                <Skeleton key={i} className="h-10 w-full" />
+              ))}
+            </div>
+          )}
+
+          {!isLoading && !isEmpty && (
+            <ScrollArea className="max-h-64 w-full rounded-md border p-4">
+              <div className="space-y-2">
+                {userLists!.map((list) => {
+                  const isChecked = list.members.includes(memberPubkey);
+                  return (
+                    <div
+                      key={list.id}
+                      className="flex items-center space-x-3 p-2 rounded hover:bg-accent"
+                    >
+                      <Checkbox
+                        id={list.id}
+                        checked={isChecked}
+                        onCheckedChange={() => handleToggle(list.id, isChecked)}
+                      />
+                      <Label
+                        htmlFor={list.id}
+                        className="flex-1 cursor-pointer flex items-center gap-2"
+                      >
+                        <Users className="h-4 w-4 shrink-0" />
+                        <span className="truncate">{list.name}</span>
+                      </Label>
+                      <span className="text-xs text-muted-foreground shrink-0">
+                        {list.members.length} {list.members.length === 1 ? 'member' : 'members'}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </ScrollArea>
+          )}
+
+          {isEmpty && (
+            <p className="text-sm text-muted-foreground text-center py-4">
+              You don't have any lists yet.
+            </p>
+          )}
+
+          <div className="pt-2">
+            <Button
+              variant="sticker"
+              className="w-full"
+              onClick={() => setCreateDialogOpen(true)}
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Create new list
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <CreatePeopleListDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+        prefilledMembers={[memberPubkey]}
+      />
+    </>
+  );
+}