visual-comments 0.0.0-stage → 0.1.0

package/dist/ui/Overlay.svelte

@@ -0,0 +1,488 @@
+<svelte:options css="injected" />
+
+<!--
+  Pins, the new-comment field and the open thread, drawn over the page in
+  client pixels. Each surface says where its pixels are on screen, so pins
+  follow it however it is zoomed, panned or scrolled. Cards open on whichever
+  side of a pin has room inside the surface's stage. It also outlines the
+  element the pointer is aiming at, the new comment's element and the open
+  thread's.
+-->
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { useComments } from './context.js';
+	import Composer from './Composer.svelte';
+	import Pin from './Pin.svelte';
+	import ThreadCard from './ThreadCard.svelte';
+	import Icon from './Icon.svelte';
+	import { describeTarget, MAGNET, widen, type Box } from '../core/target.js';
+	import { docBoxToClient, docBoxToSurface, intersect, spotOf, toClient, type Rect, type Surface } from '../core/surfaces.js';
+	import { neck } from '../core/metaball.js';
+	import type { CommentImage, CommentThread } from '../shared/types.js';
+
+	const vc = useComments();
+	const comments = vc.store;
+	const PIN = 32;
+	const GAP = 10;
+	const EDGE = 8;
+	const CARD_WIDTH = 320;
+	const COMPOSER_WIDTH = 296;
+
+	let composer = $state<Composer>();
+	let cardHeight = $state(0);
+	let shake = $state(false);
+
+	/** Brings the unsent comment back to attention instead of discarding it. */
+	function focusDraft() {
+		composer?.focus();
+		shake = false;
+		requestAnimationFrame(() => (shake = true));
+	}
+	$effect(() => {
+		vc.onFocusDraft(focusDraft);
+		return () => vc.onFocusDraft(undefined);
+	});
+
+	/** Where cards on a surface can go: its stage, clear of the list. */
+	function stageOf(surface: Surface): Rect {
+		const panel = vc.active ? vc.panelRect ?? floatingPanel() : undefined;
+		const stage = intersect(surface.stage, { left: 0, top: 0, right: innerWidth, bottom: innerHeight });
+		return panel && panel.left < stage.right && panel.left > stage.left ? { ...stage, right: panel.left } : stage;
+	}
+
+	/** The list's place when the host gives it none: along the right edge. */
+	function floatingPanel(): Rect {
+		return { left: innerWidth - 12 - 320, top: 12, right: innerWidth - 12, bottom: innerHeight - 12 };
+	}
+
+	/** A thread's pin where it is now, or undefined while it is not on screen. */
+	function spot(thread: CommentThread) {
+		void vc.layout;
+		const surface = vc.surface(thread.surface);
+		if (!surface) return undefined;
+		return { surface, ...spotOf(surface, thread) };
+	}
+
+	// Opening a thread scrolls its element into view inside its document, once found.
+	$effect(() => {
+		void vc.layout;
+		const id = vc.revealing;
+		if (id === undefined) return;
+		untrack(() => {
+			const thread = comments.threads.find((t) => t.id === id);
+			if (!thread?.anchor) return void (vc.revealing = undefined);
+			const where = spot(thread);
+			if (!where?.surface.doc) return;
+			if (where.element && where.hidden) vc.revealElement(where.element);
+			else vc.revealing = undefined;
+		});
+	});
+
+	const pins = $derived(vc.pinned.flatMap((thread) => {
+		const where = spot(thread);
+		return where && !where.hidden ? [{ thread, left: where.x, top: where.y }] : [];
+	}));
+
+	/** Beside the pin, on the side with room, kept inside the stage. */
+	function beside(at: { left: number; top: number }, width: number, height: number, bounds: Rect) {
+		let left = at.left + PIN + GAP;
+		if (left + width > bounds.right - EDGE) left = at.left - GAP - width;
+		left = Math.max(bounds.left + EDGE, Math.min(left, bounds.right - EDGE - width));
+		const top = Math.max(bounds.top + EDGE, Math.min(at.top - PIN, bounds.bottom - EDGE - height));
+		return { left, top };
+	}
+
+	const open = $derived.by(() => {
+		const thread = vc.open;
+		const where = thread && spot(thread);
+		if (!thread || !where || where.hidden) return undefined;
+		const bounds = stageOf(where.surface);
+		const at = { left: where.x, top: where.y };
+		return { thread, where, card: beside(at, CARD_WIDTH, cardHeight, bounds), maxHeight: bounds.bottom - bounds.top - EDGE * 2 };
+	});
+
+	/** A client box with a little room around it, and its corner radius on screen. */
+	function outline(rect: Rect, radius = 0) {
+		const pad = 3;
+		return {
+			left: rect.left - pad,
+			top: rect.top - pad,
+			width: rect.right - rect.left + pad * 2,
+			height: rect.bottom - rect.top + pad * 2,
+			radius: radius + pad
+		};
+	}
+
+	const aimSurface = $derived(vc.aim && vc.surface(vc.aim.surface));
+	const aiming = $derived.by(() => {
+		const aim = vc.aim;
+		if (!aim?.target || !aimSurface) return undefined;
+		const shape = outline(docBoxToClient(aimSurface, aim.target.box), aim.target.radius * aimSurface.docScale);
+		// Like a pointer resting on a button, the outline leans a little toward the pointer.
+		const box = aim.targetBox!;
+		const lean = (offset: number, size: number) => Math.max(-1, Math.min(1, offset / (size / 2 || 1))) * 3;
+		return {
+			...shape,
+			dx: lean(aim.point.x - (box.x + box.width / 2), box.width),
+			dy: lean(aim.point.y - (box.y + box.height / 2), box.height)
+		};
+	});
+
+	/**
+	 * Over an element the cursor becomes a faint dot, joined to the outline
+	 * while the pointer is outside it.
+	 */
+	const DOT = 4;
+	const dot = $derived.by(() => {
+		const cursor = vc.cursor;
+		if (!cursor || !aiming) return undefined;
+		const box = {
+			left: aiming.left + aiming.dx,
+			top: aiming.top + aiming.dy,
+			width: aiming.width,
+			height: aiming.height,
+			radius: aiming.radius
+		};
+		return { ...cursor, neck: neck(cursor.x, cursor.y, DOT, box, MAGNET + 8) };
+	});
+
+	const draftSurface = $derived(vc.draft && vc.surface(vc.draft.surface));
+	/** The new comment's element where it is now, following any scroll since the click, in surface pixels. */
+	const draftBox = $derived.by((): Box | undefined => {
+		void vc.layout;
+		const target = vc.draft?.target;
+		if (!target || !draftSurface) return undefined;
+		if (!target.element.isConnected) return vc.draft!.targetBox;
+		const r = target.element.getBoundingClientRect();
+		return docBoxToSurface(draftSurface, { x: r.left, y: r.top, width: r.width, height: r.height });
+	});
+	const drafted = $derived.by(() => {
+		const target = vc.draft?.target;
+		if (!target || !draftBox || !draftSurface) return undefined;
+		const a = toClient(draftSurface, draftBox.x, draftBox.y);
+		const s = draftSurface.scale;
+		return outline({ left: a.x, top: a.y, right: a.x + draftBox.width * s, bottom: a.y + draftBox.height * s }, target.radius * draftSurface.docScale);
+	});
+	const wider = $derived(vc.draft?.target && draftSurface && widen(vc.draft.target, draftSurface.search));
+	const anchored = $derived(open?.thread.anchor && open.where.box && outline(open.where.box));
+	/** The new comment's element, or else the open thread's. */
+	const marked = $derived(drafted || (vc.draft ? undefined : anchored));
+
+	/** Moves the comment to another element, keeping the pin at the same place on screen. */
+	function retarget(target: NonNullable<typeof vc.draft>['target']) {
+		const draft = vc.draft;
+		if (!draft || !draftSurface || !target) return;
+		draft.target = target;
+		draft.targetBox = docBoxToSurface(draftSurface, target.box);
+		composer?.focus();
+	}
+
+	function widenDraft() {
+		if (!vc.draft?.target || !wider) return;
+		vc.draft.inner = [vc.draft.target, ...(vc.draft.inner ?? [])];
+		retarget(wider);
+	}
+
+	function narrowDraft() {
+		const [inner, ...rest] = vc.draft?.inner ?? [];
+		if (!vc.draft || !inner) return;
+		vc.draft.inner = rest;
+		retarget(inner);
+	}
+
+	/** Leaves the element and pins the comment where the pointer was. */
+	function detachDraft() {
+		const draft = vc.draft;
+		if (!draft) return;
+		draft.x = draft.point.x;
+		draft.y = draft.point.y;
+		draft.target = undefined;
+		draft.targetBox = undefined;
+		draft.inner = undefined;
+		composer?.focus();
+	}
+
+	function onDraftKeydown(event: KeyboardEvent) {
+		if (!event.altKey || event.metaKey || event.ctrlKey) return;
+		if (event.key === 'ArrowUp') widenDraft();
+		else if (event.key === 'ArrowDown') narrowDraft();
+		else return;
+		event.preventDefault();
+	}
+
+	const pending = $derived.by(() => {
+		const draft = vc.draft;
+		if (!draft || !draftSurface) return undefined;
+		const box = draft.targetBox && draftBox;
+		const x = box ? box.x + draft.x - draft.targetBox!.x : draft.x;
+		const y = box ? box.y + draft.y - draft.targetBox!.y : draft.y;
+		const c = toClient(draftSurface, x, y);
+		const at = { left: c.x, top: c.y };
+		return { at, card: beside({ left: at.left, top: at.top + 4 }, COMPOSER_WIDTH, 40, stageOf(draftSurface)) };
+	});
+
+	async function submitDraft(body: string, images: CommentImage[]) {
+		const draft = vc.draft;
+		const surface = draftSurface;
+		if (!draft || !surface) return;
+		try {
+			const anchor = draft.target && draft.targetBox
+				? { ...describeTarget(draft.target), ...draft.targetBox }
+				: null;
+			const thread = await comments.create({
+				page: vc.page,
+				url: location.href,
+				surface: surface.id,
+				title: surface.title || document.title,
+				x: draft.x,
+				y: draft.y,
+				anchor,
+				context: contextFor(surface),
+				body
+			}, images);
+			vc.draft = undefined;
+			vc.openThread(thread.id);
+		} catch (error) {
+			comments.error = (error as Error).message;
+			throw error;
+		}
+	}
+
+	function contextFor(surface: Surface): Record<string, string> {
+		const extra = vc.options.context?.({ id: surface.id, title: surface.title, element: surface.element }) ?? {};
+		const entries = Object.entries({ viewport: `${innerWidth}×${innerHeight}`, ...surface.context, ...extra })
+			.filter(([, value]) => value !== undefined && value !== '')
+			.map(([key, value]) => [key, String(value)]);
+		return Object.fromEntries(entries);
+	}
+</script>
+
+{#if vc.cursor}
+	<!-- The .vc-comment-cursor image, drawn. Its hotspot is the bottom-left point. -->
+	<svg
+		class={['vc-cursor', aiming && 'vc-cursor-hidden']}
+		style:left="{vc.cursor.x - 1}px"
+		style:top="{vc.cursor.y - 27}px"
+		width="28"
+		height="28"
+		viewBox="0 0 28 28"
+		aria-hidden="true"
+	>
+		<path d="M14 1.5a12.5 12.5 0 1 1 0 25H1.5V14A12.5 12.5 0 0 1 14 1.5z" fill="white" stroke="#1c1917" stroke-width="1.5" />
+		<path d="M14 9v10M9 14h10" stroke="#1c1917" stroke-width="1.5" stroke-linecap="round" />
+	</svg>
+{/if}
+{#if dot}
+	<svg class="vc-dot" aria-hidden="true">
+		<g>
+			{#if dot.neck}<path d={dot.neck} />{/if}
+			<circle cx={dot.x} cy={dot.y} r={DOT} />
+		</g>
+	</svg>
+{/if}
+{#if aiming}
+	<span
+		class="vc-target vc-target-aim absolute"
+		style:left="{aiming.left}px"
+		style:top="{aiming.top}px"
+		style:width="{aiming.width}px"
+		style:height="{aiming.height}px"
+		style:border-radius="{aiming.radius}px"
+		style:translate="{aiming.dx}px {aiming.dy}px"
+		aria-hidden="true"
+	></span>
+{/if}
+{#if marked}
+	<span
+		class={['vc-target absolute', !drafted && 'vc-target-quiet']}
+		style:left="{marked.left}px"
+		style:top="{marked.top}px"
+		style:width="{marked.width}px"
+		style:height="{marked.height}px"
+		style:border-radius="{marked.radius}px"
+		aria-hidden="true"
+	></span>
+{/if}
+
+{#each pins as pin (pin.thread.id)}
+	<Pin
+		thread={pin.thread}
+		left={pin.left}
+		top={pin.top}
+		now={comments.now}
+		open={pin.thread.id === vc.openId}
+		onopen={() => {
+			vc.draft = undefined;
+			vc.openThread(pin.thread.id === vc.openId ? undefined : pin.thread.id);
+		}}
+	/>
+{/each}
+
+{#if pending && vc.draft}
+	<span
+		class="vc-draft-pin absolute z-20 block size-8 bg-vc-comment shadow-[0_1px_4px_rgb(0_0_0/0.3)]"
+		style:left="{pending.at.left}px"
+		style:top="{pending.at.top}px"
+		aria-hidden="true"
+	></span>
+	<!-- Alt+Up and Alt+Down from the field widen or narrow the comment's element. -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		data-vc-ui
+		class={['pointer-events-auto absolute z-40 cursor-default', shake && 'vc-shake']}
+		style:left="{pending.card.left}px"
+		style:top="{pending.card.top}px"
+		role="group"
+		aria-label="New comment"
+		onanimationend={() => (shake = false)}
+		onkeydown={onDraftKeydown}
+	>
+		{#if vc.viewer}
+			<Composer
+				bind:this={composer}
+				variant="new"
+				placeholder="Add a comment"
+				initial={vc.draft.text}
+				autofocus
+				oninput={(text) => { if (vc.draft) vc.draft.text = text; }}
+				onimages={(count) => { if (vc.draft) vc.draft.images = count; }}
+				onsubmit={submitDraft}
+				oncancel={() => (vc.draft = undefined)}
+			/>
+			{#if vc.draft.target}
+				<div class="mt-1.5 flex w-fit max-w-[296px] items-center rounded-full bg-white py-0.5 pr-0.5 pl-3 text-xs text-vc-muted shadow-[0_1px_6px_rgb(0_0_0/0.16)]">
+					<span class="min-w-0 truncate pr-1" title={vc.draft.target.label}>On {vc.draft.target.label}</span>
+					{#if vc.draft.inner?.length}
+						<button type="button" class="vc-target-tool" aria-label="Select the element inside" title="Inside (⌥↓)" onclick={narrowDraft}>
+							<Icon name="chevron-down" size={14} />
+						</button>
+					{/if}
+					{#if wider}
+						<button type="button" class="vc-target-tool" aria-label="Select the element around it" title="Around it (⌥↑)" onclick={widenDraft}>
+							<Icon name="chevron-up" size={14} />
+						</button>
+					{/if}
+					<button type="button" class="vc-target-tool" aria-label="Pin to the point instead" title="Pin to the point instead" onclick={detachDraft}>
+						<Icon name="close" size={14} />
+					</button>
+				</div>
+			{/if}
+		{:else}
+			<div class="flex w-[296px] items-center gap-3 rounded-[18px] bg-white py-2 pr-2 pl-4 text-[13px] text-vc-ink shadow-[0_2px_14px_rgb(0_0_0/0.18)]">
+				<p class="flex-1">Sign in to comment.</p>
+				<button type="button" class="h-7 rounded-full bg-vc-comment px-3 font-medium text-white hover:brightness-110"
+					onclick={() => vc.signIn()}>Sign in</button>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+{#if open}
+	<div
+		class="absolute z-40"
+		style:left="{open.card.left}px"
+		style:top="{open.card.top}px"
+		bind:offsetHeight={cardHeight}
+	>
+		<ThreadCard
+			thread={open.thread}
+			title={vc.titleOf(open.thread)}
+			link={vc.linkOf(open.thread)}
+			maxHeight={Math.max(200, open.maxHeight)}
+			onclose={() => vc.openThread(undefined)}
+		/>
+	</div>
+{/if}
+
+<style>
+	.vc-cursor {
+		position: fixed;
+		z-index: 50;
+		transform-origin: 1px 27px;
+		transition: opacity 140ms ease, scale 140ms ease;
+	}
+	.vc-cursor-hidden {
+		opacity: 0;
+		scale: 0.6;
+	}
+	.vc-dot {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+		animation: vc-dot-in 140ms ease;
+	}
+	/* One group, so where the neck overlaps the dot it is not darker. */
+	.vc-dot g {
+		fill: var(--color-vc-comment);
+		opacity: 0.5;
+	}
+	@keyframes vc-dot-in {
+		from {
+			opacity: 0;
+		}
+	}
+	.vc-target {
+		border: 2px solid var(--color-vc-comment);
+		background: color-mix(in srgb, var(--color-vc-comment) 8%, transparent);
+	}
+	.vc-target-aim {
+		transition-property: left, top, width, height, border-radius, translate;
+		transition-duration: 110ms, 110ms, 110ms, 110ms, 110ms, 60ms;
+		transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+		animation: vc-target-in 110ms ease-out;
+	}
+	@keyframes vc-target-in {
+		from {
+			opacity: 0;
+			scale: 1.06;
+		}
+	}
+	.vc-target-quiet {
+		border: 1.5px dashed var(--color-vc-comment);
+		background: none;
+	}
+	.vc-target-tool {
+		display: grid;
+		place-items: center;
+		width: 22px;
+		height: 22px;
+		border-radius: 999px;
+		color: var(--color-vc-muted);
+	}
+	.vc-target-tool:hover {
+		background: var(--color-vc-wash);
+		color: var(--color-vc-ink);
+	}
+	.vc-draft-pin {
+		border-radius: 16px 16px 16px 0;
+		transform: translateY(-100%);
+		animation: vc-drop 180ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
+		transform-origin: bottom left;
+	}
+	@keyframes vc-drop {
+		from {
+			transform: translateY(-100%) scale(0.4);
+			opacity: 0;
+		}
+	}
+	.vc-shake {
+		animation: vc-shake 320ms ease;
+	}
+	@keyframes vc-shake {
+		20%, 60% { translate: -6px 0; }
+		40%, 80% { translate: 6px 0; }
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.vc-draft-pin,
+		.vc-shake,
+		.vc-target-aim,
+		.vc-cursor,
+		.vc-dot {
+			animation: none;
+			transition: none;
+		}
+	}
+</style>

package/dist/ui/Overlay.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Overlay: import("svelte").Component<Record<string, never>, {}, "">;
+type Overlay = ReturnType<typeof Overlay>;
+export default Overlay;

package/dist/ui/Panel.svelte

@@ -0,0 +1,206 @@
+<!-- The threads of this page, or of every page. Choosing one shows it where it was placed. -->
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { useComments } from './context.js';
+	import Avatar from './Avatar.svelte';
+	import Icon from './Icon.svelte';
+	import Menu from './Menu.svelte';
+	import MenuItem from './MenuItem.svelte';
+	import { commentText } from './text.js';
+	import { ago, fullDate } from '../core/time.js';
+	import type { CommentThread } from '../shared/types.js';
+
+	let { onselect, onclose, class: className = '', style = '' }: {
+		onselect: (thread: CommentThread) => void;
+		onclose: () => void;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const vc = useComments();
+	const comments = vc.store;
+	const filters = $derived(vc.filters);
+	const viewer = $derived(vc.viewer);
+
+	const lastActivity = (thread: CommentThread) => thread.comments.at(-1)?.createdAt ?? thread.createdAt;
+	/** Threads on other pages, which the list shows only when asked. */
+	const elsewhere = $derived(comments.threads.filter((t) => t.page !== vc.page).length);
+	const here = $derived(comments.threads.filter((t) => filters.allPages || t.page === vc.page));
+	const resolvedCount = $derived(here.filter((t) => t.resolvedAt).length);
+
+	const visible = $derived.by(() => {
+		const query = filters.query.trim().toLocaleLowerCase();
+		const matches = (thread: CommentThread) =>
+			!query ||
+			`#${thread.id}` === query ||
+			vc.titleOf(thread).toLocaleLowerCase().includes(query) ||
+			thread.comments.some((c) =>
+				c.body.toLocaleLowerCase().includes(query) || c.author.name.toLocaleLowerCase().includes(query));
+		const list = here.filter((thread) =>
+			(filters.showResolved || !thread.resolvedAt) &&
+			(!filters.onlyMine || thread.comments.some((c) => c.author.sub === viewer?.sub)) &&
+			matches(thread));
+		// By page, then by the surface's place on it.
+		const order = (thread: CommentThread) => vc.orderOf(thread);
+		return filters.sort === 'place'
+			? list.sort((a, b) => a.page.localeCompare(b.page) || order(a) - order(b) || a.id - b.id)
+			: list.sort((a, b) => lastActivity(b) - lastActivity(a));
+	});
+
+	function copyLink(thread: CommentThread) {
+		void navigator.clipboard?.writeText(vc.linkOf(thread));
+	}
+</script>
+
+<aside
+	data-vc-ui
+	aria-label="Comments"
+	class={['pointer-events-auto flex min-h-0 flex-col overflow-hidden rounded border border-vc-line bg-white text-[13px] text-vc-ink shadow-[0_1px_3px_rgb(0_0_0/0.12)]', className]}
+	{style}
+	transition:fly={{ x: 16, duration: 160 }}
+>
+	<header class="flex h-11 shrink-0 items-center gap-0.5 pr-1.5 pl-3.5">
+		<h2 class="min-w-0 flex-1 truncate font-semibold" title={comments.spaceName || undefined}>Comments</h2>
+		<Menu label="Filter and sort" align="end" class="vc-tool-light size-7 rounded-full">
+			{#snippet trigger()}<Icon name="filter" />{/snippet}
+			{#snippet children(close)}
+				<MenuItem checked={filters.sort === 'date'} onselect={() => { close(); filters.sort = 'date'; }}>Sort by date</MenuItem>
+				<MenuItem checked={filters.sort === 'place'} onselect={() => { close(); filters.sort = 'place'; }}>Sort by place</MenuItem>
+				<div class="my-1 border-t border-vc-line"></div>
+				{#if elsewhere || filters.allPages}
+					<MenuItem checked={filters.allPages} onselect={() => { close(); filters.allPages = !filters.allPages; }}>
+						Show every page
+					</MenuItem>
+				{/if}
+				<MenuItem checked={filters.showResolved} onselect={() => { close(); filters.showResolved = !filters.showResolved; }}>
+					Show resolved comments
+				</MenuItem>
+				{#if viewer}
+					<MenuItem checked={filters.onlyMine} onselect={() => { close(); filters.onlyMine = !filters.onlyMine; }}>
+						Only your threads
+					</MenuItem>
+					<div class="my-1 border-t border-vc-line"></div>
+					<MenuItem checked={false} onselect={() => { close(); void comments.markAllRead(); }}>Mark all as read</MenuItem>
+				{/if}
+			{/snippet}
+		</Menu>
+		<button type="button" class="vc-tool-light size-7 rounded-full" title="Close comments (C)" aria-label="Close comments" onclick={onclose}>
+			<Icon name="close" />
+		</button>
+	</header>
+
+	<div class="shrink-0 border-b border-vc-line px-2.5 pb-2.5">
+		<label class="flex h-8 items-center gap-2 rounded-[6px] bg-vc-surface px-2.5 text-vc-muted focus-within:ring-1 focus-within:ring-vc-comment">
+			<Icon name="search" size={15} />
+			<input
+				type="search"
+				placeholder="Search"
+				aria-label="Search comments"
+				bind:value={filters.query}
+				onkeydown={(event) => { if (event.key === 'Escape') { filters.query = ''; (event.target as HTMLElement).blur(); } }}
+				class="min-w-0 flex-1 bg-transparent text-vc-ink outline-none placeholder:text-vc-muted/80"
+			/>
+		</label>
+	</div>
+
+	{#if !viewer && !comments.loading}
+		<div class="shrink-0 border-b border-vc-line px-3.5 py-3">
+			<p>Sign in to see comments and add your own.</p>
+			<button type="button" class="mt-2 h-7 rounded-full bg-vc-comment px-3 font-medium text-white hover:brightness-110"
+				onclick={() => vc.signIn()}>Sign in</button>
+		</div>
+	{/if}
+
+	<ol class="min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
+		{#each visible as thread (thread.id)}
+			{@const root = thread.comments[0]}
+			{@const replies = thread.comments.length - 1}
+			{@const selected = thread.id === vc.openId}
+			<li class={['group relative rounded-[8px] px-3 py-2.5', selected ? 'bg-vc-comment-soft' : 'hover:bg-vc-surface']}>
+				<button
+					type="button"
+					class="absolute inset-0 rounded-[8px] focus-visible:outline-2 focus-visible:outline-vc-comment"
+					aria-label="Show comment #{thread.id} on {vc.titleOf(thread)}"
+					aria-current={selected || undefined}
+					onclick={() => onselect(thread)}
+				></button>
+				<div class={['pointer-events-none relative', thread.resolvedAt && 'opacity-55']}>
+					<div class="flex h-7 items-center">
+						{#if thread.unread}
+							<span class="absolute top-3 -left-2 size-1.5 rounded-full bg-vc-comment" title="Unread"></span>
+						{/if}
+						<Avatar user={root.author} size={28} />
+					</div>
+					<p class="mt-1.5 truncate text-vc-muted">#{thread.id} · {vc.titleOf(thread)}</p>
+					<p class="truncate">
+						<span class="font-medium">{root.author.name}</span>
+						<time class="ml-1 text-vc-muted" title={fullDate(root.createdAt)}>{ago(root.createdAt, comments.now)}</time>
+					</p>
+					<p class={['line-clamp-3 break-words whitespace-pre-line', thread.unread && 'font-medium']}>{commentText(root)}</p>
+					{#if replies > 0}
+						<p class="mt-1 text-xs text-vc-muted">
+							{replies} {replies === 1 ? 'reply' : 'replies'}
+						</p>
+					{/if}
+				</div>
+				{#if viewer}
+					<div class="absolute top-2.5 right-2 flex items-center">
+						<div class={['transition-opacity', !selected && 'opacity-0 group-hover:opacity-100 focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100']}>
+							<Menu label="Thread options" align="end" class="vc-tool-light size-7 rounded-full">
+								{#snippet trigger()}<Icon name="more" />{/snippet}
+								{#snippet children(close)}
+									<MenuItem onselect={() => { close(); void comments.markRead(thread.id, !thread.unread); }}>
+										{thread.unread ? 'Mark as read' : 'Mark as unread'}
+									</MenuItem>
+									<MenuItem onselect={() => { close(); copyLink(thread); }}>Copy link</MenuItem>
+									{#if root.author.sub === viewer.sub}
+										<MenuItem onselect={() => {
+											close();
+											if (confirm('Delete this thread and all its replies?')) void comments.removeThread(thread.id);
+										}}>Delete thread…</MenuItem>
+									{/if}
+								{/snippet}
+							</Menu>
+						</div>
+						<button
+							type="button"
+							class={['vc-tool-light size-7 rounded-full', thread.resolvedAt && 'text-vc-comment']}
+							aria-pressed={Boolean(thread.resolvedAt)}
+							title={thread.resolvedAt ? 'Reopen' : 'Resolve'}
+							aria-label={thread.resolvedAt ? `Reopen #${thread.id}` : `Resolve #${thread.id}`}
+							onclick={() => comments.resolve(thread.id, !thread.resolvedAt)}
+						>
+							<Icon name="resolve" size={18} />
+						</button>
+					</div>
+				{/if}
+			</li>
+		{:else}
+			{#if viewer && !comments.loading}
+				<li class="px-3 py-6 text-center text-vc-muted">
+					{#if filters.query.trim()}
+						No comments match “{filters.query.trim()}”.
+					{:else if filters.onlyMine}
+						You have not started or replied to any threads.
+					{:else if resolvedCount && !filters.showResolved}
+						Every thread is resolved.
+						<button type="button" class="text-vc-comment hover:underline" onclick={() => (filters.showResolved = true)}>
+							Show resolved
+						</button>
+					{:else}
+						No comments yet. Click {vc.surfaces.some((s) => s.element) ? 'a frame' : 'anywhere on the page'} to add one.
+					{/if}
+				</li>
+			{/if}
+		{/each}
+	</ol>
+
+	{#if comments.error}
+		<div role="alert" class="m-2 mt-0 flex shrink-0 items-start gap-2 rounded-[8px] bg-vc-ink px-3 py-2 text-white">
+			<p class="flex-1">{comments.error}</p>
+			<button type="button" class="text-white/70 hover:text-white" aria-label="Dismiss" onclick={() => (comments.error = null)}>
+				<Icon name="close" size={14} />
+			</button>
+		</div>
+	{/if}
+</aside>