@alliance-droid/status-feedback-system 3.1.0 → 4.0.1

package/dist/components/board/FeedbackSidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Divider, Select } from '@alliance-droid/svelte-component-library';
-	import type { FeedbackBoardState } from './state.svelte.js';
+	import { Divider, Select } from "@alliance-droid/svelte-component-library";
+	import type { FeedbackBoardState } from "./state.svelte.js";
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -9,52 +9,75 @@
 	let { board }: Props = $props();
 
 	const statusOptions = [
-		{ value: 'open', label: 'Open' },
-		{ value: 'resolved', label: 'Done' },
-		{ value: 'all', label: 'All' },
+		{ value: "open", label: "Open" },
+		{ value: "resolved", label: "Done" },
+		{ value: "all", label: "All" },
 	];
 
 	const sortOptions = [
-		{ value: 'votes', label: 'Most Votes' },
-		{ value: 'newest', label: 'Newest' },
+		{ value: "votes", label: "Most Votes" },
+		{ value: "newest", label: "Newest" },
 	];
 </script>
 
 <aside class="flex flex-col gap-1" aria-label="Filter feedback">
-	<button
-		class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
-			{board.activeCategory === null ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
-		onclick={() => (board.activeCategory = null)}
-	>
-		<i class="fa-solid fa-layer-group" aria-hidden="true"></i>
-		<span>All</span>
-		<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{board.total}</span>
-	</button>
-
-	{#each board.categories as cat (cat.name)}
+	<div class="mx-2 pt-2">
 		<button
 			class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
-				{board.activeCategory === cat.name ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
-			onclick={() => (board.activeCategory = board.activeCategory === cat.name ? null : cat.name)}
+			{board.activeCategory === null
+				? 'bg-surface-secondary text-foreground font-semibold'
+				: 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
+			onclick={() => (board.activeCategory = null)}
 		>
-			<i class={board.getCategoryIcon(cat.name)} aria-hidden="true"></i>
-			<span>{board.getCategoryLabel(cat.name)}</span>
-			<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{cat.count}</span>
+			<i class="fa-solid fa-layer-group" aria-hidden="true"></i>
+			<span>All</span>
+			<span
+				class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs"
+				>{board.total}</span
+			>
 		</button>
-	{/each}
+
+		{#each board.categories as cat (cat.name)}
+			<button
+				class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
+				{board.activeCategory === cat.name
+					? 'bg-surface-secondary text-foreground font-semibold'
+					: 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
+				onclick={() =>
+					(board.activeCategory =
+						board.activeCategory === cat.name ? null : cat.name)}
+			>
+				<i class={board.getCategoryIcon(cat.name)} aria-hidden="true"
+				></i>
+				<span>{board.getCategoryLabel(cat.name)}</span>
+				<span
+					class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs"
+					>{cat.count}</span
+				>
+			</button>
+		{/each}
+	</div>
 
 	<Divider class="my-2" />
 
-	<div class="px-3 space-y-3">
-		<Select
-			label="Status"
-			options={statusOptions}
-			bind:value={board.statusFilter}
-		/>
-		<Select
-			label="Sort By"
-			options={sortOptions}
-			bind:value={board.sortBy}
-		/>
+	<div class="space-y-3">
+		<div class="mx-4">
+			<Select
+				label="Status"
+				class="rounded-lg border-0 bg-surface-hover"
+				options={statusOptions}
+				bind:value={board.statusFilter}
+			/>
+		</div>
+		<Divider class="my-2" />
+		<div class="mx-4">
+			<Select
+				label="Sort By"
+				class="rounded-lg border-0 bg-surface-hover"
+				options={sortOptions}
+				bind:value={board.sortBy}
+			/>
+		</div>
 	</div>
 </aside>
+

package/dist/components/board/FeedbackSidebar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FeedbackBoardState } from './state.svelte.js';
+import type { FeedbackBoardState } from "./state.svelte.js";
 interface Props {
     board: FeedbackBoardState;
 }

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-	import { Card, Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
+	import { Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
+	import { FEEDBACK_CATEGORIES } from '../../types.js';
 	import type { FeedbackBoardState } from './state.svelte.js';
-	import PasteImageInput from '../shared/PasteImageInput.svelte';
 
 	interface Props {
 		board: FeedbackBoardState;
-		/** Available category options for the dropdown */
-		categories?: string[];
 	}
 
-	let { board, categories = [] }: Props = $props();
+	let { board }: Props = $props();
 
 	let title = $state('');
 	let message = $state('');
@@ -19,30 +17,96 @@
 	let error = $state('');
 	let pastedImage = $state<string | null>(null);
 	let pastedFilename = $state('');
+	let fileInputEl: HTMLInputElement | undefined = $state();
+	let dragActive = $state(false);
 	let textareaWrapperEl: HTMLDivElement | undefined = $state();
 	let textareaEl: HTMLTextAreaElement | undefined = $state();
 
+	const MAX_BYTES = 5 * 1024 * 1024;
+	const ALLOWED_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+
 	$effect(() => {
 		if (textareaWrapperEl) {
 			textareaEl = textareaWrapperEl.querySelector('textarea') ?? undefined;
 		}
 	});
 
+	$effect(() => {
+		if (!textareaEl) return;
+		const handler = (e: ClipboardEvent) => handlePaste(e);
+		textareaEl.addEventListener('paste', handler);
+		return () => textareaEl?.removeEventListener('paste', handler);
+	});
+
 	let isAuthenticated = $derived(!!board.userEmail);
 
-	let categoryOptions = $derived(
-		categories.map((c) => ({ value: c, label: board.getCategoryLabel(c) }))
-	);
+	// Labels are the canonical system category names — not the consumer's
+	// `categoryConfig` (which only customizes the sidebar).
+	let categoryOptions = FEEDBACK_CATEGORIES.map((c) => ({ value: c, label: c }));
+
+	/** Validate and load an image file (shared by paste, file-pick, and drop). */
+	function processFile(file: File) {
+		if (!ALLOWED_MIME.includes(file.type)) {
+			error = 'Unsupported image type — PNG, JPEG, GIF, or WebP only';
+			return;
+		}
+		if (file.size > MAX_BYTES) {
+			error = 'Image too large — max 5 MB';
+			return;
+		}
+		const reader = new FileReader();
+		reader.onload = () => {
+			pastedImage = reader.result as string;
+			const ext = file.type.split('/')[1] || 'png';
+			const stamp = new Date().toISOString().replace(/[-:T]/g, '').slice(0, 14);
+			pastedFilename = file.name || `screenshot-${stamp}.${ext}`;
+			error = '';
+		};
+		reader.readAsDataURL(file);
+	}
+
+	function handlePaste(e: ClipboardEvent) {
+		const clipItems = Array.from(e.clipboardData?.items ?? []);
+		const imageItem = clipItems.find((i) => i.kind === 'file' && i.type.startsWith('image/'));
+		if (!imageItem) return;
+		const file = imageItem.getAsFile();
+		if (!file) return;
+		e.preventDefault();
+		processFile(file);
+	}
+
+	function handleFileSelect(e: Event) {
+		const input = e.currentTarget as HTMLInputElement;
+		const file = input.files?.[0];
+		if (file) processFile(file);
+		input.value = '';
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		dragActive = false;
+		const file = e.dataTransfer?.files?.[0];
+		if (file) processFile(file);
+	}
+
+	function formatSize(dataUrl: string): string {
+		const comma = dataUrl.indexOf(',');
+		if (comma === -1) return '';
+		const bytes = Math.round((dataUrl.length - comma - 1) * 0.75);
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+	}
 
 	async function handleSubmit() {
-		if (!message.trim() || !isAuthenticated) return;
+		if (!message.trim() || !category || !isAuthenticated) return;
 		submitting = true;
 		error = '';
 		try {
 			await board.submitFeedback({
 				title: title.trim() || undefined,
 				message: message.trim(),
-				category: category || undefined,
+				category,
 				pastedImage,
 			});
 			success = true;
@@ -60,64 +124,116 @@
 	}
 </script>
 
-<Card variant="outlined" padding="md">
+<div>
 	{#if !isAuthenticated}
-		<div class="text-center py-3 text-foreground-tertiary">
+		<div class="py-3 text-center text-foreground-tertiary">
 			<i class="fa-solid fa-lock mr-1" aria-hidden="true"></i>
 			<span class="text-sm">Sign in to submit feedback</span>
 		</div>
 	{:else if success}
-		<div class="text-center py-2 text-green-400 font-semibold">
+		<div class="py-2 text-center font-semibold text-green-400">
 			<i class="fa-solid fa-check-circle mr-1"></i> Submitted!
 		</div>
 	{:else}
-		<div class="space-y-3">
-			<div class="flex items-center gap-1.5 text-xs text-foreground-tertiary">
-				<i class="fa-solid fa-user" aria-hidden="true"></i>
-				<span>Submitting as <span class="font-medium text-foreground-secondary">{board.userEmail}</span></span>
-			</div>
-			<Input
-				bind:value={title}
-				placeholder="Title (optional)"
-			/>
-			<div bind:this={textareaWrapperEl}>
-				<Textarea
-					value={message}
-					oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
-					placeholder="Describe your feedback (paste an image to attach it)\u2026"
-					rows={3}
+		<div class="space-y-2">
+			<!-- Composer card: title + description + attachment + toolbar -->
+			<div
+				class="overflow-hidden rounded-xl border bg-background shadow-sm transition-all {dragActive
+					? 'border-primary ring-2 ring-primary/30'
+					: 'border-border focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20'}"
+				role="group"
+				ondragover={(e) => { e.preventDefault(); dragActive = true; }}
+				ondragleave={() => (dragActive = false)}
+				ondrop={handleDrop}
+			>
+				<div class="border-b border-border">
+					<Input
+						class="rounded-none border-0 bg-transparent px-4 py-3 text-sm font-medium hover:border-transparent focus:border-transparent"
+						bind:value={title}
+						placeholder="Title (optional)"
+					/>
+				</div>
+
+				<div bind:this={textareaWrapperEl}>
+					<Textarea
+						class="resize-none rounded-none border-0 bg-transparent px-4 py-3 text-sm hover:border-transparent focus:border-transparent"
+						value={message}
+						oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
+						placeholder="Describe your feedback…"
+						rows={4}
+					/>
+				</div>
+
+				{#if pastedImage}
+					<div class="flex items-center gap-3 border-t border-border px-3 py-2">
+						<img
+							src={pastedImage}
+							alt={pastedFilename}
+							class="h-11 w-11 flex-shrink-0 rounded border border-border object-cover"
+						/>
+						<div class="min-w-0 flex-1">
+							<p class="truncate text-xs font-medium text-foreground">{pastedFilename}</p>
+							<p class="text-[11px] text-foreground-tertiary">{formatSize(pastedImage)}</p>
+						</div>
+						<button
+							type="button"
+							class="flex-shrink-0 rounded p-1.5 text-foreground-tertiary transition-colors hover:bg-surface-hover hover:text-foreground"
+							onclick={() => { pastedImage = null; pastedFilename = ''; }}
+							aria-label="Remove image"
+						>
+							<i class="fa-solid fa-xmark" aria-hidden="true"></i>
+						</button>
+					</div>
+				{/if}
+
+				<!-- Toolbar -->
+				<div class="flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2.5">
+					<div class="flex items-center gap-2">
+						<div class="min-w-[150px]">
+							<Select
+								class="border-0 bg-transparent"
+								size="sm"
+								placeholder="Category…"
+								options={categoryOptions}
+								required
+								bind:value={category}
+							/>
+						</div>
+						<button
+							type="button"
+							class="inline-flex items-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1.5 text-xs font-medium text-foreground-secondary transition-colors hover:border-border-strong hover:text-foreground"
+							onclick={() => fileInputEl?.click()}
+						>
+							<i class="fa-solid fa-image" aria-hidden="true"></i>
+							Attach screenshot
+						</button>
+					</div>
+					<Button
+						variant="primary"
+						size="sm"
+						disabled={submitting || !message.trim() || !category}
+						loading={submitting}
+						onclick={handleSubmit}
+					>
+						Submit
+					</Button>
+				</div>
+
+				<input
+					bind:this={fileInputEl}
+					type="file"
+					accept="image/png,image/jpeg,image/gif,image/webp"
+					class="hidden"
+					onchange={handleFileSelect}
 				/>
 			</div>
-			<PasteImageInput
-				{textareaEl}
-				bind:image={pastedImage}
-				bind:filename={pastedFilename}
-			/>
+
 			{#if error}
 				<p class="text-sm text-red-400">
-					<i class="fa-solid fa-exclamation-circle mr-1"></i>
+					<i class="fa-solid fa-exclamation-circle mr-1" aria-hidden="true"></i>
 					{error}
 				</p>
 			{/if}
-			<div class="flex gap-2 items-center flex-wrap">
-				{#if categoryOptions.length > 0}
-					<div class="min-w-[140px]">
-						<Select
-							options={[{ value: '', label: 'Category...' }, ...categoryOptions]}
-							bind:value={category}
-						/>
-					</div>
-				{/if}
-				<div class="flex-1"></div>
-				<Button
-					variant="primary"
-					disabled={submitting || !message.trim()}
-					loading={submitting}
-					onclick={handleSubmit}
-				>
-					Submit
-				</Button>
-			</div>
 		</div>
 	{/if}
-</Card>
+</div>

package/dist/components/board/FeedbackSubmitForm.svelte.d.ts

@@ -1,8 +1,6 @@
 import type { FeedbackBoardState } from './state.svelte.js';
 interface Props {
     board: FeedbackBoardState;
-    /** Available category options for the dropdown */
-    categories?: string[];
 }
 declare const FeedbackSubmitForm: import("svelte").Component<Props, {}, "">;
 type FeedbackSubmitForm = ReturnType<typeof FeedbackSubmitForm>;

package/dist/components/board/StatusBadgeMenu.svelte

@@ -0,0 +1,264 @@
+<script lang="ts">
+	/**
+	 * Status badge that doubles as a status-change control for privileged users.
+	 *
+	 * For a viewer without a token (board.canManageStatus === false) it's just a
+	 * read-only badge. For a privileged user the badge is a button: clicking it
+	 * loads the transitions they may make and shows them in a menu; picking one
+	 * applies it (prompting for a reason first when the transition requires one).
+	 *
+	 * The menu is teleported to <body> (the `portal` action) and positioned with
+	 * fixed coordinates from the trigger, so it never gets clipped by an overflow
+	 * or transformed ancestor (e.g. a sliding side rail). Same approach the
+	 * library's Select uses.
+	 *
+	 * Used in both the detail panel and the list row, so a ProductOwner can change
+	 * status without opening the item. Transitions load on demand (on first open)
+	 * unless `loadOnMount` is set — the list stays lazy so it doesn't fire a
+	 * request per row.
+	 */
+	import { Badge, Button, Textarea, Spinner } from '@alliance-droid/svelte-component-library';
+	import { onMount } from 'svelte';
+	import type { BoardItem, BoardTransition } from '../../api.js';
+	import type { FeedbackBoardState } from './state.svelte.js';
+	import { getStatusBadgeVariant, publicStatusLabel } from './utils.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+		item: BoardItem;
+		/** Eagerly load transitions on mount (detail view). The list leaves this off. */
+		loadOnMount?: boolean;
+	}
+
+	let { board, item, loadOnMount = false }: Props = $props();
+
+	let menuOpen = $state(false);
+	let pendingTarget = $state<BoardTransition | null>(null);
+	let reason = $state('');
+	let applying = $state(false);
+	let loading = $state(false);
+	/** True when the last load attempt failed (token rejected / network) vs. genuinely returned no targets. */
+	let loadFailed = $state(false);
+	let error = $state('');
+	let triggerEl: HTMLButtonElement | undefined = $state();
+	let menuEl: HTMLDivElement | undefined = $state();
+
+	// Read from the board's shared cache so detail + list reuse the same fetch.
+	let txns = $derived(board.transitions[item.id] ?? null);
+	let badgeLabel = $derived(txns?.current.display ?? publicStatusLabel(item.publicStatus));
+	// Changes whenever the menu's content (and thus its size) changes — drives a
+	// reposition so the teleported menu stays anchored after it loads/expands.
+	let posKey = $derived(`${menuOpen}:${loading}:${pendingTarget?.status ?? ''}:${txns?.targets.length ?? 0}`);
+
+	onMount(() => {
+		if (loadOnMount && board.canManageStatus) void board.loadTransitions(item.id);
+	});
+
+	/** Teleport the menu to <body> and keep it positioned under the trigger.
+	 *  The second arg (`posKey`) is unused directly — changing it just triggers
+	 *  the action's `update()` so the menu re-positions when its content resizes. */
+	function portal(node: HTMLElement, _posKey?: string) {
+		document.body.appendChild(node);
+
+		function position() {
+			if (!triggerEl) return;
+			const rect = triggerEl.getBoundingClientRect();
+			node.style.position = 'fixed';
+			node.style.top = `${rect.bottom + 6}px`;
+			node.style.zIndex = '9999';
+			// Left-align to the trigger, then clamp into the viewport.
+			let left = rect.left;
+			const width = node.offsetWidth;
+			if (left + width > window.innerWidth - 8) left = window.innerWidth - width - 8;
+			if (left < 8) left = 8;
+			node.style.left = `${left}px`;
+		}
+
+		position();
+		requestAnimationFrame(position);
+
+		const onScroll = () => position();
+		window.addEventListener('scroll', onScroll, true);
+		window.addEventListener('resize', onScroll);
+
+		return {
+			update() {
+				position();
+				requestAnimationFrame(position);
+			},
+			destroy() {
+				window.removeEventListener('scroll', onScroll, true);
+				window.removeEventListener('resize', onScroll);
+				node.remove();
+			},
+		};
+	}
+
+	// Close on outside click / Escape while open.
+	$effect(() => {
+		if (!menuOpen) return;
+		const onDocClick = (e: MouseEvent) => {
+			const target = e.target as Node;
+			if (triggerEl?.contains(target) || menuEl?.contains(target)) return;
+			closeMenu();
+		};
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') closeMenu();
+		};
+		document.addEventListener('click', onDocClick, true);
+		document.addEventListener('keydown', onKey, true);
+		return () => {
+			document.removeEventListener('click', onDocClick, true);
+			document.removeEventListener('keydown', onKey, true);
+		};
+	});
+
+	async function toggleMenu(e: MouseEvent) {
+		e.stopPropagation();
+		if (menuOpen) {
+			closeMenu();
+			return;
+		}
+		error = '';
+		pendingTarget = null;
+		reason = '';
+		// Open immediately so the spinner is visible while transitions load.
+		menuOpen = true;
+		if (!txns) await reload();
+	}
+
+	async function reload() {
+		loading = true;
+		loadFailed = false;
+		try {
+			// null = couldn't load (no token / rejected / network), not "no transitions".
+			loadFailed = (await board.loadTransitions(item.id)) === null;
+		} finally {
+			loading = false;
+		}
+	}
+
+	function closeMenu() {
+		menuOpen = false;
+		pendingTarget = null;
+		reason = '';
+		error = '';
+	}
+
+	async function chooseStatus(target: BoardTransition) {
+		error = '';
+		if (target.requiresReason) {
+			pendingTarget = target;
+			reason = '';
+			return;
+		}
+		await applyStatus(target);
+	}
+
+	async function applyStatus(target: BoardTransition, withReason?: string) {
+		applying = true;
+		error = '';
+		try {
+			await board.setStatus(item.id, target.status, withReason);
+			closeMenu();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to update status';
+		} finally {
+			applying = false;
+		}
+	}
+
+	function confirmReason() {
+		if (!pendingTarget) return;
+		if (!reason.trim()) {
+			error = 'A reason is required for this change';
+			return;
+		}
+		applyStatus(pendingTarget, reason.trim());
+	}
+</script>
+
+{#if board.canManageStatus}
+	<button
+		bind:this={triggerEl}
+		type="button"
+		class="inline-flex items-center gap-1.5 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:opacity-60"
+		onclick={toggleMenu}
+		aria-haspopup="listbox"
+		aria-expanded={menuOpen}
+		disabled={applying}
+		title="Change status"
+	>
+		<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">{badgeLabel}</Badge>
+		<i class="fa-solid fa-chevron-down text-[0.625rem] text-foreground-tertiary" aria-hidden="true"></i>
+	</button>
+
+	{#if menuOpen}
+		<!-- Teleported to <body>; posKey re-positions it when its size changes. -->
+		<div
+			bind:this={menuEl}
+			use:portal={posKey}
+			class="max-h-[60vh] w-max min-w-[10rem] overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-surface py-1 shadow-lg"
+			role="listbox"
+		>
+			{#if loading}
+				<div class="flex items-center gap-2 px-3 py-3 text-sm text-foreground-tertiary">
+					<Spinner /> Loading…
+				</div>
+			{:else if pendingTarget}
+				<div class="w-64 space-y-2 p-3">
+					<p class="text-xs font-medium text-foreground">Reason for &ldquo;{pendingTarget.display}&rdquo;</p>
+					<Textarea
+						value={reason}
+						oninput={(e) => (reason = (e.currentTarget as HTMLTextAreaElement).value)}
+						placeholder="Why are you making this change?"
+						rows={2}
+					/>
+					{#if error}
+						<p class="text-xs text-red-400">{error}</p>
+					{/if}
+					<div class="flex justify-end gap-2">
+						<Button variant="neutral" style="ghost" size="sm" onclick={() => { pendingTarget = null; reason = ''; error = ''; }}>
+							Back
+						</Button>
+						<Button variant="primary" size="sm" loading={applying} disabled={applying} onclick={confirmReason}>
+							Apply
+						</Button>
+					</div>
+				</div>
+			{:else if txns && txns.targets.length > 0}
+				{#each txns.targets as target (target.status)}
+					<button
+						type="button"
+						role="option"
+						aria-selected="false"
+						class="flex w-full items-center justify-between gap-3 whitespace-nowrap px-3 py-2 text-left text-sm text-foreground transition-colors hover:bg-surface-hover disabled:opacity-60"
+						onclick={() => chooseStatus(target)}
+						disabled={applying}
+					>
+						<span>{target.display}</span>
+						{#if target.requiresReason}
+							<i class="fa-solid fa-pen text-[0.625rem] text-foreground-tertiary" title="Requires a reason" aria-hidden="true"></i>
+						{/if}
+					</button>
+				{/each}
+			{:else if loadFailed}
+				<div class="w-56 space-y-2 p-3 text-sm">
+					<p class="text-foreground-secondary">
+						Couldn't load status options — your session may have expired.
+					</p>
+					<Button variant="neutral" style="ghost" size="sm" onclick={reload}>Try again</Button>
+				</div>
+			{:else}
+				<p class="whitespace-nowrap px-3 py-3 text-sm text-foreground-tertiary">No status changes available.</p>
+			{/if}
+			{#if error && !pendingTarget && !loading}
+				<p class="px-3 pb-2 text-xs text-red-400">{error}</p>
+			{/if}
+		</div>
+	{/if}
+{:else}
+	<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">
+		{publicStatusLabel(item.publicStatus)}
+	</Badge>
+{/if}