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

package/dist/components/FeedbackBoard.svelte

@@ -0,0 +1,842 @@
+<script lang="ts">
+	import { createStatusClient, type BoardItem, type BoardCategory } from '../api.js';
+
+	interface Props {
+		apiUrl: string;
+		apiKey: string;
+		/** Category labels and icons — order determines sidebar order */
+		categoryConfig?: Record<string, { label?: string; icon?: string; description?: string }>;
+		/** Title shown at the top */
+		title?: string;
+		/** Show the submit form inline */
+		showSubmit?: boolean;
+		/** Available categories for the submit form */
+		submitCategories?: string[];
+	}
+
+	let {
+		apiUrl,
+		apiKey,
+		categoryConfig = {},
+		title = 'Feedback Board',
+		showSubmit = true,
+		submitCategories = [],
+	}: Props = $props();
+
+	let client = $derived(createStatusClient({ apiUrl, apiKey }));
+	let items = $state<BoardItem[]>([]);
+	let categories = $state<BoardCategory[]>([]);
+	let total = $state(0);
+	let loading = $state(true);
+	let error = $state('');
+
+	let activeCategory = $state<string | null>(null);
+	let statusFilter = $state<'open' | 'resolved' | 'all'>('open');
+	let sortBy = $state<'votes' | 'newest'>('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('');
+	let submitCategory = $state('');
+	let submitEmail = $state('');
+	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() {
+		loading = true;
+		error = '';
+		try {
+			const data = await client.getBoard({
+				category: activeCategory || undefined,
+				status: statusFilter,
+				sort: sortBy,
+			});
+			items = data.items;
+			total = data.total;
+			categories = data.categories;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load';
+		} finally {
+			loading = false;
+		}
+	}
+
+	$effect(() => {
+		// Re-fetch when filters change
+		void activeCategory;
+		void statusFilter;
+		void sortBy;
+		load();
+	});
+
+	async function handleVote(itemId: string, direction: 'up' | 'down') {
+		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 {
+				votedItems = { ...votedItems, [itemId]: direction };
+			}
+		} catch {
+			// silently fail
+		}
+	}
+
+	async function toggleExpand(itemId: string) {
+		if (expandedId === itemId) {
+			expandedId = null;
+			return;
+		}
+		expandedId = itemId;
+		if (!responses[itemId]) {
+			loadingResponses = { ...loadingResponses, [itemId]: true };
+			try {
+				const data = await client.getResponses(itemId);
+				responses = { ...responses, [itemId]: data.responses };
+			} catch {
+				responses = { ...responses, [itemId]: [] };
+			} finally {
+				loadingResponses = { ...loadingResponses, [itemId]: false };
+			}
+		}
+	}
+
+	async function handleSubmit() {
+		if (!submitMessage.trim()) return;
+		submitting = true;
+		try {
+			await client.submitFeedback({
+				title: submitTitle.trim() || undefined,
+				message: submitMessage.trim(),
+				category: submitCategory || undefined,
+				email: submitEmail.trim() || undefined,
+				pageUrl: window.location.href,
+			});
+			submitSuccess = true;
+			submitTitle = '';
+			submitMessage = '';
+			submitCategory = '';
+			submitEmail = '';
+			setTimeout(() => {
+				submitSuccess = false;
+				showForm = false;
+			}, 2000);
+			// Reload board
+			await load();
+		} catch {
+			// ignore
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function getCategoryIcon(name: string): string {
+		return categoryConfig[name]?.icon || 'fa-solid fa-circle';
+	}
+
+	function getCategoryLabel(name: string): string {
+		return categoryConfig[name]?.label || name;
+	}
+
+	function getCategoryDescription(name: string): string {
+		return categoryConfig[name]?.description || '';
+	}
+
+	function timeAgo(timestamp: number): string {
+		const seconds = Math.floor((Date.now() - timestamp) / 1000);
+		if (seconds < 60) return 'just now';
+		if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+		if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+		const days = Math.floor(seconds / 86400);
+		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}
+
+			<hr class="sf-sidebar-divider" />
+
+			<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>
+
+			<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>
+
+		<!-- 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>
+					{/if}
+				</div>
+				{#if showSubmit}
+					<button class="sf-submit-btn" onclick={() => (showForm = !showForm)}>
+						<i class="fa-solid fa-plus"></i> Submit
+					</button>
+				{/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"
+							bind:value={submitTitle}
+							placeholder="Title (optional)"
+							class="sf-input"
+						/>
+						<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>
+							{/if}
+							<input
+								type="email"
+								bind:value={submitEmail}
+								placeholder="Email (optional)"
+								class="sf-input sf-input-sm"
+							/>
+							<button
+								class="sf-submit-btn"
+								disabled={submitting || !submitMessage.trim()}
+								onclick={handleSubmit}
+							>
+								{submitting ? 'Sending...' : '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">
+							<!-- Vote column -->
+							<div class="sf-vote-col">
+								<button
+									class="sf-vote-btn"
+									class:sf-voted={votedItems[item.id] === 'up'}
+									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'}
+									onclick={() => handleVote(item.id, 'down')}
+									aria-label="Downvote"
+								>
+									<i class="fa-solid fa-chevron-down"></i>
+								</button>
+							</div>
+
+							<!-- Content -->
+							<div class="sf-item-content">
+								<div class="sf-item-header">
+									{#if item.category}
+										<span class="sf-item-category">
+											<i class={getCategoryIcon(item.category)}></i>
+										</span>
+									{/if}
+									<h3 class="sf-item-title">
+										{item.title || item.message.slice(0, 80)}
+									</h3>
+									<span class="sf-item-status" data-status={item.status}>
+										{item.status === 'new' ? 'Open' : item.status.charAt(0).toUpperCase() + item.status.slice(1)}
+									</span>
+								</div>
+
+								{#if item.title}
+									<p class="sf-item-message">{item.message}</p>
+								{/if}
+
+								<div class="sf-item-footer">
+									<span class="sf-item-time">{timeAgo(item.createdAt)}</span>
+									{#if item.responseCount > 0}
+										<button class="sf-item-responses" 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>
+									{/if}
+								</div>
+
+								<!-- Expanded responses -->
+								{#if expandedId === item.id}
+									<div class="sf-responses">
+										{#if loadingResponses[item.id]}
+											<p class="sf-responses-loading"><i class="fa-solid fa-spinner fa-spin"></i> 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}
+														</span>
+														<span class="sf-response-time">{timeAgo(resp.createdAt)}</span>
+													</div>
+													<p class="sf-response-message">{resp.message}</p>
+												</div>
+											{/each}
+										{:else}
+											<p class="sf-responses-empty">No responses yet.</p>
+										{/if}
+									</div>
+								{/if}
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</main>
+	</div>
+</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>