From a539de54a8d4eca83746231315a5ebc28669da8a Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Sun, 16 Aug 2026 04:43:43 +0200
Subject: [PATCH] lists

---
 src/lib/components/AddToListMenu.svelte    | 220 +++++++++++
 src/lib/components/CreateListDialog.svelte | 145 ++++++++
 src/lib/components/ItemPage.svelte         |   7 +-
 src/lib/components/ListCard.svelte         |   6 +-
 src/lib/components/ReviewDialog.svelte     |  40 +-
 src/lib/list-write.remote.ts               | 402 +++++++++++++++++++++
 src/lib/list.svelte.ts                     |  20 +
 src/lib/lists.server.ts                    |   2 +-
 src/lib/review-write.remote.ts             | 205 ++++++++++-
 src/routes/+layout.svelte                  |   2 +
 src/routes/profile/[actor]/+page.svelte    |   2 +-
 11 files changed, 1028 insertions(+), 23 deletions(-)
 create mode 100644 src/lib/components/AddToListMenu.svelte
 create mode 100644 src/lib/components/CreateListDialog.svelte
 create mode 100644 src/lib/list-write.remote.ts
 create mode 100644 src/lib/list.svelte.ts

diff --git a/src/lib/components/AddToListMenu.svelte b/src/lib/components/AddToListMenu.svelte
new file mode 100644
index 0000000..09bbe98
--- /dev/null
+++ b/src/lib/components/AddToListMenu.svelte
@@ -0,0 +1,220 @@
+<script lang="ts">
+	import { invalidateAll } from '$app/navigation';
+	import { DropdownMenu } from 'bits-ui';
+	import { untrack } from 'svelte';
+	import { posterUrl } from '$lib/images';
+	import { createListDialog } from '$lib/list.svelte';
+	import { loadListOptions, toggleListMembership } from '$lib/list-write.remote';
+	import { loginDialog } from '$lib/login.svelte';
+	import type { MediaSummary } from '$lib/types';
+
+	type ListOption = {
+		uri: string;
+		name: string;
+		selected: boolean;
+	};
+
+	let { item, did }: { item: MediaSummary; did: string | null } = $props();
+	let open = $state(false);
+	let lists = $state<ListOption[]>([]);
+	let loading = $state(false);
+	let pendingUris = $state<string[]>([]);
+	let listError = $state('');
+
+	function mediaInput() {
+		const imageUrl = posterUrl(item.poster, 'w500');
+		return {
+			creativeWorkType: item.creativeWorkType,
+			tmdbId: item.tmdbId,
+			title: item.title,
+			...(imageUrl ? { posterUrl: imageUrl } : {})
+		};
+	}
+
+	function handleOpenChange(nextOpen: boolean) {
+		if (nextOpen && !did) {
+			open = false;
+			loginDialog.show();
+			return;
+		}
+
+		open = nextOpen;
+	}
+
+	$effect(() => {
+		if (!open || !did) return;
+
+		lists = [];
+		loading = true;
+		listError = '';
+		let cancelled = false;
+		const request = untrack(() =>
+			loadListOptions({
+				creativeWorkType: item.creativeWorkType,
+				tmdbId: item.tmdbId
+			})
+		);
+
+		void request
+			.then((result) => {
+				if (!cancelled) lists = result.lists;
+			})
+			.catch((cause) => {
+				if (cancelled) return;
+				listError = cause instanceof Error ? cause.message : 'Could not load your lists.';
+			})
+			.finally(() => {
+				if (!cancelled) loading = false;
+			});
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	function setSelected(uri: string, selected: boolean) {
+		lists = lists.map((list) => (list.uri === uri ? { ...list, selected } : list));
+	}
+
+	async function toggleList(list: ListOption, selected: boolean) {
+		if (pendingUris.includes(list.uri) || selected === list.selected) return;
+
+		const previous = list.selected;
+		setSelected(list.uri, selected);
+		pendingUris = [...pendingUris, list.uri];
+		listError = '';
+
+		try {
+			await toggleListMembership({ media: mediaInput(), listUri: list.uri, selected });
+			void invalidateAll();
+		} catch (cause) {
+			setSelected(list.uri, previous);
+			listError = cause instanceof Error ? cause.message : 'Could not update the list.';
+		} finally {
+			pendingUris = pendingUris.filter((uri) => uri !== list.uri);
+		}
+	}
+
+	function showCreateListDialog() {
+		open = false;
+		window.setTimeout(() => createListDialog.show(item), 0);
+	}
+</script>
+
+<DropdownMenu.Root {open} onOpenChange={handleOpenChange}>
+	<DropdownMenu.Trigger
+		title="Add to list"
+		class="inline-flex size-9 items-center justify-center rounded-full border border-white/15 bg-white/[0.07] text-white backdrop-blur-sm transition-colors hover:bg-white/[0.12] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70 data-[state=open]:bg-white/[0.12]"
+	>
+		<svg
+			class="size-4 text-accent-400"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.8"
+			aria-hidden="true"
+		>
+			<path stroke-linecap="round" d="M16 5H3M11 12H3M16 19H3M18 9v6M21 12h-6" />
+		</svg>
+		<span class="sr-only">Add to list</span>
+	</DropdownMenu.Trigger>
+
+	<DropdownMenu.Portal>
+		<DropdownMenu.Content
+			side="bottom"
+			align="end"
+			sideOffset={8}
+			avoidCollisions={false}
+			loop={true}
+			class="z-100 w-64 max-w-[calc(100vw-2rem)] rounded-xl border border-white/10 bg-base-950/95 p-1.5 text-white shadow-2xl shadow-black/50 backdrop-blur-xl outline-none"
+		>
+			<DropdownMenu.Group aria-label="Your lists">
+				<DropdownMenu.GroupHeading class="px-2.5 py-2 text-xs font-semibold text-base-400">
+					add to list
+				</DropdownMenu.GroupHeading>
+
+				{#if loading}
+					<div class="flex items-center gap-2 px-2.5 py-3 text-sm text-base-400" aria-live="polite">
+						<svg
+							class="size-4 animate-spin"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							aria-hidden="true"
+						>
+							<path stroke-linecap="round" d="M21 12a9 9 0 1 1-6.22-8.56" />
+						</svg>
+						loading lists…
+					</div>
+				{:else if lists.length > 0}
+					<div class="max-h-48 overflow-y-auto">
+						{#each lists as list (list.uri)}
+							<DropdownMenu.CheckboxItem
+								checked={list.selected}
+								onCheckedChange={(checked) => void toggleList(list, checked)}
+								closeOnSelect={false}
+								disabled={pendingUris.includes(list.uri)}
+								textValue={list.name}
+								class="flex min-h-9 items-center gap-3 rounded-lg px-2.5 py-2 text-sm outline-none select-none data-disabled:opacity-50 data-highlighted:bg-white/10"
+							>
+								{#snippet children({ checked })}
+									<span class="min-w-0 flex-1 truncate">{list.name}</span>
+									<span class="flex size-4 shrink-0 items-center justify-center text-accent-400">
+										{#if pendingUris.includes(list.uri)}
+											<svg
+												class="size-3.5 animate-spin"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												aria-hidden="true"
+											>
+												<path stroke-linecap="round" d="M21 12a9 9 0 1 1-6.22-8.56" />
+											</svg>
+										{:else if checked}
+											<svg
+												class="size-4"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												aria-hidden="true"
+											>
+												<path stroke-linecap="round" stroke-linejoin="round" d="m5 12 4 4L19 6" />
+											</svg>
+										{/if}
+									</span>
+								{/snippet}
+							</DropdownMenu.CheckboxItem>
+						{/each}
+					</div>
+				{:else if !listError}
+					<div class="px-2.5 py-3 text-sm text-base-400">No lists yet.</div>
+				{/if}
+			</DropdownMenu.Group>
+
+			{#if listError}
+				<p class="px-2.5 py-2 text-xs text-red-300" role="alert">{listError}</p>
+			{/if}
+
+			<DropdownMenu.Separator class="my-1 h-px bg-white/10" />
+			<DropdownMenu.Item
+				onSelect={showCreateListDialog}
+				class="flex min-h-9 items-center gap-2 rounded-lg px-2.5 py-2 text-sm font-medium outline-none select-none data-highlighted:bg-white/10"
+			>
+				<svg
+					class="size-4 text-accent-400"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					aria-hidden="true"
+				>
+					<path stroke-linecap="round" d="M12 5v14M5 12h14" />
+				</svg>
+				new list
+			</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</DropdownMenu.Portal>
+</DropdownMenu.Root>
diff --git a/src/lib/components/CreateListDialog.svelte b/src/lib/components/CreateListDialog.svelte
new file mode 100644
index 0000000..dd0f499
--- /dev/null
+++ b/src/lib/components/CreateListDialog.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { invalidateAll } from '$app/navigation';
+	import { Dialog } from 'bits-ui';
+	import { X } from '@lucide/svelte';
+	import { posterUrl } from '$lib/images';
+	import { createListDialog } from '$lib/list.svelte';
+	import { createListWithItem } from '$lib/list-write.remote';
+
+	let name = $state('');
+	let description = $state('');
+	let saving = $state(false);
+	let saved = $state(false);
+	let listError = $state('');
+
+	$effect(() => {
+		if (!createListDialog.open || !createListDialog.item) return;
+
+		name = '';
+		description = '';
+		saving = false;
+		saved = false;
+		listError = '';
+	});
+
+	function markChanged() {
+		saved = false;
+		listError = '';
+	}
+
+	async function createList(event: SubmitEvent) {
+		event.preventDefault();
+		const item = createListDialog.item;
+		if (!item || !name.trim() || saving) return;
+
+		saving = true;
+		saved = false;
+		listError = '';
+
+		try {
+			const imageUrl = posterUrl(item.poster, 'w500');
+			await createListWithItem({
+				media: {
+					creativeWorkType: item.creativeWorkType,
+					tmdbId: item.tmdbId,
+					title: item.title,
+					...(imageUrl ? { posterUrl: imageUrl } : {})
+				},
+				name,
+				description
+			});
+			saved = true;
+			void invalidateAll();
+			window.setTimeout(() => createListDialog.hide(), 500);
+		} catch (cause) {
+			listError = cause instanceof Error ? cause.message : 'Could not create list.';
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+<Dialog.Root
+	bind:open={createListDialog.open}
+	onOpenChange={(open) => !open && createListDialog.hide()}
+>
+	<Dialog.Portal>
+		<Dialog.Overlay class="fixed inset-0 z-100 bg-black/75 backdrop-blur-md" />
+		<Dialog.Content
+			class="fixed top-1/2 left-1/2 z-101 w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-xl border border-white/10 bg-base-950 p-5 text-white shadow-2xl outline-none"
+		>
+			<Dialog.Title class="text-sm font-semibold">new list</Dialog.Title>
+			<Dialog.Description class="sr-only">
+				Create a list and add this movie or TV show to it.
+			</Dialog.Description>
+
+			<Dialog.Close
+				class="absolute top-3 right-3 inline-flex size-7 items-center justify-center rounded-full text-base-400 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/70"
+			>
+				<X class="size-4" strokeWidth={1.5} aria-hidden="true" />
+				<span class="sr-only">Close new list</span>
+			</Dialog.Close>
+
+			{#if createListDialog.item}
+				<div class="mt-5 flex items-center gap-4">
+					<div class="h-24 w-16 shrink-0 overflow-hidden rounded-md bg-base-900">
+						{#if createListDialog.item.poster}
+							<img
+								src={posterUrl(createListDialog.item.poster, 'w185')}
+								alt="Poster for {createListDialog.item.title}"
+								class="size-full object-cover"
+							/>
+						{/if}
+					</div>
+					<div class="min-w-0">
+						<div class="truncate font-semibold">{createListDialog.item.title}</div>
+						<div class="mt-1 text-xs text-base-400">
+							{createListDialog.item.creativeWorkType === 'tv_show' ? 'TV series' : 'Movie'}
+						</div>
+					</div>
+				</div>
+
+				<form onsubmit={createList} class="mt-4">
+					<label for="list-name" class="text-xs font-medium text-base-300">title</label>
+					<input
+						id="list-name"
+						type="text"
+						bind:value={name}
+						oninput={markChanged}
+						disabled={saving || saved}
+						required
+						maxlength="100"
+						placeholder="list title"
+						class="mt-2 block h-9 w-full rounded-lg border border-white/10 bg-base-900 px-3 text-sm text-white outline-none placeholder:text-base-500 focus:border-white/25 focus:ring-0 disabled:cursor-wait"
+					/>
+
+					<label for="list-description" class="mt-4 block text-xs font-medium text-base-300"
+						>description</label
+					>
+					<textarea
+						id="list-description"
+						bind:value={description}
+						oninput={markChanged}
+						disabled={saving || saved}
+						rows="3"
+						maxlength="500"
+						placeholder="optional"
+						class="mt-2 block w-full resize-none rounded-lg border border-white/10 bg-base-900 px-3 py-2 text-sm text-white outline-none placeholder:text-base-500 focus:border-white/25 focus:ring-0 disabled:cursor-wait"
+					></textarea>
+
+					{#if listError}
+						<p class="mt-3 text-sm text-red-300" role="alert">{listError}</p>
+					{/if}
+
+					<button
+						type="submit"
+						disabled={!name.trim() || saving || saved}
+						class="mt-4 inline-flex h-9 w-full items-center justify-center rounded-lg border border-accent-900 bg-accent-950/80 text-sm font-semibold text-accent-300 transition-colors hover:bg-accent-950 disabled:cursor-not-allowed disabled:opacity-40"
+					>
+						{saving ? 'creating…' : saved ? 'created' : 'create list'}
+					</button>
+				</form>
+			{/if}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
diff --git a/src/lib/components/ItemPage.svelte b/src/lib/components/ItemPage.svelte
index bca9959..25ededa 100644
--- a/src/lib/components/ItemPage.svelte
+++ b/src/lib/components/ItemPage.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
+	import AddToListMenu from './AddToListMenu.svelte';
 	import Avatar from './Avatar.svelte';
 	import BackdropGallery from './BackdropGallery.svelte';
 	import Container from './Container.svelte';
@@ -213,9 +214,10 @@
 				</h1>
 
 				<div
-					class="hidden shrink-0 lg:col-start-2 lg:row-start-2 lg:flex lg:items-center lg:justify-end lg:justify-self-end"
+					class="hidden shrink-0 gap-2 lg:col-start-2 lg:row-start-2 lg:flex lg:items-center lg:justify-end lg:justify-self-end"
 				>
 					{@render reviewButton()}
+					<AddToListMenu item={data.item} did={data.did} />
 				</div>
 			</header>
 
@@ -227,8 +229,9 @@
 					imdbVotes={data.imdb_votes}
 					ratings={data.ratings}
 				/>
-				<div class="ml-auto">
+				<div class="ml-auto flex gap-2">
 					{@render reviewButton()}
+					<AddToListMenu item={data.item} did={data.did} />
 				</div>
 			</div>
 
diff --git a/src/lib/components/ListCard.svelte b/src/lib/components/ListCard.svelte
index 6d92b01..cbb49e3 100644
--- a/src/lib/components/ListCard.svelte
+++ b/src/lib/components/ListCard.svelte
@@ -18,15 +18,15 @@
 		class="block rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-400"
 	>
 		<div
-			class="grid h-32 grid-cols-4 gap-1 overflow-hidden rounded-lg bg-base-900 p-1 transition-opacity group-hover:opacity-75 sm:h-36"
+			class="flex h-24 gap-1 overflow-hidden rounded-lg bg-base-900 p-1 transition-opacity group-hover:opacity-75"
 		>
 			{#each list.previewItems as item, index (`${item.creativeWorkType}:${item.tmdbId}:${index}`)}
-				<div class="min-w-0 overflow-hidden rounded-sm bg-base-800">
+				<div class="aspect-2/3 h-full shrink-0 overflow-hidden rounded-sm bg-base-800">
 					{#if item.poster}
 						<img
 							src={posterUrl(item.poster, 'w185')}
 							alt=""
-							class="size-full object-cover"
+							class="size-full object-contain"
 							loading="lazy"
 						/>
 					{/if}
diff --git a/src/lib/components/ReviewDialog.svelte b/src/lib/components/ReviewDialog.svelte
index 23c5815..e1b3c42 100644
--- a/src/lib/components/ReviewDialog.svelte
+++ b/src/lib/components/ReviewDialog.svelte
@@ -11,6 +11,7 @@
 	let rating = $state(0);
 	let review = $state('');
 	let containsSpoilers = $state(false);
+	let markAsWatched = $state(true);
 	let loading = $state(false);
 	let saving = $state(false);
 	let saved = $state(false);
@@ -23,6 +24,7 @@
 		rating = 0;
 		review = '';
 		containsSpoilers = false;
+		markAsWatched = true;
 		loading = true;
 		saving = false;
 		saved = false;
@@ -99,7 +101,8 @@
 				},
 				rating,
 				text: review,
-				containsSpoilers
+				containsSpoilers,
+				markAsWatched
 			});
 			saved = true;
 			void invalidateAll();
@@ -122,7 +125,7 @@
 		>
 			<Dialog.Title class="text-sm font-semibold">rate & review</Dialog.Title>
 			<Dialog.Description class="sr-only">
-				Choose a star rating and optionally write a review.
+				Choose a star rating, optionally write a review, and mark this title as watched.
 			</Dialog.Description>
 
 			<Dialog.Close
@@ -168,16 +171,29 @@
 						class="mt-4 block w-full resize-none rounded-lg border border-white/10 bg-base-900 px-3 py-2 text-sm text-white outline-none placeholder:text-base-500 focus:border-white/25 focus:ring-0 disabled:cursor-wait"
 					></textarea>
 
-					<label class="mt-3 flex w-fit cursor-pointer items-center gap-2 text-xs text-base-300">
-						<input
-							type="checkbox"
-							bind:checked={containsSpoilers}
-							onchange={markChanged}
-							disabled={loading || saving}
-							class="size-4 rounded border-base-700 bg-base-900 text-accent-500 focus:ring-2 focus:ring-accent-500/40 focus:ring-offset-0"
-						/>
-						contains spoilers
-					</label>
+					<div class="mt-3 flex flex-wrap gap-x-5 gap-y-2">
+						<label class="flex w-fit cursor-pointer items-center gap-2 text-xs text-base-300">
+							<input
+								type="checkbox"
+								bind:checked={markAsWatched}
+								onchange={markChanged}
+								disabled={loading || saving}
+								class="size-4 rounded border-base-700 bg-base-900 text-accent-500 focus:ring-2 focus:ring-accent-500/40 focus:ring-offset-0"
+							/>
+							mark as watched
+						</label>
+
+						<label class="flex w-fit cursor-pointer items-center gap-2 text-xs text-base-300">
+							<input
+								type="checkbox"
+								bind:checked={containsSpoilers}
+								onchange={markChanged}
+								disabled={loading || saving}
+								class="size-4 rounded border-base-700 bg-base-900 text-accent-500 focus:ring-2 focus:ring-accent-500/40 focus:ring-offset-0"
+							/>
+							contains spoilers
+						</label>
+					</div>
 				</div>
 
 				{#if reviewError}
diff --git a/src/lib/list-write.remote.ts b/src/lib/list-write.remote.ts
new file mode 100644
index 0000000..3d09ce6
--- /dev/null
+++ b/src/lib/list-write.remote.ts
@@ -0,0 +1,402 @@
+import { command, getRequestEvent } from '$app/server';
+import { error } from '@sveltejs/kit';
+import { createTID } from '@svelte-atproto/oauth/helper';
+import type { Client } from '@atcute/client';
+import { isCanonicalResourceUri, parseCanonicalResourceUri } from '@atcute/lexicons';
+import type { CanonicalResourceUri, Did, Nsid } from '@atcute/lexicons';
+import * as v from 'valibot';
+import { contrail } from '$lib/contrail';
+import type { Main as ListRecord } from '$lib/contrail/types/types/social/popfeed/feed/list';
+import type { Main as ListItemRecord } from '$lib/contrail/types/types/social/popfeed/feed/listItem';
+import { backdropUrl } from '$lib/images';
+import { getReviewRecordMetadata } from '$lib/tmdb.server';
+
+const LIST_COLLECTION = 'social.popfeed.feed.list';
+const LIST_ITEM_COLLECTION = 'social.popfeed.feed.listItem';
+const MAX_POSTER_SIZE = 2_000_000;
+
+function isAllowedPosterUrl(value: string) {
+	const url = new URL(value);
+	return (
+		url.protocol === 'https:' &&
+		url.hostname === 'image.tmdb.org' &&
+		url.pathname.startsWith('/t/p/')
+	);
+}
+
+const mediaIdentitySchema = v.object({
+	creativeWorkType: v.picklist(['movie', 'tv_show']),
+	tmdbId: v.pipe(v.number(), v.integer(), v.minValue(1))
+});
+
+const mediaSchema = v.object({
+	...mediaIdentitySchema.entries,
+	title: v.pipe(v.string(), v.trim(), v.minLength(1), v.maxLength(1000)),
+	posterUrl: v.optional(
+		v.pipe(
+			v.string(),
+			v.url(),
+			v.maxLength(2048),
+			v.check(isAllowedPosterUrl, 'Poster must use the TMDB image service')
+		)
+	)
+});
+
+const listUriSchema = v.pipe(
+	v.string(),
+	v.maxLength(500),
+	v.check((value: string) => {
+		if (!isCanonicalResourceUri(value)) return false;
+		return parseCanonicalResourceUri(value).collection === LIST_COLLECTION;
+	}, 'Invalid list URI')
+);
+
+const toggleListMembershipSchema = v.object({
+	media: mediaSchema,
+	listUri: listUriSchema,
+	selected: v.boolean()
+});
+
+const createListWithItemSchema = v.object({
+	media: mediaSchema,
+	name: v.pipe(v.string(), v.trim(), v.minLength(1), v.maxLength(100)),
+	description: v.pipe(v.string(), v.trim(), v.maxLength(500))
+});
+
+type RepoRecord = {
+	uri: string;
+	cid: string;
+	value: unknown;
+};
+
+type StoredListValue = {
+	$type?: unknown;
+	name?: unknown;
+	listType?: unknown;
+	[key: string]: unknown;
+};
+
+type StoredListItemValue = {
+	$type?: unknown;
+	listUri?: unknown;
+	creativeWorkType?: unknown;
+	identifiers?: { tmdbId?: unknown; [key: string]: unknown };
+	[key: string]: unknown;
+};
+
+type StoredList = {
+	uri: CanonicalResourceUri;
+	name: string;
+	listType?: string;
+};
+
+type StoredListItem = {
+	cid: string;
+	rkey: string;
+	value: StoredListItemValue;
+};
+
+type PreparedListItem = {
+	metadata: Awaited<ReturnType<typeof getReviewRecordMetadata>>;
+	poster?: Awaited<ReturnType<typeof uploadPoster>>;
+};
+
+function responseMessage(data: unknown, fallback: string) {
+	if (data && typeof data === 'object' && 'message' in data && typeof data.message === 'string') {
+		return data.message;
+	}
+	return fallback;
+}
+
+function requireSession() {
+	const { locals } = getRequestEvent();
+	if (!locals.client || !locals.did) error(401, 'Log in to manage lists');
+	return { client: locals.client, did: locals.did };
+}
+
+function isOwnedRecordUri(
+	value: string,
+	did: Did,
+	collection: Nsid
+): value is CanonicalResourceUri {
+	if (!isCanonicalResourceUri(value)) return false;
+	const parsed = parseCanonicalResourceUri(value);
+	return parsed.repo === did && parsed.collection === collection;
+}
+
+async function loadRepoRecords(client: Client, did: Did, collection: Nsid) {
+	const records: RepoRecord[] = [];
+	let cursor: string | undefined;
+
+	do {
+		const response = await client.get('com.atproto.repo.listRecords', {
+			params: { repo: did, collection, cursor, limit: 100, reverse: true }
+		});
+		if (!response.ok) {
+			error(response.status, responseMessage(response.data, 'Could not load your lists'));
+		}
+
+		records.push(...response.data.records);
+		cursor = response.data.cursor;
+	} while (cursor);
+
+	return records;
+}
+
+function toStoredLists(records: RepoRecord[], did: Did) {
+	return records.flatMap((record): StoredList[] => {
+		const value = record.value as StoredListValue;
+		if (
+			value.$type !== LIST_COLLECTION ||
+			typeof value.name !== 'string' ||
+			!isOwnedRecordUri(record.uri, did, LIST_COLLECTION)
+		) {
+			return [];
+		}
+
+		return [
+			{
+				uri: record.uri,
+				name: value.name.trim() || 'Untitled list',
+				...(typeof value.listType === 'string' && value.listType
+					? { listType: value.listType }
+					: {})
+			}
+		];
+	});
+}
+
+function toStoredListItems(records: RepoRecord[], did: Did) {
+	return records.flatMap((record): StoredListItem[] => {
+		const value = record.value as StoredListItemValue;
+		if (
+			value.$type !== LIST_ITEM_COLLECTION ||
+			!isOwnedRecordUri(record.uri, did, LIST_ITEM_COLLECTION)
+		) {
+			return [];
+		}
+
+		return [
+			{
+				cid: record.cid,
+				rkey: parseCanonicalResourceUri(record.uri).rkey,
+				value
+			}
+		];
+	});
+}
+
+async function loadListData(client: Client, did: Did) {
+	const [listRecords, itemRecords] = await Promise.all([
+		loadRepoRecords(client, did, LIST_COLLECTION),
+		loadRepoRecords(client, did, LIST_ITEM_COLLECTION)
+	]);
+
+	return {
+		lists: toStoredLists(listRecords, did),
+		items: toStoredListItems(itemRecords, did)
+	};
+}
+
+function isMediaItem(item: StoredListItem, media: v.InferOutput<typeof mediaIdentitySchema>) {
+	return (
+		item.value.creativeWorkType === media.creativeWorkType &&
+		item.value.identifiers?.tmdbId === String(media.tmdbId)
+	);
+}
+
+async function uploadPoster(client: Client, posterUrl: string) {
+	let response: Response;
+	try {
+		response = await fetch(posterUrl, {
+			headers: { accept: 'image/avif,image/webp,image/png,image/jpeg' },
+			signal: AbortSignal.timeout(15_000)
+		});
+	} catch {
+		error(502, 'Could not download the poster image');
+	}
+
+	if (!response.ok) error(502, 'Could not download the poster image');
+	if (!isAllowedPosterUrl(response.url)) error(502, 'The poster image redirected unexpectedly');
+
+	const contentType = response.headers.get('content-type')?.split(';', 1)[0].trim().toLowerCase();
+	if (!contentType?.startsWith('image/')) error(422, 'The poster URL did not return an image');
+
+	const declaredSize = Number(response.headers.get('content-length'));
+	if (Number.isFinite(declaredSize) && declaredSize > MAX_POSTER_SIZE) {
+		error(413, 'The poster image is too large');
+	}
+
+	const bytes = await response.arrayBuffer();
+	if (bytes.byteLength > MAX_POSTER_SIZE) error(413, 'The poster image is too large');
+
+	const upload = await client.post('com.atproto.repo.uploadBlob', {
+		input: new Blob([bytes], { type: contentType })
+	});
+	if (!upload.ok) {
+		error(upload.status, responseMessage(upload.data, 'Could not upload the poster image'));
+	}
+
+	return upload.data.blob;
+}
+
+async function prepareListItem(
+	client: Client,
+	media: v.InferOutput<typeof mediaSchema>
+): Promise<PreparedListItem> {
+	let metadata: PreparedListItem['metadata'];
+	try {
+		metadata = await getReviewRecordMetadata(media.tmdbId, media.creativeWorkType);
+	} catch {
+		error(502, 'Could not load the media details needed to update your lists');
+	}
+
+	return {
+		metadata,
+		...(media.posterUrl ? { poster: await uploadPoster(client, media.posterUrl) } : {})
+	};
+}
+
+async function createList(
+	client: Client,
+	did: Did,
+	name: string,
+	description: string
+): Promise<StoredList> {
+	const response = await contrail.authenticated(client).post('com.atproto.repo.createRecord', {
+		input: {
+			repo: did,
+			collection: LIST_COLLECTION,
+			rkey: createTID(),
+			record: {
+				$type: LIST_COLLECTION,
+				name,
+				...(description ? { description } : {}),
+				createdAt: new Date().toISOString(),
+				ordered: false,
+				tags: []
+			} as ListRecord
+		}
+	});
+	if (!response.ok) {
+		error(response.status, responseMessage(response.data, 'Could not create list'));
+	}
+	if (!isOwnedRecordUri(response.data.uri, did, LIST_COLLECTION)) {
+		error(502, 'The list returned an invalid URI');
+	}
+
+	return { uri: response.data.uri, name };
+}
+
+async function createListItem(
+	client: Client,
+	did: Did,
+	list: StoredList,
+	media: v.InferOutput<typeof mediaSchema>,
+	prepared: PreparedListItem
+) {
+	const { metadata, poster } = prepared;
+	const record = {
+		$type: LIST_ITEM_COLLECTION,
+		listUri: list.uri,
+		...(list.listType ? { listType: list.listType } : {}),
+		identifiers: {
+			tmdbId: String(media.tmdbId),
+			...(metadata.imdbId ? { imdbId: metadata.imdbId } : {})
+		},
+		creativeWorkType: media.creativeWorkType,
+		title: metadata.title,
+		addedAt: new Date().toISOString(),
+		genres: metadata.genres,
+		...(poster ? { poster } : {}),
+		...(media.posterUrl ? { posterUrl: media.posterUrl } : {}),
+		...(backdropUrl(metadata.backdrop, 'original')
+			? { backdropUrl: backdropUrl(metadata.backdrop, 'original') }
+			: {}),
+		...(metadata.releaseDate ? { releaseDate: metadata.releaseDate } : {}),
+		...(metadata.mainCredit ? { mainCredit: metadata.mainCredit } : {}),
+		...(metadata.mainCreditRole ? { mainCreditRole: metadata.mainCreditRole } : {})
+	} as ListItemRecord;
+
+	const response = await contrail.authenticated(client).post('com.atproto.repo.createRecord', {
+		input: {
+			repo: did,
+			collection: LIST_ITEM_COLLECTION,
+			rkey: createTID(),
+			record
+		}
+	});
+	if (!response.ok) {
+		error(response.status, responseMessage(response.data, 'Could not add item to list'));
+	}
+
+	return response.data.uri;
+}
+
+async function deleteListItems(client: Client, did: Did, items: StoredListItem[]) {
+	const authenticated = contrail.authenticated(client);
+	for (const item of items) {
+		const response = await authenticated.post('com.atproto.repo.deleteRecord', {
+			input: {
+				repo: did,
+				collection: LIST_ITEM_COLLECTION,
+				rkey: item.rkey,
+				swapRecord: item.cid
+			},
+			as: null
+		});
+		if (!response.ok) {
+			error(response.status, responseMessage(response.data, 'Could not remove item from list'));
+		}
+	}
+}
+
+export const loadListOptions = command(mediaIdentitySchema, async (media) => {
+	const { client, did } = requireSession();
+	const { lists, items } = await loadListData(client, did);
+	const selectedUris = new Set(
+		items.filter((item) => isMediaItem(item, media)).map((item) => item.value.listUri)
+	);
+
+	return {
+		lists: lists.map((list) => ({
+			uri: list.uri,
+			name: list.name,
+			selected: selectedUris.has(list.uri)
+		}))
+	};
+});
+
+export const toggleListMembership = command(
+	toggleListMembershipSchema,
+	async ({ media, listUri, selected }) => {
+		const { client, did } = requireSession();
+		const { lists, items } = await loadListData(client, did);
+		const list = lists.find((candidate) => candidate.uri === listUri);
+		if (!list) error(404, 'List not found');
+
+		const matchingItems = items.filter(
+			(item) => item.value.listUri === list.uri && isMediaItem(item, media)
+		);
+
+		if (selected && matchingItems.length === 0) {
+			await createListItem(client, did, list, media, await prepareListItem(client, media));
+		} else if (!selected && matchingItems.length > 0) {
+			await deleteListItems(client, did, matchingItems);
+		}
+
+		return { selected };
+	}
+);
+
+export const createListWithItem = command(
+	createListWithItemSchema,
+	async ({ media, name, description }) => {
+		const { client, did } = requireSession();
+		const prepared = await prepareListItem(client, media);
+		const list = await createList(client, did, name, description);
+		await createListItem(client, did, list, media, prepared);
+
+		return { uri: list.uri, name: list.name, selected: true };
+	}
+);
diff --git a/src/lib/list.svelte.ts b/src/lib/list.svelte.ts
new file mode 100644
index 0000000..87e2f56
--- /dev/null
+++ b/src/lib/list.svelte.ts
@@ -0,0 +1,20 @@
+import type { MediaSummary } from './types';
+
+export const createListDialog: {
+	open: boolean;
+	item: MediaSummary | undefined;
+	show: (item: MediaSummary) => void;
+	hide: () => void;
+} = $state({
+	open: false,
+	item: undefined,
+
+	show: (item) => {
+		createListDialog.item = item;
+		createListDialog.open = true;
+	},
+
+	hide: () => {
+		createListDialog.open = false;
+	}
+});
diff --git a/src/lib/lists.server.ts b/src/lib/lists.server.ts
index 175e4e8..9797506 100644
--- a/src/lib/lists.server.ts
+++ b/src/lib/lists.server.ts
@@ -78,7 +78,7 @@ function buildList(
 			ordered: record.value.ordered ?? false,
 			createdAt: record.value.createdAt,
 			itemCount: items.length,
-			previewItems: items.slice(0, 4)
+			previewItems: items.slice(0, 10)
 		},
 		items
 	};
diff --git a/src/lib/review-write.remote.ts b/src/lib/review-write.remote.ts
index 1e98dbf..8a5b1a6 100644
--- a/src/lib/review-write.remote.ts
+++ b/src/lib/review-write.remote.ts
@@ -3,14 +3,18 @@ import { error } from '@sveltejs/kit';
 import { createTID } from '@svelte-atproto/oauth/helper';
 import type { Client } from '@atcute/client';
 import { isCanonicalResourceUri, parseCanonicalResourceUri } from '@atcute/lexicons';
-import type { Did } from '@atcute/lexicons';
+import type { CanonicalResourceUri, Did } from '@atcute/lexicons';
 import * as v from 'valibot';
 import { contrail } from '$lib/contrail';
+import type { Main as ListRecord } from '$lib/contrail/types/types/social/popfeed/feed/list';
+import type { Main as ListItemRecord } from '$lib/contrail/types/types/social/popfeed/feed/listItem';
 import type { Main as ReviewRecord } from '$lib/contrail/types/types/social/popfeed/feed/review';
 import { backdropUrl } from '$lib/images';
 import { getReviewRecordMetadata } from '$lib/tmdb.server';
 
 const REVIEW_COLLECTION = 'social.popfeed.feed.review';
+const LIST_COLLECTION = 'social.popfeed.feed.list';
+const LIST_ITEM_COLLECTION = 'social.popfeed.feed.listItem';
 const MAX_POSTER_SIZE = 2_000_000;
 
 function isAllowedPosterUrl(value: string) {
@@ -44,7 +48,8 @@ const saveReviewSchema = v.object({
 	media: mediaSchema,
 	rating: v.pipe(v.number(), v.integer(), v.minValue(1), v.maxValue(10)),
 	text: v.pipe(v.string(), v.trim(), v.maxLength(1000)),
-	containsSpoilers: v.boolean()
+	containsSpoilers: v.boolean(),
+	markAsWatched: v.boolean()
 });
 
 type StoredReviewValue = {
@@ -74,6 +79,13 @@ type StoredReview = {
 	value: StoredReviewValue;
 };
 
+type WatchedList = {
+	uri: CanonicalResourceUri;
+	listType?: string;
+};
+
+type MediaRecordMetadata = Awaited<ReturnType<typeof getReviewRecordMetadata>>;
+
 function responseMessage(data: unknown, fallback: string) {
 	if (data && typeof data === 'object' && 'message' in data && typeof data.message === 'string') {
 		return data.message;
@@ -122,6 +134,187 @@ async function uploadPoster(client: Client, posterUrl: string) {
 	return upload.data.blob;
 }
 
+async function findWatchedList(
+	client: Client,
+	did: Did,
+	name: string
+): Promise<WatchedList | null> {
+	let cursor: string | undefined;
+
+	do {
+		const response = await client.get('com.atproto.repo.listRecords', {
+			params: {
+				repo: did,
+				collection: LIST_COLLECTION,
+				cursor,
+				limit: 100,
+				reverse: true
+			}
+		});
+		if (!response.ok) {
+			error(response.status, responseMessage(response.data, 'Could not load your lists'));
+		}
+
+		for (const record of response.data.records) {
+			const value = record.value as { $type?: unknown; name?: unknown; listType?: unknown };
+			if (
+				value.$type !== LIST_COLLECTION ||
+				typeof value.name !== 'string' ||
+				value.name.trim() !== name ||
+				!isCanonicalResourceUri(record.uri)
+			) {
+				continue;
+			}
+
+			const parsed = parseCanonicalResourceUri(record.uri);
+			if (parsed.repo !== did || parsed.collection !== LIST_COLLECTION) continue;
+
+			return {
+				uri: record.uri,
+				...(typeof value.listType === 'string' && value.listType
+					? { listType: value.listType }
+					: {})
+			};
+		}
+
+		cursor = response.data.cursor;
+	} while (cursor);
+
+	return null;
+}
+
+async function hasListItem(
+	client: Client,
+	did: Did,
+	listUri: CanonicalResourceUri,
+	media: v.InferOutput<typeof mediaIdentitySchema>
+) {
+	let cursor: string | undefined;
+
+	do {
+		const response = await client.get('com.atproto.repo.listRecords', {
+			params: {
+				repo: did,
+				collection: LIST_ITEM_COLLECTION,
+				cursor,
+				limit: 100,
+				reverse: true
+			}
+		});
+		if (!response.ok) {
+			error(response.status, responseMessage(response.data, 'Could not load your list items'));
+		}
+
+		for (const record of response.data.records) {
+			const value = record.value as {
+				$type?: unknown;
+				listUri?: unknown;
+				creativeWorkType?: unknown;
+				identifiers?: { tmdbId?: unknown };
+			};
+			if (
+				value.$type === LIST_ITEM_COLLECTION &&
+				value.listUri === listUri &&
+				value.creativeWorkType === media.creativeWorkType &&
+				value.identifiers?.tmdbId === String(media.tmdbId)
+			) {
+				return true;
+			}
+		}
+
+		cursor = response.data.cursor;
+	} while (cursor);
+
+	return false;
+}
+
+async function createWatchedList(client: Client, did: Did, name: string): Promise<WatchedList> {
+	const response = await contrail.authenticated(client).post('com.atproto.repo.createRecord', {
+		input: {
+			repo: did,
+			collection: LIST_COLLECTION,
+			rkey: createTID(),
+			record: {
+				$type: LIST_COLLECTION,
+				name,
+				listType: 'watched',
+				createdAt: new Date().toISOString(),
+				ordered: false,
+				tags: []
+			} as ListRecord
+		}
+	});
+	if (!response.ok) {
+		error(response.status, responseMessage(response.data, 'Could not create watched list'));
+	}
+	if (!isCanonicalResourceUri(response.data.uri)) error(502, 'The list returned an invalid URI');
+
+	const parsed = parseCanonicalResourceUri(response.data.uri);
+	if (parsed.repo !== did || parsed.collection !== LIST_COLLECTION) {
+		error(502, 'The list returned an invalid URI');
+	}
+
+	return { uri: response.data.uri, listType: 'watched' };
+}
+
+async function addToWatchedList({
+	client,
+	did,
+	media,
+	metadata,
+	poster
+}: {
+	client: Client;
+	did: Did;
+	media: v.InferOutput<typeof mediaSchema>;
+	metadata: MediaRecordMetadata;
+	poster: unknown;
+}) {
+	const listName = media.creativeWorkType === 'movie' ? 'Watched Movies' : 'Watched Shows';
+	let list = await findWatchedList(client, did, listName);
+	if (list && (await hasListItem(client, did, list.uri, media))) return false;
+
+	list ??= await createWatchedList(client, did, listName);
+	const watchedAt = new Date().toISOString();
+	const record = {
+		$type: LIST_ITEM_COLLECTION,
+		listUri: list.uri,
+		...(list.listType ? { listType: list.listType } : {}),
+		identifiers: {
+			tmdbId: String(media.tmdbId),
+			...(metadata.imdbId ? { imdbId: metadata.imdbId } : {})
+		},
+		creativeWorkType: media.creativeWorkType,
+		title: metadata.title,
+		addedAt: watchedAt,
+		completedAt: watchedAt,
+		status: '#finished',
+		genres: metadata.genres,
+		...(poster ? { poster } : {}),
+		...(media.posterUrl ? { posterUrl: media.posterUrl } : {}),
+		...(backdropUrl(metadata.backdrop, 'original')
+			? { backdropUrl: backdropUrl(metadata.backdrop, 'original') }
+			: {}),
+		...(metadata.releaseDate ? { releaseDate: metadata.releaseDate } : {}),
+		...(metadata.mainCredit ? { mainCredit: metadata.mainCredit } : {}),
+		...(metadata.mainCreditRole ? { mainCreditRole: metadata.mainCreditRole } : {})
+	} as ListItemRecord;
+
+	const response = await contrail.authenticated(client).post('com.atproto.repo.createRecord', {
+		input: {
+			repo: did,
+			collection: LIST_ITEM_COLLECTION,
+			rkey: createTID(),
+			record
+		}
+	});
+	if (!response.ok) {
+		error(response.status, responseMessage(response.data, 'Could not mark as watched'));
+	}
+
+	return true;
+}
+
 async function findReview(
 	client: Client,
 	did: Did,
@@ -194,7 +387,7 @@ export const saveReviewRecord = command(saveReviewSchema, async ({ media, ...rev
 			? existing.value.createdAt
 			: new Date().toISOString();
 
-	let metadata: Awaited<ReturnType<typeof getReviewRecordMetadata>>;
+	let metadata: MediaRecordMetadata;
 	try {
 		metadata = await getReviewRecordMetadata(media.tmdbId, media.creativeWorkType);
 	} catch {
@@ -258,5 +451,9 @@ export const saveReviewRecord = command(saveReviewSchema, async ({ media, ...rev
 		error(response.status, responseMessage(response.data, 'Could not save review'));
 	}
 
-	return { uri: response.data.uri, created: !existing };
+	const addedToWatched = review.markAsWatched
+		? await addToWatchedList({ client, did, media, metadata, poster })
+		: false;
+
+	return { uri: response.data.uri, created: !existing, addedToWatched };
 });
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ba3bee0..72bc6db 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,7 @@
 	import Footer from '$lib/components/Footer.svelte';
 	import LoginDialog from '$lib/components/LoginDialog.svelte';
 	import ReviewDialog from '$lib/components/ReviewDialog.svelte';
+	import CreateListDialog from '$lib/components/CreateListDialog.svelte';
 
 	let { data, children } = $props();
 </script>
@@ -18,3 +19,4 @@
 <AppMenu did={data.did} avatarUrl={data.avatarUrl} />
 <LoginDialog />
 <ReviewDialog />
+<CreateListDialog />
\ No newline at end of file
diff --git a/src/routes/profile/[actor]/+page.svelte b/src/routes/profile/[actor]/+page.svelte
index d917139..684df1f 100644
--- a/src/routes/profile/[actor]/+page.svelte
+++ b/src/routes/profile/[actor]/+page.svelte
@@ -124,7 +124,7 @@
 						class={`text-sm text-white ${writtenReviews.length > 0 || ratings.length > 0 ? 'mt-10 border-t border-white/10 pt-6' : 'mt-6'}`}
 					>
 						<h2 class="text-lg font-semibold tracking-tight">Lists</h2>
-						<div class="mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3">
+						<div class="mt-4 grid grid-cols-1 gap-x-4 gap-y-7 sm:grid-cols-2">
 							{#each data.lists as list (list.uri)}
 								<ListCard {list} />
 							{/each}
-- 
2.51.2