@alliance-droid/status-feedback-system 0.2.0 → 0.3.0

package/dist/components/FeedbackBoard.svelte

@@ -1,5 +1,16 @@
 <script lang="ts">
 	import { createStatusClient, type BoardItem, type BoardCategory } from '../api.js';
+	import {
+		Card,
+		Button,
+		Badge,
+		Select,
+		Input,
+		Textarea,
+		Spinner,
+		Divider,
+		IconButton,
+	} from '@alliance-droid/svelte-component-library';
 
 	interface Props {
 		apiUrl: string;
@@ -31,15 +42,13 @@
 	let error = $state('');
 
 	let activeCategory = $state<string | null>(null);
-	let statusFilter = $state<'open' | 'resolved' | 'all'>('open');
-	let sortBy = $state<'votes' | 'newest'>('votes');
+	let statusFilter = $state<string>('open');
+	let sortBy = $state<string>('votes');
 
-	// Expanded item for viewing responses
 	let expandedId = $state<string | null>(null);
 	let responses = $state<Record<string, { message: string; author: string | null; createdAt: number }[]>>({});
 	let loadingResponses = $state<Record<string, boolean>>({});
 
-	// Submit form
 	let showForm = $state(false);
 	let submitTitle = $state('');
 	let submitMessage = $state('');
@@ -48,7 +57,6 @@
 	let submitting = $state(false);
 	let submitSuccess = $state(false);
 
-	// Voting state (tracks which items the user voted on this session)
 	let votedItems = $state<Record<string, 'up' | 'down'>>({});
 
 	async function load() {
@@ -57,8 +65,8 @@
 		try {
 			const data = await client.getBoard({
 				category: activeCategory || undefined,
-				status: statusFilter,
-				sort: sortBy,
+				status: statusFilter as 'open' | 'resolved' | 'all',
+				sort: sortBy as 'votes' | 'newest',
 			});
 			items = data.items;
 			total = data.total;
@@ -71,7 +79,6 @@
 	}
 
 	$effect(() => {
-		// Re-fetch when filters change
 		void activeCategory;
 		void statusFilter;
 		void sortBy;
@@ -82,12 +89,9 @@
 		const prev = votedItems[itemId];
 		try {
 			const result = await client.vote(itemId, direction);
-			// Update local state
 			const item = items.find((i) => i.id === itemId);
 			if (item) item.votes = result.votes;
-
 			if (prev === direction) {
-				// Toggled off
 				delete votedItems[itemId];
 				votedItems = { ...votedItems };
 			} else {
@@ -137,7 +141,6 @@
 				submitSuccess = false;
 				showForm = false;
 			}, 2000);
-			// Reload board
 			await load();
 		} catch {
 			// ignore
@@ -167,676 +170,248 @@
 		if (days < 30) return `${days}d ago`;
 		return new Date(timestamp).toLocaleDateString();
 	}
-</script>
-
-<div class="sf-board">
-	<div class="sf-board-layout">
-		<!-- Sidebar -->
-		<aside class="sf-board-sidebar">
-			<button
-				class="sf-sidebar-item"
-				class:sf-sidebar-active={activeCategory === null}
-				onclick={() => (activeCategory = null)}
-			>
-				<i class="fa-solid fa-layer-group"></i>
-				<span>All</span>
-				<span class="sf-sidebar-count">{total}</span>
-			</button>
 
-			{#each categories as cat}
-				<button
-					class="sf-sidebar-item"
-					class:sf-sidebar-active={activeCategory === cat.name}
-					onclick={() => (activeCategory = activeCategory === cat.name ? null : cat.name)}
-				>
-					<i class={getCategoryIcon(cat.name)}></i>
-					<span>{getCategoryLabel(cat.name)}</span>
-					<span class="sf-sidebar-count">{cat.count}</span>
-				</button>
-			{/each}
+	function getStatusBadgeVariant(status: string): 'success' | 'neutral' | 'info' {
+		if (status === 'new' || status === 'reviewed') return 'success';
+		if (status === 'resolved') return 'neutral';
+		return 'info';
+	}
 
-			<hr class="sf-sidebar-divider" />
+	const statusOptions = [
+		{ value: 'open', label: 'Open' },
+		{ value: 'resolved', label: 'Resolved' },
+		{ value: 'all', label: 'All' },
+	];
 
-			<div class="sf-sidebar-section">
-				<label class="sf-sidebar-label">Status</label>
-				<select bind:value={statusFilter} class="sf-select">
-					<option value="open">Open</option>
-					<option value="resolved">Resolved</option>
-					<option value="all">All</option>
-				</select>
-			</div>
+	const sortOptions = [
+		{ value: 'votes', label: 'Most Votes' },
+		{ value: 'newest', label: 'Newest' },
+	];
 
-			<div class="sf-sidebar-section">
-				<label class="sf-sidebar-label">Sort By</label>
-				<select bind:value={sortBy} class="sf-select">
-					<option value="votes">Most Votes</option>
-					<option value="newest">Newest</option>
-				</select>
-			</div>
-		</aside>
+	let submitCategoryOptions = $derived(
+		submitCategories.map((c) => ({ value: c, label: getCategoryLabel(c) }))
+	);
+</script>
 
-		<!-- Main content -->
-		<main class="sf-board-main">
-			<div class="sf-board-header">
-				<div>
-					<h2 class="sf-board-title">
-						{#if activeCategory}
-							<i class={getCategoryIcon(activeCategory)}></i>
-							{getCategoryLabel(activeCategory)}
-						{:else}
-							{title}
-						{/if}
-					</h2>
-					{#if activeCategory && getCategoryDescription(activeCategory)}
-						<p class="sf-board-subtitle">{getCategoryDescription(activeCategory)}</p>
+<div class="flex gap-6 min-h-[400px]">
+	<!-- Sidebar -->
+	<aside class="w-56 flex-shrink-0 flex flex-col gap-1">
+		<button
+			class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
+				{activeCategory === null ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
+			onclick={() => (activeCategory = null)}
+		>
+			<i class="fa-solid fa-layer-group"></i>
+			<span>All</span>
+			<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{total}</span>
+		</button>
+
+		{#each categories as cat}
+			<button
+				class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
+					{activeCategory === cat.name ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
+				onclick={() => (activeCategory = activeCategory === cat.name ? null : cat.name)}
+			>
+				<i class={getCategoryIcon(cat.name)}></i>
+				<span>{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={statusFilter}
+			/>
+			<Select
+				label="Sort By"
+				options={sortOptions}
+				bind:value={sortBy}
+			/>
+		</div>
+	</aside>
+
+	<!-- Main -->
+	<main class="flex-1 min-w-0">
+		<div class="flex items-start justify-between mb-4">
+			<div>
+				<h2 class="text-xl font-bold flex items-center gap-2">
+					{#if activeCategory}
+						<i class={getCategoryIcon(activeCategory)}></i>
+						{getCategoryLabel(activeCategory)}
+					{:else}
+						{title}
 					{/if}
-				</div>
-				{#if showSubmit}
-					<button class="sf-submit-btn" onclick={() => (showForm = !showForm)}>
-						<i class="fa-solid fa-plus"></i> Submit
-					</button>
+				</h2>
+				{#if activeCategory && getCategoryDescription(activeCategory)}
+					<p class="text-sm text-foreground-secondary mt-1">{getCategoryDescription(activeCategory)}</p>
 				{/if}
 			</div>
-
-			<!-- Submit form -->
-			{#if showForm}
-				<div class="sf-submit-form">
-					{#if submitSuccess}
-						<div class="sf-success">
-							<i class="fa-solid fa-check-circle"></i> Submitted! It will appear once reviewed.
-						</div>
-					{:else}
-						<input
-							type="text"
+			{#if showSubmit}
+				<Button variant="primary" onclick={() => (showForm = !showForm)}>
+					<i class="fa-solid fa-plus mr-1.5"></i> Submit
+				</Button>
+			{/if}
+		</div>
+
+		<!-- Submit form -->
+		{#if showForm}
+			<Card variant="outlined" padding="md" class="mb-4">
+				{#if submitSuccess}
+					<div class="text-center py-2 text-green-400 font-semibold">
+						<i class="fa-solid fa-check-circle mr-1"></i> Submitted! It will appear once reviewed.
+					</div>
+				{:else}
+					<div class="space-y-3">
+						<Input
 							bind:value={submitTitle}
 							placeholder="Title (optional)"
-							class="sf-input"
 						/>
-						<textarea
+						<Textarea
 							bind:value={submitMessage}
 							placeholder="Describe your feedback..."
-							rows="3"
-							class="sf-textarea"
-						></textarea>
-						<div class="sf-submit-row">
-							{#if submitCategories.length > 0}
-								<select bind:value={submitCategory} class="sf-select">
-									<option value="">Category...</option>
-									{#each submitCategories as cat}
-										<option value={cat}>{getCategoryLabel(cat)}</option>
-									{/each}
-								</select>
+							rows={3}
+						/>
+						<div class="flex gap-2 items-center flex-wrap">
+							{#if submitCategoryOptions.length > 0}
+								<div class="min-w-[140px]">
+									<Select
+										options={[{ value: '', label: 'Category...' }, ...submitCategoryOptions]}
+										bind:value={submitCategory}
+									/>
+								</div>
 							{/if}
-							<input
-								type="email"
-								bind:value={submitEmail}
-								placeholder="Email (optional)"
-								class="sf-input sf-input-sm"
-							/>
-							<button
-								class="sf-submit-btn"
+							<div class="flex-1">
+								<Input
+									type="email"
+									bind:value={submitEmail}
+									placeholder="Email (optional)"
+								/>
+							</div>
+							<Button
+								variant="primary"
 								disabled={submitting || !submitMessage.trim()}
+								loading={submitting}
 								onclick={handleSubmit}
 							>
-								{submitting ? 'Sending...' : 'Submit'}
-							</button>
+								Submit
+							</Button>
 						</div>
-					{/if}
-				</div>
-			{/if}
-
-			<!-- Items -->
-			{#if loading}
-				<div class="sf-empty">
-					<i class="fa-solid fa-spinner fa-spin"></i>
-					<p>Loading...</p>
-				</div>
-			{:else if error}
-				<div class="sf-empty">
-					<i class="fa-solid fa-exclamation-triangle"></i>
-					<p>{error}</p>
-				</div>
-			{:else if items.length === 0}
-				<div class="sf-empty">
-					<i class="fa-solid fa-inbox"></i>
-					<p>No feedback yet</p>
-					<p class="sf-empty-sub">Be the first to submit!</p>
-				</div>
-			{:else}
-				<div class="sf-items">
-					{#each items as item (item.id)}
-						<div class="sf-item">
+					</div>
+				{/if}
+			</Card>
+		{/if}
+
+		<!-- Items -->
+		{#if loading}
+			<div class="text-center py-12 text-foreground-tertiary">
+				<Spinner />
+				<p class="mt-2">Loading...</p>
+			</div>
+		{:else if error}
+			<div class="text-center py-12 text-foreground-tertiary">
+				<i class="fa-solid fa-exclamation-triangle text-2xl"></i>
+				<p class="mt-2">{error}</p>
+			</div>
+		{:else if 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 items as item (item.id)}
+					<Card variant="outlined" padding="none" hover>
+						<div class="flex gap-3 p-4">
 							<!-- Vote column -->
-							<div class="sf-vote-col">
-								<button
-									class="sf-vote-btn"
-									class:sf-voted={votedItems[item.id] === 'up'}
+							<div class="flex flex-col items-center gap-0.5 min-w-[2.5rem]">
+								<IconButton
+									size="sm"
+									variant={votedItems[item.id] === 'up' ? 'primary' : 'neutral'}
 									onclick={() => handleVote(item.id, 'up')}
 									aria-label="Upvote"
 								>
-									<i class="fa-solid fa-chevron-up"></i>
-								</button>
-								<span class="sf-vote-count">{item.votes}</span>
-								<button
-									class="sf-vote-btn"
-									class:sf-voted={votedItems[item.id] === 'down'}
+									<i class="fa-solid fa-chevron-up text-xs"></i>
+								</IconButton>
+								<span class="text-sm font-bold">{item.votes}</span>
+								<IconButton
+									size="sm"
+									variant={votedItems[item.id] === 'down' ? 'primary' : 'neutral'}
 									onclick={() => handleVote(item.id, 'down')}
 									aria-label="Downvote"
 								>
-									<i class="fa-solid fa-chevron-down"></i>
-								</button>
+									<i class="fa-solid fa-chevron-down text-xs"></i>
+								</IconButton>
 							</div>
 
 							<!-- Content -->
-							<div class="sf-item-content">
-								<div class="sf-item-header">
+							<div class="flex-1 min-w-0">
+								<div class="flex items-center gap-2 flex-wrap">
 									{#if item.category}
-										<span class="sf-item-category">
-											<i class={getCategoryIcon(item.category)}></i>
-										</span>
+										<i class="{getCategoryIcon(item.category)} text-sm text-foreground-secondary"></i>
 									{/if}
-									<h3 class="sf-item-title">
+									<h3 class="text-[0.9375rem] font-semibold flex-1">
 										{item.title || item.message.slice(0, 80)}
 									</h3>
-									<span class="sf-item-status" data-status={item.status}>
+									<Badge variant={getStatusBadgeVariant(item.status)} size="sm">
 										{item.status === 'new' ? 'Open' : item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-									</span>
+									</Badge>
 								</div>
 
 								{#if item.title}
-									<p class="sf-item-message">{item.message}</p>
+									<p class="text-sm text-foreground-secondary mt-1.5 leading-relaxed">{item.message}</p>
 								{/if}
 
-								<div class="sf-item-footer">
-									<span class="sf-item-time">{timeAgo(item.createdAt)}</span>
+								<div class="flex items-center gap-3 mt-2 text-[0.8125rem] text-foreground-tertiary">
+									<span>{timeAgo(item.createdAt)}</span>
 									{#if item.responseCount > 0}
-										<button class="sf-item-responses" onclick={() => toggleExpand(item.id)}>
+										<button
+											class="flex items-center gap-1 hover:text-foreground transition-colors bg-transparent border-none cursor-pointer text-[0.8125rem] text-foreground-tertiary p-0"
+											onclick={() => toggleExpand(item.id)}
+										>
 											<i class="fa-solid fa-comment"></i>
 											{item.responseCount} {item.responseCount === 1 ? 'response' : 'responses'}
 										</button>
 									{/if}
 									{#if item.adminResponse}
-										<span class="sf-item-badge">
-											<i class="fa-solid fa-shield-check"></i> Official response
+										<span class="text-xs text-primary">
+											<i class="fa-solid fa-shield"></i> Official response
 										</span>
 									{/if}
 								</div>
 
 								<!-- Expanded responses -->
 								{#if expandedId === item.id}
-									<div class="sf-responses">
+									<div class="mt-3 pt-3 border-t border-border space-y-2">
 										{#if loadingResponses[item.id]}
-											<p class="sf-responses-loading"><i class="fa-solid fa-spinner fa-spin"></i> Loading...</p>
+											<p class="text-sm text-foreground-tertiary"><Spinner /> Loading...</p>
 										{:else if responses[item.id]?.length}
 											{#each responses[item.id] as resp}
-												<div class="sf-response">
-													<div class="sf-response-header">
-														<span class="sf-response-author">
-															{#if resp.author}
-																<i class="fa-solid fa-shield"></i> {resp.author}
-															{:else}
-																Team
-															{/if}
+												<div class="p-3 rounded-lg bg-surface">
+													<div class="flex items-center justify-between mb-1">
+														<span class="text-[0.8125rem] font-semibold text-primary">
+															<i class="fa-solid fa-shield mr-1"></i>
+															{resp.author || 'Team'}
 														</span>
-														<span class="sf-response-time">{timeAgo(resp.createdAt)}</span>
+														<span class="text-xs text-foreground-tertiary">{timeAgo(resp.createdAt)}</span>
 													</div>
-													<p class="sf-response-message">{resp.message}</p>
+													<p class="text-sm text-foreground-secondary leading-relaxed m-0">{resp.message}</p>
 												</div>
 											{/each}
 										{:else}
-											<p class="sf-responses-empty">No responses yet.</p>
+											<p class="text-sm text-foreground-tertiary">No responses yet.</p>
 										{/if}
 									</div>
 								{/if}
 							</div>
 						</div>
-					{/each}
-				</div>
-			{/if}
-		</main>
-	</div>
+					</Card>
+				{/each}
+			</div>
+		{/if}
+	</main>
 </div>
-
-<style>
-	.sf-board {
-		--sf-bg: var(--color-surface, #0f172a);
-		--sf-bg-secondary: var(--color-surface-secondary, #1e293b);
-		--sf-bg-hover: var(--color-surface-hover, #334155);
-		--sf-text: var(--color-foreground, #e2e8f0);
-		--sf-text-secondary: var(--color-foreground-secondary, #94a3b8);
-		--sf-text-tertiary: var(--color-foreground-tertiary, #64748b);
-		--sf-border: var(--color-border, #334155);
-		--sf-primary: var(--color-primary, #3b82f6);
-		--sf-primary-text: var(--color-primary-foreground, #ffffff);
-		--sf-success: #22c55e;
-		--sf-radius: 0.5rem;
-		font-family: inherit;
-		color: var(--sf-text);
-	}
-
-	.sf-board-layout {
-		display: flex;
-		gap: 1.5rem;
-		min-height: 400px;
-	}
-
-	/* Sidebar */
-	.sf-board-sidebar {
-		width: 220px;
-		flex-shrink: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-	}
-
-	.sf-sidebar-item {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 0.75rem;
-		border-radius: var(--sf-radius);
-		border: none;
-		background: transparent;
-		color: var(--sf-text-secondary);
-		cursor: pointer;
-		font-size: 0.875rem;
-		text-align: left;
-		width: 100%;
-		transition: all 0.15s;
-	}
-
-	.sf-sidebar-item:hover {
-		background: var(--sf-bg-hover);
-		color: var(--sf-text);
-	}
-
-	.sf-sidebar-active {
-		background: var(--sf-bg-secondary);
-		color: var(--sf-text);
-		font-weight: 600;
-	}
-
-	.sf-sidebar-count {
-		margin-left: auto;
-		background: var(--sf-bg-hover);
-		padding: 0.125rem 0.5rem;
-		border-radius: 999px;
-		font-size: 0.75rem;
-	}
-
-	.sf-sidebar-divider {
-		border: none;
-		border-top: 1px solid var(--sf-border);
-		margin: 0.5rem 0;
-	}
-
-	.sf-sidebar-section {
-		padding: 0.25rem 0.75rem;
-	}
-
-	.sf-sidebar-label {
-		display: block;
-		font-size: 0.75rem;
-		color: var(--sf-text-tertiary);
-		margin-bottom: 0.25rem;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
-	/* Main */
-	.sf-board-main {
-		flex: 1;
-		min-width: 0;
-	}
-
-	.sf-board-header {
-		display: flex;
-		align-items: flex-start;
-		justify-content: space-between;
-		margin-bottom: 1rem;
-	}
-
-	.sf-board-title {
-		font-size: 1.25rem;
-		font-weight: 700;
-		margin: 0;
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.sf-board-subtitle {
-		font-size: 0.875rem;
-		color: var(--sf-text-secondary);
-		margin: 0.25rem 0 0;
-	}
-
-	/* Items */
-	.sf-items {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.sf-item {
-		display: flex;
-		gap: 0.75rem;
-		padding: 1rem;
-		background: var(--sf-bg-secondary);
-		border: 1px solid var(--sf-border);
-		border-radius: var(--sf-radius);
-		transition: border-color 0.15s;
-	}
-
-	.sf-item:hover {
-		border-color: var(--sf-text-tertiary);
-	}
-
-	/* Vote column */
-	.sf-vote-col {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0.125rem;
-		min-width: 2.5rem;
-	}
-
-	.sf-vote-btn {
-		background: none;
-		border: 1px solid transparent;
-		color: var(--sf-text-tertiary);
-		cursor: pointer;
-		padding: 0.25rem;
-		border-radius: 0.25rem;
-		font-size: 0.75rem;
-		transition: all 0.15s;
-		line-height: 1;
-	}
-
-	.sf-vote-btn:hover {
-		color: var(--sf-primary);
-		border-color: var(--sf-primary);
-	}
-
-	.sf-voted {
-		color: var(--sf-primary) !important;
-		border-color: var(--sf-primary) !important;
-		background: color-mix(in srgb, var(--sf-primary) 10%, transparent);
-	}
-
-	.sf-vote-count {
-		font-size: 0.875rem;
-		font-weight: 700;
-		color: var(--sf-text);
-	}
-
-	/* Item content */
-	.sf-item-content {
-		flex: 1;
-		min-width: 0;
-	}
-
-	.sf-item-header {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		flex-wrap: wrap;
-	}
-
-	.sf-item-category {
-		font-size: 0.875rem;
-	}
-
-	.sf-item-title {
-		font-size: 0.9375rem;
-		font-weight: 600;
-		margin: 0;
-		flex: 1;
-	}
-
-	.sf-item-status {
-		font-size: 0.75rem;
-		padding: 0.125rem 0.5rem;
-		border-radius: 999px;
-		font-weight: 500;
-	}
-
-	.sf-item-status[data-status='new'],
-	.sf-item-status[data-status='reviewed'] {
-		background: color-mix(in srgb, var(--sf-success) 15%, transparent);
-		color: var(--sf-success);
-	}
-
-	.sf-item-status[data-status='resolved'] {
-		background: color-mix(in srgb, var(--sf-text-tertiary) 15%, transparent);
-		color: var(--sf-text-tertiary);
-	}
-
-	.sf-item-message {
-		font-size: 0.875rem;
-		color: var(--sf-text-secondary);
-		margin: 0.5rem 0 0;
-		line-height: 1.5;
-	}
-
-	.sf-item-footer {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		margin-top: 0.5rem;
-		font-size: 0.8125rem;
-		color: var(--sf-text-tertiary);
-	}
-
-	.sf-item-responses {
-		background: none;
-		border: none;
-		color: var(--sf-text-tertiary);
-		cursor: pointer;
-		font-size: 0.8125rem;
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0;
-	}
-
-	.sf-item-responses:hover {
-		color: var(--sf-text);
-	}
-
-	.sf-item-badge {
-		font-size: 0.75rem;
-		color: var(--sf-primary);
-	}
-
-	/* Responses */
-	.sf-responses {
-		margin-top: 0.75rem;
-		padding-top: 0.75rem;
-		border-top: 1px solid var(--sf-border);
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.sf-response {
-		padding: 0.5rem 0.75rem;
-		background: var(--sf-bg);
-		border-radius: var(--sf-radius);
-	}
-
-	.sf-response-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 0.25rem;
-	}
-
-	.sf-response-author {
-		font-size: 0.8125rem;
-		font-weight: 600;
-		color: var(--sf-primary);
-	}
-
-	.sf-response-time {
-		font-size: 0.75rem;
-		color: var(--sf-text-tertiary);
-	}
-
-	.sf-response-message {
-		font-size: 0.875rem;
-		color: var(--sf-text-secondary);
-		margin: 0;
-		line-height: 1.5;
-	}
-
-	.sf-responses-loading,
-	.sf-responses-empty {
-		font-size: 0.8125rem;
-		color: var(--sf-text-tertiary);
-		margin: 0;
-	}
-
-	/* Empty state */
-	.sf-empty {
-		text-align: center;
-		padding: 3rem 1rem;
-		color: var(--sf-text-tertiary);
-	}
-
-	.sf-empty i {
-		font-size: 2rem;
-		margin-bottom: 0.5rem;
-	}
-
-	.sf-empty p {
-		margin: 0.25rem 0;
-	}
-
-	.sf-empty-sub {
-		font-size: 0.875rem;
-	}
-
-	/* Form elements */
-	.sf-select {
-		width: 100%;
-		padding: 0.375rem 0.5rem;
-		background: var(--sf-bg-secondary);
-		border: 1px solid var(--sf-border);
-		border-radius: 0.375rem;
-		color: var(--sf-text);
-		font-size: 0.8125rem;
-		cursor: pointer;
-	}
-
-	.sf-submit-btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.5rem 1rem;
-		background: var(--sf-primary);
-		color: var(--sf-primary-text);
-		border: none;
-		border-radius: var(--sf-radius);
-		font-size: 0.875rem;
-		font-weight: 600;
-		cursor: pointer;
-		transition: opacity 0.15s;
-		white-space: nowrap;
-	}
-
-	.sf-submit-btn:hover {
-		opacity: 0.9;
-	}
-
-	.sf-submit-btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.sf-submit-form {
-		padding: 1rem;
-		margin-bottom: 1rem;
-		background: var(--sf-bg-secondary);
-		border: 1px solid var(--sf-border);
-		border-radius: var(--sf-radius);
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.sf-input,
-	.sf-textarea {
-		width: 100%;
-		padding: 0.5rem 0.75rem;
-		background: var(--sf-bg);
-		border: 1px solid var(--sf-border);
-		border-radius: 0.375rem;
-		color: var(--sf-text);
-		font-size: 0.875rem;
-		font-family: inherit;
-		resize: vertical;
-		box-sizing: border-box;
-	}
-
-	.sf-input:focus,
-	.sf-textarea:focus {
-		outline: none;
-		border-color: var(--sf-primary);
-	}
-
-	.sf-input-sm {
-		flex: 1;
-	}
-
-	.sf-submit-row {
-		display: flex;
-		gap: 0.5rem;
-		align-items: center;
-	}
-
-	.sf-submit-row .sf-select {
-		width: auto;
-		min-width: 120px;
-	}
-
-	.sf-success {
-		color: var(--sf-success);
-		text-align: center;
-		padding: 0.5rem;
-		font-weight: 600;
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.sf-board-layout {
-			flex-direction: column;
-		}
-
-		.sf-board-sidebar {
-			width: 100%;
-			flex-direction: row;
-			flex-wrap: wrap;
-			gap: 0.25rem;
-		}
-
-		.sf-sidebar-divider {
-			display: none;
-		}
-
-		.sf-sidebar-section {
-			display: flex;
-			align-items: center;
-			gap: 0.5rem;
-		}
-
-		.sf-sidebar-label {
-			margin: 0;
-			white-space: nowrap;
-		}
-
-		.sf-submit-row {
-			flex-wrap: wrap;
-		}
-	}
-</style>