comments on lists and decks

src/components/Drawer.tsx

···
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+
+interface DrawerProps {
+	isOpen: boolean;
+	onClose: () => void;
+	children: ReactNode;
+	side?: "left" | "right";
+	size?: "sm" | "md" | "lg";
+	"aria-label"?: string;
+	"aria-labelledby"?: string;
+}
+
+const SIZE_CLASSES = {
+	sm: "w-80",
+	md: "w-[30rem]",
+	lg: "w-[40rem]",
+} as const;
+
+export function Drawer({
+	isOpen,
+	onClose,
+	children,
+	side = "right",
+	size = "md",
+	"aria-label": ariaLabel,
+	"aria-labelledby": ariaLabelledby,
+}: DrawerProps) {
+	useEffect(() => {
+		if (!isOpen) return;
+
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				onClose();
+			}
+		};
+
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [isOpen, onClose]);
+
+	if (!isOpen) return null;
+
+	const positionClass = side === "left" ? "left-0" : "right-0";
+	const borderClass = side === "left" ? "border-r" : "border-l";
+
+	return (
+		<>
+			{/* Backdrop */}
+			<div
+				className="fixed inset-0 bg-black/50 z-40"
+				onClick={onClose}
+				aria-hidden="true"
+			/>
+
+			{/* Drawer panel */}
+			<div className="fixed inset-0 z-50 pointer-events-none">
+				<div
+					role="dialog"
+					aria-modal="true"
+					aria-label={ariaLabel}
+					aria-labelledby={ariaLabelledby}
+					className={`fixed inset-y-0 ${positionClass} ${SIZE_CLASSES[size]} max-w-[90vw] bg-white dark:bg-zinc-900 ${borderClass} border-gray-200 dark:border-zinc-600 shadow-2xl pointer-events-auto flex flex-col motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out`}
+				>
+					{children}
+				</div>
+			</div>
+		</>
+	);
+}

src/components/comments/CommentsPanel.tsx

···
 } from "@/lib/constellation-queries";
 import type { ComDeckbelcherSocialComment } from "@/lib/lexicons/index";
 import type { Document } from "@/lib/lexicons/types/com/deckbelcher/richtext";
-import { getSocialItemUri, type SaveableItem } from "@/lib/social-item-types";
+import {
+	type CommentableItem,
+	getSocialItemUri,
+} from "@/lib/social-item-types";
 import { useAuth } from "@/lib/useAuth";
 import { CommentForm } from "./CommentForm";
 import { CommentThread } from "./CommentThread";
···
 
 interface CommentsPanelProps {
 	subject: CommentSubject;
-	item: SaveableItem;
+	item: CommentableItem;
 	title?: string;
 	onClose?: () => void;
 	availableTags?: string[];

src/components/list/SaveToListDialog.tsx

···
 		if (!newListName.trim()) return;
 
 		const itemUri =
-			item.type === "card"
-				? toOracleUri(item.oracleId)
-				: (item.uri as `at://${string}`);
+			item.type === "card" ? toOracleUri(item.oracleId) : item.uri;
 		const queryKeys = getConstellationQueryKeys(itemUri, userDid);
 
 		const previousSaved = queryClient.getQueryData<boolean>(

src/components/social/BacklinkRow.tsx

···
 }
 
 function SaveRow({ did, rkey }: { did: Did; rkey: Rkey }) {
-	const {
-		data: list,
-		isLoading,
-		isError,
-	} = useQuery(getCollectionListQueryOptions(did, rkey));
+	const { data, isLoading, isError } = useQuery(
+		getCollectionListQueryOptions(did, rkey),
+	);
 
 	if (isLoading) {
 		return <RowSkeleton />;
 	}
 
-	if (isError || !list) {
+	if (isError || !data) {
 		return null;
 	}
 
-	return <ListPreview did={did} rkey={rkey} list={list} showHandle />;
+	return <ListPreview did={did} rkey={rkey} list={data.value} showHandle />;
 }
 
 function DeckRow({ did, rkey }: { did: Did; rkey: Rkey }) {

src/lib/collection-list-queries.ts

···
 	optimisticBacklinks,
 	optimisticBoolean,
 	optimisticCount,
-	optimisticRecordWithIndex,
+	optimisticInfiniteRecord,
+	optimisticRecord,
 	runOptimistic,
 } from "./optimistic-utils";
 import {
···
 	toOracleUri,
 	toScryfallUri,
 } from "./scryfall-types";
-import type { SaveableItem } from "./social-item-types";
+import { getSocialItemUri, type SaveableItem } from "./social-item-types";
 import { useAuth } from "./useAuth";
 import { useMutationWithToast } from "./useMutationWithToast";
 
···
 	};
 }
 
+export interface CollectionListRecord {
+	uri: string;
+	cid: string;
+	value: CollectionList;
+}
+
 /**
  * Query options for fetching a single collection list
  */
 export const getCollectionListQueryOptions = (did: Did, rkey: Rkey) =>
 	queryOptions({
 		queryKey: ["collection-list", did, rkey] as const,
-		queryFn: async (): Promise<CollectionList> => {
+		queryFn: async (): Promise<CollectionListRecord> => {
 			const result = await getCollectionListRecord(did, rkey);
 			if (!result.success) {
 				throw result.error;
 			}
-			return transformListRecord(result.data.value);
+			return {
+				uri: result.data.uri,
+				cid: result.data.cid,
+				value: transformListRecord(result.data.value),
+			};
 		},
 		staleTime: 30 * 1000,
 	});
 
-export interface CollectionListRecord {
-	uri: string;
-	cid: string;
-	value: CollectionList;
-}
-
 /**
  * Query options for listing all collection lists for a user
  */
···
 		},
 		onMutate: async (newList) => {
 			const rollback = await runOptimistic([
-				optimisticRecordWithIndex<CollectionList>(
+				optimisticRecord<CollectionListRecord>(
 					queryClient,
 					["collection-list", did, rkey],
+					(old) => (old ? { ...old, value: newList } : undefined),
+				),
+				optimisticInfiniteRecord<CollectionList>(
+					queryClient,
 					["collection-lists", did],
-					rkey,
+					`/${rkey}`,
 					newList,
 				),
 			]);
···
 					? addCardToList(list, item.scryfallId, item.oracleId)
 					: addDeckToList(list, item.uri, item.cid);
 
-			const itemUri =
-				item.type === "card"
-					? toOracleUri(item.oracleId)
-					: (item.uri as `at://${string}`);
+			const itemUri = getSocialItemUri(item);
 			const keys = getConstellationQueryKeys(itemUri, did);
 			const newSavedState = !isSaved;
 
 			const rollback = await runOptimistic([
-				optimisticRecordWithIndex<CollectionList>(
+				optimisticRecord<CollectionListRecord>(
 					queryClient,
 					["collection-list", did, rkey],
+					(old) => (old ? { ...old, value: updatedList } : undefined),
+				),
+				optimisticInfiniteRecord<CollectionList>(
+					queryClient,
 					["collection-lists", did],
-					rkey,
+					`/${rkey}`,
 					updatedList,
 				),
 				optimisticBoolean(queryClient, keys.userSaved, (qc) => {

src/lib/constellation-queries.ts

···
 } from "./constellation-client";
 import {
 	type CardItem,
+	type CommentableItem,
 	getSocialItemUri,
+	isCommentable,
 	isSaveable,
 	type SaveableItem,
 	type SaveableItemType,
···
 
 	// Extract narrowed items (undefined if not applicable type)
 	const saveableItem = isSaveable(item) ? item : undefined;
+	const commentableItem = isCommentable(item) ? item : undefined;
 	const cardItem = item.type === "card" ? item : undefined;
 	const isCommentOrReply = item.type === "comment" || item.type === "reply";
 
···
 	);
 	const deckCountQuery = useQuery(cardDeckCountQueryOptions(cardItem));
 
-	// Comment count for cards/decks, reply count for comments/replies
+	// Comment count for cards/decks/lists, reply count for comments/replies
 	const commentCountQuery = useQuery(
-		itemCommentCountQueryOptions(saveableItem),
+		itemCommentCountQueryOptions(commentableItem),
 	);
 	const replyCountQuery = useQuery({
 		...directReplyCountQueryOptions(getSocialItemUri(item)),
···
 // Comment Queries
 // ============================================================================
 
-function getCommentPathForItemType(itemType: SaveableItemType): string {
+type CommentableItemType = "card" | "deck" | "list";
+
+function getCommentPathForItemType(itemType: CommentableItemType): string {
 	return itemType === "card" ? COMMENT_CARD_PATH : COMMENT_RECORD_PATH;
 }
 
···
  * Query options for getting top-level comment count for an item.
  * Auto-disables when item is undefined.
  */
-export function itemCommentCountQueryOptions(item: SaveableItem | undefined) {
+export function itemCommentCountQueryOptions(
+	item: CommentableItem | undefined,
+) {
 	const itemUri = item ? getSocialItemUri(item) : undefined;
 	const itemType = item?.type;
 	return queryOptions({
···
 }
 
 /**
- * Infinite query for top-level comments on an item (card or deck/collection).
+ * Infinite query for top-level comments on an item (card, deck, or list).
  * Auto-disables when item is undefined.
  */
-export function itemCommentsQueryOptions(item: SaveableItem | undefined) {
+export function itemCommentsQueryOptions(item: CommentableItem | undefined) {
 	const itemUri = item ? getSocialItemUri(item) : undefined;
 	return infiniteQueryOptions({
 		queryKey: ["constellation", "comments", itemUri] as const,

src/lib/social-item-types.ts

···
  * - Decks/comments/replies use at://<did>/<collection>/<rkey> URIs
  */
 export type CardItemUri = OracleUri;
-export type DeckItemUri = `at://${string}`;
+export type DeckItemUri = `at://${string}/com.deckbelcher.deck.list/${string}`;
+export type ListItemUri =
+	`at://${string}/com.deckbelcher.collection.list/${string}`;
 export type CommentUri =
 	`at://${string}/com.deckbelcher.social.comment/${string}`;
 export type ReplyUri = `at://${string}/com.deckbelcher.social.reply/${string}`;
···
 export type SocialItem =
 	| { type: "card"; scryfallId: ScryfallId; oracleId: OracleId }
 	| { type: "deck"; uri: DeckItemUri; cid: string }
+	| { type: "list"; uri: ListItemUri; cid: string }
 	| { type: "comment"; uri: CommentUri; cid: string }
 	| { type: "reply"; uri: ReplyUri; cid: string };
 
 /**
  * SaveableItem - subset of SocialItem that can be saved to collection lists
- * Only cards and decks are saveable
+ * Only cards and decks are saveable (you don't save lists to lists)
  */
 export type SaveableItem = Extract<SocialItem, { type: "card" | "deck" }>;
 
 /**
+ * CommentableItem - items that can have comments (cards, decks, lists)
+ */
+export type CommentableItem = Extract<
+	SocialItem,
+	{ type: "card" | "deck" | "list" }
+>;
+
+/**
  * CardItem - narrowed to just cards (for deck-count queries, etc.)
  */
 export type CardItem = Extract<SocialItem, { type: "card" }>;
···
 }
 
 /**
+ * Type guard: checks if item can have comments
+ */
+export function isCommentable(item: SocialItem): item is CommentableItem {
+	return item.type === "card" || item.type === "deck" || item.type === "list";
+}
+
+/**
  * Type guard: checks if item has deck count (only cards)
  */
 export function hasDeckCount(
···
 /**
  * URI type for any social item (for Constellation queries)
  */
-export type SocialItemUri = CardItemUri | DeckItemUri | CommentUri | ReplyUri;
+export type SocialItemUri =
+	| CardItemUri
+	| DeckItemUri
+	| ListItemUri
+	| CommentUri
+	| ReplyUri;
 
 /**
  * Saveable item types (can be saved to collection lists)
···
 export function getSocialItemUri(
 	item: Extract<SocialItem, { type: "deck" }>,
 ): DeckItemUri;
+export function getSocialItemUri(
+	item: Extract<SocialItem, { type: "list" }>,
+): ListItemUri;
 export function getSocialItemUri(
 	item: Extract<SocialItem, { type: "comment" }>,
 ): CommentUri;
···
 			return toOracleUri(item.oracleId);
 		case "deck":
 			return item.uri;
+		case "list":
+			return item.uri;
 		case "comment":
 			return item.uri;
 		case "reply":
···
 			return "Card";
 		case "deck":
 			return "Deck";
+		case "list":
+			return "List";
 		case "comment":
 			return "Comment";
 		case "reply":

src/routes/profile/$did/deck/$rkey/index.tsx

···
 import { useCallback, useMemo, useRef, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { toast } from "sonner";
+import { CommentsPanel } from "@/components/comments/CommentsPanel";
+import { Drawer } from "@/components/Drawer";
 import { CardDragOverlay } from "@/components/deck/CardDragOverlay";
 import { CardModal } from "@/components/deck/CardModal";
 import { CardPreviewPane } from "@/components/deck/CardPreviewPane";
···
 import { documentToPlainText } from "@/lib/richtext-convert";
 import type { ScryfallId } from "@/lib/scryfall-types";
 import { getImageUri } from "@/lib/scryfall-utils";
+import type { DeckItemUri } from "@/lib/social-item-types";
 import { getSelectedCards, type StatsSelection } from "@/lib/stats-selection";
 import { useAuth } from "@/lib/useAuth";
 import { useDeckStats } from "@/lib/useDeckStats";
···
 		);
 
 		const deckUri =
-			`at://${params.did}/${DECK_LIST_NSID}/${params.rkey}` as const;
+			`at://${params.did}/${DECK_LIST_NSID}/${params.rkey}` as DeckItemUri;
 
 		// Prefetch cards and social stats in parallel
 		const cardIds = deck.cards.map((card) => card.scryfallId);
···
 		},
 	});
 
+	const [isCommentsDrawerOpen, setIsCommentsDrawerOpen] = useState(false);
+
+	const deckUri = `at://${did}/${DECK_LIST_NSID}/${rkey}` as DeckItemUri;
+
 	const scrollToTagGroup = useCallback(
 		(tag: string) => {
 			const el = document.querySelector(
···
 						<SocialStats
 							item={{
 								type: "deck",
-								uri: `at://${did}/com.deckbelcher.deck.list/${rkey}`,
+								uri: deckUri,
 								cid: deckCid,
 							}}
 							itemName={deck.name}
+							onCommentClick={() => setIsCommentsDrawerOpen(true)}
 						/>
 						<ValidationBadge result={validation} />
 						{isOwner && (
···
 
 			{/* Drag overlay */}
 			<CardDragOverlay draggedCardId={draggedCardId} />
+
+			{/* Comments drawer */}
+			<Drawer
+				isOpen={isCommentsDrawerOpen}
+				onClose={() => setIsCommentsDrawerOpen(false)}
+				size="lg"
+				aria-label={`Comments on ${deck.name}`}
+			>
+				<CommentsPanel
+					subject={{
+						$type: "com.deckbelcher.social.comment#recordSubject",
+						ref: { uri: deckUri, cid: deckCid },
+					}}
+					item={{ type: "deck", uri: deckUri, cid: deckCid }}
+					title={`Comments on ${deck.name}`}
+					onClose={() => setIsCommentsDrawerOpen(false)}
+					availableTags={allTags}
+					maxHeight="max-h-screen"
+				/>
+			</Drawer>
 		</div>
 	);
 }

src/routes/profile/$did/list/$rkey/index.tsx

···
 import { ErrorBoundary } from "react-error-boundary";
 import { CardImage } from "@/components/CardImage";
 import { ClientDate } from "@/components/ClientDate";
+import { CommentsPanel } from "@/components/comments/CommentsPanel";
 import { DeckPreview } from "@/components/DeckPreview";
+import { Drawer } from "@/components/Drawer";
 import { ListActionsMenu } from "@/components/list/ListActionsMenu";
 import { ManaCost } from "@/components/ManaCost";
 import { OracleText } from "@/components/OracleText";
 import { RichtextSection } from "@/components/richtext/RichtextSection";
 import { SetSymbol } from "@/components/SetSymbol";
+import { SocialStats } from "@/components/social/SocialStats";
 import { asRkey, type Rkey } from "@/lib/atproto-client";
 import { getPrimaryFace } from "@/lib/card-faces";
 import {
···
 	type ListCardItem,
 	type ListDeckItem,
 } from "@/lib/collection-list-types";
+import { COLLECTION_LIST_NSID } from "@/lib/constellation-client";
 import { getDeckQueryOptions } from "@/lib/deck-queries";
 import { didDocumentQueryOptions, extractHandle } from "@/lib/did-to-handle";
 import type { Document } from "@/lib/lexicons/types/com/deckbelcher/richtext";
 import { getCardByIdQueryOptions } from "@/lib/queries";
 import { documentToPlainText } from "@/lib/richtext-convert";
 import { getImageUri } from "@/lib/scryfall-utils";
-import type { SaveableItem } from "@/lib/social-item-types";
+import type {
+	DeckItemUri,
+	ListItemUri,
+	SaveableItem,
+} from "@/lib/social-item-types";
 import { useAuth } from "@/lib/useAuth";
 
 export const Route = createFileRoute("/profile/$did/list/$rkey/")({
···
 		);
 		return list;
 	},
-	head: ({ loaderData: list }) => {
-		if (!list) {
+	head: ({ loaderData: listRecord }) => {
+		if (!listRecord) {
 			return { meta: [{ title: "List Not Found | DeckBelcher" }] };
 		}
+		const list = listRecord.value;
 
 		const title = `${list.name} | DeckBelcher`;
 		const cardCount = list.items.filter(isCardItem).length;
···
 function ListDetailPage() {
 	const { did, rkey } = Route.useParams();
 	const { session } = useAuth();
-	const { data: list, isLoading } = useQuery(
+	const { data, isLoading } = useQuery(
 		getCollectionListQueryOptions(did as Did, asRkey(rkey)),
 	);
+	const list = data?.value;
 	const { data: didDocument } = useQuery(didDocumentQueryOptions(did as Did));
 	const handle = extractHandle(didDocument ?? null);
 
···
 
 	const [isEditingName, setIsEditingName] = useState(false);
 	const [editedName, setEditedName] = useState("");
+	const [isCommentsDrawerOpen, setIsCommentsDrawerOpen] = useState(false);
+
+	const listUri = `at://${did}/${COLLECTION_LIST_NSID}/${rkey}` as ListItemUri;
+	const listCid = data?.cid ?? "";
 
 	if (isLoading || !list) {
 		return (
···
 	const handleRemoveDeck = (item: ListDeckItem) => {
 		const saveItem: SaveableItem = {
 			type: "deck",
-			uri: item.ref.uri,
+			uri: item.ref.uri as DeckItemUri,
 			cid: item.ref.cid,
 		};
 		toggleMutation.mutate({ list, item: saveItem });
···
 						<span className="inline-block h-4 w-20 bg-gray-200 dark:bg-zinc-700 rounded animate-pulse align-middle" />
 					)}
 				</p>
-				<p className="text-sm text-gray-500 dark:text-zinc-400 mb-4">
+				<p className="text-sm text-gray-500 dark:text-zinc-400 mb-2">
 					Updated <ClientDate dateString={dateString} />
 				</p>
+				<div className="mb-4">
+					<SocialStats
+						item={{ type: "list", uri: listUri, cid: listCid }}
+						itemName={list.name}
+						onCommentClick={() => setIsCommentsDrawerOpen(true)}
+					/>
+				</div>
 
 				<div className="mb-8">
 					<ErrorBoundary fallback={null}>
···
 					</div>
 				)}
 			</div>
+
+			<Drawer
+				isOpen={isCommentsDrawerOpen}
+				onClose={() => setIsCommentsDrawerOpen(false)}
+				size="lg"
+				aria-label={`Comments on ${list.name}`}
+			>
+				<CommentsPanel
+					subject={{
+						$type: "com.deckbelcher.social.comment#recordSubject",
+						ref: { uri: listUri, cid: listCid },
+					}}
+					item={{ type: "list", uri: listUri, cid: listCid }}
+					title={`Comments on ${list.name}`}
+					onClose={() => setIsCommentsDrawerOpen(false)}
+					maxHeight="max-h-screen"
+				/>
+			</Drawer>
 		</div>
 	);
 }