@alliance-droid/status-feedback-system 2.3.2 → 3.0.0

package/dist/components/board/FeedbackItem.svelte

@@ -1,117 +1,117 @@
-<script lang="ts">
-	import { Badge, IconButton } from '@alliance-droid/svelte-component-library';
-	import type { BoardItem } from '../../api.js';
-	import type { FeedbackBoardState } from './state.svelte.js';
-	import { timeAgo, getStatusBadgeVariant } from './utils.js';
-
-	interface Props {
-		board: FeedbackBoardState;
-		item: BoardItem;
-		onclick?: (item: BoardItem) => void;
-	}
-
-	let { board, item, onclick }: Props = $props();
-
-	let isClickable = $derived(!!onclick);
-	let voteLabel = $derived.by(() => {
-		const current = board.votedItems[item.id];
-		if (current === 'up') return 'Remove upvote';
-		if (current === 'down') return 'Remove downvote';
-		return undefined;
-	});
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<article
-	class="rounded-xl border border-border bg-surface transition-colors {isClickable ? 'cursor-pointer hover:bg-surface-hover' : ''}"
-	role={isClickable ? 'button' : undefined}
-	tabindex={isClickable ? 0 : undefined}
-	aria-label={isClickable ? (item.title || item.message.slice(0, 80)) : undefined}
-	onclick={() => onclick?.(item)}
-	onkeydown={(e) => { if (isClickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onclick?.(item); } }}
->
-	<div class="flex gap-3 p-4">
-		<!-- Vote column -->
-		<div class="flex flex-col items-center gap-0.5 min-w-[2.5rem]" role="group" aria-label="Vote on this feedback">
-			<div role="presentation" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
-				<IconButton
-					size="sm"
-					variant={board.votedItems[item.id] === 'up' ? 'primary' : 'neutral'}
-					onclick={() => board.vote(item.id, 'up')}
-					label={board.votedItems[item.id] === 'up' ? 'Remove upvote' : 'Upvote'}
-				>
-					<i class="fa-solid fa-chevron-up text-xs"></i>
-				</IconButton>
-			</div>
-			<span class="text-sm font-bold tabular-nums" aria-label="{item.votes} votes">{item.votes}</span>
-			{#if board.voteErrors[item.id]}
-				<span class="text-[0.625rem] text-red-400" role="alert">
-					<i class="fa-solid fa-exclamation-circle" aria-hidden="true"></i>
-				</span>
-			{/if}
-			<div role="presentation" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
-				<IconButton
-					size="sm"
-					variant={board.votedItems[item.id] === 'down' ? 'primary' : 'neutral'}
-					onclick={() => board.vote(item.id, 'down')}
-					label={board.votedItems[item.id] === 'down' ? 'Remove downvote' : 'Downvote'}
-				>
-					<i class="fa-solid fa-chevron-down text-xs"></i>
-				</IconButton>
-			</div>
-		</div>
-
-		<!-- Content -->
-		<div class="flex-1 min-w-0">
-			<div class="flex items-center gap-2 flex-wrap">
-				{#if item.category}
-					<i class="{board.getCategoryIcon(item.category)} text-sm text-foreground-secondary" aria-hidden="true"></i>
-				{/if}
-				<h3 class="text-[0.9375rem] font-semibold flex-1 leading-snug">
-					{item.title || item.message.slice(0, 80)}
-				</h3>
-				<Badge variant={getStatusBadgeVariant(item.status)} size="sm">
-					{item.status === 'new' ? 'Open' : item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-				</Badge>
-			</div>
-
-			{#if item.title}
-				<p class="text-sm text-foreground-secondary mt-1.5 leading-relaxed line-clamp-2">{item.message}</p>
-			{/if}
-
-			{#if item.email}
-				<p class="text-[0.8125rem] text-foreground-tertiary mt-1.5 flex items-center gap-1">
-					<i class="fa-solid fa-envelope" aria-hidden="true"></i>
-					{item.email}
-				</p>
-			{/if}
-
-			<div class="flex items-center justify-between mt-2 text-[0.8125rem] text-foreground-tertiary">
-				<div class="flex items-center gap-3">
-					<span>{timeAgo(item.createdAt)}</span>
-					{#if item.adminResponse}
-						<span class="text-xs text-primary">
-							<i class="fa-solid fa-shield" aria-hidden="true"></i> Official response
-						</span>
-					{/if}
-				</div>
-				{#if item.responseCount > 0}
-					<span class="flex items-center gap-1" aria-label="{item.responseCount} {item.responseCount === 1 ? 'response' : 'responses'}">
-						<i class="fa-solid fa-comment" aria-hidden="true"></i>
-						{item.responseCount}
-					</span>
-				{/if}
-			</div>
-		</div>
-	</div>
-</article>
-
-<style>
-	.line-clamp-2 {
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		line-clamp: 2;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-	}
-</style>
+<script lang="ts">
+	import { Badge, IconButton } from '@alliance-droid/svelte-component-library';
+	import type { BoardItem } from '../../api.js';
+	import type { FeedbackBoardState } from './state.svelte.js';
+	import { timeAgo, getStatusBadgeVariant } from './utils.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+		item: BoardItem;
+		onclick?: (item: BoardItem) => void;
+	}
+
+	let { board, item, onclick }: Props = $props();
+
+	let isClickable = $derived(!!onclick);
+	let voteLabel = $derived.by(() => {
+		const current = board.votedItems[item.id];
+		if (current === 'up') return 'Remove upvote';
+		if (current === 'down') return 'Remove downvote';
+		return undefined;
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<article
+	class="rounded-xl border border-border bg-surface transition-colors {isClickable ? 'cursor-pointer hover:bg-surface-hover' : ''}"
+	role={isClickable ? 'button' : undefined}
+	tabindex={isClickable ? 0 : undefined}
+	aria-label={isClickable ? (item.title || item.message.slice(0, 80)) : undefined}
+	onclick={() => onclick?.(item)}
+	onkeydown={(e) => { if (isClickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onclick?.(item); } }}
+>
+	<div class="flex gap-3 p-4">
+		<!-- Vote column -->
+		<div class="flex flex-col items-center gap-0.5 min-w-[2.5rem]" role="group" aria-label="Vote on this feedback">
+			<div role="presentation" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+				<IconButton
+					size="sm"
+					variant={board.votedItems[item.id] === 'up' ? 'primary' : 'neutral'}
+					onclick={() => board.vote(item.id, 'up')}
+					label={board.votedItems[item.id] === 'up' ? 'Remove upvote' : 'Upvote'}
+				>
+					<i class="fa-solid fa-chevron-up text-xs"></i>
+				</IconButton>
+			</div>
+			<span class="text-sm font-bold tabular-nums" aria-label="{item.votes} votes">{item.votes}</span>
+			{#if board.voteErrors[item.id]}
+				<span class="text-[0.625rem] text-red-400" role="alert">
+					<i class="fa-solid fa-exclamation-circle" aria-hidden="true"></i>
+				</span>
+			{/if}
+			<div role="presentation" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+				<IconButton
+					size="sm"
+					variant={board.votedItems[item.id] === 'down' ? 'primary' : 'neutral'}
+					onclick={() => board.vote(item.id, 'down')}
+					label={board.votedItems[item.id] === 'down' ? 'Remove downvote' : 'Downvote'}
+				>
+					<i class="fa-solid fa-chevron-down text-xs"></i>
+				</IconButton>
+			</div>
+		</div>
+
+		<!-- Content -->
+		<div class="flex-1 min-w-0">
+			<div class="flex items-center gap-2 flex-wrap">
+				{#if item.category}
+					<i class="{board.getCategoryIcon(item.category)} text-sm text-foreground-secondary" aria-hidden="true"></i>
+				{/if}
+				<h3 class="text-[0.9375rem] font-semibold flex-1 leading-snug">
+					{item.title || item.message.slice(0, 80)}
+				</h3>
+				<Badge variant={getStatusBadgeVariant(item.status)} size="sm">
+					{item.status === 'new' ? 'Open' : item.status.charAt(0).toUpperCase() + item.status.slice(1)}
+				</Badge>
+			</div>
+
+			{#if item.title}
+				<p class="text-sm text-foreground-secondary mt-1.5 leading-relaxed line-clamp-2">{item.message}</p>
+			{/if}
+
+			{#if item.email}
+				<p class="text-[0.8125rem] text-foreground-tertiary mt-1.5 flex items-center gap-1">
+					<i class="fa-solid fa-envelope" aria-hidden="true"></i>
+					{item.email}
+				</p>
+			{/if}
+
+			<div class="flex items-center justify-between mt-2 text-[0.8125rem] text-foreground-tertiary">
+				<div class="flex items-center gap-3">
+					<span>{timeAgo(item.createdAt)}</span>
+					{#if item.adminResponse}
+						<span class="text-xs text-primary">
+							<i class="fa-solid fa-shield" aria-hidden="true"></i> Official response
+						</span>
+					{/if}
+				</div>
+				{#if item.responseCount > 0}
+					<span class="flex items-center gap-1" aria-label="{item.responseCount} {item.responseCount === 1 ? 'response' : 'responses'}">
+						<i class="fa-solid fa-comment" aria-hidden="true"></i>
+						{item.responseCount}
+					</span>
+				{/if}
+			</div>
+		</div>
+	</div>
+</article>
+
+<style>
+	.line-clamp-2 {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+</style>

package/dist/components/board/FeedbackList.svelte

@@ -1,58 +1,58 @@
-<script lang="ts">
-	import { Button, Spinner } from '@alliance-droid/svelte-component-library';
-	import type { BoardItem } from '../../api.js';
-	import type { FeedbackBoardState } from './state.svelte.js';
-	import FeedbackItem from './FeedbackItem.svelte';
-
-	interface Props {
-		board: FeedbackBoardState;
-		/** Called when an item is clicked. If not provided, items are not clickable. */
-		onSelect?: (item: BoardItem) => void;
-	}
-
-	let { board, onSelect }: Props = $props();
-</script>
-
-{#if board.loading}
-	<div class="text-center py-12 text-foreground-tertiary">
-		<Spinner />
-		<p class="mt-2">Loading...</p>
-	</div>
-{:else if board.error}
-	<div class="text-center py-12 text-foreground-tertiary">
-		<i class="fa-solid fa-exclamation-triangle text-2xl"></i>
-		<p class="mt-2">{board.error}</p>
-		<button
-			onclick={() => board.reload()}
-			class="mt-3 rounded-md bg-surface-hover px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-border"
-		>
-			<i class="fa-solid fa-rotate-right mr-1"></i> Retry
-		</button>
-	</div>
-{:else if board.items.length === 0}
-	<div class="text-center py-12 text-foreground-tertiary">
-		<i class="fa-solid fa-inbox text-3xl"></i>
-		<p class="mt-2">No feedback yet</p>
-		<p class="text-sm">Be the first to submit!</p>
-	</div>
-{:else}
-	<div class="flex flex-col gap-2">
-		{#each board.items as item (item.id)}
-			<FeedbackItem {board} {item} onclick={onSelect ? () => onSelect(item) : undefined} />
-		{/each}
-	</div>
-
-	{#if board.hasMore}
-		<div class="mt-4 text-center">
-			<Button
-				variant="neutral"
-				style="outline"
-				disabled={board.loadingMore}
-				loading={board.loadingMore}
-				onclick={() => board.loadMore()}
-			>
-				Load More ({board.items.length} of {board.total})
-			</Button>
-		</div>
-	{/if}
-{/if}
+<script lang="ts">
+	import { Button, Spinner } from '@alliance-droid/svelte-component-library';
+	import type { BoardItem } from '../../api.js';
+	import type { FeedbackBoardState } from './state.svelte.js';
+	import FeedbackItem from './FeedbackItem.svelte';
+
+	interface Props {
+		board: FeedbackBoardState;
+		/** Called when an item is clicked. If not provided, items are not clickable. */
+		onSelect?: (item: BoardItem) => void;
+	}
+
+	let { board, onSelect }: Props = $props();
+</script>
+
+{#if board.loading}
+	<div class="text-center py-12 text-foreground-tertiary">
+		<Spinner />
+		<p class="mt-2">Loading...</p>
+	</div>
+{:else if board.error}
+	<div class="text-center py-12 text-foreground-tertiary">
+		<i class="fa-solid fa-exclamation-triangle text-2xl"></i>
+		<p class="mt-2">{board.error}</p>
+		<button
+			onclick={() => board.reload()}
+			class="mt-3 rounded-md bg-surface-hover px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-border"
+		>
+			<i class="fa-solid fa-rotate-right mr-1"></i> Retry
+		</button>
+	</div>
+{:else if board.items.length === 0}
+	<div class="text-center py-12 text-foreground-tertiary">
+		<i class="fa-solid fa-inbox text-3xl"></i>
+		<p class="mt-2">No feedback yet</p>
+		<p class="text-sm">Be the first to submit!</p>
+	</div>
+{:else}
+	<div class="flex flex-col gap-2">
+		{#each board.items as item (item.id)}
+			<FeedbackItem {board} {item} onclick={onSelect ? () => onSelect(item) : undefined} />
+		{/each}
+	</div>
+
+	{#if board.hasMore}
+		<div class="mt-4 text-center">
+			<Button
+				variant="neutral"
+				style="outline"
+				disabled={board.loadingMore}
+				loading={board.loadingMore}
+				onclick={() => board.loadMore()}
+			>
+				Load More ({board.items.length} of {board.total})
+			</Button>
+		</div>
+	{/if}
+{/if}

package/dist/components/board/FeedbackSidebar.svelte

@@ -1,60 +1,60 @@
-<script lang="ts">
-	import { Divider, Select } from '@alliance-droid/svelte-component-library';
-	import type { FeedbackBoardState } from './state.svelte.js';
-
-	interface Props {
-		board: FeedbackBoardState;
-	}
-
-	let { board }: Props = $props();
-
-	const statusOptions = [
-		{ value: 'open', label: 'Open' },
-		{ value: 'resolved', label: 'Resolved' },
-		{ value: 'all', label: 'All' },
-	];
-
-	const sortOptions = [
-		{ 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)}
-		<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}
-
-	<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>
-</aside>
+<script lang="ts">
+	import { Divider, Select } from '@alliance-droid/svelte-component-library';
+	import type { FeedbackBoardState } from './state.svelte.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+	}
+
+	let { board }: Props = $props();
+
+	const statusOptions = [
+		{ value: 'open', label: 'Open' },
+		{ value: 'resolved', label: 'Resolved' },
+		{ value: 'all', label: 'All' },
+	];
+
+	const sortOptions = [
+		{ 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)}
+		<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}
+
+	<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>
+</aside>