feat(frontend): add header, filter bar, and sorting store for files page

- sorting.ts: per-section sort store (sort field + order) persisted to localStorage - dsl.ts: build/parse DSL filter strings ({t=uuid,&,|,!,...}) - Header.svelte: sort dropdown, asc/desc toggle, filter toggle button - FilterBar.svelte: tag token picker with operator buttons, search, apply/reset - files/+page.svelte: wired header + filter bar, resets pagination on sort/filter change - vite-mock-plugin.ts: added 5 mock tags for filter bar development Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-05 12:47:18 +03:00
parent e72d4822e9
commit 27d8215a0a
6 changed files with 544 additions and 6 deletions
@@ -0,0 +1,120 @@
+<script lang="ts">
+	import type { FileSortField, SortOrder } from '$lib/stores/sorting';
+
+	interface Props {
+		sortOptions: { value: string; label: string }[];
+		sort: string;
+		order: SortOrder;
+		filterActive?: boolean;
+		onSortChange: (sort: string) => void;
+		onOrderToggle: () => void;
+		onFilterToggle: () => void;
+	}
+
+	let {
+		sortOptions,
+		sort,
+		order,
+		filterActive = false,
+		onSortChange,
+		onOrderToggle,
+		onFilterToggle,
+	}: Props = $props();
+</script>
+
+<header>
+	<div class="controls">
+		<select
+			class="sort-select"
+			value={sort}
+			onchange={(e) => onSortChange((e.currentTarget as HTMLSelectElement).value)}
+		>
+			{#each sortOptions as opt}
+				<option value={opt.value}>{opt.label}</option>
+			{/each}
+		</select>
+
+		<button class="icon-btn order-btn" onclick={onOrderToggle} title={order === 'asc' ? 'Ascending' : 'Descending'}>
+			{#if order === 'asc'}
+				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+					<path d="M4 10L8 6L12 10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			{:else}
+				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+					<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			{/if}
+		</button>
+
+		<button
+			class="icon-btn filter-btn"
+			class:active={filterActive}
+			onclick={onFilterToggle}
+			title="Filter"
+		>
+			<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+				<path d="M2 4h12M4 8h8M6 12h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+			</svg>
+		</button>
+	</div>
+</header>
+
+<style>
+	header {
+		display: flex;
+		align-items: center;
+		padding: 6px 10px;
+		background-color: var(--color-bg-primary);
+		border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
+		gap: 6px;
+		flex-shrink: 0;
+	}
+
+	.controls {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		margin-left: auto;
+	}
+
+	.sort-select {
+		height: 30px;
+		padding: 0 8px;
+		border-radius: 6px;
+		border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
+		background-color: var(--color-bg-elevated);
+		color: var(--color-text-primary);
+		font-size: 0.85rem;
+		font-family: inherit;
+		cursor: pointer;
+		outline: none;
+	}
+
+	.sort-select:focus {
+		border-color: var(--color-accent);
+	}
+
+	.icon-btn {
+		width: 30px;
+		height: 30px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 6px;
+		border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
+		background-color: var(--color-bg-elevated);
+		color: var(--color-text-muted);
+		cursor: pointer;
+	}
+
+	.icon-btn:hover {
+		color: var(--color-text-primary);
+		border-color: var(--color-accent);
+	}
+
+	.icon-btn.active {
+		background-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-bg-elevated));
+		color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+</style>