add: snow theme

update: consistent round button sizing
add: create, update and login dates in database
2025-12-19 22:34:23 +01:00 · 2025-12-19 21:01:17 +01:00 · 2025-12-19 20:50:06 +01:00 · 2025-12-19 19:22:35 +00:00 · 2025-12-19 20:20:11 +01:00 · 2025-12-19 20:09:49 +01:00
105 changed files with 4915 additions and 5669 deletions
@@ -24,6 +24,3 @@ vite.config.ts.timestamp-*
 # Claude
 .claude
 # Infisical
 .infisical*
@@ -1,8 +0,0 @@
 {
  "version": "2",
  "phaseApp": "wishlist",
  "appId": "a4d85c7a-8df9-462b-9b91-5cb2957cdcd3",
  "defaultEnv": "Production",
  "envId": "496d0105-f2b4-424d-a1a1-a60602fc2252",
  "monorepoSupport": false
 }
@@ -1,15 +0,0 @@
 # Ignore files for Prettier
 build
 .svelte-kit
 dist
 node_modules
 # Ignore generated files
 drizzle/meta
 # Ignore lock files
 bun.lock
 package-lock.json
 yarn.lock
 pnpm-lock.yaml
@@ -1,9 +0,0 @@
 {
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100,
  "plugins": ["prettier-plugin-svelte"],
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
@@ -0,0 +1,84 @@
 # Coolify Deployment
 ## Prerequisites
 - Coolify instance
 - Git repository
 ## Database Setup
 Choose one:
 **Option A: Docker Compose (Recommended)**
 - Database included in `docker-compose.coolify.yml`
 - Skip to step 2
 **Option B: Separate PostgreSQL Resource**
 1. Create PostgreSQL database in Coolify
 2. Note connection details
 ## Deploy
 ### Using Docker Compose (Recommended)
 1. Create application in Coolify
 2. Select Git repository
 3. Configure:
   - Build Pack: Docker Compose
   - File: `./docker-compose.coolify.yml`
 4. Assign domain to `app` service only (format: `http://yourdomain.com:3000`)
 5. Set environment variables:
   - `AUTH_SECRET` (generate with `openssl rand -base64 32`)
   - `AUTH_URL` (your domain with https)
   - `POSTGRES_DATA_PATH` (optional, for custom database storage location)
   - `GOOGLE_CLIENT_ID` (optional)
   - `GOOGLE_CLIENT_SECRET` (optional)
 6. Deploy
 ### Using Dockerfile
 1. Create application in Coolify
 2. Select Git repository
 3. Configure:
   - Build Pack: Docker
   - Port: `3000`
 4. Add domain
 5. Set environment variables:
   - `DATABASE_URL`
   - `AUTH_SECRET` (generate with `openssl rand -base64 32`)
   - `AUTH_URL` (your domain with https)
   - `GOOGLE_CLIENT_ID` (optional)
   - `GOOGLE_CLIENT_SECRET` (optional)
 6. Deploy
 ## After Deployment
 Run migrations:
 ```bash
 # In Coolify terminal or SSH
 docker exec -it <container-name> bun run db:push
 ```
 ## Environment Variables
 Required:
 - `DATABASE_URL` - Connection string
 - `AUTH_SECRET` - Random secret
 - `AUTH_URL` - Your app URL
 - `AUTH_TRUST_HOST` - `true`
 Optional:
 - `GOOGLE_CLIENT_ID`
 - `GOOGLE_CLIENT_SECRET`
 - `POSTGRES_DATA_PATH` - Custom path for PostgreSQL data (Docker Compose only)
  - Example: `/mnt/storage/wishlist/postgres`
  - If not set, uses a Docker named volume
  - Path must exist with proper permissions before deployment
 ## Troubleshooting
 **Container crashes:** Check logs in Coolify dashboard
 **Database connection:** Verify `DATABASE_URL` format
 **Auth issues:** Check `AUTH_URL` matches your domain
@@ -1,35 +0,0 @@
 # Wishlist Production Deployment
 Uses Phase for secrets management.
 ## Required Secrets
 Ensure these exist in your Phase project under the `Production` environment:
 - `POSTGRES_USER`, `POSTGRES_PASSWORD`, `POSTGRES_DB` - Database credentials
 - `AUTH_SECRET` - Auth.js secret (generate: `openssl rand -base64 32`)
 - `AUTH_URL` - Public URL (e.g., `https://wish.rasmusq.com`)
 - `GOOGLE_CLIENT_ID`, `GOOGLE_CLIENT_SECRET` - (Optional) Google OAuth
 - `AUTHENTIK_CLIENT_ID`, `AUTHENTIK_CLIENT_SECRET`, `AUTHENTIK_ISSUER` - (Optional) Authentik OAuth
 ## Common Commands
 ```bash
 # Deploy/rebuild
 phase run docker compose -f docker-compose.prod.yml up -d --build
 # View logs
 docker compose -f docker-compose.prod.yml logs -f
 # Restart
 phase run docker compose -f docker-compose.prod.yml restart
 # Stop
 phase run docker compose -f docker-compose.prod.yml down
 # Database migrations
 phase run bun run db:migrate
 # Development
 phase run bun run dev
 ```
@@ -35,13 +35,11 @@ docker run -d \
 ## Environment Variables
 Required:
 - `DATABASE_URL` - PostgreSQL connection string
 - `NODE_ENV` - Set to `production`
 - `PORT` - Default `3000`
 Optional (Docker Compose):
 - `POSTGRES_USER` - Database user (default: `wishlistuser`)
 - `POSTGRES_PASSWORD` - Database password (default: `wishlistpassword`)
 - `POSTGRES_DB` - Database name (default: `wishlist`)
@@ -63,7 +61,6 @@ docker exec -it wishlist-app bun run db:push
 ## Migrations
 Production migrations:
 ```bash
 docker exec -it wishlist-app bun run db:migrate
 ```
@@ -32,7 +32,7 @@ COPY --from=deps /app/node_modules ./node_modules
 # Copy Drizzle files for migrations
 COPY --from=builder /app/drizzle ./drizzle
 COPY --from=builder /app/drizzle.config.ts ./
-COPY --from=builder /app/src/lib/db ./src/lib/db
+COPY --from=builder /app/src/lib/server/schema.ts ./src/lib/server/schema.ts
 # Expose the port
 EXPOSE 3000
@@ -2,9 +2,6 @@
 A wishlist application built with SvelteKit, Drizzle ORM, and PostgreSQL.
 ![Dashboard](readme-assets/dashboard.png)
 ![Creating a wishlist](readme-assets/create.png)
 ## Prerequisites
 - [Bun](https://bun.sh/)
@@ -16,7 +16,6 @@ Visit `http://localhost:3000`
 Choose one:
 **Local PostgreSQL:**
 ```bash
 sudo apt install postgresql
 sudo -u postgres createdb wishlist
@@ -27,7 +26,6 @@ GRANT ALL PRIVILEGES ON DATABASE wishlist TO wishlistuser;
 ```
 **Docker PostgreSQL:**
 ```bash
 docker run --name wishlist-postgres \
  -e POSTGRES_DB=wishlist \
@@ -59,18 +57,15 @@ Visit `http://localhost:5173`
 ## Troubleshooting
 **Connection errors:**
 - Check PostgreSQL is running: `sudo systemctl status postgresql`
 - Test connection: `psql "postgresql://user:pass@localhost:5432/wishlist"`
 **Port in use:**
 ```bash
 bun run dev -- --port 3000
 ```
 **Schema changes:**
 ```bash
 bun run db:push
 ```
@@ -1,5 +1,6 @@
 {
  "lockfileVersion": 1,
  "configVersion": 1,
  "workspaces": {
    "": {
      "name": "wishlist-app",
@@ -13,13 +14,13 @@
        "bits-ui": "^2.14.4",
        "clsx": "^2.1.1",
        "drizzle-orm": "^0.44.7",
        "lucide-svelte": "^0.554.0",
        "postgres": "^3.4.7",
        "svelte-dnd-action": "^0.9.67",
        "tailwind-merge": "^3.4.0",
        "tailwind-variants": "^3.2.2",
      },
      "devDependencies": {
        "@eslint/js": "^9.25.0",
        "@lucide/svelte": "^0.544.0",
        "@sveltejs/adapter-auto": "^7.0.0",
        "@sveltejs/adapter-node": "^5.4.0",
@@ -28,20 +29,13 @@
        "@tailwindcss/vite": "^4.1.17",
        "@types/bcrypt": "^6.0.0",
        "drizzle-kit": "^0.31.7",
        "eslint": "^9.25.0",
        "eslint-plugin-svelte": "^3.5.1",
        "globals": "^16.0.0",
        "patch-package": "^8.0.1",
        "postinstall-postinstall": "^2.1.0",
        "prettier": "^3.5.3",
        "prettier-plugin-svelte": "^3.3.3",
        "svelte": "^5.43.8",
        "svelte-check": "^4.3.4",
        "svelte-eslint-parser": "^1.6.0",
        "tailwindcss": "^4.1.17",
        "tw-animate-css": "^1.4.0",
        "typescript": "^5.9.3",
        "typescript-eslint": "^8.31.0",
        "vite": "^7.2.2",
      },
    },
@@ -111,38 +105,12 @@
    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.12", "", { "os": "win32", "cpu": "x64" }, "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA=="],
    "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.9.1", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ=="],
    "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.2", "", {}, "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew=="],
    "@eslint/config-array": ["@eslint/config-array@0.21.2", "", { "dependencies": { "@eslint/object-schema": "^2.1.7", "debug": "^4.3.1", "minimatch": "^3.1.5" } }, "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw=="],
    "@eslint/config-helpers": ["@eslint/config-helpers@0.4.2", "", { "dependencies": { "@eslint/core": "^0.17.0" } }, "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw=="],
    "@eslint/core": ["@eslint/core@0.17.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ=="],
    "@eslint/eslintrc": ["@eslint/eslintrc@3.3.5", "", { "dependencies": { "ajv": "^6.14.0", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", "js-yaml": "^4.1.1", "minimatch": "^3.1.5", "strip-json-comments": "^3.1.1" } }, "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg=="],
    "@eslint/js": ["@eslint/js@9.39.4", "", {}, "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw=="],
    "@eslint/object-schema": ["@eslint/object-schema@2.1.7", "", {}, "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA=="],
    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
    "@floating-ui/core": ["@floating-ui/core@1.7.3", "", { "dependencies": { "@floating-ui/utils": "^0.2.10" } }, "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w=="],
    "@floating-ui/dom": ["@floating-ui/dom@1.7.4", "", { "dependencies": { "@floating-ui/core": "^1.7.3", "@floating-ui/utils": "^0.2.10" } }, "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA=="],
    "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
    "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
    "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
    "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="],
    "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
    "@internationalized/date": ["@internationalized/date@3.10.0", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw=="],
    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
@@ -269,58 +237,26 @@
    "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
    "@types/node": ["@types/node@24.10.1", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ=="],
    "@types/resolve": ["@types/resolve@1.20.2", "", {}, "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="],
    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.57.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.57.0", "@typescript-eslint/type-utils": "8.57.0", "@typescript-eslint/utils": "8.57.0", "@typescript-eslint/visitor-keys": "8.57.0", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.57.0", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-qeu4rTHR3/IaFORbD16gmjq9+rEs9fGKdX0kF6BKSfi+gCuG3RCKLlSBYzn/bGsY9Tj7KE/DAQStbp8AHJGHEQ=="],
    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.57.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.57.0", "@typescript-eslint/types": "8.57.0", "@typescript-eslint/typescript-estree": "8.57.0", "@typescript-eslint/visitor-keys": "8.57.0", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g=="],
    "@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.57.0", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.57.0", "@typescript-eslint/types": "^8.57.0", "debug": "^4.4.3" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-pR+dK0BlxCLxtWfaKQWtYr7MhKmzqZxuii+ZjuFlZlIGRZm22HnXFqa2eY+90MUz8/i80YJmzFGDUsi8dMOV5w=="],
    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.57.0", "", { "dependencies": { "@typescript-eslint/types": "8.57.0", "@typescript-eslint/visitor-keys": "8.57.0" } }, "sha512-nvExQqAHF01lUM66MskSaZulpPL5pgy5hI5RfrxviLgzZVffB5yYzw27uK/ft8QnKXI2X0LBrHJFr1TaZtAibw=="],
    "@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.57.0", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-LtXRihc5ytjJIQEH+xqjB0+YgsV4/tW35XKX3GTZHpWtcC8SPkT/d4tqdf1cKtesryHm2bgp6l555NYcT2NLvA=="],
    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.57.0", "", { "dependencies": { "@typescript-eslint/types": "8.57.0", "@typescript-eslint/typescript-estree": "8.57.0", "@typescript-eslint/utils": "8.57.0", "debug": "^4.4.3", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-yjgh7gmDcJ1+TcEg8x3uWQmn8ifvSupnPfjP21twPKrDP/pTHlEQgmKcitzF/rzPSmv7QjJ90vRpN4U+zoUjwQ=="],
    "@typescript-eslint/types": ["@typescript-eslint/types@8.57.0", "", {}, "sha512-dTLI8PEXhjUC7B9Kre+u0XznO696BhXcTlOn0/6kf1fHaQW8+VjJAVHJ3eTI14ZapTxdkOmc80HblPQLaEeJdg=="],
    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.57.0", "", { "dependencies": { "@typescript-eslint/project-service": "8.57.0", "@typescript-eslint/tsconfig-utils": "8.57.0", "@typescript-eslint/types": "8.57.0", "@typescript-eslint/visitor-keys": "8.57.0", "debug": "^4.4.3", "minimatch": "^10.2.2", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-m7faHcyVg0BT3VdYTlX8GdJEM7COexXxS6KqGopxdtkQRvBanK377QDHr4W/vIPAR+ah9+B/RclSW5ldVniO1Q=="],
    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.57.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.57.0", "@typescript-eslint/types": "8.57.0", "@typescript-eslint/typescript-estree": "8.57.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-5iIHvpD3CZe06riAsbNxxreP+MuYgVUsV0n4bwLH//VJmgtt54sQeY2GszntJ4BjYCpMzrfVh2SBnUQTtys2lQ=="],
    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.57.0", "", { "dependencies": { "@typescript-eslint/types": "8.57.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-zm6xx8UT/Xy2oSr2ZXD0pZo7Jx2XsCoID2IUh9YSTFRu7z+WdwYTRk6LhUftm1crwqbuoF6I8zAFeCMw0YjwDg=="],
    "@yarnpkg/lockfile": ["@yarnpkg/lockfile@1.1.0", "", {}, "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ=="],
    "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
    "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
    "ajv": ["ajv@6.14.0", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw=="],
    "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
    "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
    "aria-query": ["aria-query@5.3.2", "", {}, "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="],
    "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
    "bcrypt": ["bcrypt@6.0.0", "", { "dependencies": { "node-addon-api": "^8.3.0", "node-gyp-build": "^4.8.4" } }, "sha512-cU8v/EGSrnH+HnxV2z0J7/blxH8gq7Xh2JFT6Aroax7UohdmiJJlxApMxtKfuI7z68NvvVcmR78k2LbT6efhRg=="],
    "bignumber.js": ["bignumber.js@9.3.1", "", {}, "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ=="],
    "bits-ui": ["bits-ui@2.14.4", "", { "dependencies": { "@floating-ui/core": "^1.7.1", "@floating-ui/dom": "^1.7.1", "esm-env": "^1.1.2", "runed": "^0.35.1", "svelte-toolbelt": "^0.10.6", "tabbable": "^6.2.0" }, "peerDependencies": { "@internationalized/date": "^3.8.1", "svelte": "^5.33.0" } }, "sha512-W6kenhnbd/YVvur+DKkaVJ6GldE53eLewur5AhUCqslYQ0vjZr8eWlOfwZnMiPB+PF5HMVqf61vXBvmyrAmPWg=="],
    "brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="],
    "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
    "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
@@ -331,8 +267,6 @@
    "call-bound": ["call-bound@1.0.4", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "get-intrinsic": "^1.3.0" } }, "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg=="],
    "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
    "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
@@ -347,18 +281,12 @@
    "commondir": ["commondir@1.0.1", "", {}, "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="],
    "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
    "cookie": ["cookie@0.6.0", "", {}, "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="],
    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
    "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
    "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
    "define-data-property": ["define-data-property@1.1.4", "", { "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", "gopd": "^1.0.1" } }, "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A=="],
@@ -389,52 +317,18 @@
    "esbuild-register": ["esbuild-register@3.6.0", "", { "dependencies": { "debug": "^4.3.4" }, "peerDependencies": { "esbuild": ">=0.12 <1" } }, "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg=="],
    "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
    "eslint": ["eslint@9.39.4", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.21.2", "@eslint/config-helpers": "^0.4.2", "@eslint/core": "^0.17.0", "@eslint/eslintrc": "^3.3.5", "@eslint/js": "9.39.4", "@eslint/plugin-kit": "^0.4.1", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.14.0", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.4.0", "eslint-visitor-keys": "^4.2.1", "espree": "^10.4.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.5", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ=="],
    "eslint-plugin-svelte": ["eslint-plugin-svelte@3.15.2", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.6.1", "@jridgewell/sourcemap-codec": "^1.5.0", "esutils": "^2.0.3", "globals": "^16.0.0", "known-css-properties": "^0.37.0", "postcss": "^8.4.49", "postcss-load-config": "^3.1.4", "postcss-safe-parser": "^7.0.0", "semver": "^7.6.3", "svelte-eslint-parser": "^1.4.0" }, "peerDependencies": { "eslint": "^8.57.1 || ^9.0.0 || ^10.0.0", "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0" }, "optionalPeers": ["svelte"] }, "sha512-k4Nsjs3bHujeEnnckoTM4mFYR1e8Mb9l2rTwNdmYiamA+Tjzn8X+2F+fuSP2w4VbXYhn2bmySyACQYdmUDW2Cg=="],
    "eslint-scope": ["eslint-scope@8.4.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg=="],
    "eslint-visitor-keys": ["eslint-visitor-keys@4.2.1", "", {}, "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ=="],
    "esm-env": ["esm-env@1.2.2", "", {}, "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="],
    "espree": ["espree@10.4.0", "", { "dependencies": { "acorn": "^8.15.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^4.2.1" } }, "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ=="],
    "esquery": ["esquery@1.7.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g=="],
    "esrap": ["esrap@2.1.3", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" } }, "sha512-T/Dhhv/QH+yYmiaLz9SA3PW+YyenlnRKDNdtlYJrSOBmNsH4nvPux+mTwx7p+wAedlJrGoZtXNI0a0MjQ2QkVg=="],
    "esrecurse": ["esrecurse@4.3.0", "", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="],
    "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
    "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
    "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
    "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
    "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
    "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
    "find-yarn-workspace-root": ["find-yarn-workspace-root@2.0.0", "", { "dependencies": { "micromatch": "^4.0.2" } }, "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ=="],
    "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
    "flatted": ["flatted@3.4.1", "", {}, "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ=="],
    "fs-extra": ["fs-extra@10.1.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ=="],
    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
@@ -447,10 +341,6 @@
    "get-tsconfig": ["get-tsconfig@4.13.0", "", { "dependencies": { "resolve-pkg-maps": "^1.0.0" } }, "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ=="],
    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
    "globals": ["globals@16.5.0", "", {}, "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ=="],
    "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
@@ -463,22 +353,12 @@
    "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
    "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
    "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
    "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
    "inline-style-parser": ["inline-style-parser@0.2.7", "", {}, "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA=="],
    "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
    "is-docker": ["is-docker@2.2.1", "", { "bin": { "is-docker": "cli.js" } }, "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="],
    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
    "is-module": ["is-module@1.0.0", "", {}, "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="],
    "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
@@ -495,30 +375,16 @@
    "jose": ["jose@5.10.0", "", {}, "sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg=="],
    "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
    "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],
    "json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
    "json-stable-stringify": ["json-stable-stringify@1.3.0", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.4", "isarray": "^2.0.5", "jsonify": "^0.0.1", "object-keys": "^1.1.1" } }, "sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg=="],
    "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
    "jsonfile": ["jsonfile@6.2.0", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg=="],
    "jsonify": ["jsonify@0.0.1", "", {}, "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg=="],
    "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
    "klaw-sync": ["klaw-sync@6.0.0", "", { "dependencies": { "graceful-fs": "^4.1.11" } }, "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ=="],
    "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
    "known-css-properties": ["known-css-properties@0.37.0", "", {}, "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ=="],
    "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
    "lightningcss": ["lightningcss@1.30.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.30.2", "lightningcss-darwin-arm64": "1.30.2", "lightningcss-darwin-x64": "1.30.2", "lightningcss-freebsd-x64": "1.30.2", "lightningcss-linux-arm-gnueabihf": "1.30.2", "lightningcss-linux-arm64-gnu": "1.30.2", "lightningcss-linux-arm64-musl": "1.30.2", "lightningcss-linux-x64-gnu": "1.30.2", "lightningcss-linux-x64-musl": "1.30.2", "lightningcss-win32-arm64-msvc": "1.30.2", "lightningcss-win32-x64-msvc": "1.30.2" } }, "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ=="],
    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.30.2", "", { "os": "android", "cpu": "arm64" }, "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A=="],
@@ -543,13 +409,9 @@
    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],
    "lilconfig": ["lilconfig@2.1.0", "", {}, "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="],
    "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
-    "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
+    "lucide-svelte": ["lucide-svelte@0.554.0", "", { "peerDependencies": { "svelte": "^3 || ^4 || ^5.0.0-next.42" } }, "sha512-LLcpHi3SuKup0nVD1kKqo8FDZnjXJp48uST26GGh8Jcyrxqk5gmgpnvKmHsHox674UL3cPS1DCul/wFL7ybGqg=="],
    "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
    "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
@@ -559,8 +421,6 @@
    "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
    "minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],
    "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
    "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
@@ -571,8 +431,6 @@
    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
    "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
    "node-addon-api": ["node-addon-api@8.5.0", "", {}, "sha512-/bRZty2mXUIFY/xU5HLvveNHlswNJej+RnxBjOMkidWfwZzgTbPG1E3K5TOxRLOR+5hX7bSofy8yf1hZevMS8A=="],
    "node-gyp-build": ["node-gyp-build@4.8.4", "", { "bin": { "node-gyp-build": "bin.js", "node-gyp-build-optional": "optional.js", "node-gyp-build-test": "build-test.js" } }, "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ=="],
@@ -583,18 +441,8 @@
    "open": ["open@7.4.2", "", { "dependencies": { "is-docker": "^2.0.0", "is-wsl": "^2.1.1" } }, "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q=="],
    "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
    "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
    "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
    "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
    "patch-package": ["patch-package@8.0.1", "", { "dependencies": { "@yarnpkg/lockfile": "^1.1.0", "chalk": "^4.1.2", "ci-info": "^3.7.0", "cross-spawn": "^7.0.3", "find-yarn-workspace-root": "^2.0.0", "fs-extra": "^10.0.0", "json-stable-stringify": "^1.0.2", "klaw-sync": "^6.0.0", "minimist": "^1.2.6", "open": "^7.4.2", "semver": "^7.5.3", "slash": "^2.0.0", "tmp": "^0.2.4", "yaml": "^2.2.2" }, "bin": { "patch-package": "index.js" } }, "sha512-VsKRIA8f5uqHQ7NGhwIna6Bx6D9s/1iXlA1hthBVBEbkq+t4kXD0HHt+rJhf/Z+Ci0F/HCB2hvn0qLdLG+Qxlw=="],
    "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
    "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
@@ -605,14 +453,6 @@
    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
    "postcss-load-config": ["postcss-load-config@3.1.4", "", { "dependencies": { "lilconfig": "^2.0.5", "yaml": "^1.10.2" }, "peerDependencies": { "postcss": ">=8.0.9", "ts-node": ">=9.0.0" }, "optionalPeers": ["postcss", "ts-node"] }, "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg=="],
    "postcss-safe-parser": ["postcss-safe-parser@7.0.1", "", { "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A=="],
    "postcss-scss": ["postcss-scss@4.0.9", "", { "peerDependencies": { "postcss": "^8.4.29" } }, "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A=="],
    "postcss-selector-parser": ["postcss-selector-parser@7.1.1", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg=="],
    "postgres": ["postgres@3.4.7", "", {}, "sha512-Jtc2612XINuBjIl/QTWsV5UvE8UHuNblcO3vVADSrKsrc6RqGX6lOW1cEo3CM2v0XG4Nat8nI+YM7/f26VxXLw=="],
    "postinstall-postinstall": ["postinstall-postinstall@2.1.0", "", {}, "sha512-7hQX6ZlZXIoRiWNrbMQaLzUUfH+sSx39u8EJ9HYuDc1kLo9IXKWjM5RSquZN1ad5GnH8CGFM78fsAAQi3OKEEQ=="],
@@ -621,22 +461,12 @@
    "preact-render-to-string": ["preact-render-to-string@5.2.3", "", { "dependencies": { "pretty-format": "^3.8.0" }, "peerDependencies": { "preact": ">=10" } }, "sha512-aPDxUn5o3GhWdtJtW0svRC2SS/l8D9MAgo2+AWml+BhDImb27ALf04Q2d+AHqUUOc6RdSXFIBVa2gxzgMKgtZA=="],
    "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
    "prettier": ["prettier@3.8.1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="],
    "prettier-plugin-svelte": ["prettier-plugin-svelte@3.5.1", "", { "peerDependencies": { "prettier": "^3.0.0", "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0" } }, "sha512-65+fr5+cgIKWKiqM1Doum4uX6bY8iFCdztvvp2RcF+AJoieaw9kJOFMNcJo/bkmKYsxFaM9OsVZK/gWauG/5mg=="],
    "pretty-format": ["pretty-format@3.8.0", "", {}, "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew=="],
    "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
    "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
    "resolve": ["resolve@1.22.11", "", { "dependencies": { "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ=="],
    "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
    "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="],
    "rollup": ["rollup@4.53.3", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.53.3", "@rollup/rollup-android-arm64": "4.53.3", "@rollup/rollup-darwin-arm64": "4.53.3", "@rollup/rollup-darwin-x64": "4.53.3", "@rollup/rollup-freebsd-arm64": "4.53.3", "@rollup/rollup-freebsd-x64": "4.53.3", "@rollup/rollup-linux-arm-gnueabihf": "4.53.3", "@rollup/rollup-linux-arm-musleabihf": "4.53.3", "@rollup/rollup-linux-arm64-gnu": "4.53.3", "@rollup/rollup-linux-arm64-musl": "4.53.3", "@rollup/rollup-linux-loong64-gnu": "4.53.3", "@rollup/rollup-linux-ppc64-gnu": "4.53.3", "@rollup/rollup-linux-riscv64-gnu": "4.53.3", "@rollup/rollup-linux-riscv64-musl": "4.53.3", "@rollup/rollup-linux-s390x-gnu": "4.53.3", "@rollup/rollup-linux-x64-gnu": "4.53.3", "@rollup/rollup-linux-x64-musl": "4.53.3", "@rollup/rollup-openharmony-arm64": "4.53.3", "@rollup/rollup-win32-arm64-msvc": "4.53.3", "@rollup/rollup-win32-ia32-msvc": "4.53.3", "@rollup/rollup-win32-x64-gnu": "4.53.3", "@rollup/rollup-win32-x64-msvc": "4.53.3", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA=="],
@@ -665,8 +495,6 @@
    "source-map-support": ["source-map-support@0.5.21", "", { "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" } }, "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w=="],
    "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
    "style-to-object": ["style-to-object@1.0.14", "", { "dependencies": { "inline-style-parser": "0.2.7" } }, "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw=="],
    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
@@ -679,8 +507,6 @@
    "svelte-dnd-action": ["svelte-dnd-action@0.9.67", "", { "peerDependencies": { "svelte": ">=3.23.0 || ^5.0.0-next.0" } }, "sha512-yEJQZ9SFy3O4mnOdtjwWyotRsWRktNf4W8k67zgiLiMtMNQnwCyJHBjkGMgZMDh8EGZ4gr88l+GebBWoHDwo+g=="],
    "svelte-eslint-parser": ["svelte-eslint-parser@1.6.0", "", { "dependencies": { "eslint-scope": "^8.2.0", "eslint-visitor-keys": "^4.0.0", "espree": "^10.0.0", "postcss": "^8.4.49", "postcss-scss": "^4.0.9", "postcss-selector-parser": "^7.0.0", "semver": "^7.7.2" }, "peerDependencies": { "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0" }, "optionalPeers": ["svelte"] }, "sha512-qoB1ehychT6OxEtQAqc/guSqLS20SlA53Uijl7x375s8nlUT0lb9ol/gzraEEatQwsyPTJo87s2CmKL9Xab+Uw=="],
    "svelte-toolbelt": ["svelte-toolbelt@0.10.6", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.35.1", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.30.2" } }, "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ=="],
    "tabbable": ["tabbable@6.3.0", "", {}, "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ=="],
@@ -701,38 +527,24 @@
    "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="],
    "ts-api-utils": ["ts-api-utils@2.4.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA=="],
    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
    "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
    "typescript-eslint": ["typescript-eslint@8.57.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.57.0", "@typescript-eslint/parser": "8.57.0", "@typescript-eslint/typescript-estree": "8.57.0", "@typescript-eslint/utils": "8.57.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-W8GcigEMEeB07xEZol8oJ26rigm3+bfPHxHvwbYUlu1fUDsGuQ7Hiskx5xGW/xM4USc9Ephe3jtv7ZYPQntHeA=="],
    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
    "universalify": ["universalify@2.0.1", "", {}, "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="],
    "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
    "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
    "vite": ["vite@7.2.4", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w=="],
    "vitefu": ["vitefu@1.1.1", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["vite"] }, "sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ=="],
    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
    "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
    "yaml": ["yaml@2.8.1", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw=="],
    "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
    "zimmerframe": ["zimmerframe@1.1.4", "", {}, "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ=="],
    "@auth/drizzle-adapter/@auth/core": ["@auth/core@0.41.1", "", { "dependencies": { "@panva/hkdf": "^1.2.1", "jose": "^6.0.6", "oauth4webapi": "^3.3.0", "preact": "10.24.3", "preact-render-to-string": "6.5.11" }, "peerDependencies": { "@simplewebauthn/browser": "^9.0.1", "@simplewebauthn/server": "^9.0.2", "nodemailer": "^7.0.7" }, "optionalPeers": ["@simplewebauthn/browser", "@simplewebauthn/server", "nodemailer"] }, "sha512-t9cJ2zNYAdWMacGRMT6+r4xr1uybIdmYa49calBPeTqwgAFPV/88ac9TEvCR85pvATiSPt8VaNf+Gt24JIT/uw=="],
@@ -741,10 +553,6 @@
    "@esbuild-kit/core-utils/esbuild": ["esbuild@0.18.20", "", { "optionalDependencies": { "@esbuild/android-arm": "0.18.20", "@esbuild/android-arm64": "0.18.20", "@esbuild/android-x64": "0.18.20", "@esbuild/darwin-arm64": "0.18.20", "@esbuild/darwin-x64": "0.18.20", "@esbuild/freebsd-arm64": "0.18.20", "@esbuild/freebsd-x64": "0.18.20", "@esbuild/linux-arm": "0.18.20", "@esbuild/linux-arm64": "0.18.20", "@esbuild/linux-ia32": "0.18.20", "@esbuild/linux-loong64": "0.18.20", "@esbuild/linux-mips64el": "0.18.20", "@esbuild/linux-ppc64": "0.18.20", "@esbuild/linux-riscv64": "0.18.20", "@esbuild/linux-s390x": "0.18.20", "@esbuild/linux-x64": "0.18.20", "@esbuild/netbsd-x64": "0.18.20", "@esbuild/openbsd-x64": "0.18.20", "@esbuild/sunos-x64": "0.18.20", "@esbuild/win32-arm64": "0.18.20", "@esbuild/win32-ia32": "0.18.20", "@esbuild/win32-x64": "0.18.20" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA=="],
    "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
    "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
    "@rollup/plugin-commonjs/is-reference": ["is-reference@1.2.1", "", { "dependencies": { "@types/estree": "*" } }, "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ=="],
    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.7.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg=="],
@@ -759,16 +567,8 @@
    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
    "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
    "@typescript-eslint/typescript-estree/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "^5.0.2" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="],
    "@typescript-eslint/visitor-keys/eslint-visitor-keys": ["eslint-visitor-keys@5.0.1", "", {}, "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA=="],
    "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
    "postcss-load-config/yaml": ["yaml@1.10.2", "", {}, "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="],
    "@auth/drizzle-adapter/@auth/core/jose": ["jose@6.1.2", "", {}, "sha512-MpcPtHLE5EmztuFIqB0vzHAWJPpmN1E6L4oo+kze56LIs3MyXIj9ZHMDxqOvkP38gBR7K1v3jqd4WU2+nrfONQ=="],
    "@auth/drizzle-adapter/@auth/core/oauth4webapi": ["oauth4webapi@3.8.3", "", {}, "sha512-pQ5BsX3QRTgnt5HxgHwgunIRaDXBdkT23tf8dfzmtTIL2LTpdmxgbpbBm0VgFWAIDlezQvQCTgnVIUmHupXHxw=="],
@@ -828,9 +628,5 @@
    "@esbuild-kit/core-utils/esbuild/@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.18.20", "", { "os": "win32", "cpu": "ia32" }, "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g=="],
    "@esbuild-kit/core-utils/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.18.20", "", { "os": "win32", "cpu": "x64" }, "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ=="],
    "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@5.0.4", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg=="],
    "@typescript-eslint/typescript-estree/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
  }
 }
@@ -1,16 +1,16 @@
 {
-  "$schema": "https://shadcn-svelte.com/schema.json",
+	"$schema": "https://shadcn-svelte.com/schema.json",
-  "tailwind": {
+	"tailwind": {
-    "css": "src/app.css",
+		"css": "src/app.css",
-    "baseColor": "slate"
+		"baseColor": "slate"
-  },
+	},
-  "aliases": {
+	"aliases": {
-    "components": "$lib/components",
+		"components": "$lib/components",
-    "utils": "$lib/utils",
+		"utils": "$lib/utils",
-    "ui": "$lib/components/ui",
+		"ui": "$lib/components/ui",
-    "hooks": "$lib/hooks",
+		"hooks": "$lib/hooks",
-    "lib": "$lib"
+		"lib": "$lib"
-  },
+	},
-  "typescript": true,
+	"typescript": true,
-  "registry": "https://shadcn-svelte.com/registry"
+	"registry": "https://shadcn-svelte.com/registry"
 }
@@ -0,0 +1,51 @@
 # Coolify-optimized Docker Compose
 # Includes both app and database - database is only exposed internally
 services:
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: ${POSTGRES_USER:-wishlistuser}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-wishlistpassword}
      POSTGRES_DB: ${POSTGRES_DB:-wishlist}
    volumes:
      - type: bind
        source: ${POSTGRES_DATA_PATH}
        target: /var/lib/postgresql/data
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-wishlistuser} -d ${POSTGRES_DB:-wishlist}"]
      interval: 10s
      timeout: 5s
      retries: 5
    restart: unless-stopped
    # NOTE: No ports exposed - only accessible internally by app service
  app:
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      # Coolify will inject these from Environment Variables
      DATABASE_URL: postgresql://${POSTGRES_USER:-wishlistuser}:${POSTGRES_PASSWORD:-wishlistpassword}@db:5432/${POSTGRES_DB:-wishlist}
      NODE_ENV: production
      PORT: 3000
      AUTH_SECRET: ${AUTH_SECRET}
      AUTH_URL: ${AUTH_URL:-https://wish.rasmusq.com}
      AUTH_TRUST_HOST: ${AUTH_TRUST_HOST:-true}
      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID:-}
      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET:-}
    depends_on:
      db:
        condition: service_healthy
    restart: unless-stopped
    labels:
      - traefik.enable=true
      - traefik.http.routers.wishlist.rule=Host(`wish.rasmusq.com`)
      - traefik.http.routers.wishlist.entryPoints=https
      - traefik.http.routers.wishlist.tls=true
      - traefik.http.routers.wishlist.tls.certresolver=letsencrypt
      - traefik.http.services.wishlist.loadbalancer.server.port=3000
      # Forward headers for Auth.js behind reverse proxy
      - traefik.http.middlewares.wishlist-headers.headers.customrequestheaders.X-Forwarded-Proto=https
      - traefik.http.middlewares.wishlist-headers.headers.customrequestheaders.X-Forwarded-Host=wish.rasmusq.com
      - traefik.http.routers.wishlist.middlewares=wishlist-headers
@@ -1,21 +0,0 @@
 services:
  database:
    image: postgres:16-alpine
    container_name: wishlist-postgres-test
    restart: unless-stopped
    ports:
      - 5432:5432
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: ${POSTGRES_DB}
    volumes:
      - db-data:/var/lib/postgresql/data
    healthcheck:
      test: ['CMD-SHELL', 'pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}']
      interval: 10s
      timeout: 5s
      retries: 5
 volumes:
  db-data:
@@ -1,62 +0,0 @@
 services:
  database:
    image: postgres:16-alpine
    container_name: wishlist-postgres
    restart: unless-stopped
    pull_policy: always
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: ${POSTGRES_DB}
    volumes:
      - /mnt/HC_Volume_102830676/wishlist:/var/lib/postgresql/data
    healthcheck:
      test: ['CMD-SHELL', 'pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}']
      interval: 10s
      timeout: 5s
      retries: 5
    networks:
      - wishlist-net
  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: wishlist-app
    restart: unless-stopped
    environment:
      DATABASE_URL: postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@database:5432/${POSTGRES_DB}
      NODE_ENV: production
      PORT: 3000
      AUTH_SECRET: ${AUTH_SECRET}
      AUTH_URL: ${AUTH_URL}
      AUTH_TRUST_HOST: 'true'
      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID:-}
      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET:-}
      AUTHENTIK_CLIENT_ID: ${AUTHENTIK_CLIENT_ID:-}
      AUTHENTIK_CLIENT_SECRET: ${AUTHENTIK_CLIENT_SECRET:-}
      AUTHENTIK_ISSUER: ${AUTHENTIK_ISSUER:-}
    depends_on:
      database:
        condition: service_healthy
    networks:
      - wishlist-net
      - traefik-net
    labels:
      - traefik.enable=true
      - traefik.docker.network=traefik-net
      # HTTPS router
      - traefik.http.routers.wishlist.rule=Host(`wish.rasmusq.com`)
      - traefik.http.routers.wishlist.entrypoints=websecure
      - traefik.http.routers.wishlist.tls.certresolver=letsencrypt
      # Forward headers for Auth.js
      - traefik.http.routers.wishlist.middlewares=wishlist-headers
      - traefik.http.middlewares.wishlist-headers.headers.customRequestHeaders.X-Forwarded-Proto=https
      - traefik.http.middlewares.wishlist-headers.headers.customRequestHeaders.X-Forwarded-Host=wish.rasmusq.com
      - traefik.http.services.wishlist.loadbalancer.server.port=3000
 networks:
  wishlist-net:
    name: wishlist-net
  traefik-net:
    external: true
@@ -0,0 +1,41 @@
 services:
  db:
    image: postgres:16-alpine
    container_name: wishlist-db
    environment:
      POSTGRES_USER: wishlistuser
      POSTGRES_PASSWORD: wishlistpassword
      POSTGRES_DB: wishlist
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U wishlistuser -d wishlist"]
      interval: 10s
      timeout: 5s
      retries: 5
  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: wishlist-app
    environment:
      DATABASE_URL: postgresql://wishlistuser:wishlistpassword@db:5432/wishlist
      NODE_ENV: production
      PORT: 3000
      AUTH_SECRET: ${AUTH_SECRET:-change-me-in-production}
      AUTH_URL: ${AUTH_URL:-http://localhost:3000}
      AUTH_TRUST_HOST: true
      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID:-}
      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET:-}
    ports:
      - "3000:3000"
    depends_on:
      db:
        condition: service_healthy
    restart: unless-stopped
 volumes:
  postgres_data:
@@ -1,10 +1,10 @@
 import type { Config } from 'drizzle-kit';
 export default {
-  schema: './src/lib/db/schema.ts',
+	schema: './src/lib/server/schema.ts',
-  out: './drizzle',
+	out: './drizzle',
-  dialect: 'postgresql',
+	dialect: 'postgresql',
-  dbCredentials: {
+	dbCredentials: {
-    url: process.env.DATABASE_URL || ''
+		url: process.env.DATABASE_URL || ''
-  }
+	}
 } satisfies Config;
@@ -1,58 +1,58 @@
-import { relations } from 'drizzle-orm/relations';
+import { relations } from "drizzle-orm/relations";
-import { wishlists, items, user, savedWishlists, reservations, session, account } from './schema';
+import { wishlists, items, user, savedWishlists, reservations, session, account } from "./schema";
-export const itemsRelations = relations(items, ({ one, many }) => ({
+export const itemsRelations = relations(items, ({one, many}) => ({
-  wishlist: one(wishlists, {
+	wishlist: one(wishlists, {
-    fields: [items.wishlistId],
+		fields: [items.wishlistId],
-    references: [wishlists.id]
+		references: [wishlists.id]
-  }),
+	}),
-  reservations: many(reservations)
+	reservations: many(reservations),
 }));
-export const wishlistsRelations = relations(wishlists, ({ one, many }) => ({
+export const wishlistsRelations = relations(wishlists, ({one, many}) => ({
-  items: many(items),
+	items: many(items),
-  user: one(user, {
+	user: one(user, {
-    fields: [wishlists.userId],
+		fields: [wishlists.userId],
-    references: [user.id]
+		references: [user.id]
-  }),
+	}),
-  savedWishlists: many(savedWishlists)
+	savedWishlists: many(savedWishlists),
 }));
-export const userRelations = relations(user, ({ many }) => ({
+export const userRelations = relations(user, ({many}) => ({
-  wishlists: many(wishlists),
+	wishlists: many(wishlists),
-  savedWishlists: many(savedWishlists),
+	savedWishlists: many(savedWishlists),
-  sessions: many(session),
+	sessions: many(session),
-  accounts: many(account)
+	accounts: many(account),
 }));
-export const savedWishlistsRelations = relations(savedWishlists, ({ one }) => ({
+export const savedWishlistsRelations = relations(savedWishlists, ({one}) => ({
-  user: one(user, {
+	user: one(user, {
-    fields: [savedWishlists.userId],
+		fields: [savedWishlists.userId],
-    references: [user.id]
+		references: [user.id]
-  }),
+	}),
-  wishlist: one(wishlists, {
+	wishlist: one(wishlists, {
-    fields: [savedWishlists.wishlistId],
+		fields: [savedWishlists.wishlistId],
-    references: [wishlists.id]
+		references: [wishlists.id]
-  })
+	}),
 }));
-export const reservationsRelations = relations(reservations, ({ one }) => ({
+export const reservationsRelations = relations(reservations, ({one}) => ({
-  item: one(items, {
+	item: one(items, {
-    fields: [reservations.itemId],
+		fields: [reservations.itemId],
-    references: [items.id]
+		references: [items.id]
-  })
+	}),
 }));
-export const sessionRelations = relations(session, ({ one }) => ({
+export const sessionRelations = relations(session, ({one}) => ({
-  user: one(user, {
+	user: one(user, {
-    fields: [session.userId],
+		fields: [session.userId],
-    references: [user.id]
+		references: [user.id]
-  })
+	}),
 }));
-export const accountRelations = relations(account, ({ one }) => ({
+export const accountRelations = relations(account, ({one}) => ({
-  user: one(user, {
+	user: one(user, {
-    fields: [account.userId],
+		fields: [account.userId],
-    references: [user.id]
+		references: [user.id]
-  })
+	}),
-}));
+}));
@@ -1,185 +1,141 @@
-import {
+import { pgTable, foreignKey, text, numeric, boolean, timestamp, unique, primaryKey } from "drizzle-orm/pg-core"
-  pgTable,
+import { sql } from "drizzle-orm"
  foreignKey,
  text,
  numeric,
  boolean,
  timestamp,
  unique,
  primaryKey
 } from 'drizzle-orm/pg-core';
 export const items = pgTable(
  'items',
  {
    id: text().primaryKey().notNull(),
    wishlistId: text('wishlist_id').notNull(),
    title: text().notNull(),
    description: text(),
    link: text(),
    imageUrl: text('image_url'),
    price: numeric({ precision: 10, scale: 2 }),
    currency: text().default('DKK'),
    color: text(),
    order: numeric().default('0').notNull(),
    isReserved: boolean('is_reserved').default(false).notNull(),
    createdAt: timestamp('created_at', { mode: 'string' }).defaultNow().notNull(),
    updatedAt: timestamp('updated_at', { mode: 'string' }).defaultNow().notNull()
  },
  (table) => [
    foreignKey({
      columns: [table.wishlistId],
      foreignColumns: [wishlists.id],
      name: 'items_wishlist_id_wishlists_id_fk'
    }).onDelete('cascade')
  ]
 );
 export const wishlists = pgTable(
  'wishlists',
  {
    id: text().primaryKey().notNull(),
    userId: text('user_id'),
    title: text().notNull(),
    description: text(),
    ownerToken: text('owner_token').notNull(),
    publicToken: text('public_token').notNull(),
    isFavorite: boolean('is_favorite').default(false).notNull(),
    color: text(),
    endDate: timestamp('end_date', { mode: 'string' }),
    createdAt: timestamp('created_at', { mode: 'string' }).defaultNow().notNull(),
    updatedAt: timestamp('updated_at', { mode: 'string' }).defaultNow().notNull(),
    theme: text().default('none')
  },
  (table) => [
    foreignKey({
      columns: [table.userId],
      foreignColumns: [user.id],
      name: 'wishlists_user_id_user_id_fk'
    }).onDelete('set null'),
    unique('wishlists_owner_token_unique').on(table.ownerToken),
    unique('wishlists_public_token_unique').on(table.publicToken)
  ]
 );
-export const savedWishlists = pgTable(
+export const items = pgTable("items", {
-  'saved_wishlists',
+	id: text().primaryKey().notNull(),
-  {
+	wishlistId: text("wishlist_id").notNull(),
-    id: text().primaryKey().notNull(),
+	title: text().notNull(),
-    userId: text('user_id').notNull(),
+	description: text(),
-    wishlistId: text('wishlist_id').notNull(),
+	link: text(),
-    isFavorite: boolean('is_favorite').default(false).notNull(),
+	imageUrl: text("image_url"),
-    createdAt: timestamp('created_at', { mode: 'string' }).defaultNow().notNull(),
+	price: numeric({ precision: 10, scale:  2 }),
-    ownerToken: text('owner_token')
+	currency: text().default('DKK'),
-  },
+	color: text(),
-  (table) => [
+	order: numeric().default('0').notNull(),
-    foreignKey({
+	isReserved: boolean("is_reserved").default(false).notNull(),
-      columns: [table.userId],
+	createdAt: timestamp("created_at", { mode: 'string' }).defaultNow().notNull(),
-      foreignColumns: [user.id],
+	updatedAt: timestamp("updated_at", { mode: 'string' }).defaultNow().notNull(),
-      name: 'saved_wishlists_user_id_user_id_fk'
+}, (table) => [
-    }).onDelete('cascade'),
+	foreignKey({
-    foreignKey({
+			columns: [table.wishlistId],
-      columns: [table.wishlistId],
+			foreignColumns: [wishlists.id],
-      foreignColumns: [wishlists.id],
+			name: "items_wishlist_id_wishlists_id_fk"
-      name: 'saved_wishlists_wishlist_id_wishlists_id_fk'
+		}).onDelete("cascade"),
-    }).onDelete('cascade')
+]);
  ]
 );
-export const user = pgTable(
+export const wishlists = pgTable("wishlists", {
-  'user',
+	id: text().primaryKey().notNull(),
-  {
+	userId: text("user_id"),
-    id: text().primaryKey().notNull(),
+	title: text().notNull(),
-    name: text(),
+	description: text(),
-    email: text(),
+	ownerToken: text("owner_token").notNull(),
-    emailVerified: timestamp({ mode: 'string' }),
+	publicToken: text("public_token").notNull(),
-    image: text(),
+	isFavorite: boolean("is_favorite").default(false).notNull(),
-    password: text(),
+	color: text(),
-    username: text(),
+	endDate: timestamp("end_date", { mode: 'string' }),
-    dashboardTheme: text('dashboard_theme').default('none'),
+	createdAt: timestamp("created_at", { mode: 'string' }).defaultNow().notNull(),
-    dashboardColor: text('dashboard_color'),
+	updatedAt: timestamp("updated_at", { mode: 'string' }).defaultNow().notNull(),
-    lastLogin: timestamp('last_login', { mode: 'string' }),
+	theme: text().default('none'),
-    createdAt: timestamp('created_at', { mode: 'string' }).defaultNow().notNull(),
+}, (table) => [
-    updatedAt: timestamp('updated_at', { mode: 'string' }).defaultNow().notNull()
+	foreignKey({
-  },
+			columns: [table.userId],
-  (table) => [
+			foreignColumns: [user.id],
-    unique('user_email_unique').on(table.email),
+			name: "wishlists_user_id_user_id_fk"
-    unique('user_username_unique').on(table.username)
+		}).onDelete("set null"),
-  ]
+	unique("wishlists_owner_token_unique").on(table.ownerToken),
-);
+	unique("wishlists_public_token_unique").on(table.publicToken),
 ]);
-export const reservations = pgTable(
+export const savedWishlists = pgTable("saved_wishlists", {
-  'reservations',
+	id: text().primaryKey().notNull(),
-  {
+	userId: text("user_id").notNull(),
-    id: text().primaryKey().notNull(),
+	wishlistId: text("wishlist_id").notNull(),
-    itemId: text('item_id').notNull(),
+	isFavorite: boolean("is_favorite").default(false).notNull(),
-    reserverName: text('reserver_name'),
+	createdAt: timestamp("created_at", { mode: 'string' }).defaultNow().notNull(),
-    createdAt: timestamp('created_at', { mode: 'string' }).defaultNow().notNull()
+	ownerToken: text("owner_token"),
-  },
+}, (table) => [
-  (table) => [
+	foreignKey({
-    foreignKey({
+			columns: [table.userId],
-      columns: [table.itemId],
+			foreignColumns: [user.id],
-      foreignColumns: [items.id],
+			name: "saved_wishlists_user_id_user_id_fk"
-      name: 'reservations_item_id_items_id_fk'
+		}).onDelete("cascade"),
-    }).onDelete('cascade')
+	foreignKey({
-  ]
+			columns: [table.wishlistId],
-);
+			foreignColumns: [wishlists.id],
 			name: "saved_wishlists_wishlist_id_wishlists_id_fk"
 		}).onDelete("cascade"),
 ]);
-export const session = pgTable(
+export const user = pgTable("user", {
-  'session',
+	id: text().primaryKey().notNull(),
-  {
+	name: text(),
-    sessionToken: text().primaryKey().notNull(),
+	email: text(),
-    userId: text().notNull(),
+	emailVerified: timestamp({ mode: 'string' }),
-    expires: timestamp({ mode: 'string' }).notNull()
+	image: text(),
-  },
+	password: text(),
-  (table) => [
+	username: text(),
-    foreignKey({
+	dashboardTheme: text("dashboard_theme").default('none'),
-      columns: [table.userId],
+	dashboardColor: text("dashboard_color"),
-      foreignColumns: [user.id],
+	lastLogin: timestamp("last_login", { mode: 'string' }),
-      name: 'session_userId_user_id_fk'
+	createdAt: timestamp("created_at", { mode: 'string' }).defaultNow().notNull(),
-    }).onDelete('cascade')
+	updatedAt: timestamp("updated_at", { mode: 'string' }).defaultNow().notNull(),
-  ]
+}, (table) => [
-);
+	unique("user_email_unique").on(table.email),
 	unique("user_username_unique").on(table.username),
 ]);
-export const verificationToken = pgTable(
+export const reservations = pgTable("reservations", {
-  'verificationToken',
+	id: text().primaryKey().notNull(),
-  {
+	itemId: text("item_id").notNull(),
-    identifier: text().notNull(),
+	reserverName: text("reserver_name"),
-    token: text().notNull(),
+	createdAt: timestamp("created_at", { mode: 'string' }).defaultNow().notNull(),
-    expires: timestamp({ mode: 'string' }).notNull()
+}, (table) => [
-  },
+	foreignKey({
-  (table) => [
+			columns: [table.itemId],
-    primaryKey({
+			foreignColumns: [items.id],
-      columns: [table.identifier, table.token],
+			name: "reservations_item_id_items_id_fk"
-      name: 'verificationToken_identifier_token_pk'
+		}).onDelete("cascade"),
-    })
+]);
  ]
 );
-export const account = pgTable(
+export const session = pgTable("session", {
-  'account',
+	sessionToken: text().primaryKey().notNull(),
-  {
+	userId: text().notNull(),
-    userId: text().notNull(),
+	expires: timestamp({ mode: 'string' }).notNull(),
-    type: text().notNull(),
+}, (table) => [
-    provider: text().notNull(),
+	foreignKey({
-    providerAccountId: text().notNull(),
+			columns: [table.userId],
-    refreshToken: text('refresh_token'),
+			foreignColumns: [user.id],
-    accessToken: text('access_token'),
+			name: "session_userId_user_id_fk"
-    expiresAt: numeric('expires_at'),
+		}).onDelete("cascade"),
-    tokenType: text('token_type'),
+]);
-    scope: text(),
+
-    idToken: text('id_token'),
+export const verificationToken = pgTable("verificationToken", {
-    sessionState: text('session_state')
+	identifier: text().notNull(),
-  },
+	token: text().notNull(),
-  (table) => [
+	expires: timestamp({ mode: 'string' }).notNull(),
-    foreignKey({
+}, (table) => [
-      columns: [table.userId],
+	primaryKey({ columns: [table.identifier, table.token], name: "verificationToken_identifier_token_pk"}),
-      foreignColumns: [user.id],
+]);
-      name: 'account_userId_user_id_fk'
+
-    }).onDelete('cascade'),
+export const account = pgTable("account", {
-    primaryKey({
+	userId: text().notNull(),
-      columns: [table.provider, table.providerAccountId],
+	type: text().notNull(),
-      name: 'account_provider_providerAccountId_pk'
+	provider: text().notNull(),
-    })
+	providerAccountId: text().notNull(),
-  ]
+	refreshToken: text("refresh_token"),
-);
+	accessToken: text("access_token"),
 	expiresAt: numeric("expires_at"),
 	tokenType: text("token_type"),
 	scope: text(),
 	idToken: text("id_token"),
 	sessionState: text("session_state"),
 }, (table) => [
 	foreignKey({
 			columns: [table.userId],
 			foreignColumns: [user.id],
 			name: "account_userId_user_id_fk"
 		}).onDelete("cascade"),
 	primaryKey({ columns: [table.provider, table.providerAccountId], name: "account_provider_providerAccountId_pk"}),
 ]);
@@ -1,47 +0,0 @@
 import js from '@eslint/js';
 import ts from 'typescript-eslint';
 import svelte from 'eslint-plugin-svelte';
 import globals from 'globals';
 import svelteParser from 'svelte-eslint-parser';
 /** @type {import('eslint').Linter.Config[]} */
 export default [
  js.configs.recommended,
  ...ts.configs.recommended,
  ...svelte.configs['flat/recommended'],
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    },
    rules: {
      // Disable overly strict Svelte navigation rules
      'svelte/no-navigation-without-resolve': 'off',
      'svelte/no-navigation-without-base': 'off'
    }
  },
  // Configuration for .svelte files
  {
    files: ['**/*.svelte'],
    languageOptions: {
      parserOptions: {
        parser: ts.parser
      }
    }
  },
  // Configuration for .svelte.ts files (Svelte runes in TypeScript)
  {
    files: ['**/*.svelte.ts'],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: ts.parser
      }
    }
  },
  {
    ignores: ['build/', '.svelte-kit/', 'dist/']
  }
 ];
@@ -1,62 +1,53 @@
 {
-  "name": "wishlist-app",
+	"name": "wishlist-app",
-  "private": true,
+	"private": true,
-  "version": "0.0.1",
+	"version": "0.0.1",
-  "type": "module",
+	"type": "module",
-  "scripts": {
+	"scripts": {
-    "dev": "vite dev",
+		"dev": "vite dev",
-    "build": "vite build",
+		"build": "vite build",
-    "preview": "vite preview",
+		"preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
+		"prepare": "svelte-kit sync || echo ''",
-    "postinstall": "patch-package",
+		"postinstall": "patch-package",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "db:generate": "drizzle-kit generate",
+		"db:generate": "drizzle-kit generate",
-    "db:migrate": "drizzle-kit migrate",
+		"db:migrate": "drizzle-kit migrate",
-    "db:push": "drizzle-kit push",
+		"db:push": "drizzle-kit push",
-    "db:studio": "drizzle-kit studio",
+		"db:studio": "drizzle-kit studio"
-    "lint": "prettier --check . && eslint .",
+	},
-    "format": "prettier --write ."
+	"devDependencies": {
-  },
+		"@lucide/svelte": "^0.544.0",
-  "devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.0",
-    "@eslint/js": "^9.25.0",
+		"@sveltejs/adapter-node": "^5.4.0",
-    "@lucide/svelte": "^0.544.0",
+		"@sveltejs/kit": "^2.48.5",
-    "@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@sveltejs/adapter-node": "^5.4.0",
+		"@tailwindcss/vite": "^4.1.17",
-    "@sveltejs/kit": "^2.48.5",
+		"@types/bcrypt": "^6.0.0",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"drizzle-kit": "^0.31.7",
-    "@tailwindcss/vite": "^4.1.17",
+		"patch-package": "^8.0.1",
-    "@types/bcrypt": "^6.0.0",
+		"postinstall-postinstall": "^2.1.0",
-    "drizzle-kit": "^0.31.7",
+		"svelte": "^5.43.8",
-    "eslint": "^9.25.0",
+		"svelte-check": "^4.3.4",
-    "eslint-plugin-svelte": "^3.5.1",
+		"tailwindcss": "^4.1.17",
-    "globals": "^16.0.0",
+		"tw-animate-css": "^1.4.0",
-    "patch-package": "^8.0.1",
+		"typescript": "^5.9.3",
-    "postinstall-postinstall": "^2.1.0",
+		"vite": "^7.2.2"
-    "prettier": "^3.5.3",
+	},
-    "prettier-plugin-svelte": "^3.3.3",
+	"dependencies": {
-    "svelte": "^5.43.8",
+		"@auth/core": "^0.34.3",
-    "svelte-check": "^4.3.4",
+		"@auth/drizzle-adapter": "^1.11.1",
-    "svelte-eslint-parser": "^1.6.0",
+		"@auth/sveltekit": "^1.11.1",
-    "tailwindcss": "^4.1.17",
+		"@internationalized/date": "^3.10.0",
-    "tw-animate-css": "^1.4.0",
+		"@paralleldrive/cuid2": "^3.0.4",
-    "typescript": "^5.9.3",
+		"bcrypt": "^6.0.0",
-    "typescript-eslint": "^8.31.0",
+		"bits-ui": "^2.14.4",
-    "vite": "^7.2.2"
+		"clsx": "^2.1.1",
-  },
+		"drizzle-orm": "^0.44.7",
-  "dependencies": {
+		"lucide-svelte": "^0.554.0",
-    "@auth/core": "^0.34.3",
+		"postgres": "^3.4.7",
-    "@auth/drizzle-adapter": "^1.11.1",
+		"svelte-dnd-action": "^0.9.67",
-    "@auth/sveltekit": "^1.11.1",
+		"tailwind-merge": "^3.4.0",
-    "@internationalized/date": "^3.10.0",
+		"tailwind-variants": "^3.2.2"
-    "@paralleldrive/cuid2": "^3.0.4",
+	}
    "bcrypt": "^6.0.0",
    "bits-ui": "^2.14.4",
    "clsx": "^2.1.1",
    "drizzle-orm": "^0.44.7",
    "postgres": "^3.4.7",
    "svelte-dnd-action": "^0.9.67",
    "tailwind-merge": "^3.4.0",
    "tailwind-variants": "^3.2.2"
  }
 }
@@ -1,15 +1,15 @@
-@import 'tailwindcss';
+@import "tailwindcss";
-@import 'tw-animate-css';
+@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
 * {
-  transition:
+	transition:
-    background-color 1s ease,
+		background-color 1s ease,
-    background-image 1s ease,
+		background-image 1s ease,
-    color 1s ease,
+		color 1s ease,
-    border-color 1s ease;
+		border-color 1s ease;
 }
 :root {
@@ -1,14 +1,14 @@
 import type { Session } from '@auth/core/types';
 declare global {
-  namespace App {
+	namespace App {
-    interface Locals {
+		interface Locals {
-      session: Session | null;
+			session: Session | null;
-    }
+		}
-    interface PageData {
+		interface PageData {
-      session: Session | null;
+			session: Session | null;
-    }
+		}
-  }
+	}
 }
 export {};
@@ -1,22 +1,21 @@
 <!doctype html>
 <html lang="en">
-  <head>
+	<head>
-    <meta charset="utf-8" />
+		<meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script>
+		<script>
-      (function () {
+			(function() {
-        const theme = localStorage.getItem('theme') || 'system';
+				const theme = localStorage.getItem('theme') || 'system';
-        const isDark =
+				const isDark = theme === 'dark' ||
-          theme === 'dark' ||
+					(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-          (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+				if (isDark) {
-        if (isDark) {
+					document.documentElement.classList.add('dark');
-          document.documentElement.classList.add('dark');
+				}
-        }
+			})();
-      })();
+		</script>
-    </script>
+		%sveltekit.head%
-    %sveltekit.head%
+	</head>
-  </head>
+	<body data-sveltekit-preload-data="hover">
-  <body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
-    <div style="display: contents">%sveltekit.body%</div>
+	</body>
  </body>
 </html>
@@ -4,131 +4,128 @@ import Credentials from '@auth/core/providers/credentials';
 import Google from '@auth/core/providers/google';
 import type { OAuthConfig } from '@auth/core/providers';
 import { db } from '$lib/server/db';
-import { users } from '$lib/db/schema';
+import { users } from '$lib/server/schema';
 import { eq } from 'drizzle-orm';
 import bcrypt from 'bcrypt';
 import { env } from '$env/dynamic/private';
 import type { SvelteKitAuthConfig } from '@auth/sveltekit';
 interface AuthentikProfile {
  sub: string;
  email: string;
  name?: string;
  preferred_username?: string;
  picture?: string;
 }
 function Authentik(config: {
-  clientId: string;
+	clientId: string;
-  clientSecret: string;
+	clientSecret: string;
-  issuer: string;
+	issuer: string;
-}): OAuthConfig<AuthentikProfile> {
+}): OAuthConfig<any> {
-  return {
+	return {
-    id: 'authentik',
+		id: 'authentik',
-    name: 'Authentik',
+		name: 'Authentik',
-    type: 'oidc',
+		type: 'oidc',
-    clientId: config.clientId,
+		clientId: config.clientId,
-    clientSecret: config.clientSecret,
+		clientSecret: config.clientSecret,
-    issuer: config.issuer,
+		issuer: config.issuer,
-    authorization: {
+		authorization: {
-      params: {
+			params: {
-        scope: 'openid email profile'
+				scope: 'openid email profile'
-      }
+			}
-    },
+		},
-    profile(profile) {
+		profile(profile) {
-      return {
+			return {
-        id: profile.sub,
+				id: profile.sub,
-        email: profile.email,
+				email: profile.email,
-        name: profile.name || profile.preferred_username,
+				name: profile.name || profile.preferred_username,
-        image: profile.picture
+				image: profile.picture
-      };
+			};
-    }
+		}
-  };
+	};
 }
 const authConfig: SvelteKitAuthConfig = {
-  adapter: DrizzleAdapter(db),
+	adapter: DrizzleAdapter(db),
-  session: {
+	session: {
-    strategy: 'jwt'
+		strategy: 'jwt'
-  },
+	},
-  providers: [
+	providers: [
-    ...(env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET
+		...(env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET
-      ? [
+			? [
-          Google({
+					Google({
-            clientId: env.GOOGLE_CLIENT_ID,
+						clientId: env.GOOGLE_CLIENT_ID,
-            clientSecret: env.GOOGLE_CLIENT_SECRET
+						clientSecret: env.GOOGLE_CLIENT_SECRET
-          })
+					})
-        ]
+				]
-      : []),
+			: []),
-    ...(env.AUTHENTIK_CLIENT_ID && env.AUTHENTIK_CLIENT_SECRET && env.AUTHENTIK_ISSUER
+		...(env.AUTHENTIK_CLIENT_ID && env.AUTHENTIK_CLIENT_SECRET && env.AUTHENTIK_ISSUER
-      ? [
+			? [
-          Authentik({
+					Authentik({
-            clientId: env.AUTHENTIK_CLIENT_ID,
+						clientId: env.AUTHENTIK_CLIENT_ID,
-            clientSecret: env.AUTHENTIK_CLIENT_SECRET,
+						clientSecret: env.AUTHENTIK_CLIENT_SECRET,
-            issuer: env.AUTHENTIK_ISSUER
+						issuer: env.AUTHENTIK_ISSUER
-          })
+					})
-        ]
+				]
-      : []),
+			: []),
-    Credentials({
+		Credentials({
-      id: 'credentials',
+			id: 'credentials',
-      name: 'credentials',
+			name: 'credentials',
-      credentials: {
+			credentials: {
-        username: { label: 'Username', type: 'text' },
+				username: { label: 'Username', type: 'text' },
-        password: { label: 'Password', type: 'password' }
+				password: { label: 'Password', type: 'password' }
-      },
+			},
-      async authorize(credentials) {
+			async authorize(credentials) {
-        if (!credentials?.username || !credentials?.password) {
+				if (!credentials?.username || !credentials?.password) {
-          return null;
+					return null;
-        }
+				}
-        const user = await db.query.users.findFirst({
+				const user = await db.query.users.findFirst({
-          where: eq(users.username, credentials.username as string)
+					where: eq(users.username, credentials.username as string)
-        });
+				});
-        if (!user || !user.password) {
+				if (!user || !user.password) {
-          return null;
+					return null;
-        }
+				}
-        const isValidPassword = await bcrypt.compare(credentials.password as string, user.password);
+				const isValidPassword = await bcrypt.compare(
 					credentials.password as string,
 					user.password
 				);
-        if (!isValidPassword) {
+				if (!isValidPassword) {
-          return null;
+					return null;
-        }
+				}
-        return {
+				return {
-          id: user.id,
+					id: user.id,
-          email: user.email || undefined,
+					email: user.email || undefined,
-          name: user.name,
+					name: user.name,
-          image: user.image
+					image: user.image
-        };
+				};
-      }
+			}
-    })
+		})
-  ],
+	],
-  pages: {
+	pages: {
-    signIn: '/signin'
+		signIn: '/signin'
-  },
+	},
-  callbacks: {
+	callbacks: {
-    async signIn({ user }) {
+		async signIn({ user }) {
-      if (user?.id) {
+			if (user?.id) {
-        await db.update(users).set({ lastLogin: new Date() }).where(eq(users.id, user.id));
+				await db.update(users)
-      }
+					.set({ lastLogin: new Date() })
-      return true;
+					.where(eq(users.id, user.id));
-    },
+			}
-    async jwt({ token, user }) {
+			return true;
-      if (user) {
+		},
-        token.id = user.id;
+		async jwt({ token, user }) {
-      }
+			if (user) {
-      return token;
+				token.id = user.id;
-    },
+			}
-    async session({ session, token }) {
+			return token;
-      if (token && session.user) {
+		},
-        session.user.id = token.id as string;
+		async session({ session, token }) {
-      }
+			if (token && session.user) {
-      return session;
+				session.user.id = token.id as string;
-    }
+			}
-  },
+			return session;
-  secret: env.AUTH_SECRET,
+		}
-  trustHost: env.AUTH_TRUST_HOST === 'true'
+	},
 	secret: env.AUTH_SECRET,
 	trustHost: true
 };
 export const { handle, signIn, signOut } = SvelteKitAuth(authConfig);
@@ -1,161 +1,161 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import WishlistSection from '$lib/components/dashboard/WishlistSection.svelte';
+	import WishlistSection from '$lib/components/dashboard/WishlistSection.svelte';
-  import {
+	import { getLocalWishlists, forgetLocalWishlist, toggleLocalFavorite, type LocalWishlist } from '$lib/utils/localWishlists';
-    getLocalWishlists,
+	import { languageStore } from '$lib/stores/language.svelte';
-    forgetLocalWishlist,
+	import { Star } from 'lucide-svelte';
-    toggleLocalFavorite,
+	import { onMount } from 'svelte';
    type LocalWishlist
  } from '$lib/utils/localWishlists';
  import { languageStore } from '$lib/stores/language.svelte';
  import { Star } from '@lucide/svelte';
  import { onMount } from 'svelte';
-  let {
+	let {
-    isAuthenticated = false,
+		isAuthenticated = false,
-    fallbackColor = null,
+		fallbackColor = null,
-    fallbackTheme = null
+		fallbackTheme = null
-  }: {
+	}: {
-    isAuthenticated?: boolean;
+		isAuthenticated?: boolean;
-    fallbackColor?: string | null;
+		fallbackColor?: string | null;
-    fallbackTheme?: string | null;
+		fallbackTheme?: string | null;
-  } = $props();
+	} = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  let localWishlists = $state<LocalWishlist[]>([]);
+	let localWishlists = $state<LocalWishlist[]>([]);
-  let enrichedWishlists = $state<Array<Record<string, unknown>>>([]);
+	let enrichedWishlists = $state<any[]>([]);
-  onMount(async () => {
+	// Load local wishlists on mount and fetch their data from server
-    localWishlists = getLocalWishlists();
+	onMount(async () => {
 		localWishlists = getLocalWishlists();
-    const promises = localWishlists.map(async (local) => {
+		// Fetch full wishlist data for each local wishlist
-      try {
+		const promises = localWishlists.map(async (local) => {
-        const response = await fetch(`/api/wishlist/${local.ownerToken}`);
+			try {
-        if (response.ok) {
+				const response = await fetch(`/api/wishlist/${local.ownerToken}`);
-          const data = await response.json();
+				if (response.ok) {
-          return {
+					const data = await response.json();
-            ...data,
+					return {
-            isFavorite: local.isFavorite || false
+						...data,
-          };
+						isFavorite: local.isFavorite || false
-        }
+					};
-      } catch (error) {
+				}
-        console.error('Failed to fetch wishlist data:', error);
+			} catch (error) {
-      }
+				console.error('Failed to fetch wishlist data:', error);
-      return {
+			}
-        id: local.ownerToken,
+			// Fallback to local data if fetch fails
-        title: local.title,
+			return {
-        ownerToken: local.ownerToken,
+				id: local.ownerToken,
-        publicToken: local.publicToken,
+				title: local.title,
-        createdAt: local.createdAt,
+				ownerToken: local.ownerToken,
-        isFavorite: local.isFavorite || false,
+				publicToken: local.publicToken,
-        items: [],
+				createdAt: local.createdAt,
-        theme: null,
+				isFavorite: local.isFavorite || false,
-        color: null
+				items: [],
-      };
+				theme: null,
-    });
+				color: null
 			};
 		});
-    enrichedWishlists = await Promise.all(promises);
+		enrichedWishlists = await Promise.all(promises);
-  });
+	});
-  async function refreshEnrichedWishlists() {
+	async function refreshEnrichedWishlists() {
-    const promises = localWishlists.map(async (local) => {
+		const promises = localWishlists.map(async (local) => {
-      try {
+			try {
-        const response = await fetch(`/api/wishlist/${local.ownerToken}`);
+				const response = await fetch(`/api/wishlist/${local.ownerToken}`);
-        if (response.ok) {
+				if (response.ok) {
-          const data = await response.json();
+					const data = await response.json();
-          return {
+					return {
-            ...data,
+						...data,
-            isFavorite: local.isFavorite || false
+						isFavorite: local.isFavorite || false
-          };
+					};
-        }
+				}
-      } catch (error) {
+			} catch (error) {
-        console.error('Failed to fetch wishlist data:', error);
+				console.error('Failed to fetch wishlist data:', error);
-      }
+			}
-      return {
+			return {
-        id: local.ownerToken,
+				id: local.ownerToken,
-        title: local.title,
+				title: local.title,
-        ownerToken: local.ownerToken,
+				ownerToken: local.ownerToken,
-        publicToken: local.publicToken,
+				publicToken: local.publicToken,
-        createdAt: local.createdAt,
+				createdAt: local.createdAt,
-        isFavorite: local.isFavorite || false,
+				isFavorite: local.isFavorite || false,
-        items: [],
+				items: [],
-        theme: null,
+				theme: null,
-        color: null
+				color: null
-      };
+			};
-    });
+		});
-    enrichedWishlists = await Promise.all(promises);
+		enrichedWishlists = await Promise.all(promises);
-  }
+	}
-  async function handleForget(ownerToken: string) {
+	async function handleForget(ownerToken: string) {
-    forgetLocalWishlist(ownerToken);
+		forgetLocalWishlist(ownerToken);
-    localWishlists = getLocalWishlists();
+		localWishlists = getLocalWishlists();
-    await refreshEnrichedWishlists();
+		await refreshEnrichedWishlists();
-  }
+	}
-  async function handleToggleFavorite(ownerToken: string) {
+	async function handleToggleFavorite(ownerToken: string) {
-    toggleLocalFavorite(ownerToken);
+		toggleLocalFavorite(ownerToken);
-    localWishlists = getLocalWishlists();
+		localWishlists = getLocalWishlists();
-    await refreshEnrichedWishlists();
+		await refreshEnrichedWishlists();
-  }
+	}
-  // Use enriched wishlists which have full data including theme and color
+	// Use enriched wishlists which have full data including theme and color
-  const transformedWishlists = $derived(() => enrichedWishlists);
+	const transformedWishlists = $derived(() => enrichedWishlists);
-  // Description depends on authentication status
+	// Description depends on authentication status
-  const sectionDescription = $derived(() => {
+	const sectionDescription = $derived(() => {
-    if (isAuthenticated) {
+		if (isAuthenticated) {
-      return (
+			return t.dashboard.localWishlistsAuthDescription || "Wishlists stored in your browser that haven't been claimed yet.";
-        t.dashboard.localWishlistsAuthDescription ||
+		}
-        "Wishlists stored in your browser that haven't been claimed yet."
+		return t.dashboard.localWishlistsDescription || "Wishlists stored in your browser. Sign in to save them permanently.";
-      );
+	});
    }
    return (
      t.dashboard.localWishlistsDescription ||
      'Wishlists stored in your browser. Sign in to save them permanently.'
    );
  });
 </script>
 <WishlistSection
-  title={t.dashboard.localWishlists || 'Local Wishlists'}
+	title={t.dashboard.localWishlists || "Local Wishlists"}
-  description={sectionDescription()}
+	description={sectionDescription()}
-  items={transformedWishlists()}
+	items={transformedWishlists()}
-  emptyMessage={t.dashboard.emptyLocalWishlists || 'No local wishlists yet'}
+	emptyMessage={t.dashboard.emptyLocalWishlists || "No local wishlists yet"}
-  emptyActionLabel={t.dashboard.createLocalWishlist || 'Create local wishlist'}
+	emptyActionLabel={t.dashboard.createLocalWishlist || "Create local wishlist"}
-  emptyActionHref="/"
+	emptyActionHref="/"
-  showCreateButton={true}
+	showCreateButton={true}
-  {fallbackColor}
+	fallbackColor={fallbackColor}
-  {fallbackTheme}
+	fallbackTheme={fallbackTheme}
 >
-  {#snippet actions(wishlist: Record<string, unknown>, unlocked: boolean)}
+		{#snippet actions(wishlist, unlocked)}
-    <div class="flex gap-2 flex-wrap">
+			<div class="flex gap-2 flex-wrap">
-      <Button size="sm" variant="outline" onclick={() => handleToggleFavorite(wishlist.ownerToken as string)}>
+				<Button
-        <Star class={wishlist.isFavorite ? 'fill-yellow-500 text-yellow-500' : ''} />
+					size="sm"
-      </Button>
+					variant="outline"
-      <Button
+					onclick={() => handleToggleFavorite(wishlist.ownerToken)}
-        size="sm"
+				>
-        onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken as string}/edit`)}
+					<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
-      >
+				</Button>
-        {t.dashboard.manage}
+				<Button
-      </Button>
+					size="sm"
-      <Button
+					onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
-        size="sm"
+				>
-        variant="outline"
+					{t.dashboard.manage}
-        onclick={() => {
+				</Button>
-          navigator.clipboard.writeText(
+				<Button
-            `${window.location.origin}/wishlist/${wishlist.publicToken as string}`
+					size="sm"
-          );
+					variant="outline"
-        }}
+					onclick={() => {
-      >
+						navigator.clipboard.writeText(
-        {t.dashboard.copyLink}
+							`${window.location.origin}/wishlist/${wishlist.publicToken}`
-      </Button>
+						);
-      {#if unlocked}
+					}}
-        <Button size="sm" variant="destructive" onclick={() => handleForget(wishlist.ownerToken as string)}>
+				>
-          {t.dashboard.forget || 'Forget'}
+					{t.dashboard.copyLink}
-        </Button>
+				</Button>
-      {/if}
+				{#if unlocked}
-    </div>
+					<Button
-  {/snippet}
+						size="sm"
 						variant="destructive"
 						onclick={() => handleForget(wishlist.ownerToken)}
 					>
 						{t.dashboard.forget || "Forget"}
 					</Button>
 				{/if}
 			</div>
 		{/snippet}
 </WishlistSection>
@@ -1,60 +1,55 @@
 <script lang="ts">
-  import {
+	import { Button } from '$lib/components/ui/button';
-    Card,
+	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
-    CardContent,
+	import type { Snippet } from 'svelte';
-    CardDescription,
+	import { getCardStyle } from '$lib/utils/colors';
-    CardHeader,
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
    CardTitle
  } from '$lib/components/ui/card';
  import type { Snippet } from 'svelte';
  import { getCardStyle } from '$lib/utils/colors';
  import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
-  let {
+	let {
-    title,
+		title,
-    description,
+		description,
-    itemCount,
+		itemCount,
-    color = null,
+		color = null,
-    theme = null,
+		theme = null,
-    fallbackColor = null,
+		fallbackColor = null,
-    fallbackTheme = null,
+		fallbackTheme = null,
-    children
+		children
-  }: {
+	}: {
-    title: string;
+		title: string;
-    description?: string | null;
+		description?: string | null;
-    itemCount: number;
+		itemCount: number;
-    color?: string | null;
+		color?: string | null;
-    theme?: string | null;
+		theme?: string | null;
-    fallbackColor?: string | null;
+		fallbackColor?: string | null;
-    fallbackTheme?: string | null;
+		fallbackTheme?: string | null;
-    children?: Snippet;
+		children?: Snippet;
-  } = $props();
+	} = $props();
-  const finalColor = $derived(color || fallbackColor);
+	const finalColor = $derived(color || fallbackColor);
-  const finalTheme = $derived(theme || fallbackTheme);
+	const finalTheme = $derived(theme || fallbackTheme);
-  const cardStyle = $derived(getCardStyle(color, fallbackColor));
+	const cardStyle = $derived(getCardStyle(color, fallbackColor));
 </script>
 <Card style={cardStyle} class="h-full flex flex-col relative overflow-hidden">
-  <ThemeCard themeName={finalTheme} color={finalColor} />
+	<ThemeCard themeName={finalTheme} color={finalColor} />
-  <CardHeader class="flex-shrink-0 relative z-10">
+	<CardHeader class="flex-shrink-0 relative z-10">
-    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-2">
+		<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-2">
-      <CardTitle class="text-lg flex items-center gap-2 flex-1 min-w-0">
+			<CardTitle class="text-lg flex items-center gap-2 flex-1 min-w-0">
-        <span class="truncate">{title}</span>
+				<span class="truncate">{title}</span>
-      </CardTitle>
+			</CardTitle>
-      <span class="text-sm text-muted-foreground flex-shrink-0">
+			<span class="text-sm text-muted-foreground flex-shrink-0">
-        {itemCount} item{itemCount === 1 ? '' : 's'}
+				{itemCount} item{itemCount === 1 ? '' : 's'}
-      </span>
+			</span>
-    </div>
+		</div>
-    {#if description}
+		{#if description}
-      <CardDescription class="line-clamp-3 whitespace-pre-line">{description}</CardDescription>
+			<CardDescription class="line-clamp-3 whitespace-pre-line">{description}</CardDescription>
-    {/if}
+		{/if}
-  </CardHeader>
+	</CardHeader>
-  <CardContent class="space-y-2 flex-1 flex flex-col justify-end relative z-10">
+	<CardContent class="space-y-2 flex-1 flex flex-col justify-end relative z-10">
-    {#if children}
+		{#if children}
-      <div>
+			<div>
-        {@render children()}
+				{@render children()}
-      </div>
+			</div>
-    {/if}
+		{/if}
-  </CardContent>
+	</CardContent>
 </Card>
@@ -1,102 +1,97 @@
 <script lang="ts">
-  import {
+	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
-    Card,
+	import { Button } from '$lib/components/ui/button';
-    CardContent,
+	import EmptyState from '$lib/components/layout/EmptyState.svelte';
-    CardDescription,
+	import type { Snippet } from 'svelte';
-    CardHeader,
+	import { flip } from 'svelte/animate';
-    CardTitle
+	import { getCardStyle } from '$lib/utils/colors';
-  } from '$lib/components/ui/card';
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
  import EmptyState from '$lib/components/layout/EmptyState.svelte';
  import type { Snippet } from 'svelte';
  import { flip } from 'svelte/animate';
  import { getCardStyle } from '$lib/utils/colors';
  import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
-  let {
+	let {
-    title,
+		title,
-    description,
+		description,
-    items,
+		items,
-    emptyMessage,
+		emptyMessage,
-    emptyDescription,
+		emptyDescription,
-    emptyActionLabel,
+		emptyActionLabel,
-    emptyActionHref,
+		emptyActionHref,
-    fallbackColor = null,
+		fallbackColor = null,
-    fallbackTheme = null,
+		fallbackTheme = null,
-    headerAction,
+		headerAction,
-    searchBar,
+		searchBar,
-    children
+		children
-  }: {
+	}: {
-    title: string;
+		title: string;
-    description: string;
+		description: string;
-    items: Array<Record<string, unknown>>;
+		items: any[];
-    emptyMessage: string;
+		emptyMessage: string;
-    emptyDescription?: string;
+		emptyDescription?: string;
-    emptyActionLabel?: string;
+		emptyActionLabel?: string;
-    emptyActionHref?: string;
+		emptyActionHref?: string;
-    fallbackColor?: string | null;
+		fallbackColor?: string | null;
-    fallbackTheme?: string | null;
+		fallbackTheme?: string | null;
-    headerAction?: Snippet;
+		headerAction?: Snippet;
-    searchBar?: Snippet;
+		searchBar?: Snippet;
-    children: Snippet<[Record<string, unknown>]>;
+		children: Snippet<[any]>;
-  } = $props();
+	} = $props();
-  const cardStyle = $derived(getCardStyle(fallbackColor, null));
+	const cardStyle = $derived(getCardStyle(fallbackColor, null));
-  let scrollContainer: HTMLElement | null = null;
+	let scrollContainer: HTMLElement | null = null;
-  function handleWheel(event: WheelEvent) {
+	function handleWheel(event: WheelEvent) {
-    if (!scrollContainer) return;
+		if (!scrollContainer) return;
-    // Check if we have horizontal overflow
+		// Check if we have horizontal overflow
-    const hasHorizontalScroll = scrollContainer.scrollWidth > scrollContainer.clientWidth;
+		const hasHorizontalScroll = scrollContainer.scrollWidth > scrollContainer.clientWidth;
-    if (hasHorizontalScroll && event.deltaY !== 0) {
+		if (hasHorizontalScroll && event.deltaY !== 0) {
-      event.preventDefault();
+			event.preventDefault();
-      scrollContainer.scrollLeft += event.deltaY;
+			scrollContainer.scrollLeft += event.deltaY;
-    }
+		}
-  }
+	}
 </script>
 <Card style={cardStyle} class="relative overflow-hidden">
-  <ThemeCard themeName={fallbackTheme} color={fallbackColor} showPattern={false} />
+	<ThemeCard themeName={fallbackTheme} color={fallbackColor} showPattern={false} />
-  <CardHeader class="relative z-10">
+	<CardHeader class="relative z-10">
-    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+		<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-      <div class="flex-1 min-w-0">
+			<div class="flex-1 min-w-0">
-        <CardTitle>{title}</CardTitle>
+				<CardTitle>{title}</CardTitle>
-        <CardDescription>{description}</CardDescription>
+				<CardDescription>{description}</CardDescription>
-      </div>
+			</div>
-      {#if headerAction}
+			{#if headerAction}
-        <div class="flex-shrink-0">
+				<div class="flex-shrink-0">
-          {@render headerAction()}
+					{@render headerAction()}
-        </div>
+				</div>
-      {/if}
+			{/if}
-    </div>
+		</div>
-    {#if searchBar}
+		{#if searchBar}
-      <div class="mt-4">
+			<div class="mt-4">
-        {@render searchBar()}
+				{@render searchBar()}
-      </div>
+			</div>
-    {/if}
+		{/if}
-  </CardHeader>
+	</CardHeader>
-  <CardContent class="relative z-10">
+	<CardContent class="relative z-10">
-    {#if items && items.length > 0}
+		{#if items && items.length > 0}
-      <div
+			<div
-        bind:this={scrollContainer}
+				bind:this={scrollContainer}
-        onwheel={handleWheel}
+				onwheel={handleWheel}
-        class="flex overflow-x-auto gap-4 pb-4 -mx-6 px-6"
+				class="flex overflow-x-auto gap-4 pb-4 -mx-6 px-6"
-      >
+			>
-        {#each items as item (item.id)}
+				{#each items as item (item.id)}
-          <div class="flex-shrink-0 w-80" animate:flip={{ duration: 300 }}>
+					<div class="flex-shrink-0 w-80" animate:flip={{ duration: 300 }}>
-            {@render children(item)}
+						{@render children(item)}
-          </div>
+					</div>
-        {/each}
+				{/each}
-      </div>
+			</div>
-    {:else}
+		{:else}
-      <EmptyState
+			<EmptyState
-        message={emptyMessage}
+				message={emptyMessage}
-        description={emptyDescription}
+				description={emptyDescription}
-        actionLabel={emptyActionLabel}
+				actionLabel={emptyActionLabel}
-        actionHref={emptyActionHref}
+				actionHref={emptyActionHref}
-      />
+			/>
-    {/if}
+		{/if}
-  </CardContent>
+	</CardContent>
 </Card>
@@ -1,178 +1,166 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import WishlistGrid from '$lib/components/dashboard/WishlistGrid.svelte';
+	import WishlistGrid from '$lib/components/dashboard/WishlistGrid.svelte';
-  import WishlistCard from '$lib/components/dashboard/WishlistCard.svelte';
+	import WishlistCard from '$lib/components/dashboard/WishlistCard.svelte';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { enhance } from '$app/forms';
-  import SearchBar from '$lib/components/ui/SearchBar.svelte';
+	import { Star } from 'lucide-svelte';
-  import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import type { Snippet } from 'svelte';
+	import SearchBar from '$lib/components/ui/SearchBar.svelte';
 	import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
 	import type { Snippet } from 'svelte';
-  interface WishlistItem {
+	type WishlistItem = any; // You can make this more specific based on your types
    id?: string;
    wishlist?: Record<string, unknown>;
    title?: string;
    description?: string;
    isFavorite?: boolean;
    endDate?: string | Date;
    createdAt?: string | Date;
    items?: Array<{ title: string }>;
    user?: { name?: string; username?: string };
  }
-  let {
+	let {
-    title,
+		title,
-    description,
+		description,
-    items,
+		items,
-    emptyMessage,
+		emptyMessage,
-    emptyDescription,
+		emptyDescription,
-    emptyActionLabel,
+		emptyActionLabel,
-    emptyActionHref,
+		emptyActionHref,
-    showCreateButton = false,
+		showCreateButton = false,
-    hideIfEmpty = false,
+		hideIfEmpty = false,
-    fallbackColor = null,
+		fallbackColor = null,
-    fallbackTheme = null,
+		fallbackTheme = null,
-    actions
+		actions
-  }: {
+	}: {
-    title: string;
+		title: string;
-    description: string;
+		description: string;
-    items: WishlistItem[];
+		items: WishlistItem[];
-    emptyMessage: string;
+		emptyMessage: string;
-    emptyDescription?: string;
+		emptyDescription?: string;
-    emptyActionLabel?: string;
+		emptyActionLabel?: string;
-    emptyActionHref?: string;
+		emptyActionHref?: string;
-    showCreateButton?: boolean;
+		showCreateButton?: boolean;
-    hideIfEmpty?: boolean;
+		hideIfEmpty?: boolean;
-    fallbackColor?: string | null;
+		fallbackColor?: string | null;
-    fallbackTheme?: string | null;
+		fallbackTheme?: string | null;
-    actions: Snippet<[WishlistItem, boolean]>; // item, unlocked
+		actions: Snippet<[WishlistItem, boolean]>; // item, unlocked
-  } = $props();
+	} = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  let unlocked = $state(false);
+	let unlocked = $state(false);
-  let searchQuery = $state('');
+	let searchQuery = $state('');
-  // Filter items based on search query
+	// Filter items based on search query
-  const filteredItems = $derived(() => {
+	const filteredItems = $derived(() => {
-    if (!searchQuery.trim()) return items;
+		if (!searchQuery.trim()) return items;
-    return items.filter((item) => {
+		return items.filter(item => {
-      const title = item.title || item.wishlist?.title || '';
+			const title = item.title || item.wishlist?.title || '';
-      const description = item.description || item.wishlist?.description || '';
+			const description = item.description || item.wishlist?.description || '';
-      const query = searchQuery.toLowerCase();
+			const query = searchQuery.toLowerCase();
-      return title.toLowerCase().includes(query) || description.toLowerCase().includes(query);
+			return title.toLowerCase().includes(query) || description.toLowerCase().includes(query);
-    });
+		});
-  });
+	});
-  // Sort items by favorite, end date, then created date
+	// Sort items by favorite, end date, then created date
-  const sortedItems = $derived(() => {
+	const sortedItems = $derived(() => {
-    return [...filteredItems()].sort((a, b) => {
+		return [...filteredItems()].sort((a, b) => {
-      // Handle both direct wishlists and saved wishlists
+			// Handle both direct wishlists and saved wishlists
-      const aItem = a.wishlist || a;
+			const aItem = a.wishlist || a;
-      const bItem = b.wishlist || b;
+			const bItem = b.wishlist || b;
-      // Sort by favorite first
+			// Sort by favorite first
-      if (a.isFavorite && !b.isFavorite) return -1;
+			if (a.isFavorite && !b.isFavorite) return -1;
-      if (!a.isFavorite && b.isFavorite) return 1;
+			if (!a.isFavorite && b.isFavorite) return 1;
-      // Then by end date
+			// Then by end date
-      const aHasEndDate = !!aItem.endDate;
+			const aHasEndDate = !!aItem.endDate;
-      const bHasEndDate = !!bItem.endDate;
+			const bHasEndDate = !!bItem.endDate;
-      if (aHasEndDate && !bHasEndDate) return -1;
+			if (aHasEndDate && !bHasEndDate) return -1;
-      if (!aHasEndDate && bHasEndDate) return 1;
+			if (!aHasEndDate && bHasEndDate) return 1;
-      if (aHasEndDate && bHasEndDate) {
+			if (aHasEndDate && bHasEndDate) {
-        return new Date(aItem.endDate!).getTime() - new Date(bItem.endDate!).getTime();
+				return new Date(aItem.endDate!).getTime() - new Date(bItem.endDate!).getTime();
-      }
+			}
-      // Finally by created date (most recent first)
+			// Finally by created date (most recent first)
-      const aCreatedAt = a.createdAt || aItem.createdAt;
+			const aCreatedAt = a.createdAt || aItem.createdAt;
-      const bCreatedAt = b.createdAt || bItem.createdAt;
+			const bCreatedAt = b.createdAt || bItem.createdAt;
-      return new Date(bCreatedAt).getTime() - new Date(aCreatedAt).getTime();
+			return new Date(bCreatedAt).getTime() - new Date(aCreatedAt).getTime();
-    });
+		});
-  });
+	});
-  function formatEndDate(date: Date | string | null): string | null {
+	function formatEndDate(date: Date | string | null): string | null {
-    if (!date) return null;
+		if (!date) return null;
-    const d = new Date(date);
+		const d = new Date(date);
-    return d.toLocaleDateString(languageStore.t.date.format.short, {
+		return d.toLocaleDateString(languageStore.t.date.format.short, { year: 'numeric', month: 'short', day: 'numeric' });
-      year: 'numeric',
+	}
      month: 'short',
      day: 'numeric'
    });
  }
-  function getWishlistDescription(item: WishlistItem): string | null {
+	function getWishlistDescription(item: any): string | null {
-    const wishlist = item.wishlist || item;
+		const wishlist = item.wishlist || item;
-    if (!wishlist) return null;
+		if (!wishlist) return null;
-    const lines: string[] = [];
+		const lines: string[] = [];
-    const topItems = wishlist.items?.slice(0, 3).map((i: { title: string }) => i.title) || [];
+		const topItems = wishlist.items?.slice(0, 3).map((i: any) => i.title) || [];
-    if (topItems.length > 0) {
+		if (topItems.length > 0) {
-      lines.push(topItems.join(', '));
+			lines.push(topItems.join(', '));
-    }
+		}
-    if (wishlist.user?.name || wishlist.user?.username) {
+		if (wishlist.user?.name || wishlist.user?.username) {
-      const ownerName = wishlist.user.name || wishlist.user.username;
+			const ownerName = wishlist.user.name || wishlist.user.username;
-      lines.push(`${t.dashboard.by} ${ownerName}`);
+			lines.push(`${t.dashboard.by} ${ownerName}`);
-    }
+		}
-    if (wishlist.endDate) {
+		if (wishlist.endDate) {
-      lines.push(`${t.dashboard.ends}: ${formatEndDate(wishlist.endDate)}`);
+			lines.push(`${t.dashboard.ends}: ${formatEndDate(wishlist.endDate)}`);
-    }
+		}
-    return lines.length > 0 ? lines.join('\n') : null;
+		return lines.length > 0 ? lines.join('\n') : null;
-  }
+	}
-  // Hide entire section if hideIfEmpty is true and there are no items
+	// Hide entire section if hideIfEmpty is true and there are no items
-  const shouldShow = $derived(() => {
+	const shouldShow = $derived(() => {
-    return !hideIfEmpty || items.length > 0;
+		return !hideIfEmpty || items.length > 0;
-  });
+	});
 </script>
 {#if shouldShow()}
-  <WishlistGrid
+	<WishlistGrid
-    {title}
+		{title}
-    {description}
+		{description}
-    items={sortedItems() || []}
+		items={sortedItems() || []}
-    {emptyMessage}
+		{emptyMessage}
-    {emptyDescription}
+		{emptyDescription}
-    {emptyActionLabel}
+		{emptyActionLabel}
-    {emptyActionHref}
+		{emptyActionHref}
-    {fallbackColor}
+		{fallbackColor}
-    {fallbackTheme}
+		{fallbackTheme}
-  >
+	>
-    {#snippet headerAction()}
+		{#snippet headerAction()}
-      <div class="flex flex-col sm:flex-row gap-2">
+			<div class="flex flex-col sm:flex-row gap-2">
-        {#if showCreateButton}
+				{#if showCreateButton}
-          <Button onclick={() => (window.location.href = '/')}>{t.dashboard.createNew}</Button>
+					<Button onclick={() => (window.location.href = '/')}>{t.dashboard.createNew}</Button>
-        {/if}
+				{/if}
-        <UnlockButton bind:unlocked />
+				<UnlockButton bind:unlocked />
-      </div>
+			</div>
-    {/snippet}
+		{/snippet}
-    {#snippet searchBar()}
+		{#snippet searchBar()}
-      {#if items.length > 0}
+			{#if items.length > 0}
-        <SearchBar bind:value={searchQuery} />
+				<SearchBar bind:value={searchQuery} />
-      {/if}
+			{/if}
-    {/snippet}
+		{/snippet}
-    {#snippet children(item)}
+		{#snippet children(item)}
-      {@const wishlist = item.wishlist || item}
+			{@const wishlist = item.wishlist || item}
-      <WishlistCard
+			<WishlistCard
-        title={wishlist.title}
+				title={wishlist.title}
-        description={getWishlistDescription(item)}
+				description={getWishlistDescription(item)}
-        itemCount={wishlist.items?.length || 0}
+				itemCount={wishlist.items?.length || 0}
-        color={wishlist.color}
+				color={wishlist.color}
-        theme={wishlist.theme}
+				theme={wishlist.theme}
-        {fallbackColor}
+				fallbackColor={fallbackColor}
-        {fallbackTheme}
+				fallbackTheme={fallbackTheme}
-      >
+			>
-        {@render actions(item, unlocked)}
+				{@render actions(item, unlocked)}
-      </WishlistCard>
+			</WishlistCard>
-    {/snippet}
+		{/snippet}
-  </WishlistGrid>
+	</WishlistGrid>
 {/if}
@@ -1,95 +1,92 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import { ThemeToggle } from '$lib/components/ui/theme-toggle';
+	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
-  import { LanguageToggle } from '$lib/components/ui/language-toggle';
+	import { LanguageToggle } from '$lib/components/ui/language-toggle';
-  import ThemePicker from '$lib/components/ui/theme-picker.svelte';
+	import ThemePicker from '$lib/components/ui/theme-picker.svelte';
-  import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
+	import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
-  import { signOut } from '@auth/sveltekit/client';
+	import { signOut } from '@auth/sveltekit/client';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
 	import { enhance } from '$app/forms';
-  let {
+	let {
-    userName,
+		userName,
-    userEmail,
+		userEmail,
-    dashboardTheme = 'none',
+		dashboardTheme = 'none',
-    dashboardColor = null,
+		dashboardColor = null,
-    isAuthenticated = false,
+		isAuthenticated = false,
-    onThemeUpdate,
+		onThemeUpdate,
-    onColorUpdate
+		onColorUpdate
-  }: {
+	}: {
-    userName?: string | null;
+		userName?: string | null;
-    userEmail?: string | null;
+		userEmail?: string | null;
-    dashboardTheme?: string;
+		dashboardTheme?: string;
-    dashboardColor?: string | null;
+		dashboardColor?: string | null;
-    isAuthenticated?: boolean;
+		isAuthenticated?: boolean;
-    onThemeUpdate?: (theme: string | null) => void;
+		onThemeUpdate?: (theme: string | null) => void;
-    onColorUpdate?: (color: string | null) => void;
+		onColorUpdate?: (color: string | null) => void;
-  } = $props();
+	} = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  async function handleThemeChange(theme: string) {
+	async function handleThemeChange(theme: string) {
-    if (onThemeUpdate) {
+		if (onThemeUpdate) {
-      onThemeUpdate(theme);
+			onThemeUpdate(theme);
-    }
+		}
-    if (isAuthenticated) {
+		if (isAuthenticated) {
-      const formData = new FormData();
+			const formData = new FormData();
-      formData.append('theme', theme);
+			formData.append('theme', theme);
-      await fetch('?/updateDashboardTheme', {
+			await fetch('?/updateDashboardTheme', {
-        method: 'POST',
+				method: 'POST',
-        body: formData
+				body: formData
-      });
+			});
-    }
+		}
-  }
+	}
-  let localColor = $derived(dashboardColor);
+	let localColor = $state(dashboardColor);
-  async function handleColorChange() {
+	$effect(() => {
-    if (onColorUpdate) {
+		localColor = dashboardColor;
-      onColorUpdate(localColor);
+	});
    }
-    if (isAuthenticated) {
+	async function handleColorChange() {
-      const formData = new FormData();
+		if (onColorUpdate) {
-      if (localColor) {
+			onColorUpdate(localColor);
-        formData.append('color', localColor);
+		}
      }
-      await fetch('?/updateDashboardColor', {
+		if (isAuthenticated) {
-        method: 'POST',
+			const formData = new FormData();
-        body: formData
+			if (localColor) {
-      });
+				formData.append('color', localColor);
-    }
+			}
-  }
+
 			await fetch('?/updateDashboardColor', {
 				method: 'POST',
 				body: formData
 			});
 		}
 	}
 </script>
 <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-  <div class="flex-1 min-w-0">
+	<div class="flex-1 min-w-0">
-    <h1 class="text-3xl font-bold">{t.nav.dashboard}</h1>
+		<h1 class="text-3xl font-bold">{t.nav.dashboard}</h1>
-    {#if isAuthenticated}
+		{#if isAuthenticated}
-      <p class="text-muted-foreground truncate">
+			<p class="text-muted-foreground truncate">{t.dashboard.welcomeBack}, {userName || userEmail}</p>
-        {t.dashboard.welcomeBack}, {userName || userEmail}
+		{:else}
-      </p>
+			<p class="text-muted-foreground">{t.dashboard.anonymousDashboard || "Your local wishlists"}</p>
-    {:else}
+		{/if}
-      <p class="text-muted-foreground">
+	</div>
-        {t.dashboard.anonymousDashboard || 'Your local wishlists'}
+	<div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
-      </p>
+		<ColorPicker bind:color={localColor} onchange={handleColorChange} size="sm" />
-    {/if}
+		<ThemePicker value={dashboardTheme} onValueChange={handleThemeChange} />
-  </div>
+		<LanguageToggle />
-  <div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+		<ThemeToggle />
-    <ColorPicker bind:color={localColor} onchange={handleColorChange} size="sm" />
+		{#if isAuthenticated}
-    <ThemePicker value={dashboardTheme} onValueChange={handleThemeChange} color={localColor} />
+			<Button variant="outline" onclick={() => signOut({ callbackUrl: '/' })}>{t.auth.signOut}</Button>
-    <LanguageToggle color={localColor} />
+		{:else}
-    <ThemeToggle />
+			<Button variant="outline" onclick={() => (window.location.href = '/signin')}>{t.auth.signIn}</Button>
-    {#if isAuthenticated}
+		{/if}
-      <Button variant="outline" onclick={() => signOut({ callbackUrl: '/' })}
+	</div>
        >{t.auth.signOut}</Button
      >
    {:else}
      <Button variant="outline" onclick={() => (window.location.href = '/signin')}
        >{t.auth.signIn}</Button
      >
    {/if}
  </div>
 </div>
@@ -1,45 +1,45 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import type { Snippet } from 'svelte';
+	import type { Snippet } from 'svelte';
-  let {
+	let {
-    message,
+		message,
-    description,
+		description,
-    actionLabel,
+		actionLabel,
-    actionHref,
+		actionHref,
-    onclick,
+		onclick,
-    children
+		children
-  }: {
+	}: {
-    message: string;
+		message: string;
-    description?: string;
+		description?: string;
-    actionLabel?: string;
+		actionLabel?: string;
-    actionHref?: string;
+		actionHref?: string;
-    onclick?: () => void;
+		onclick?: () => void;
-    children?: Snippet;
+		children?: Snippet;
-  } = $props();
+	} = $props();
 </script>
 <div class="text-center py-8 text-muted-foreground">
-  <p class="text-base">{message}</p>
+	<p class="text-base">{message}</p>
-  {#if description}
+	{#if description}
-    <p class="text-sm mt-2">{description}</p>
+		<p class="text-sm mt-2">{description}</p>
-  {/if}
+	{/if}
-  {#if children}
+	{#if children}
-    <div class="mt-4">
+		<div class="mt-4">
-      {@render children()}
+			{@render children()}
-    </div>
+		</div>
-  {:else if actionLabel}
+	{:else if actionLabel}
-    <Button
+		<Button
-      class="mt-4"
+			class="mt-4"
-      onclick={() => {
+			onclick={() => {
-        if (onclick) {
+				if (onclick) {
-          onclick();
+					onclick();
-        } else if (actionHref) {
+				} else if (actionHref) {
-          window.location.href = actionHref;
+					window.location.href = actionHref;
-        }
+				}
-      }}
+			}}
-    >
+		>
-      {actionLabel}
+			{actionLabel}
-    </Button>
+		</Button>
-  {/if}
+	{/if}
 </div>
@@ -1,44 +1,34 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import { ThemeToggle } from '$lib/components/ui/theme-toggle';
+	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
-  import { LanguageToggle } from '$lib/components/ui/language-toggle';
+	import { LanguageToggle } from '$lib/components/ui/language-toggle';
-  import { LayoutDashboard } from '@lucide/svelte';
+	import { LayoutDashboard } from 'lucide-svelte';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  let {
+	let {
-    isAuthenticated = false,
+		isAuthenticated = false,
-    color = null
+		showDashboardLink = false
-  }: {
+	}: {
-    isAuthenticated?: boolean;
+		isAuthenticated?: boolean;
-    color?: string | null;
+		showDashboardLink?: boolean;
-  } = $props();
+	} = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
 </script>
 <nav class="flex items-center gap-1 sm:gap-2 mb-6 w-full">
-  {#if isAuthenticated}
+	{#if isAuthenticated}
-    <Button
+		<Button variant="outline" size="sm" onclick={() => (window.location.href = '/dashboard')} class="px-2 sm:px-3">
-      variant="outline"
+			<LayoutDashboard class="w-4 h-4" />
-      size="sm"
+			<span class="hidden sm:inline sm:ml-2">{t.nav.dashboard}</span>
-      onclick={() => (window.location.href = '/dashboard')}
+		</Button>
-      class="px-2 sm:px-3"
+	{:else}
-    >
+		<Button variant="outline" size="sm" onclick={() => (window.location.href = '/signin')} class="px-2 sm:px-3">
-      <LayoutDashboard class="w-4 h-4" />
+			{t.auth.signIn}
-      <span class="hidden sm:inline sm:ml-2">{t.nav.dashboard}</span>
+		</Button>
-    </Button>
+	{/if}
-  {:else}
+	<div class="ml-auto flex items-center gap-1 sm:gap-2">
-    <Button
+		<LanguageToggle />
-      variant="outline"
+		<ThemeToggle />
-      size="sm"
+	</div>
      onclick={() => (window.location.href = '/signin')}
      class="px-2 sm:px-3"
    >
      {t.auth.signIn}
    </Button>
  {/if}
  <div class="ml-auto flex items-center gap-1 sm:gap-2">
    <LanguageToggle {color} />
    <ThemeToggle size="sm" {color} />
  </div>
 </nav>
@@ -1,36 +1,36 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+	import type { Snippet } from 'svelte';
-  import ThemeBackground from '$lib/components/themes/ThemeBackground.svelte';
+	import ThemeBackground from '$lib/components/themes/ThemeBackground.svelte';
-  import { hexToRgba } from '$lib/utils/colors';
+	import { hexToRgba } from '$lib/utils/colors';
-  import { themeStore } from '$lib/stores/theme.svelte';
+	import { themeStore } from '$lib/stores/theme.svelte';
-  let {
+	let {
-    children,
+		children,
-    maxWidth = '6xl',
+		maxWidth = '6xl',
-    theme = null,
+		theme = null,
-    themeColor = null
+		themeColor = null
-  }: {
+	}: {
-    children: Snippet;
+		children: Snippet;
-    maxWidth?: string;
+		maxWidth?: string;
-    theme?: string | null;
+		theme?: string | null;
-    themeColor?: string | null;
+		themeColor?: string | null;
-  } = $props();
+	} = $props();
-  const backgroundStyle = $derived.by(() => {
+	const backgroundStyle = $derived.by(() => {
-    if (!themeColor) return '';
+		if (!themeColor) return '';
-    const isDark = themeStore.getResolvedTheme() === 'dark';
+		const isDark = themeStore.getResolvedTheme() === 'dark';
-    const tintedColor = hexToRgba(themeColor, 0.15);
+		const tintedColor = hexToRgba(themeColor, 0.15);
-    return isDark
+		return isDark
-      ? `background: linear-gradient(${tintedColor}, ${tintedColor}), #000000;`
+			? `background: linear-gradient(${tintedColor}, ${tintedColor}), #000000;`
-      : `background-color: ${tintedColor};`;
+			: `background-color: ${tintedColor};`;
-  });
+	});
 </script>
 <div class="min-h-screen p-4 md:p-8 relative overflow-hidden" style={backgroundStyle}>
-  <ThemeBackground themeName={theme} color={themeColor} />
+	<ThemeBackground themeName={theme} color={themeColor} />
-  <div class="max-w-{maxWidth} mx-auto space-y-6 relative z-10">
+	<div class="max-w-{maxWidth} mx-auto space-y-6 relative z-10">
-    {@render children()}
+		{@render children()}
-  </div>
+	</div>
 </div>
@@ -1,31 +1,33 @@
 <script lang="ts">
-  import TopPattern from './svgs/TopPattern.svelte';
+	import TopPattern from './svgs/TopPattern.svelte';
-  import BottomPattern from './svgs/BottomPattern.svelte';
+	import BottomPattern from './svgs/BottomPattern.svelte';
-  import { getTheme, PATTERN_OPACITY } from '$lib/utils/themes';
+	import { getTheme, PATTERN_OPACITY } from '$lib/utils/themes';
-  import { themeStore } from '$lib/stores/theme.svelte';
+	import { themeStore } from '$lib/stores/theme.svelte';
-  let {
+	let {
-    themeName,
+		themeName,
-    showTop = true,
+		showTop = true,
-    showBottom = true
+		showBottom = true,
-  }: {
+		color
-    themeName?: string | null;
+	}: {
-    showTop?: boolean;
+		themeName?: string | null;
-    showBottom?: boolean;
+		showTop?: boolean;
-  } = $props();
+		showBottom?: boolean;
 		color?: string;
 	} = $props();
-  const theme = $derived(getTheme(themeName));
+	const theme = $derived(getTheme(themeName));
-  const patternColor = $derived.by(() => {
+	const patternColor = $derived.by(() => {
-    const isDark = themeStore.getResolvedTheme() === 'dark';
+		const isDark = themeStore.getResolvedTheme() === 'dark';
-    return isDark ? '#FFFFFF' : '#000000';
+		return isDark ? '#FFFFFF' : '#000000';
-  });
+	});
 </script>
 {#if theme.pattern !== 'none'}
-  {#if showTop}
+	{#if showTop}
-    <TopPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
+		<TopPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
-  {/if}
+	{/if}
-  {#if showBottom}
+	{#if showBottom}
-    <BottomPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
+		<BottomPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
-  {/if}
+	{/if}
 {/if}
@@ -1,23 +1,25 @@
 <script lang="ts">
-  import CardPattern from './svgs/CardPattern.svelte';
+	import CardPattern from './svgs/CardPattern.svelte';
-  import { getTheme, PATTERN_OPACITY } from '$lib/utils/themes';
+	import { getTheme, PATTERN_OPACITY } from '$lib/utils/themes';
-  import { themeStore } from '$lib/stores/theme.svelte';
+	import { themeStore } from '$lib/stores/theme.svelte';
-  let {
+	let {
-    themeName,
+		themeName,
-    showPattern = true
+		color,
-  }: {
+		showPattern = true
-    themeName?: string | null;
+	}: {
-    showPattern?: boolean;
+		themeName?: string | null;
-  } = $props();
+		color?: string | null;
 		showPattern?: boolean;
 	} = $props();
-  const theme = $derived(getTheme(themeName));
+	const theme = $derived(getTheme(themeName));
-  const patternColor = $derived.by(() => {
+	const patternColor = $derived.by(() => {
-    const isDark = themeStore.getResolvedTheme() === 'dark';
+		const isDark = themeStore.getResolvedTheme() === 'dark';
-    return isDark ? '#FFFFFF' : '#000000';
+		return isDark ? '#FFFFFF' : '#000000';
-  });
+	});
 </script>
 {#if showPattern && theme.pattern !== 'none'}
-  <CardPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
+	<CardPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
 {/if}
@@ -1,23 +1,23 @@
 <script lang="ts">
-  import { asset } from '$app/paths';
+	import { asset } from '$app/paths';
-  let {
+	let {
-    pattern = 'none',
+		pattern = 'none',
-    color = '#000000',
+		color = '#000000',
-    opacity = 0.1
+		opacity = 0.1
-  }: {
+	}: {
-    pattern?: string;
+		pattern?: string;
-    color?: string;
+		color?: string;
-    opacity?: number;
+		opacity?: number;
-  } = $props();
+	} = $props();
-  const patternPath = $derived(asset(`/themes/${pattern}/bgbottom.svg`));
+	const patternPath = $derived(asset(`/themes/${pattern}/bgbottom.svg`));
 </script>
 {#if pattern !== 'none'}
-  <div
+	<div
-    class="fixed bottom-0 left-0 right-0 pointer-events-none overflow-hidden z-0"
+		class="fixed bottom-0 left-0 right-0 pointer-events-none overflow-hidden z-0"
-    style="
+		style="
 			mask-image: url({patternPath});
 			mask-size: cover;
 			mask-repeat: no-repeat;
@@ -26,5 +26,5 @@
 			opacity: {opacity};
 			height: 100vh;
 		"
-  />
+	/>
 {/if}
@@ -1,23 +1,23 @@
 <script lang="ts">
-  import { asset } from '$app/paths';
+	import { asset } from '$app/paths';
-  let {
+	let {
-    pattern = 'none',
+		pattern = 'none',
-    color = '#000000',
+		color = '#000000',
-    opacity = 0.1
+		opacity = 0.1
-  }: {
+	}: {
-    pattern?: string;
+		pattern?: string;
-    color?: string;
+		color?: string;
-    opacity?: number;
+		opacity?: number;
-  } = $props();
+	} = $props();
-  const patternPath = $derived(asset(`/themes/${pattern}/item.svg`));
+	const patternPath = $derived(asset(`/themes/${pattern}/item.svg`));
 </script>
 {#if pattern !== 'none'}
-  <div
+	<div
-    class="absolute bottom-0 top-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
+		class="absolute bottom-0 top-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
-    style="
+		style="
 			mask-image: url({patternPath});
 			mask-size: cover;
 			mask-repeat: no-repeat;
@@ -26,5 +26,5 @@
 			opacity: {opacity};
 			width: 100%;
 		"
-  />
+	/>
 {/if}
@@ -1,24 +1,25 @@
 <script lang="ts">
-  import { asset } from '$app/paths';
+	import { asset } from '$app/paths';
-  let {
+	let {
-    pattern = 'none',
+		pattern = 'none',
-    color = '#000000',
+		color = '#000000',
-    opacity = 0.1
+		opacity = 0.1
-  }: {
+	}: {
-    pattern?: string;
+		pattern?: string;
-    color?: string;
+		color?: string;
-    opacity?: number;
+		opacity?: number;
-  } = $props();
+	} = $props();
-  const patternPath = $derived(asset(`/themes/${pattern}/bgtop.svg`));
+	const patternPath = $derived(asset(`/themes/${pattern}/bgtop.svg`));
 </script>
 {#if pattern !== 'none'}
-  <div
+	<div
-    class="fixed top-0 right-0 left-0 pointer-events-none z-0"
+		class="fixed top-0 right-0 left-0 pointer-events-none z-0"
-    style="
+		style="
 			mask-image: url({patternPath});
 			-webkit-mask-image: url({patternPath});
 			mask-size: cover;
 			mask-repeat: no-repeat;
 			mask-position: right top;
@@ -26,5 +27,5 @@
 			opacity: {opacity};
 			height: 100vh;
 		"
-  />
+	/>
 {/if}
@@ -1,62 +1,63 @@
 <script lang="ts">
-  import { X, Pencil } from '@lucide/svelte';
+	import { X, Pencil } from 'lucide-svelte';
  import IconButton from './IconButton.svelte';
-  let {
+	let {
-    color = $bindable(null),
+		color = $bindable(null),
-    size = 'md',
+		size = 'md',
-    onchange
+		onchange
-  }: {
+	}: {
-    color: string | null;
+		color: string | null;
-    size?: 'sm' | 'md' | 'lg';
+		size?: 'sm' | 'md' | 'lg';
-    onchange?: () => void;
+		onchange?: () => void;
-  } = $props();
+	} = $props();
-  const sizeClasses = {
+	const sizeClasses = {
-    sm: 'w-8 h-8',
+		sm: 'w-8 h-8',
-    md: 'w-10 h-10',
+		md: 'w-10 h-10',
-    lg: 'w-12 h-12'
+		lg: 'w-12 h-12'
-  };
+	};
-  const iconSizeClasses = {
+	const iconSizeClasses = {
-    sm: 'w-4 h-4',
+		sm: 'w-4 h-4',
-    md: 'w-4 h-4',
+		md: 'w-4 h-4',
-    lg: 'w-5 h-5'
+		lg: 'w-5 h-5'
-  };
+	};
-  const buttonSize = sizeClasses[size];
+	const buttonSize = sizeClasses[size];
-  const iconSize = iconSizeClasses[size];
+	const iconSize = iconSizeClasses[size];
-  function handleColorChange(e: Event) {
+	function handleColorChange(e: Event) {
-    color = (e.target as HTMLInputElement).value;
+		color = (e.target as HTMLInputElement).value;
-    onchange?.();
+		onchange?.();
-  }
+	}
-  function clearColor() {
+	function clearColor() {
-    color = null;
+		color = null;
-    onchange?.();
+		onchange?.();
-  }
+	}
 </script>
 <div class="flex items-center gap-2">
-  {#if color}
+	{#if color}
-    <IconButton onclick={clearColor} {color} {size} aria-label="Clear color" rounded="md">
+		<button
-      <X class={iconSize} />
+			type="button"
-    </IconButton>
+			onclick={clearColor}
-  {/if}
+			class="{buttonSize} flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
-  <label
+			aria-label="Clear color"
-    class="{buttonSize} flex items-center justify-center rounded-md border border-input hover:opacity-90 transition-opacity cursor-pointer relative overflow-hidden"
+		>
-    style={color ? `background-color: ${color};` : ''}
+			<X class={iconSize} />
-  >
+		</button>
-    <Pencil
+	{/if}
-      class="{iconSize} relative z-10 pointer-events-none"
+	<label
-      style={color ? 'color: white; filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));' : ''}
+		class="{buttonSize} flex items-center justify-center rounded-full border border-input hover:opacity-90 transition-opacity cursor-pointer relative overflow-hidden"
-    />
+		style={color ? `background-color: ${color};` : ''}
-    <input
+	>
-      type="color"
+		<Pencil class="{iconSize} relative z-10 pointer-events-none" style={color ? 'color: white; filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));' : ''} />
-      value={color || '#ffffff'}
+		<input
-      oninput={handleColorChange}
+			type="color"
-      class="absolute inset-0 opacity-0 cursor-pointer"
+			value={color || '#ffffff'}
-    />
+			oninput={handleColorChange}
-  </label>
+			class="absolute inset-0 opacity-0 cursor-pointer"
 		/>
 	</label>
 </div>
@@ -1,132 +0,0 @@
 <script lang="ts">
  import { scale } from 'svelte/transition';
  import { cubicOut } from 'svelte/easing';
  import type { Snippet } from 'svelte';
  import IconButton from './IconButton.svelte';
  let {
    items,
    selectedValue,
    onSelect,
    color,
    showCheckmark = true,
    icon,
    ariaLabel
  }: {
    items: Array<{ value: string; label: string }>;
    selectedValue: string;
    onSelect: (value: string) => void;
    color?: string | null;
    showCheckmark?: boolean;
    icon: Snippet;
    ariaLabel: string;
  } = $props();
  let showMenu = $state(false);
  const menuClasses = $derived(
    color
      ? 'absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border shadow-lg z-50 backdrop-blur-md'
      : 'absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border shadow-lg z-50 backdrop-blur-md border-slate-200 dark:border-slate-800 bg-white/90 dark:bg-slate-950/90'
  );
  const menuStyle = $derived(
    color
      ? `border-color: ${color}; background-color: ${color}20; backdrop-filter: blur(12px);`
      : ''
  );
  function getItemStyle(itemValue: string): string {
    if (!color) return '';
    return selectedValue === itemValue ? `background-color: ${color}20;` : '';
  }
  function toggleMenu() {
    showMenu = !showMenu;
  }
  function handleSelect(value: string) {
    onSelect(value);
    showMenu = false;
  }
  function handleClickOutside(event: MouseEvent) {
    const target = event.target as HTMLElement;
    if (!target.closest('.dropdown-menu')) {
      showMenu = false;
    }
  }
  function handleMouseEnter(e: MouseEvent) {
    if (color) {
      (e.currentTarget as HTMLElement).style.backgroundColor = `${color}15`;
    }
  }
  function handleMouseLeave(e: MouseEvent, itemValue: string) {
    if (color) {
      (e.currentTarget as HTMLElement).style.backgroundColor =
        selectedValue === itemValue ? `${color}20` : 'transparent';
    }
  }
  $effect(() => {
    if (showMenu) {
      document.addEventListener('click', handleClickOutside);
      return () => document.removeEventListener('click', handleClickOutside);
    }
  });
 </script>
 <div class="relative dropdown-menu">
  <IconButton
    size="sm"
    rounded="md"
    onclick={toggleMenu}
    aria-label={ariaLabel}
    class={color ? 'hover-themed' : ''}
    style={color ? `--hover-bg: ${color}20;` : ''}
  >
    {@render icon()}
  </IconButton>
  {#if showMenu}
    <div
      class={menuClasses}
      style={menuStyle}
      transition:scale={{ duration: 150, start: 0.95, opacity: 0, easing: cubicOut }}
    >
      <div class="py-1">
        {#each items as item (item.value)}
          <button
            type="button"
            class="w-full text-left px-4 py-2 text-sm transition-colors"
            class:hover:bg-slate-100={!color}
            class:dark:hover:bg-slate-900={!color}
            class:font-bold={selectedValue === item.value}
            class:bg-slate-100={selectedValue === item.value && !color}
            class:dark:bg-slate-900={selectedValue === item.value && !color}
            class:flex={showCheckmark}
            class:items-center={showCheckmark}
            class:justify-between={showCheckmark}
            style={getItemStyle(item.value)}
            onmouseenter={handleMouseEnter}
            onmouseleave={(e) => handleMouseLeave(e, item.value)}
            onclick={() => handleSelect(item.value)}
          >
            <span>{item.label}</span>
            {#if showCheckmark && selectedValue === item.value}
              <span class="ml-2">✓</span>
            {/if}
          </button>
        {/each}
      </div>
    </div>
  {/if}
 </div>
 <style>
  :global(.hover-themed:hover) {
    background-color: var(--hover-bg) !important;
  }
 </style>
@@ -1,53 +0,0 @@
 <script lang="ts">
  import type { Snippet } from 'svelte';
  import type { HTMLButtonAttributes } from 'svelte/elements';
  interface Props extends HTMLButtonAttributes {
    color?: string | null;
    rounded?: 'full' | 'md' | 'lg';
    size?: 'sm' | 'md' | 'lg';
    children: Snippet;
  }
  let {
    color = null,
    rounded = 'full',
    size = 'md',
    class: className = '',
    children,
    ...restProps
  }: Props = $props();
  const sizeClasses = {
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-12 h-12'
  };
  const roundedClasses = {
    full: 'rounded-full',
    md: 'rounded-md',
    lg: 'rounded-lg'
  };
  const baseClasses =
    'flex items-center justify-center border border-input transition-colors backdrop-blur';
  const sizeClass = sizeClasses[size];
  const roundedClass = roundedClasses[rounded];
 </script>
 <button
  type="button"
  class="{baseClasses} {sizeClass} {roundedClass} {className} backdrop-blur-sm"
  class:hover:bg-accent={!color}
  style={color ? `--hover-bg: ${color}20;` : ''}
  {...restProps}
 >
  {@render children()}
 </button>
 <style>
  button[style*='--hover-bg']:hover {
    background-color: var(--hover-bg);
  }
 </style>
@@ -1,14 +1,18 @@
 <script lang="ts">
-  import { Input } from '$lib/components/ui/input';
+	import { Input } from '$lib/components/ui/input';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  let {
+	let {
-    value = $bindable(''),
+		value = $bindable(''),
-    placeholder = languageStore.t.dashboard.searchPlaceholder
+		placeholder = languageStore.t.dashboard.searchPlaceholder
-  }: {
+	}: {
-    value: string;
+		value: string;
-    placeholder?: string;
+		placeholder?: string;
-  } = $props();
+	} = $props();
 </script>
-<Input type="search" {placeholder} bind:value />
+<Input
 	type="search"
 	{placeholder}
 	bind:value
 />
@@ -1,27 +1,30 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import { Lock, LockOpen } from '@lucide/svelte';
+	import { Lock, LockOpen } from 'lucide-svelte';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  let {
+	let {
-    unlocked = $bindable(false)
+		unlocked = $bindable(false)
-  }: {
+	}: {
-    unlocked: boolean;
+		unlocked: boolean;
-  } = $props();
+	} = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  function handleClick() {
+	function handleClick() {
-    unlocked = !unlocked;
+		unlocked = !unlocked;
-  }
+	}
 </script>
-<Button onclick={handleClick} variant={unlocked ? 'default' : 'outline'}>
+<Button
-  {#if unlocked}
+	onclick={handleClick}
-    <Lock class="mr-2 h-4 w-4" />
+	variant={unlocked ? "default" : "outline"}
-    {t.wishlist.lockDeletion}
+>
-  {:else}
+	{#if unlocked}
-    <LockOpen class="mr-2 h-4 w-4" />
+		<Lock class="mr-2 h-4 w-4" />
-    {t.wishlist.unlockDeletion}
+		{t.wishlist.lockDeletion}
-  {/if}
+	{:else}
 		<LockOpen class="mr-2 h-4 w-4" />
 		{t.wishlist.unlockDeletion}
 	{/if}
 </Button>
@@ -1,81 +1,83 @@
 <script lang="ts" module>
-  import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '$lib/utils.js';
-  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-  import { type VariantProps, tv } from 'tailwind-variants';
+	import { type VariantProps, tv } from 'tailwind-variants';
-  export const buttonVariants = tv({
+	export const buttonVariants = tv({
-    base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*="size-"])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*="size-"])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0',
-    variants: {
+		variants: {
-      variant: {
+			variant: {
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+				default:
-        destructive:
+					'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-          'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
+				destructive:
-        outline:
+					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
-          'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+				outline:
-        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				secondary:
-        link: 'text-primary underline-offset-4 hover:underline'
+					'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-      },
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-      size: {
+				link: 'text-primary underline-offset-4 hover:underline'
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+			},
-        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+			size: {
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        icon: 'size-9',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-        'icon-sm': 'size-8',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        'icon-lg': 'size-10'
+				icon: 'size-9',
-      }
+				'icon-sm': 'size-8',
-    },
+				'icon-lg': 'size-10'
-    defaultVariants: {
+			}
-      variant: 'default',
+		},
-      size: 'default'
+		defaultVariants: {
-    }
+			variant: 'default',
-  });
+			size: 'default'
 		}
 	});
-  export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
-  export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
-  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-    WithElementRef<HTMLAnchorAttributes> & {
+		WithElementRef<HTMLAnchorAttributes> & {
-      variant?: ButtonVariant;
+			variant?: ButtonVariant;
-      size?: ButtonSize;
+			size?: ButtonSize;
-    };
+		};
 </script>
 <script lang="ts">
-  let {
+	let {
-    class: className,
+		class: className,
-    variant = 'default',
+		variant = 'default',
-    size = 'default',
+		size = 'default',
-    ref = $bindable(null),
+		ref = $bindable(null),
-    href = undefined,
+		href = undefined,
-    type = 'button',
+		type = 'button',
-    disabled,
+		disabled,
-    children,
+		children,
-    ...restProps
+		...restProps
-  }: ButtonProps = $props();
+	}: ButtonProps = $props();
 </script>
 {#if href}
-  <a
+	<a
-    bind:this={ref}
+		bind:this={ref}
-    data-slot="button"
+		data-slot="button"
-    class={cn(buttonVariants({ variant, size }), className)}
+		class={cn(buttonVariants({ variant, size }), className)}
-    href={disabled ? undefined : href}
+		href={disabled ? undefined : href}
-    aria-disabled={disabled}
+		aria-disabled={disabled}
-    role={disabled ? 'link' : undefined}
+		role={disabled ? 'link' : undefined}
-    tabindex={disabled ? -1 : undefined}
+		tabindex={disabled ? -1 : undefined}
-    {...restProps}
+		{...restProps}
-  >
+	>
-    {@render children?.()}
+		{@render children?.()}
-  </a>
+	</a>
 {:else}
-  <button
+	<button
-    bind:this={ref}
+		bind:this={ref}
-    data-slot="button"
+		data-slot="button"
-    class={cn(buttonVariants({ variant, size }), className)}
+		class={cn(buttonVariants({ variant, size }), className)}
-    {type}
+		{type}
-    {disabled}
+		{disabled}
-    {...restProps}
+		{...restProps}
-  >
+	>
-    {@render children?.()}
+		{@render children?.()}
-  </button>
+	</button>
 {/if}
@@ -1,16 +1,16 @@
 import Root, {
-  type ButtonProps,
+	type ButtonProps,
-  type ButtonSize,
+	type ButtonSize,
-  type ButtonVariant,
+	type ButtonVariant,
-  buttonVariants
+	buttonVariants
 } from './button.svelte';
 export {
-  Root,
+	Root,
-  type ButtonProps as Props,
+	type ButtonProps as Props,
-  Root as Button,
+	Root as Button,
-  buttonVariants,
+	buttonVariants,
-  type ButtonProps,
+	type ButtonProps,
-  type ButtonSize,
+	type ButtonSize,
-  type ButtonVariant
+	type ButtonVariant
 };
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
-  import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from 'svelte/elements';
-  type Props = HTMLAttributes<HTMLDivElement> & {
+	type Props = HTMLAttributes<HTMLDivElement> & {
-    children?: import('svelte').Snippet;
+		children?: any;
-  };
+	};
-  let { class: className, children, ...restProps }: Props = $props();
+	let { class: className, children, ...restProps }: Props = $props();
 </script>
 <div class={cn('p-6 pt-0', className)} {...restProps}>
-  {@render children?.()}
+	{@render children?.()}
 </div>
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
-  import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from 'svelte/elements';
-  type Props = HTMLAttributes<HTMLParagraphElement> & {
+	type Props = HTMLAttributes<HTMLParagraphElement> & {
-    children?: import('svelte').Snippet;
+		children?: any;
-  };
+	};
-  let { class: className, children, ...restProps }: Props = $props();
+	let { class: className, children, ...restProps }: Props = $props();
 </script>
 <p class={cn('text-sm text-muted-foreground', className)} {...restProps}>
-  {@render children?.()}
+	{@render children?.()}
 </p>
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
-  import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from 'svelte/elements';
-  type Props = HTMLAttributes<HTMLDivElement> & {
+	type Props = HTMLAttributes<HTMLDivElement> & {
-    children?: import('svelte').Snippet;
+		children?: any;
-  };
+	};
-  let { class: className, children, ...restProps }: Props = $props();
+	let { class: className, children, ...restProps }: Props = $props();
 </script>
 <div class={cn('flex flex-col space-y-1.5 p-6', className)} {...restProps}>
-  {@render children?.()}
+	{@render children?.()}
 </div>
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
-  import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from 'svelte/elements';
-  type Props = HTMLAttributes<HTMLHeadingElement> & {
+	type Props = HTMLAttributes<HTMLHeadingElement> & {
-    children?: import('svelte').Snippet;
+		children?: any;
-  };
+	};
-  let { class: className, children, ...restProps }: Props = $props();
+	let { class: className, children, ...restProps }: Props = $props();
 </script>
 <h3 class={cn('font-semibold leading-none tracking-tight', className)} {...restProps}>
-  {@render children?.()}
+	{@render children?.()}
 </h3>
@@ -1,14 +1,17 @@
 <script lang="ts">
-  import { cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
-  import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from 'svelte/elements';
-  type Props = HTMLAttributes<HTMLDivElement> & {
+	type Props = HTMLAttributes<HTMLDivElement> & {
-    children?: import('svelte').Snippet;
+		children?: any;
-  };
+	};
-  let { class: className, children, ...restProps }: Props = $props();
+	let { class: className, children, ...restProps }: Props = $props();
 </script>
-<div class={cn('rounded-xl border bg-card text-card-foreground shadow', className)} {...restProps}>
+<div
-  {@render children?.()}
+	class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
 	{...restProps}
 >
 	{@render children?.()}
 </div>
@@ -5,15 +5,15 @@ import Header from './card-header.svelte';
 import Title from './card-title.svelte';
 export {
-  Root,
+	Root,
-  Content,
+	Content,
-  Description,
+	Description,
-  Header,
+	Header,
-  Title,
+	Title,
-  //
+	//
-  Root as Card,
+	Root as Card,
-  Content as CardContent,
+	Content as CardContent,
-  Description as CardDescription,
+	Description as CardDescription,
-  Header as CardHeader,
+	Header as CardHeader,
-  Title as CardTitle
+	Title as CardTitle
 };
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import { cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
-  import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes } from 'svelte/elements';
-  type Props = HTMLInputAttributes & {
+	type Props = HTMLInputAttributes & {
-    value?: string | number;
+		value?: string | number;
-  };
+	};
-  let { class: className, type = 'text', value = $bindable(''), ...restProps }: Props = $props();
+	let { class: className, type = 'text', value = $bindable(''), ...restProps }: Props = $props();
 </script>
 <input
-  {type}
+	type={type}
-  class={cn(
+	class={cn(
-    'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+		'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-    className
+		className
-  )}
+	)}
-  bind:value
+	bind:value
-  {...restProps}
+	{...restProps}
 />
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import { cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
-  import type { HTMLLabelAttributes } from 'svelte/elements';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
-  type Props = HTMLLabelAttributes & {
+	type Props = HTMLLabelAttributes & {
-    children?: import('svelte').Snippet;
+		children?: any;
-  };
+	};
-  let { class: className, children, ...restProps }: Props = $props();
+	let { class: className, children, ...restProps }: Props = $props();
 </script>
 <label
-  class={cn(
+	class={cn(
-    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+		'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-    className
+		className
-  )}
+	)}
-  {...restProps}
+	{...restProps}
 >
-  {@render children?.()}
+	{@render children?.()}
 </label>
@@ -1,32 +1,58 @@
 <script lang="ts">
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import { languages } from '$lib/i18n/translations';
+	import { languages } from '$lib/i18n/translations';
-  import Dropdown from '$lib/components/ui/Dropdown.svelte';
+	import { Button } from '$lib/components/ui/button';
-  import { Languages } from '@lucide/svelte';
+	import { Languages } from 'lucide-svelte';
-  let { color }: { color?: string | null } = $props();
+	let showMenu = $state(false);
-  const languageItems = $derived(
+	function toggleMenu() {
-    languages.map((lang) => ({
+		showMenu = !showMenu;
-      value: lang.code,
+	}
      label: lang.name
    }))
  );
-  function setLanguage(code: string) {
+	function setLanguage(code: 'en' | 'da') {
-    languageStore.setLanguage(code as 'en' | 'da');
+		languageStore.setLanguage(code);
-  }
+		showMenu = false;
 	}
 	function handleClickOutside(event: MouseEvent) {
 		const target = event.target as HTMLElement;
 		if (!target.closest('.language-toggle-menu')) {
 			showMenu = false;
 		}
 	}
 	$effect(() => {
 		if (showMenu) {
 			document.addEventListener('click', handleClickOutside);
 			return () => document.removeEventListener('click', handleClickOutside);
 		}
 	});
 </script>
-<Dropdown
+<div class="relative language-toggle-menu">
-  items={languageItems}
+	<Button variant="outline" size="icon" onclick={toggleMenu} aria-label="Toggle language">
-  selectedValue={languageStore.current}
+		<Languages class="h-[1.2rem] w-[1.2rem]" />
-  onSelect={setLanguage}
+	</Button>
-  {color}
+
-  showCheckmark={false}
+	{#if showMenu}
-  ariaLabel="Toggle language"
+		<div
->
+			class="absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 shadow-lg z-50"
-  {#snippet icon()}
+		>
-    <Languages class="h-[1.2rem] w-[1.2rem]" />
+			<div class="py-1">
-  {/snippet}
+				{#each languages as lang}
-</Dropdown>
+					<button
 						type="button"
 						class="w-full text-left px-4 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-900 transition-colors"
 						class:font-bold={languageStore.current === lang.code}
 						class:bg-slate-100={languageStore.current === lang.code}
 						class:dark:bg-slate-900={languageStore.current === lang.code}
 						onclick={() => setLanguage(lang.code)}
 					>
 						{lang.name}
 					</button>
 				{/each}
 			</div>
 		</div>
 	{/if}
 </div>
@@ -1,19 +1,19 @@
 <script lang="ts">
-  import { cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
-  import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
-  type Props = HTMLTextareaAttributes & {
+	type Props = HTMLTextareaAttributes & {
-    value?: string;
+		value?: string;
-  };
+	};
-  let { class: className, value = $bindable(''), ...restProps }: Props = $props();
+	let { class: className, value = $bindable(''), ...restProps }: Props = $props();
 </script>
 <textarea
-  class={cn(
+	class={cn(
-    'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+		'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-    className
+		className
-  )}
+	)}
-  bind:value
+	bind:value
-  {...restProps}
+	{...restProps}
 ></textarea>
@@ -1,35 +1,68 @@
 <script lang="ts">
-  import Dropdown from '$lib/components/ui/Dropdown.svelte';
+	import { Button } from '$lib/components/ui/button';
-  import { Palette } from '@lucide/svelte';
+	import { Palette } from 'lucide-svelte';
-  import { AVAILABLE_THEMES } from '$lib/utils/themes';
+	import { AVAILABLE_THEMES } from '$lib/utils/themes';
-  let {
+	let {
-    value = 'none',
+		value = 'none',
-    onValueChange,
+		onValueChange
-    color
+	}: {
-  }: {
+		value?: string;
-    value?: string;
+		onValueChange: (theme: string) => void;
-    onValueChange: (theme: string) => void;
+	} = $props();
    color?: string | null;
  } = $props();
-  const themeItems = $derived(
+	let showMenu = $state(false);
-    Object.entries(AVAILABLE_THEMES).map(([key, theme]) => ({
+
-      value: key,
+	function toggleMenu() {
-      label: theme.name
+		showMenu = !showMenu;
-    }))
+	}
-  );
+
 	function handleSelect(themeName: string) {
 		onValueChange(themeName);
 		showMenu = false;
 	}
 	function handleClickOutside(event: MouseEvent) {
 		const target = event.target as HTMLElement;
 		if (!target.closest('.theme-picker-menu')) {
 			showMenu = false;
 		}
 	}
 	$effect(() => {
 		if (showMenu) {
 			document.addEventListener('click', handleClickOutside);
 			return () => document.removeEventListener('click', handleClickOutside);
 		}
 	});
 </script>
-<Dropdown
+<div class="relative theme-picker-menu">
-  items={themeItems}
+	<Button variant="outline" size="icon" onclick={toggleMenu} aria-label="Select theme pattern">
-  selectedValue={value}
+		<Palette class="h-[1.2rem] w-[1.2rem]" />
-  onSelect={onValueChange}
+	</Button>
-  {color}
+
-  showCheckmark={true}
+	{#if showMenu}
-  ariaLabel="Select theme pattern"
+		<div
->
+			class="absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 shadow-lg z-50"
-  {#snippet icon()}
+		>
-    <Palette class="h-[1.2rem] w-[1.2rem]" />
+			<div class="py-1">
-  {/snippet}
+				{#each Object.entries(AVAILABLE_THEMES) as [key, theme]}
-</Dropdown>
+					<button
 						type="button"
 						class="w-full text-left px-4 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-900 transition-colors flex items-center justify-between"
 						class:font-bold={value === key}
 						class:bg-slate-100={value === key}
 						class:dark:bg-slate-900={value === key}
 						onclick={() => handleSelect(key)}
 					>
 						<span>{theme.name}</span>
 						{#if value === key}
 							<span class="ml-2">✓</span>
 						{/if}
 					</button>
 				{/each}
 			</div>
 		</div>
 	{/if}
 </div>
@@ -1,30 +1,22 @@
 <script lang="ts">
-  import { themeStore } from '$lib/stores/theme.svelte';
+	import { themeStore } from '$lib/stores/theme.svelte';
-  import { Sun, Moon, Monitor } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
-  import IconButton from '../IconButton.svelte';
+	import { Sun, Moon, Monitor } from 'lucide-svelte';
-  let {
+	function toggle() {
-    color = $bindable(null),
+		themeStore.toggle();
-    size = 'sm'
+	}
  }: {
    color: string | null;
    size?: 'sm' | 'md' | 'lg';
  } = $props();
  function toggle() {
    themeStore.toggle();
  }
 </script>
-<IconButton onclick={toggle} {size} {color} rounded="md">
+<Button onclick={toggle} variant="ghost" size="icon" class="rounded-full">
-  {#if themeStore.current === 'light'}
+	{#if themeStore.current === 'light'}
-    <Sun size={20} />
+		<Sun size={20} />
-    <span class="sr-only">Light mode (click for dark)</span>
+		<span class="sr-only">Light mode (click for dark)</span>
-  {:else if themeStore.current === 'dark'}
+	{:else if themeStore.current === 'dark'}
-    <Moon size={20} />
+		<Moon size={20} />
-    <span class="sr-only">Dark mode (click for system)</span>
+		<span class="sr-only">Dark mode (click for system)</span>
-  {:else}
+	{:else}
-    <Monitor size={20} />
+		<Monitor size={20} />
-    <span class="sr-only">System mode (click for light)</span>
+		<span class="sr-only">System mode (click for light)</span>
-  {/if}
+	{/if}
-</IconButton>
+</Button>
@@ -1,154 +1,150 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import { Input } from '$lib/components/ui/input';
+	import { Input } from '$lib/components/ui/input';
-  import { Label } from '$lib/components/ui/label';
+	import { Label } from '$lib/components/ui/label';
-  import { Textarea } from '$lib/components/ui/textarea';
+	import { Textarea } from '$lib/components/ui/textarea';
-  import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
-  import ImageSelector from './ImageSelector.svelte';
+	import ImageSelector from './ImageSelector.svelte';
-  import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
+	import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
-  import { enhance } from '$app/forms';
+	import { enhance } from '$app/forms';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
-  import { getCardStyle } from '$lib/utils/colors';
+	import { getCardStyle } from '$lib/utils/colors';
-  interface Props {
+	interface Props {
-    onSuccess?: () => void;
+		onSuccess?: () => void;
-    wishlistColor?: string | null;
+		wishlistColor?: string | null;
-    wishlistTheme?: string | null;
+		wishlistTheme?: string | null;
-  }
+	}
-  let { onSuccess, wishlistColor = null, wishlistTheme = null }: Props = $props();
+	let { onSuccess, wishlistColor = null, wishlistTheme = null }: Props = $props();
-  const cardStyle = $derived(getCardStyle(wishlistColor, null));
+	const cardStyle = $derived(getCardStyle(wishlistColor, null));
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  const currencies = ['DKK', 'EUR', 'USD', 'SEK', 'NOK', 'GBP'];
+	const currencies = ['DKK', 'EUR', 'USD', 'SEK', 'NOK', 'GBP'];
-  let linkUrl = $state('');
+	let linkUrl = $state('');
-  let imageUrl = $state('');
+	let imageUrl = $state('');
-  let color = $state<string | null>(null);
+	let color = $state<string | null>(null);
-  let scrapedImages = $state<string[]>([]);
+	let scrapedImages = $state<string[]>([]);
-  let isLoadingImages = $state(false);
+	let isLoadingImages = $state(false);
-  async function handleLinkChange(event: Event) {
+	async function handleLinkChange(event: Event) {
-    const input = event.target as HTMLInputElement;
+		const input = event.target as HTMLInputElement;
-    linkUrl = input.value;
+		linkUrl = input.value;
-    if (linkUrl && linkUrl.startsWith('http')) {
+		if (linkUrl && linkUrl.startsWith('http')) {
-      isLoadingImages = true;
+			isLoadingImages = true;
-      scrapedImages = [];
+			scrapedImages = [];
-      try {
+			try {
-        const response = await fetch('/api/scrape-images', {
+				const response = await fetch('/api/scrape-images', {
-          method: 'POST',
+					method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
+					headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ url: linkUrl })
+					body: JSON.stringify({ url: linkUrl })
-        });
+				});
-        if (response.ok) {
+				if (response.ok) {
-          const data = await response.json();
+					const data = await response.json();
-          scrapedImages = data.images || [];
+					scrapedImages = data.images || [];
-        }
+				}
-      } catch (error) {
+			} catch (error) {
-        console.error('Failed to scrape images:', error);
+				console.error('Failed to scrape images:', error);
-      } finally {
+			} finally {
-        isLoadingImages = false;
+				isLoadingImages = false;
-      }
+			}
-    }
+		}
-  }
+	}
 </script>
 <Card style={cardStyle} class="relative overflow-hidden">
-  <ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
+	<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
-  <CardHeader class="relative z-10">
+	<CardHeader class="relative z-10">
-    <CardTitle>{t.form.addNewWish}</CardTitle>
+		<CardTitle>{t.form.addNewWish}</CardTitle>
-  </CardHeader>
+	</CardHeader>
-  <CardContent class="relative z-10">
+	<CardContent class="relative z-10">
-    <form
+		<form
-      method="POST"
+			method="POST"
-      action="?/addItem"
+			action="?/addItem"
-      use:enhance={() => {
+			use:enhance={() => {
-        return async ({ update }) => {
+				return async ({ update }) => {
-          await update({ reset: false });
+					await update({ reset: false });
-          onSuccess?.();
+					onSuccess?.();
-        };
+				};
-      }}
+			}}
-      class="space-y-4"
+			class="space-y-4"
-    >
+		>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="title">{t.form.wishName} ({t.form.required})</Label>
+					<Label for="title">{t.form.wishName} ({t.form.required})</Label>
-          <Input id="title" name="title" required placeholder="e.g., Blue Headphones" />
+					<Input id="title" name="title" required placeholder="e.g., Blue Headphones" />
-        </div>
+				</div>
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="description">{t.form.description}</Label>
+					<Label for="description">{t.form.description}</Label>
-          <Textarea
+					<Textarea
-            id="description"
+						id="description"
-            name="description"
+						name="description"
-            placeholder="Add details about the item..."
+						placeholder="Add details about the item..."
-            rows={3}
+						rows={3}
-          />
+					/>
-        </div>
+				</div>
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="link">{t.form.link}</Label>
+					<Label for="link">{t.form.link}</Label>
-          <Input
+					<Input
-            id="link"
+						id="link"
-            name="link"
+						name="link"
-            type="url"
+						type="url"
-            placeholder="https://..."
+						placeholder="https://..."
-            bind:value={linkUrl}
+						bind:value={linkUrl}
-            oninput={handleLinkChange}
+						oninput={handleLinkChange}
-          />
+					/>
-        </div>
+				</div>
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="imageUrl">{t.form.imageUrl}</Label>
+					<Label for="imageUrl">{t.form.imageUrl}</Label>
-          <Input
+					<Input
-            id="imageUrl"
+						id="imageUrl"
-            name="imageUrl"
+						name="imageUrl"
-            type="url"
+						type="url"
-            placeholder="https://..."
+						placeholder="https://..."
-            bind:value={imageUrl}
+						bind:value={imageUrl}
-          />
+					/>
-          <ImageSelector
+					<ImageSelector images={scrapedImages} bind:selectedImage={imageUrl} isLoading={isLoadingImages} />
-            images={scrapedImages}
+				</div>
            bind:selectedImage={imageUrl}
            isLoading={isLoadingImages}
          />
        </div>
-        <div class="space-y-2">
+				<div class="space-y-2">
-          <Label for="price">{t.form.price}</Label>
+					<Label for="price">{t.form.price}</Label>
-          <Input id="price" name="price" type="number" step="0.01" placeholder="0.00" />
+					<Input id="price" name="price" type="number" step="0.01" placeholder="0.00" />
-        </div>
+				</div>
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="currency">{t.form.currency}</Label>
+					<Label for="currency">{t.form.currency}</Label>
-          <select
+					<select
-            id="currency"
+						id="currency"
-            name="currency"
+						name="currency"
-            class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+						class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
-          >
+					>
-            {#each currencies as curr (curr)}
+						{#each currencies as curr}
-              <option value={curr} selected={curr === 'DKK'}>{curr}</option>
+							<option value={curr} selected={curr === 'DKK'}>{curr}</option>
-            {/each}
+						{/each}
-          </select>
+					</select>
-        </div>
+				</div>
-        <div class="md:col-span-2">
+				<div class="md:col-span-2">
-          <div class="flex items-center justify-between">
+					<div class="flex items-center justify-between">
-            <Label for="color">{t.form.cardColor}</Label>
+						<Label for="color">{t.form.cardColor}</Label>
-            <ColorPicker bind:color />
+						<ColorPicker bind:color={color} />
-          </div>
+					</div>
-          <input type="hidden" name="color" value={color || ''} />
+					<input type="hidden" name="color" value={color || ''} />
-        </div>
+				</div>
-      </div>
+			</div>
-      <Button type="submit" class="w-full md:w-auto">{t.wishlist.addWish}</Button>
+			<Button type="submit" class="w-full md:w-auto">{t.wishlist.addWish}</Button>
-    </form>
+		</form>
-  </CardContent>
+	</CardContent>
 </Card>
@@ -1,63 +1,69 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import { enhance } from '$app/forms';
+	import { enhance } from '$app/forms';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import { isLocalWishlist } from '$lib/utils/localWishlists';
+	import { isLocalWishlist } from '$lib/utils/localWishlists';
-  let {
+	let {
-    isAuthenticated,
+		isAuthenticated,
-    isOwner,
+		isOwner,
-    hasClaimed,
+		hasClaimed,
-    ownerToken
+		ownerToken
-  }: {
+	}: {
-    isAuthenticated: boolean;
+		isAuthenticated: boolean;
-    isOwner: boolean;
+		isOwner: boolean;
-    hasClaimed: boolean;
+		hasClaimed: boolean;
-    ownerToken: string;
+		ownerToken: string;
-  } = $props();
+	} = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  // Check if this wishlist is in localStorage
+	// Check if this wishlist is in localStorage
-  const isLocal = $derived(isLocalWishlist(ownerToken));
+	const isLocal = $derived(isLocalWishlist(ownerToken));
 </script>
 {#if isAuthenticated}
-  <div class="mb-6">
+	<div class="mb-6">
-    {#if isOwner}
+		{#if isOwner}
-      <Button disabled variant="outline" class="w-full md:w-auto opacity-60 cursor-not-allowed">
+			<Button
-        {t.wishlist.youOwnThis}
+				disabled
-      </Button>
+				variant="outline"
-      <p class="text-sm text-muted-foreground mt-2">
+				class="w-full md:w-auto opacity-60 cursor-not-allowed"
-        {t.wishlist.alreadyInDashboard}
+			>
-      </p>
+				{t.wishlist.youOwnThis}
-    {:else}
+			</Button>
-      <form
+			<p class="text-sm text-muted-foreground mt-2">
-        method="POST"
+				{t.wishlist.alreadyInDashboard}
-        action={hasClaimed ? '?/unclaimWishlist' : '?/claimWishlist'}
+			</p>
-        use:enhance={() => {
+		{:else}
-          return async ({ update }) => {
+			<form
-            await update({ reset: false });
+				method="POST"
-          };
+				action={hasClaimed ? "?/unclaimWishlist" : "?/claimWishlist"}
-        }}
+				use:enhance={() => {
-      >
+					return async ({ update }) => {
-        <Button type="submit" variant={hasClaimed ? 'outline' : 'default'} class="w-full md:w-auto">
+						await update({ reset: false });
-          {hasClaimed ? 'Unclaim Wishlist' : 'Claim Wishlist'}
+					};
-        </Button>
+				}}
-      </form>
+			>
-      <p class="text-sm text-muted-foreground mt-2">
+				<Button
-        {#if hasClaimed}
+					type="submit"
-          You have claimed this wishlist. It will appear in your dashboard.
+					variant={hasClaimed ? "outline" : "default"}
-        {:else}
+					class="w-full md:w-auto"
-          Claim this wishlist to add it to your dashboard for easy access.
+				>
-          {#if isLocal}
+					{hasClaimed ? "Unclaim Wishlist" : "Claim Wishlist"}
-            <br />
+				</Button>
-            <span class="text-xs"
+			</form>
-              >It will remain in your local wishlists and also appear in your claimed wishlists.</span
+			<p class="text-sm text-muted-foreground mt-2">
-            >
+				{#if hasClaimed}
-          {/if}
+					You have claimed this wishlist. It will appear in your dashboard.
-        {/if}
+				{:else}
-      </p>
+					Claim this wishlist to add it to your dashboard for easy access.
-    {/if}
+					{#if isLocal}
-  </div>
+						<br />
 						<span class="text-xs">It will remain in your local wishlists and also appear in your claimed wishlists.</span>
 					{/if}
 				{/if}
 			</p>
 		{/if}
 	</div>
 {/if}
@@ -1,42 +1,46 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import { enhance } from '$app/forms';
+	import { enhance } from '$app/forms';
-  import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
+	import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  let {
+	let {
-    unlocked = $bindable()
+		unlocked = $bindable()
-  }: {
+	}: {
-    unlocked: boolean;
+		unlocked: boolean;
-  } = $props();
+	} = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
 </script>
 <div class="mt-12 pt-8 border-t border-border space-y-4">
-  <div class="flex flex-col md:flex-row gap-4 justify-between items-stretch md:items-center">
+	<div class="flex flex-col md:flex-row gap-4 justify-between items-stretch md:items-center">
-    <UnlockButton bind:unlocked />
+		<UnlockButton bind:unlocked />
-    {#if unlocked}
+		{#if unlocked}
-      <form
+			<form
-        method="POST"
+				method="POST"
-        action="?/deleteWishlist"
+				action="?/deleteWishlist"
-        use:enhance={({ cancel }) => {
+				use:enhance={({ cancel }) => {
-          if (!confirm(t.wishlist.deleteConfirm)) {
+					if (!confirm(t.wishlist.deleteConfirm)) {
-            cancel();
+						cancel();
-            return;
+						return;
-          }
+					}
-          return async ({ result }) => {
+					return async ({ result }) => {
-            if (result.type === 'success') {
+						if (result.type === "success") {
-              window.location.href = '/dashboard';
+							window.location.href = "/dashboard";
-            }
+						}
-          };
+					};
-        }}
+				}}
-      >
+			>
-        <Button type="submit" variant="destructive" class="w-full md:w-auto">
+				<Button
-          {t.wishlist.deleteWishlist}
+					type="submit"
-        </Button>
+					variant="destructive"
-      </form>
+					class="w-full md:w-auto"
-    {/if}
+				>
-  </div>
+					{t.wishlist.deleteWishlist}
 				</Button>
 			</form>
 		{/if}
 	</div>
 </div>
@@ -1,215 +1,186 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import { Input } from '$lib/components/ui/input';
+	import { Input } from '$lib/components/ui/input';
-  import { Label } from '$lib/components/ui/label';
+	import { Label } from '$lib/components/ui/label';
-  import { Textarea } from '$lib/components/ui/textarea';
+	import { Textarea } from '$lib/components/ui/textarea';
-  import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
-  import ImageSelector from './ImageSelector.svelte';
+	import ImageSelector from './ImageSelector.svelte';
-  import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
+	import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
-  import { enhance } from '$app/forms';
+	import { enhance } from '$app/forms';
-  import type { Item } from '$lib/db/schema';
+	import type { Item } from '$lib/server/schema';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
-  import { getCardStyle } from '$lib/utils/colors';
+	import { getCardStyle } from '$lib/utils/colors';
-  interface Props {
+	interface Props {
-    item: Item;
+		item: Item;
-    onSuccess?: () => void;
+		onSuccess?: () => void;
-    onCancel?: () => void;
+		onCancel?: () => void;
-    onColorChange?: (itemId: string, color: string) => void;
+		onColorChange?: (itemId: string, color: string) => void;
-    currentPosition?: number;
+		currentPosition?: number;
-    totalItems?: number;
+		totalItems?: number;
-    onPositionChange?: (newPosition: number) => void;
+		onPositionChange?: (newPosition: number) => void;
-    wishlistColor?: string | null;
+		wishlistColor?: string | null;
-    wishlistTheme?: string | null;
+		wishlistTheme?: string | null;
-  }
+	}
-  let {
+	let { item, onSuccess, onCancel, onColorChange, currentPosition = 1, totalItems = 1, onPositionChange, wishlistColor = null, wishlistTheme = null }: Props = $props();
    item,
    onSuccess,
    onCancel,
    onColorChange,
    currentPosition = 1,
    totalItems = 1,
    onPositionChange,
    wishlistColor = null,
    wishlistTheme = null
  }: Props = $props();
-  const cardStyle = $derived(getCardStyle(wishlistColor, null));
+	const cardStyle = $derived(getCardStyle(wishlistColor, null));
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  const currencies = ['DKK', 'EUR', 'USD', 'SEK', 'NOK', 'GBP'];
+	const currencies = ['DKK', 'EUR', 'USD', 'SEK', 'NOK', 'GBP'];
-  let linkUrl = $state(item.link || '');
+	let linkUrl = $state(item.link || '');
-  let imageUrl = $state(item.imageUrl || '');
+	let imageUrl = $state(item.imageUrl || '');
-  let color = $state<string | null>(item.color);
+	let color = $state<string | null>(item.color);
-  let scrapedImages = $state<string[]>([]);
+	let scrapedImages = $state<string[]>([]);
-  let isLoadingImages = $state(false);
+	let isLoadingImages = $state(false);
-  async function handleLinkChange(event: Event) {
+	async function handleLinkChange(event: Event) {
-    const input = event.target as HTMLInputElement;
+		const input = event.target as HTMLInputElement;
-    linkUrl = input.value;
+		linkUrl = input.value;
-    if (linkUrl && linkUrl.startsWith('http')) {
+		if (linkUrl && linkUrl.startsWith('http')) {
-      isLoadingImages = true;
+			isLoadingImages = true;
-      scrapedImages = [];
+			scrapedImages = [];
-      try {
+			try {
-        const response = await fetch('/api/scrape-images', {
+				const response = await fetch('/api/scrape-images', {
-          method: 'POST',
+					method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
+					headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ url: linkUrl })
+					body: JSON.stringify({ url: linkUrl })
-        });
+				});
-        if (response.ok) {
+				if (response.ok) {
-          const data = await response.json();
+					const data = await response.json();
-          scrapedImages = data.images || [];
+					scrapedImages = data.images || [];
-        }
+				}
-      } catch (error) {
+			} catch (error) {
-        console.error('Failed to scrape images:', error);
+				console.error('Failed to scrape images:', error);
-      } finally {
+			} finally {
-        isLoadingImages = false;
+				isLoadingImages = false;
-      }
+			}
-    }
+		}
-  }
+	}
 </script>
 <Card style={cardStyle} class="relative overflow-hidden">
-  <ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
+	<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
-  <CardHeader class="relative z-10">
+	<CardHeader class="relative z-10">
-    <CardTitle>{t.wishlist.editWish}</CardTitle>
+		<CardTitle>{t.wishlist.editWish}</CardTitle>
-  </CardHeader>
+	</CardHeader>
-  <CardContent class="relative z-10">
+	<CardContent class="relative z-10">
-    <form
+		<form
-      method="POST"
+			method="POST"
-      action="?/updateItem"
+			action="?/updateItem"
-      use:enhance={() => {
+			use:enhance={() => {
-        return async ({ update }) => {
+				return async ({ update }) => {
-          await update({ reset: false });
+					await update({ reset: false });
-          onSuccess?.();
+					onSuccess?.();
-        };
+				};
-      }}
+			}}
-      class="space-y-4"
+			class="space-y-4"
-    >
+		>
-      <input type="hidden" name="itemId" value={item.id} />
+			<input type="hidden" name="itemId" value={item.id} />
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="title">{t.form.wishName} ({t.form.required})</Label>
+					<Label for="title">{t.form.wishName} ({t.form.required})</Label>
-          <Input
+					<Input id="title" name="title" required value={item.title} placeholder="e.g., Blue Headphones" />
-            id="title"
+				</div>
            name="title"
            required
            value={item.title}
            placeholder="e.g., Blue Headphones"
          />
        </div>
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="description">{t.form.description}</Label>
+					<Label for="description">{t.form.description}</Label>
-          <Textarea
+					<Textarea
-            id="description"
+						id="description"
-            name="description"
+						name="description"
-            value={item.description || ''}
+						value={item.description || ''}
-            placeholder="Add details about the item..."
+						placeholder="Add details about the item..."
-            rows={3}
+						rows={3}
-          />
+					/>
-        </div>
+				</div>
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="link">{t.form.link}</Label>
+					<Label for="link">{t.form.link}</Label>
-          <Input
+					<Input
-            id="link"
+						id="link"
-            name="link"
+						name="link"
-            type="url"
+						type="url"
-            placeholder="https://..."
+						placeholder="https://..."
-            bind:value={linkUrl}
+						bind:value={linkUrl}
-            oninput={handleLinkChange}
+						oninput={handleLinkChange}
-          />
+					/>
-        </div>
+				</div>
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="imageUrl">{t.form.imageUrl}</Label>
+					<Label for="imageUrl">{t.form.imageUrl}</Label>
-          <Input
+					<Input
-            id="imageUrl"
+						id="imageUrl"
-            name="imageUrl"
+						name="imageUrl"
-            type="url"
+						type="url"
-            placeholder="https://..."
+						placeholder="https://..."
-            bind:value={imageUrl}
+						bind:value={imageUrl}
-          />
+					/>
-          <ImageSelector
+					<ImageSelector images={scrapedImages} bind:selectedImage={imageUrl} isLoading={isLoadingImages} />
-            images={scrapedImages}
+				</div>
            bind:selectedImage={imageUrl}
            isLoading={isLoadingImages}
          />
        </div>
-        <div class="space-y-2">
+				<div class="space-y-2">
-          <Label for="price">{t.form.price}</Label>
+					<Label for="price">{t.form.price}</Label>
-          <Input
+					<Input id="price" name="price" type="number" step="0.01" value={item.price || ''} placeholder="0.00" />
-            id="price"
+				</div>
            name="price"
            type="number"
            step="0.01"
            value={item.price || ''}
            placeholder="0.00"
          />
        </div>
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="currency">{t.form.currency}</Label>
+					<Label for="currency">{t.form.currency}</Label>
-          <select
+					<select
-            id="currency"
+						id="currency"
-            name="currency"
+						name="currency"
-            class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+						class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
-          >
+					>
-            {#each currencies as curr (curr)}
+						{#each currencies as curr}
-              <option value={curr} selected={item.currency === curr}>{curr}</option>
+							<option value={curr} selected={item.currency === curr}>{curr}</option>
-            {/each}
+						{/each}
-          </select>
+					</select>
-        </div>
+				</div>
-        <div class="md:col-span-2">
+				<div class="md:col-span-2">
-          <div class="flex items-center justify-between">
+					<div class="flex items-center justify-between">
-            <Label for="color">{t.form.cardColor}</Label>
+						<Label for="color">{t.form.cardColor}</Label>
-            <ColorPicker bind:color onchange={() => onColorChange?.(item.id, color || '')} />
+						<ColorPicker bind:color={color} onchange={() => onColorChange?.(item.id, color || '')} />
-          </div>
+					</div>
-          <input type="hidden" name="color" value={color || ''} />
+					<input type="hidden" name="color" value={color || ''} />
-        </div>
+				</div>
-        <div class="space-y-2 md:col-span-2">
+				<div class="space-y-2 md:col-span-2">
-          <Label for="position">{t.form.position}</Label>
+					<Label for="position">{t.form.position}</Label>
-          <Input
+					<Input
-            id="position"
+						id="position"
-            type="number"
+						type="number"
-            min="1"
+						min="1"
-            max={totalItems}
+						max={totalItems}
-            value={currentPosition}
+						value={currentPosition}
-            onchange={(e) => {
+						onchange={(e) => {
-              const newPos = parseInt((e.target as HTMLInputElement).value);
+							const newPos = parseInt((e.target as HTMLInputElement).value);
-              if (newPos >= 1 && newPos <= totalItems) {
+							if (newPos >= 1 && newPos <= totalItems) {
-                onPositionChange?.(newPos);
+								onPositionChange?.(newPos);
-              }
+							}
-            }}
+						}}
-            placeholder="1"
+						placeholder="1"
-          />
+					/>
-          <p class="text-sm text-muted-foreground">
+					<p class="text-sm text-muted-foreground">
-            Choose where this item appears in your wishlist (1 = top, {totalItems} = bottom)
+						Choose where this item appears in your wishlist (1 = top, {totalItems} = bottom)
-          </p>
+					</p>
-        </div>
+				</div>
-      </div>
+			</div>
-      <div class="flex gap-2">
+			<div class="flex gap-2">
-        <Button type="submit" class="flex-1 md:flex-none">{t.form.saveChanges}</Button>
+				<Button type="submit" class="flex-1 md:flex-none">{t.form.saveChanges}</Button>
-        {#if onCancel}
+				{#if onCancel}
-          <Button type="button" variant="outline" class="flex-1 md:flex-none" onclick={onCancel}
+					<Button type="button" variant="outline" class="flex-1 md:flex-none" onclick={onCancel}>{t.form.cancel}</Button>
-            >{t.form.cancel}</Button
+				{/if}
-          >
+			</div>
-        {/if}
+		</form>
-      </div>
+	</CardContent>
    </form>
  </CardContent>
 </Card>
@@ -1,67 +1,83 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from "$lib/components/ui/button";
-  import { Card, CardContent } from '$lib/components/ui/card';
+	import { Card, CardContent } from "$lib/components/ui/card";
-  import WishlistItem from '$lib/components/wishlist/WishlistItem.svelte';
+	import WishlistItem from "$lib/components/wishlist/WishlistItem.svelte";
-  import EmptyState from '$lib/components/layout/EmptyState.svelte';
+	import EmptyState from "$lib/components/layout/EmptyState.svelte";
-  import type { Item } from '$lib/server/schema';
+	import type { Item } from "$lib/server/schema";
-  import { enhance } from '$app/forms';
+	import { enhance } from "$app/forms";
-  import { flip } from 'svelte/animate';
+	import { flip } from "svelte/animate";
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
+	import ThemeCard from "$lib/components/themes/ThemeCard.svelte";
-  import { getCardStyle } from '$lib/utils/colors';
+	import { getCardStyle } from "$lib/utils/colors";
-  let {
+	let {
-    items = $bindable([]),
+		items = $bindable([]),
-    rearranging,
+		rearranging,
-    onStartEditing,
+		onStartEditing,
-    theme = null,
+		onReorder,
-    wishlistColor = null
+		theme = null,
-  }: {
+		wishlistColor = null
-    items: Item[];
+	}: {
-    rearranging: boolean;
+		items: Item[];
-    onStartEditing: (item: Item) => void;
+		rearranging: boolean;
-    theme?: string | null;
+		onStartEditing: (item: Item) => void;
-    wishlistColor?: string | null;
+		onReorder: (items: Item[]) => Promise<void>;
-  } = $props();
+		theme?: string | null;
 		wishlistColor?: string | null;
 	} = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  const cardStyle = $derived(getCardStyle(wishlistColor));
+	const cardStyle = $derived(getCardStyle(wishlistColor));
 </script>
 <div class="space-y-4">
-  {#if items && items.length > 0}
+	{#if items && items.length > 0}
-    <div class="space-y-4">
+		<div class="space-y-4">
-      {#each items as item (item.id)}
+			{#each items as item (item.id)}
-        <div animate:flip={{ duration: 300 }}>
+				<div animate:flip={{ duration: 300 }}>
-          <WishlistItem {item} {theme} {wishlistColor} showDragHandle={false}>
+				<WishlistItem {item} {theme} {wishlistColor} showDragHandle={false}>
-            <div class="flex gap-2">
+					<div class="flex gap-2">
-              <Button
+						<Button
-                type="button"
+							type="button"
-                variant="outline"
+							variant="outline"
-                size="sm"
+							size="sm"
-                onclick={() => onStartEditing(item)}
+							onclick={() => onStartEditing(item)}
-              >
+						>
-                {t.wishlist.edit}
+							{t.wishlist.edit}
-              </Button>
+						</Button>
-              {#if rearranging}
+						{#if rearranging}
-                <form method="POST" action="?/deleteItem" use:enhance>
+							<form
-                  <input type="hidden" name="itemId" value={item.id} />
+								method="POST"
-                  <Button type="submit" variant="destructive" size="sm">
+								action="?/deleteItem"
-                    {t.form.delete}
+								use:enhance
-                  </Button>
+							>
-                </form>
+								<input
-              {/if}
+									type="hidden"
-            </div>
+									name="itemId"
-          </WishlistItem>
+									value={item.id}
-        </div>
+								/>
-      {/each}
+								<Button
-    </div>
+									type="submit"
-  {:else}
+									variant="destructive"
-    <Card style={cardStyle} class="relative overflow-hidden">
+									size="sm"
-      <ThemeCard themeName={theme} color={wishlistColor} showPattern={false} />
+								>
-      <CardContent class="p-12 relative z-10">
+									{t.form.delete}
-        <EmptyState message={t.wishlist.noWishes + '. ' + t.wishlist.addFirstWish + '!'} />
+								</Button>
-      </CardContent>
+							</form>
-    </Card>
+						{/if}
-  {/if}
+					</div>
 				</WishlistItem>
 				</div>
 			{/each}
 		</div>
 	{:else}
 		<Card style={cardStyle} class="relative overflow-hidden">
 			<ThemeCard themeName={theme} color={wishlistColor} />
 			<CardContent class="p-12 relative z-10">
 				<EmptyState
 					message={t.wishlist.noWishes + ". " + t.wishlist.addFirstWish + "!"}
 				/>
 			</CardContent>
 		</Card>
 	{/if}
 </div>
@@ -1,33 +1,33 @@
 <script lang="ts">
-  import { Label } from '$lib/components/ui/label';
+	import { Label } from '$lib/components/ui/label';
-  let {
+	let {
-    images,
+		images,
-    selectedImage = $bindable(''),
+		selectedImage = $bindable(''),
-    isLoading = false
+		isLoading = false
-  }: {
+	}: {
-    images: string[];
+		images: string[];
-    selectedImage?: string;
+		selectedImage?: string;
-    isLoading?: boolean;
+		isLoading?: boolean;
-  } = $props();
+	} = $props();
 </script>
 {#if isLoading}
-  <p class="text-sm text-muted-foreground">Loading images...</p>
+	<p class="text-sm text-muted-foreground">Loading images...</p>
 {:else if images.length > 0}
-  <div class="mt-2">
+	<div class="mt-2">
-    <Label class="text-sm">Or select from scraped images:</Label>
+		<Label class="text-sm">Or select from scraped images:</Label>
-    <div class="grid grid-cols-3 md:grid-cols-5 gap-2 mt-2">
+		<div class="grid grid-cols-3 md:grid-cols-5 gap-2 mt-2">
-      {#each images as imgUrl (imgUrl)}
+			{#each images as imgUrl}
-        <button
+				<button
-          type="button"
+					type="button"
-          onclick={() => (selectedImage = imgUrl)}
+					onclick={() => (selectedImage = imgUrl)}
-          class="relative aspect-square rounded-md overflow-hidden border-2 hover:border-primary transition-colors"
+					class="relative aspect-square rounded-md overflow-hidden border-2 hover:border-primary transition-colors"
-          class:border-primary={selectedImage === imgUrl}
+					class:border-primary={selectedImage === imgUrl}
-        >
+				>
-          <img src={imgUrl} alt="" class="w-full h-full object-cover" />
+					<img src={imgUrl} alt="" class="w-full h-full object-cover" />
-        </button>
+				</button>
-      {/each}
+			{/each}
-    </div>
+		</div>
-  </div>
+	</div>
 {/if}
@@ -1,121 +1,123 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import { Input } from '$lib/components/ui/input';
+	import { Input } from '$lib/components/ui/input';
-  import { enhance } from '$app/forms';
+	import { enhance } from '$app/forms';
-  interface Props {
+	interface Props {
-    itemId: string;
+		itemId: string;
-    isReserved: boolean;
+		isReserved: boolean;
-    reserverName?: string | null;
+		reserverName?: string | null;
-    reservationUserId?: string | null;
+		reservationUserId?: string | null;
-    currentUserId?: string | null;
+		currentUserId?: string | null;
-  }
+	}
-  let { itemId, isReserved, reserverName, reservationUserId, currentUserId }: Props = $props();
+	let { itemId, isReserved, reserverName, reservationUserId, currentUserId }: Props = $props();
-  let showReserveForm = $state(false);
+	let showReserveForm = $state(false);
-  let name = $state('');
+	let name = $state('');
-  let showCancelConfirmation = $state(false);
+	let showCancelConfirmation = $state(false);
-  const canCancel = $derived(() => {
+	const canCancel = $derived(() => {
-    if (!isReserved) return false;
+		if (!isReserved) return false;
-    if (reservationUserId) {
+		if (reservationUserId) {
-      return currentUserId === reservationUserId;
+			return currentUserId === reservationUserId;
-    }
+		}
-    return true;
+		return true;
-  });
+	});
-  const isAnonymousReservation = $derived(!reservationUserId);
+	const isAnonymousReservation = $derived(!reservationUserId);
 </script>
 {#if isReserved}
-  <div class="flex flex-col items-start gap-2">
+	<div class="flex flex-col items-start gap-2">
-    <div class="text-sm text-green-600 font-medium">
+		<div class="text-sm text-green-600 font-medium">
-      ✓ Reserved
+			✓ Reserved
-      {#if reserverName}
+			{#if reserverName}
-        by {reserverName}
+				by {reserverName}
-      {/if}
+			{/if}
-    </div>
+		</div>
-    {#if canCancel()}
+		{#if canCancel()}
-      {#if showCancelConfirmation}
+			{#if showCancelConfirmation}
-        <div class="flex flex-col gap-2 items-start">
+				<div class="flex flex-col gap-2 items-start">
-          <p class="text-sm text-muted-foreground">Cancel this reservation?</p>
+					<p class="text-sm text-muted-foreground">
-          <div class="flex gap-2">
+						Cancel this reservation?
-            <form
+					</p>
-              method="POST"
+					<div class="flex gap-2">
-              action="?/unreserve"
+						<form method="POST" action="?/unreserve" use:enhance={() => {
-              use:enhance={() => {
+							return async ({ update }) => {
-                return async ({ update }) => {
+								showCancelConfirmation = false;
-                  showCancelConfirmation = false;
+								await update();
-                  await update();
+							};
-                };
+						}}>
-              }}
+							<input type="hidden" name="itemId" value={itemId} />
-            >
+							<Button type="submit" variant="destructive" size="sm">
-              <input type="hidden" name="itemId" value={itemId} />
+								Yes, Cancel
-              <Button type="submit" variant="destructive" size="sm">Yes, Cancel</Button>
+							</Button>
-            </form>
+						</form>
-            <Button
+						<Button
-              type="button"
+							type="button"
-              variant="outline"
+							variant="outline"
-              size="sm"
+							size="sm"
-              onclick={() => (showCancelConfirmation = false)}
+							onclick={() => (showCancelConfirmation = false)}
-            >
+						>
-              No, Keep It
+							No, Keep It
-            </Button>
+						</Button>
-          </div>
+					</div>
-        </div>
+				</div>
-      {:else if isAnonymousReservation}
+			{:else if isAnonymousReservation}
-        <Button
+				<Button
-          type="button"
+					type="button"
-          variant="outline"
+					variant="outline"
-          size="sm"
+					size="sm"
-          onclick={() => (showCancelConfirmation = true)}
+					onclick={() => (showCancelConfirmation = true)}
-        >
+				>
-          Cancel Reservation
+					Cancel Reservation
-        </Button>
+				</Button>
-      {:else}
+			{:else}
-        <form method="POST" action="?/unreserve" use:enhance>
+				<form method="POST" action="?/unreserve" use:enhance>
-          <input type="hidden" name="itemId" value={itemId} />
+					<input type="hidden" name="itemId" value={itemId} />
-          <Button type="submit" variant="outline" size="sm">Cancel Reservation</Button>
+					<Button type="submit" variant="outline" size="sm">
-        </form>
+						Cancel Reservation
-      {/if}
+					</Button>
-    {/if}
+				</form>
-  </div>
+			{/if}
 		{/if}
 	</div>
 {:else if showReserveForm}
-  <form
+	<form
-    method="POST"
+		method="POST"
-    action="?/reserve"
+		action="?/reserve"
-    use:enhance={() => {
+		use:enhance={() => {
-      return async ({ update }) => {
+			return async ({ update }) => {
-        await update();
+				await update();
-        showReserveForm = false;
+				showReserveForm = false;
-        name = '';
+				name = '';
-      };
+			};
-    }}
+		}}
-    class="flex flex-col gap-2 w-full md:w-auto"
+		class="flex flex-col gap-2 w-full md:w-auto"
-  >
+	>
-    <input type="hidden" name="itemId" value={itemId} />
+		<input type="hidden" name="itemId" value={itemId} />
-    <Input
+		<Input
-      name="reserverName"
+			name="reserverName"
-      placeholder="Your name (optional)"
+			placeholder="Your name (optional)"
-      bind:value={name}
+			bind:value={name}
-      class="w-full md:w-48"
+			class="w-full md:w-48"
-    />
+		/>
-    <div class="flex gap-2">
+		<div class="flex gap-2">
-      <Button type="submit" size="sm" class="flex-1">Confirm</Button>
+			<Button type="submit" size="sm" class="flex-1">Confirm</Button>
-      <Button
+			<Button
-        type="button"
+				type="button"
-        variant="outline"
+				variant="outline"
-        size="sm"
+				size="sm"
-        onclick={() => (showReserveForm = false)}
+				onclick={() => (showReserveForm = false)}
-        class="flex-1"
+				class="flex-1"
-      >
+			>
-        Cancel
+				Cancel
-      </Button>
+			</Button>
-    </div>
+		</div>
-  </form>
+	</form>
 {:else}
-  <Button onclick={() => (showReserveForm = true)} size="sm" class="w-full md:w-auto">
+	<Button onclick={() => (showReserveForm = true)} size="sm" class="w-full md:w-auto">
-    Reserve This
+		Reserve This
-  </Button>
+	</Button>
 {/if}
@@ -1,66 +1,64 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import { Input } from '$lib/components/ui/input';
+	import { Input } from '$lib/components/ui/input';
-  import { Label } from '$lib/components/ui/label';
+	import { Label } from '$lib/components/ui/label';
-  import { Card, CardContent } from '$lib/components/ui/card';
+	import { Card, CardContent } from '$lib/components/ui/card';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import { getCardStyle } from '$lib/utils/colors';
+	import { getCardStyle } from '$lib/utils/colors';
-  interface Props {
+	interface Props {
-    publicUrl: string;
+		publicUrl: string;
-    ownerUrl?: string;
+		ownerUrl?: string;
-    wishlistColor?: string | null;
+		wishlistColor?: string | null;
-  }
+	}
-  let { publicUrl, ownerUrl, wishlistColor = null }: Props = $props();
+	let { publicUrl, ownerUrl, wishlistColor = null }: Props = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  const cardStyle = $derived(getCardStyle(null, wishlistColor));
+	const cardStyle = $derived(getCardStyle(null, wishlistColor));
-  let copiedPublic = $state(false);
+	let copiedPublic = $state(false);
-  let copiedOwner = $state(false);
+	let copiedOwner = $state(false);
-  const publicLink = $derived(
+	const publicLink = $derived(
-    typeof window !== 'undefined' ? `${window.location.origin}${publicUrl}` : ''
+		typeof window !== 'undefined' ? `${window.location.origin}${publicUrl}` : ''
-  );
+	);
-  const ownerLink = $derived(
+	const ownerLink = $derived(ownerUrl && typeof window !== 'undefined' ? `${window.location.origin}${ownerUrl}` : '');
    ownerUrl && typeof window !== 'undefined' ? `${window.location.origin}${ownerUrl}` : ''
  );
-  async function copyToClipboard(text: string, type: 'public' | 'owner') {
+	async function copyToClipboard(text: string, type: 'public' | 'owner') {
-    await navigator.clipboard.writeText(text);
+		await navigator.clipboard.writeText(text);
-    if (type === 'public') {
+		if (type === 'public') {
-      copiedPublic = true;
+			copiedPublic = true;
-      setTimeout(() => (copiedPublic = false), 2000);
+			setTimeout(() => (copiedPublic = false), 2000);
-    } else {
+		} else {
-      copiedOwner = true;
+			copiedOwner = true;
-      setTimeout(() => (copiedOwner = false), 2000);
+			setTimeout(() => (copiedOwner = false), 2000);
-    }
+		}
-  }
+	}
 </script>
 <Card style={cardStyle}>
-  <CardContent class="space-y-4 pt-6">
+	<CardContent class="space-y-4 pt-6">
-    <div class="space-y-2">
+		<div class="space-y-2">
-      <Label>{t.wishlist.shareViewOnly}</Label>
+			<Label>{t.wishlist.shareViewOnly}</Label>
-      <div class="flex gap-2">
+			<div class="flex gap-2">
-        <Input readonly value={publicLink} class="font-mono text-sm" />
+				<Input readonly value={publicLink} class="font-mono text-sm" />
-        <Button variant="outline" onclick={() => copyToClipboard(publicLink, 'public')}>
+				<Button variant="outline" onclick={() => copyToClipboard(publicLink, 'public')}>
-          {copiedPublic ? t.wishlist.copied : t.wishlist.copy}
+					{copiedPublic ? t.wishlist.copied : t.wishlist.copy}
-        </Button>
+				</Button>
-      </div>
+			</div>
-    </div>
+		</div>
-    {#if ownerLink}
+		{#if ownerLink}
-      <div class="space-y-2">
+			<div class="space-y-2">
-        <Label>{t.wishlist.shareEditLink}</Label>
+				<Label>{t.wishlist.shareEditLink}</Label>
-        <div class="flex gap-2">
+				<div class="flex gap-2">
-          <Input readonly value={ownerLink} class="font-mono text-sm" />
+					<Input readonly value={ownerLink} class="font-mono text-sm" />
-          <Button variant="outline" onclick={() => copyToClipboard(ownerLink, 'owner')}>
+					<Button variant="outline" onclick={() => copyToClipboard(ownerLink, 'owner')}>
-            {copiedOwner ? t.wishlist.copied : t.wishlist.copy}
+						{copiedOwner ? t.wishlist.copied : t.wishlist.copy}
-          </Button>
+					</Button>
-        </div>
+				</div>
-      </div>
+			</div>
-    {/if}
+		{/if}
-  </CardContent>
+	</CardContent>
 </Card>
@@ -1,22 +1,25 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from "$lib/components/ui/button";
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  let {
+	let {
-    rearranging = $bindable(false),
+		rearranging = $bindable(false),
-    showAddForm = false,
+		showAddForm = false,
-    onToggleAddForm
+		onToggleAddForm
-  }: {
+	}: {
-    rearranging: boolean;
+		rearranging: boolean;
-    showAddForm?: boolean;
+		showAddForm?: boolean;
-    onToggleAddForm: () => void;
+		onToggleAddForm: () => void;
-  } = $props();
+	} = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
 </script>
 <div class="flex flex-col md:flex-row gap-4">
-  <Button onclick={onToggleAddForm} class="w-full md:w-auto">
+	<Button
-    {showAddForm ? t.form.cancel : t.wishlist.addWish}
+		onclick={onToggleAddForm}
-  </Button>
+		class="w-full md:w-auto"
 	>
 		{showAddForm ? t.form.cancel : t.wishlist.addWish}
 	</Button>
 </div>
@@ -1,212 +1,211 @@
 <script lang="ts">
-  import { Card, CardContent } from '$lib/components/ui/card';
+	import { Card, CardContent } from "$lib/components/ui/card";
-  import { Input } from '$lib/components/ui/input';
+	import { Input } from "$lib/components/ui/input";
-  import { Label } from '$lib/components/ui/label';
+	import { Label } from "$lib/components/ui/label";
-  import { Textarea } from '$lib/components/ui/textarea';
+	import { Textarea } from "$lib/components/ui/textarea";
-  import { Pencil, Check, X } from '@lucide/svelte';
+	import { Pencil, Check, X } from "lucide-svelte";
-  import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
+	import ColorPicker from "$lib/components/ui/ColorPicker.svelte";
-  import ThemePicker from '$lib/components/ui/theme-picker.svelte';
+	import ThemePicker from "$lib/components/ui/theme-picker.svelte";
-  import IconButton from '$lib/components/ui/IconButton.svelte';
+	import type { Wishlist } from "$lib/server/schema";
-  import type { Wishlist } from '$lib/db/schema';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { getCardStyle } from '$lib/utils/colors';
  import { getCardStyle } from '$lib/utils/colors';
-  let {
+	let {
-    wishlist,
+		wishlist,
-    onTitleUpdate,
+		onTitleUpdate,
-    onDescriptionUpdate,
+		onDescriptionUpdate,
-    onColorUpdate,
+		onColorUpdate,
-    onEndDateUpdate,
+		onEndDateUpdate,
-    onThemeUpdate
+		onThemeUpdate
-  }: {
+	}: {
-    wishlist: Wishlist;
+		wishlist: Wishlist;
-    onTitleUpdate: (title: string) => Promise<boolean>;
+		onTitleUpdate: (title: string) => Promise<boolean>;
-    onDescriptionUpdate: (description: string | null) => Promise<boolean>;
+		onDescriptionUpdate: (description: string | null) => Promise<boolean>;
-    onColorUpdate: (color: string | null) => void;
+		onColorUpdate: (color: string | null) => void;
-    onEndDateUpdate: (endDate: string | null) => void;
+		onEndDateUpdate: (endDate: string | null) => void;
-    onThemeUpdate: (theme: string | null) => void;
+		onThemeUpdate: (theme: string | null) => void;
-  } = $props();
+	} = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  let editingTitle = $state(false);
+	let editingTitle = $state(false);
-  let editingDescription = $state(false);
+	let editingDescription = $state(false);
-  let wishlistTitle = $state(wishlist.title);
+	let wishlistTitle = $state(wishlist.title);
-  let wishlistDescription = $state(wishlist.description || '');
+	let wishlistDescription = $state(wishlist.description || "");
-  let wishlistColor = $state<string | null>(wishlist.color);
+	let wishlistColor = $state<string | null>(wishlist.color);
-  let wishlistTheme = $state<string>(wishlist.theme || 'none');
+	let wishlistTheme = $state<string>(wishlist.theme || 'none');
-  let wishlistEndDate = $state<string | null>(
+	let wishlistEndDate = $state<string | null>(
-    wishlist.endDate ? new Date(wishlist.endDate).toISOString().split('T')[0] : null
+		wishlist.endDate
-  );
+			? new Date(wishlist.endDate).toISOString().split("T")[0]
 			: null,
 	);
-  const cardStyle = $derived(getCardStyle(null, wishlistColor));
+	const cardStyle = $derived(getCardStyle(null, wishlistColor));
-  async function saveTitle() {
+	async function saveTitle() {
-    if (!wishlistTitle.trim()) {
+		if (!wishlistTitle.trim()) {
-      wishlistTitle = wishlist.title;
+			wishlistTitle = wishlist.title;
-      editingTitle = false;
+			editingTitle = false;
-      return;
+			return;
-    }
+		}
-    const success = await onTitleUpdate(wishlistTitle.trim());
+		const success = await onTitleUpdate(wishlistTitle.trim());
-    if (success) {
+		if (success) {
-      editingTitle = false;
+			editingTitle = false;
-    } else {
+		} else {
-      wishlistTitle = wishlist.title;
+			wishlistTitle = wishlist.title;
-      editingTitle = false;
+			editingTitle = false;
-    }
+		}
-  }
+	}
-  async function saveDescription() {
+	async function saveDescription() {
-    const success = await onDescriptionUpdate(wishlistDescription.trim() || null);
+		const success = await onDescriptionUpdate(wishlistDescription.trim() || null);
-    if (success) {
+		if (success) {
-      editingDescription = false;
+			editingDescription = false;
-    } else {
+		} else {
-      wishlistDescription = wishlist.description || '';
+			wishlistDescription = wishlist.description || "";
-      editingDescription = false;
+			editingDescription = false;
-    }
+		}
-  }
+	}
-  function handleEndDateChange(e: Event) {
+	function handleEndDateChange(e: Event) {
-    const input = e.target as HTMLInputElement;
+		const input = e.target as HTMLInputElement;
-    wishlistEndDate = input.value || null;
+		wishlistEndDate = input.value || null;
-    onEndDateUpdate(wishlistEndDate);
+		onEndDateUpdate(wishlistEndDate);
-  }
+	}
-  function clearEndDate() {
+	function clearEndDate() {
-    wishlistEndDate = null;
+		wishlistEndDate = null;
-    onEndDateUpdate(null);
+		onEndDateUpdate(null);
-  }
+	}
 </script>
 <!-- Title Header -->
 <div class="flex items-center justify-between gap-4 mb-6">
-  <div class="flex items-center gap-2 flex-1 min-w-0">
+	<div class="flex items-center gap-2 flex-1 min-w-0">
-    {#if editingTitle}
+		{#if editingTitle}
-      <Input
+			<Input
-        bind:value={wishlistTitle}
+				bind:value={wishlistTitle}
-        class="text-3xl font-bold h-auto py-0 leading-[2.25rem]"
+				class="text-3xl font-bold h-auto py-0 leading-[2.25rem]"
-        onkeydown={(e) => {
+				onkeydown={(e) => {
-          if (e.key === 'Enter') {
+					if (e.key === "Enter") {
-            saveTitle();
+						saveTitle();
-          } else if (e.key === 'Escape') {
+					} else if (e.key === "Escape") {
-            wishlistTitle = wishlist.title;
+						wishlistTitle = wishlist.title;
-            editingTitle = false;
+						editingTitle = false;
-          }
+					}
-        }}
+				}}
-        autofocus
+				autofocus
-      />
+			/>
-    {:else}
+		{:else}
-      <h1 class="text-3xl font-bold leading-[2.25rem]">{wishlistTitle}</h1>
+			<h1 class="text-3xl font-bold leading-[2.25rem]">{wishlistTitle}</h1>
-    {/if}
+		{/if}
-    <IconButton
+		<button
-      onclick={() => {
+			type="button"
-        if (editingTitle) {
+			onclick={() => {
-          saveTitle();
+				if (editingTitle) {
-        } else {
+					saveTitle();
-          editingTitle = true;
+				} else {
-        }
+					editingTitle = true;
-      }}
+				}
-      color={wishlistColor}
+			}}
-      size="sm"
+			class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
-      class="shrink-0"
+			aria-label={editingTitle ? "Save title" : "Edit title"}
-      aria-label={editingTitle ? 'Save title' : 'Edit title'}
+		>
-    >
+			{#if editingTitle}
-      {#if editingTitle}
+				<Check class="w-4 h-4" />
-        <Check class="w-4 h-4" />
+			{:else}
-      {:else}
+				<Pencil class="w-4 h-4" />
-        <Pencil class="w-4 h-4" />
+			{/if}
-      {/if}
+		</button>
-    </IconButton>
+	</div>
-  </div>
+	<div class="flex items-center gap-2 shrink-0">
-  <div class="flex items-center gap-2 shrink-0">
+		<ThemePicker
-    <ThemePicker
+			value={wishlistTheme}
-      value={wishlistTheme}
+			onValueChange={async (theme) => {
-      onValueChange={async (theme) => {
+				wishlistTheme = theme;
-        wishlistTheme = theme;
+				onThemeUpdate(theme);
-        onThemeUpdate(theme);
+				// Force reactivity by updating the wishlist object
-        // Force reactivity by updating the wishlist object
+				wishlist.theme = theme;
-        wishlist.theme = theme;
+			}}
-      }}
+		/>
-      color={wishlistColor}
+		<ColorPicker
-    />
+			bind:color={wishlistColor}
-    <ColorPicker
+			onchange={() => onColorUpdate(wishlistColor)}
-      bind:color={wishlistColor}
+			size="sm"
-      onchange={() => onColorUpdate(wishlistColor)}
+		/>
-      size="sm"
+	</div>
    />
  </div>
 </div>
 <!-- Settings Card -->
 <Card style={cardStyle}>
-  <CardContent class="pt-6 space-y-4">
+	<CardContent class="pt-6 space-y-4">
-    <div class="space-y-2">
+		<!-- Description -->
-      <div class="flex items-center justify-between gap-2">
+		<div class="space-y-2">
-        <Label for="wishlist-description">{t.form.descriptionOptional}</Label>
+			<div class="flex items-center justify-between gap-2">
-        <IconButton
+				<Label for="wishlist-description">{t.form.descriptionOptional}</Label>
-          onclick={() => {
+				<button
-            if (editingDescription) {
+					type="button"
-              saveDescription();
+					onclick={() => {
-            } else {
+						if (editingDescription) {
-              editingDescription = true;
+							saveDescription();
-            }
+						} else {
-          }}
+							editingDescription = true;
-          color={wishlistColor}
+						}
-          size="sm"
+					}}
-          class="flex-shrink-0"
+					class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
-          aria-label={editingDescription ? 'Save description' : 'Edit description'}
+					aria-label={editingDescription ? "Save description" : "Edit description"}
-        >
+				>
-          {#if editingDescription}
+					{#if editingDescription}
-            <Check class="w-4 h-4" />
+						<Check class="w-4 h-4" />
-          {:else}
+					{:else}
-            <Pencil class="w-4 h-4" />
+						<Pencil class="w-4 h-4" />
-          {/if}
+					{/if}
-        </IconButton>
+				</button>
-      </div>
+			</div>
-      {#if editingDescription}
+			{#if editingDescription}
-        <Textarea
+				<Textarea
-          id="wishlist-description"
+					id="wishlist-description"
-          bind:value={wishlistDescription}
+					bind:value={wishlistDescription}
-          class="w-full"
+					class="w-full"
-          rows={3}
+					rows={3}
-          onkeydown={(e) => {
+					onkeydown={(e) => {
-            if (e.key === 'Escape') {
+						if (e.key === "Escape") {
-              wishlistDescription = wishlist.description || '';
+							wishlistDescription = wishlist.description || "";
-              editingDescription = false;
+							editingDescription = false;
-            }
+						}
-          }}
+					}}
-          autofocus
+					autofocus
-        />
+				/>
-      {:else}
+			{:else}
-        <div
+				<div class="w-full py-2 px-3 rounded-md border border-input bg-transparent text-sm min-h-[80px]">
-          class="w-full py-2 px-3 rounded-md border border-input bg-transparent text-sm min-h-[80px]"
+					{wishlistDescription || t.form.noDescription}
-        >
+				</div>
-          {wishlistDescription || t.form.noDescription}
+			{/if}
-        </div>
+		</div>
      {/if}
    </div>
-    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4">
+		<!-- End Date -->
-      <Label for="wishlist-end-date">{t.form.endDateOptional}</Label>
+		<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4">
-      <div class="flex items-center gap-2">
+			<Label for="wishlist-end-date">{t.form.endDateOptional}</Label>
-        {#if wishlistEndDate}
+			<div class="flex items-center gap-2">
-          <IconButton
+				{#if wishlistEndDate}
-            onclick={clearEndDate}
+					<button
-            color={wishlistColor}
+						type="button"
-            size="sm"
+						onclick={clearEndDate}
-            class="flex-shrink-0"
+						class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
-            aria-label="Clear end date"
+						aria-label="Clear end date"
-          >
+					>
-            <X class="w-4 h-4" />
+						<X class="w-4 h-4" />
-          </IconButton>
+					</button>
-        {/if}
+				{/if}
-        <Input
+				<Input
-          id="wishlist-end-date"
+					id="wishlist-end-date"
-          type="date"
+					type="date"
-          value={wishlistEndDate || ''}
+					value={wishlistEndDate || ""}
-          onchange={handleEndDateChange}
+					onchange={handleEndDateChange}
-          class="w-full sm:w-auto"
+					class="w-full sm:w-auto"
-        />
+				/>
-      </div>
+			</div>
-    </div>
+		</div>
-  </CardContent>
+	</CardContent>
 </Card>
@@ -1,125 +1,125 @@
 <script lang="ts">
-  import { Card, CardContent } from '$lib/components/ui/card';
+	import { Card, CardContent } from "$lib/components/ui/card";
-  import type { Item } from '$lib/db/schema';
+	import type { Item } from "$lib/server/schema";
-  import { GripVertical, ExternalLink } from '@lucide/svelte';
+	import { GripVertical, ExternalLink } from "lucide-svelte";
-  import { getCardStyle } from '$lib/utils/colors';
+	import { getCardStyle } from '$lib/utils/colors';
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from "$lib/components/ui/button";
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
-  interface Props {
+	interface Props {
-    item: Item;
+		item: Item;
-    showImage?: boolean;
+		showImage?: boolean;
-    children?: import('svelte').Snippet;
+		children?: any;
-    showDragHandle?: boolean;
+		showDragHandle?: boolean;
-    theme?: string | null;
+		theme?: string | null;
-    wishlistColor?: string | null;
+		wishlistColor?: string | null;
-  }
+	}
-  let {
+	let {
-    item,
+		item,
-    showImage = true,
+		showImage = true,
-    children,
+		children,
-    showDragHandle = false,
+		showDragHandle = false,
-    theme = null,
+		theme = null,
-    wishlistColor = null
+		wishlistColor = null
-  }: Props = $props();
+	}: Props = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  const currencySymbols: Record<string, string> = {
+	const currencySymbols: Record<string, string> = {
-    DKK: 'kr',
+		DKK: "kr",
-    EUR: '€',
+		EUR: "€",
-    USD: '$',
+		USD: "$",
-    SEK: 'kr',
+		SEK: "kr",
-    NOK: 'kr',
+		NOK: "kr",
-    GBP: '£'
+		GBP: "£",
-  };
+	};
-  function formatPrice(price: string | null, currency: string | null): string {
+	function formatPrice(
-    if (!price) return '';
+		price: string | null,
-    const symbol = currency ? currencySymbols[currency] || currency : 'kr';
+		currency: string | null,
-    const amount = parseFloat(price).toFixed(2);
+	): string {
 		if (!price) return "";
 		const symbol = currency ? currencySymbols[currency] || currency : "kr";
 		const amount = parseFloat(price).toFixed(2);
-    // For Danish, Swedish, Norwegian kroner, put symbol after the amount
+		// For Danish, Swedish, Norwegian kroner, put symbol after the amount
-    if (currency && ['DKK', 'SEK', 'NOK'].includes(currency)) {
+		if (currency && ["DKK", "SEK", "NOK"].includes(currency)) {
-      return `${amount} ${symbol}`;
+			return `${amount} ${symbol}`;
-    }
+		}
-    // For other currencies, put symbol before
+		// For other currencies, put symbol before
-    return `${symbol}${amount}`;
+		return `${symbol}${amount}`;
-  }
+	}
-  const cardStyle = $derived(getCardStyle(item.color, wishlistColor));
+	const cardStyle = $derived(getCardStyle(item.color, wishlistColor));
 </script>
 <Card style={cardStyle} class="relative overflow-hidden">
-  <ThemeCard themeName={theme} color={item.color} showPattern={false} />
+	<ThemeCard themeName={theme} color={item.color} />
-  <CardContent class="p-6 relative z-10">
+	<CardContent class="p-6 relative z-10">
-    <div class="flex gap-4">
+		<div class="flex gap-4">
-      {#if showDragHandle}
+			{#if showDragHandle}
-        <div
+				<div
-          class="cursor-grab active:cursor-grabbing hover:bg-accent rounded-md transition-colors self-center shrink-0 p-2 touch-none"
+					class="cursor-grab active:cursor-grabbing hover:bg-accent rounded-md transition-colors self-center shrink-0 p-2 touch-none"
-          aria-label="Drag to reorder"
+					aria-label="Drag to reorder"
-          role="button"
+					role="button"
-          tabindex="0"
+					tabindex="0"
-          style="touch-action: none;"
+					style="touch-action: none;"
-        >
+				>
-          <GripVertical class="w-6 h-6 text-muted-foreground" />
+					<GripVertical class="w-6 h-6 text-muted-foreground" />
-        </div>
+				</div>
-      {/if}
+			{/if}
-      <div class="flex flex-col md:flex-row gap-4 flex-1">
+			<div class="flex flex-col md:flex-row gap-4 flex-1">
-        {#if showImage && item.imageUrl}
+				{#if showImage && item.imageUrl}
-          <img
+					<img
-            src="/api/image-proxy?url={encodeURIComponent(item.imageUrl)}"
+						src="/api/image-proxy?url={encodeURIComponent(item.imageUrl)}"
-            alt={item.title}
+						alt={item.title}
-            class="w-full md:w-32 h-32 object-cover rounded-lg"
+						class="w-full md:w-32 h-32 object-cover rounded-lg"
-            onerror={(e: Event) => ((e.currentTarget as HTMLImageElement).src = item.imageUrl)}
+						onerror={(e) => e.currentTarget.src = item.imageUrl}
-          />
+					/>
-        {/if}
+				{/if}
-        <div class="flex-1 items-center min-w-0">
+				<div class="flex-1 items-center min-w-0">
-          <div class="flex-1">
+					<div class="flex-1">
-            <h3 class="font-semibold text-lg break-words">{item.title}</h3>
+						<h3 class="font-semibold text-lg break-words">{item.title}</h3>
-          </div>
+					</div>
-          {#if item.description}
+					{#if item.description}
-            <p
+						<p class="text-muted-foreground break-words whitespace-pre-wrap" style="overflow-wrap: anywhere;">{item.description}</p>
-              class="text-muted-foreground break-words whitespace-pre-wrap"
+					{/if}
              style="overflow-wrap: anywhere;"
            >
              {item.description}
            </p>
          {/if}
-          <div class="flex flex-wrap gap-2 items-center text-sm mt-2">
+					<div class="flex flex-wrap gap-2 items-center text-sm mt-2">
-            {#if item.price}
+						{#if item.price}
-              <span class="font-medium">{formatPrice(item.price, item.currency)}</span>
+							<span class="font-medium"
-            {/if}
+								>{formatPrice(item.price, item.currency)}</span
-          </div>
+							>
 						{/if}
 					</div>
-          <div class="flex flex-wrap gap-2 items-center mt-3">
+					<div class="flex flex-wrap gap-2 items-center mt-3">
-            {#if item.link}
+						{#if item.link}
-              <Button
+							<Button
-                href={item.link}
+								href={item.link}
-                target="_blank"
+								target="_blank"
-                rel="noopener noreferrer"
+								rel="noopener noreferrer"
-                variant="outline"
+								variant="outline"
-                size="sm"
+								size="sm"
-                class="gap-1.5"
+								class="gap-1.5"
-              >
+							>
-                <ExternalLink class="w-4 h-4" />
+								<ExternalLink class="w-4 h-4" />
-                {t.wishlist.viewProduct}
+								{t.wishlist.viewProduct}
-              </Button>
+							</Button>
-            {/if}
+						{/if}
-            {#if children}
+						{#if children}
-              {@render children()}
+							{@render children()}
-            {/if}
+						{/if}
-          </div>
+					</div>
-        </div>
+				</div>
-      </div>
+			</div>
-    </div>
+		</div>
-  </CardContent>
+	</CardContent>
 </Card>
@@ -1,193 +0,0 @@
 import { pgTable, text, timestamp, numeric, boolean, primaryKey } from 'drizzle-orm/pg-core';
 import { relations } from 'drizzle-orm';
 import { createId } from '@paralleldrive/cuid2';
 import type { AdapterAccountType } from '@auth/core/adapters';
 export const users = pgTable('user', {
  id: text('id')
    .primaryKey()
    .$defaultFn(() => createId()),
  name: text('name'),
  email: text('email').unique(),
  emailVerified: timestamp('emailVerified', { mode: 'date' }),
  image: text('image'),
  password: text('password').notNull(),
  username: text('username').unique(),
  dashboardTheme: text('dashboard_theme').default('none'),
  dashboardColor: text('dashboard_color'),
  lastLogin: timestamp('last_login', { mode: 'date' }),
  createdAt: timestamp('created_at').defaultNow().notNull(),
  updatedAt: timestamp('updated_at').defaultNow().notNull()
 });
 export const accounts = pgTable(
  'account',
  {
    userId: text('userId')
      .notNull()
      .references(() => users.id, { onDelete: 'cascade' }),
    type: text('type').$type<AdapterAccountType>().notNull(),
    provider: text('provider').notNull(),
    providerAccountId: text('providerAccountId').notNull(),
    refresh_token: text('refresh_token'),
    access_token: text('access_token'),
    expires_at: numeric('expires_at'),
    token_type: text('token_type'),
    scope: text('scope'),
    id_token: text('id_token'),
    session_state: text('session_state')
  },
  (account) => ({
    compoundKey: primaryKey({
      columns: [account.provider, account.providerAccountId]
    })
  })
 );
 export const sessions = pgTable('session', {
  sessionToken: text('sessionToken').primaryKey(),
  userId: text('userId')
    .notNull()
    .references(() => users.id, { onDelete: 'cascade' }),
  expires: timestamp('expires', { mode: 'date' }).notNull()
 });
 export const verificationTokens = pgTable(
  'verificationToken',
  {
    identifier: text('identifier').notNull(),
    token: text('token').notNull(),
    expires: timestamp('expires', { mode: 'date' }).notNull()
  },
  (verificationToken) => ({
    compositePk: primaryKey({
      columns: [verificationToken.identifier, verificationToken.token]
    })
  })
 );
 export const wishlists = pgTable('wishlists', {
  id: text('id')
    .primaryKey()
    .$defaultFn(() => createId()),
  userId: text('user_id').references(() => users.id, { onDelete: 'set null' }),
  title: text('title').notNull(),
  description: text('description'),
  ownerToken: text('owner_token').notNull().unique(),
  publicToken: text('public_token').notNull().unique(),
  isFavorite: boolean('is_favorite').default(false).notNull(),
  color: text('color'),
  theme: text('theme').default('none'),
  endDate: timestamp('end_date', { mode: 'date' }),
  createdAt: timestamp('created_at').defaultNow().notNull(),
  updatedAt: timestamp('updated_at').defaultNow().notNull()
 });
 export const wishlistsRelations = relations(wishlists, ({ one, many }) => ({
  user: one(users, {
    fields: [wishlists.userId],
    references: [users.id]
  }),
  items: many(items),
  savedBy: many(savedWishlists)
 }));
 export const items = pgTable('items', {
  id: text('id')
    .primaryKey()
    .$defaultFn(() => createId()),
  wishlistId: text('wishlist_id')
    .notNull()
    .references(() => wishlists.id, { onDelete: 'cascade' }),
  title: text('title').notNull(),
  description: text('description'),
  link: text('link'),
  imageUrl: text('image_url'),
  price: numeric('price', { precision: 10, scale: 2 }),
  currency: text('currency').default('DKK'),
  color: text('color'),
  order: numeric('order').notNull().default('0'),
  isReserved: boolean('is_reserved').default(false).notNull(),
  createdAt: timestamp('created_at').defaultNow().notNull(),
  updatedAt: timestamp('updated_at').defaultNow().notNull()
 });
 export const itemsRelations = relations(items, ({ one, many }) => ({
  wishlist: one(wishlists, {
    fields: [items.wishlistId],
    references: [wishlists.id]
  }),
  reservations: many(reservations)
 }));
 export const reservations = pgTable('reservations', {
  id: text('id')
    .primaryKey()
    .$defaultFn(() => createId()),
  itemId: text('item_id')
    .notNull()
    .references(() => items.id, { onDelete: 'cascade' }),
  userId: text('user_id').references(() => users.id, { onDelete: 'set null' }),
  reserverName: text('reserver_name'),
  createdAt: timestamp('created_at').defaultNow().notNull()
 });
 export const reservationsRelations = relations(reservations, ({ one }) => ({
  item: one(items, {
    fields: [reservations.itemId],
    references: [items.id]
  }),
  user: one(users, {
    fields: [reservations.userId],
    references: [users.id]
  })
 }));
 export const savedWishlists = pgTable('saved_wishlists', {
  id: text('id')
    .primaryKey()
    .$defaultFn(() => createId()),
  userId: text('user_id')
    .notNull()
    .references(() => users.id, { onDelete: 'cascade' }),
  wishlistId: text('wishlist_id')
    .notNull()
    .references(() => wishlists.id, { onDelete: 'cascade' }),
  ownerToken: text('owner_token'), // Stores the owner token if user has edit access (claimed via edit link)
  isFavorite: boolean('is_favorite').default(false).notNull(),
  createdAt: timestamp('created_at').defaultNow().notNull()
 });
 export const savedWishlistsRelations = relations(savedWishlists, ({ one }) => ({
  user: one(users, {
    fields: [savedWishlists.userId],
    references: [users.id]
  }),
  wishlist: one(wishlists, {
    fields: [savedWishlists.wishlistId],
    references: [wishlists.id]
  })
 }));
 export const usersRelations = relations(users, ({ many }) => ({
  wishlists: many(wishlists),
  savedWishlists: many(savedWishlists),
  reservations: many(reservations)
 }));
 export type User = typeof users.$inferSelect;
 export type NewUser = typeof users.$inferInsert;
 export type Account = typeof accounts.$inferSelect;
 export type NewAccount = typeof accounts.$inferInsert;
 export type Session = typeof sessions.$inferSelect;
 export type NewSession = typeof sessions.$inferInsert;
 export type VerificationToken = typeof verificationTokens.$inferSelect;
 export type NewVerificationToken = typeof verificationTokens.$inferInsert;
 export type Wishlist = typeof wishlists.$inferSelect;
 export type NewWishlist = typeof wishlists.$inferInsert;
 export type Item = typeof items.$inferSelect;
 export type NewItem = typeof items.$inferInsert;
 export type Reservation = typeof reservations.$inferSelect;
 export type NewReservation = typeof reservations.$inferInsert;
 export type SavedWishlist = typeof savedWishlists.$inferSelect;
 export type NewSavedWishlist = typeof savedWishlists.$inferInsert;
@@ -2,166 +2,162 @@ import type { Translation } from './en';
 // Danish translations
 export const da: Translation = {
-  // Navigation
+	// Navigation
-  nav: {
+	nav: {
-    dashboard: 'Dashboard'
+		dashboard: 'Dashboard'
-  },
+	},
-  // Dashboard
+	// Dashboard
-  dashboard: {
+	dashboard: {
-    myWishlists: 'Mine Ønskelister',
+		myWishlists: 'Mine Ønskelister',
-    myWishlistsDescription: 'Ønskelister du ejer og administrerer',
+		myWishlistsDescription: 'Ønskelister du ejer og administrerer',
-    claimedWishlists: 'Ejede Ønskelister',
+		claimedWishlists: 'Ejede Ønskelister',
-    claimedWishlistsDescription: 'Ønskelister du har taget ejerskab af og kan redigere',
+		claimedWishlistsDescription: 'Ønskelister du har taget ejerskab af og kan redigere',
-    savedWishlists: 'Gemte Ønskelister',
+		savedWishlists: 'Gemte Ønskelister',
-    savedWishlistsDescription: 'Ønskelister du følger',
+		savedWishlistsDescription: 'Ønskelister du følger',
-    createNew: '+ Opret Ny',
+		createNew: '+ Opret Ny',
-    manage: 'Administrer',
+		manage: 'Administrer',
-    copyLink: 'Kopiér Link',
+		copyLink: 'Kopiér Link',
-    viewWishlist: 'Se Ønskeliste',
+		viewWishlist: 'Se Ønskeliste',
-    unsave: 'Fjern',
+		unsave: 'Fjern',
-    unclaim: 'Fjern Ejerskab',
+		unclaim: 'Fjern Ejerskab',
-    delete: 'Slet',
+		delete: 'Slet',
-    emptyWishlists: 'Du har ikke oprettet nogen ønskelister endnu.',
+		emptyWishlists: 'Du har ikke oprettet nogen ønskelister endnu.',
-    emptyWishlistsAction: 'Opret Din Første Ønskeliste',
+		emptyWishlistsAction: 'Opret Din Første Ønskeliste',
-    emptyClaimedWishlists: 'Du har ikke taget ejerskab af nogen ønskelister endnu.',
+		emptyClaimedWishlists: 'Du har ikke taget ejerskab af nogen ønskelister endnu.',
-    emptyClaimedWishlistsDescription:
+		emptyClaimedWishlistsDescription: 'Når nogen deler et redigeringslink med dig, kan du tage ejerskab af det for at administrere det fra dit dashboard.',
-      'Når nogen deler et redigeringslink med dig, kan du tage ejerskab af det for at administrere det fra dit dashboard.',
+		emptySavedWishlists: 'Du har ikke gemt nogen ønskelister endnu.',
-    emptySavedWishlists: 'Du har ikke gemt nogen ønskelister endnu.',
+		emptySavedWishlistsDescription: 'Når du ser en andens ønskeliste, kan du gemme den for nemt at finde den senere.',
-    emptySavedWishlistsDescription:
+		by: 'af',
-      'Når du ser en andens ønskeliste, kan du gemme den for nemt at finde den senere.',
+		ends: 'Slutter',
-    by: 'af',
+		welcomeBack: 'Velkommen tilbage',
-    ends: 'Slutter',
+		searchPlaceholder: 'Søg ønsker...'
-    welcomeBack: 'Velkommen tilbage',
+	},
    searchPlaceholder: 'Søg ønsker...'
  },
-  // Wishlist
+	// Wishlist
-  wishlist: {
+	wishlist: {
-    title: 'Ønskeliste',
+		title: 'Ønskeliste',
-    createTitle: 'Opret Din Ønskeliste',
+		createTitle: 'Opret Din Ønskeliste',
-    createDescription: 'Opret en ønskeliste og del den med venner og familie',
+		createDescription: 'Opret en ønskeliste og del den med venner og familie',
-    addWish: '+ Tilføj Ønske',
+		addWish: '+ Tilføj Ønske',
-    editWish: 'Rediger Ønske',
+		editWish: 'Rediger Ønske',
-    deleteWish: 'Slet Ønske',
+		deleteWish: 'Slet Ønske',
-    reserve: 'Reservér',
+		reserve: 'Reservér',
-    unreserve: 'Fjern Reservation',
+		unreserve: 'Fjern Reservation',
-    reserved: 'Reserveret',
+		reserved: 'Reserveret',
-    reservedBy: 'af',
+		reservedBy: 'af',
-    save: 'Gem',
+		save: 'Gem',
-    saveWishlist: 'Gem Ønskeliste',
+		saveWishlist: 'Gem Ønskeliste',
-    unsaveWishlist: 'Fjern',
+		unsaveWishlist: 'Fjern',
-    share: 'Del',
+		share: 'Del',
-    edit: 'Rediger',
+		edit: 'Rediger',
-    back: 'Tilbage',
+		back: 'Tilbage',
-    noWishes: 'Ingen ønsker endnu',
+		noWishes: 'Ingen ønsker endnu',
-    addFirstWish: 'Tilføj dit første ønske',
+		addFirstWish: 'Tilføj dit første ønske',
-    emptyWishes: 'Denne ønskeliste har ingen ønsker endnu.',
+		emptyWishes: 'Denne ønskeliste har ingen ønsker endnu.',
-    viewProduct: 'Se Produkt',
+		viewProduct: 'Se Produkt',
-    claimWishlist: 'Tag Ejerskab Af Ønskeliste',
+		claimWishlist: 'Tag Ejerskab Af Ønskeliste',
-    unclaimWishlist: 'Fjern Ejerskab Af Ønskeliste',
+		unclaimWishlist: 'Fjern Ejerskab Af Ønskeliste',
-    youOwnThis: 'Du Ejer Denne Ønskeliste',
+		youOwnThis: 'Du Ejer Denne Ønskeliste',
-    youClaimedThis: 'Du Har Taget Ejerskab Af Denne Ønskeliste',
+		youClaimedThis: 'Du Har Taget Ejerskab Af Denne Ønskeliste',
-    alreadyInDashboard: 'Denne ønskeliste er allerede it dit dashboard.',
+		alreadyInDashboard: 'Denne ønskeliste er allerede it dit dashboard.',
-    alreadyClaimed: 'Denne ønskeliste er allerede i dit dashboard som en ejet ønskeliste.',
+		alreadyClaimed: 'Denne ønskeliste er allerede i dit dashboard som en ejet ønskeliste.', 
-    claimDescription: 'Tag ejerskab af denne ønskeliste for at tilføje den til dit dashboard',
+		claimDescription: 'Tag ejerskab af denne ønskeliste for at tilføje den til dit dashboard',
-    claimedDescription:
+		claimedDescription: 'Du har taget ejerskab af denne ønskeliste og kan tilgå den fra dit dashboard',
-      'Du har taget ejerskab af denne ønskeliste og kan tilgå den fra dit dashboard',
+		deleteWishlist: 'Slet Ønskeliste',
-    deleteWishlist: 'Slet Ønskeliste',
+		deleteConfirm: 'Er du sikker på, at du vil slette denne ønskeliste? Denne handling kan ikke fortrydes.',
-    deleteConfirm:
+		lockDeletion: 'Lås Sletning',
-      'Er du sikker på, at du vil slette denne ønskeliste? Denne handling kan ikke fortrydes.',
+		unlockDeletion: 'Lås Op for Sletning',
-    lockDeletion: 'Lås Sletning',
+		shareViewOnly: 'Del med venner (afslører reservationer)',
-    unlockDeletion: 'Lås Op for Sletning',
+		shareEditLink: 'Dit redigeringslink (giver redigeringsadgang)',
-    shareViewOnly: 'Del med venner (afslører reservationer)',
+		copy: 'Kopiér',
-    shareEditLink: 'Dit redigeringslink (giver redigeringsadgang)',
+		copied: 'Kopieret!',
-    copy: 'Kopiér',
+		signInToSave: 'Log ind for at gemme',
-    copied: 'Kopieret!',
+		saveThisWishlist: 'Gem Denne Ønskeliste',
-    signInToSave: 'Log ind for at gemme',
+		saveDescription: 'Gem denne ønskeliste for nemt at finde den senere i dit dashboard',
-    saveThisWishlist: 'Gem Denne Ønskeliste',
+		creating: 'Opretter...',
-    saveDescription: 'Gem denne ønskeliste for nemt at finde den senere i dit dashboard',
+		createWishlist: 'Opret Ønskeliste'
-    creating: 'Opretter...',
+	},
    createWishlist: 'Opret Ønskeliste'
  },
-  // Forms
+	// Forms
-  form: {
+	form: {
-    title: 'Titel',
+		title: 'Titel',
-    wishlistTitle: 'Ønskeliste Titel',
+		wishlistTitle: 'Ønskeliste Titel',
-    wishlistTitlePlaceholder: 'Min Fødselsdagsønskeliste',
+		wishlistTitlePlaceholder: 'Min Fødselsdagsønskeliste',
-    description: 'Beskrivelse',
+		description: 'Beskrivelse',
-    descriptionPlaceholder: 'Tilføj kontekst til din ønskeliset',
+		descriptionPlaceholder: 'Tilføj kontekst til din ønskeliset',
-    descriptionOptional: 'Beskrivelse (valgfri)',
+		descriptionOptional: 'Beskrivelse (valgfri)',
-    noDescription: 'Ingen beskrivelse',
+		noDescription: 'Ingen beskrivelse',
-    price: 'Pris',
+		price: 'Pris',
-    currency: 'Valuta',
+		currency: 'Valuta',
-    url: 'URL',
+		url: 'URL',
-    link: 'Link (URL)',
+		link: 'Link (URL)',
-    image: 'Billede',
+		image: 'Billede',
-    imageUrl: 'Billede URL',
+		imageUrl: 'Billede URL',
-    submit: 'Indsend',
+		submit: 'Indsend',
-    cancel: 'Annuller',
+		cancel: 'Annuller',
-    save: 'Gem',
+		save: 'Gem',
-    saveChanges: 'Gem Ændringer',
+		saveChanges: 'Gem Ændringer',
-    delete: 'Slet',
+		delete: 'Slet',
-    email: 'E-mail',
+		email: 'E-mail',
-    password: 'Adgangskode',
+		password: 'Adgangskode',
-    confirmPassword: 'Bekræft Adgangskode',
+		confirmPassword: 'Bekræft Adgangskode',
-    name: 'Navn',
+		name: 'Navn',
-    username: 'Brugernavn',
+		username: 'Brugernavn',
-    wishName: 'Ønskenavn',
+		wishName: 'Ønskenavn',
-    yourName: 'Dit navn',
+		yourName: 'Dit navn',
-    optional: 'valgfri',
+		optional: 'valgfri',
-    required: 'påkrævet',
+		required: 'påkrævet',
-    color: 'Farve',
+		color: 'Farve',
-    wishlistColor: 'Ønskeliste Farve (valgfri)',
+		wishlistColor: 'Ønskeliste Farve (valgfri)',
-    cardColor: 'Kortfarve (valgfri)',
+		cardColor: 'Kortfarve (valgfri)',
-    endDate: 'Slutdato',
+		endDate: 'Slutdato',
-    endDateOptional: 'Slutdato (valgfri)',
+		endDateOptional: 'Slutdato (valgfri)',
-    position: 'Position i Listen',
+		position: 'Position i Listen',
-    addNewWish: 'Tilføj Nyt Ønske'
+		addNewWish: 'Tilføj Nyt Ønske'
-  },
+	},
-  // Auth
+	// Auth
-  auth: {
+	auth: {
-    signIn: 'Log Ind',
+		signIn: 'Log Ind',
-    signUp: 'Tilmeld',
+		signUp: 'Tilmeld',
-    signOut: 'Log Ud',
+		signOut: 'Log Ud',
-    signingIn: 'Logger ind...',
+		signingIn: 'Logger ind...',
-    welcome: 'Velkommen',
+		welcome: 'Velkommen',
-    welcomeBack: 'Velkommen Tilbage',
+		welcomeBack: 'Velkommen Tilbage',
-    signInPrompt: 'Log ind på din konto',
+		signInPrompt: 'Log ind på din konto',
-    signUpPrompt: 'Tilmeld dig for at administrere dine ønskelister',
+		signUpPrompt: 'Tilmeld dig for at administrere dine ønskelister',
-    createAccount: 'Opret en Konto',
+		createAccount: 'Opret en Konto',
-    alreadyHaveAccount: 'Har du allerede en konto?',
+		alreadyHaveAccount: 'Har du allerede en konto?',
-    dontHaveAccount: 'Har du ikke en konto?',
+		dontHaveAccount: 'Har du ikke en konto?',
-    continueWith: 'Eller fortsæt med'
+		continueWith: 'Eller fortsæt med'
-  },
+	},
-  // Common
+	// Common
-  common: {
+	common: {
-    loading: 'Indlæser...',
+		loading: 'Indlæser...',
-    error: 'Fejl',
+		error: 'Fejl',
-    success: 'Succes',
+		success: 'Succes',
-    confirm: 'Bekræft',
+		confirm: 'Bekræft',
-    close: 'Luk',
+		close: 'Luk',
-    or: 'eller',
+		or: 'eller',
-    and: 'og'
+		and: 'og'
-  },
+	},
-  // Reservation
+	// Reservation
-  reservation: {
+	reservation: {
-    reserveThis: 'Reservér Denne',
+		reserveThis: 'Reservér Denne',
-    cancelReservation: 'Annuller Reservation',
+		cancelReservation: 'Annuller Reservation',
-    yourNameOptional: 'Dit navn (valgfri)',
+		yourNameOptional: 'Dit navn (valgfri)',
-    confirm: 'Bekræft',
+		confirm: 'Bekræft',
-    cancel: 'Annuller'
+		cancel: 'Annuller'
-  },
+	},
-  // Date formatting
+	// Date formatting
-  date: {
+	date: {
-    format: {
+		format: {
-      short: 'da-DK',
+			short: 'da-DK',
-      long: 'da-DK'
+			long: 'da-DK'
-    }
+		}
-  }
+	}
 };
@@ -1,164 +1,162 @@
 export const en = {
-  // Navigation
+	// Navigation
-  nav: {
+	nav: {
-    dashboard: 'Dashboard'
+		dashboard: 'Dashboard'
-  },
+	},
-  // Dashboard
+	// Dashboard
-  dashboard: {
+	dashboard: {
-    myWishlists: 'My Wishlists',
+		myWishlists: 'My Wishlists',
-    myWishlistsDescription: 'Wishlists you own and manage',
+		myWishlistsDescription: 'Wishlists you own and manage',
-    claimedWishlists: 'Claimed Wishlists',
+		claimedWishlists: 'Claimed Wishlists',
-    claimedWishlistsDescription: 'Wishlists you have claimed and can edit',
+		claimedWishlistsDescription: 'Wishlists you have claimed and can edit',
-    savedWishlists: 'Saved Wishlists',
+		savedWishlists: 'Saved Wishlists',
-    savedWishlistsDescription: "Wishlists you're following",
+		savedWishlistsDescription: "Wishlists you're following",
-    createNew: '+ Create New',
+		createNew: '+ Create New',
-    manage: 'Manage',
+		manage: 'Manage',
-    copyLink: 'Copy Link',
+		copyLink: 'Copy Link',
-    viewWishlist: 'View Wishlist',
+		viewWishlist: 'View Wishlist',
-    unsave: 'Unsave',
+		unsave: 'Unsave',
-    unclaim: 'Unclaim',
+		unclaim: 'Unclaim',
-    delete: 'Delete',
+		delete: 'Delete',
-    emptyWishlists: "You haven't created any wishlists yet.",
+		emptyWishlists: "You haven't created any wishlists yet.",
-    emptyWishlistsAction: 'Create Your First Wishlist',
+		emptyWishlistsAction: 'Create Your First Wishlist',
-    emptyClaimedWishlists: "You haven't claimed any wishlists yet.",
+		emptyClaimedWishlists: "You haven't claimed any wishlists yet.",
-    emptyClaimedWishlistsDescription:
+		emptyClaimedWishlistsDescription: "When someone shares an edit link with you, you can claim it to manage it from your dashboard.",
-      'When someone shares an edit link with you, you can claim it to manage it from your dashboard.',
+		emptySavedWishlists: "You haven't saved any wishlists yet.",
-    emptySavedWishlists: "You haven't saved any wishlists yet.",
+		emptySavedWishlistsDescription: "When viewing someone's wishlist, you can save it to easily find it later.",
-    emptySavedWishlistsDescription:
+		by: 'by',
-      "When viewing someone's wishlist, you can save it to easily find it later.",
+		ends: 'Ends',
-    by: 'by',
+		welcomeBack: 'Welcome back',
-    ends: 'Ends',
+		searchPlaceholder: 'Search wishes...'
-    welcomeBack: 'Welcome back',
+	},
    searchPlaceholder: 'Search wishes...'
  },
-  // Wishlist
+	// Wishlist
-  wishlist: {
+	wishlist: {
-    title: 'Wishlist',
+		title: 'Wishlist',
-    createTitle: 'Create Your Wishlist',
+		createTitle: 'Create Your Wishlist',
-    createDescription: 'Create a wishlist and share it with friends and family',
+		createDescription: 'Create a wishlist and share it with friends and family',
-    addWish: '+ Add Wish',
+		addWish: '+ Add Wish',
-    editWish: 'Edit Wish',
+		editWish: 'Edit Wish',
-    deleteWish: 'Delete Wish',
+		deleteWish: 'Delete Wish',
-    reserve: 'Reserve',
+		reserve: 'Reserve',
-    unreserve: 'Unreserve',
+		unreserve: 'Unreserve',
-    reserved: 'Reserved',
+		reserved: 'Reserved',
-    reservedBy: 'by',
+		reservedBy: 'by',
-    save: 'Save',
+		save: 'Save',
-    saveWishlist: 'Save Wishlist',
+		saveWishlist: 'Save Wishlist',
-    unsaveWishlist: 'Unsave',
+		unsaveWishlist: 'Unsave',
-    share: 'Share',
+		share: 'Share',
-    edit: 'Edit',
+		edit: 'Edit',
-    back: 'Back',
+		back: 'Back',
-    noWishes: 'No wishes yet',
+		noWishes: 'No wishes yet',
-    addFirstWish: 'Add your first wish',
+		addFirstWish: 'Add your first wish',
-    emptyWishes: "This wishlist doesn't have any wishes yet.",
+		emptyWishes: "This wishlist doesn't have any wishes yet.",
-    viewProduct: 'View Product',
+		viewProduct: 'View Product',
-    claimWishlist: 'Claim Wishlist',
+		claimWishlist: 'Claim Wishlist',
-    unclaimWishlist: 'Unclaim Wishlist',
+		unclaimWishlist: 'Unclaim Wishlist',
-    youOwnThis: 'You Own This Wishlist',
+		youOwnThis: 'You Own This Wishlist',
-    youClaimedThis: 'You Have Claimed This Wishlist',
+		youClaimedThis: 'You Have Claimed This Wishlist',
-    alreadyInDashboard: 'This wishlist is already in your dashboard as the owner.',
+		alreadyInDashboard: 'This wishlist is already in your dashboard as the owner.',
-    alreadyClaimed: 'This wishlist is already in your dashboard as a claimed wishlist.',
+		alreadyClaimed: 'This wishlist is already in your dashboard as a claimed wishlist.', 
-    claimDescription: 'Claim this wishlist to add it to your dashboard',
+		claimDescription: 'Claim this wishlist to add it to your dashboard',
-    claimedDescription: 'You have claimed this wishlist and can access it from your dashboard',
+		claimedDescription: 'You have claimed this wishlist and can access it from your dashboard',
-    deleteWishlist: 'Delete Wishlist',
+		deleteWishlist: 'Delete Wishlist',
-    deleteConfirm: 'Are you sure you want to delete this wishlist? This action cannot be undone.',
+		deleteConfirm: 'Are you sure you want to delete this wishlist? This action cannot be undone.',
-    lockDeletion: 'Lock Deletion',
+		lockDeletion: 'Lock Deletion',
-    unlockDeletion: 'Unlock for Deletion',
+		unlockDeletion: 'Unlock for Deletion',
-    shareViewOnly: 'Share with friends (view only)',
+		shareViewOnly: 'Share with friends (view only)',
-    shareEditLink: 'Your edit link (keep this private!)',
+		shareEditLink: 'Your edit link (keep this private!)',
-    copy: 'Copy',
+		copy: 'Copy',
-    copied: 'Copied!',
+		copied: 'Copied!',
-    signInToSave: 'Sign in to Save',
+		signInToSave: 'Sign in to Save',
-    saveThisWishlist: 'Save This Wishlist',
+		saveThisWishlist: 'Save This Wishlist',
-    saveDescription: 'Save this wishlist to easily find it later in your dashboard',
+		saveDescription: 'Save this wishlist to easily find it later in your dashboard',
-    creating: 'Creating...',
+		creating: 'Creating...',
-    createWishlist: 'Create Wishlist'
+		createWishlist: 'Create Wishlist'
-  },
+	},
-  // Forms
+	// Forms
-  form: {
+	form: {
-    title: 'Title',
+		title: 'Title',
-    wishlistTitle: 'Wishlist Title',
+		wishlistTitle: 'Wishlist Title',
-    wishlistTitlePlaceholder: 'My Birthday Wishlist',
+		wishlistTitlePlaceholder: 'My Birthday Wishlist',
-    description: 'Description',
+		description: 'Description',
-    descriptionPlaceholder: 'Add some context for your wishlist...',
+		descriptionPlaceholder: 'Add some context for your wishlist...',
-    descriptionOptional: 'Description (optional)',
+		descriptionOptional: 'Description (optional)',
-    noDescription: 'No description',
+		noDescription: 'No description',
-    price: 'Price',
+		price: 'Price',
-    currency: 'Currency',
+		currency: 'Currency',
-    url: 'URL',
+		url: 'URL',
-    link: 'Link (URL)',
+		link: 'Link (URL)',
-    image: 'Image',
+		image: 'Image',
-    imageUrl: 'Image URL',
+		imageUrl: 'Image URL',
-    submit: 'Submit',
+		submit: 'Submit',
-    cancel: 'Cancel',
+		cancel: 'Cancel',
-    save: 'Save',
+		save: 'Save',
-    saveChanges: 'Save Changes',
+		saveChanges: 'Save Changes',
-    delete: 'Delete',
+		delete: 'Delete',
-    email: 'Email',
+		email: 'Email',
-    password: 'Password',
+		password: 'Password',
-    confirmPassword: 'Confirm Password',
+		confirmPassword: 'Confirm Password',
-    name: 'Name',
+		name: 'Name',
-    username: 'Username',
+		username: 'Username',
-    wishName: 'Wish Name',
+		wishName: 'Wish Name',
-    yourName: 'Your name',
+		yourName: 'Your name',
-    optional: 'optional',
+		optional: 'optional',
-    required: 'required',
+		required: 'required',
-    color: 'Color',
+		color: 'Color',
-    wishlistColor: 'Wishlist Color (optional)',
+		wishlistColor: 'Wishlist Color (optional)',
-    cardColor: 'Card Color (optional)',
+		cardColor: 'Card Color (optional)',
-    endDate: 'End Date',
+		endDate: 'End Date',
-    endDateOptional: 'End Date (optional)',
+		endDateOptional: 'End Date (optional)',
-    position: 'Position in List',
+		position: 'Position in List',
-    addNewWish: 'Add New Wish'
+		addNewWish: 'Add New Wish'
-  },
+	},
-  // Auth
+	// Auth
-  auth: {
+	auth: {
-    signIn: 'Sign In',
+		signIn: 'Sign In',
-    signUp: 'Sign Up',
+		signUp: 'Sign Up',
-    signOut: 'Sign Out',
+		signOut: 'Sign Out',
-    signingIn: 'Signing in...',
+		signingIn: 'Signing in...',
-    welcome: 'Welcome',
+		welcome: 'Welcome',
-    welcomeBack: 'Welcome Back',
+		welcomeBack: 'Welcome Back',
-    signInPrompt: 'Sign in to your account',
+		signInPrompt: 'Sign in to your account',
-    signUpPrompt: 'Sign up to manage your wishlists',
+		signUpPrompt: 'Sign up to manage your wishlists',
-    createAccount: 'Create an Account',
+		createAccount: 'Create an Account',
-    alreadyHaveAccount: 'Already have an account?',
+		alreadyHaveAccount: 'Already have an account?',
-    dontHaveAccount: "Don't have an account?",
+		dontHaveAccount: "Don't have an account?",
-    continueWith: 'Or continue with'
+		continueWith: 'Or continue with'
-  },
+	},
-  // Common
+	// Common
-  common: {
+	common: {
-    loading: 'Loading...',
+		loading: 'Loading...',
-    error: 'Error',
+		error: 'Error',
-    success: 'Success',
+		success: 'Success',
-    confirm: 'Confirm',
+		confirm: 'Confirm',
-    close: 'Close',
+		close: 'Close',
-    or: 'or',
+		or: 'or',
-    and: 'and'
+		and: 'and'
-  },
+	},
-  // Reservation
+	// Reservation
-  reservation: {
+	reservation: {
-    reserveThis: 'Reserve This',
+		reserveThis: 'Reserve This',
-    cancelReservation: 'Cancel Reservation',
+		cancelReservation: 'Cancel Reservation',
-    yourNameOptional: 'Your name (optional)',
+		yourNameOptional: 'Your name (optional)',
-    confirm: 'Confirm',
+		confirm: 'Confirm',
-    cancel: 'Cancel'
+		cancel: 'Cancel'
-  },
+	},
-  // Date formatting
+	// Date formatting
-  date: {
+	date: {
-    format: {
+		format: {
-      short: 'en-US',
+			short: 'en-US',
-      long: 'en-US'
+			long: 'en-US'
-    }
+		}
-  }
+	}
 };
 export type Translation = typeof en;
@@ -3,13 +3,13 @@ import { da } from './da';
 import type { Translation } from './en';
 export const translations: Record<string, Translation> = {
-  en,
+	en,
-  da
+	da
 };
 export const languages = [
-  { code: 'en', name: 'English' },
+	{ code: 'en', name: 'English' },
-  { code: 'da', name: 'Dansk' }
+	{ code: 'da', name: 'Dansk' }
 ] as const;
 export type LanguageCode = 'en' | 'da';
@@ -0,0 +1 @@
@@ -1,7 +1,7 @@
 import { drizzle } from 'drizzle-orm/postgres-js';
 import postgres from 'postgres';
 import { env } from '$env/dynamic/private';
-import * as schema from '$lib/db/schema';
+import * as schema from './schema';
 const client = postgres(env.DATABASE_URL!);
 export const db = drizzle(client, { schema });
@@ -0,0 +1,179 @@
 import { pgTable, text, timestamp, numeric, boolean, primaryKey } from 'drizzle-orm/pg-core';
 import { relations } from 'drizzle-orm';
 import { createId } from '@paralleldrive/cuid2';
 import type { AdapterAccountType } from '@auth/core/adapters';
 export const users = pgTable('user', {
 	id: text('id')
 		.primaryKey()
 		.$defaultFn(() => createId()),
 	name: text('name'),
 	email: text('email').unique(),
 	emailVerified: timestamp('emailVerified', { mode: 'date' }),
 	image: text('image'),
 	password: text('password'),
 	username: text('username').unique(),
 	dashboardTheme: text('dashboard_theme').default('none'),
 	dashboardColor: text('dashboard_color'),
 	lastLogin: timestamp('last_login', { mode: 'date' }),
 	createdAt: timestamp('created_at').defaultNow().notNull(),
 	updatedAt: timestamp('updated_at').defaultNow().notNull()
 });
 export const accounts = pgTable(
 	'account',
 	{
 		userId: text('userId')
 			.notNull()
 			.references(() => users.id, { onDelete: 'cascade' }),
 		type: text('type').$type<AdapterAccountType>().notNull(),
 		provider: text('provider').notNull(),
 		providerAccountId: text('providerAccountId').notNull(),
 		refresh_token: text('refresh_token'),
 		access_token: text('access_token'),
 		expires_at: numeric('expires_at'),
 		token_type: text('token_type'),
 		scope: text('scope'),
 		id_token: text('id_token'),
 		session_state: text('session_state')
 	},
 	(account) => ({
 		compoundKey: primaryKey({
 			columns: [account.provider, account.providerAccountId]
 		})
 	})
 );
 export const sessions = pgTable('session', {
 	sessionToken: text('sessionToken').primaryKey(),
 	userId: text('userId')
 		.notNull()
 		.references(() => users.id, { onDelete: 'cascade' }),
 	expires: timestamp('expires', { mode: 'date' }).notNull()
 });
 export const verificationTokens = pgTable(
 	'verificationToken',
 	{
 		identifier: text('identifier').notNull(),
 		token: text('token').notNull(),
 		expires: timestamp('expires', { mode: 'date' }).notNull()
 	},
 	(verificationToken) => ({
 		compositePk: primaryKey({
 			columns: [verificationToken.identifier, verificationToken.token]
 		})
 	})
 );
 export const wishlists = pgTable('wishlists', {
 	id: text('id').primaryKey().$defaultFn(() => createId()),
 	userId: text('user_id').references(() => users.id, { onDelete: 'set null' }),
 	title: text('title').notNull(),
 	description: text('description'),
 	ownerToken: text('owner_token').notNull().unique(),
 	publicToken: text('public_token').notNull().unique(),
 	isFavorite: boolean('is_favorite').default(false).notNull(),
 	color: text('color'),
 	theme: text('theme').default('none'),
 	endDate: timestamp('end_date', { mode: 'date' }),
 	createdAt: timestamp('created_at').defaultNow().notNull(),
 	updatedAt: timestamp('updated_at').defaultNow().notNull()
 });
 export const wishlistsRelations = relations(wishlists, ({ one, many }) => ({
 	user: one(users, {
 		fields: [wishlists.userId],
 		references: [users.id]
 	}),
 	items: many(items),
 	savedBy: many(savedWishlists)
 }));
 export const items = pgTable('items', {
 	id: text('id').primaryKey().$defaultFn(() => createId()),
 	wishlistId: text('wishlist_id')
 		.notNull()
 		.references(() => wishlists.id, { onDelete: 'cascade' }),
 	title: text('title').notNull(),
 	description: text('description'),
 	link: text('link'),
 	imageUrl: text('image_url'),
 	price: numeric('price', { precision: 10, scale: 2 }),
 	currency: text('currency').default('DKK'),
 	color: text('color'),
 	order: numeric('order').notNull().default('0'),
 	isReserved: boolean('is_reserved').default(false).notNull(),
 	createdAt: timestamp('created_at').defaultNow().notNull(),
 	updatedAt: timestamp('updated_at').defaultNow().notNull()
 });
 export const itemsRelations = relations(items, ({ one, many }) => ({
 	wishlist: one(wishlists, {
 		fields: [items.wishlistId],
 		references: [wishlists.id]
 	}),
 	reservations: many(reservations)
 }));
 export const reservations = pgTable('reservations', {
 	id: text('id').primaryKey().$defaultFn(() => createId()),
 	itemId: text('item_id')
 		.notNull()
 		.references(() => items.id, { onDelete: 'cascade' }),
 	userId: text('user_id').references(() => users.id, { onDelete: 'set null' }),
 	reserverName: text('reserver_name'),
 	createdAt: timestamp('created_at').defaultNow().notNull()
 });
 export const reservationsRelations = relations(reservations, ({ one }) => ({
 	item: one(items, {
 		fields: [reservations.itemId],
 		references: [items.id]
 	}),
 	user: one(users, {
 		fields: [reservations.userId],
 		references: [users.id]
 	})
 }));
 export const savedWishlists = pgTable('saved_wishlists', {
 	id: text('id').primaryKey().$defaultFn(() => createId()),
 	userId: text('user_id')
 		.notNull()
 		.references(() => users.id, { onDelete: 'cascade' }),
 	wishlistId: text('wishlist_id')
 		.notNull()
 		.references(() => wishlists.id, { onDelete: 'cascade' }),
 	ownerToken: text('owner_token'), // Stores the owner token if user has edit access (claimed via edit link)
 	isFavorite: boolean('is_favorite').default(false).notNull(),
 	createdAt: timestamp('created_at').defaultNow().notNull()
 });
 export const savedWishlistsRelations = relations(savedWishlists, ({ one }) => ({
 	user: one(users, {
 		fields: [savedWishlists.userId],
 		references: [users.id]
 	}),
 	wishlist: one(wishlists, {
 		fields: [savedWishlists.wishlistId],
 		references: [wishlists.id]
 	})
 }));
 export const usersRelations = relations(users, ({ many }) => ({
 	wishlists: many(wishlists),
 	savedWishlists: many(savedWishlists),
 	reservations: many(reservations)
 }));
 export type User = typeof users.$inferSelect;
 export type NewUser = typeof users.$inferInsert;
 export type Wishlist = typeof wishlists.$inferSelect;
 export type NewWishlist = typeof wishlists.$inferInsert;
 export type Item = typeof items.$inferSelect;
 export type NewItem = typeof items.$inferInsert;
 export type Reservation = typeof reservations.$inferSelect;
 export type NewReservation = typeof reservations.$inferInsert;
 export type SavedWishlist = typeof savedWishlists.$inferSelect;
 export type NewSavedWishlist = typeof savedWishlists.$inferInsert;
@@ -1,131 +0,0 @@
 export function sanitizeString(
  input: string | null | undefined,
  maxLength: number = 1000
 ): string | null {
  if (input === null || input === undefined) {
    return null;
  }
  const trimmed = input.trim();
  if (trimmed.length > maxLength) {
    throw new Error(`Input exceeds maximum length of ${maxLength}`);
  }
  return trimmed;
 }
 export function sanitizeUrl(url: string | null | undefined): string | null {
  if (!url) {
    return null;
  }
  return url.trim();
 }
 export function sanitizeText(
  input: string | null | undefined,
  maxLength: number = 10000
 ): string | null {
  if (input === null || input === undefined) {
    return null;
  }
  const trimmed = input.trim();
  if (trimmed.length > maxLength) {
    throw new Error(`Text exceeds maximum length of ${maxLength}`);
  }
  return trimmed;
 }
 export function sanitizePrice(price: string | null | undefined): number | null {
  if (!price) {
    return null;
  }
  const parsed = parseFloat(price.trim());
  if (isNaN(parsed)) {
    throw new Error('Invalid price format');
  }
  if (parsed < 0) {
    throw new Error('Price cannot be negative');
  }
  return parsed;
 }
 export function sanitizeColor(color: string | null | undefined): string | null {
  if (!color) {
    return null;
  }
  return color.trim();
 }
 export function sanitizeCurrency(currency: string | null | undefined): string {
  if (!currency) {
    return 'DKK';
  }
  return currency.trim().toUpperCase();
 }
 export function sanitizeUsername(username: string): string {
  const trimmed = username.trim().toLowerCase();
  if (trimmed.length < 3 || trimmed.length > 50) {
    throw new Error('Username must be between 3 and 50 characters');
  }
  return trimmed;
 }
 export function sanitizeId(id: string | null | undefined): string {
  if (!id) {
    throw new Error('ID is required');
  }
  const trimmed = id.trim();
  if (trimmed.length === 0 || trimmed.length > 100) {
    throw new Error('Invalid ID');
  }
  return trimmed;
 }
 export function sanitizeToken(token: string | null | undefined): string {
  if (!token) {
    throw new Error('Token is required');
  }
  const trimmed = token.trim();
  if (trimmed.length === 0 || trimmed.length > 100) {
    throw new Error('Invalid token');
  }
  return trimmed;
 }
 // Zod schemas for type-safe form validation
 import { z } from 'zod';
 export const currencySchema = z.enum(['DKK', 'EUR', 'USD', 'SEK', 'NOK', 'GBP']);
 export const itemSchema = z.object({
  title: z.string().min(1, 'Title is required').max(255),
  description: z.string().max(2000).optional().nullable(),
  link: z.string().url('Invalid URL').optional().nullable(),
  imageUrl: z.string().url('Invalid image URL').optional().nullable(),
  price: z.coerce.number().nonnegative().optional().nullable(),
  currency: currencySchema.default('DKK'),
  color: z.string().optional().nullable(),
  order: z.coerce.number().int().nonnegative().optional()
 });
 export const updateItemSchema = itemSchema.extend({
  id: z.string().min(1, 'Item ID is required')
 });
 export const wishlistSchema = z.object({
  title: z.string().min(1, 'Title is required').max(255),
  description: z.string().max(2000).optional().nullable(),
  color: z.string().optional().nullable(),
  theme: z.string().optional().nullable().transform((val) => val || 'none'),
  endDate: z.coerce.date().optional().nullable()
 });
 export const reorderSchema = z.array(
  z.object({
    id: z.string(),
    order: z.number().int().nonnegative()
  })
 );
 export type ItemFormData = z.infer<typeof itemSchema>;
 export type UpdateItemFormData = z.infer<typeof updateItemSchema>;
 export type WishlistFormData = z.infer<typeof wishlistSchema>;
@@ -4,60 +4,60 @@ import type { Translation } from '$lib/i18n/translations/en';
 const LANGUAGE_KEY = 'preferred-language';
 function getStoredLanguage(): LanguageCode {
-  if (typeof window === 'undefined') return 'en';
+	if (typeof window === 'undefined') return 'en';
-  const stored = localStorage.getItem(LANGUAGE_KEY);
+	const stored = localStorage.getItem(LANGUAGE_KEY);
-  if (stored && (stored === 'en' || stored === 'da')) {
+	if (stored && (stored === 'en' || stored === 'da')) {
-    return stored as LanguageCode;
+		return stored as LanguageCode;
-  }
+	}
-  // Try to detect from browser
+	// Try to detect from browser
-  const browserLang = navigator.language.toLowerCase();
+	const browserLang = navigator.language.toLowerCase();
-  if (browserLang.startsWith('da')) {
+	if (browserLang.startsWith('da')) {
-    return 'da';
+		return 'da';
-  }
+	}
-  return 'en';
+	return 'en';
 }
 class LanguageStore {
-  private _current = $state<LanguageCode>(getStoredLanguage());
+	private _current = $state<LanguageCode>(getStoredLanguage());
-  get current(): LanguageCode {
+	get current(): LanguageCode {
-    return this._current;
+		return this._current;
-  }
+	}
-  set current(value: LanguageCode) {
+	set current(value: LanguageCode) {
-    this._current = value;
+		this._current = value;
-    if (typeof window !== 'undefined') {
+		if (typeof window !== 'undefined') {
-      localStorage.setItem(LANGUAGE_KEY, value);
+			localStorage.setItem(LANGUAGE_KEY, value);
-    }
+		}
-  }
+	}
-  get t(): Translation {
+	get t(): Translation {
-    return translations[this._current];
+		return translations[this._current];
-  }
+	}
-  setLanguage(lang: LanguageCode) {
+	setLanguage(lang: LanguageCode) {
-    this.current = lang;
+		this.current = lang;
-  }
+	}
 }
 export const languageStore = new LanguageStore();
 // Helper function to get nested translation value
 export function t(path: string): string {
-  const keys = path.split('.');
+	const keys = path.split('.');
-  let value: unknown = languageStore.t;
+	let value: any = languageStore.t;
-  for (const key of keys) {
+	for (const key of keys) {
-    if (value && typeof value === 'object' && key in value) {
+		if (value && typeof value === 'object' && key in value) {
-      value = value[key];
+			value = value[key];
-    } else {
+		} else {
-      console.warn(`Translation key not found: ${path}`);
+			console.warn(`Translation key not found: ${path}`);
-      return path;
+			return path;
-    }
+		}
-  }
+	}
-  return typeof value === 'string' ? value : path;
+	return typeof value === 'string' ? value : path;
 }
@@ -4,67 +4,66 @@ type Theme = 'light' | 'dark' | 'system';
 type ResolvedTheme = 'light' | 'dark';
 class ThemeStore {
-  current = $state<Theme>('system');
+	current = $state<Theme>('system');
-  resolved = $state<ResolvedTheme>('light');
+	resolved = $state<ResolvedTheme>('light');
-  constructor() {
+	constructor() {
-    if (browser) {
+		if (browser) {
-      const stored = localStorage.getItem('theme') as Theme | null;
+			const stored = localStorage.getItem('theme') as Theme | null;
-      this.current = stored || 'system';
+			this.current = stored || 'system';
-      this.applyTheme();
+			this.applyTheme();
-      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+			const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-      mediaQuery.addEventListener('change', () => {
+			mediaQuery.addEventListener('change', () => {
-        if (this.current === 'system') {
+				if (this.current === 'system') {
-          this.applyTheme();
+					this.applyTheme();
-        }
+				}
-      });
+			});
-    }
+		}
-  }
+	}
-  private applyTheme() {
+	private applyTheme() {
-    if (!browser) return;
+		if (!browser) return;
-    const isDark =
+		const isDark = this.current === 'dark' ||
-      this.current === 'dark' ||
+			(this.current === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
      (this.current === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-    this.resolved = isDark ? 'dark' : 'light';
+		this.resolved = isDark ? 'dark' : 'light';
-    if (isDark) {
+		if (isDark) {
-      document.documentElement.classList.add('dark');
+			document.documentElement.classList.add('dark');
-    } else {
+		} else {
-      document.documentElement.classList.remove('dark');
+			document.documentElement.classList.remove('dark');
-    }
+		}
-  }
+	}
-  getResolvedTheme(): ResolvedTheme {
+	getResolvedTheme(): ResolvedTheme {
-    return this.resolved;
+		return this.resolved;
-  }
+	}
-  toggle() {
+	toggle() {
-    // Cycle through: light -> dark -> system -> light
+		// Cycle through: light -> dark -> system -> light
-    if (this.current === 'light') {
+		if (this.current === 'light') {
-      this.current = 'dark';
+			this.current = 'dark';
-    } else if (this.current === 'dark') {
+		} else if (this.current === 'dark') {
-      this.current = 'system';
+			this.current = 'system';
-    } else {
+		} else {
-      this.current = 'light';
+			this.current = 'light';
-    }
+		}
-    if (browser) {
+		if (browser) {
-      localStorage.setItem('theme', this.current);
+			localStorage.setItem('theme', this.current);
-      this.applyTheme();
+			this.applyTheme();
-    }
+		}
-  }
+	}
-  set(theme: Theme) {
+	set(theme: Theme) {
-    this.current = theme;
+		this.current = theme;
-    if (browser) {
+		if (browser) {
-      localStorage.setItem('theme', this.current);
+			localStorage.setItem('theme', this.current);
-    }
+		}
-    this.applyTheme();
+		this.applyTheme();
-  }
+	}
 }
 export const themeStore = new ThemeStore();
@@ -1,13 +1,13 @@
-import { clsx, type ClassValue } from 'clsx';
+import { clsx, type ClassValue } from "clsx";
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+	return twMerge(clsx(inputs));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
 export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
@@ -2,19 +2,19 @@
 * Convert hex color to rgba with transparency
 */
 export function hexToRgba(hex: string, alpha: number): string {
-  const r = parseInt(hex.slice(1, 3), 16);
+	const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
+	const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
+	const b = parseInt(hex.slice(5, 7), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 /**
 * Generate card style string with color, transparency, and blur
 */
 export function getCardStyle(color: string | null, fallbackColor?: string | null): string {
-  const activeColor = color || fallbackColor;
+	const activeColor = color || fallbackColor;
-  if (!activeColor) return '';
+	if (!activeColor) return '';
-  const opacity = color ? 0.2 : 0.15;
+	const opacity = color ? 0.2 : 0.15;
-  return `background-color: ${hexToRgba(activeColor, opacity)} !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;`;
+	return `background-color: ${hexToRgba(activeColor, opacity)} !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;`;
 }
@@ -5,96 +5,99 @@
 const LOCAL_WISHLISTS_KEY = 'local_wishlists';
 export interface LocalWishlist {
-  ownerToken: string;
+	ownerToken: string;
-  publicToken: string;
+	publicToken: string;
-  title: string;
+	title: string;
-  createdAt: string;
+	createdAt: string;
-  isFavorite?: boolean;
+	isFavorite?: boolean;
 }
 /**
 * Get all local wishlists from localStorage
 */
 export function getLocalWishlists(): LocalWishlist[] {
-  if (typeof window === 'undefined') return [];
+	if (typeof window === 'undefined') return [];
-  try {
+	try {
-    const stored = localStorage.getItem(LOCAL_WISHLISTS_KEY);
+		const stored = localStorage.getItem(LOCAL_WISHLISTS_KEY);
-    return stored ? JSON.parse(stored) : [];
+		return stored ? JSON.parse(stored) : [];
-  } catch (error) {
+	} catch (error) {
-    console.error('Failed to parse local wishlists:', error);
+		console.error('Failed to parse local wishlists:', error);
-    return [];
+		return [];
-  }
+	}
 }
 /**
 * Add a wishlist to localStorage
 */
 export function addLocalWishlist(wishlist: LocalWishlist): void {
-  if (typeof window === 'undefined') return;
+	if (typeof window === 'undefined') return;
-  try {
+	try {
-    const wishlists = getLocalWishlists();
+		const wishlists = getLocalWishlists();
-    const exists = wishlists.some((w) => w.ownerToken === wishlist.ownerToken);
+		// Check if already exists
-    if (exists) return;
+		const exists = wishlists.some(w => w.ownerToken === wishlist.ownerToken);
 		if (exists) return;
-    wishlists.push(wishlist);
+		wishlists.push(wishlist);
-    localStorage.setItem(LOCAL_WISHLISTS_KEY, JSON.stringify(wishlists));
+		localStorage.setItem(LOCAL_WISHLISTS_KEY, JSON.stringify(wishlists));
-  } catch (error) {
+	} catch (error) {
-    console.error('Failed to add local wishlist:', error);
+		console.error('Failed to add local wishlist:', error);
-  }
+	}
 }
 /**
 * Remove a wishlist from localStorage (forget it)
 */
 export function forgetLocalWishlist(ownerToken: string): void {
-  if (typeof window === 'undefined') return;
+	if (typeof window === 'undefined') return;
-  try {
+	try {
-    const wishlists = getLocalWishlists();
+		const wishlists = getLocalWishlists();
-    const filtered = wishlists.filter((w) => w.ownerToken !== ownerToken);
+		const filtered = wishlists.filter(w => w.ownerToken !== ownerToken);
-    localStorage.setItem(LOCAL_WISHLISTS_KEY, JSON.stringify(filtered));
+		localStorage.setItem(LOCAL_WISHLISTS_KEY, JSON.stringify(filtered));
-  } catch (error) {
+	} catch (error) {
-    console.error('Failed to forget local wishlist:', error);
+		console.error('Failed to forget local wishlist:', error);
-  }
+	}
 }
 /**
 * Clear all local wishlists (e.g., when user claims all wishlists)
 */
 export function clearLocalWishlists(): void {
-  if (typeof window === 'undefined') return;
+	if (typeof window === 'undefined') return;
-  try {
+	try {
-    localStorage.removeItem(LOCAL_WISHLISTS_KEY);
+		localStorage.removeItem(LOCAL_WISHLISTS_KEY);
-  } catch (error) {
+	} catch (error) {
-    console.error('Failed to clear local wishlists:', error);
+		console.error('Failed to clear local wishlists:', error);
-  }
+	}
 }
 /**
 * Check if a wishlist is in local storage
 */
 export function isLocalWishlist(ownerToken: string): boolean {
-  const wishlists = getLocalWishlists();
+	const wishlists = getLocalWishlists();
-  return wishlists.some((w) => w.ownerToken === ownerToken);
+	return wishlists.some(w => w.ownerToken === ownerToken);
 }
 /**
 * Toggle favorite status for a local wishlist
 */
 export function toggleLocalFavorite(ownerToken: string): void {
-  if (typeof window === 'undefined') return;
+	if (typeof window === 'undefined') return;
-  try {
+	try {
-    const wishlists = getLocalWishlists();
+		const wishlists = getLocalWishlists();
-    const updated = wishlists.map((w) =>
+		const updated = wishlists.map(w =>
-      w.ownerToken === ownerToken ? { ...w, isFavorite: !w.isFavorite } : w
+			w.ownerToken === ownerToken
-    );
+				? { ...w, isFavorite: !w.isFavorite }
-    localStorage.setItem(LOCAL_WISHLISTS_KEY, JSON.stringify(updated));
+				: w
-  } catch (error) {
+		);
-    console.error('Failed to toggle local wishlist favorite:', error);
+		localStorage.setItem(LOCAL_WISHLISTS_KEY, JSON.stringify(updated));
-  }
+	} catch (error) {
 		console.error('Failed to toggle local wishlist favorite:', error);
 	}
 }
@@ -3,31 +3,31 @@ import { themeStore } from '$lib/stores/theme.svelte';
 export type ThemePattern = 'snow' | 'none';
 export interface Theme {
-  name: string;
+	name: string;
-  pattern: ThemePattern;
+	pattern: ThemePattern;
 }
 export const AVAILABLE_THEMES: Record<string, Theme> = {
-  none: {
+	none: {
-    name: 'None',
+		name: 'None',
-    pattern: 'none'
+		pattern: 'none'
-  },
+	},
-  waves: {
+	waves: {
-    name: 'Snow',
+		name: 'Snow',
-    pattern: 'snow'
+		pattern: 'snow'
-  }
+	}
 };
 export const DEFAULT_THEME = 'none';
 export const PATTERN_OPACITY = 0.1;
 export function getTheme(themeName?: string | null): Theme {
-  if (!themeName || !AVAILABLE_THEMES[themeName]) {
+	if (!themeName || !AVAILABLE_THEMES[themeName]) {
-    return AVAILABLE_THEMES[DEFAULT_THEME];
+		return AVAILABLE_THEMES[DEFAULT_THEME];
-  }
+	}
-  return AVAILABLE_THEMES[themeName];
+	return AVAILABLE_THEMES[themeName];
 }
 export function getPatternColor(customColor?: string): string {
-  return customColor || (themeStore.getResolvedTheme() === 'dark' ? '#FFFFFF' : '#000000');
+	return customColor || (themeStore.getResolvedTheme() === 'dark' ? '#FFFFFF' : '#000000');
 }
@@ -3,59 +3,59 @@
 */
 type UpdateField = {
-  [key: string]: string;
+	[key: string]: string;
 };
 async function updateWishlist(field: UpdateField): Promise<boolean> {
-  const response = await fetch('?/updateWishlist', {
+	const response = await fetch("?/updateWishlist", {
-    method: 'POST',
+		method: "POST",
-    headers: {
+		headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
+			"Content-Type": "application/x-www-form-urlencoded",
-    },
+		},
-    body: new URLSearchParams(field)
+		body: new URLSearchParams(field),
-  });
+	});
-  if (!response.ok) {
+	if (!response.ok) {
-    console.error(`Failed to update wishlist: ${Object.keys(field)[0]}`);
+		console.error(`Failed to update wishlist: ${Object.keys(field)[0]}`);
-    return false;
+		return false;
-  }
+	}
-  return true;
+	return true;
 }
 export async function updateTitle(title: string): Promise<boolean> {
-  return updateWishlist({ title });
+	return updateWishlist({ title });
 }
 export async function updateDescription(description: string | null): Promise<boolean> {
-  return updateWishlist({ description: description || '' });
+	return updateWishlist({ description: description || "" });
 }
 export async function updateColor(color: string | null): Promise<boolean> {
-  return updateWishlist({ color: color || '' });
+	return updateWishlist({ color: color || "" });
 }
 export async function updateEndDate(endDate: string | null): Promise<boolean> {
-  return updateWishlist({ endDate: endDate || '' });
+	return updateWishlist({ endDate: endDate || "" });
 }
 export async function updateTheme(theme: string | null): Promise<boolean> {
-  return updateWishlist({ theme: theme || 'none' });
+	return updateWishlist({ theme: theme || "none" });
 }
 export async function reorderItems(items: Array<{ id: string; order: number }>): Promise<boolean> {
-  const response = await fetch('?/reorderItems', {
+	const response = await fetch("?/reorderItems", {
-    method: 'POST',
+		method: "POST",
-    headers: {
+		headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
+			"Content-Type": "application/x-www-form-urlencoded",
-    },
+		},
-    body: new URLSearchParams({
+		body: new URLSearchParams({
-      items: JSON.stringify(items)
+			items: JSON.stringify(items),
-    })
+		}),
-  });
+	});
-  if (!response.ok) {
+	if (!response.ok) {
-    console.error('Failed to update item order');
+		console.error("Failed to update item order");
-    return false;
+		return false;
-  }
+	}
-  return true;
+	return true;
 }
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import favicon from '$lib/assets/favicon.svg';
+	import favicon from '$lib/assets/favicon.svg';
-  import '../app.css';
+	import '../app.css';
-  let { children } = $props();
+	let { children } = $props();
 </script>
 <svelte:head>
-  <link rel="icon" href={favicon} />
+	<link rel="icon" href={favicon} />
 </svelte:head>
 <div class="min-h-screen bg-slate-50 dark:bg-slate-950">
-  {@render children()}
+	{@render children()}
 </div>
@@ -1,8 +1,8 @@
 import type { PageServerLoad } from './$types';
 export const load: PageServerLoad = async (event) => {
-  const session = await event.locals.auth();
+	const session = await event.locals.auth();
-  return {
+	return {
-    session
+		session
-  };
+	};
 };
@@ -1,123 +1,111 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import { Input } from '$lib/components/ui/input';
+	import { Input } from '$lib/components/ui/input';
-  import { Label } from '$lib/components/ui/label';
+	import { Label } from '$lib/components/ui/label';
-  import { Textarea } from '$lib/components/ui/textarea';
+	import { Textarea } from '$lib/components/ui/textarea';
-  import {
+	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
-    Card,
+	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
-    CardContent,
+	import { LanguageToggle } from '$lib/components/ui/language-toggle';
-    CardDescription,
+	import { goto } from '$app/navigation';
-    CardHeader,
+	import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
-    CardTitle
+	import type { PageData } from './$types';
-  } from '$lib/components/ui/card';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import { ThemeToggle } from '$lib/components/ui/theme-toggle';
+	import { addLocalWishlist } from '$lib/utils/localWishlists';
  import { LanguageToggle } from '$lib/components/ui/language-toggle';
  import { goto } from '$app/navigation';
  import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
  import type { PageData } from './$types';
  import { languageStore } from '$lib/stores/language.svelte';
  import { addLocalWishlist } from '$lib/utils/localWishlists';
-  let { data }: { data: PageData } = $props();
+	let { data }: { data: PageData } = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  let title = $state('');
+	let title = $state('');
-  let description = $state('');
+	let description = $state('');
-  let color = $state<string | null>(null);
+	let color = $state<string | null>(null);
-  let isCreating = $state(false);
+	let isCreating = $state(false);
-  async function createWishlist() {
+	async function createWishlist() {
-    if (!title.trim()) return;
+		if (!title.trim()) return;
-    isCreating = true;
+		isCreating = true;
-    try {
+		try {
-      const response = await fetch('/api/wishlists', {
+			const response = await fetch('/api/wishlists', {
-        method: 'POST',
+				method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+				headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title, description, color })
+				body: JSON.stringify({ title, description, color })
-      });
+			});
-      if (response.ok) {
+			if (response.ok) {
-        const result = await response.json();
+				const result = await response.json();
-        const { ownerToken, publicToken, title: wishlistTitle, createdAt } = result;
+				const { ownerToken, publicToken, title: wishlistTitle, createdAt } = result;
-        // If user is not authenticated, save to localStorage
+				// If user is not authenticated, save to localStorage
-        if (!data.session?.user) {
+				if (!data.session?.user) {
-          addLocalWishlist({
+					addLocalWishlist({
-            ownerToken,
+						ownerToken,
-            publicToken,
+						publicToken,
-            title: wishlistTitle,
+						title: wishlistTitle,
-            createdAt
+						createdAt
-          });
+					});
-        }
+				}
-        goto(`/wishlist/${ownerToken}/edit`);
+				goto(`/wishlist/${ownerToken}/edit`);
-      }
+			}
-    } catch (error) {
+		} catch (error) {
-      console.error('Failed to create wishlist:', error);
+			console.error('Failed to create wishlist:', error);
-    } finally {
+		} finally {
-      isCreating = false;
+			isCreating = false;
-    }
+		}
-  }
+	}
 </script>
 <div class="min-h-screen flex items-center justify-center p-4">
-  <Card class="w-full max-w-lg">
+	<Card class="w-full max-w-lg">
-    <CardHeader>
+		<CardHeader>
-      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div class="flex-1 min-w-0">
+				<div class="flex-1 min-w-0">
-          <CardTitle class="text-3xl">{t.wishlist.createTitle}</CardTitle>
+					<CardTitle class="text-3xl">{t.wishlist.createTitle}</CardTitle>
-          <CardDescription>
+					<CardDescription>
-            {t.wishlist.createDescription}
+						{t.wishlist.createDescription}
-          </CardDescription>
+					</CardDescription>
-        </div>
+				</div>
-        <div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+				<div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
-          <LanguageToggle />
+					<LanguageToggle />
-          <ThemeToggle />
+					<ThemeToggle />
-          <Button variant="outline" onclick={() => goto('/dashboard')}>{t.nav.dashboard}</Button>
+					<Button variant="outline" onclick={() => goto('/dashboard')}>{t.nav.dashboard}</Button>
-          {#if !data.session?.user}
+					{#if !data.session?.user}
-            <Button variant="outline" onclick={() => goto('/signin')}>{t.auth.signIn}</Button>
+						<Button variant="outline" onclick={() => goto('/signin')}>{t.auth.signIn}</Button>
-          {/if}
+					{/if}
-        </div>
+				</div>
-      </div>
+			</div>
-    </CardHeader>
+		</CardHeader>
-    <CardContent>
+		<CardContent>
-      <form
+			<form onsubmit={(e) => { e.preventDefault(); createWishlist(); }} class="space-y-4">
-        onsubmit={(e) => {
+				<div class="space-y-2">
-          e.preventDefault();
+					<Label for="title">{t.form.wishlistTitle}</Label>
-          createWishlist();
+					<Input
-        }}
+						id="title"
-        class="space-y-4"
+						bind:value={title}
-      >
+						placeholder={t.form.wishlistTitlePlaceholder}
-        <div class="space-y-2">
+						required
-          <Label for="title">{t.form.wishlistTitle}</Label>
+					/>
-          <Input
+				</div>
-            id="title"
+				<div class="space-y-2">
-            bind:value={title}
+					<Label for="description">{t.form.descriptionOptional}</Label>
-            placeholder={t.form.wishlistTitlePlaceholder}
+					<Textarea
-            required
+						id="description"
-          />
+						bind:value={description}
-        </div>
+						placeholder={t.form.descriptionPlaceholder}
-        <div class="space-y-2">
+						rows={3}
-          <Label for="description">{t.form.descriptionOptional}</Label>
+					/>
-          <Textarea
+				</div>
-            id="description"
+				<div class="space-y-2">
-            bind:value={description}
+					<div class="flex items-center justify-between">
-            placeholder={t.form.descriptionPlaceholder}
+						<Label for="color">{t.form.wishlistColor}</Label>
-            rows={3}
+						<ColorPicker bind:color={color} size="sm" />
-          />
+					</div>
-        </div>
+				</div>
-        <div class="space-y-2">
+				<Button type="submit" class="w-full" disabled={isCreating || !title.trim()}>
-          <div class="flex items-center justify-between">
+					{isCreating ? t.wishlist.creating : t.wishlist.createWishlist}
-            <Label for="color">{t.form.wishlistColor}</Label>
+				</Button>
-            <ColorPicker bind:color size="sm" />
+			</form>
-          </div>
+		</CardContent>
-        </div>
+	</Card>
        <Button type="submit" class="w-full" disabled={isCreating || !title.trim()}>
          {isCreating ? t.wishlist.creating : t.wishlist.createWishlist}
        </Button>
      </form>
    </CardContent>
  </Card>
 </div>
@@ -1,64 +1,44 @@
 import type { RequestHandler } from './$types';
 function isValidImageUrl(url: string): boolean {
  try {
    const parsedUrl = new URL(url);
    if (!['http:', 'https:'].includes(parsedUrl.protocol)) {
      return false;
    }
    const hostname = parsedUrl.hostname.toLowerCase();
    if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1') {
      return false;
    }
    return true;
  } catch {
    return false;
  }
 }
 export const GET: RequestHandler = async ({ url }) => {
-  const imageUrl = url.searchParams.get('url');
+	const imageUrl = url.searchParams.get('url');
-  if (!imageUrl) {
+	if (!imageUrl) {
-    return new Response('Image URL is required', { status: 400 });
+		return new Response('Image URL is required', { status: 400 });
-  }
+	}
-  if (!isValidImageUrl(imageUrl)) {
+	try {
-    return new Response('Invalid image URL', { status: 400 });
+		// Fetch the image with proper headers to avoid blocking
-  }
+		const response = await fetch(imageUrl, {
 			headers: {
 				'User-Agent':
 					'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
 				'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
 				'Accept-Language': 'en-US,en;q=0.9',
 				'Referer': new URL(imageUrl).origin,
 				'Sec-Fetch-Dest': 'image',
 				'Sec-Fetch-Mode': 'no-cors',
 				'Sec-Fetch-Site': 'cross-site'
 			}
 		});
-  try {
+		if (!response.ok) {
-    // Fetch the image with proper headers to avoid blocking
+			return new Response('Failed to fetch image', { status: response.status });
-    const response = await fetch(imageUrl, {
+		}
      headers: {
        'User-Agent':
          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
        Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
        'Accept-Language': 'en-US,en;q=0.9',
        Referer: new URL(imageUrl).origin,
        'Sec-Fetch-Dest': 'image',
        'Sec-Fetch-Mode': 'no-cors',
        'Sec-Fetch-Site': 'cross-site'
      }
    });
-    if (!response.ok) {
+		const contentType = response.headers.get('content-type') || 'image/jpeg';
-      return new Response('Failed to fetch image', { status: response.status });
+		const imageBuffer = await response.arrayBuffer();
    }
-    const contentType = response.headers.get('content-type') || 'image/jpeg';
+		// Return the image with appropriate headers
-    const imageBuffer = await response.arrayBuffer();
+		return new Response(imageBuffer, {
-
+			headers: {
-    // Return the image with appropriate headers
+				'Content-Type': contentType,
-    return new Response(imageBuffer, {
+				'Cache-Control': 'public, max-age=86400', // Cache for 1 day
-      headers: {
+				'Access-Control-Allow-Origin': '*'
-        'Content-Type': contentType,
+			}
-        'Cache-Control': 'public, max-age=86400', // Cache for 1 day
+		});
-        'Access-Control-Allow-Origin': '*'
+	} catch (error) {
-      }
+		console.error('Image proxy error:', error);
-    });
+		return new Response('Failed to proxy image', { status: 500 });
-  } catch (error) {
+	}
    console.error('Image proxy error:', error);
    return new Response('Failed to proxy image', { status: 500 });
  }
 };
@@ -1,243 +1,121 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 function isValidUrl(urlString: string): boolean {
  try {
    const url = new URL(urlString);
    if (!['http:', 'https:'].includes(url.protocol)) {
      return false;
    }
    const hostname = url.hostname.toLowerCase();
    if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1') {
      return false;
    }
    return true;
  } catch {
    return false;
  }
 }
 export const POST: RequestHandler = async ({ request }) => {
-  const { url } = await request.json();
+	const { url } = await request.json();
-  if (!url) {
+	if (!url) {
-    return json({ error: 'URL is required' }, { status: 400 });
+		return json({ error: 'URL is required' }, { status: 400 });
-  }
+	}
-  if (!isValidUrl(url)) {
+	try {
-    return json({ error: 'Invalid URL' }, { status: 400 });
+		const response = await fetch(url, {
-  }
+			headers: {
 				'User-Agent':
 					'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
 				'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8',
 				'Accept-Language': 'en-US,en;q=0.9',
 				'Referer': 'https://www.google.com/'
 			}
 		});
-  try {
+		if (!response.ok) {
-    const response = await fetch(url, {
+			return json({ error: 'Failed to fetch URL' }, { status: 400 });
-      headers: {
+		}
        'User-Agent':
          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
        Accept:
          'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8',
        'Accept-Language': 'en-US,en;q=0.9',
        'Accept-Encoding': 'gzip, deflate, br',
        'Cache-Control': 'no-cache',
        Pragma: 'no-cache'
      }
    });
-    if (!response.ok) {
+		const html = await response.text();
-      return json({ error: 'Failed to fetch URL' }, { status: 400 });
+		const baseUrl = new URL(url);
-    }
+		const origin = baseUrl.origin;
-    const html = await response.text();
+		const imageUrls: string[] = [];
-    const baseUrl = new URL(url);
+		// Match various image source patterns
-    const origin = baseUrl.origin;
+		const imgRegex = /<img[^>]+src=["']([^"'>]+)["']/gi;
 		const srcsetRegex = /<img[^>]+srcset=["']([^"'>]+)["']/gi;
 		const dataSrcRegex = /<img[^>]+data-src=["']([^"'>]+)["']/gi;
 		const ogImageRegex = /<meta[^>]+property=["']og:image["'][^>]+content=["']([^"'>]+)["']/gi;
 		const twitterImageRegex = /<meta[^>]+name=["']twitter:image["'][^>]+content=["']([^"'>]+)["']/gi;
 		const jsonLdRegex = /"image"\s*:\s*"([^"]+)"/gi;
-    const imageUrls: string[] = [];
+		function toAbsoluteUrl(imgUrl: string): string {
 			if (imgUrl.startsWith('http')) {
 				return imgUrl;
 			}
 			if (imgUrl.startsWith('//')) {
 				return `https:${imgUrl}`;
 			}
 			if (imgUrl.startsWith('/')) {
 				return `${origin}${imgUrl}`;
 			}
 			return `${origin}/${imgUrl}`;
 		}
-    function toAbsoluteUrl(imgUrl: string): string {
+		let match;
      if (imgUrl.startsWith('http')) {
        return imgUrl;
      }
      if (imgUrl.startsWith('//')) {
        return `https:${imgUrl}`;
      }
      if (imgUrl.startsWith('/')) {
        return `${origin}${imgUrl}`;
      }
      return `${origin}/${imgUrl}`;
    }
-    function isLikelyProductImage(url: string): boolean {
+		// Priority 1: OpenGraph and Twitter meta tags (usually the best product images)
-      const lower = url.toLowerCase();
+		while ((match = ogImageRegex.exec(html)) !== null) {
-      const badPatterns = [
+			imageUrls.push(toAbsoluteUrl(match[1]));
-        'logo',
+		}
        'icon',
        'sprite',
        'favicon',
        'banner',
        'footer',
        'header',
        'background',
        'pattern',
        'placeholder',
        'thumbnail-small',
        'btn',
        'button',
        'menu',
        'nav',
        'navigation',
        'social',
        'instagram',
        'facebook',
        'twitter',
        'linkedin',
        'pinterest'
      ];
      if (badPatterns.some((pattern) => lower.includes(pattern))) {
        return false;
      }
      if (url.endsWith('.svg')) {
        return false;
      }
      if (lower.includes('data:image')) {
        return false;
      }
      if (lower.includes('loading') || lower.includes('spinner') || lower.includes('skeleton')) {
        return false;
      }
      return true;
    }
-    let match;
+		while ((match = twitterImageRegex.exec(html)) !== null) {
 			const url = toAbsoluteUrl(match[1]);
 			if (!imageUrls.includes(url)) {
 				imageUrls.push(url);
 			}
 		}
-    // Priority 1: OpenGraph and Twitter meta tags (main product image)
+		// Priority 2: JSON-LD structured data (common for e-commerce)
-    const ogImageRegex = /<meta[^>]+property=["']og:image["'][^>]+content=["']([^"'>]+)["']/gi;
+		while ((match = jsonLdRegex.exec(html)) !== null) {
-    const twitterImageRegex =
+			const url = toAbsoluteUrl(match[1]);
-      /<meta[^>]+name=["']twitter:image["'][^>]+content=["']([^"'>]+)["']/gi;
+			if (!imageUrls.includes(url)) {
 				imageUrls.push(url);
 			}
 		}
-    while ((match = ogImageRegex.exec(html)) !== null) {
+		// Priority 3: data-src attributes (lazy loaded images)
-      const url = toAbsoluteUrl(match[1]);
+		while ((match = dataSrcRegex.exec(html)) !== null) {
-      if (isLikelyProductImage(url) && !imageUrls.includes(url)) {
+			const url = toAbsoluteUrl(match[1]);
-        imageUrls.push(url);
+			if (!imageUrls.includes(url)) {
-      }
+				imageUrls.push(url);
-    }
+			}
 		}
-    while ((match = twitterImageRegex.exec(html)) !== null) {
+		// Priority 4: srcset attributes (responsive images)
-      const url = toAbsoluteUrl(match[1]);
+		while ((match = srcsetRegex.exec(html)) !== null) {
-      if (isLikelyProductImage(url) && !imageUrls.includes(url)) {
+			const srcsetValue = match[1];
-        imageUrls.push(url);
+			// srcset can have multiple URLs with sizes, extract them
-      }
+			const srcsetUrls = srcsetValue.split(',').map((s) => {
-    }
+				const parts = s.trim().split(/\s+/);
 				return parts[0]; // Get the URL part before size descriptor
 			});
 			for (const srcsetUrl of srcsetUrls) {
 				const url = toAbsoluteUrl(srcsetUrl);
 				if (!imageUrls.includes(url)) {
 					imageUrls.push(url);
 				}
 			}
 		}
-    // Priority 2: Look for JSON-LD structured data (very common in modern e-commerce)
+		// Priority 5: Regular img src attributes
-    const jsonLdRegex =
+		while ((match = imgRegex.exec(html)) !== null) {
-      /<script[^>]*type=["']application\/ld\+json["'][^>]*>([\s\S]*?)<\/script>/gi;
+			const url = toAbsoluteUrl(match[1]);
-    while ((match = jsonLdRegex.exec(html)) !== null) {
+			if (!imageUrls.includes(url)) {
-      try {
+				imageUrls.push(url);
-        const jsonStr = match[1];
+			}
-        const jsonData = JSON.parse(jsonStr);
+		}
-        function extractImages(obj: unknown, results: Set<string>) {
+		const filteredImages = imageUrls.filter(
-          if (!obj || typeof obj !== 'object') return;
+			(url) =>
-          if (Array.isArray(obj)) {
+				!url.toLowerCase().includes('logo') &&
-            obj.forEach((item: unknown) => extractImages(item, results));
+				!url.toLowerCase().includes('icon') &&
-          } else {
+				!url.toLowerCase().includes('sprite') &&
-            const record = obj as Record<string, unknown>;
+				!url.toLowerCase().includes('favicon') &&
-            for (const key in record) {
+				!url.endsWith('.svg') &&
-              if (key === 'image' || key === 'thumbnail' || key === 'url') {
+				url.length < 1000 && // Increased limit for modern CDN URLs
-                const val = record[key];
+				!url.includes('data:image') // Skip data URLs
-                if (typeof val === 'string') {
+		);
                  const url = toAbsoluteUrl(val);
                  if (isLikelyProductImage(url)) {
                    results.add(url);
                  }
                }
                if (Array.isArray(val)) {
                  val.forEach((item: unknown) => {
                    if (typeof item === 'string') {
                      const url = toAbsoluteUrl(item);
                      if (isLikelyProductImage(url)) {
                        results.add(url);
                      }
                    }
                  });
                }
              } else if (typeof record[key] === 'object') {
                extractImages(record[key], results);
              }
            }
          }
        }
-        const jsonImages = new Set<string>();
+		return json({ images: filteredImages.slice(0, 30) });
-        extractImages(jsonData, jsonImages);
+	} catch (error) {
-        jsonImages.forEach((img) => {
+		return json({ error: 'Failed to scrape images' }, { status: 500 });
-          if (!imageUrls.includes(img)) {
+	}
            imageUrls.push(img);
          }
        });
      } catch {
        // JSON parsing failed, continue
      }
    }
    // Priority 3: Look for data-image attributes (common in React/SPA)
    const dataImageRegex = /<[^>]+data-image=["']([^"'>]+)["']/gi;
    while ((match = dataImageRegex.exec(html)) !== null) {
      const url = toAbsoluteUrl(match[1]);
      if (isLikelyProductImage(url) && !imageUrls.includes(url)) {
        imageUrls.push(url);
      }
    }
    // Priority 4: srcset attributes (responsive images)
    const srcsetRegex = /<img[^>]+srcset=["']([^"'>]+)["']/gi;
    while ((match = srcsetRegex.exec(html)) !== null) {
      const srcsetValue = match[1];
      const srcsetUrls = srcsetValue.split(',').map((s) => {
        const parts = s.trim().split(/\s+/);
        return parts[0];
      });
      for (const srcsetUrl of srcsetUrls) {
        const url = toAbsoluteUrl(srcsetUrl);
        if (isLikelyProductImage(url) && !imageUrls.includes(url)) {
          imageUrls.push(url);
        }
      }
    }
    // Priority 5: data-src attributes (lazy loaded)
    const dataSrcRegex = /<img[^>]+data-src=["']([^"'>]+)["']/gi;
    while ((match = dataSrcRegex.exec(html)) !== null) {
      const url = toAbsoluteUrl(match[1]);
      if (isLikelyProductImage(url) && !imageUrls.includes(url)) {
        imageUrls.push(url);
      }
    }
    // Priority 6: Regular img src attributes
    const imgRegex = /<img[^>]+src=["']([^"'>]+)["']/gi;
    while ((match = imgRegex.exec(html)) !== null) {
      const url = toAbsoluteUrl(match[1]);
      if (isLikelyProductImage(url) && !imageUrls.includes(url)) {
        imageUrls.push(url);
      }
    }
    // Priority 7: Background images in style attributes (common in some e-commerce)
    const bgImageRegex = /background(-image)?:\s*url\(["']?([^"')]*)["']?/gi;
    while ((match = bgImageRegex.exec(html)) !== null) {
      const url = toAbsoluteUrl(match[1]);
      if (isLikelyProductImage(url) && !imageUrls.includes(url) && !url.startsWith('data:')) {
        imageUrls.push(url);
      }
    }
    // Final filtering: remove very long URLs and duplicates
    const finalImages = [...new Set(imageUrls)].filter((url) => {
      return url.length < 2000 && isLikelyProductImage(url);
    });
    return json({ images: finalImages.slice(0, 30) });
  } catch {
    return json({ error: 'Failed to scrape images' }, { status: 500 });
  }
 };
@@ -1,35 +1,38 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { db } from '$lib/server/db';
-import { wishlists } from '$lib/db/schema';
+import { wishlists } from '$lib/server/schema';
 import { eq, or } from 'drizzle-orm';
 export const GET: RequestHandler = async ({ params }) => {
-  const { token } = params;
+	const { token } = params;
-  // Find wishlist by either ownerToken or publicToken
+	// Find wishlist by either ownerToken or publicToken
-  const wishlist = await db.query.wishlists.findFirst({
+	const wishlist = await db.query.wishlists.findFirst({
-    where: or(eq(wishlists.ownerToken, token), eq(wishlists.publicToken, token)),
+		where: or(
-    with: {
+			eq(wishlists.ownerToken, token),
-      items: {
+			eq(wishlists.publicToken, token)
-        orderBy: (items, { asc }) => [asc(items.order)]
+		),
-      }
+		with: {
-    }
+			items: {
-  });
+				orderBy: (items, { asc }) => [asc(items.order)]
 			}
 		}
 	});
-  if (!wishlist) {
+	if (!wishlist) {
-    return json({ error: 'Wishlist not found' }, { status: 404 });
+		return json({ error: 'Wishlist not found' }, { status: 404 });
-  }
+	}
-  // Return only the necessary fields
+	// Return only the necessary fields
-  return json({
+	return json({
-    id: wishlist.id,
+		id: wishlist.id,
-    title: wishlist.title,
+		title: wishlist.title,
-    ownerToken: wishlist.ownerToken,
+		ownerToken: wishlist.ownerToken,
-    publicToken: wishlist.publicToken,
+		publicToken: wishlist.publicToken,
-    createdAt: wishlist.createdAt,
+		createdAt: wishlist.createdAt,
-    theme: wishlist.theme,
+		theme: wishlist.theme,
-    color: wishlist.color,
+		color: wishlist.color,
-    items: wishlist.items || []
+		items: wishlist.items || []
-  });
+	});
 };
@@ -1,52 +1,39 @@
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { db } from '$lib/server/db';
-import { wishlists } from '$lib/db/schema';
+import { wishlists } from '$lib/server/schema';
 import { createId } from '@paralleldrive/cuid2';
 import { sanitizeString, sanitizeColor } from '$lib/server/validation';
 export const POST: RequestHandler = async ({ request, locals }) => {
-  const body = await request.json();
+	const { title, description, color } = await request.json();
-  let title: string | null;
+	if (!title?.trim()) {
-  let description: string | null;
+		return json({ error: 'Title is required' }, { status: 400 });
-  let color: string | null;
+	}
-  try {
+	const session = await locals.auth();
-    title = sanitizeString(body.title, 200);
+	const userId = session?.user?.id || null;
    description = sanitizeString(body.description, 2000);
    color = sanitizeColor(body.color);
  } catch {
    return json({ error: 'Invalid input' }, { status: 400 });
  }
-  if (!title) {
+	const ownerToken = createId();
-    return json({ error: 'Title is required' }, { status: 400 });
+	const publicToken = createId();
  }
-  const session = await locals.auth();
+	const [wishlist] = await db
-  const userId = session?.user?.id || null;
+		.insert(wishlists)
 		.values({
 			title: title.trim(),
 			description: description?.trim() || null,
 			color: color?.trim() || null,
 			ownerToken,
 			publicToken,
 			userId
 		})
 		.returning();
-  const ownerToken = createId();
+	return json({
-  const publicToken = createId();
+		ownerToken,
-
+		publicToken,
-  const [wishlist] = await db
+		id: wishlist.id,
-    .insert(wishlists)
+		title: wishlist.title,
-    .values({
+		createdAt: wishlist.createdAt
-      title,
+	});
      description,
      color,
      ownerToken,
      publicToken,
      userId
    })
    .returning();
  return json({
    ownerToken,
    publicToken,
    id: wishlist.id,
    title: wishlist.title,
    createdAt: wishlist.createdAt
  });
 };
@@ -1,198 +1,195 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad, Actions } from './$types';
 import { db } from '$lib/server/db';
-import { wishlists, savedWishlists, users } from '$lib/db/schema';
+import { wishlists, savedWishlists, users } from '$lib/server/schema';
 import { eq, and } from 'drizzle-orm';
 export const load: PageServerLoad = async (event) => {
-  const session = await event.locals.auth();
+	const session = await event.locals.auth();
-  // Allow anonymous users to access dashboard for local wishlists
+	// Allow anonymous users to access dashboard for local wishlists
-  if (!session?.user?.id) {
+	if (!session?.user?.id) {
-    return {
+		return {
-      user: null,
+			user: null,
-      wishlists: [],
+			wishlists: [],
-      savedWishlists: [],
+			savedWishlists: [],
-      isAuthenticated: false
+			isAuthenticated: false
-    };
+		};
-  }
+	}
-  // Fetch user with theme
+	// Fetch user with theme
-  const user = await db.query.users.findFirst({
+	const user = await db.query.users.findFirst({
-    where: eq(users.id, session.user.id)
+		where: eq(users.id, session.user.id)
-  });
+	});
-  const userWishlists = await db.query.wishlists.findMany({
+	const userWishlists = await db.query.wishlists.findMany({
-    where: eq(wishlists.userId, session.user.id),
+		where: eq(wishlists.userId, session.user.id),
-    with: {
+		with: {
-      items: {
+			items: {
-        orderBy: (items, { asc }) => [asc(items.order)]
+				orderBy: (items, { asc }) => [asc(items.order)]
-      },
+			},
-      user: true
+			user: true
-    },
+		},
-    orderBy: (wishlists, { desc }) => [desc(wishlists.createdAt)]
+		orderBy: (wishlists, { desc }) => [desc(wishlists.createdAt)]
-  });
+	});
-  const saved = await db.query.savedWishlists.findMany({
+	const saved = await db.query.savedWishlists.findMany({
-    where: eq(savedWishlists.userId, session.user.id),
+		where: eq(savedWishlists.userId, session.user.id),
-    with: {
+		with: {
-      wishlist: {
+			wishlist: {
-        with: {
+				with: {
-          items: {
+					items: {
-            orderBy: (items, { asc }) => [asc(items.order)]
+						orderBy: (items, { asc }) => [asc(items.order)]
-          },
+					},
-          user: true
+					user: true
-        }
+				}
-      }
+			}
-    },
+		},
-    orderBy: (savedWishlists, { desc }) => [desc(savedWishlists.createdAt)]
+		orderBy: (savedWishlists, { desc }) => [desc(savedWishlists.createdAt)]
-  });
+	});
-  // Map saved wishlists to include ownerToken from savedWishlists table (not from wishlist)
+	// Map saved wishlists to include ownerToken from savedWishlists table (not from wishlist)
-  // This ensures users only see ownerToken if they claimed via edit link
+	// This ensures users only see ownerToken if they claimed via edit link
-  const savedWithAccess = saved.map((s) => ({
+	const savedWithAccess = saved.map(s => ({
-    ...s,
+		...s,
-    wishlist: s.wishlist
+		wishlist: s.wishlist ? {
-      ? {
+			...s.wishlist,
-          ...s.wishlist,
+			// Override ownerToken: use the one stored in savedWishlists (which is null for public saves)
-          // Override ownerToken: use the one stored in savedWishlists (which is null for public saves)
+			ownerToken: s.ownerToken,
-          ownerToken: s.ownerToken,
+			// Keep publicToken as-is for viewing
-          // Keep publicToken as-is for viewing
+			publicToken: s.wishlist.publicToken
-          publicToken: s.wishlist.publicToken
+		} : null
-        }
+	}));
      : null
  }));
-  return {
+	return {
-    user: user,
+		user: user,
-    wishlists: userWishlists,
+		wishlists: userWishlists,
-    savedWishlists: savedWithAccess,
+		savedWishlists: savedWithAccess,
-    isAuthenticated: true
+		isAuthenticated: true
-  };
+	};
 };
 export const actions: Actions = {
-  toggleFavorite: async ({ request, locals }) => {
+	toggleFavorite: async ({ request, locals }) => {
-    const session = await locals.auth();
+		const session = await locals.auth();
-    if (!session?.user?.id) {
+		if (!session?.user?.id) {
-      throw redirect(303, '/signin');
+			throw redirect(303, '/signin');
-    }
+		}
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const wishlistId = formData.get('wishlistId') as string;
+		const wishlistId = formData.get('wishlistId') as string;
-    const isFavorite = formData.get('isFavorite') === 'true';
+		const isFavorite = formData.get('isFavorite') === 'true';
-    if (!wishlistId) {
+		if (!wishlistId) {
-      return { success: false, error: 'Wishlist ID is required' };
+			return { success: false, error: 'Wishlist ID is required' };
-    }
+		}
-    await db
+		await db.update(wishlists)
-      .update(wishlists)
+			.set({ isFavorite: !isFavorite, updatedAt: new Date() })
-      .set({ isFavorite: !isFavorite, updatedAt: new Date() })
+			.where(eq(wishlists.id, wishlistId));
      .where(eq(wishlists.id, wishlistId));
-    return { success: true };
+		return { success: true };
-  },
+	},
-  toggleSavedFavorite: async ({ request, locals }) => {
+	toggleSavedFavorite: async ({ request, locals }) => {
-    const session = await locals.auth();
+		const session = await locals.auth();
-    if (!session?.user?.id) {
+		if (!session?.user?.id) {
-      throw redirect(303, '/signin');
+			throw redirect(303, '/signin');
-    }
+		}
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const savedWishlistId = formData.get('savedWishlistId') as string;
+		const savedWishlistId = formData.get('savedWishlistId') as string;
-    const isFavorite = formData.get('isFavorite') === 'true';
+		const isFavorite = formData.get('isFavorite') === 'true';
-    if (!savedWishlistId) {
+		if (!savedWishlistId) {
-      return { success: false, error: 'Saved wishlist ID is required' };
+			return { success: false, error: 'Saved wishlist ID is required' };
-    }
+		}
-    await db
+		await db.update(savedWishlists)
-      .update(savedWishlists)
+			.set({ isFavorite: !isFavorite })
-      .set({ isFavorite: !isFavorite })
+			.where(eq(savedWishlists.id, savedWishlistId));
      .where(eq(savedWishlists.id, savedWishlistId));
-    return { success: true };
+		return { success: true };
-  },
+	},
-  unsaveWishlist: async ({ request, locals }) => {
+	unsaveWishlist: async ({ request, locals }) => {
-    const session = await locals.auth();
+		const session = await locals.auth();
-    if (!session?.user?.id) {
+		if (!session?.user?.id) {
-      throw redirect(303, '/signin');
+			throw redirect(303, '/signin');
-    }
+		}
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const savedWishlistId = formData.get('savedWishlistId') as string;
+		const savedWishlistId = formData.get('savedWishlistId') as string;
-    if (!savedWishlistId) {
+		if (!savedWishlistId) {
-      return { success: false, error: 'Saved wishlist ID is required' };
+			return { success: false, error: 'Saved wishlist ID is required' };
-    }
+		}
-    await db
+		await db.delete(savedWishlists)
-      .delete(savedWishlists)
+			.where(and(
-      .where(
+				eq(savedWishlists.id, savedWishlistId),
-        and(eq(savedWishlists.id, savedWishlistId), eq(savedWishlists.userId, session.user.id))
+				eq(savedWishlists.userId, session.user.id)
-      );
+			));
-    return { success: true };
+		return { success: true };
-  },
+	},
-  deleteWishlist: async ({ request, locals }) => {
+	deleteWishlist: async ({ request, locals }) => {
-    const session = await locals.auth();
+		const session = await locals.auth();
-    if (!session?.user?.id) {
+		if (!session?.user?.id) {
-      throw redirect(303, '/signin');
+			throw redirect(303, '/signin');
-    }
+		}
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const wishlistId = formData.get('wishlistId') as string;
+		const wishlistId = formData.get('wishlistId') as string;
-    if (!wishlistId) {
+		if (!wishlistId) {
-      return { success: false, error: 'Wishlist ID is required' };
+			return { success: false, error: 'Wishlist ID is required' };
-    }
+		}
-    await db
+		// Verify the user owns this wishlist
-      .delete(wishlists)
+		await db.delete(wishlists)
-      .where(and(eq(wishlists.id, wishlistId), eq(wishlists.userId, session.user.id)));
+			.where(and(
 				eq(wishlists.id, wishlistId),
 				eq(wishlists.userId, session.user.id)
 			));
-    return { success: true };
+		return { success: true };
-  },
+	},
-  updateDashboardTheme: async ({ request, locals }) => {
+	updateDashboardTheme: async ({ request, locals }) => {
-    const session = await locals.auth();
+		const session = await locals.auth();
-    if (!session?.user?.id) {
+		if (!session?.user?.id) {
-      throw redirect(303, '/signin');
+			throw redirect(303, '/signin');
-    }
+		}
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const theme = formData.get('theme') as string;
+		const theme = formData.get('theme') as string;
-    if (!theme) {
+		if (!theme) {
-      return { success: false, error: 'Theme is required' };
+			return { success: false, error: 'Theme is required' };
-    }
+		}
-    await db
+		await db.update(users)
-      .update(users)
+			.set({ dashboardTheme: theme, updatedAt: new Date() })
-      .set({ dashboardTheme: theme, updatedAt: new Date() })
+			.where(eq(users.id, session.user.id));
      .where(eq(users.id, session.user.id));
-    return { success: true };
+		return { success: true };
-  },
+	},
-  updateDashboardColor: async ({ request, locals }) => {
+	updateDashboardColor: async ({ request, locals }) => {
-    const session = await locals.auth();
+		const session = await locals.auth();
-    if (!session?.user?.id) {
+		if (!session?.user?.id) {
-      throw redirect(303, '/signin');
+			throw redirect(303, '/signin');
-    }
+		}
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const color = formData.get('color') as string | null;
+		const color = formData.get('color') as string | null;
-    await db
+		await db.update(users)
-      .update(users)
+			.set({ dashboardColor: color, updatedAt: new Date() })
-      .set({ dashboardColor: color, updatedAt: new Date() })
+			.where(eq(users.id, session.user.id));
      .where(eq(users.id, session.user.id));
-    return { success: true };
+		return { success: true };
-  }
+	}
 };
@@ -1,279 +1,267 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import type { PageData } from './$types';
+	import type { PageData } from './$types';
-  import PageContainer from '$lib/components/layout/PageContainer.svelte';
+	import PageContainer from '$lib/components/layout/PageContainer.svelte';
-  import DashboardHeader from '$lib/components/layout/DashboardHeader.svelte';
+	import DashboardHeader from '$lib/components/layout/DashboardHeader.svelte';
-  import WishlistSection from '$lib/components/dashboard/WishlistSection.svelte';
+	import WishlistSection from '$lib/components/dashboard/WishlistSection.svelte';
-  import LocalWishlistsSection from '$lib/components/dashboard/LocalWishlistsSection.svelte';
+	import LocalWishlistsSection from '$lib/components/dashboard/LocalWishlistsSection.svelte';
-  import { enhance } from '$app/forms';
+	import { enhance } from '$app/forms';
-  import { Star } from '@lucide/svelte';
+	import { Star } from 'lucide-svelte';
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  let { data }: { data: PageData } = $props();
+	let { data }: { data: PageData } = $props();
-  function getInitialTheme() {
+	// For anonymous users, get theme from localStorage
-    if (data.isAuthenticated) {
+	function getInitialTheme() {
-      return data.user?.dashboardTheme || 'none';
+		if (data.isAuthenticated) {
-    } else {
+			return data.user?.dashboardTheme || 'none';
-      if (typeof window !== 'undefined') {
+		} else {
-        return localStorage.getItem('dashboardTheme') || 'none';
+			// Anonymous user - get from localStorage
-      }
+			if (typeof window !== 'undefined') {
-      return 'none';
+				return localStorage.getItem('dashboardTheme') || 'none';
-    }
+			}
-  }
+			return 'none';
 		}
 	}
-  function getInitialColor() {
+	// For anonymous users, get color from localStorage
-    if (data.isAuthenticated) {
+	function getInitialColor() {
-      return data.user?.dashboardColor || null;
+		if (data.isAuthenticated) {
-    } else {
+			return data.user?.dashboardColor || null;
-      if (typeof window !== 'undefined') {
+		} else {
-        return localStorage.getItem('dashboardColor') || null;
+			// Anonymous user - get from localStorage
-      }
+			if (typeof window !== 'undefined') {
-      return null;
+				return localStorage.getItem('dashboardColor') || null;
-    }
+			}
-  }
+			return null;
 		}
 	}
-  let currentTheme = $state(getInitialTheme());
+	let currentTheme = $state(getInitialTheme());
-  let currentColor = $state(getInitialColor());
+	let currentColor = $state(getInitialColor());
-  function handleThemeUpdate(theme: string | null) {
+	// Save to localStorage when theme changes for anonymous users
-    currentTheme = theme || 'none';
+	function handleThemeUpdate(theme: string | null) {
 		currentTheme = theme || 'none';
-    if (!data.isAuthenticated && typeof window !== 'undefined') {
+		if (!data.isAuthenticated && typeof window !== 'undefined') {
-      localStorage.setItem('dashboardTheme', currentTheme);
+			localStorage.setItem('dashboardTheme', currentTheme);
-    }
+		}
-  }
+	}
-  function handleColorUpdate(color: string | null) {
+	// Save to localStorage when color changes for anonymous users
-    currentColor = color;
+	function handleColorUpdate(color: string | null) {
 		currentColor = color;
-    if (!data.isAuthenticated && typeof window !== 'undefined') {
+		if (!data.isAuthenticated && typeof window !== 'undefined') {
-      if (color) {
+			if (color) {
-        localStorage.setItem('dashboardColor', color);
+				localStorage.setItem('dashboardColor', color);
-      } else {
+			} else {
-        localStorage.removeItem('dashboardColor');
+				localStorage.removeItem('dashboardColor');
-      }
+			}
-    }
+		}
-  }
+	}
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  const myWishlists = $derived(() => data.wishlists || []);
+	// Only owned wishlists for "My Wishlists"
 	const myWishlists = $derived(() => data.wishlists || []);
-  const claimedWishlists = $derived(() => {
+	// Claimed wishlists (those with ownerToken, meaning they were claimed via edit link)
-    return (data.savedWishlists || [])
+	const claimedWishlists = $derived(() => {
-      .filter((saved) => saved.wishlist?.ownerToken)
+		return (data.savedWishlists || [])
-      .map((saved) => ({
+			.filter(saved => saved.wishlist?.ownerToken)
-        ...saved.wishlist,
+			.map(saved => ({
-        isFavorite: saved.isFavorite,
+				...saved.wishlist,
-        isClaimed: true,
+				isFavorite: saved.isFavorite,
-        savedId: saved.id
+				isClaimed: true,
-      }));
+				savedId: saved.id
-  });
+			}));
 	});
-  const savedWishlists = $derived(() => {
+	// Saved wishlists are those WITHOUT ownerToken (saved from public view only)
-    return (data.savedWishlists || []).filter((saved) => !saved.wishlist?.ownerToken);
+	const savedWishlists = $derived(() => {
-  });
+		return (data.savedWishlists || []).filter(saved => !saved.wishlist?.ownerToken);
 	});
 </script>
 <PageContainer theme={currentTheme} themeColor={currentColor}>
-  <DashboardHeader
+	<DashboardHeader
-    userName={data.user?.name}
+		userName={data.user?.name}
-    userEmail={data.user?.email}
+		userEmail={data.user?.email}
-    dashboardTheme={currentTheme}
+		dashboardTheme={currentTheme}
-    dashboardColor={currentColor}
+		dashboardColor={currentColor}
-    isAuthenticated={data.isAuthenticated}
+		isAuthenticated={data.isAuthenticated}
-    onThemeUpdate={handleThemeUpdate}
+		onThemeUpdate={handleThemeUpdate}
-    onColorUpdate={handleColorUpdate}
+		onColorUpdate={handleColorUpdate}
-  />
+	/>
-  {#if data.isAuthenticated}
+	<!-- Local Wishlists Section (for anonymous and authenticated users) -->
-    <WishlistSection
+	<LocalWishlistsSection
-      title={t.dashboard.myWishlists}
+		isAuthenticated={data.isAuthenticated}
-      description={t.dashboard.myWishlistsDescription}
+		fallbackColor={currentColor}
-      items={myWishlists()}
+		fallbackTheme={currentTheme}
-      emptyMessage={t.dashboard.emptyWishlists}
+	/>
      emptyActionLabel={t.dashboard.emptyWishlistsAction}
      emptyActionHref="/"
      showCreateButton={true}
      fallbackColor={currentColor}
      fallbackTheme={currentTheme}
    >
      {#snippet actions(wishlist, unlocked)}
        <div class="flex gap-2 flex-wrap">
          <form
            method="POST"
            action="?/toggleFavorite"
            use:enhance={() => {
              return async ({ update }) => {
                await update({ reset: false });
              };
            }}
          >
            <input type="hidden" name="wishlistId" value={wishlist.id} />
            <input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
            <Button type="submit" size="sm" variant="outline">
              <Star class={wishlist.isFavorite ? 'fill-yellow-500 text-yellow-500' : ''} />
            </Button>
          </form>
          <Button
            size="sm"
            onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
          >
            {t.dashboard.manage}
          </Button>
          <Button
            size="sm"
            variant="outline"
            onclick={() => {
              navigator.clipboard.writeText(
                `${window.location.origin}/wishlist/${wishlist.publicToken}`
              );
            }}
          >
            {t.dashboard.copyLink}
          </Button>
          {#if unlocked}
            <form
              method="POST"
              action="?/deleteWishlist"
              use:enhance={() => {
                return async ({ update }) => {
                  await update({ reset: false });
                };
              }}
            >
              <input type="hidden" name="wishlistId" value={wishlist.id} />
              <Button type="submit" size="sm" variant="destructive">
                {t.dashboard.delete}
              </Button>
            </form>
          {/if}
        </div>
      {/snippet}
    </WishlistSection>
-    <LocalWishlistsSection
+	{#if data.isAuthenticated}
-      isAuthenticated={data.isAuthenticated}
+		<!-- My Wishlists Section -->
-      fallbackColor={currentColor}
+		<WishlistSection
-      fallbackTheme={currentTheme}
+		title={t.dashboard.myWishlists}
-    />
+		description={t.dashboard.myWishlistsDescription}
 		items={myWishlists()}
 		emptyMessage={t.dashboard.emptyWishlists}
 		emptyActionLabel={t.dashboard.emptyWishlistsAction}
 		emptyActionHref="/"
 		showCreateButton={true}
 		fallbackColor={currentColor}
 		fallbackTheme={currentTheme}
 	>
 		{#snippet actions(wishlist, unlocked)}
 			<div class="flex gap-2 flex-wrap">
 				<form method="POST" action="?/toggleFavorite" use:enhance={() => {
 					return async ({ update }) => {
 						await update({ reset: false });
 					};
 				}}>
 					<input type="hidden" name="wishlistId" value={wishlist.id} />
 					<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
 					<Button type="submit" size="sm" variant="outline">
 						<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
 					</Button>
 				</form>
 				<Button
 					size="sm"
 					onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
 				>
 					{t.dashboard.manage}
 				</Button>
 				<Button
 					size="sm"
 					variant="outline"
 					onclick={() => {
 						navigator.clipboard.writeText(
 							`${window.location.origin}/wishlist/${wishlist.publicToken}`
 						);
 					}}
 				>
 					{t.dashboard.copyLink}
 				</Button>
 				{#if unlocked}
 					<form method="POST" action="?/deleteWishlist" use:enhance={() => {
 						return async ({ update }) => {
 							await update({ reset: false });
 						};
 					}}>
 						<input type="hidden" name="wishlistId" value={wishlist.id} />
 						<Button type="submit" size="sm" variant="destructive">
 							{t.dashboard.delete}
 						</Button>
 					</form>
 				{/if}
 			</div>
 		{/snippet}
 	</WishlistSection>
-    <WishlistSection
+	<!-- Claimed Wishlists Section -->
-      title={t.dashboard.claimedWishlists}
+	<WishlistSection
-      description={t.dashboard.claimedWishlistsDescription}
+		title={t.dashboard.claimedWishlists}
-      items={claimedWishlists()}
+		description={t.dashboard.claimedWishlistsDescription}
-      emptyMessage={t.dashboard.emptyClaimedWishlists}
+		items={claimedWishlists()}
-      emptyDescription={t.dashboard.emptyClaimedWishlistsDescription}
+		emptyMessage={t.dashboard.emptyClaimedWishlists}
-      hideIfEmpty={true}
+		emptyDescription={t.dashboard.emptyClaimedWishlistsDescription}
-      fallbackColor={currentColor}
+		hideIfEmpty={true}
-      fallbackTheme={currentTheme}
+		fallbackColor={currentColor}
-    >
+		fallbackTheme={currentTheme}
-      {#snippet actions(wishlist, unlocked)}
+	>
-        <div class="flex gap-2 flex-wrap">
+		{#snippet actions(wishlist, unlocked)}
-          <form
+			<div class="flex gap-2 flex-wrap">
-            method="POST"
+				<form method="POST" action="?/toggleSavedFavorite" use:enhance={() => {
-            action="?/toggleSavedFavorite"
+					return async ({ update }) => {
-            use:enhance={() => {
+						await update({ reset: false });
-              return async ({ update }) => {
+					};
-                await update({ reset: false });
+				}}>
-              };
+					<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
-            }}
+					<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
-          >
+					<Button type="submit" size="sm" variant="outline">
-            <input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
+						<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
-            <input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
+					</Button>
-            <Button type="submit" size="sm" variant="outline">
+				</form>
-              <Star class={wishlist.isFavorite ? 'fill-yellow-500 text-yellow-500' : ''} />
+				<Button
-            </Button>
+					size="sm"
-          </form>
+					onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
-          <Button
+				>
-            size="sm"
+					{t.dashboard.manage}
-            onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
+				</Button>
-          >
+				<Button
-            {t.dashboard.manage}
+					size="sm"
-          </Button>
+					variant="outline"
-          <Button
+					onclick={() => {
-            size="sm"
+						navigator.clipboard.writeText(
-            variant="outline"
+							`${window.location.origin}/wishlist/${wishlist.publicToken}`
-            onclick={() => {
+						);
-              navigator.clipboard.writeText(
+					}}
-                `${window.location.origin}/wishlist/${wishlist.publicToken}`
+				>
-              );
+					{t.dashboard.copyLink}
-            }}
+				</Button>
-          >
+				{#if unlocked}
-            {t.dashboard.copyLink}
+					<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
-          </Button>
+						return async ({ update }) => {
-          {#if unlocked}
+							await update({ reset: false });
-            <form
+						};
-              method="POST"
+					}}>
-              action="?/unsaveWishlist"
+						<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
-              use:enhance={() => {
+						<Button type="submit" size="sm" variant="destructive">
-                return async ({ update }) => {
+							{t.dashboard.unclaim}
-                  await update({ reset: false });
+						</Button>
-                };
+					</form>
-              }}
+				{/if}
-            >
+			</div>
-              <input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
+		{/snippet}
-              <Button type="submit" size="sm" variant="destructive">
+	</WishlistSection>
                {t.dashboard.unclaim}
              </Button>
            </form>
          {/if}
        </div>
      {/snippet}
    </WishlistSection>
-    <WishlistSection
+	<!-- Saved Wishlists Section -->
-      title={t.dashboard.savedWishlists}
+	<WishlistSection
-      description={t.dashboard.savedWishlistsDescription}
+		title={t.dashboard.savedWishlists}
-      items={savedWishlists()}
+		description={t.dashboard.savedWishlistsDescription}
-      emptyMessage={t.dashboard.emptySavedWishlists}
+		items={savedWishlists()}
-      emptyDescription={t.dashboard.emptySavedWishlistsDescription}
+		emptyMessage={t.dashboard.emptySavedWishlists}
-      fallbackColor={currentColor}
+		emptyDescription={t.dashboard.emptySavedWishlistsDescription}
-      fallbackTheme={currentTheme}
+		fallbackColor={currentColor}
-      hideIfEmpty={true}
+		fallbackTheme={currentTheme}
-    >
+	>
-      {#snippet actions(saved, unlocked)}
+		{#snippet actions(saved, unlocked)}
-        <div class="flex gap-2 flex-wrap">
+			<div class="flex gap-2 flex-wrap">
-          <form
+				<form method="POST" action="?/toggleSavedFavorite" use:enhance={() => {
-            method="POST"
+					return async ({ update }) => {
-            action="?/toggleSavedFavorite"
+						await update({ reset: false });
-            use:enhance={() => {
+					};
-              return async ({ update }) => {
+				}}>
-                await update({ reset: false });
+					<input type="hidden" name="savedWishlistId" value={saved.id} />
-              };
+					<input type="hidden" name="isFavorite" value={saved.isFavorite} />
-            }}
+					<Button type="submit" size="sm" variant="outline">
-          >
+						<Star class={saved.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
-            <input type="hidden" name="savedWishlistId" value={saved.id} />
+					</Button>
-            <input type="hidden" name="isFavorite" value={saved.isFavorite} />
+				</form>
-            <Button type="submit" size="sm" variant="outline">
+				<Button
-              <Star class={saved.isFavorite ? 'fill-yellow-500 text-yellow-500' : ''} />
+					size="sm"
-            </Button>
+					onclick={() => (window.location.href = `/wishlist/${saved.wishlist.publicToken}`)}
-          </form>
+				>
-          <Button
+					{t.dashboard.viewWishlist}
-            size="sm"
+				</Button>
-            onclick={() => (window.location.href = `/wishlist/${saved.wishlist.publicToken}`)}
+				{#if unlocked}
-          >
+					<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
-            {t.dashboard.viewWishlist}
+						return async ({ update }) => {
-          </Button>
+							await update({ reset: false });
-          {#if unlocked}
+						};
-            <form
+					}}>
-              method="POST"
+						<input type="hidden" name="savedWishlistId" value={saved.id} />
-              action="?/unsaveWishlist"
+						<Button type="submit" size="sm" variant="destructive">
-              use:enhance={() => {
+							{t.dashboard.unsave}
-                return async ({ update }) => {
+						</Button>
-                  await update({ reset: false });
+					</form>
-                };
+				{/if}
-              }}
+			</div>
-            >
+		{/snippet}
-              <input type="hidden" name="savedWishlistId" value={saved.id} />
+	</WishlistSection>
-              <Button type="submit" size="sm" variant="destructive">
+	{/if}
                {t.dashboard.unsave}
              </Button>
            </form>
          {/if}
        </div>
      {/snippet}
    </WishlistSection>
  {/if}
 </PageContainer>
@@ -2,23 +2,23 @@ import type { PageServerLoad } from './$types';
 import { env } from '$env/dynamic/private';
 export const load: PageServerLoad = async ({ url }) => {
-  const registered = url.searchParams.get('registered');
+	const registered = url.searchParams.get('registered');
-  const error = url.searchParams.get('error');
+	const error = url.searchParams.get('error');
-  // Determine which OAuth providers are available
+	// Determine which OAuth providers are available
-  const oauthProviders = [];
+	const oauthProviders = [];
-  if (env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET) {
+	if (env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET) {
-    oauthProviders.push({ id: 'google', name: 'Google' });
+		oauthProviders.push({ id: 'google', name: 'Google' });
-  }
+	}
-  if (env.AUTHENTIK_CLIENT_ID && env.AUTHENTIK_CLIENT_SECRET && env.AUTHENTIK_ISSUER) {
+	if (env.AUTHENTIK_CLIENT_ID && env.AUTHENTIK_CLIENT_SECRET && env.AUTHENTIK_ISSUER) {
-    oauthProviders.push({ id: 'authentik', name: 'Authentik' });
+		oauthProviders.push({ id: 'authentik', name: 'Authentik' });
-  }
+	}
-  return {
+	return {
-    registered: registered === 'true',
+		registered: registered === 'true',
-    error: error,
+		error: error,
-    oauthProviders
+		oauthProviders
-  };
+	};
 };
@@ -1,117 +1,107 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import {
+	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
-    Card,
+	import { Input } from '$lib/components/ui/input';
-    CardContent,
+	import { Label } from '$lib/components/ui/label';
-    CardDescription,
+	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
-    CardHeader,
+	import { LanguageToggle } from '$lib/components/ui/language-toggle';
-    CardTitle
+	import type { PageData } from './$types';
-  } from '$lib/components/ui/card';
+	import { signIn } from '@auth/sveltekit/client';
-  import { Input } from '$lib/components/ui/input';
+	import { languageStore } from '$lib/stores/language.svelte';
  import { Label } from '$lib/components/ui/label';
  import { ThemeToggle } from '$lib/components/ui/theme-toggle';
  import { LanguageToggle } from '$lib/components/ui/language-toggle';
  import type { PageData } from './$types';
  import { signIn } from '@auth/sveltekit/client';
  import { languageStore } from '$lib/stores/language.svelte';
-  let { data }: { data: PageData } = $props();
+	let { data }: { data: PageData } = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  let isSubmitting = $state(false);
+	let isSubmitting = $state(false);
-  async function handleSubmit(e: SubmitEvent) {
+	async function handleSubmit(e: SubmitEvent) {
-    e.preventDefault();
+		e.preventDefault();
-    isSubmitting = true;
+		isSubmitting = true;
-    const formData = new FormData(e.target as HTMLFormElement);
+		const formData = new FormData(e.target as HTMLFormElement);
-    const username = formData.get('username') as string;
+		const username = formData.get('username') as string;
-    const password = formData.get('password') as string;
+		const password = formData.get('password') as string;
-    try {
+		try {
-      await signIn('credentials', {
+			await signIn('credentials', {
-        username,
+				username,
-        password,
+				password,
-        callbackUrl: '/dashboard'
+				callbackUrl: '/dashboard'
-      });
+			});
-    } catch (error) {
+		} catch (error) {
-      console.error('Sign in error:', error);
+			console.error('Sign in error:', error);
-    } finally {
+		} finally {
-      isSubmitting = false;
+			isSubmitting = false;
-    }
+		}
-  }
+	}
 </script>
 <div class="min-h-screen flex items-center justify-center p-4">
-  <div class="absolute top-4 right-4 flex items-center gap-1 sm:gap-2">
+	<div class="absolute top-4 right-4 flex items-center gap-1 sm:gap-2">
-    <LanguageToggle />
+		<LanguageToggle />
-    <ThemeToggle />
+		<ThemeToggle />
-  </div>
+	</div>
-  <Card class="w-full max-w-md">
+	<Card class="w-full max-w-md">
-    <CardHeader>
+		<CardHeader>
-      <CardTitle class="text-2xl">{t.auth.welcomeBack}</CardTitle>
+			<CardTitle class="text-2xl">{t.auth.welcomeBack}</CardTitle>
-      <CardDescription>{t.auth.signInPrompt}</CardDescription>
+			<CardDescription>{t.auth.signInPrompt}</CardDescription>
-    </CardHeader>
+		</CardHeader>
-    <CardContent class="space-y-4">
+		<CardContent class="space-y-4">
-      {#if data.registered}
+			{#if data.registered}
-        <div
+				<div class="bg-green-50 border border-green-200 text-green-700 dark:bg-green-950 dark:border-green-800 dark:text-green-300 px-4 py-3 rounded">
-          class="bg-green-50 border border-green-200 text-green-700 dark:bg-green-950 dark:border-green-800 dark:text-green-300 px-4 py-3 rounded"
+					Account created successfully! Please sign in.
-        >
+				</div>
-          Account created successfully! Please sign in.
+			{/if}
        </div>
      {/if}
-      {#if data.error}
+			{#if data.error}
-        <div
+				<div class="bg-red-50 border border-red-200 text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300 px-4 py-3 rounded">
-          class="bg-red-50 border border-red-200 text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300 px-4 py-3 rounded"
+					Invalid username or password
-        >
+				</div>
-          Invalid username or password
+			{/if}
        </div>
      {/if}
-      <form onsubmit={handleSubmit} class="space-y-4">
+			<form onsubmit={handleSubmit} class="space-y-4">
-        <div class="space-y-2">
+				<div class="space-y-2">
-          <Label for="username">{t.form.username}</Label>
+					<Label for="username">{t.form.username}</Label>
-          <Input id="username" name="username" type="text" required />
+					<Input id="username" name="username" type="text" required />
-        </div>
+				</div>
-        <div class="space-y-2">
+				<div class="space-y-2">
-          <Label for="password">{t.form.password}</Label>
+					<Label for="password">{t.form.password}</Label>
-          <Input id="password" name="password" type="password" required />
+					<Input id="password" name="password" type="password" required />
-        </div>
+				</div>
-        <Button type="submit" class="w-full" disabled={isSubmitting}>
+				<Button type="submit" class="w-full" disabled={isSubmitting}>
-          {isSubmitting ? t.auth.signingIn : t.auth.signIn}
+					{isSubmitting ? t.auth.signingIn : t.auth.signIn}
-        </Button>
+				</Button>
-      </form>
+			</form>
-      {#if data.oauthProviders.length > 0}
+			{#if data.oauthProviders.length > 0}
-        <div class="relative">
+				<div class="relative">
-          <div class="absolute inset-0 flex items-center">
+					<div class="absolute inset-0 flex items-center">
-            <span class="w-full border-t"></span>
+						<span class="w-full border-t"></span>
-          </div>
+					</div>
-          <div class="relative flex justify-center text-xs uppercase">
+					<div class="relative flex justify-center text-xs uppercase">
-            <span class="bg-card px-2 text-muted-foreground">{t.auth.continueWith}</span>
+						<span class="bg-card px-2 text-muted-foreground">{t.auth.continueWith}</span>
-          </div>
+					</div>
-        </div>
+				</div>
-        {#each data.oauthProviders as provider (provider.id)}
+				{#each data.oauthProviders as provider}
-          <Button
+					<Button
-            type="button"
+						type="button"
-            variant="outline"
+						variant="outline"
-            class="w-full"
+						class="w-full"
-            onclick={() => signIn(provider.id, { callbackUrl: '/dashboard' })}
+						onclick={() => signIn(provider.id, { callbackUrl: '/dashboard' })}
-          >
+					>
-            {t.auth.signIn} with {provider.name}
+						{t.auth.signIn} with {provider.name}
-          </Button>
+					</Button>
-        {/each}
+				{/each}
-      {/if}
+			{/if}
-      <div class="text-center text-sm text-muted-foreground">
+			<div class="text-center text-sm text-muted-foreground">
-        {t.auth.dontHaveAccount}
+				{t.auth.dontHaveAccount}
-        <a href="/signup" class="text-primary hover:underline">{t.auth.signUp}</a>
+				<a href="/signup" class="text-primary hover:underline">{t.auth.signUp}</a>
-      </div>
+			</div>
-    </CardContent>
+		</CardContent>
-  </Card>
+	</Card>
 </div>
@@ -1,76 +1,68 @@
 import { fail, redirect } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { db } from '$lib/server/db';
-import { users, type NewUser } from '$lib/db/schema';
+import { users } from '$lib/server/schema';
 import { eq } from 'drizzle-orm';
 import bcrypt from 'bcrypt';
 import { env } from '$env/dynamic/private';
 import { sanitizeString, sanitizeUsername } from '$lib/server/validation';
 export const load: PageServerLoad = async () => {
-  // Determine which OAuth providers are available
+	// Determine which OAuth providers are available
-  const oauthProviders = [];
+	const oauthProviders = [];
-  if (env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET) {
+	if (env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET) {
-    oauthProviders.push({ id: 'google', name: 'Google' });
+		oauthProviders.push({ id: 'google', name: 'Google' });
-  }
+	}
-  if (env.AUTHENTIK_CLIENT_ID && env.AUTHENTIK_CLIENT_SECRET && env.AUTHENTIK_ISSUER) {
+	if (env.AUTHENTIK_CLIENT_ID && env.AUTHENTIK_CLIENT_SECRET && env.AUTHENTIK_ISSUER) {
-    oauthProviders.push({ id: 'authentik', name: 'Authentik' });
+		oauthProviders.push({ id: 'authentik', name: 'Authentik' });
-  }
+	}
-  return {
+	return {
-    oauthProviders
+		oauthProviders
-  };
+	};
 };
 export const actions: Actions = {
-  default: async ({ request }) => {
+	default: async ({ request }) => {
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const name = formData.get('name') as string;
+		const name = formData.get('name') as string;
-    const username = formData.get('username') as string;
+		const username = formData.get('username') as string;
-    const password = formData.get('password') as string;
+		const password = formData.get('password') as string;
-    const confirmPassword = formData.get('confirmPassword') as string;
+		const confirmPassword = formData.get('confirmPassword') as string;
-    let sanitizedUsername: string;
+		if (!name?.trim()) {
-    let sanitizedName: string | null;
+			return fail(400, { error: 'Name is required', name, username });
 		}
-    try {
+		if (!username?.trim()) {
-      sanitizedName = sanitizeString(name, 100);
+			return fail(400, { error: 'Username is required', name, username });
-      sanitizedUsername = sanitizeUsername(username);
+		}
  } catch {
    return fail(400, { error: 'Invalid input', name, username });
  }
-    if (!sanitizedName) {
+		if (!password || password.length < 8) {
-      return fail(400, { error: 'Name is required', name, username });
+			return fail(400, { error: 'Password must be at least 8 characters', name, username });
-    }
+		}
-    if (!password || password.length < 8) {
+		if (password !== confirmPassword) {
-      return fail(400, { error: 'Password must be at least 8 characters', name, username });
+			return fail(400, { error: 'Passwords do not match', name, username });
-    }
+		}
-    if (password !== confirmPassword) {
+		const existingUser = await db.query.users.findFirst({
-      return fail(400, { error: 'Passwords do not match', name, username });
+			where: eq(users.username, username.trim().toLowerCase())
-    }
+		});
-    const existingUser = await db.query.users.findFirst({
+		if (existingUser) {
-      where: eq(users.username, sanitizedUsername)
+			return fail(400, { error: 'Username already taken', name, username });
-    });
+		}
-    if (existingUser) {
+		const hashedPassword = await bcrypt.hash(password, 10);
      return fail(400, { error: 'Username already taken', name, username });
    }
-    const hashedPassword = await bcrypt.hash(password, 14);
+		await db.insert(users).values({
 			name: name.trim(),
 			username: username.trim().toLowerCase(),
 			password: hashedPassword
 		});
-    const newUser: NewUser = {
+		throw redirect(303, '/signin?registered=true');
-      name: sanitizedName,
+	}
      username: sanitizedUsername,
      password: hashedPassword
    };
    await db.insert(users).values(newUser);
    throw redirect(303, '/signin?registered=true');
  }
 };
@@ -1,100 +1,86 @@
 <script lang="ts">
-  import { Button } from '$lib/components/ui/button';
+	import { Button } from '$lib/components/ui/button';
-  import {
+	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
-    Card,
+	import { Input } from '$lib/components/ui/input';
-    CardContent,
+	import { Label } from '$lib/components/ui/label';
-    CardDescription,
+	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
-    CardHeader,
+	import { LanguageToggle } from '$lib/components/ui/language-toggle';
-    CardTitle
+	import type { ActionData, PageData } from './$types';
-  } from '$lib/components/ui/card';
+	import { signIn } from '@auth/sveltekit/client';
-  import { Input } from '$lib/components/ui/input';
+	import { languageStore } from '$lib/stores/language.svelte';
  import { Label } from '$lib/components/ui/label';
  import { ThemeToggle } from '$lib/components/ui/theme-toggle';
  import { LanguageToggle } from '$lib/components/ui/language-toggle';
  import type { ActionData, PageData } from './$types';
  import { signIn } from '@auth/sveltekit/client';
  import { languageStore } from '$lib/stores/language.svelte';
-  let { form, data }: { form: ActionData; data: PageData } = $props();
+	let { form, data }: { form: ActionData; data: PageData } = $props();
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
 </script>
 <div class="min-h-screen flex items-center justify-center p-4">
-  <div class="absolute top-4 right-4 flex items-center gap-1 sm:gap-2">
+	<div class="absolute top-4 right-4 flex items-center gap-1 sm:gap-2">
-    <LanguageToggle />
+		<LanguageToggle />
-    <ThemeToggle />
+		<ThemeToggle />
-  </div>
+	</div>
-  <Card class="w-full max-w-md">
+	<Card class="w-full max-w-md">
-    <CardHeader>
+		<CardHeader>
-      <CardTitle class="text-2xl">{t.auth.createAccount}</CardTitle>
+			<CardTitle class="text-2xl">{t.auth.createAccount}</CardTitle>
-      <CardDescription>{t.auth.signUpPrompt}</CardDescription>
+			<CardDescription>{t.auth.signUpPrompt}</CardDescription>
-    </CardHeader>
+		</CardHeader>
-    <CardContent class="space-y-4">
+		<CardContent class="space-y-4">
-      {#if form?.error}
+			{#if form?.error}
-        <div
+				<div class="bg-red-50 border border-red-200 text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300 px-4 py-3 rounded">
-          class="bg-red-50 border border-red-200 text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300 px-4 py-3 rounded"
+					{form.error}
-        >
+				</div>
-          {form.error}
+			{/if}
        </div>
      {/if}
-      <form method="POST" class="space-y-4">
+			<form method="POST" class="space-y-4">
-        <div class="space-y-2">
+				<div class="space-y-2">
-          <Label for="name">{t.form.name}</Label>
+					<Label for="name">{t.form.name}</Label>
-          <Input id="name" name="name" type="text" required value={form?.name || ''} />
+					<Input id="name" name="name" type="text" required value={form?.name || ''} />
-        </div>
+				</div>
-        <div class="space-y-2">
+				<div class="space-y-2">
-          <Label for="username">{t.form.username}</Label>
+					<Label for="username">{t.form.username}</Label>
-          <Input id="username" name="username" type="text" required value={form?.username || ''} />
+					<Input id="username" name="username" type="text" required value={form?.username || ''} />
-        </div>
+				</div>
-        <div class="space-y-2">
+				<div class="space-y-2">
-          <Label for="password">{t.form.password}</Label>
+					<Label for="password">{t.form.password}</Label>
-          <Input id="password" name="password" type="password" required minlength={8} />
+					<Input id="password" name="password" type="password" required minlength={8} />
-        </div>
+				</div>
-        <div class="space-y-2">
+				<div class="space-y-2">
-          <Label for="confirmPassword">{t.form.confirmPassword}</Label>
+					<Label for="confirmPassword">{t.form.confirmPassword}</Label>
-          <Input
+					<Input id="confirmPassword" name="confirmPassword" type="password" required minlength={8} />
-            id="confirmPassword"
+				</div>
            name="confirmPassword"
            type="password"
            required
            minlength={8}
          />
        </div>
-        <Button type="submit" class="w-full">{t.auth.signUp}</Button>
+				<Button type="submit" class="w-full">{t.auth.signUp}</Button>
-      </form>
+			</form>
-      {#if data.oauthProviders.length > 0}
+			{#if data.oauthProviders.length > 0}
-        <div class="relative">
+				<div class="relative">
-          <div class="absolute inset-0 flex items-center">
+					<div class="absolute inset-0 flex items-center">
-            <span class="w-full border-t"></span>
+						<span class="w-full border-t"></span>
-          </div>
+					</div>
-          <div class="relative flex justify-center text-xs uppercase">
+					<div class="relative flex justify-center text-xs uppercase">
-            <span class="bg-card px-2 text-muted-foreground">{t.auth.continueWith}</span>
+						<span class="bg-card px-2 text-muted-foreground">{t.auth.continueWith}</span>
-          </div>
+					</div>
-        </div>
+				</div>
-        {#each data.oauthProviders as provider (provider.id)}
+				{#each data.oauthProviders as provider}
-          <Button
+					<Button
-            type="button"
+						type="button"
-            variant="outline"
+						variant="outline"
-            class="w-full"
+						class="w-full"
-            onclick={() => signIn(provider.id, { callbackUrl: '/dashboard' })}
+						onclick={() => signIn(provider.id, { callbackUrl: '/dashboard' })}
-          >
+					>
-            {t.auth.signUp} with {provider.name}
+						{t.auth.signUp} with {provider.name}
-          </Button>
+					</Button>
-        {/each}
+				{/each}
-      {/if}
+			{/if}
-      <div class="text-center text-sm text-muted-foreground">
+			<div class="text-center text-sm text-muted-foreground">
-        {t.auth.alreadyHaveAccount}
+				{t.auth.alreadyHaveAccount}
-        <a href="/signin" class="text-primary hover:underline">{t.auth.signIn}</a>
+				<a href="/signin" class="text-primary hover:underline">{t.auth.signIn}</a>
-      </div>
+			</div>
-    </CardContent>
+		</CardContent>
-  </Card>
+	</Card>
 </div>
@@ -1,178 +1,186 @@
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad, Actions } from './$types';
 import { db } from '$lib/server/db';
-import { wishlists, items, reservations, savedWishlists, type NewSavedWishlist } from '$lib/db/schema';
+import { wishlists, items, reservations, savedWishlists } from '$lib/server/schema';
 import { eq, and } from 'drizzle-orm';
 export const load: PageServerLoad = async ({ params, locals }) => {
-  const wishlist = await db.query.wishlists.findFirst({
+	const wishlist = await db.query.wishlists.findFirst({
-    where: eq(wishlists.publicToken, params.token),
+		where: eq(wishlists.publicToken, params.token),
-    with: {
+		with: {
-      items: {
+			items: {
-        orderBy: (items, { asc }) => [asc(items.order)],
+				orderBy: (items, { asc }) => [asc(items.order)],
-        with: {
+				with: {
-          reservations: true
+					reservations: true
-        }
+				}
-      }
+			}
-    }
+		}
-  });
+	});
-  if (!wishlist) {
+	if (!wishlist) {
-    throw error(404, 'Wishlist not found');
+		throw error(404, 'Wishlist not found');
-  }
+	}
-  const session = await locals.auth();
+	const session = await locals.auth();
-  let isSaved = false;
+	let isSaved = false;
-  let isClaimed = false;
+	let isClaimed = false;
-  let savedWishlistId: string | null = null;
+	let savedWishlistId: string | null = null;
-  if (session?.user?.id) {
+	if (session?.user?.id) {
-    const saved = await db.query.savedWishlists.findFirst({
+		const saved = await db.query.savedWishlists.findFirst({
-      where: and(
+			where: and(
-        eq(savedWishlists.userId, session.user.id),
+				eq(savedWishlists.userId, session.user.id),
-        eq(savedWishlists.wishlistId, wishlist.id)
+				eq(savedWishlists.wishlistId, wishlist.id)
-      )
+			)
-    });
+		});
-    isSaved = !!saved;
+		isSaved = !!saved;
-    isClaimed = !!saved?.ownerToken;
+		isClaimed = !!saved?.ownerToken; // User has claimed if ownerToken exists in savedWishlists
-    savedWishlistId = saved?.id || null;
+		savedWishlistId = saved?.id || null;
-  }
+	}
-  return {
+	return {
-    wishlist,
+		wishlist,
-    isSaved,
+		isSaved,
-    isClaimed,
+		isClaimed,
-    savedWishlistId,
+		savedWishlistId,
-    isAuthenticated: !!session?.user,
+		isAuthenticated: !!session?.user,
-    currentUserId: session?.user?.id || null
+		currentUserId: session?.user?.id || null
-  };
+	};
 };
 export const actions: Actions = {
-  reserve: async ({ request, locals }) => {
+	reserve: async ({ request, locals }) => {
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const itemId = formData.get('itemId') as string;
+		const itemId = formData.get('itemId') as string;
-    const reserverName = formData.get('reserverName') as string;
+		const reserverName = formData.get('reserverName') as string;
-    if (!itemId) {
+		if (!itemId) {
-      return { success: false, error: 'Item ID is required' };
+			return { success: false, error: 'Item ID is required' };
-    }
+		}
-    const session = await locals.auth();
+		const session = await locals.auth();
-    const existingReservation = await db.query.reservations.findFirst({
+		const existingReservation = await db.query.reservations.findFirst({
-      where: eq(reservations.itemId, itemId)
+			where: eq(reservations.itemId, itemId)
-    });
+		});
-    if (existingReservation) {
+		if (existingReservation) {
-      return { success: false, error: 'This item is already reserved' };
+			return { success: false, error: 'This item is already reserved' };
-    }
+		}
-    await db.transaction(async (tx) => {
+		await db.transaction(async (tx) => {
-      await tx.insert(reservations).values({
+			await tx.insert(reservations).values({
-        itemId,
+				itemId,
-        userId: session?.user?.id || null,
+				userId: session?.user?.id || null,
-        reserverName: reserverName?.trim() || null
+				reserverName: reserverName?.trim() || null
-      });
+			});
-      await tx.update(items).set({ isReserved: true }).where(eq(items.id, itemId));
+			await tx
-    });
+				.update(items)
 				.set({ isReserved: true })
 				.where(eq(items.id, itemId));
 		});
-    return { success: true };
+		return { success: true };
-  },
+	},
-  unreserve: async ({ request, locals }) => {
+	unreserve: async ({ request, locals }) => {
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const itemId = formData.get('itemId') as string;
+		const itemId = formData.get('itemId') as string;
-    if (!itemId) {
+		if (!itemId) {
-      return { success: false, error: 'Item ID is required' };
+			return { success: false, error: 'Item ID is required' };
-    }
+		}
-    const session = await locals.auth();
+		const session = await locals.auth();
-    const reservation = await db.query.reservations.findFirst({
+		const reservation = await db.query.reservations.findFirst({
-      where: eq(reservations.itemId, itemId)
+			where: eq(reservations.itemId, itemId)
-    });
+		});
-    if (!reservation) {
+		if (!reservation) {
-      return { success: false, error: 'Reservation not found' };
+			return { success: false, error: 'Reservation not found' };
-    }
+		}
-    if (reservation.userId) {
+		if (reservation.userId) {
-      if (!session?.user?.id || session.user.id !== reservation.userId) {
+			if (!session?.user?.id || session.user.id !== reservation.userId) {
-        return {
+				return {
-          success: false,
+					success: false,
-          error: 'You can only cancel your own reservations'
+					error: 'You can only cancel your own reservations'
-        };
+				};
-      }
+			}
-    }
+		}
-    await db.transaction(async (tx) => {
+		await db.transaction(async (tx) => {
-      await tx.delete(reservations).where(eq(reservations.itemId, itemId));
+			await tx.delete(reservations).where(eq(reservations.itemId, itemId));
-      await tx.update(items).set({ isReserved: false }).where(eq(items.id, itemId));
+			await tx
-    });
+				.update(items)
 				.set({ isReserved: false })
 				.where(eq(items.id, itemId));
 		});
-    return { success: true };
+		return { success: true };
-  },
+	},
-  saveWishlist: async ({ request, locals }) => {
+	saveWishlist: async ({ request, locals, params }) => {
-    const session = await locals.auth();
+		const session = await locals.auth();
-    if (!session?.user?.id) {
+		if (!session?.user?.id) {
-      return { success: false, error: 'You must be logged in to save wishlists' };
+			return { success: false, error: 'You must be logged in to save wishlists' };
-    }
+		}
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const wishlistId = formData.get('wishlistId') as string;
+		const wishlistId = formData.get('wishlistId') as string;
-    if (!wishlistId) {
+		if (!wishlistId) {
-      return { success: false, error: 'Wishlist ID is required' };
+			return { success: false, error: 'Wishlist ID is required' };
-    }
+		}
-    const existing = await db.query.savedWishlists.findFirst({
+		const existing = await db.query.savedWishlists.findFirst({
-      where: and(
+			where: and(
-        eq(savedWishlists.userId, session.user.id),
+				eq(savedWishlists.userId, session.user.id),
-        eq(savedWishlists.wishlistId, wishlistId)
+				eq(savedWishlists.wishlistId, wishlistId)
-      )
+			)
-    });
+		});
-    if (existing) {
+		if (existing) {
-      return { success: false, error: 'Wishlist already saved' };
+			return { success: false, error: 'Wishlist already saved' };
-    }
+		}
-    // Save without ownerToken - user is accessing via public link, so no edit access
+		// Save without ownerToken - user is accessing via public link, so no edit access
-    const newSavedWishlist: NewSavedWishlist = {
+		await db.insert(savedWishlists).values({
-      userId: session.user.id,
+			userId: session.user.id,
-      wishlistId,
+			wishlistId,
-      ownerToken: null // Explicitly set to null - no edit access from reservation view
+			ownerToken: null // Explicitly set to null - no edit access from reservation view
-    };
+		});
    await db.insert(savedWishlists).values(newSavedWishlist);
-    return { success: true };
+		return { success: true };
-  },
+	},
-  unsaveWishlist: async ({ request, locals }) => {
+	unsaveWishlist: async ({ request, locals }) => {
-    const session = await locals.auth();
+		const session = await locals.auth();
-    if (!session?.user?.id) {
+		if (!session?.user?.id) {
-      return { success: false, error: 'You must be logged in' };
+			return { success: false, error: 'You must be logged in' };
-    }
+		}
-    const formData = await request.formData();
+		const formData = await request.formData();
-    const savedWishlistId = formData.get('savedWishlistId') as string;
+		const savedWishlistId = formData.get('savedWishlistId') as string;
-    if (!savedWishlistId) {
+		if (!savedWishlistId) {
-      return { success: false, error: 'Saved wishlist ID is required' };
+			return { success: false, error: 'Saved wishlist ID is required' };
-    }
+		}
-    await db
+		await db
-      .delete(savedWishlists)
+			.delete(savedWishlists)
-      .where(
+			.where(
-        and(eq(savedWishlists.id, savedWishlistId), eq(savedWishlists.userId, session.user.id))
+				and(
-      );
+					eq(savedWishlists.id, savedWishlistId),
 					eq(savedWishlists.userId, session.user.id)
 				)
 			);
-    return { success: true };
+		return { success: true };
-  }
+	}
 };
@@ -1,127 +1,136 @@
 <script lang="ts">
-  import {
+	import {
-    Card,
+		Card,
-    CardContent,
+		CardContent,
-    CardDescription,
+		CardDescription,
-    CardTitle
+		CardHeader,
-  } from '$lib/components/ui/card';
+		CardTitle,
-  import { Button } from '$lib/components/ui/button';
+	} from "$lib/components/ui/card";
-  import type { PageData } from './$types';
+	import { Button } from "$lib/components/ui/button";
-  import WishlistItem from '$lib/components/wishlist/WishlistItem.svelte';
+	import type { PageData } from "./$types";
-  import ReservationButton from '$lib/components/wishlist/ReservationButton.svelte';
+	import WishlistItem from "$lib/components/wishlist/WishlistItem.svelte";
-  import PageContainer from '$lib/components/layout/PageContainer.svelte';
+	import ReservationButton from "$lib/components/wishlist/ReservationButton.svelte";
-  import Navigation from '$lib/components/layout/Navigation.svelte';
+	import PageContainer from "$lib/components/layout/PageContainer.svelte";
-  import EmptyState from '$lib/components/layout/EmptyState.svelte';
+	import Navigation from "$lib/components/layout/Navigation.svelte";
-  import { enhance } from '$app/forms';
+	import EmptyState from "$lib/components/layout/EmptyState.svelte";
-  import { getCardStyle } from '$lib/utils/colors';
+	import { enhance } from "$app/forms";
-  import { languageStore } from '$lib/stores/language.svelte';
+	import { getCardStyle } from "$lib/utils/colors";
-  import SearchBar from '$lib/components/ui/SearchBar.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
-  import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
+	import SearchBar from "$lib/components/ui/SearchBar.svelte";
 	import ThemeCard from "$lib/components/themes/ThemeCard.svelte";
-  let { data }: { data: PageData } = $props();
+	let { data }: { data: PageData } = $props();
-  let searchQuery = $state('');
+	let searchQuery = $state('');
-  const t = $derived(languageStore.t);
+	const t = $derived(languageStore.t);
-  const headerCardStyle = $derived(getCardStyle(data.wishlist.color));
+	const headerCardStyle = $derived(getCardStyle(data.wishlist.color));
-  const filteredItems = $derived(
+	const filteredItems = $derived(
-    data.wishlist.items?.filter(
+		data.wishlist.items?.filter(item =>
-      (item) =>
+			item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+			item.description?.toLowerCase().includes(searchQuery.toLowerCase())
-        item.description?.toLowerCase().includes(searchQuery.toLowerCase())
+		) || []
-    ) || []
+	);
  );
 </script>
 <PageContainer maxWidth="4xl" theme={data.wishlist.theme} themeColor={data.wishlist.color}>
-  <Navigation
+	<Navigation
-    isAuthenticated={data.isAuthenticated}
+		isAuthenticated={data.isAuthenticated}
-    showDashboardLink={true}
+		showDashboardLink={true}
-    color={data.wishlist.color}
+	/>
  />
-  <Card style={headerCardStyle}>
+	<Card style={headerCardStyle}>
-    <CardContent class="pt-6">
+		<CardContent class="pt-6">
-      <div class="flex flex-wrap items-start justify-between gap-4">
+			<div class="flex flex-wrap items-start justify-between gap-4">
-        <div class="flex-1">
+				<div class="flex-1">
-          <CardTitle class="text-3xl">{data.wishlist.title}</CardTitle>
+					<CardTitle class="text-3xl">{data.wishlist.title}</CardTitle>
-          {#if data.wishlist.description}
+					{#if data.wishlist.description}
-            <CardDescription class="text-base">{data.wishlist.description}</CardDescription>
+						<CardDescription class="text-base"
-          {/if}
+							>{data.wishlist.description}</CardDescription
-        </div>
+						>
-        {#if data.isAuthenticated}
+					{/if}
-          {#if data.isClaimed}
+				</div>
-            <Button variant="outline" size="sm" disabled>
+				{#if data.isAuthenticated}
-              {t.wishlist.youClaimedThis}
+					{#if data.isClaimed}
-            </Button>
+						<Button
-          {:else if data.isSaved}
+							variant="outline"
-            <form method="POST" action="?/unsaveWishlist" use:enhance>
+							size="sm"
-              <input type="hidden" name="savedWishlistId" value={data.savedWishlistId} />
+							disabled
-              <Button type="submit" variant="outline" size="sm">
+						>
-                {t.wishlist.unsaveWishlist}
+							{t.wishlist.youClaimedThis}
-              </Button>
+						</Button>
-            </form>
+					{:else if data.isSaved}
-          {:else}
+						<form method="POST" action="?/unsaveWishlist" use:enhance>
-            <form
+							<input
-              method="POST"
+								type="hidden"
-              action="?/saveWishlist"
+								name="savedWishlistId"
-              use:enhance={() => {
+								value={data.savedWishlistId}
-                return async ({ update }) => {
+							/>
-                  await update({ reset: false });
+							<Button type="submit" variant="outline" size="sm">
-                };
+								{t.wishlist.unsaveWishlist}
-              }}
+							</Button>
-            >
+						</form>
-              <input type="hidden" name="wishlistId" value={data.wishlist.id} />
+					{:else}
-              <Button type="submit" variant="outline" size="sm">
+						<form method="POST" action="?/saveWishlist" use:enhance={() => {
-                {t.wishlist.saveWishlist}
+							return async ({ update }) => {
-              </Button>
+								await update({ reset: false });
-            </form>
+							};
-          {/if}
+						}}>
-        {:else}
+							<input type="hidden" name="wishlistId" value={data.wishlist.id} />
-          <Button variant="outline" size="sm" onclick={() => (window.location.href = '/signin')}>
+							<Button type="submit" variant="outline" size="sm">
-            {t.wishlist.signInToSave}
+								{t.wishlist.saveWishlist}
-          </Button>
+							</Button>
-        {/if}
+						</form>
-      </div>
+					{/if}
-    </CardContent>
+				{:else}
-  </Card>
+					<Button
 						variant="outline"
 						size="sm"
 						onclick={() => (window.location.href = "/signin")}
 					>
 						{t.wishlist.signInToSave}
 					</Button>
 				{/if}
 			</div>
 		</CardContent>
 	</Card>
-  {#if data.wishlist.items && data.wishlist.items.length > 0}
+	{#if data.wishlist.items && data.wishlist.items.length > 0}
-    <SearchBar bind:value={searchQuery} />
+		<SearchBar bind:value={searchQuery} />
-  {/if}
+	{/if}
-  <div class="space-y-4">
+	<div class="space-y-4">
-    {#if filteredItems.length > 0}
+		{#if filteredItems.length > 0}
-      {#each filteredItems as item (item.id)}
+			{#each filteredItems as item}
-        <WishlistItem {item} theme={data.wishlist.theme} wishlistColor={data.wishlist.color}>
+				<WishlistItem {item} theme={data.wishlist.theme} wishlistColor={data.wishlist.color}>
-          <ReservationButton
+					<ReservationButton
-            itemId={item.id}
+						itemId={item.id}
-            isReserved={item.isReserved}
+						isReserved={item.isReserved}
-            reserverName={item.reservations?.[0]?.reserverName}
+						reserverName={item.reservations?.[0]?.reserverName}
-            reservationUserId={item.reservations?.[0]?.userId}
+						reservationUserId={item.reservations?.[0]?.userId}
-            currentUserId={data.currentUserId}
+						currentUserId={data.currentUserId}
-          />
+					/>
-        </WishlistItem>
+				</WishlistItem>
-      {/each}
+			{/each}
-    {:else if data.wishlist.items && data.wishlist.items.length > 0}
+		{:else if data.wishlist.items && data.wishlist.items.length > 0}
-      <Card style={headerCardStyle} class="relative overflow-hidden">
+			<Card style={headerCardStyle} class="relative overflow-hidden">
-        <ThemeCard themeName={data.wishlist.theme} color={data.wishlist.color} />
+				<ThemeCard themeName={data.wishlist.theme} color={data.wishlist.color} />
-        <CardContent class="p-12 relative z-10">
+				<CardContent class="p-12 relative z-10">
-          <EmptyState message="No wishes match your search." />
+					<EmptyState
-        </CardContent>
+						message="No wishes match your search."
-      </Card>
+					/>
-    {:else}
+				</CardContent>
-      <Card style={headerCardStyle} class="relative overflow-hidden">
+			</Card>
-        <ThemeCard
+		{:else}
-          themeName={data.wishlist.theme}
+			<Card style={headerCardStyle} class="relative overflow-hidden">
-          color={data.wishlist.color}
+				<ThemeCard themeName={data.wishlist.theme} color={data.wishlist.color} />
-          showPattern={false}
+				<CardContent class="p-12 relative z-10">
-        />
+					<EmptyState
-        <CardContent class="p-12 relative z-10">
+						message={t.wishlist.emptyWishes}
-          <EmptyState message={t.wishlist.emptyWishes} />
+					/>
-        </CardContent>
+				</CardContent>
-      </Card>
+			</Card>
-    {/if}
+		{/if}
-  </div>
+	</div>
 </PageContainer>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
rasmusq	30ddda5c6c	add: snow theme	2025-12-19 22:34:23 +01:00
rasmusq	505c636fea	update: consistent round button sizing	2025-12-19 21:01:17 +01:00
rasmusq	e1ddf1e5c9	add: create, update and login dates in database	2025-12-19 20:50:06 +01:00
rasmusq	d51000ae7c	Merge pull request 'feature/userdefined-dashboard-color' (#6 ) from feature/userdefined-dashboard-color into master	2025-12-19 19:22:35 +00:00
rasmusq	ae27cd19a9	fix: missing color on empty lists in edit and wishlist pages	2025-12-19 20:20:11 +01:00
rasmusq	22a5d28bcb	remove: svg from dashboard lists	2025-12-19 20:09:49 +01:00
rasmusq	bec9e16604	add: color selection on dashboard	2025-12-19 19:33:43 +01:00
rasmusq	e48f94007b	Merge pull request 'update: better color support on wishlists' (#5 ) from update/wishlist-color-update-updates-background-and-svg-color into master	2025-12-16 13:43:49 +00:00
rasmusq	bfb03cb1cd	update: better color support on wishlists	2025-12-16 14:42:26 +01:00
rasmusq	94abfa5427	Merge pull request 'feature/builtin-themes' (#4 ) from feature/builtin-themes into master	2025-12-14 19:49:13 +00:00