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>

src/routes/(protected)/+layout.svelte

@@ -5,8 +5,6 @@
  This layout also acts as a sort of 'gatekeeper' in that it is also the authorization layer.
 -->
 <script lang="ts">
-	import Window from '$lib/components/containers/Window.svelte';
-
 	const { children } = $props();
 
 	let adminExpanded = $state(true);
@@ -30,14 +28,15 @@
 			{#if adminExpanded}
 				<div class="ml-5 flex flex-col">
 					<a href="/affirmations" class="text-blue-600">Affirmations</a>
+					<a href="/frequencies"  class="text-blue-600">Solfeggio Frequencies</a>
 				</div>
 			{/if}
 		</div>
 		<!-- End Sidebar links -->
 	</div>
 	<!-- End Sidebar -->
-	 <!-- Page content within a "Window" -->
-	<Window>
+	<!-- Page content -->
+	<div class="min-h-0 flex-1 overflow-auto">
 		{@render children()}
-	</Window>
+	</div>
 </div>

src/routes/(protected)/affirmations/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import AffirmationForm from '$lib/components/forms/affirmation/AffirmationForm.svelte';
 	import Center from '$lib/components/containers/Center.svelte';
-	import Window from '$lib/components/containers/Window.svelte';
 	import type { ActionData, PageData } from './$types';
 	import AffirmationList from '$lib/components/ui/AffirmationList/AffirmationList.svelte';
 
@@ -15,8 +14,8 @@
 	});
 </script>
 
-<div class="flex h-full flex-col gap-6 p-6 mb-4">
-	<div class="flex items-center justify-between">
+<div class="flex h-full min-h-0 flex-col gap-6 p-6 mb-4">
+	<div class="flex shrink-0 items-center justify-between">
 		<h1 class="text-2xl font-semibold text-gray-900">Affirmations</h1>
 		<button
 			type="button"
@@ -28,9 +27,7 @@
 	</div>
 
 	{#if data.affirmations.length > 0}
-		<Window>
 		<AffirmationList affirmations={data.affirmations} />
-		</Window>
 	{:else}
 		<Center>
 			<div class="text-center">

src/routes/(protected)/frequencies/+page.server.ts

@@ -0,0 +1,47 @@
+import type { PageServerLoad } from './$types';
+import { prisma } from '$lib/db';
+import { fail, type Actions, type RequestEvent } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async () => {
+	const frequencies = await prisma.solfeggioFrequency.findMany({
+		include: {
+			_count: {
+				select: { affirmations: true }
+			}
+		}
+	});
+	return { frequencies };
+};
+
+export const actions: Actions = {
+	create: async ({ request }: RequestEvent) => {
+		const form = await request.formData();
+		const name = form.get('name') as string;
+		const value = Number(form.get('value'));
+
+		if (!name) {
+			return fail(400, { error: 'Name is required!', ...Object.fromEntries(form) });
+		}
+
+		if (!value || value <= 0) {
+			return fail(400, {
+				error: 'A valid frequency value is required!',
+				...Object.fromEntries(form)
+			});
+		}
+
+		try {
+			const newFrequency = await prisma.solfeggioFrequency.create({
+				data: { name, value }
+			});
+
+			return { success: true, newFrequency };
+		} catch (err) {
+			console.log(err);
+			return fail(500, {
+				error: 'An unknown error has occurred. Please try again later.',
+				...Object.fromEntries(form)
+			});
+		}
+	}
+};

src/routes/(protected)/frequencies/+page.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import FrequencyForm from '$lib/components/forms/frequency/FrequencyForm.svelte';
+	import Center from '$lib/components/containers/Center.svelte';
+	import type { ActionData, PageData } from './$types';
+	import FrequencyList from '$lib/components/ui/FrequencyList/FrequencyList.svelte';
+
+	let { data, form } = $props<{ data: PageData; form: ActionData }>();
+	let showModal = $state(false);
+
+	$effect(() => {
+		if (form?.success) {
+			showModal = false;
+		}
+	});
+</script>
+
+<div class="flex h-full min-h-0 flex-col gap-6 p-6 mb-4">
+	<div class="flex shrink-0 items-center justify-between">
+		<h1 class="text-2xl font-semibold text-gray-900">Frequencies</h1>
+		<button
+			type="button"
+			class="rounded-lg bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700"
+			onclick={() => (showModal = true)}
+		>
+			Create +
+		</button>
+	</div>
+
+	{#if data.frequencies.length > 0}
+		<FrequencyList frequencies={data.frequencies} />
+	{:else}
+		<Center>
+			<div class="text-center">
+				<p class="text-lg text-gray-500">No frequencies yet</p>
+				<p class="mt-1 text-sm text-gray-400">Click "Create +" to add your first one</p>
+			</div>
+		</Center>
+	{/if}
+</div>
+
+{#if showModal}
+	<div class="fixed inset-0 z-50 overflow-y-auto bg-black/50">
+		<div class="flex min-h-full items-center justify-center p-4">
+			<div class="w-full max-w-2xl rounded-lg bg-white p-8 shadow-xl">
+				<div class="mb-6 flex items-center justify-between">
+					<h2 class="text-xl font-semibold text-gray-900">Create New Frequency</h2>
+					<button
+						type="button"
+						class="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+						onclick={() => (showModal = false)}
+					>
+						✕
+					</button>
+				</div>
+
+				{#if form?.error}
+					<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
+						{form.error}
+					</div>
+				{/if}
+
+				<FrequencyForm {form} action="?/create" submitLabel="Create Frequency" />
+			</div>
+		</div>
+	</div>
+{/if}

src/routes/(protected)/frequencies/[id]/+page.server.ts

@@ -0,0 +1,50 @@
+import type { PageServerLoad } from './$types';
+import { prisma } from '$lib/db';
+import { error, fail, type Actions, type RequestEvent, type ServerLoadEvent } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ params }: ServerLoadEvent) => {
+	const frequency = await prisma.solfeggioFrequency.findUnique({
+		where: { id: Number(params.id) }
+	});
+
+	if (!frequency) {
+		throw error(404, 'not found');
+	}
+
+	return { frequency };
+};
+
+export const actions: Actions = {
+	update: async ({ request }: RequestEvent) => {
+		const form = await request.formData();
+		const id = Number(form.get('id'));
+		const name = form.get('name') as string;
+		const value = Number(form.get('value'));
+
+		if (!name) {
+			return fail(400, { error: 'Name is required!', ...Object.fromEntries(form) });
+		}
+
+		if (!value || value <= 0) {
+			return fail(400, {
+				error: 'A valid frequency value is required!',
+				...Object.fromEntries(form)
+			});
+		}
+
+		try {
+			const updatedFrequency = await prisma.solfeggioFrequency.update({
+				where: { id },
+				data: { name, value }
+			});
+
+			return { success: true, updatedFrequency };
+		} catch (err) {
+			console.log(err);
+			return fail(500, {
+				error: 'An unknown error has occurred. Please try again later. Your changes have not been saved.',
+				...Object.fromEntries(form)
+			});
+		}
+	}
+};

src/routes/(protected)/frequencies/[id]/+page.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import FrequencyForm from '$lib/components/forms/frequency/FrequencyForm.svelte';
+	import type { ActionData, PageData } from './$types';
+	import { onMount } from 'svelte';
+
+	let { data, form } = $props<{ data: PageData; form: ActionData }>();
+	let seconds = $state(0);
+	let remainder = $derived(5 - seconds);
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			if (form?.success) {
+				seconds += 1;
+				if (seconds === 6) {
+					window.location.href = '/frequencies';
+				}
+			}
+		}, 1000);
+
+		return () => clearInterval(interval);
+	});
+</script>
+
+<div class="mx-auto mb-auto mt-24 max-w-2xl px-4">
+	<a href="/frequencies" class="text-blue-600">Back to Frequencies</a>
+
+	{#if form?.error}
+		<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
+			{form.error}
+		</div>
+	{/if}
+
+	{#if form?.success}
+		<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700">
+			Frequency updated successfully! You will be redirected in {remainder} seconds.
+		</div>
+	{/if}
+
+	<div class="mt-6">
+		<FrequencyForm
+			frequency={data.frequency}
+			{form}
+			action="?/update"
+			submitLabel="Save Frequency"
+		/>
+	</div>
+</div>