Add YearSelection and Header components, integrate lucide-svelte icons, and implement year management functionality

src/lib/components/atoms/YearSelection.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { addYear, deleteYear, getYears } from '$lib/remotes/db.remote';
+	import { Plus } from 'lucide-svelte';
+
+	const query = getYears();
+	let years = $derived(query.current ?? (await getYears()));
+	let selectedYear = page.params.year ?? new Date().getFullYear();
+
+	const handleAddYear = () => {
+		const year = prompt('Podaj rok');
+		if (year) {
+			addYear(+year);
+		}
+	};
+</script>
+
+<div class="flex justify-center mb-2">
+	<div
+		class="bg-white/90 backdrop-blur p-1.5 rounded-full shadow-xl inline-flex gap-2 overflow-x-auto max-w-full"
+	>
+		{#each years.sort((a, b) => b.year - a.year) as v}
+			<a
+				href={`/rok/${v.year}`}
+				class={[
+					'px-6 py-2 rounded-full text-sm font-semibold transition-all duration-200',
+					selectedYear === v.year
+						? 'bg-red-600 text-white shadow-md'
+						: 'hover:bg-red-50 text-red-900'
+				]}
+			>
+				{v.year}
+			</a>
+		{/each}
+
+		<button
+			class="px-4 py-2 rounded-full text-sm font-semibold text-red-600 hover:bg-red-50 flex items-center"
+			onclick={handleAddYear}
+		>
+			<Plus class="w-4 h-4 mr-1" /> Dodaj rok
+		</button>
+	</div>
+</div>
+<div class="flex justify-center">
+	<button class="btn btn-error btn-ghost btn-xs" onclick={() => deleteYear(selectedYear)}>
+		Usuń rok
+	</button>
+</div>

src/lib/components/organisms/Header.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { GiftIcon } from 'lucide-svelte';
+</script>
+
+<header class="text-center mb-10 pt-10">
+	<div
+		class="inline-flex items-center justify-center p-3 bg-white/10 backdrop-blur-sm rounded-full mb-4 ring-2 ring-yellow-400 shadow-lg"
+	>
+		<GiftIcon class="w-8 h-8 text-yellow-300 mr-2" />
+		<h1 class="text-3xl md:text-4xl font-bold text-white tracking-tight text-shadow-sm">
+			Planer prezentów
+		</h1>
+	</div>
+</header>

src/lib/remotes/db.remote.ts

@@ -13,3 +13,11 @@ export const addYear = command(v.number(), async (year) => {
 
 	getYears().refresh();
 });
+
+export const deleteYear = command(v.number(), async (year) => {
+	await DB.DELETE.year({
+		year: year
+	});
+
+	getYears().refresh();
+});

src/routes/+layout.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import './layout.css';
 	import favicon from '$lib/assets/favicon.svg';
-	
+	import YearSelection from '$lib/components/atoms/YearSelection.svelte';
+	import Header from '$lib/components/organisms/Header.svelte';
+	import './layout.css';
+
 	let { children } = $props();
 </script>
 
@@ -9,4 +11,12 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children()}
+<main class="min-h-screen bg-slate-50 relative font-sans selection:bg-red-100">
+	<div class="fixed inset-0 bg-linear-to-b from-red-950 via-red-900 to-green-900 z-0"></div>
+	<div class="container">
+		<Header />
+		<YearSelection />
+
+		{@render children()}
+	</div>
+</main>

src/routes/layout.css

@@ -2,3 +2,16 @@
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
 @plugin "daisyui";
+
+.my-block {
+	@apply my-8 md:my-12;
+}
+
+.py-block {
+	@apply py-8 md:py-12;
+}
+
+.container {
+	@apply max-w-7xl mx-auto;
+	padding-inline: 15px;
+}