feat(frontend): setup frontend foundation

- Install dependencies: date-fns, @vite-pwa/sveltekit, workbox-window - Configure Vite with PWA support and manifest - Update SvelteKit config for static adapter with fallback - Create environment files (.env, .env.example, .env.production) - Create directory structure for lib, components, routes - Add JSDoc type definitions for Task, User, AuthTokens, etc. - Add utility functions: storage (localStorage wrapper), uuid, dates, sync-queue - Configure PWA with icons, theme colors, and caching strategies
2026-01-06 15:43:39 +01:00
parent 4eb18388db
commit 41795d1827
10 changed files with 1071 additions and 3 deletions
@@ -1,6 +1,82 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';

 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [
+		sveltekit(),
+		SvelteKitPWA({
+			manifest: {
+				name: 'Opal Task Manager',
+				short_name: 'Opal',
+				description: 'Mobile-first task management',
+				theme_color: '#4f46e5',
+				background_color: '#ffffff',
+				display: 'standalone',
+				orientation: 'portrait-primary',
+				scope: '/',
+				start_url: '/',
+				icons: [
+					{
+						src: '/icons/icon-72.png',
+						sizes: '72x72',
+						type: 'image/png'
+					},
+					{
+						src: '/icons/icon-96.png',
+						sizes: '96x96',
+						type: 'image/png'
+					},
+					{
+						src: '/icons/icon-128.png',
+						sizes: '128x128',
+						type: 'image/png'
+					},
+					{
+						src: '/icons/icon-144.png',
+						sizes: '144x144',
+						type: 'image/png'
+					},
+					{
+						src: '/icons/icon-152.png',
+						sizes: '152x152',
+						type: 'image/png'
+					},
+					{
+						src: '/icons/icon-192.png',
+						sizes: '192x192',
+						type: 'image/png',
+						purpose: 'any maskable'
+					},
+					{
+						src: '/icons/icon-384.png',
+						sizes: '384x384',
+						type: 'image/png'
+					},
+					{
+						src: '/icons/icon-512.png',
+						sizes: '512x512',
+						type: 'image/png',
+						purpose: 'any maskable'
+					}
+				]
+			},
+			workbox: {
+				globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff,woff2}'],
+				runtimeCaching: [
+					{
+						urlPattern: /^https:\/\/opal\.jnss\.me\/api\/.*/i,
+						handler: 'NetworkFirst',
+						options: {
+							cacheName: 'api-cache',
+							expiration: {
+								maxEntries: 100,
+								maxAgeSeconds: 60 * 60 * 24 // 24 hours
+							}
+						}
+					}
+				]
+			}
+		})
+	]
 });