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

package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@prisma/adapter-better-sqlite3": "^7.0.0",
 				"@prisma/client": "^7.0.0",
+				"lucide-svelte": "^0.554.0",
 				"valibot": "^1.1.0"
 			},
 			"devDependencies": {
@@ -556,7 +557,6 @@
 			"version": "0.3.13",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
 			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -567,7 +567,6 @@
 			"version": "2.3.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
 			"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -578,7 +577,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -588,14 +586,12 @@
 			"version": "1.5.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
 			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.31",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
 			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -1125,7 +1121,6 @@
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.7.tgz",
 			"integrity": "sha512-znp1A/Y1Jj4l/Zy7PX5DZKBE0ZNY+5QBngiE21NJkfSTyzzC5iKNWOtwFXKtIrn7MXEFBck4jD95iBNkGjK92Q==",
-			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8.9.0"
@@ -1528,7 +1523,6 @@
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
 			"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/react": {
@@ -1546,7 +1540,6 @@
 			"version": "8.15.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
 			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
@@ -1559,7 +1552,6 @@
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
 			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1579,7 +1571,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1740,7 +1731,6 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -2024,14 +2014,12 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
 			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/esrap": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.3.tgz",
 			"integrity": "sha512-T/Dhhv/QH+yYmiaLz9SA3PW+YyenlnRKDNdtlYJrSOBmNsH4nvPux+mTwx7p+wAedlJrGoZtXNI0a0MjQ2QkVg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -2270,7 +2258,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
 			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "^1.0.6"
@@ -2578,7 +2565,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/lodash": {
@@ -2621,11 +2607,19 @@
 				"url": "https://github.com/sponsors/wellwelwel"
 			}
 		},
+		"node_modules/lucide-svelte": {
+			"version": "0.554.0",
+			"resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.554.0.tgz",
+			"integrity": "sha512-LLcpHi3SuKup0nVD1kKqo8FDZnjXJp48uST26GGh8Jcyrxqk5gmgpnvKmHsHox674UL3cPS1DCul/wFL7ybGqg==",
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^3 || ^4 || ^5.0.0-next.42"
+			}
+		},
 		"node_modules/magic-string": {
 			"version": "0.30.21",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
 			"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.5"
@@ -3421,7 +3415,6 @@
 			"version": "5.43.14",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.43.14.tgz",
 			"integrity": "sha512-pHeUrp1A5S6RGaXhJB7PtYjL1VVjbVrJ2EfuAoPu9/1LeoMaJa/pcdCsCSb0gS4eUHAHnhCbUDxORZyvGK6kOQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/remapping": "^2.3.4",
@@ -3743,7 +3736,6 @@
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
 			"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
-			"dev": true,
 			"license": "MIT"
 		}
 	}

package.json

@@ -33,6 +33,7 @@
 	"dependencies": {
 		"@prisma/adapter-better-sqlite3": "^7.0.0",
 		"@prisma/client": "^7.0.0",
+		"lucide-svelte": "^0.554.0",
 		"valibot": "^1.1.0"
 	}
 }

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;
+}