Fix affirmation list and add frequencies page

src/lib/components/containers/Window.svelte

@@ -2,6 +2,6 @@
 	let { children } = $props();
 </script>
 
-<div class="flex min-h-0 flex-1 items-center justify-center">
+<div class="flex min-h-0 flex-1 items-center justify-center overflow-auto">
 	{@render children()}
 </div>

src/lib/components/forms/frequency/FrequencyForm.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	type Frequency = {
+		id?: number;
+		name?: string;
+		value?: number;
+	};
+
+	type FormData = {
+		id?: string;
+		name?: string;
+		value?: string;
+	};
+
+	type Props = {
+		frequency?: Frequency;
+		form?: FormData;
+		action: string;
+		submitLabel?: string;
+	};
+
+	let { frequency = {}, form, action, submitLabel = 'Save Frequency' }: Props = $props();
+</script>
+
+<form method="POST" {action} class="space-y-5">
+	{#if frequency.id || form?.id}
+		<input type="hidden" name="id" value={form?.id ?? frequency.id} />
+	{/if}
+
+	<div>
+		<label for="name" class="mb-1 block text-sm font-medium text-gray-700">Name</label>
+		<input
+			type="text"
+			id="name"
+			name="name"
+			value={form?.name ?? frequency.name ?? ''}
+			required
+			class="w-full rounded-lg border border-gray-300 px-3 py-2 outline-none transition-shadow focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+		/>
+	</div>
+
+	<div>
+		<label for="value" class="mb-1 block text-sm font-medium text-gray-700">Frequency (Hz)</label>
+		<input
+			type="number"
+			id="value"
+			name="value"
+			value={form?.value ?? frequency.value ?? ''}
+			min="0"
+			step="0.01"
+			placeholder="e.g. 396"
+			required
+			class="w-full rounded-lg border border-gray-300 px-3 py-2 outline-none transition-shadow focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+		/>
+	</div>
+
+	<button
+		type="submit"
+		class="rounded-lg bg-blue-600 px-4 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-4 focus:ring-blue-200"
+	>
+		{submitLabel}
+	</button>
+</form>

src/lib/components/ui/AffirmationList/AffirmationList.svelte

@@ -122,7 +122,7 @@
 
 		<select
 			bind:value={categoryFilter}
-			class="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm outline-none transition-shadow focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+			class="min-w-40 rounded-lg border border-gray-300 bg-white px-3 py-2 pr-8 text-sm outline-none transition-shadow focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
 		>
 			<option value="">All Categories</option>
 			{#each categories as category}
@@ -132,7 +132,7 @@
 
 		<select
 			bind:value={frequencyFilter}
-			class="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm outline-none transition-shadow focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+			class="min-w-40 rounded-lg border border-gray-300 bg-white px-3 py-2 pr-8 text-sm outline-none transition-shadow focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
 		>
 			<option value="">All Frequencies</option>
 			{#each frequencies as frequency}

src/lib/components/ui/FrequencyList/FrequencyList.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	type Frequency = {
+		id: number;
+		name: string;
+		value: number;
+		_count?: {
+			affirmations: number;
+		};
+	};
+
+	type SortKey = 'name' | 'value' | 'affirmations';
+	type SortDirection = 'asc' | 'desc';
+
+	type Props = {
+		frequencies: Frequency[];
+	};
+
+	let { frequencies }: Props = $props();
+
+	let search = $state('');
+	let sortKey = $state<SortKey>('name');
+	let sortDirection = $state<SortDirection>('asc');
+
+	const filteredAndSorted = $derived(() => {
+		let result = frequencies;
+
+		if (search) {
+			const searchLower = search.toLowerCase();
+			result = result.filter(
+				(f) =>
+					f.name.toLowerCase().includes(searchLower) ||
+					f.value.toString().includes(searchLower)
+			);
+		}
+
+		result = [...result].sort((a, b) => {
+			let aVal: string | number;
+			let bVal: string | number;
+
+			switch (sortKey) {
+				case 'name':
+					aVal = a.name.toLowerCase();
+					bVal = b.name.toLowerCase();
+					break;
+				case 'value':
+					aVal = a.value;
+					bVal = b.value;
+					break;
+				case 'affirmations':
+					aVal = a._count?.affirmations ?? 0;
+					bVal = b._count?.affirmations ?? 0;
+					break;
+			}
+
+			if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
+			if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
+			return 0;
+		});
+
+		return result;
+	});
+
+	function toggleSort(key: SortKey) {
+		if (sortKey === key) {
+			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortKey = key;
+			sortDirection = 'asc';
+		}
+	}
+
+	function getSortIndicator(key: SortKey) {
+		if (sortKey !== key) return '\u21D5';
+		return sortDirection === 'asc' ? '\u2191' : '\u2193';
+	}
+
+	function clearFilters() {
+		search = '';
+	}
+
+	const hasActiveFilters = $derived(!!search);
+</script>
+
+<div class="flex flex-col gap-4">
+	<div class="flex flex-wrap items-center gap-3">
+		<input
+			type="text"
+			placeholder="Search frequencies..."
+			bind:value={search}
+			class="rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none transition-shadow focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+		/>
+
+		{#if hasActiveFilters}
+			<button
+				type="button"
+				onclick={clearFilters}
+				class="rounded-lg px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+			>
+				Clear filters
+			</button>
+		{/if}
+
+		<span class="ml-auto text-sm text-gray-500">
+			{filteredAndSorted().length} of {frequencies.length}
+		</span>
+	</div>
+
+	<div class="overflow-x-auto">
+		<table class="w-full border-collapse text-left text-sm">
+			<thead>
+				<tr class="border-b border-gray-200 bg-gray-50">
+					<th class="px-4 py-3 font-medium text-gray-700">
+						<button
+							type="button"
+							class="flex items-center gap-1 hover:text-gray-900"
+							onclick={() => toggleSort('name')}
+						>
+							Name
+							<span class="text-xs text-gray-400">{getSortIndicator('name')}</span>
+						</button>
+					</th>
+					<th class="px-4 py-3 text-right font-medium text-gray-700">
+						<button
+							type="button"
+							class="ml-auto flex items-center gap-1 hover:text-gray-900"
+							onclick={() => toggleSort('value')}
+						>
+							Frequency (Hz)
+							<span class="text-xs text-gray-400">{getSortIndicator('value')}</span>
+						</button>
+					</th>
+					<th class="px-4 py-3 text-right font-medium text-gray-700">
+						<button
+							type="button"
+							class="ml-auto flex items-center gap-1 hover:text-gray-900"
+							onclick={() => toggleSort('affirmations')}
+						>
+							Affirmations
+							<span class="text-xs text-gray-400">{getSortIndicator('affirmations')}</span>
+						</button>
+					</th>
+					<th class="px-4 py-3 font-medium text-gray-700"></th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each filteredAndSorted() as frequency}
+					<tr class="border-b border-gray-100 hover:bg-gray-50">
+						<td class="px-4 py-3 font-medium text-gray-900">{frequency.name}</td>
+						<td class="px-4 py-3 text-right text-gray-600">{frequency.value} Hz</td>
+						<td class="px-4 py-3 text-right text-gray-600">
+							{frequency._count?.affirmations ?? 0}
+						</td>
+						<td class="px-4 py-3 text-right">
+							<a
+								href="/frequencies/{frequency.id}"
+								class="text-blue-600 hover:text-blue-800 hover:underline"
+							>
+								Edit
+							</a>
+						</td>
+					</tr>
+				{:else}
+					<tr>
+						<td colspan="4" class="px-4 py-8 text-center text-gray-500">
+							{#if hasActiveFilters}
+								No frequencies match your filters
+							{:else}
+								No frequencies yet
+							{/if}
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+</div>