refactor social stats, show like on comments/replies

src/components/comments/CommentItem.tsx

···
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
-import { MessageSquare, Trash2 } from "lucide-react";
+import { Trash2 } from "lucide-react";
 import { useCallback, useState } from "react";
 import { ClientDate } from "@/components/ClientDate";
 import { RichtextRenderer } from "@/components/richtext/RichtextRenderer";
+import { SocialStats } from "@/components/social/SocialStats";
 import { type AtUri, asRkey } from "@/lib/atproto-client";
 import {
 	generateRkey,
···
 	useDeleteReplyMutation,
 } from "@/lib/comment-queries";
 import type { BacklinkRecord } from "@/lib/constellation-client";
-import {
-	directReplyCountQueryOptions,
-	type SocialItemUri,
-} from "@/lib/constellation-queries";
 import { didDocumentQueryOptions, extractHandle } from "@/lib/did-to-handle";
 import type { Document } from "@/lib/lexicons/types/com/deckbelcher/richtext";
+import type {
+	CommentUri,
+	ReplyUri,
+	SocialItem,
+	SocialItemUri,
+} from "@/lib/social-item-types";
 import { useAuth } from "@/lib/useAuth";
 import { CommentForm } from "./CommentForm";
 
···
 		enabled: type === "reply",
 	});
 
-	const replyCountQuery = useQuery(directReplyCountQueryOptions(uri));
-
 	const { data: didDoc } = useQuery(didDocumentQueryOptions(did));
 	const handle = extractHandle(didDoc ?? null);
 
···
 		type === "comment" ? commentQuery.data?.cid : replyQuery.data?.cid;
 	const rootRef =
 		type === "comment" && cid ? { uri, cid } : replyQuery.data?.reply.root;
-	const replyCount = replyCountQuery.data ?? 0;
+
+	// Construct SocialItem for SocialStats - requires cid from loaded record
+	const socialItem: SocialItem | null = cid
+		? type === "comment"
+			? { type: "comment", uri: uri as CommentUri, cid }
+			: { type: "reply", uri: uri as ReplyUri, cid }
+		: null;
 
 	const handleReplySubmit = useCallback(
 		(content: Document) => {
···
 						<RichtextRenderer doc={record.content} />
 					</div>
 
-					<div className="mt-2 flex items-center gap-4">
-						{session ? (
-							<button
-								type="button"
-								onClick={() => setShowReplyForm(!showReplyForm)}
-								className="flex items-center gap-1 text-sm text-gray-500 dark:text-zinc-300 hover:text-gray-700 dark:hover:text-zinc-200"
-							>
-								<MessageSquare className="w-4 h-4" />
-								{replyCount > 0 && <span>{replyCount}</span>}
-							</button>
-						) : (
-							replyCount > 0 && (
-								<span className="flex items-center gap-1 text-sm text-gray-500 dark:text-zinc-300">
-									<MessageSquare className="w-4 h-4" />
-									<span>{replyCount}</span>
-								</span>
-							)
+					<div className="mt-2 flex items-center gap-2">
+						{/* SocialStats for likes + reply button */}
+						{socialItem && (
+							<SocialStats
+								item={socialItem}
+								showCount={true}
+								onCommentClick={
+									session ? () => setShowReplyForm(!showReplyForm) : undefined
+								}
+							/>
 						)}
 
+						{/* Delete button for owner */}
 						{isOwner &&
 							((type === "comment" && subjectUri) ||
 								(type === "reply" && parentUri)) && (
···
 										deleteCommentMutation.isPending ||
 										deleteReplyMutation.isPending
 									}
-									className="flex items-center gap-1 text-sm text-gray-500 dark:text-zinc-300 hover:text-red-600 dark:hover:text-red-400"
+									className="flex items-center gap-1 text-sm text-gray-500 dark:text-zinc-300 hover:text-red-600 dark:hover:text-red-400 p-2"
 								>
 									<Trash2 className="w-4 h-4" />
 								</button>

src/components/comments/CommentThread.tsx

···
 import {
 	directRepliesQueryOptions,
 	directReplyCountQueryOptions,
-	type SocialItemUri,
 } from "@/lib/constellation-queries";
+import type { SocialItemUri } from "@/lib/social-item-types";
 import { CommentItem } from "./CommentItem";
 
 interface CommentThreadProps {

src/components/comments/CommentsPanel.tsx

···
 import {
 	itemCommentCountQueryOptions,
 	itemCommentsQueryOptions,
-	type SocialItemType,
-	type SocialItemUri,
 } 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 { useAuth } from "@/lib/useAuth";
 import { CommentForm } from "./CommentForm";
 import { CommentThread } from "./CommentThread";
···
 
 interface CommentsPanelProps {
 	subject: CommentSubject;
-	subjectUri: SocialItemUri;
-	itemType: SocialItemType;
+	item: SaveableItem;
 	title?: string;
 	onClose?: () => void;
 	availableTags?: string[];
···
 
 export function CommentsPanel({
 	subject,
-	subjectUri,
-	itemType,
+	item,
 	title = "Comments",
 	onClose,
 	availableTags,
···
 	const [showForm, setShowForm] = useState(false);
 	const createComment = useCreateCommentMutation();
 
-	const countQuery = useQuery(
-		itemCommentCountQueryOptions(subjectUri, itemType),
-	);
+	const subjectUri = getSocialItemUri(item);
+
+	const countQuery = useQuery(itemCommentCountQueryOptions(item));
 
-	const commentsQuery = useInfiniteQuery(
-		itemCommentsQueryOptions(subjectUri, itemType),
-	);
+	const commentsQuery = useInfiniteQuery(itemCommentsQueryOptions(item));
 
 	const comments = commentsQuery.data?.pages.flatMap((p) => p.records) ?? [];
 	const count = countQuery.data ?? 0;

src/components/list/SaveToListDialog.tsx

···
 	type CollectionList,
 	hasCard,
 	hasDeck,
-	type SaveItem,
 } from "@/lib/collection-list-types";
 import { getConstellationQueryKeys } from "@/lib/constellation-queries";
 import { toOracleUri } from "@/lib/scryfall-types";
+import type { SaveableItem } from "@/lib/social-item-types";
 
 interface SaveToListDialogProps {
-	item: SaveItem;
+	item: SaveableItem;
 	itemName?: string;
 	userDid: Did;
 	isOpen: boolean;
···
 interface ListRowProps {
 	list: CollectionList;
 	rkey: string;
-	item: SaveItem;
+	item: SaveableItem;
 	itemName?: string;
 	userDid: Did;
 	onClose: () => void;

src/components/social/BacklinkModal.tsx

···
 import { Bookmark, Heart, Loader2, Rows3, X } from "lucide-react";
 import { useEffect, useId, useRef } from "react";
 import {
-	type CardItemUri,
 	cardDeckBacklinksQueryOptions,
-	type DeckItemUri,
 	itemLikersQueryOptions,
 	itemSaversQueryOptions,
-	type SocialItemType,
-	type SocialItemUri,
 } from "@/lib/constellation-queries";
+import { isSaveable, type SocialItem } from "@/lib/social-item-types";
 import { BacklinkRow, type BacklinkType, RowSkeleton } from "./BacklinkRow";
 
 interface BacklinkModalProps {
 	isOpen: boolean;
 	onClose: () => void;
 	type: BacklinkType;
-	itemUri: SocialItemUri;
-	itemType: SocialItemType;
+	item: SocialItem;
 	total: number;
 }
 
···
 	isOpen,
 	onClose,
 	type,
-	itemUri,
-	itemType,
+	item,
 	total,
 }: BacklinkModalProps) {
 	const titleId = useId();
···
 	const config = MODAL_CONFIG[type];
 	const Icon = config.icon;
 
-	const likersQuery = useInfiniteQuery({
-		...itemLikersQueryOptions(itemUri as CardItemUri | DeckItemUri, itemType),
-		enabled: isOpen && type === "likes",
-	});
+	// Narrow to specific item types for type-safe queries
+	const saveableItem = isSaveable(item) ? item : undefined;
+	const cardItem = item.type === "card" ? item : undefined;
 
-	const saversQuery = useInfiniteQuery({
-		...itemSaversQueryOptions(itemUri as CardItemUri | DeckItemUri, itemType),
-		enabled: isOpen && type === "saves",
-	});
+	// Pass enabled state into query options to avoid spread + override type issues
+	const likersQuery = useInfiniteQuery(
+		itemLikersQueryOptions(isOpen && type === "likes" ? item : undefined),
+	);
+
+	// Saves only apply to saveable items (card/deck)
+	const saversQuery = useInfiniteQuery(
+		itemSaversQueryOptions(
+			isOpen && type === "saves" ? saveableItem : undefined,
+		),
+	);
 
-	const decksQuery = useInfiniteQuery({
-		...cardDeckBacklinksQueryOptions(itemUri as CardItemUri),
-		enabled: isOpen && type === "decks",
-	});
+	const decksQuery = useInfiniteQuery(
+		cardDeckBacklinksQueryOptions(
+			isOpen && type === "decks" ? cardItem : undefined,
+		),
+	);
 
 	const activeQuery =
 		type === "likes"

src/components/social/SocialStats.tsx

···
-import { useQuery } from "@tanstack/react-query";
 import { Bookmark, Heart, MessageSquare, Rows3 } from "lucide-react";
 import { useState } from "react";
-import type { SaveItem } from "@/lib/collection-list-types";
-import type { SocialItemUri } from "@/lib/constellation-queries";
+import { useItemSocialStats } from "@/lib/constellation-queries";
+import { useLikeMutation } from "@/lib/like-queries";
 import {
-	itemCommentCountQueryOptions,
-	useItemSocialStats,
-} from "@/lib/constellation-queries";
-import { useLikeMutation } from "@/lib/like-queries";
-import { toOracleUri } from "@/lib/scryfall-types";
+	hasDeckCount,
+	isSaveable,
+	type SocialItem,
+} from "@/lib/social-item-types";
 import { useAuth } from "@/lib/useAuth";
 import { SaveToListDialog } from "../list/SaveToListDialog";
 import { BacklinkModal } from "./BacklinkModal";
 import type { BacklinkType } from "./BacklinkRow";
 
 interface SocialStatsProps {
-	item: SaveItem;
+	item: SocialItem;
 	itemName?: string;
 	showCount?: boolean;
-	/** Hide comment count (useful when comments section is always visible) */
-	hideCommentCount?: boolean;
 	className?: string;
+	/** Show comment/reply button - clicking invokes this handler */
 	onCommentClick?: () => void;
 }
 
-function getItemUri(item: SaveItem): SocialItemUri {
-	return item.type === "card" ? toOracleUri(item.oracleId) : item.uri;
-}
-
 export function SocialStats({
 	item,
 	itemName,
 	showCount = true,
-	hideCommentCount = false,
 	className = "",
 	onCommentClick,
 }: SocialStatsProps) {
···
 	const [openModal, setOpenModal] = useState<BacklinkType | null>(null);
 	const likeMutation = useLikeMutation();
 
-	const itemUri = getItemUri(item);
+	const itemIsSaveable = isSaveable(item);
+	const itemHasDeckCount = hasDeckCount(item);
+
 	const {
 		isSavedByUser,
 		saveCount,
···
 		isInUserDeck,
 		deckCount,
 		isDeckCountLoading,
-	} = useItemSocialStats(itemUri, item.type);
-
-	const commentCountQuery = useQuery(
-		itemCommentCountQueryOptions(itemUri, item.type),
-	);
-	const commentCount = commentCountQuery.data ?? 0;
+		commentOrReplyCount,
+		isCommentOrReplyCountLoading,
+	} = useItemSocialStats(item);
 
 	const handleSaveClick = () => {
-		if (session) {
+		if (session && itemIsSaveable) {
 			setIsDialogOpen(true);
 		}
 	};
···
 
 	return (
 		<div className={`flex items-center ${className}`}>
-			{/* Like button */}
+			{/* Like button - always visible for all item types */}
 			<div className="flex items-center">
 				<button
 					type="button"
···
 				)}
 			</div>
 
-			{/* Save button */}
-			<div className="flex items-center">
-				<button
-					type="button"
-					onClick={handleSaveClick}
-					disabled={!session}
-					className={buttonBase}
-					aria-label={isSavedByUser ? "Saved to list" : "Save to list"}
-					title={
-						session
-							? isSavedByUser
-								? "Saved to list"
-								: "Save to list"
-							: "Sign in to save"
-					}
-				>
-					<Bookmark
-						className={`w-5 h-5 ${
-							isSavedByUser
-								? "text-blue-500 dark:text-blue-400"
-								: "text-gray-600 dark:text-zinc-300"
-						}`}
-						fill={isSavedByUser ? "currentColor" : "none"}
-					/>
-				</button>
-				{showCount && (
+			{/* Save button - only for saveable items (cards/decks) */}
+			{itemIsSaveable && (
+				<div className="flex items-center">
 					<button
 						type="button"
-						onClick={() => saveCount > 0 && setOpenModal("saves")}
-						disabled={saveCount === 0}
-						className={`text-sm tabular-nums px-1 py-2 rounded ${isSaveLoading ? "opacity-50" : ""} ${
-							isSavedByUser
-								? "text-blue-500 dark:text-blue-400"
-								: "text-gray-600 dark:text-zinc-300"
-						} ${saveCount > 0 ? "hover:underline cursor-pointer" : "cursor-default"}`}
-						title={saveCount > 0 ? "See lists with this item" : undefined}
+						onClick={handleSaveClick}
+						disabled={!session}
+						className={buttonBase}
+						aria-label={isSavedByUser ? "Saved to list" : "Save to list"}
+						title={
+							session
+								? isSavedByUser
+									? "Saved to list"
+									: "Save to list"
+								: "Sign in to save"
+						}
 					>
-						{saveCount}
+						<Bookmark
+							className={`w-5 h-5 ${
+								isSavedByUser
+									? "text-blue-500 dark:text-blue-400"
+									: "text-gray-600 dark:text-zinc-300"
+							}`}
+							fill={isSavedByUser ? "currentColor" : "none"}
+						/>
 					</button>
-				)}
-			</div>
+					{showCount && (
+						<button
+							type="button"
+							onClick={() => saveCount > 0 && setOpenModal("saves")}
+							disabled={saveCount === 0}
+							className={`text-sm tabular-nums px-1 py-2 rounded ${isSaveLoading ? "opacity-50" : ""} ${
+								isSavedByUser
+									? "text-blue-500 dark:text-blue-400"
+									: "text-gray-600 dark:text-zinc-300"
+							} ${saveCount > 0 ? "hover:underline cursor-pointer" : "cursor-default"}`}
+							title={saveCount > 0 ? "See lists with this item" : undefined}
+						>
+							{saveCount}
+						</button>
+					)}
+				</div>
+			)}
 
-			{/* Deck count (cards only) */}
-			{item.type === "card" && showCount && (
+			{/* Deck count - only for cards */}
+			{itemHasDeckCount && showCount && (
 				<div className="flex items-center">
 					<div
 						className={`${statBase} ${
···
 				</div>
 			)}
 
-			{/* Comments button */}
+			{/* Comments/Replies button - shown if handler provided */}
 			{onCommentClick && (
 				<div className="flex items-center">
 					<button
 						type="button"
 						onClick={onCommentClick}
 						className={`${statBase} text-gray-600 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 cursor-pointer transition-colors`}
-						aria-label="Comments"
-						title="Comments"
+						aria-label={
+							item.type === "comment" || item.type === "reply"
+								? "Replies"
+								: "Comments"
+						}
+						title={
+							item.type === "comment" || item.type === "reply"
+								? "Replies"
+								: "Comments"
+						}
 					>
 						<MessageSquare className="w-5 h-5" />
 					</button>
-					{showCount && !hideCommentCount && (
+					{showCount && (
 						<span
-							className={`text-sm tabular-nums px-1 py-2 text-gray-600 dark:text-zinc-300 ${commentCountQuery.isLoading ? "opacity-50" : ""}`}
+							className={`text-sm tabular-nums px-1 py-2 text-gray-600 dark:text-zinc-300 ${isCommentOrReplyCountLoading ? "opacity-50" : ""}`}
 						>
-							{commentCount}
+							{commentOrReplyCount}
 						</span>
 					)}
 				</div>
 			)}
 
-			{session && (
+			{/* Save dialog - only for saveable items */}
+			{session && itemIsSaveable && (
 				<SaveToListDialog
 					item={item}
 					itemName={itemName}
···
 				/>
 			)}
 
+			{/* Backlink modal for viewing who liked/saved/decked */}
 			{openModal && (
 				<BacklinkModal
 					isOpen={openModal !== null}
 					onClose={() => setOpenModal(null)}
 					type={openModal}
-					itemUri={itemUri}
-					itemType={item.type}
+					item={item}
 					total={
 						openModal === "likes"
 							? likeCount

src/lib/__tests__/optimistic-utils.test.ts

···
 			expect(result?.pages[0].records.length).toBe(3);
 		});
 
-		it("seeds cache if empty", async () => {
+		it("does not seed cache when empty (lets query fetch real data)", async () => {
+			// If we seed empty cache with just the new user, opening the modal
+			// shows only them instead of fetching the real list of likers.
+			// The count is updated separately via optimisticCount, so button shows
+			// correct count. Cache stays empty so modal fetches fresh on open.
 			await optimisticBacklinks(queryClient, key, "add", record)();
 
 			const result = queryClient.getQueryData<{ pages: BacklinksResponse[] }>(
 				key,
 			);
-			expect(result?.pages[0].total).toBe(1);
-			expect(result?.pages[0].records).toEqual([record]);
+			expect(result).toBeUndefined();
 		});
 
 		it("removes record from first page by did", async () => {

src/lib/collection-list-queries.ts

···
 	type ListItem,
 	removeCardFromList,
 	removeDeckFromList,
-	type SaveItem,
 } from "./collection-list-types";
 import {
 	type BacklinksResponse,
···
 	toOracleUri,
 	toScryfallUri,
 } from "./scryfall-types";
+import type { SaveableItem } from "./social-item-types";
 import { useAuth } from "./useAuth";
 import { useMutationWithToast } from "./useMutationWithToast";
 
···
 
 interface CreateListParams {
 	name: string;
-	initialItem?: SaveItem;
+	initialItem?: SaveableItem;
 }
 
 /**
···
 
 interface ToggleListItemParams {
 	list: CollectionList;
-	item: SaveItem;
+	item: SaveableItem;
 	itemName?: string;
 }
 

src/lib/collection-list-types.ts

···
  */
 
 import type { ResourceUri } from "@atcute/lexicons";
-import type { DeckItemUri } from "./constellation-queries";
 import type { ComDeckbelcherCollectionList } from "./lexicons/index";
 import type { OracleId, ScryfallId } from "./scryfall-types";
-
-/**
- * Item to save to a list (card or deck)
- * Shared by SaveToListDialog and SocialStats
- * Deck items use strongRef (uri + cid) matching the lexicon
- */
-export type SaveItem =
-	| { type: "card"; scryfallId: ScryfallId; oracleId: OracleId }
-	| { type: "deck"; uri: DeckItemUri; cid: string };
 
 /**
  * App-side card item with flat typed IDs.

src/lib/comment-queries.ts

···
 	updateReplyRecord,
 } from "./atproto-client";
 import { COMMENT_NSID, REPLY_NSID } from "./constellation-client";
-import type { SocialItemUri } from "./constellation-queries";
 import type {
 	ComDeckbelcherSocialComment,
 	ComDeckbelcherSocialReply,
···
 	optimisticRecord,
 	runOptimistic,
 } from "./optimistic-utils";
+import type { SocialItemUri } from "./social-item-types";
 import { useAuth } from "./useAuth";
 import { useMutationWithToast } from "./useMutationWithToast";
 

src/lib/constellation-queries.ts

···
 	REPLY_PARENT_PATH,
 	REPLY_ROOT_PATH,
 } from "./constellation-client";
-import type { OracleUri } from "./scryfall-types";
+import {
+	type CardItem,
+	getSocialItemUri,
+	isSaveable,
+	type SaveableItem,
+	type SaveableItemType,
+	type SocialItem,
+	type SocialItemType,
+	type SocialItemUri,
+} from "./social-item-types";
 import { useAuth } from "./useAuth";
 
-/**
- * Item types that can have social stats
- */
-export type SocialItemType = "card" | "deck";
-
-/**
- * URI types for each item type
- * - Cards use oracle:<uuid> URIs (aggregates across printings)
- * - Decks use at://<did>/com.deckbelcher.deck.list/<rkey> URIs
- */
-export type CardItemUri = OracleUri;
-export type DeckItemUri = `at://${string}`;
-export type SocialItemUri = CardItemUri | DeckItemUri;
-
-function getPathForItemType(itemType: SocialItemType): string {
+function getPathForItemType(itemType: SaveableItemType): string {
 	return itemType === "card"
 		? COLLECTION_LIST_CARD_PATH
 		: COLLECTION_LIST_DECK_PATH;
 }
 
 /**
- * Query options for checking if current user has saved an item to any list
+ * Query options for checking if current user has saved an item to any list.
+ * Auto-disables when item is undefined.
  */
-export function userSavedItemQueryOptions<T extends SocialItemType>(
-	itemUri: T extends "card" ? CardItemUri : DeckItemUri,
+export function userSavedItemQueryOptions(
+	item: SaveableItem | undefined,
 	userDid: Did | undefined,
-	itemType: T,
 ) {
+	const itemUri = item ? getSocialItemUri(item) : undefined;
+	const itemType = item?.type;
 	return queryOptions({
 		queryKey: ["constellation", "userSaved", itemUri, userDid] as const,
 		queryFn: async (): Promise<boolean> => {
-			if (!userDid) return false;
+			if (!userDid || !itemUri || !itemType) return false;
 
 			const result = await getBacklinks({
 				subject: itemUri,
···
 
 			return result.data.records.length > 0;
 		},
-		enabled: !!userDid,
+		enabled: !!userDid && !!item,
 		staleTime: 30 * 1000,
 	});
 }
 
 /**
- * Query options for getting total save count for an item
+ * Query options for getting total save count for an item.
+ * Auto-disables when item is undefined.
  */
-export function itemSaveCountQueryOptions<T extends SocialItemType>(
-	itemUri: T extends "card" ? CardItemUri : DeckItemUri,
-	itemType: T,
-) {
+export function itemSaveCountQueryOptions(item: SaveableItem | undefined) {
+	const itemUri = item ? getSocialItemUri(item) : undefined;
+	const itemType = item?.type;
 	return queryOptions({
 		queryKey: ["constellation", "saveCount", itemUri] as const,
 		queryFn: async (): Promise<number> => {
+			if (!itemUri || !itemType) return 0;
+
 			const result = await getLinksCount({
 				target: itemUri,
 				collection: COLLECTION_LIST_NSID,
···
 
 			return result.data.total;
 		},
+		enabled: !!item,
 		staleTime: 60 * 1000,
 	});
 }
 
 /**
- * Query options for checking if current user has any deck containing a card
+ * Query options for checking if current user has any deck containing a card.
+ * Auto-disables when item is undefined.
  */
 export function userDeckContainsCardQueryOptions(
-	itemUri: CardItemUri,
+	item: CardItem | undefined,
 	userDid: Did | undefined,
 ) {
+	const itemUri = item ? getSocialItemUri(item) : undefined;
 	return queryOptions({
 		queryKey: ["constellation", "userDeckContains", itemUri, userDid] as const,
 		queryFn: async (): Promise<boolean> => {
-			if (!userDid) return false;
+			if (!userDid || !itemUri) return false;
 
 			const result = await getBacklinks({
 				subject: itemUri,
···
 
 			return result.data.records.length > 0;
 		},
-		enabled: !!userDid,
+		enabled: !!userDid && !!item,
 		staleTime: 30 * 1000,
 	});
 }
 
 /**
- * Query options for getting count of decks containing a card (cards only)
+ * Query options for getting count of decks containing a card (cards only).
+ * Auto-disables when item is undefined.
  */
-export function cardDeckCountQueryOptions(itemUri: CardItemUri) {
+export function cardDeckCountQueryOptions(item: CardItem | undefined) {
+	const itemUri = item ? getSocialItemUri(item) : undefined;
 	return queryOptions({
 		queryKey: ["constellation", "deckCount", itemUri] as const,
 		queryFn: async (): Promise<number> => {
+			if (!itemUri) return 0;
+
 			const result = await getLinksCount({
 				target: itemUri,
 				collection: DECK_LIST_NSID,
···
 
 			return result.data.total;
 		},
+		enabled: !!item,
 		staleTime: 60 * 1000,
 	});
 }
···
 	isInUserDeck: boolean;
 	deckCount: number;
 	isDeckCountLoading: boolean;
+	/** Comment count for cards/decks, reply count for comments/replies */
+	commentOrReplyCount: number;
+	isCommentOrReplyCountLoading: boolean;
 }
 
 /**
- * Combined hook for item social stats (saves + likes + deck count for cards)
+ * Combined hook for item social stats (saves + likes + deck count for cards + comment/reply count)
+ * For comments/replies, save-related stats are disabled and "comment count" shows reply count instead.
  */
-export function useItemSocialStats<T extends SocialItemType>(
-	itemUri: T extends "card" ? CardItemUri : DeckItemUri,
-	itemType: T,
-): ItemSocialStats {
+export function useItemSocialStats(item: SocialItem): ItemSocialStats {
 	const { session } = useAuth();
 
+	// Extract narrowed items (undefined if not applicable type)
+	const saveableItem = isSaveable(item) ? item : undefined;
+	const cardItem = item.type === "card" ? item : undefined;
+	const isCommentOrReply = item.type === "comment" || item.type === "reply";
+
+	// Like queries apply to all item types
+	const likedQuery = useQuery(
+		userLikedItemQueryOptions(item, session?.info.sub),
+	);
+	const likeCountQuery = useQuery(itemLikeCountQueryOptions(item));
+
+	// Save queries only apply to cards and decks (auto-disabled when undefined)
 	const savedQuery = useQuery(
-		userSavedItemQueryOptions(itemUri, session?.info.sub, itemType),
+		userSavedItemQueryOptions(saveableItem, session?.info.sub),
 	);
-	const saveCountQuery = useQuery(itemSaveCountQueryOptions(itemUri, itemType));
+	const saveCountQuery = useQuery(itemSaveCountQueryOptions(saveableItem));
 
-	const likedQuery = useQuery(
-		userLikedItemQueryOptions(itemUri, session?.info.sub, itemType),
+	// Deck queries only apply to cards (auto-disabled when undefined)
+	const userDeckQuery = useQuery(
+		userDeckContainsCardQueryOptions(cardItem, session?.info.sub),
 	);
-	const likeCountQuery = useQuery(itemLikeCountQueryOptions(itemUri, itemType));
+	const deckCountQuery = useQuery(cardDeckCountQueryOptions(cardItem));
 
-	// Deck queries only apply to cards
-	const userDeckQuery = useQuery({
-		...userDeckContainsCardQueryOptions(
-			itemUri as CardItemUri,
-			session?.info.sub,
-		),
-		enabled: itemType === "card" && !!session,
-	});
-	const deckCountQuery = useQuery({
-		...cardDeckCountQueryOptions(itemUri as CardItemUri),
-		enabled: itemType === "card",
+	// Comment count for cards/decks, reply count for comments/replies
+	const commentCountQuery = useQuery(
+		itemCommentCountQueryOptions(saveableItem),
+	);
+	const replyCountQuery = useQuery({
+		...directReplyCountQueryOptions(getSocialItemUri(item)),
+		enabled: isCommentOrReply,
 	});
 
 	return {
···
 		isLikeLoading: likedQuery.isLoading || likeCountQuery.isLoading,
 		isInUserDeck: userDeckQuery.data ?? false,
 		deckCount: deckCountQuery.data ?? 0,
-		isDeckCountLoading: itemType === "card" && deckCountQuery.isLoading,
+		isDeckCountLoading: item.type === "card" && deckCountQuery.isLoading,
+		commentOrReplyCount: isCommentOrReply
+			? (replyCountQuery.data ?? 0)
+			: (commentCountQuery.data ?? 0),
+		isCommentOrReplyCountLoading: isCommentOrReply
+			? replyCountQuery.isLoading
+			: commentCountQuery.isLoading,
 	};
 }
 
···
 // ============================================================================
 
 function getLikePathForItemType(itemType: SocialItemType): string {
+	// Cards use oracleUri path, everything else (decks, comments, replies) uses record URI path
 	return itemType === "card" ? LIKE_CARD_PATH : LIKE_RECORD_PATH;
 }
 
 /**
- * Query options for checking if current user has liked an item
+ * Query options for checking if current user has liked an item.
+ * Works for all social item types.
  */
-export function userLikedItemQueryOptions<T extends SocialItemType>(
-	itemUri: T extends "card" ? CardItemUri : DeckItemUri,
+export function userLikedItemQueryOptions(
+	item: SocialItem,
 	userDid: Did | undefined,
-	itemType: T,
 ) {
+	const itemUri = getSocialItemUri(item);
 	return queryOptions({
 		queryKey: ["constellation", "userLiked", itemUri, userDid] as const,
 		queryFn: async (): Promise<boolean> => {
···
 
 			const result = await getBacklinks({
 				subject: itemUri,
-				source: buildSource(LIKE_NSID, getLikePathForItemType(itemType)),
+				source: buildSource(LIKE_NSID, getLikePathForItemType(item.type)),
 				did: userDid,
 				limit: 1,
 			});
···
 }
 
 /**
- * Query options for getting total like count for an item
+ * Query options for getting total like count for an item.
+ * Works for all social item types.
  */
-export function itemLikeCountQueryOptions<T extends SocialItemType>(
-	itemUri: T extends "card" ? CardItemUri : DeckItemUri,
-	itemType: T,
-) {
+export function itemLikeCountQueryOptions(item: SocialItem) {
+	const itemUri = getSocialItemUri(item);
 	return queryOptions({
 		queryKey: ["constellation", "likeCount", itemUri] as const,
 		queryFn: async (): Promise<number> => {
 			const result = await getLinksCount({
 				target: itemUri,
 				collection: LIKE_NSID,
-				path: getLikePathForItemType(itemType),
+				path: getLikePathForItemType(item.type),
 			});
 
 			if (!result.success) {
···
 // ============================================================================
 
 /**
- * Infinite query for users who liked an item
+ * Infinite query for users who liked an item.
+ * Works for all social item types. Auto-disables when item is undefined.
  */
-export function itemLikersQueryOptions<T extends SocialItemType>(
-	itemUri: T extends "card" ? CardItemUri : DeckItemUri,
-	itemType: T,
-) {
+export function itemLikersQueryOptions(item: SocialItem | undefined) {
+	const itemUri = item ? getSocialItemUri(item) : undefined;
 	return infiniteQueryOptions({
 		queryKey: ["constellation", "likers", itemUri] as const,
 		queryFn: async ({ pageParam }) => {
+			if (!item || !itemUri) throw new Error("No item");
 			const result = await getBacklinks({
 				subject: itemUri,
-				source: buildSource(LIKE_NSID, getLikePathForItemType(itemType)),
+				source: buildSource(LIKE_NSID, getLikePathForItemType(item.type)),
 				limit: 25,
 				cursor: pageParam,
 			});
···
 		},
 		initialPageParam: undefined as string | undefined,
 		getNextPageParam: (lastPage) => lastPage.cursor ?? undefined,
+		enabled: !!item,
 		staleTime: 60 * 1000,
 	});
 }
 
 /**
- * Infinite query for lists that saved an item
+ * Infinite query for lists that saved an item (only for saveable items: cards/decks).
+ * Auto-disables when item is undefined.
  */
-export function itemSaversQueryOptions<T extends SocialItemType>(
-	itemUri: T extends "card" ? CardItemUri : DeckItemUri,
-	itemType: T,
-) {
+export function itemSaversQueryOptions(item: SaveableItem | undefined) {
+	const itemUri = item ? getSocialItemUri(item) : undefined;
 	return infiniteQueryOptions({
 		queryKey: ["constellation", "savers", itemUri] as const,
 		queryFn: async ({ pageParam }) => {
+			if (!item || !itemUri) throw new Error("No item");
 			const result = await getBacklinks({
 				subject: itemUri,
-				source: buildSource(COLLECTION_LIST_NSID, getPathForItemType(itemType)),
+				source: buildSource(
+					COLLECTION_LIST_NSID,
+					getPathForItemType(item.type),
+				),
 				limit: 25,
 				cursor: pageParam,
 			});
···
 		},
 		initialPageParam: undefined as string | undefined,
 		getNextPageParam: (lastPage) => lastPage.cursor ?? undefined,
+		enabled: !!item,
 		staleTime: 60 * 1000,
 	});
 }
 
 /**
- * Infinite query for decks containing a card
+ * Infinite query for decks containing a card.
+ * Auto-disables when item is undefined.
  */
-export function cardDeckBacklinksQueryOptions(itemUri: CardItemUri) {
+export function cardDeckBacklinksQueryOptions(item: CardItem | undefined) {
+	const itemUri = item ? getSocialItemUri(item) : undefined;
 	return infiniteQueryOptions({
 		queryKey: ["constellation", "deckBacklinks", itemUri] as const,
 		queryFn: async ({ pageParam }) => {
+			if (!itemUri) throw new Error("No item");
 			const result = await getBacklinks({
 				subject: itemUri,
 				source: buildSource(DECK_LIST_NSID, DECK_LIST_CARD_PATH),
···
 		},
 		initialPageParam: undefined as string | undefined,
 		getNextPageParam: (lastPage) => lastPage.cursor ?? undefined,
+		enabled: !!item,
 		staleTime: 60 * 1000,
 	});
 }
···
  * Prefetch social stats for an item (card or deck).
  * Use in route loaders to warm the cache before render.
  */
-export function prefetchSocialStats<T extends SocialItemType>(
+export function prefetchSocialStats(
 	queryClient: QueryClient,
-	itemUri: T extends "card" ? CardItemUri : DeckItemUri,
-	itemType: T,
+	item: SaveableItem,
 ) {
+	const cardItem = item.type === "card" ? item : undefined;
 	return Promise.all([
-		queryClient.prefetchQuery(itemSaveCountQueryOptions(itemUri, itemType)),
-		queryClient.prefetchQuery(itemLikeCountQueryOptions(itemUri, itemType)),
-		itemType === "card"
-			? queryClient.prefetchQuery(
-					cardDeckCountQueryOptions(itemUri as CardItemUri),
-				)
+		queryClient.prefetchQuery(itemSaveCountQueryOptions(item)),
+		queryClient.prefetchQuery(itemLikeCountQueryOptions(item)),
+		queryClient.prefetchQuery(itemCommentCountQueryOptions(item)),
+		cardItem
+			? queryClient.prefetchQuery(cardDeckCountQueryOptions(cardItem))
 			: null,
 	] as const);
 }
···
 // Comment Queries
 // ============================================================================
 
-function getCommentPathForItemType(itemType: SocialItemType): string {
+function getCommentPathForItemType(itemType: SaveableItemType): string {
 	return itemType === "card" ? COMMENT_CARD_PATH : COMMENT_RECORD_PATH;
 }
 
 /**
- * Query options for getting top-level comment count for an item
+ * Query options for getting top-level comment count for an item.
+ * Auto-disables when item is undefined.
  */
-export function itemCommentCountQueryOptions<T extends SocialItemType>(
-	itemUri: T extends "card" ? CardItemUri : DeckItemUri,
-	itemType: T,
-) {
+export function itemCommentCountQueryOptions(item: SaveableItem | undefined) {
+	const itemUri = item ? getSocialItemUri(item) : undefined;
+	const itemType = item?.type;
 	return queryOptions({
 		queryKey: ["constellation", "commentCount", itemUri] as const,
 		queryFn: async (): Promise<number> => {
+			if (!itemUri || !itemType) return 0;
+
 			const result = await getLinksCount({
 				target: itemUri,
 				collection: COMMENT_NSID,
···
 
 			return result.data.total;
 		},
+		enabled: !!item,
 		staleTime: 60 * 1000,
 	});
 }
 
 /**
- * Infinite query for top-level comments on an item (card or deck/collection)
+ * Infinite query for top-level comments on an item (card or deck/collection).
+ * Auto-disables when item is undefined.
  */
-export function itemCommentsQueryOptions<T extends SocialItemType>(
-	itemUri: T extends "card" ? CardItemUri : DeckItemUri,
-	itemType: T,
-) {
+export function itemCommentsQueryOptions(item: SaveableItem | undefined) {
+	const itemUri = item ? getSocialItemUri(item) : undefined;
 	return infiniteQueryOptions({
 		queryKey: ["constellation", "comments", itemUri] as const,
 		queryFn: async ({ pageParam }) => {
+			if (!item || !itemUri) throw new Error("No item");
 			const result = await getBacklinks({
 				subject: itemUri,
-				source: buildSource(COMMENT_NSID, getCommentPathForItemType(itemType)),
+				source: buildSource(COMMENT_NSID, getCommentPathForItemType(item.type)),
 				limit: 25,
 				cursor: pageParam,
 			});
···
 		},
 		initialPageParam: undefined as string | undefined,
 		getNextPageParam: (lastPage) => lastPage.cursor ?? undefined,
+		enabled: !!item,
 		staleTime: 60 * 1000,
 	});
 }

src/lib/like-queries.ts

···
 import type { ResourceUri } from "@atcute/lexicons";
 import { useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
-import { createLikeRecord, deleteLikeRecord } from "./atproto-client";
-import type { SaveItem } from "./collection-list-types";
+import {
+	createLikeRecord,
+	deleteLikeRecord,
+	hashToRkey,
+} from "./atproto-client";
 import { LIKE_NSID } from "./constellation-client";
 import { getConstellationQueryKeys } from "./constellation-queries";
 import type { ComDeckbelcherSocialLike } from "./lexicons/index";
···
 } from "./optimistic-utils";
 import type { OracleId, ScryfallId } from "./scryfall-types";
 import { toOracleUri, toScryfallUri } from "./scryfall-types";
+import {
+	getItemTypeName,
+	getSocialItemUri,
+	type SocialItem,
+} from "./social-item-types";
 import { useAuth } from "./useAuth";
 import { useMutationWithToast } from "./useMutationWithToast";
 
···
 }
 
 interface ToggleLikeParams {
-	item: SaveItem;
+	item: SocialItem;
 	isLiked: boolean;
 	itemName?: string;
 }
 
 /**
- * Mutation for toggling a like on a card or deck
+ * Build the like subject for any social item type.
+ * Cards use cardSubject, everything else uses recordSubject.
+ */
+function buildLikeSubject(item: SocialItem): LikeSubject {
+	if (item.type === "card") {
+		return buildCardSubject(item.scryfallId, item.oracleId);
+	}
+	// deck, comment, reply all use recordSubject with uri + cid
+	return buildRecordSubject(item.uri, item.cid);
+}
+
+/**
+ * Mutation for toggling a like on any social item (card, deck, comment, reply)
  * Handles optimistic updates for constellation queries
  */
 export function useLikeMutation() {
···
 				throw new Error("Must be authenticated to like");
 			}
 
-			let subject: LikeSubject;
-			if (params.item.type === "deck") {
-				subject = buildRecordSubject(params.item.uri, params.item.cid);
-			} else {
-				subject = buildCardSubject(
-					params.item.scryfallId,
-					params.item.oracleId,
-				);
-			}
+			const subject = buildLikeSubject(params.item);
 
 			if (params.isLiked) {
 				const result = await deleteLikeRecord(agent, subject);
···
 		},
 		onMutate: async (params: ToggleLikeParams) => {
 			const userDid = session?.info.sub;
-			const itemUri =
-				params.item.type === "deck"
-					? (params.item.uri as `at://${string}`)
-					: toOracleUri(params.item.oracleId);
+			const itemUri = getSocialItemUri(params.item);
 
 			const keys = getConstellationQueryKeys(itemUri, userDid);
 			const newLikedState = !params.isLiked;
+
+			// Compute the deterministic rkey from subject ref (same as create/delete)
+			const subject = buildLikeSubject(params.item);
+			const rkey = await hashToRkey(subject.ref);
 
 			const rollback = await runOptimistic([
 				optimisticToggle(
···
 					keys.likeCount,
 					newLikedState,
 				),
-				// rkey is deterministic (hash of subject) but empty is fine here
-				// since backlinks filtering is by did, not rkey
 				when(userDid, (did) =>
 					optimisticBacklinks(
 						queryClient,
···
 						{
 							did,
 							collection: LIKE_NSID,
-							rkey: "",
+							rkey,
 						},
 					),
 				),
···
 			context?.rollback();
 		},
 		onSuccess: (data, params) => {
-			const what =
-				params.itemName ?? (params.item.type === "card" ? "Card" : "Deck");
+			const what = params.itemName ?? getItemTypeName(params.item);
 			if (data.wasLiked) {
 				toast.success(`Unliked ${what}`);
 			} else {

src/lib/optimistic-utils.ts

···
 
 /**
  * Optimistically add or remove a record from a backlinks infinite query
- * Adds to first page, removes from any page
+ * Adds to first page (if cache exists), removes from any page.
+ * Does NOT seed empty cache - that would show incomplete data when the query is first fetched.
  */
 export function optimisticBacklinks(
 	queryClient: QueryClient,
···
 		queryClient.setQueryData<InfiniteData<BacklinksResponse>>(
 			queryKey,
 			(old) => {
+				// Don't modify cache if it doesn't exist - let the query fetch real data
+				if (!old) return old;
+
 				if (op === "remove") {
-					if (!old) return old;
 					return {
 						...old,
 						pages: old.pages.map((page, i) =>
···
 					};
 				}
 
-				// Add to first page, seed cache if empty
-				if (!old) {
-					return {
-						pages: [{ records: [record], total: 1 }],
-						pageParams: [undefined],
-					};
-				}
+				// Add to first page
 				return {
 					...old,
 					pages: old.pages.map((page, i) =>

src/lib/social-item-types.ts

···
+/**
+ * Type definitions for social items that can have engagement (likes, saves, comments)
+ * This is the single source of truth for polymorphic social item types.
+ */
+
+import type { OracleId, OracleUri, ScryfallId } from "./scryfall-types";
+import { toOracleUri } from "./scryfall-types";
+
+/**
+ * URI types for social items
+ * - Cards use oracle:<uuid> URIs (aggregates across printings)
+ * - Decks/comments/replies use at://<did>/<collection>/<rkey> URIs
+ */
+export type CardItemUri = OracleUri;
+export type DeckItemUri = `at://${string}`;
+export type CommentUri =
+	`at://${string}/com.deckbelcher.social.comment/${string}`;
+export type ReplyUri = `at://${string}/com.deckbelcher.social.reply/${string}`;
+
+/**
+ * SocialItem - ALL items that can have social engagement (likes)
+ * Discriminated union on 'type' field
+ */
+export type SocialItem =
+	| { type: "card"; scryfallId: ScryfallId; oracleId: OracleId }
+	| { type: "deck"; uri: DeckItemUri; 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
+ */
+export type SaveableItem = Extract<SocialItem, { type: "card" | "deck" }>;
+
+/**
+ * CardItem - narrowed to just cards (for deck-count queries, etc.)
+ */
+export type CardItem = Extract<SocialItem, { type: "card" }>;
+
+/**
+ * Type guard: checks if item can be saved to collection lists
+ */
+export function isSaveable(item: SocialItem): item is SaveableItem {
+	return item.type === "card" || item.type === "deck";
+}
+
+/**
+ * Type guard: checks if item has deck count (only cards)
+ */
+export function hasDeckCount(
+	item: SocialItem,
+): item is Extract<SocialItem, { type: "card" }> {
+	return item.type === "card";
+}
+
+/**
+ * SocialItemType discriminator values
+ */
+export type SocialItemType = SocialItem["type"];
+
+/**
+ * URI type for any social item (for Constellation queries)
+ */
+export type SocialItemUri = CardItemUri | DeckItemUri | CommentUri | ReplyUri;
+
+/**
+ * Saveable item types (can be saved to collection lists)
+ */
+export type SaveableItemType = "card" | "deck";
+
+/**
+ * Get the URI for any social item (used for Constellation queries)
+ * Overloads preserve type information based on item type.
+ */
+export function getSocialItemUri(
+	item: Extract<SocialItem, { type: "card" }>,
+): CardItemUri;
+export function getSocialItemUri(
+	item: Extract<SocialItem, { type: "deck" }>,
+): DeckItemUri;
+export function getSocialItemUri(
+	item: Extract<SocialItem, { type: "comment" }>,
+): CommentUri;
+export function getSocialItemUri(
+	item: Extract<SocialItem, { type: "reply" }>,
+): ReplyUri;
+export function getSocialItemUri(item: SaveableItem): CardItemUri | DeckItemUri;
+export function getSocialItemUri(item: SocialItem): SocialItemUri;
+export function getSocialItemUri(item: SocialItem): SocialItemUri {
+	switch (item.type) {
+		case "card":
+			return toOracleUri(item.oracleId);
+		case "deck":
+			return item.uri;
+		case "comment":
+			return item.uri;
+		case "reply":
+			return item.uri;
+	}
+}
+
+/**
+ * Get a human-readable name for an item type (for toasts)
+ */
+export function getItemTypeName(item: SocialItem): string {
+	switch (item.type) {
+		case "card":
+			return "Card";
+		case "deck":
+			return "Deck";
+		case "comment":
+			return "Comment";
+		case "reply":
+			return "Reply";
+	}
+}

src/routes/card/$id.tsx

···
 } from "@/lib/scryfall-types";
 import {
 	asOracleId,
+	asScryfallId,
 	isScryfallId,
 	toOracleUri,
 	toScryfallUri,
···
 		// Chain social stats off card (needs oracle_id), runs parallel with volatile
 		const socialPromise = cardPromise.then((card) => {
 			if (!card?.oracle_id) return;
-			const oracleUri = toOracleUri(asOracleId(card.oracle_id));
-			return prefetchSocialStats(context.queryClient, oracleUri, "card");
+			return prefetchSocialStats(context.queryClient, {
+				type: "card",
+				scryfallId: asScryfallId(params.id),
+				oracleId: asOracleId(card.oracle_id),
+			});
 		});
 
 		const [card] = await Promise.all([
···
 										$type: "com.deckbelcher.social.comment#cardSubject",
 										ref: {
 											oracleUri: toOracleUri(asOracleId(card.oracle_id)),
-											scryfallUri: toScryfallUri(id),
+											scryfallUri: toScryfallUri(asScryfallId(id)),
 										},
 									}}
-									subjectUri={toOracleUri(asOracleId(card.oracle_id))}
-									itemType="card"
+									item={{
+										type: "card",
+										scryfallId: asScryfallId(id),
+										oracleId: asOracleId(card.oracle_id),
+									}}
 									title={`Comments on ${card.name}`}
 								/>
 							</div>

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

···
 export const Route = createFileRoute("/profile/$did/deck/$rkey/")({
 	component: DeckEditorPage,
 	loader: async ({ context, params }) => {
-		const deckUri =
-			`at://${params.did}/${DECK_LIST_NSID}/${params.rkey}` as const;
-
-		// Start social stats prefetch immediately (only needs params)
-		const socialPromise = prefetchSocialStats(
-			context.queryClient,
-			deckUri,
-			"deck",
-		);
-
-		// Prefetch deck data, then cards (needs deck.cards)
-		const { deck } = await context.queryClient.ensureQueryData(
+		// Prefetch deck data first (need cid for social stats)
+		const { deck, cid } = await context.queryClient.ensureQueryData(
 			getDeckQueryOptions(params.did as Did, asRkey(params.rkey)),
 		);
 
+		const deckUri =
+			`at://${params.did}/${DECK_LIST_NSID}/${params.rkey}` as const;
+
+		// Prefetch cards and social stats in parallel
 		const cardIds = deck.cards.map((card) => card.scryfallId);
 		await Promise.all([
 			prefetchCards(context.queryClient, cardIds),
-			socialPromise,
+			prefetchSocialStats(context.queryClient, {
+				type: "deck",
+				uri: deckUri,
+				cid,
+			}),
 		]);
 
 		// Compute featured card for OG image using same logic as deck preview

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

···
 	isDeckItem,
 	type ListCardItem,
 	type ListDeckItem,
-	type SaveItem,
 } from "@/lib/collection-list-types";
 import { getDeckQueryOptions } from "@/lib/deck-queries";
 import { didDocumentQueryOptions, extractHandle } from "@/lib/did-to-handle";
···
 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 { useAuth } from "@/lib/useAuth";
 
 export const Route = createFileRoute("/profile/$did/list/$rkey/")({
···
 	}
 
 	const handleRemoveCard = (item: ListCardItem) => {
-		const saveItem: SaveItem = {
+		const saveItem: SaveableItem = {
 			type: "card",
 			scryfallId: item.scryfallId,
 			oracleId: item.oracleId,
···
 	};
 
 	const handleRemoveDeck = (item: ListDeckItem) => {
-		const saveItem: SaveItem = {
+		const saveItem: SaveableItem = {
 			type: "deck",
 			uri: item.ref.uri,
 			cid: item.ref.cid,