stabilizing pipelines and setting screenshots retention

Reviewed-on: #2

.gitea/workflows/main.yaml

@@ -15,15 +15,44 @@ env:
 jobs:
   build:
     name: Build Vision Start
-    if: gitea.event_name == 'push'
     runs-on: ubuntu-amd64
     steps:
       - name: Check out repository code
         uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'npm'
+
+      - name: Setup required tools
+        run: sudo apt-get install zip jq curl -y
+
       - name: Install JS dependencies
-        run: npm install
+        run: npm ci
+
       - name: Run build
-        run: npm run build
+        run: |
+          bash scripts/prepare_release.sh
+          npm run build
+
+      - name: Prepare release
+        run: |
+          mv dist vision-start/
+          mv extension vision-start/
+          mv manifest.json vision-start/
+
+      - name: Create zip archive
+        run: |
+          cd vision-start
+          zip -r ../vision-start-${{ gitea.ref_name }}.zip *
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: release-zip
+          path: vision-start-${{ gitea.ref_name }}.zip
 
   build_vision_start:
     name: Build Vision Start Image

.gitea/workflows/pull-request.yaml

@@ -0,0 +1,178 @@
+name: Build Pull Request
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+env:
+  ARCHIVE_NAME: vision-start-pr-${{ gitea.event.pull_request.number }}.zip
+
+jobs:
+  build:
+    name: Build Pull Request Archive
+    runs-on: ubuntu-amd64
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'npm'
+
+      - name: Set up required tools
+        run: sudo apt-get install zip wget -y
+
+      - name: Install JS dependencies
+        run: npm ci
+
+      - name: Run build
+        run: |
+          bash scripts/prepare_release.sh
+          npm run build
+
+      - name: Prepare archive
+        run: |
+          mkdir vision-start
+          mv dist vision-start/
+          mv extension vision-start/
+          mv manifest.json vision-start/
+
+      - name: Create zip archive
+        run: |
+          cd vision-start
+          zip -r ../${{ env.ARCHIVE_NAME }} *
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: pr-release-zip
+          path: ${{ env.ARCHIVE_NAME }}
+
+  capture_screenshots:
+    name: Capture Pull Request Screenshots
+    runs-on: ubuntu-amd64
+    needs: build
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'npm'
+
+      - name: Set up required tools
+        run: sudo apt-get install unzip -y
+
+      - name: Install JS dependencies
+        run: npm ci
+
+      - name: Download build artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: pr-release-zip
+
+      - name: Unpack build artifact
+        run: |
+          unzip -o -q ${{ env.ARCHIVE_NAME }}
+          if [ ! -d dist ]; then
+            echo "The build artifact does not contain dist/."
+            unzip -l ${{ env.ARCHIVE_NAME }}
+            exit 1
+          fi
+
+      - name: Install Playwright Chromium
+        run: npx playwright install --with-deps chromium
+
+      - name: Capture screenshots
+        run: npm run capture:screenshots
+
+      - name: Upload screenshot artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: pr-screenshots
+          retention-days: 30
+          path: |
+            screenshots/home.png
+            screenshots/editing.png
+            screenshots/configuration.png
+
+  publish_screenshot_preview:
+    name: Publish Pull Request Screenshot Preview
+    runs-on: ubuntu-amd64
+    needs: capture_screenshots
+    if: ${{ gitea.event.pull_request.head.repo.full_name == gitea.repository }}
+    permissions:
+      actions: read
+      issues: write
+    steps:
+      - name: Set up required tools
+        run: sudo apt-get install curl jq -y
+
+      - name: Download screenshot artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: pr-screenshots
+          path: screenshots
+
+      - name: Update pull request screenshot preview
+        continue-on-error: true
+        env:
+          GITEA_API_URL: ${{ gitea.server_url }}/api/v1
+          GITEA_TOKEN: ${{ gitea.token }}
+          REPOSITORY: ${{ gitea.repository }}
+          PR_NUMBER: ${{ gitea.event.pull_request.number }}
+        run: |
+          set -euo pipefail
+          OWNER="${REPOSITORY%%/*}"
+          REPO="${REPOSITORY#*/}"
+          MARKER='<!-- vision-start-pr-screenshots -->'
+          COMMENTS_URL="$GITEA_API_URL/repos/$OWNER/$REPO/issues/$PR_NUMBER/comments"
+          COMMENTS=$(curl -fsS -H "Authorization: token $GITEA_TOKEN" "$COMMENTS_URL")
+          COMMENT_ID=$(printf '%s' "$COMMENTS" | jq -r --arg marker "$MARKER" '.[] | select(.body | contains($marker)) | .id' | tail -n 1)
+
+          if [ -z "$COMMENT_ID" ] || [ "$COMMENT_ID" = "null" ]; then
+            PAYLOAD=$(jq -n --arg body "$MARKER" '{body: $body}')
+            COMMENT_ID=$(curl -fsS -X POST \
+              -H "Authorization: token $GITEA_TOKEN" \
+              -H 'Content-Type: application/json' \
+              --data "$PAYLOAD" \
+              "$COMMENTS_URL" | jq -r '.id')
+          fi
+
+          ASSETS_URL="$GITEA_API_URL/repos/$OWNER/$REPO/issues/comments/$COMMENT_ID/assets"
+          for ASSET_ID in $(curl -fsS -H "Authorization: token $GITEA_TOKEN" "$ASSETS_URL" | jq -r '.[].id'); do
+            curl -fsS -X DELETE -H "Authorization: token $GITEA_TOKEN" "$ASSETS_URL/$ASSET_ID"
+          done
+
+          upload_asset() {
+            curl -fsS -X POST \
+              -H "Authorization: token $GITEA_TOKEN" \
+              -F "attachment=@$1;type=image/png" \
+              "$ASSETS_URL" | jq -r '.browser_download_url'
+          }
+
+          HOME_URL=$(upload_asset screenshots/home.png)
+          EDITING_URL=$(upload_asset screenshots/editing.png)
+          CONFIGURATION_URL=$(upload_asset screenshots/configuration.png)
+          BODY=$(printf '%s\n\n%s\n\n%s\n%s\n\n%s\n%s\n\n%s\n%s' \
+            "$MARKER" \
+            '## Visual preview' \
+            '### Home' \
+            "![Home]($HOME_URL)" \
+            '### Editing' \
+            "![Editing]($EDITING_URL)" \
+            '### Configuration' \
+            "![Configuration]($CONFIGURATION_URL)")
+          PAYLOAD=$(jq -n --arg body "$BODY" '{body: $body}')
+          curl -fsS -X PATCH \
+            -H "Authorization: token $GITEA_TOKEN" \
+            -H 'Content-Type: application/json' \
+            --data "$PAYLOAD" \
+            "$GITEA_API_URL/repos/$OWNER/$REPO/issues/comments/$COMMENT_ID"

.gitea/workflows/release.yaml

@@ -19,19 +19,46 @@ jobs:
     steps:
       - name: Check out repository code
         uses: actions/checkout@v4
+
+      - name: Set version from tag
+        env:
+          RELEASE_TAG: ${{ gitea.ref_name }}
+        run: |
+          if [[ ! "$RELEASE_TAG" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            echo "Expected a vX.Y.Z tag, got: $RELEASE_TAG"
+            exit 1
+          fi
+          VERSION="${RELEASE_TAG#v}"
+          sed -i -e "s/\"version\": \"0\.0\.0\"/\"version\": \"$VERSION\"/" manifest.json
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'npm'
+
       - name: Setup required tools
         run: sudo apt-get install zip jq curl -y
+
       - name: Install JS dependencies
-        run: npm install
+        run: npm ci
+
       - name: Run build
-        run: npm run build
-      - name: Prepare release
         run: |
           bash scripts/prepare_release.sh
+          npm run build
+
+      - name: Prepare release
+        run: |
           mv dist vision-start/
+          mv extension vision-start/
           mv manifest.json vision-start/
+
       - name: Create zip archive
-        run: zip -r vision-start-${{ gitea.ref_name }}.zip vision-start
+        run: |
+          cd vision-start
+          zip -r ../vision-start-${{ gitea.ref_name }}.zip *
+
       - name: Upload artifact
         uses: actions/upload-artifact@v3
         with:
@@ -73,7 +100,7 @@ jobs:
 
   release:
     runs-on: ubuntu-latest
-    needs: [build, virus-total-check]
+    needs: [build, virus-total-check, capture_screenshots]
     steps:
       - name: Check out repository code
         uses: actions/checkout@v4
@@ -81,6 +108,11 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: release-zip
+      - name: Download screenshot artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: release-screenshots
+          path: release-screenshots
       - name: Release zip
         uses: akkuman/gitea-release-action@v1
         with:
@@ -91,7 +123,11 @@ jobs:
             **Virus Total Detection Ratio:** ${{ needs.virus-total-check.outputs.detection-ratio }}
           name: ${{ gitea.ref_name }}
           tag_name: ${{ gitea.ref_name }}
-          files: vision-start-${{ gitea.ref_name }}.zip
+          files: |
+            vision-start-${{ gitea.ref_name }}.zip
+            release-screenshots/home.png
+            release-screenshots/editing.png
+            release-screenshots/configuration.png
 
   build_vision_start:
     name: Build Vision Start Image
@@ -101,6 +137,17 @@ jobs:
       - name: Check out repository
         uses: actions/checkout@v2
 
+      - name: Set version from tag
+        env:
+          RELEASE_TAG: ${{ gitea.ref_name }}
+        run: |
+          if [[ ! "$RELEASE_TAG" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            echo "Expected a vX.Y.Z tag, got: $RELEASE_TAG"
+            exit 1
+          fi
+          VERSION="${RELEASE_TAG#v}"
+          sed -i -e "s/\"version\": \"0\.0\.0\"/\"version\": \"$VERSION\"/" manifest.json
+
       - name: Log in to Container Registry
         run: |
           echo "${{ secrets.REGISTRY_PASSWORD }}" \
@@ -136,3 +183,38 @@ jobs:
             cd ${{ secrets.PROD_DIR }}
             docker compose pull
             docker compose up -d --force-recreate
+
+  capture_screenshots:
+    name: Capture Vision Start Screenshots
+    runs-on: ubuntu-amd64
+    needs: deploy_vision_start
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'npm'
+
+      - name: Install JS dependencies
+        run: npm ci
+
+      - name: Install Playwright Chromium
+        run: npx playwright install --with-deps chromium
+
+      - name: Capture release screenshots
+        env:
+          SCREENSHOT_BASE_URL: http://vision-start.ivanch.me
+        run: npm run capture:screenshots
+
+      - name: Upload release screenshots
+        uses: actions/upload-artifact@v3
+        with:
+          name: release-screenshots
+          retention-days: 30
+          path: |
+            screenshots/home.png
+            screenshots/editing.png
+            screenshots/configuration.png

AGENTS.md

@@ -0,0 +1,116 @@
+# AGENTS.md
+
+Guidance for AI agents (and humans) working on Vision Start. Read before making changes.
+
+---
+
+## 0. First rule: keep `project-context.md` alive
+
+- **Always read `project-context.md` first.** It is the canonical map of the project: structure, features, data model, flow, build/release. Treat it as required reading before any non-trivial change.
+- **Always keep it updated.** Whenever you add, remove, rename, or materially change files, modules, features, storage keys, config fields, build/release steps, or workflows, update the relevant section of `project-context.md` in the same change set. If your work touches the structure tree, the data model, the storage layout, or the quick-lookup table, those sections must reflect the new state.
+- Keep it a general overview, not a coding-style guide — that distinction lives here in `AGENTS.md`.
+
+---
+
+## 1. Styling guidance
+
+The design language is **soft liquid glass**: lightly translucent matte surfaces, restrained edge highlights, moderate backdrop blur, soft shadows, cyan accents, and iOS-like easing.
+
+### Surface recipe (use consistently)
+- **Tiles / floating controls / light surfaces:** `liquid-surface` plus `liquid-control` / `liquid-tile` / `liquid-focus` as appropriate.
+- **Cards / modals / panels:** `liquid-panel liquid-modal-card rounded-3xl` for centered modals; `liquid-drawer` for the settings drawer.
+- **Inputs:** `liquid-input p-3`; ranges use `liquid-range`.
+- **Buttons:** `liquid-button` plus one of `liquid-button-primary`, `liquid-button-success`, `liquid-button-secondary`, or `liquid-button-danger`.
+- **Add/edit surfaces:** add tiles use `liquid-ghost-tile`; tile edit controls use `liquid-edit-toolbar` and `liquid-edit-action`.
+- **Full-screen modal overlay:** `liquid-modal-backdrop`.
+- Keep the glass effect subtle: avoid high-opacity white highlights, heavy blur, strong saturation, or oversized glow unless a specific component needs emphasis.
+
+### Color tokens
+- Accent / focus / selection: cyan via `liquid-focus`, `cyan-400`, `cyan-200`, and `liquid-button-primary`
+- Confirm/Save: `liquid-button-success`
+- Cancel/secondary: `liquid-button-secondary`
+- Destructive: `liquid-button-danger` or red text on `liquid-edit-action`
+- Tertiary (export/import etc.): `liquid-button-secondary`
+- Status: online `bg-green-400 text-green-400`, offline `bg-red-400 text-red-400`, pending `bg-slate-400 text-slate-400`
+- Text: primary `text-white`, secondary `text-slate-300`/`text-slate-400`, muted `text-white/50` (in-app hover states)
+
+### Motion
+- Use the custom easing tokens defined in `index.css`: `ease-ios` (default), `ease-spring` (toggle knobs, drawer slides), and `ease-liquid` (tile lift and wallpaper transitions).
+- Standard durations: `duration-150` (buttons), `duration-200` (tiles, toggles, icons), and `duration-300` (drawers/modals).
+- Prefer the shared liquid classes for hover/press motion. Add custom transforms only when the shared classes do not cover the interaction.
+- Keep `prefers-reduced-motion` behavior intact when adding animations.
+
+### Tailwind specifics
+- Tailwind **v4** via `@tailwindcss/vite` and `@tailwindcss/postcss`. Custom easing is in `index.css` under `@theme {}` — add new theme tokens there, not in `tailwind.config.js`.
+- `tailwind.config.js` has a **safelist** of `w-[Npx]/h-[Npx]` classes because tile/icon sizes are constructed dynamically. If you add new pixel-size classes that are generated at runtime (not literally present in source), add them to the safelist or they will be purged.
+- Prefer static classes; only build dynamic class strings when unavoidable and then safelist them.
+
+### Components with established conventions to reuse
+- `Dropdown` (`components/Dropdown.tsx`) for selects — single or multi. Has a glassy look and custom arrow. **Always use it** instead of `<select>`/`<input type=...>` for option picking.
+- `ToggleSwitch` (`components/ToggleSwitch.tsx`) for boolean toggles — **always use it** instead of checkboxes.
+- Modal pattern: `liquid-modal-backdrop` + centered `liquid-panel liquid-modal-card rounded-3xl`, close on overlay click via `handleOverlayClick` (`if (e.target === e.currentTarget) onClose()`).
+- New editors/settings go in `components/configuration/` as a `*Tab.tsx` and are wired into `ConfigurationModal.tsx`.
+- New options' size presets follow the existing scale: `tiny | small | medium | large` (see `Header.tsx`, `WebsiteTile.tsx`).
+
+---
+
+## 2. New feature guidance
+
+A "feature" in this project typically means: a new widget, a new settings option, or a new bit of persisted state. When adding one, follow this checklist.
+
+### A. Types & defaults (in order)
+1. **`types.ts`** — add new fields to the relevant interface (usually `Config`, sometimes a nested one like `clock`/`serverWidget`). Create a nested object when a feature has 2+ sub-options (mirror the `clock`/`serverWidget` pattern).
+2. **`components/services/ConfigurationService.ts` `DEFAULT_CONFIG`** — add the new field with a sane default so existing users (with a previously-saved `Config`) get it via the `{ ...DEFAULT_CONFIG, ...parsed }` merge on load.
+3. Any new standalone collections (not inside `Config`) get their own storage key/helper in `ConfigurationService` (see `userWallpapers`, `wallpaperState` for the pattern).
+
+### B. Settings UI (if the feature is user-configurable)
+1. Create `components/configuration/<Feature>Tab.tsx` and add its entry to the `tabs` array in `components/ConfigurationModal.tsx`.
+2. Receive `config` and an `onChange(updates: Partial<Config>)` callback; emit partial updates — `App.tsx`'s `handleConfigChange` merges shallowly, so update nested objects as whole units (e.g. `{ clock: { ...config.clock, ...updates } }`).
+3. Use `Dropdown` / `ToggleSwitch` / range inputs per the styling section above.
+
+### C. Rendering & wiring
+4. Render the feature in `App.tsx` (or a dedicated component imported by `App.tsx`), gated by its `config.<feature>.enabled` flag when it can be turned off.
+5. Mark up new modal/edit surfaces to match existing modals (backdrop click closes, glass card styling).
+
+### D. Persistence — configs must be properly saved
+6. `App.tsx` already persists `config` via `ConfigurationService.saveConfig(config)` in a `useEffect`. **Any state added to `Config` is persisted automatically** — do not introduce parallel ad-hoc `localStorage` writes for config fields.
+7. Standalone collections (not in `Config`) need explicit save calls — mirror `userWallpapers`: load on mount, save on every mutation, never keep stale copies.
+8. Never write to `chrome.storage.local` directly outside `components/utils/StorageLocalManager.ts`. Always check `checkChromeStorageLocalAvailable()` first and gracefully degrade (the app must still run as a plain web page). Throw informative errors when the storage is required but missing.
+
+### E. Export / import must keep working
+9. If you add a new `localStorage` key (other than config fields, which are exported/imported automatically), add it to `REQUIRED_LOCAL_STORAGE_KEYS` in `ConfigurationService.ts` so it is included in exports and restored on imports.
+10. After adding fields to `Config`, double check the import path: `importConfig` writes each restored key to `localStorage` and returns `{ config, userWallpapers }`. New config sub-objects flow through automatically because they're inside `config`.
+
+### F. Defaults & migrations
+11. Default values must be chosen so a fresh install and an upgrade from an older `Config` both behave sensibly (the load path merges onto `DEFAULT_CONFIG`).
+12. If a new field changes behavior in a way that existing users' stored data should be preserved differently, handle the migration inside `loadConfig` (and consider bumping the export `version` field in `exportConfig` if the shape changes non-additively).
+
+### G. Style of new tiles/widgets
+13. A new widget should follow the existing widget shape: optional/gated by `config.<feature>.enabled`, positioned with a liquid glass container, and use the surface/duration/easing tokens above.
+14. New "editable" tiles/content reuse the `isEditing` mode and the edit/move/delete affordances pattern from `WebsiteTile.tsx` and `CategoryGroup.tsx`.
+
+---
+
+## 3. General engineering rules
+
+- **Language:** TypeScript strict mode (`tsconfig.json` enforces `strict`, `noUnusedLocals`, `noUnusedParameters`, `noFallthroughCasesInSwitch`, `noUncheckedSideEffectImports`). Do not loosen these.
+- **Runtime note:** Preact is the actual runtime (`@preact/preset-vite`), but types and imports use `react`/`@types/react`. Do not introduce React-only APIs without verifying Preact compatibility.
+- **Path alias:** `@/*` maps to the project root (see `tsconfig.json` `paths`). Source files currently use relative imports (`./`, `../`) — match the surrounding file.
+- **No comments** in committed code unless explicitly requested.
+- **Build vs. dev:** Prefer verifying with `npm run build` rather than `npm run dev`. The only npm scripts are `dev`, `build`, `preview`.
+- **No lint/typecheck script is configured.** Verify TS correctness manually (e.g. `npx tsc --noEmit`), and confirm `npm run build` succeeds before considering a task complete.
+- **Don't touch `public/icon-metadata.json`** — it's gitignored and fetched at release-build time by `scripts/prepare_release.sh`. Don't commit a local copy.
+- **Don't reintroduce dead code:** `components/EditModal.tsx` imports `lucide-react` and `./IconPicker`, neither of which is a dependency. It is not wired into the app. Use `WebsiteEditModal.tsx` / `CategoryEditModal.tsx` instead, and add the icon picker inline (as in `WebsiteEditModal.tsx`) rather than reviving `IconPicker`.
+- **External asset URLs:** any new icons/css/JS pulled from CDNs (e.g. `cdn.jsdelivr.net`) must work offline-or-not without crashing — always provide a fallback (see how `iconService.ts` falls back to Google's S2 favicon service).
+- **Manifest & extension constraints:** the extension uses Manifest V3 with `script-src 'self'` CSP and only the `storage` permission. Don't introduce inline scripts/eval, and avoid requesting new permissions unless essential — added permissions can disable updates on installed extensions.
+- **Commits:** never commit unless explicitly asked. Don't touch secrets, don't edit `.gitignore`/`.env.local`/`.claude/`, don't run `git config`.
+
+---
+
+## 4. When in doubt
+
+- Read `project-context.md`.
+- Mirror the nearest existing equivalent (a similar widget, modal, or config tab) before inventing a new pattern.
+- Favor the established liquid utilities (`liquid-surface`, `liquid-panel`, `liquid-input`, `liquid-button`, `liquid-focus`) over ad-hoc glass class strings.
+- Surface failing assumptions (CORS, missing chrome.storage, larger-than-4MB wallpapers) with clear errors, matching the style of `StorageLocalManager.ts` and `iconService.ts`.
+- Update `project-context.md` after your change.

App.tsx

@@ -1,37 +1,42 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
-import ConfigurationModal from './components/ConfigurationModal';
 import ServerWidget from './components/ServerWidget';
 import { DEFAULT_CATEGORIES } from './constants';
 import { Category, Website, Config } from './types';
-import WebsiteEditModal from './components/WebsiteEditModal';
-import CategoryEditModal from './components/CategoryEditModal';
 import Header from './components/layout/Header';
 import EditButton from './components/layout/EditButton';
 import ConfigurationButton from './components/layout/ConfigurationButton';
 import CategoryGroup from './components/layout/CategoryGroup';
 import Wallpaper from './components/Wallpaper';
+import { ConfigurationService } from './components/services/ConfigurationService';
 
-const defaultConfig: Config = {
+const ConfigurationModal = lazy(() => import('./components/ConfigurationModal'));
-  title: 'Vision Start',
+const WebsiteEditModal = lazy(() => import('./components/WebsiteEditModal'));
-  currentWallpapers: ['Abstract'],
+const CategoryEditModal = lazy(() => import('./components/CategoryEditModal'));
-  wallpaperFrequency: '1d',
+
-  wallpaperBlur: 0,
+const getAlignmentClass = (alignment: string) => {
-  wallpaperBrightness: 100,
+  switch (alignment) {
-  wallpaperOpacity: 100,
+    case 'top':
-  titleSize: 'medium',
+      return 'justify-start';
-  alignment: 'middle',
+    case 'middle':
-  horizontalAlignment: 'middle',
+      return 'justify-center';
-  clock: {
+    case 'bottom':
-    enabled: true,
+      return 'justify-end';
-    size: 'medium',
+    default:
-    font: 'Helvetica',
+      return 'justify-center';
-    format: 'h:mm A',
+  }
-  },
+};
-  serverWidget: {
+
-    enabled: false,
+const getHorizontalAlignmentClass = (alignment: string) => {
-    pingFrequency: 15,
+  switch (alignment) {
-    servers: [],
+    case 'left':
-  },
+      return 'justify-start';
+    case 'middle':
+      return 'justify-center';
+    case 'right':
+      return 'justify-end';
+    default:
+      return 'justify-center';
+  }
 };
 
 const App: React.FC = () => {
@@ -52,21 +57,11 @@ const App: React.FC = () => {
   const [addingWebsite, setAddingWebsite] = useState<Category | null>(null);
   const [editingCategory, setEditingCategory] = useState<Category | null>(null);
   const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
-  const [config, setConfig] = useState<Config>(() => {
+  const [config, setConfig] = useState<Config>(() => ConfigurationService.loadConfig());
-    try {
+  const [wallpaperVersion, setWallpaperVersion] = useState(0);
-      const storedConfig = localStorage.getItem('config');
-      if (storedConfig) {
-        const parsedConfig = JSON.parse(storedConfig);
-        return { ...defaultConfig, ...parsedConfig };
-      }
-    } catch (error) {
-      console.error('Error parsing config from localStorage', error);
-    }
-    return { ...defaultConfig };
-  });
 
   useEffect(() => {
-    localStorage.setItem('config', JSON.stringify(config));
+    ConfigurationService.saveConfig(config);
   }, [config]);
 
   useEffect(() => {
@@ -77,16 +72,37 @@ const App: React.FC = () => {
     }
   }, [categories]);
 
-  const handleSaveConfig = (newConfig: Config) => {
+  const handleSaveConfig = useCallback((newConfig: Config) => {
     setConfig(newConfig);
     setIsConfigModalOpen(false);
-  };
+  }, []);
 
-  const handleWallpaperChange = (newConfig: Partial<Config>) => {
+  const handleWallpaperChange = useCallback((newConfig: Partial<Config>) => {
     setConfig(prev => ({ ...prev, ...newConfig }));
-  };
+  }, []);
 
-  const handleSaveWebsite = (website: Partial<Website>) => {
+  const handleNextWallpaper = useCallback(() => {
+    const names = config.currentWallpapers;
+    if (names.length === 0) return;
+    try {
+      const state = JSON.parse(localStorage.getItem('wallpaperState') || '{}');
+      const current = typeof state.currentIndex === 'number' ? state.currentIndex : 0;
+      const safeCurrent = current < 0 || current >= names.length ? 0 : current;
+      const nextIndex = (safeCurrent + 1) % names.length;
+      localStorage.setItem(
+        'wallpaperState',
+        JSON.stringify({
+          lastWallpaperChange: new Date().toISOString(),
+          currentIndex: nextIndex,
+        }),
+      );
+    } catch (error) {
+      console.error('Error advancing wallpaper state', error);
+    }
+    setWallpaperVersion(v => v + 1);
+  }, [config.currentWallpapers]);
+
+  const handleSaveWebsite = useCallback((website: Partial<Website>) => {
     if (editingWebsite) {
       const idToUpdate = website.id ?? editingWebsite.id;
       const newCategories = categories.map(category => ({
@@ -113,9 +129,9 @@ const App: React.FC = () => {
       setCategories(newCategories);
       setAddingWebsite(null);
     }
-  };
+  }, [editingWebsite, addingWebsite, categories]);
 
-  const handleSaveCategory = (name: string) => {
+  const handleSaveCategory = useCallback((name: string) => {
     if (editingCategory) {
       const newCategories = categories.map(category =>
         category.id === editingCategory.id ? { ...category, name } : category
@@ -131,9 +147,9 @@ const App: React.FC = () => {
     }
     setEditingCategory(null);
     setIsCategoryModalOpen(false);
-  };
+  }, [editingCategory, categories]);
 
-  const handleDeleteWebsite = () => {
+  const handleDeleteWebsite = useCallback(() => {
     if (!editingWebsite) return;
 
     const newCategories = categories.map(category => ({
@@ -142,18 +158,18 @@ const App: React.FC = () => {
     }));
     setCategories(newCategories);
     setEditingWebsite(null);
-  };
+  }, [editingWebsite, categories]);
 
-  const handleDeleteCategory = () => {
+  const handleDeleteCategory = useCallback(() => {
     if (!editingCategory) return;
 
     const newCategories = categories.filter(c => c.id !== editingCategory.id);
     setCategories(newCategories);
     setEditingCategory(null);
     setIsCategoryModalOpen(false);
-  };
+  }, [editingCategory, categories]);
 
-  const handleMoveWebsite = (website: Website, direction: 'left' | 'right') => {
+  const handleMoveWebsite = useCallback((website: Website, direction: 'left' | 'right') => {
     const categoryIndex = categories.findIndex(cat => cat.websites.some(w => w.id === website.id));
     if (categoryIndex === -1) return;
 
@@ -161,56 +177,22 @@ const App: React.FC = () => {
     const websiteIndex = category.websites.findIndex(w => w.id === website.id);
     if (websiteIndex === -1) return;
 
-    const newCategories = [...categories];
+    const targetIndex = direction === 'left' ? websiteIndex - 1 : websiteIndex + 1;
+    if (targetIndex < 0 || targetIndex >= category.websites.length) return;
+
     const newWebsites = [...category.websites];
     const [movedWebsite] = newWebsites.splice(websiteIndex, 1);
+    newWebsites.splice(targetIndex, 0, movedWebsite);
 
-    if (direction === 'left') {
+    const newCategories = [...categories];
-      const newCategoryIndex = (categoryIndex - 1 + categories.length) % categories.length;
+    newCategories[categoryIndex] = { ...category, websites: newWebsites };
-      newCategories[categoryIndex] = { ...category, websites: newWebsites };
-      const destCategory = newCategories[newCategoryIndex];
-      const destWebsites = [...destCategory.websites, { ...movedWebsite, categoryId: destCategory.id }];
-      newCategories[newCategoryIndex] = { ...destCategory, websites: destWebsites };
-    } else {
-      const newCategoryIndex = (categoryIndex + 1) % categories.length;
-      newCategories[categoryIndex] = { ...category, websites: newWebsites };
-      const destCategory = newCategories[newCategoryIndex];
-      const destWebsites = [...destCategory.websites, { ...movedWebsite, categoryId: destCategory.id }];
-      newCategories[newCategoryIndex] = { ...destCategory, websites: destWebsites };
-    }
 
     setCategories(newCategories);
-  };
+  }, [categories]);
-
-  const getAlignmentClass = (alignment: string) => {
-    switch (alignment) {
-      case 'top':
-        return 'justify-start';
-      case 'middle':
-        return 'justify-center';
-      case 'bottom':
-        return 'justify-end';
-      default:
-        return 'justify-center';
-    }
-  };
-
-  const getHorizontalAlignmentClass = (alignment: string) => {
-    switch (alignment) {
-      case 'left':
-        return 'justify-start';
-      case 'middle':
-        return 'justify-center';
-      case 'right':
-        return 'justify-end';
-      default:
-        return 'justify-center';
-    }
-  };
 
   return (
     <main
-      className={`min-h-screen w-full flex flex-col items-center ${getAlignmentClass(config.alignment)} p-4`}
+      className={`vision-shell min-h-screen w-full flex flex-col items-center ${getAlignmentClass(config.alignment)} px-4 py-8 sm:px-6 sm:py-10`}
     >
       <Wallpaper
         wallpaperNames={config.currentWallpapers}
@@ -218,13 +200,14 @@ const App: React.FC = () => {
         brightness={config.wallpaperBrightness}
         opacity={config.wallpaperOpacity}
         wallpaperFrequency={config.wallpaperFrequency}
+        wallpaperVersion={wallpaperVersion}
       />
       <EditButton isEditing={isEditing} onClick={() => setIsEditing(!isEditing)} />
       <ConfigurationButton onClick={() => setIsConfigModalOpen(true)} />
 
       <Header config={config} />
 
-      <div className="flex flex-col gap-8 w-full mt-16">
+      <div className="relative z-10 flex flex-col gap-7 sm:gap-8 w-full mt-12 sm:mt-14">
         {categories.map((category) => (
           <CategoryGroup
             key={category.id}
@@ -236,7 +219,8 @@ const App: React.FC = () => {
             setEditingWebsite={setEditingWebsite}
             handleMoveWebsite={handleMoveWebsite}
             getHorizontalAlignmentClass={getHorizontalAlignmentClass}
-            config={config}
+            horizontalAlignment={config.horizontalAlignment}
+            tileSize={config.tileSize}
           />
         ))}
         {isEditing && (
@@ -246,12 +230,14 @@ const App: React.FC = () => {
                 setEditingCategory(null);
                 setIsCategoryModalOpen(true);
               }}
-              className="text-white/50 hover:text-white active:scale-90 transition-all duration-150 ease-ios"
+              className="liquid-surface liquid-control liquid-ghost-tile liquid-focus min-h-16 px-6 text-sm font-bold"
+              aria-label="Add category"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" className="bi bi-plus-circle" viewBox="0 0 16 16">
+              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
-                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
               </svg>
+              Add category
             </button>
           </div>
         )}
@@ -260,38 +246,45 @@ const App: React.FC = () => {
       {config.serverWidget.enabled && <ServerWidget config={config} />}
 
       {(editingWebsite || addingWebsite) && (
-        <WebsiteEditModal
+        <Suspense fallback={null}>
-          website={editingWebsite || undefined}
+          <WebsiteEditModal
-          edit={!!editingWebsite}
+            website={editingWebsite || undefined}
-          onClose={() => {
+            edit={!!editingWebsite}
-            setEditingWebsite(null);
+            onClose={() => {
-            setAddingWebsite(null);
+              setEditingWebsite(null);
-          }}
+              setAddingWebsite(null);
-          onSave={handleSaveWebsite}
+            }}
-          onDelete={handleDeleteWebsite}
+            onSave={handleSaveWebsite}
-        />
+            onDelete={handleDeleteWebsite}
+          />
+        </Suspense>
       )}
 
       {isCategoryModalOpen && (
-        <CategoryEditModal
+        <Suspense fallback={null}>
-          category={editingCategory || undefined}
+          <CategoryEditModal
-          edit={!!editingCategory}
+            category={editingCategory || undefined}
-          onClose={() => {
+            edit={!!editingCategory}
-            setEditingCategory(null);
+            onClose={() => {
-            setIsCategoryModalOpen(false);
+              setEditingCategory(null);
-          }}
+              setIsCategoryModalOpen(false);
-          onSave={handleSaveCategory}
+            }}
-          onDelete={handleDeleteCategory}
+            onSave={handleSaveCategory}
-        />
+            onDelete={handleDeleteCategory}
+          />
+        </Suspense>
       )}
 
       {isConfigModalOpen && (
-        <ConfigurationModal
+        <Suspense fallback={null}>
-          currentConfig={config}
+          <ConfigurationModal
-          onClose={() => setIsConfigModalOpen(false)}
+            currentConfig={config}
-          onSave={handleSaveConfig}
+            onClose={() => setIsConfigModalOpen(false)}
-          onWallpaperChange={handleWallpaperChange}
+            onSave={handleSaveConfig}
-        />
+            onWallpaperChange={handleWallpaperChange}
+            onNextWallpaper={handleNextWallpaper}
+          />
+        </Suspense>
       )}
     </main>
   );

Dockerfile

@@ -10,5 +10,6 @@ RUN npm run build
 FROM nginx:alpine
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY manifest.json /usr/share/nginx/html/
+COPY nginx.conf /etc/nginx/conf.d/gzip.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

GEMINI.md

@@ -1,39 +0,0 @@
-# Vision Startpage Project
-
-## Overview
-
-This project is a highly customizable and stylish startpage built with React. The goal is to create a visually appealing and functional dashboard that serves as a user's entry point to the web.
-
-## Key Features & Design Principles
-
-*   **Technology Stack:** The project is built using React and TypeScript.
-*   **Aesthetics:** The user interface should have a modern, "glassy" or "frosted glass" look (neumorphism/glassmorphism). This involves using transparency, blur effects, and subtle shadows to create a sense of depth.
-*   **Typography:** Specific font families and types will be used to maintain a consistent and elegant design.
-*   **Modals:** All modals in the application should follow a specific and consistent design language, contributing to the overall user experience.
-*   **Production Quality Code:** All code must be written to production standards, with a strong emphasis on readability, maintainability, and performance.
-*   **Creative & Beautiful Code:** Code should not only be functional but also well-structured, elegant, and creative.
-
-*   **Dropdown Component:** A reusable dropdown component (`components/Dropdown.tsx`) has been created for consistent styling and functionality across the application. It features a dark, glassy look with a custom arrow icon.
-
-    **Usage Example:**
-    ```typescript jsx
-    import Dropdown from './components/Dropdown';
-
-    // ... inside a React component
-    <Dropdown
-      options={[
-        { value: 'option1', label: 'Option 1' },
-        { value: 'option2', label: 'Option 2' },
-      ]}
-      value={selectedValue}
-      onChange={handleSelectChange}
-      name="myDropdown"
-    />
-    ```
-
-## Development Guidelines
-
-* Follow the existing code style and conventions.
-* Ensure all new components and features align with the established design principles.
-* Write clean, commented, and reusable code.
-* DO NOT run `npm run dev`, and instead, run `npm run build`.

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vision Startpage Project
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

PRIVACY.md

@@ -0,0 +1,60 @@
+# Privacy Policy for Vision Start
+
+This Privacy Policy describes how the Vision Start Chrome extension handles user information.
+
+## Information Stored by the Extension
+
+Vision Start stores extension settings and user-provided configuration locally in the browser using Chrome's local extension storage.
+
+This information may include:
+* Start-page preferences and appearance settings;
+* Bookmarks, shortcuts, or server and services addresses added by the user;
+* Configuration for features enabled by the user.
+
+This information is used only to provide the extension's functionality. It is not transmitted to, collected by, or stored on servers operated by the developer.
+
+The developer does not have access to information stored locally by the extension.
+
+## Server Status Requests
+
+Vision Start can send network requests to server addresses configured by the user in order to check whether those servers are available.
+
+These requests are sent directly from the user's browser to the configured server. The developer does not receive, proxy, log, or store these requests.
+
+The destination server may receive standard network information associated with the request, such as the user's IP address, browser request headers, and the requested server address. The handling of that information is controlled by the operator of the destination server.
+
+## External Favicon Service
+
+Vision Start uses the Google Favicon Service (https://www.google.com/s2/favicons) to retrieve icons for websites configured by the user.
+
+When an icon is requested, the relevant website domain is sent directly from the user's browser to Google. Google may also receive standard information associated with the network request, such as the user's IP address, browser request headers, and the requested domain.
+
+The developer does not receive, proxy, log, or store these requests. Google's handling of information is governed by the Google Privacy Policy.
+
+## Data Sharing and Sale
+
+The developer does not sell, rent, trade, or use user information for advertising, analytics, profiling, or marketing.
+
+No locally stored extension data is shared with the developer or with third parties, except for the direct network requests described above that are necessary to provide user-requested features.
+
+## Data Retention and Deletion
+
+Information stored by Vision Start remains in the browser until the user:
+
+* Deletes the relevant information through the extension;
+* Clears the extension's browser storage; or
+* Uninstalls the extension.
+
+## Security
+
+Vision Start is designed to keep user configuration on the user's device. Users should use HTTPS addresses whenever possible when configuring remote servers or external resources.
+
+## Changes to This Policy
+
+This Privacy Policy may be updated if the extension's functionality or data-handling practices change.
+
+Any updated version will be published at this location with a revised effective date. Material changes to how user information is handled will also be disclosed through the extension or its Chrome Web Store listing where appropriate.
+
+## Contact
+
+Questions about this Privacy Policy may be submitted through the developer's GitHub profile: https://github.com/ivanch

README.md

@@ -1,11 +1,18 @@
-# Vision Start
+<div style="display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: bold;">
-#### A glassmorphism-looking like, modern and customizable startpage built with React.
+<img src="extension/icons/vision-48.png" alt="Vision Start" width="32" height="32" style="margin-right: 1rem;"> Vision Start
+</div>
+
+<div style="display: flex; justify-content: center; font-size: 1.5rem;">
+A light, modern and customizable startpage built with React.
+</div>
+
+<span style="display: block; text-align: center; font-size: 1.2rem;">Try it here: <a href="http://vision-start.ivanch.me">http://vision-start.ivanch.me</a></span>
 
 ## Screenshots
 
-![Vision Start with the Dark background](screenshots/dark-page.png)
+![Vision Start home](screenshots/home.png)
-![Editing page with Abstract Red background](screenshots/editing-abstract-red.png)
+![Vision Start editing](screenshots/editing.png)
-![Configuration Tab opened](screenshots/configuration-abstract-red.png)
+![Vision Start configuration](screenshots/configuration.png)
 
 ## Installing
 
@@ -23,9 +30,9 @@ Vision Start is not yet available on Chrome Web Store, but it can be installed m
 * **Customizable Website Tiles:** Add, edit, and organize your favorite websites for quick access.
 * **Elegant Clock:** A clock because all startpages have one.
 * **Server Status Widgets:** Monitor the status of services directly from the startpage.
-* **Glassmorphism UI:** A modern and stylish interface with a frosted glass effect.
+* **Liquid Glass UI:** A modern, light interface with frosted surfaces, soft highlights, and gentle motion.
 * **Icon Library:** It uses the [Dashboard Icon library](https://dashboardicons.com/) for a better look and feel. It also supports auto-fetch for some websites.
-* **Future**: a long to do list :(
+* **Settings:** A settings page to configure the startpage, with export/import functionality.
 
 ## Backgrounds
 
@@ -87,4 +94,3 @@ npm run dev
 
 From a technical side:
 * Refactor everything :(
-* Add small nginx demo (with docker)

components/CategoryEditModal.tsx

@@ -19,31 +19,31 @@ const CategoryEditModal: React.FC<CategoryEditModalProps> = ({ category, edit, o
   };
 
   return (
-    <div className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50" onClick={handleOverlayClick}>
+    <div className="liquid-modal-backdrop fixed inset-0 flex items-center justify-center z-50 p-4" onClick={handleOverlayClick}>
-      <div className="bg-black/25 backdrop-blur-md border border-white/10 rounded-2xl p-8 w-full max-w-lg text-white">
+      <div className="liquid-panel liquid-modal-card rounded-3xl p-6 sm:p-8 w-full max-w-lg text-white">
-        <h2 className="text-3xl font-bold mb-6">{edit ? 'Edit Category' : 'Add Category'}</h2>
+        <h2 className="liquid-title-text text-3xl font-extrabold mb-6">{edit ? 'Edit Category' : 'Add Category'}</h2>
         <div className="flex flex-col gap-4">
           <input
             type="text"
             placeholder="Category Name"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400"
+            className="liquid-input p-3"
           />
         </div>
         <div className="flex justify-between items-center mt-8">
           <div>
             {edit && (
-              <button onClick={onDelete} className="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-6 rounded-lg">
+              <button onClick={onDelete} className="liquid-button liquid-button-danger liquid-focus py-2.5 px-5">
                 Delete
               </button>
             )}
           </div>
-          <div className="flex justify-end gap-4">
+          <div className="flex justify-end gap-3">
-            <button onClick={() => onSave(name)} className="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-lg">
+            <button onClick={() => onSave(name)} className="liquid-button liquid-button-success liquid-focus py-2.5 px-5">
               Save
             </button>
-            <button onClick={onClose} className="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-6 rounded-lg">
+            <button onClick={onClose} className="liquid-button liquid-button-secondary liquid-focus py-2.5 px-5">
               Close
             </button>
           </div>

components/Clock.tsx

@@ -16,9 +16,26 @@ const Clock: React.FC<ClockProps> = ({ config, getClockSizeClass }) => {
   const [time, setTime] = useState(new Date());
 
   useEffect(() => {
-    const timerId = setInterval(() => setTime(new Date()), 1000);
+    if (!config.clock.enabled) return;
-    return () => clearInterval(timerId);
+
-  }, []);
+    const scheduleNext = () => {
+      const now = new Date();
+      const msToNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
+      timeoutId = window.setTimeout(() => {
+        setTime(new Date());
+        intervalId = window.setInterval(() => setTime(new Date()), 60_000);
+      }, msToNextMinute);
+    };
+
+    let timeoutId = 0;
+    let intervalId = 0;
+    scheduleNext();
+
+    return () => {
+      if (timeoutId) window.clearTimeout(timeoutId);
+      if (intervalId) window.clearInterval(intervalId);
+    };
+  }, [config.clock.enabled]);
 
   if (!config.clock.enabled) {
     return null;
@@ -39,9 +56,8 @@ const Clock: React.FC<ClockProps> = ({ config, getClockSizeClass }) => {
 
   return (
     <div
-      className={`text-white font-bold ${getClockSizeClass(config.clock.size)}`}
+      className={`liquid-clock-text whitespace-nowrap text-white font-bold ${getClockSizeClass(config.clock.size)}`}
       style={{
-        textShadow: '0 2px 4px rgba(0,0,0,0.5)',
         fontFamily: config.clock.font,
       }}
     >

components/ConfigurationModal.tsx

@@ -1,92 +1,44 @@
 import React, { useState, useRef, useEffect } from 'react';
-import ToggleSwitch from './ToggleSwitch';
+import { Config, Wallpaper } from '../types';
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
-import { Server, Wallpaper } from '../types';
-
-import Dropdown from './Dropdown';
 import { baseWallpapers } from './utils/baseWallpapers';
-import { addWallpaperToChromeStorageLocal, removeWallpaperFromChromeStorageLocal, checkChromeStorageLocalAvailable } from './utils/StorageLocalManager';
+import { checkChromeStorageLocalAvailable } from './utils/StorageLocalManager';
-
+import { ConfigurationService } from './services/ConfigurationService';
-const REQUIRED_LOCAL_STORAGE_KEYS = ['config', 'categories', 'userWallpapers', 'wallpaperState'] as const;
+import GeneralTab from './configuration/GeneralTab';
-
+import ThemeTab from './configuration/ThemeTab';
-type RequiredLocalStorageKey = typeof REQUIRED_LOCAL_STORAGE_KEYS[number];
+import ClockTab from './configuration/ClockTab';
-
+import ServerWidgetTab from './configuration/ServerWidgetTab';
-const safeParse = (value: string | null): unknown => {
-  if (value === null) {
-    return null;
-  }
-
-  try {
-    return JSON.parse(value);
-  } catch {
-    return value;
-  }
-};
-
-const toStorageString = (value: unknown): string => {
-  return typeof value === 'string' ? value : JSON.stringify(value);
-};
 
 interface ConfigurationModalProps {
   onClose: () => void;
-  onSave: (config: any) => void;
+  onSave: (config: Config) => void;
-  currentConfig: any;
+  currentConfig: Config;
-  onWallpaperChange: (newConfig: Partial<any>) => void;
+  onWallpaperChange: (newConfig: Partial<Config>) => void;
+  onNextWallpaper: () => void;
 }
 
-const ConfigurationModal: React.FC<ConfigurationModalProps> = ({ onClose, onSave, currentConfig, onWallpaperChange }) => {
+const ConfigurationModal: React.FC<ConfigurationModalProps> = ({
-  const [config, setConfig] = useState({
+  onClose,
-    ...currentConfig,
+  onSave,
-    titleSize: currentConfig.titleSize || 'medium',
+  currentConfig,
-    alignment: currentConfig.alignment || 'middle',
+  onWallpaperChange,
-    tileSize: currentConfig.tileSize || 'medium',
+  onNextWallpaper,
-    horizontalAlignment: currentConfig.horizontalAlignment || 'middle',
+}) => {
-    wallpaperBlur: currentConfig.wallpaperBlur || 0,
+  const [config, setConfig] = useState<Config>(currentConfig);
-    wallpaperBrightness: currentConfig.wallpaperBrightness || 100,
-    wallpaperOpacity: currentConfig.wallpaperOpacity || 100,
-    serverWidget: {
-      enabled: false,
-      pingFrequency: 15,
-      servers: [],
-      ...currentConfig.serverWidget,
-    },
-    clock: {
-      enabled: true,
-      size: 'medium',
-      font: 'Helvetica',
-      format: 'h:mm A',
-      ...currentConfig.clock,
-    },
-    currentWallpapers: Array.isArray(currentConfig.currentWallpapers)
-      ? currentConfig.currentWallpapers.filter((name: string) => typeof name === 'string')
-      : [],
-    wallpaperFrequency: currentConfig.wallpaperFrequency || '1d',
-  });
   const [activeTab, setActiveTab] = useState('general');
-  const [newServerName, setNewServerName] = useState('');
-  const [newServerAddress, setNewServerAddress] = useState('');
-  const [newWallpaperName, setNewWallpaperName] = useState('');
-  const [newWallpaperUrl, setNewWallpaperUrl] = useState('');
   const [userWallpapers, setUserWallpapers] = useState<Wallpaper[]>([]);
   const [chromeStorageAvailable, setChromeStorageAvailable] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
   const importInputRef = useRef<HTMLInputElement>(null);
   const isSaving = useRef(false);
-  const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
     setChromeStorageAvailable(checkChromeStorageLocalAvailable());
-    const storedUserWallpapers = localStorage.getItem('userWallpapers');
+    setUserWallpapers(ConfigurationService.loadUserWallpapers());
-    if (storedUserWallpapers) {
-      setUserWallpapers(JSON.parse(storedUserWallpapers));
-    }
   }, []);
 
   useEffect(() => {
-    const timer = setTimeout(() => {
+    const timer = setTimeout(() => setIsVisible(true), 10);
-      setIsVisible(true);
-    }, 10);
     return () => clearTimeout(timer);
   }, []);
 
@@ -98,235 +50,67 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({ onClose, onSave
     };
   }, []);
 
-  const handleClose = () => {
-    setIsVisible(false);
-    setTimeout(() => {
-      onClose();
-    }, 250);
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement> | { target: { name: string; value: string | string[] } }) => {
-    const { name, value } = e.target;
-    if (name === 'currentWallpapers') {
-      const wallpaperNames = Array.isArray(value) ? value : [value];
-      setConfig({ ...config, currentWallpapers: wallpaperNames });
-    } else if (name.startsWith('serverWidget.')) {
-      const field = name.split('.')[1];
-      setConfig({
-        ...config,
-        serverWidget: { ...config.serverWidget, [field]: value },
-      });
-    } else if (name.startsWith('clock.')) {
-      const field = name.split('.')[1];
-      setConfig({
-        ...config,
-        clock: { ...config.clock, [field]: value },
-      });
-    } else {
-      setConfig({ ...config, [name]: value });
-    }
-  };
-
   useEffect(() => {
     onWallpaperChange({ currentWallpapers: config.currentWallpapers });
-    // Set wallpaperState in localStorage with lastWallpaperChange datetime
+    ConfigurationService.resetWallpaperState();
-    localStorage.setItem('wallpaperState', JSON.stringify({
-      lastWallpaperChange: new Date().toISOString(),
-      currentIndex: 0,
-    }));
   }, [config.currentWallpapers]);
 
-  const handleClockToggleChange = (checked: boolean) => {
+  const handleClose = () => {
-    setConfig({ ...config, clock: { ...config.clock, enabled: checked } });
+    setIsVisible(false);
+    setTimeout(onClose, 250);
   };
 
-  const handleServerWidgetToggleChange = (checked: boolean) => {
+  const handleConfigChange = (updates: Partial<Config>) => {
-    setConfig({
+    setConfig((prev) => ({ ...prev, ...updates }));
-      ...config,
-      serverWidget: { ...config.serverWidget, enabled: checked },
-    });
   };
 
-  const handleAddServer = () => {
+  const handleAddWallpaper = async (name: string, url: string) => {
-    if (newServerName.trim() === '' || newServerAddress.trim() === '') return;
+    const newWallpaper = await ConfigurationService.addWallpaper(name, url);
-
+    const updated = [...userWallpapers, newWallpaper];
-    const newServer: Server = {
+    setUserWallpapers(updated);
-      id: Date.now().toString(),
+    ConfigurationService.saveUserWallpapers(updated);
-      name: newServerName,
+    setConfig((prev) => ({
-      address: newServerAddress,
+      ...prev,
-    };
+      currentWallpapers: [...prev.currentWallpapers, newWallpaper.name],
-
+    }));
-    setConfig({
-      ...config,
-      serverWidget: {
-        ...config.serverWidget,
-        servers: [...config.serverWidget.servers, newServer],
-      },
-    });
-
-    setNewServerName('');
-    setNewServerAddress('');
   };
 
-  const handleRemoveServer = (id: string) => {
+  const handleAddWallpaperFile = async (file: File) => {
-    setConfig({
+    const newWallpaper = await ConfigurationService.addWallpaperFile(file);
-      ...config,
+    const updated = [...userWallpapers, newWallpaper];
-      serverWidget: {
+    setUserWallpapers(updated);
-        ...config.serverWidget,
+    ConfigurationService.saveUserWallpapers(updated);
-        servers: config.serverWidget.servers.filter((server: Server) => server.id !== id),
+    setConfig((prev) => ({
-      },
+      ...prev,
-    });
+      currentWallpapers: [...prev.currentWallpapers, newWallpaper.name],
+    }));
   };
 
-  const onDragEnd = (result: any) => {
+  const handleDeleteWallpaper = async (wallpaper: Wallpaper) => {
-    if (!result.destination) return;
-
-    const items = Array.from(config.serverWidget.servers);
-    const [reorderedItem] = items.splice(result.source.index, 1);
-    items.splice(result.destination.index, 0, reorderedItem);
-
-    setConfig({
-      ...config,
-      serverWidget: {
-        ...config.serverWidget,
-        servers: items,
-      },
-    });
-  };
-
-  const handleAddWallpaper = async () => {
-    if (newWallpaperUrl.trim() === '') return;
     try {
-      const finalName = await addWallpaperToChromeStorageLocal(newWallpaperName, newWallpaperUrl);
+      await ConfigurationService.deleteWallpaper(wallpaper);
-      const newWallpaper: Wallpaper = { name: finalName };
+      const updated = userWallpapers.filter((w) => w.name !== wallpaper.name);
-      const updatedUserWallpapers = [...userWallpapers, newWallpaper];
+      setUserWallpapers(updated);
-      setUserWallpapers(updatedUserWallpapers);
+      ConfigurationService.saveUserWallpapers(updated);
-      localStorage.setItem('userWallpapers', JSON.stringify(updatedUserWallpapers));
+      const newCurrentWallpapers = config.currentWallpapers.filter((n) => n !== wallpaper.name);
-      setConfig({ ...config, currentWallpapers: [...config.currentWallpapers, newWallpaper.name] });
+      setConfig((prev) => ({ ...prev, currentWallpapers: newCurrentWallpapers }));
-      setNewWallpaperName('');
+      onWallpaperChange({ currentWallpapers: newCurrentWallpapers });
-      setNewWallpaperUrl('');
-    } catch (error) {
-      alert('Error adding wallpaper. Please check the URL and try again.');
-      console.error(error);
-    }
-  };
-
-  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      if (file.size > 4 * 1024 * 1024) {
-        alert('File size exceeds 4MB. Please choose a smaller file.');
-        return;
-      }
-      const reader = new FileReader();
-      reader.onload = async () => {
-        const base64 = reader.result as string;
-        if (base64.length > 4.5 * 1024 * 1024) {
-          alert('The uploaded image is too large. Please choose a smaller file.');
-          return;
-        }
-        try {
-          const finalName = await addWallpaperToChromeStorageLocal(file.name, base64);
-          const newWallpaper: Wallpaper = { name: finalName };
-          const updatedUserWallpapers = [...userWallpapers, newWallpaper];
-          setUserWallpapers(updatedUserWallpapers);
-          localStorage.setItem('userWallpapers', JSON.stringify(updatedUserWallpapers));
-          setConfig({ ...config, currentWallpapers: [...config.currentWallpapers, newWallpaper.name] });
-        } catch (error) {
-          alert('Error adding wallpaper. Please try again.');
-          console.error(error);
-        }
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const handleDeleteUserWallpaper = async (wallpaper: Wallpaper) => {
-    try {
-      await removeWallpaperFromChromeStorageLocal(wallpaper.name);
-      const updatedUserWallpapers = userWallpapers.filter(w => w.name !== wallpaper.name);
-      setUserWallpapers(updatedUserWallpapers);
-      localStorage.setItem('userWallpapers', JSON.stringify(updatedUserWallpapers));
-      const newcurrentWallpapers = config.currentWallpapers.filter((name: string) => name !== wallpaper.name);
-      const newConfig = { ...config, currentWallpapers: newcurrentWallpapers };
-      setConfig(newConfig);
-      onWallpaperChange({ currentWallpapers: newcurrentWallpapers });
     } catch (error) {
       alert('Error deleting wallpaper. Please try again.');
       console.error(error);
     }
   };
 
-  const handleExportConfig = () => {
-    const exportPayload = {
-      version: 1,
-      exportedAt: new Date().toISOString(),
-      requiredLocalStorageKeys: [...REQUIRED_LOCAL_STORAGE_KEYS],
-      localStorage: REQUIRED_LOCAL_STORAGE_KEYS.reduce((acc, key) => {
-        acc[key] = safeParse(localStorage.getItem(key));
-        return acc;
-      }, {} as Record<RequiredLocalStorageKey, unknown>),
-    };
-
-    const blob = new Blob([JSON.stringify(exportPayload, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `vision-start-config-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleImportClick = () => {
-    importInputRef.current?.click();
-  };
-
   const handleImportConfig = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
-    if (!file) {
+    if (!file) return;
-      return;
-    }
-
     try {
-      const fileContent = await file.text();
+      const { config: importedConfig, userWallpapers: importedWallpapers } =
-      const parsed = JSON.parse(fileContent);
+        await ConfigurationService.importConfig(file);
-      const localStorageData = parsed?.localStorage && typeof parsed.localStorage === 'object'
+      setConfig(importedConfig);
-        ? parsed.localStorage
+      setUserWallpapers(importedWallpapers);
-        : parsed;
+      onWallpaperChange({ currentWallpapers: importedConfig.currentWallpapers || [] });
-
+      onSave(importedConfig);
-      if (!localStorageData || typeof localStorageData !== 'object') {
-        throw new Error('Invalid import file format.');
-      }
-
-      let importedAny = false;
-
-      REQUIRED_LOCAL_STORAGE_KEYS.forEach((key) => {
-        if (Object.prototype.hasOwnProperty.call(localStorageData, key)) {
-          const rawValue = (localStorageData as Record<string, unknown>)[key];
-          localStorage.setItem(key, toStorageString(rawValue));
-          importedAny = true;
-        }
-      });
-
-      if (!importedAny) {
-        throw new Error(`No required keys found. Expected: ${REQUIRED_LOCAL_STORAGE_KEYS.join(', ')}`);
-      }
-
-      const importedConfig = (localStorageData as Record<string, unknown>).config;
-      const importedUserWallpapers = (localStorageData as Record<string, unknown>).userWallpapers;
-
-      if (importedConfig && typeof importedConfig === 'object') {
-        setConfig(importedConfig as typeof config);
-        onWallpaperChange({ currentWallpapers: (importedConfig as { currentWallpapers?: string[] }).currentWallpapers || [] });
-        onSave(importedConfig);
-      }
-
-      if (Array.isArray(importedUserWallpapers)) {
-        setUserWallpapers(importedUserWallpapers as Wallpaper[]);
-      }
-
       alert('Configuration imported successfully. The page will reload to apply all data.');
       window.location.reload();
     } catch (error) {
@@ -339,434 +123,112 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({ onClose, onSave
 
   const allWallpapers = [...baseWallpapers, ...userWallpapers];
 
+  const tabs = [
+    { id: 'general', label: 'General' },
+    { id: 'theme', label: 'Theme' },
+    { id: 'clock', label: 'Clock' },
+    { id: 'serverWidget', label: 'Server Widget' },
+  ];
+
   return (
     <div className="fixed inset-0 z-50" role="dialog" aria-modal="true">
       <div
-        className={`fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-250 ease-ios ${
+        className={`liquid-modal-backdrop fixed inset-0 transition-opacity duration-200 ease-ios ${
           isVisible ? 'opacity-100' : 'opacity-0'
         }`}
         onClick={handleClose}
-      ></div>
+      />
 
       <div
         ref={menuRef}
-        className={`fixed top-0 right-0 h-full w-full max-w-lg bg-black/50 backdrop-blur-xl border-l border-white/10 text-white flex flex-col transition-transform duration-300 ease-spring transform ${
+        className={`liquid-drawer fixed top-0 right-0 h-full w-full max-w-xl text-white flex flex-col transition-transform duration-300 ease-spring transform ${
           isVisible ? 'translate-x-0' : 'translate-x-full'
         }`}
       >
-        <div className="p-8 flex-grow overflow-y-auto">
+        <div className="p-6 sm:p-8 flex-grow overflow-y-auto">
-          <h2 className="text-3xl font-bold mb-6">Configuration</h2>
+          <h2 className="liquid-title-text text-3xl font-extrabold mb-6">Configuration</h2>
 
-          <div className="flex border-b border-white/10 mb-6">
+          <div className="liquid-surface grid grid-cols-2 sm:grid-cols-4 gap-1 rounded-2xl p-1 mb-7">
-            <button
+            {tabs.map((tab) => (
-              className={`px-4 py-2 text-lg font-semibold ${activeTab === 'general' ? 'text-cyan-400 border-b-2 border-cyan-400' : 'text-slate-400'}`}
+              <button
-              onClick={() => setActiveTab('general')}
+                key={tab.id}
-            >
+                className={`liquid-focus rounded-xl px-3 py-2 text-sm font-bold transition-all duration-200 ease-ios ${
-              General
+                  activeTab === tab.id
-            </button>
+                    ? 'bg-cyan-400/25 text-cyan-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.28)]'
-            <button
+                    : 'text-slate-300 hover:bg-white/10 hover:text-white'
-              className={`px-4 py-2 text-lg font-semibold ${activeTab === 'theme' ? 'text-cyan-400 border-b-2 border-cyan-400' : 'text-slate-400'}`}
+                }`}
-              onClick={() => setActiveTab('theme')}
+                onClick={() => setActiveTab(tab.id)}
-            >
+              >
-              Theme
+                {tab.label}
-            </button>
+              </button>
-            <button
+            ))}
-              className={`px-4 py-2 text-lg font-semibold ${activeTab === 'clock' ? 'text-cyan-400 border-b-2 border-cyan-400' : 'text-slate-400'}`}
-              onClick={() => setActiveTab('clock')}
-            >
-              Clock
-            </button>
-            <button
-              className={`px-4 py-2 text-lg font-semibold ${activeTab === 'serverWidget' ? 'text-cyan-400 border-b-2 border-cyan-400' : 'text-slate-400'}`}
-              onClick={() => setActiveTab('serverWidget')}
-            >
-              Server Widget
-            </button>
           </div>
 
           {activeTab === 'general' && (
-            <div className="flex flex-col gap-6">
+            <GeneralTab config={config} onChange={handleConfigChange} />
-              <div>
-                <label className="text-slate-300 text-sm font-semibold mb-2 block">Title</label>
-                <input
-                  type="text"
-                  name="title"
-                  value={config.title}
-                  onChange={handleChange}
-                  className="bg-white/10 p-3 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-cyan-400"
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Title Size</label>
-                <Dropdown
-                  name="titleSize"
-                  value={config.titleSize}
-                  onChange={handleChange}
-                  options={[
-                    { value: 'tiny', label: 'Tiny' },
-                    { value: 'small', label: 'Small' },
-                    { value: 'medium', label: 'Medium' },
-                    { value: 'large', label: 'Large' },
-                  ]}
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Vertical Alignment</label>
-                <Dropdown
-                  name="alignment"
-                  value={config.alignment}
-                  onChange={handleChange}
-                  options={[
-                    { value: 'top', label: 'Top' },
-                    { value: 'middle', label: 'Middle' },
-                    { value: 'bottom', label: 'Bottom' },
-                  ]}
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Tile Size</label>
-                <Dropdown
-                  name="tileSize"
-                  value={config.tileSize}
-                  onChange={handleChange}
-                  options={[
-                    { value: 'small', label: 'Small' },
-                    { value: 'medium', label: 'Medium' },
-                    { value: 'large', label: 'Large' },
-                  ]}
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Horizontal Alignment</label>
-                <Dropdown
-                  name="horizontalAlignment"
-                  value={config.horizontalAlignment}
-                  onChange={handleChange}
-                  options={[
-                    { value: 'left', label: 'Left' },
-                    { value: 'middle', label: 'Middle' },
-                    { value: 'right', label: 'Right' },
-                  ]}
-                />
-              </div>
-            </div>
           )}
-
           {activeTab === 'theme' && (
-            <div className="flex flex-col gap-6">
+            <ThemeTab
-              <div className="flex items-center justify-between">
+              config={config}
-                <label className="text-slate-300 text-sm font-semibold">Background</label>
+              onChange={handleConfigChange}
-                <Dropdown
+              userWallpapers={userWallpapers}
-                  name="currentWallpapers"
+              allWallpapers={allWallpapers}
-                  value={config.currentWallpapers}
+              chromeStorageAvailable={chromeStorageAvailable}
-                  onChange={handleChange}
+              onAddWallpaper={handleAddWallpaper}
-                  multiple
+              onAddWallpaperFile={handleAddWallpaperFile}
-                  options={allWallpapers.map(w => ({
+              onDeleteWallpaper={handleDeleteWallpaper}
-                    value: w.name,
+              onNextWallpaper={onNextWallpaper}
-                    label: w.name
+            />
-                  }))}
-                />
-              </div>
-              {Array.isArray(config.currentWallpapers) && config.currentWallpapers.length > 1 && (
-                <div className="flex items-center justify-between">
-                  <label className="text-slate-300 text-sm font-semibold">Change Frequency</label>
-                  <Dropdown
-                    name="wallpaperFrequency"
-                    value={config.wallpaperFrequency}
-                    onChange={handleChange}
-                    options={[
-                      { value: '1h', label: '1 hour' },
-                      { value: '3h', label: '3 hours' },
-                      { value: '6h', label: '6 hours' },
-                      { value: '12h', label: '12 hours' },
-                      { value: '1d', label: '1 day' },
-                      { value: '2d', label: '2 days' },
-                    ]}
-                  />
-                </div>
-              )}
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Wallpaper Blur</label>
-                <div className="flex items-center gap-4">
-                  <input
-                    type="range"
-                    name="wallpaperBlur"
-                    min="0"
-                    max="50"
-                    value={config.wallpaperBlur}
-                    onChange={handleChange}
-                    className="w-48"
-                  />
-                  <span>{config.wallpaperBlur}px</span>
-                </div>
-              </div>
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Wallpaper Brightness</label>
-                <div className="flex items-center gap-4">
-                  <input
-                    type="range"
-                    name="wallpaperBrightness"
-                    min="0"
-                    max="200"
-                    value={config.wallpaperBrightness}
-                    onChange={handleChange}
-                    className="w-48"
-                  />
-                  <span>{config.wallpaperBrightness}%</span>
-                </div>
-              </div>
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Wallpaper Opacity</label>
-                <div className="flex items-center gap-4">
-                  <input
-                    type="range"
-                    name="wallpaperOpacity"
-                    min="1"
-                    max="100"
-                    value={config.wallpaperOpacity}
-                    onChange={handleChange}
-                    className="w-48"
-                  />
-                  <span>{config.wallpaperOpacity}%</span>
-                </div>
-              </div>
-              {chromeStorageAvailable && (
-                <>
-                  <div>
-                    <h3 className="text-slate-300 text-sm font-semibold mb-2">User Wallpapers</h3>
-                    <div className="flex flex-col gap-2">
-                      {userWallpapers.map((wallpaper) => (
-                        <div key={wallpaper.name} className="flex items-center justify-between bg-white/10 p-2 rounded-lg">
-                          <span className="truncate">{wallpaper.name}</span>
-                          <button
-                            onClick={() => handleDeleteUserWallpaper(wallpaper)}
-                            className="text-red-500 hover:text-red-400"
-                          >
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-trash" viewBox="0 0 16 16">
-                              <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
-                              <path fillRule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
-                            </svg>
-                          </button>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                  <div>
-                    <h3 className="text-slate-300 text-sm font-semibold mb-2">Add New Wallpaper</h3>
-                    <div className="flex flex-col gap-2">
-                      <input
-                        type="text"
-                        placeholder="Wallpaper Name (optional for URLs)"
-                        value={newWallpaperName}
-                        onChange={(e) => setNewWallpaperName(e.target.value)}
-                        className="bg-white/10 p-2 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-cyan-400"
-                      />
-                      <div className="flex gap-2">
-                        <input
-                          type="text"
-                          placeholder="Image URL"
-                          value={newWallpaperUrl}
-                          onChange={(e) => setNewWallpaperUrl(e.target.value)}
-                          className="bg-white/10 p-2 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-cyan-400"
-                        />
-                        <button
-                          onClick={handleAddWallpaper}
-                          className="bg-cyan-500 hover:bg-cyan-400 text-white font-bold py-2 px-4 rounded-lg"
-                        >
-                          Add
-                        </button>
-                      </div>
-                      <div className="flex items-center justify-center w-full">
-                        <label
-                          htmlFor="file-upload"
-                          className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer bg-white/5 border-white/20 hover:bg-white/10"
-                        >
-                          <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                            <svg className="w-8 h-8 mb-4 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
-                              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
-                            </svg>
-                            <p className="mb-2 text-sm text-gray-400"><span className="font-semibold">Click to upload</span> or drag and drop</p>
-                            <p className="text-xs text-gray-400">PNG, JPG, WEBP, etc.</p>
-                          </div>
-                          <input id="file-upload" type="file" className="hidden" onChange={handleFileUpload} ref={fileInputRef} />
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
           )}
-
           {activeTab === 'clock' && (
-            <div className="flex flex-col gap-6">
+            <ClockTab config={config} onChange={handleConfigChange} />
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Enable Clock</label>
-                <ToggleSwitch
-                  checked={config.clock.enabled}
-                  onChange={handleClockToggleChange}
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Clock Size</label>
-                <Dropdown
-                  name="clock.size"
-                  value={config.clock.size}
-                  onChange={handleChange}
-                  options={[
-                    { value: 'tiny', label: 'Tiny' },
-                    { value: 'small', label: 'Small' },
-                    { value: 'medium', label: 'Medium' },
-                    { value: 'large', label: 'Large' },
-                  ]}
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Clock Font</label>
-                <Dropdown
-                  name="clock.font"
-                  value={config.clock.font}
-                  onChange={handleChange}
-                  options={[
-                    { value: 'Helvetica', label: 'Helvetica' },
-                    { value: `'Orbitron', sans-serif`, label: 'Orbitron' },
-                    { value: 'monospace', label: 'Monospace' },
-                    { value: 'cursive', label: 'Cursive' },
-                  ]}
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Time Format</label>
-                <Dropdown
-                  name="clock.format"
-                  value={config.clock.format}
-                  onChange={handleChange}
-                  options={[
-                    { value: 'h:mm A', label: 'AM/PM' },
-                    { value: 'HH:mm', label: '24:00' },
-                  ]}
-                />
-              </div>
-            </div>
           )}
-
           {activeTab === 'serverWidget' && (
-            <div className="flex flex-col gap-6">
+            <ServerWidgetTab config={config} onChange={handleConfigChange} />
-              <div className="flex items-center justify-between">
-                <label className="text-slate-300 text-sm font-semibold">Enable Server Widget</label>
-                <ToggleSwitch
-                  checked={config.serverWidget.enabled}
-                  onChange={handleServerWidgetToggleChange}
-                />
-              </div>
-              {config.serverWidget.enabled && (
-                <>
-                  <div className="flex items-center justify-between">
-                    <label className="text-slate-300 text-sm font-semibold">Ping Frequency</label>
-                    <div className="flex items-center gap-4">
-                      <input
-                        type="range"
-                        name="serverWidget.pingFrequency"
-                        min="5"
-                        max="60"
-                        value={config.serverWidget.pingFrequency}
-                        onChange={handleChange}
-                        className="w-48"
-                      />
-                      <span>{config.serverWidget.pingFrequency}s</span>
-                    </div>
-                  </div>
-                  <div>
-                    <h3 className="text-slate-300 text-sm font-semibold mb-2">Servers</h3>
-                    <DragDropContext onDragEnd={onDragEnd}>
-                      <Droppable droppableId="servers">
-                        {(provided) => (
-                          <div {...provided.droppableProps} ref={provided.innerRef} className="flex flex-col gap-2">
-                            {config.serverWidget.servers.map((server: Server, index: number) => (
-                              <Draggable key={server.id} draggableId={server.id} index={index}>
-                                {(provided) => (
-                                  <div
-                                    ref={provided.innerRef}
-                                    {...provided.draggableProps}
-                                    {...provided.dragHandleProps}
-                                    className="flex items-center justify-between bg-white/10 p-2 rounded-lg"
-                                  >
-                                    <div>
-                                      <p className="font-semibold">{server.name}</p>
-                                      <p className="text-sm text-slate-400">{server.address}</p>
-                                    </div>
-                                    <button
-                                      onClick={() => handleRemoveServer(server.id)}
-                                      className="text-red-500 hover:text-red-400"
-                                    >
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-trash" viewBox="0 0 16 16">
-                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
-                                        <path fillRule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
-                                      </svg>
-                                    </button>
-                                  </div>
-                                )}
-                              </Draggable>
-                            ))}
-                            {provided.placeholder}
-                          </div>
-                        )}
-                      </Droppable>
-                    </DragDropContext>
-                    <div className="flex gap-2 mt-2">
-                      <input
-                        type="text"
-                        placeholder="Server Name"
-                        value={newServerName}
-                        onChange={(e) => setNewServerName(e.target.value)}
-                        className="bg-white/10 p-2 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-cyan-400"
-                      />
-                      <input
-                        type="text"
-                        placeholder="HTTP Address"
-                        value={newServerAddress}
-                        onChange={(e) => setNewServerAddress(e.target.value)}
-                        className="bg-white/10 p-2 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-cyan-400"
-                      />
-                      <button
-                        onClick={handleAddServer}
-                        className="bg-cyan-500 hover:bg-cyan-400 text-white font-bold py-2 px-4 rounded-lg"
-                      >
-                        Add
-                      </button>
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
           )}
         </div>
-        <div className="p-8 border-t border-white/10">
+
-            <div className="flex items-center justify-between gap-4">
+        <div className="p-6 sm:p-8 border-t border-white/10">
-                <div className="flex gap-2">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-                    <button onClick={handleExportConfig} className="bg-slate-700 hover:bg-slate-600 active:scale-95 text-white text-sm font-semibold py-1.5 px-3 rounded-lg transition-all duration-150 ease-ios">
+            <div className="flex gap-2">
-                        Export
+              <button
-                    </button>
+                onClick={() => ConfigurationService.exportConfig()}
-                    <button onClick={handleImportClick} className="bg-slate-700 hover:bg-slate-600 active:scale-95 text-white text-sm font-semibold py-1.5 px-3 rounded-lg transition-all duration-150 ease-ios">
+                className="liquid-button liquid-button-secondary liquid-focus text-sm py-2 px-4"
-                        Import
+              >
-                    </button>
+                Export
-                    <input
+              </button>
-                      ref={importInputRef}
+              <button
-                      type="file"
+                onClick={() => importInputRef.current?.click()}
-                      accept="application/json"
+                className="liquid-button liquid-button-secondary liquid-focus text-sm py-2 px-4"
-                      className="hidden"
+              >
-                      onChange={handleImportConfig}
+                Import
-                    />
+              </button>
-                </div>
+              <input
-                <div className="flex justify-end gap-4">
+                ref={importInputRef}
-                <button onClick={() => { isSaving.current = true; onSave(config); }} className="bg-green-500 hover:bg-green-400 active:scale-95 text-white font-bold py-2 px-6 rounded-lg transition-all duration-150 ease-ios">
+                type="file"
-                    Save & Close
+                accept="application/json"
-                </button>
+                className="hidden"
-                <button onClick={handleClose} className="bg-gray-600 hover:bg-gray-500 active:scale-95 text-white font-bold py-2 px-6 rounded-lg transition-all duration-150 ease-ios">
+                onChange={handleImportConfig}
-                    Cancel
+              />
-                </button>
-                </div>
             </div>
+            <div className="flex justify-end gap-3">
+              <button
+                onClick={() => {
+                  isSaving.current = true;
+                  onSave(config);
+                }}
+                className="liquid-button liquid-button-success liquid-focus py-2.5 px-5"
+              >
+                Save & Close
+              </button>
+              <button
+                onClick={handleClose}
+                className="liquid-button liquid-button-secondary liquid-focus py-2.5 px-5"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

components/Dropdown.tsx

@@ -71,7 +71,7 @@ const Dropdown: React.FC<DropdownProps> = ({ options, value, onChange, name, mul
     <div className="relative" ref={dropdownRef}>
       <button
         type="button"
-        className="bg-black/5 backdrop-blur-md border border-white/10 rounded-lg p-3 text-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-400 w-40 h-10 flex justify-between items-center transition-all duration-200 hover:bg-white/5"
+        className="liquid-surface liquid-focus rounded-xl px-3 text-white text-sm w-44 h-11 flex justify-between items-center transition-all duration-200 ease-ios hover:border-white/30"
         onClick={() => setIsOpen(!isOpen)}
         aria-haspopup="listbox"
         aria-expanded={isOpen}
@@ -95,7 +95,7 @@ const Dropdown: React.FC<DropdownProps> = ({ options, value, onChange, name, mul
 
       {isOpen && (
         <ul
-          className="absolute z-10 mt-1 w-full bg-black/70 backdrop-blur-xl border border-white/20 rounded-lg shadow-2xl overflow-hidden animate-in slide-in-from-top-2 fade-in duration-150"
+          className="liquid-panel liquid-dropdown-list absolute z-10 mt-2 w-full rounded-xl overflow-hidden"
           role="listbox"
         >
           {options.map((option) => (
@@ -105,8 +105,8 @@ const Dropdown: React.FC<DropdownProps> = ({ options, value, onChange, name, mul
               className={`h-10 px-3 text-white cursor-pointer transition-all duration-150 ease-ios flex items-center
                 ${
                   isSelected(option.value)
-                    ? 'bg-cyan-500/20 text-cyan-300'
+                    ? 'bg-cyan-400/20 text-cyan-200'
-                    : 'hover:bg-white/20 hover:text-white hover:shadow-lg'
+                    : 'hover:bg-white/20 hover:text-white'
                 }`}
               role="option"
               aria-selected={isSelected(option.value)}
@@ -117,7 +117,6 @@ const Dropdown: React.FC<DropdownProps> = ({ options, value, onChange, name, mul
         </ul>
       )}
 
-      {/* Hidden input to mimic native select behavior for forms */}
       {name && !multiple && <input type="hidden" name={name} value={value as string} />}
     </div>
   );

components/EditModal.tsx

@@ -1,255 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
-import { getWebsiteIcon } from './utils/iconService';
-import { Category, Website } from '../types';
-import IconPicker from './IconPicker';
-import { icons } from 'lucide-react';
-
-interface EditModalProps {
-  categories: Category[];
-  onClose: () => void;
-  onSave: (categories: Category[]) => void;
-}
-
-const EditModal: React.FC<EditModalProps> = ({ categories, onClose, onSave }) => {
-  const [localCategories, setLocalCategories] = useState(categories);
-  const [selectedCategoryId, setSelectedCategoryId] = useState(categories[0]?.id || null);
-  const [newCategoryName, setNewCategoryName] = useState('');
-  const [newWebsite, setNewWebsite] = useState({ name: '', url: '', icon: '' });
-  const [showIconPicker, setShowIconPicker] = useState(false);
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-        onClose();
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [onClose]);
-
-  const handleOnDragEnd = (result: DropResult) => {
-    if (!result.destination) return;
-
-    const { source, destination } = result;
-
-    if (source.droppableId === destination.droppableId) {
-      const category = localCategories.find(cat => cat.id === source.droppableId);
-      if (category) {
-        const items = Array.from(category.websites);
-        const [reorderedItem] = items.splice(source.index, 1);
-        items.splice(destination.index, 0, reorderedItem);
-        const updatedCategories = localCategories.map(cat => 
-          cat.id === category.id ? { ...cat, websites: items } : cat
-        );
-        setLocalCategories(updatedCategories);
-      }
-    } else {
-      const sourceCategory = localCategories.find(cat => cat.id === source.droppableId);
-      const destCategory = localCategories.find(cat => cat.id === destination.droppableId);
-      if (sourceCategory && destCategory) {
-        const sourceItems = Array.from(sourceCategory.websites);
-        const [movedItem] = sourceItems.splice(source.index, 1);
-        const destItems = Array.from(destCategory.websites);
-        destItems.splice(destination.index, 0, { ...movedItem, categoryId: destCategory.id });
-
-        const updatedCategories = localCategories.map(cat => {
-          if (cat.id === sourceCategory.id) return { ...cat, websites: sourceItems };
-          if (cat.id === destCategory.id) return { ...cat, websites: destItems };
-          return cat;
-        });
-        setLocalCategories(updatedCategories);
-      }
-    }
-  };
-
-  const handleAddCategory = () => {
-    if (newCategoryName.trim() === '') return;
-    const newCategory: Category = {
-      id: Date.now().toString(),
-      name: newCategoryName,
-      websites: [],
-    };
-    setLocalCategories([...localCategories, newCategory]);
-    setNewCategoryName('');
-  };
-
-  const handleRemoveCategory = (id: string) => {
-    const updatedCategories = localCategories.filter(cat => cat.id !== id);
-    setLocalCategories(updatedCategories);
-    if (selectedCategoryId === id) {
-      setSelectedCategoryId(updatedCategories[0]?.id || null);
-    }
-  };
-
-  const handleAddWebsite = async () => {
-    if (!selectedCategoryId || !newWebsite.name || !newWebsite.url) return;
-
-    let icon = newWebsite.icon;
-    if (!icon || !Object.keys(icons).includes(icon)) {
-        icon = await getWebsiteIcon(newWebsite.url);
-    }
-
-    const newWebsiteData: Website = {
-      id: Date.now().toString(),
-      name: newWebsite.name,
-      url: newWebsite.url,
-      icon,
-      categoryId: selectedCategoryId,
-    };
-
-    const updatedCategories = localCategories.map(cat => {
-      if (cat.id === selectedCategoryId) {
-        return { ...cat, websites: [...cat.websites, newWebsiteData] };
-      }
-      return cat;
-    });
-
-    setLocalCategories(updatedCategories);
-    setNewWebsite({ name: '', url: '', icon: '' });
-  };
-
-  const handleRemoveWebsite = (categoryId: string, websiteId: string) => {
-    const updatedCategories = localCategories.map(cat => {
-      if (cat.id === categoryId) {
-        return { ...cat, websites: cat.websites.filter(web => web.id !== websiteId) };
-      }
-      return cat;
-    });
-    setLocalCategories(updatedCategories);
-  };
-
-  const selectedCategory = localCategories.find(cat => cat.id === selectedCategoryId);
-
-  return (
-    <div className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50">
-      <div ref={modalRef} className="bg-black/25 backdrop-blur-md border border-white/10 rounded-2xl p-8 w-full max-w-4xl text-white">
-        <h2 className="text-3xl font-bold mb-6">Edit Bookmarks</h2>
-        <div className="grid grid-cols-3 gap-8">
-          <div className="col-span-1">
-            <h3 className="text-xl font-semibold mb-4">Categories</h3>
-            <div className="flex flex-col gap-2 mb-4">
-              {localCategories.map(category => (
-                <div 
-                  key={category.id} 
-                  className={`flex justify-between items-center p-3 rounded-lg cursor-pointer ${selectedCategoryId === category.id ? 'bg-cyan-500/50' : 'bg-white/10'}`}
-                  onClick={() => setSelectedCategoryId(category.id)}
-                >
-                  <span>{category.name}</span>
-                  <button onClick={() => handleRemoveCategory(category.id)} className="text-red-500 hover:text-red-400">
-                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
-                  </button>
-                </div>
-              ))}
-            </div>
-            <div className="flex gap-2">
-              <input
-                type="text"
-                placeholder="New Category"
-                value={newCategoryName}
-                onChange={(e) => setNewCategoryName(e.target.value)}
-                className="bg-white/10 p-2 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-cyan-400"
-              />
-              <button onClick={handleAddCategory} className="bg-cyan-500 hover:bg-cyan-400 text-white font-bold py-2 px-4 rounded-lg">
-                Add
-              </button>
-            </div>
-          </div>
-          <div className="col-span-2">
-            <h3 className="text-xl font-semibold mb-4">Websites</h3>
-            {selectedCategory && (
-              <DragDropContext onDragEnd={handleOnDragEnd}>
-                <Droppable droppableId={selectedCategory.id}>
-                  {(provided) => (
-                    <ul {...provided.droppableProps} ref={provided.innerRef} className="mb-8">
-                      {selectedCategory.websites.map((website, index) => (
-                        <Draggable key={website.id} draggableId={website.id} index={index}>
-                          {(provided) => (
-                            <li
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                              className="flex items-center justify-between bg-white/10 p-3 rounded-lg mb-3"
-                            >
-                              <div className="flex items-center">
-                                {Object.keys(icons).includes(website.icon) ? (
-                                  React.createElement(icons[website.icon as keyof typeof icons], { className: "h-8 w-8 mr-4" })
-                                ) : (
-                                  <img src={website.icon} alt={website.name} className="h-8 w-8 mr-4" />
-                                )}
-                                <span>{website.name}</span>
-                              </div>
-                              <button onClick={() => handleRemoveWebsite(selectedCategory.id, website.id)} className="text-red-500 hover:text-red-400">
-                                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
-                              </button>
-                            </li>
-                          )}
-                        </Draggable>
-                      ))}
-                      {provided.placeholder}
-                    </ul>
-                  )}
-                </Droppable>
-              </DragDropContext>
-            )}
-            <div>
-              <h3 className="text-xl font-semibold mb-4">Add New Bookmark</h3>
-              <div className="flex flex-col gap-4">
-                <input
-                  type="text"
-                  placeholder="Name"
-                  value={newWebsite.name}
-                  onChange={(e) => setNewWebsite({ ...newWebsite, name: e.target.value })}
-                  className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400"
-                />
-                <input
-                  type="text"
-                  placeholder="URL"
-                  value={newWebsite.url}
-                  onChange={(e) => setNewWebsite({ ...newWebsite, url: e.target.value })}
-                  className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400"
-                />
-                <div className="flex items-center gap-2">
-                  <input
-                    type="text"
-                    placeholder="Icon URL or name"
-                    value={newWebsite.icon}
-                    onChange={(e) => setNewWebsite({ ...newWebsite, icon: e.target.value })}
-                    className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400 w-full"
-                  />
-                  <button onClick={() => setShowIconPicker(!showIconPicker)} className="bg-gray-600 hover:bg-gray-500 text-white font-bold py-3 px-4 rounded-lg">
-                    {showIconPicker ? 'Close' : 'Select Icon'}
-                  </button>
-                </div>
-                {showIconPicker && (
-                  <IconPicker
-                    onSelect={(iconName) => {
-                      setNewWebsite({ ...newWebsite, icon: iconName });
-                      setShowIconPicker(false);
-                    }}
-                  />
-                )}
-                <button onClick={handleAddWebsite} className="bg-cyan-500 hover:bg-cyan-400 text-white font-bold py-3 px-4 rounded-lg">
-                  Add Bookmark
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="flex justify-end gap-4 mt-8">
-          <button onClick={() => onSave(localCategories)} className="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-lg">
-            Save
-          </button>
-          <button onClick={onClose} className="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-6 rounded-lg">
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default EditModal;

components/ServerWidget.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Server } from '../types';
 import ping from './utils/jsping.js';
 
@@ -12,53 +12,70 @@ interface ServerWidgetProps {
   };
 }
 
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'online':
+      return 'bg-green-400 text-green-400';
+    case 'offline':
+      return 'bg-red-400 text-red-400';
+    default:
+      return 'bg-slate-400 text-slate-400';
+  }
+};
+
 const ServerWidget: React.FC<ServerWidgetProps> = ({ config }) => {
   const [serverStatus, setServerStatus] = useState<Record<string, string>>({});
+  const serversRef = useRef(config.serverWidget.servers);
+  serversRef.current = config.serverWidget.servers;
+
+  const serversSignature = config.serverWidget.servers
+    .map(s => `${s.id}:${s.address}`)
+    .join('|');
+  const serverCount = config.serverWidget.servers.length;
 
   useEffect(() => {
+    if (!config.serverWidget.enabled) return;
+
     const pingServers = () => {
-      config.serverWidget.servers.forEach((server) => {
+      const pending: Record<string, string> = {};
-        setServerStatus((prevStatus) => ({ ...prevStatus, [server.id]: 'pending' }));
+      for (const s of serversRef.current) pending[s.id] = 'pending';
+      setServerStatus(prev => ({ ...prev, ...pending }));
+
+      serversRef.current.forEach((server) => {
         ping(server.address)
           .then(() => {
-            setServerStatus((prevStatus) => ({ ...prevStatus, [server.id]: 'online' }));
+            setServerStatus(prev =>
+              prev[server.id] === 'online' ? prev : { ...prev, [server.id]: 'online' }
+            );
           })
           .catch(() => {
-            setServerStatus((prevStatus) => ({ ...prevStatus, [server.id]: 'offline' }));
+            setServerStatus(prev =>
+              prev[server.id] === 'offline' ? prev : { ...prev, [server.id]: 'offline' }
+            );
           });
       });
     };
 
-    if (config.serverWidget.enabled) {
+    pingServers();
-      pingServers();
+    const interval = setInterval(pingServers, config.serverWidget.pingFrequency * 1000);
-      const interval = setInterval(pingServers, config.serverWidget.pingFrequency * 1000);
+    return () => clearInterval(interval);
-      return () => clearInterval(interval);
+  }, [
-    }
+    config.serverWidget.enabled,
-  }, [config.serverWidget.enabled, config.serverWidget.servers, config.serverWidget.pingFrequency]);
+    config.serverWidget.pingFrequency,
+    serversSignature,
+    serverCount,
+  ]);
 
   if (!config.serverWidget.enabled) {
     return null;
   }
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'online':
-        return 'bg-green-500';
-      case 'offline':
-        return 'bg-red-500';
-      default:
-        return 'bg-gray-500';
-    }
-  };
-
   return (
-    <div className="fixed bottom-0 left-1/2 -translate-x-1/2 w-auto max-w-full">
+    <div className="fixed bottom-3 left-1/2 z-20 w-auto max-w-[calc(100%-1.5rem)] -translate-x-1/2">
-      <div className="flex items-center gap-4 bg-black/25 backdrop-blur-md border border-white/20 px-4 py-2 shadow-lg"
+      <div className="liquid-surface flex items-center gap-4 rounded-full px-4 py-2">
-        style={{ borderBottomLeftRadius: '0', borderBottomRightRadius: '0', borderTopLeftRadius: '16px', borderTopRightRadius: '15px', borderBottomWidth: '0' }}
-      >
         {config.serverWidget.servers.map((server) => (
           <div key={server.id} className="flex items-center gap-2">
-            <div className={`w-3 h-3 rounded-full ${getStatusColor(serverStatus[server.id])}`}></div>
+            <div className={`liquid-status-dot w-2.5 h-2.5 rounded-full ${getStatusColor(serverStatus[server.id])}`}></div>
             <span className="text-slate-100 text-sm font-medium">
               {server.name}
             </span>

components/ToggleSwitch.tsx

@@ -11,14 +11,20 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ checked, onChange }) => {
   };
 
   return (
-    <div
+    <button
-      className={`w-14 h-8 flex items-center rounded-full p-1 cursor-pointer transition-colors duration-200 ease-ios ${checked ? 'bg-cyan-500' : 'bg-gray-600'}`}
+      type="button"
+      className={`liquid-focus relative w-14 h-8 flex items-center rounded-full p-1 cursor-pointer border transition-all duration-200 ease-ios ${
+        checked
+          ? 'bg-cyan-400/70 border-cyan-200/60 shadow-[0_0_24px_rgba(34,211,238,0.22)]'
+          : 'bg-white/10 border-white/20'
+      }`}
       onClick={handleToggle}
+      aria-pressed={checked}
     >
       <div
-        className={`bg-white w-6 h-6 rounded-full shadow-md transform transition-transform duration-200 ease-spring ${checked ? 'translate-x-6' : 'translate-x-0'}`}
+        className={`bg-white w-6 h-6 rounded-full shadow-lg transform transition-transform duration-200 ease-spring ${checked ? 'translate-x-6' : 'translate-x-0'}`}
       />
-    </div>
+    </button>
   );
 };
 

components/Wallpaper.tsx

@@ -1,5 +1,5 @@
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { baseWallpapers } from './utils/baseWallpapers';
 import { Wallpaper as WallpaperType } from '../types';
 import { getWallpaperFromChromeStorageLocal } from './utils/StorageLocalManager';
@@ -10,96 +10,139 @@ interface WallpaperProps {
   brightness: number;
   opacity: number;
   wallpaperFrequency: string;
+  wallpaperVersion: number;
 }
 
+const MIN_WALLPAPER_FREQUENCY_MS = 60 * 60 * 1000;
+const MAX_WALLPAPER_FREQUENCY_MS = 48 * 60 * 60 * 1000;
+const DEFAULT_WALLPAPER_FREQUENCY_MS = 24 * 60 * 60 * 1000;
+
+const parseFrequencyToMs = (freq: string): number => {
+  if (!freq) return DEFAULT_WALLPAPER_FREQUENCY_MS;
+  const match = freq.match(/^(\d+)(h|d)$/);
+  if (!match) return DEFAULT_WALLPAPER_FREQUENCY_MS;
+  const value = parseInt(match[1], 10);
+  const unit = match[2];
+  const frequencyMs = unit === 'd' ? value * 24 * 60 * 60 * 1000 : value * 60 * 60 * 1000;
+  return Math.min(MAX_WALLPAPER_FREQUENCY_MS, Math.max(MIN_WALLPAPER_FREQUENCY_MS, frequencyMs));
+};
+
+const wallpaperUrlCache = new Map<string, string | undefined>();
+
 const getWallpaperUrlByName = async (name: string): Promise<string | undefined> => {
+  if (!name) return undefined;
+  if (wallpaperUrlCache.has(name)) return wallpaperUrlCache.get(name);
+
+  let resolved: string | undefined;
   const foundInBase = baseWallpapers.find((w: WallpaperType) => w.name === name);
   if (foundInBase) {
-    return foundInBase.url || foundInBase.base64;
+    resolved = foundInBase.url || foundInBase.base64;
-  }
+  } else {
-
-  const userWallpapers: WallpaperType[] = JSON.parse(localStorage.getItem('userWallpapers') || '[]');
-  const foundInUser = userWallpapers.find((w: WallpaperType) => w.name === name);
-  if (foundInUser) {
     try {
-      const wallpaperData = await getWallpaperFromChromeStorageLocal(name);
+      const storedUserWallpapers: WallpaperType[] =
-      if (wallpaperData && wallpaperData.startsWith('http')) {
+        JSON.parse(localStorage.getItem('userWallpapers') || '[]');
-        return wallpaperData;
+      const foundInUser = storedUserWallpapers.find((w: WallpaperType) => w.name === name);
+      if (foundInUser) {
+        try {
+          const wallpaperData = await getWallpaperFromChromeStorageLocal(name);
+          if (wallpaperData && wallpaperData.startsWith('http')) {
+            resolved = wallpaperData;
+          } else {
+            resolved = wallpaperData || undefined;
+          }
+        } catch (error) {
+          console.error('Error getting wallpaper from chrome storage', error);
+          resolved = undefined;
+        }
       }
-      return wallpaperData || undefined;
     } catch (error) {
-      console.error('Error getting wallpaper from chrome storage', error);
+      console.error('Error reading userWallpapers from localStorage', error);
-      return undefined;
+      resolved = undefined;
     }
   }
 
-  return undefined;
+  wallpaperUrlCache.set(name, resolved);
+  return resolved;
 };
 
-const Wallpaper: React.FC<WallpaperProps> = ({ wallpaperNames, blur, brightness, opacity, wallpaperFrequency }) => {
+const Wallpaper: React.FC<WallpaperProps> = ({ wallpaperNames, blur, brightness, opacity, wallpaperFrequency, wallpaperVersion }) => {
   const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);
-  const [currentWallpaperIndex, setCurrentWallpaperIndex] = useState<number>(0);
+  const resolvedRef = useRef(false);
-
-  // Helper to parse wallpaperFrequency string to ms
-  const parseFrequencyToMs = (freq: string): number => {
-    if (!freq) return 24 * 60 * 60 * 1000; // default 1 day
-    const match = freq.match(/(\d+)(h|d)/);
-    if (!match) return 24 * 60 * 60 * 1000;
-    const value = parseInt(match[1], 10);
-    const unit = match[2];
-    if (unit === 'h') return value * 60 * 60 * 1000;
-    if (unit === 'd') return value * 24 * 60 * 60 * 1000;
-    return 24 * 60 * 60 * 1000;
-  };
 
   useEffect(() => {
     const updateWallpaper = async () => {
-      if (wallpaperNames.length === 0) return;
+      if (wallpaperNames.length === 0) {
-      // Read wallpaperState from localStorage
+        setImageUrl(undefined);
+        localStorage.setItem(
+          'wallpaperState',
+          JSON.stringify({ lastWallpaperChange: new Date().toISOString(), currentIndex: 0 }),
+        );
+        return;
+      }
+
       const wallpaperState = JSON.parse(localStorage.getItem('wallpaperState') || '{}');
-      const lastChange = wallpaperState.lastWallpaperChange ? new Date(wallpaperState.lastWallpaperChange).getTime() : 0;
+      const lastChange = wallpaperState.lastWallpaperChange
+        ? new Date(wallpaperState.lastWallpaperChange).getTime()
+        : 0;
       const now = Date.now();
       const freqMs = parseFrequencyToMs(wallpaperFrequency);
-      let currentIndex = typeof wallpaperState.currentIndex === 'number' ? wallpaperState.currentIndex : 0;
 
-      // If enough time has passed, pick a new wallpaper
+      let storedIndex =
-      if (now - lastChange >= freqMs) {
+        typeof wallpaperState.currentIndex === 'number' ? wallpaperState.currentIndex : 0;
-        currentIndex = (currentIndex + 1) % wallpaperNames.length;
+      if (storedIndex < 0 || storedIndex >= wallpaperNames.length) storedIndex = 0;
-        localStorage.setItem('wallpaperState', JSON.stringify({
+
-          lastWallpaperChange: new Date().toISOString(),
+      const shouldRotate = now - lastChange >= freqMs;
-          currentIndex
+      let resolvedIndex = shouldRotate
-        }));
+        ? (storedIndex + 1) % wallpaperNames.length
-      } else {
+        : storedIndex;
-        // Keep currentIndex in sync with localStorage if not updating
+
-        localStorage.setItem('wallpaperState', JSON.stringify({
+      const tried = new Set<number>();
-          lastWallpaperChange: wallpaperState.lastWallpaperChange || new Date().toISOString(),
+      let resolvedUrl: string | undefined;
-          currentIndex
+
-        }));
+      for (let i = 0; i < wallpaperNames.length; i++) {
+        if (tried.has(resolvedIndex)) break;
+        tried.add(resolvedIndex);
+        const url = await getWallpaperUrlByName(wallpaperNames[resolvedIndex]);
+        if (url) {
+          resolvedUrl = url;
+          break;
+        }
+        resolvedIndex = (resolvedIndex + 1) % wallpaperNames.length;
       }
-      setCurrentWallpaperIndex(currentIndex);
+
-      const wallpaperName = wallpaperNames[currentIndex];
+      const nextLastChange = shouldRotate
-      const url = await getWallpaperUrlByName(wallpaperName);
+        ? new Date().toISOString()
-      setImageUrl(url);
+        : wallpaperState.lastWallpaperChange || new Date().toISOString();
+
+      localStorage.setItem(
+        'wallpaperState',
+        JSON.stringify({
+          lastWallpaperChange: nextLastChange,
+          currentIndex: resolvedIndex,
+        }),
+      );
+
+      resolvedRef.current = true;
+      setImageUrl(resolvedUrl);
     };
     updateWallpaper();
-    // No timer, just run on render/dependency change
+  }, [wallpaperNames, wallpaperFrequency, wallpaperVersion]);
-  }, [wallpaperNames, wallpaperFrequency]);
 
   if (!imageUrl) return null;
 
   return (
-    <div
+    <>
-      className="fixed inset-0 -z-10 w-full h-full"
+      <div
-      style={{
+        className="wallpaper-layer wallpaper-transition"
-        backgroundImage: `url(${imageUrl})`,
+        style={{
-        backgroundSize: 'cover',
+          backgroundImage: `url(${imageUrl})`,
-        backgroundPosition: 'center',
+          filter: `blur(${blur}px) brightness(${brightness / 100})`,
-        filter: `blur(${blur}px) brightness(${brightness / 100})`,
+          opacity: opacity / 100,
-        opacity: opacity / 100,
+        }}
-        transition: 'filter 0.3s, opacity 0.3s',
+        aria-label="Wallpaper background"
-      }}
+      />
-      aria-label="Wallpaper background"
+      <div className="wallpaper-luminance" aria-hidden="true" />
-    />
+    </>
   );
 };
 

components/WebsiteEditModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Website } from '../types';
 import { getWebsiteIcon } from './utils/iconService';
 
@@ -22,47 +22,68 @@ interface IconMetadata {
       name: string;
     };
   };
-  colors: any; // this can be anything I guess
+  colors: any;
 }
 
+let iconMetadataCache: IconMetadata[] | null = null;
+
 const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onClose, onSave, onDelete }) => {
   const [name, setName] = useState(website ? website.name : '');
   const [url, setUrl] = useState(website ? website.url : '');
   const [icon, setIcon] = useState(website ? website.icon : '');
   const [iconQuery, setIconQuery] = useState('');
-  const [iconMetadata, setIconMetadata] = useState<IconMetadata[]>([]);
   const [filteredIcons, setFilteredIcons] = useState<IconMetadata[]>([]);
+  const [iconMetadata, setIconMetadata] = useState<IconMetadata[]>(() => iconMetadataCache ?? []);
+  const [iconsFetched, setIconsFetched] = useState(() => iconMetadataCache !== null);
+  const debounceRef = useRef<number | null>(null);
 
-  useEffect(() => {
+  const ensureIconMetadata = () => {
-    fetch('/icon-metadata.json')
+    if (iconMetadataCache) {
+      setIconMetadata(iconMetadataCache);
+      return;
+    }
+    if (iconsFetched) return;
+    setIconsFetched(true);
+    fetch('/icon-metadata.json', { cache: 'force-cache' })
       .then(response => response.json())
       .then(data => {
-        const iconsArray = Object.entries(data).map(([name, details]) => ({
+        const iconsArray: IconMetadata[] = Object.entries(data).map(([name, details]) => ({
           name,
-          ...details
+          ...(details as object),
-        }));
+        })) as IconMetadata[];
-        // Expand colors into separate entries
+        iconMetadataCache = iconsArray;
-        iconsArray.forEach(icon => {
-          if (icon.colors) {
-            const colors = Object.values(icon.colors).filter(key => key !== icon.name);
-            for (const color of colors) {
-              const newIcon = { ...icon };
-              newIcon.name = color;
-              iconsArray.push(newIcon);
-            }
-          }
-        });
         setIconMetadata(iconsArray);
-      });
+      })
-  }, []);
+      .catch(err => console.error('Failed to load icon metadata', err));
+  };
 
   useEffect(() => {
-    if (iconQuery && Array.isArray(iconMetadata)) {
+    if (iconQuery && Array.isArray(iconMetadata) && iconMetadata.length > 0) {
-      const lowerCaseQuery = iconQuery.toLowerCase();
+      if (debounceRef.current) window.clearTimeout(debounceRef.current);
-      const filtered = iconMetadata
+      debounceRef.current = window.setTimeout(() => {
-        .filter(icon => icon.name.toLowerCase().includes(lowerCaseQuery))
+        const lowerCaseQuery = iconQuery.toLowerCase();
-        .slice(0, 50);
+        const filtered: IconMetadata[] = [];
-      setFilteredIcons(filtered);
+        for (const ic of iconMetadata) {
+          if (ic.name.toLowerCase().includes(lowerCaseQuery)) {
+            filtered.push(ic);
+            if (filtered.length >= 50) break;
+          }
+          if (ic.colors) {
+            const colors = Object.values(ic.colors).filter(key => key !== ic.name);
+            for (const color of colors) {
+              if (typeof color === 'string' && color.toLowerCase().includes(lowerCaseQuery)) {
+                filtered.push({ ...ic, name: color });
+                if (filtered.length >= 50) break;
+              }
+            }
+            if (filtered.length >= 50) break;
+          }
+        }
+        setFilteredIcons(filtered);
+      }, 150);
+      return () => {
+        if (debounceRef.current) window.clearTimeout(debounceRef.current);
+      };
     } else {
       setFilteredIcons([]);
     }
@@ -76,7 +97,6 @@ const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onCl
   };
 
   const handleSave = () => {
-    console.log({ id: website?.id, name, url, icon });
     onSave({ id: website?.id, name, url, icon });
   };
 
@@ -87,15 +107,15 @@ const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onCl
   };
 
   return (
-    <div className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50" onClick={handleOverlayClick}>
+    <div className="liquid-modal-backdrop fixed inset-0 flex items-center justify-center z-50 p-4" onClick={handleOverlayClick}>
-      <div className="bg-black/25 backdrop-blur-md border border-white/10 rounded-2xl p-8 w-full max-w-lg text-white">
+      <div className="liquid-panel liquid-modal-card rounded-3xl p-6 sm:p-8 w-full max-w-lg text-white">
-        <h2 className="text-3xl font-bold mb-6">{edit ? 'Edit Website' : 'Add Website'}</h2>
+        <h2 className="liquid-title-text text-3xl font-extrabold mb-6">{edit ? 'Edit Website' : 'Add Website'}</h2>
         <div className="flex flex-col gap-4">
           <div className="flex justify-center mb-4">
             {icon ? (
               <img src={icon} alt="Website Icon" className="h-24 w-24 object-contain" />
             ) : (
-              <div className="h-24 w-24 bg-white/10 rounded-lg flex items-center justify-center">
+              <div className="liquid-surface h-24 w-24 rounded-2xl flex items-center justify-center">
                 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="text-white/50">
                   <circle cx="12" cy="12" r="10"></circle>
                   <line x1="2" y1="12" x2="22" y2="12"></line>
@@ -109,16 +129,16 @@ const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onCl
             placeholder="Name"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400"
+            className="liquid-input p-3"
           />
           <input
             type="text"
             placeholder="URL"
             value={url}
             onChange={(e) => setUrl(e.target.value)}
-            className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400"
+            className="liquid-input p-3"
           />
-          <div className="flex items-center gap-2">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
             <div className="relative w-full">
               <input
                 type="text"
@@ -128,10 +148,11 @@ const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onCl
                   setIcon(e.target.value);
                   setIconQuery(e.target.value);
                 }}
-                className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400 w-full"
+                onFocus={ensureIconMetadata}
+                className="liquid-input p-3"
               />
               {filteredIcons.length > 0 && (
-                <div className="absolute z-10 w-full bg-gray-800 rounded-lg mt-1 max-h-60 overflow-y-auto">
+                <div className="liquid-panel liquid-dropdown-list absolute z-20 w-full rounded-xl mt-2 max-h-60 overflow-y-auto">
                   {filteredIcons.map(iconData => (
                     <div
                       key={iconData.name}
@@ -140,7 +161,7 @@ const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onCl
                         setIcon(iconUrl);
                         setFilteredIcons([]);
                       }}
-                      className="cursor-pointer flex items-center p-2 hover:bg-gray-700"
+                      className="cursor-pointer flex items-center p-2 transition-colors duration-150 ease-ios hover:bg-white/20"
                     >
                       <img
                         src={`https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/${iconData.base}/${iconData.name}.${iconData.base}`}
@@ -153,7 +174,7 @@ const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onCl
                 </div>
               )}
             </div>
-            <button onClick={fetchIcon} className="bg-gray-600 hover:bg-gray-500 text-white font-bold py-3 px-4 rounded-lg">
+            <button onClick={fetchIcon} className="liquid-button liquid-button-secondary liquid-focus py-3 px-4">
               Fetch
             </button>
           </div>
@@ -161,16 +182,16 @@ const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onCl
         <div className="flex justify-between items-center mt-8">
           <div>
             {edit && (
-                <button onClick={onDelete} className="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-6 rounded-lg">
+                <button onClick={onDelete} className="liquid-button liquid-button-danger liquid-focus py-2.5 px-5">
                     Delete
                 </button>
             )}
           </div>
-          <div className="flex justify-end gap-4">
+          <div className="flex justify-end gap-3">
-            <button onClick={handleSave} className="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-lg">
+            <button onClick={handleSave} className="liquid-button liquid-button-success liquid-focus py-2.5 px-5">
                 Save
             </button>
-            <button onClick={onClose} className="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-6 rounded-lg">
+            <button onClick={onClose} className="liquid-button liquid-button-secondary liquid-focus py-2.5 px-5">
                 Close
             </button>
           </div>

components/WebsiteTile.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 import { Website } from '../types';
 
 interface WebsiteTileProps {
@@ -23,7 +23,6 @@ const getTileSizeClass = (size: string | undefined) => {
 };
 
 
-// Returns normal icon size in px
 const getIconPixelSize = (size: string | undefined): number => {
   switch (size) {
     case 'small':
@@ -37,7 +36,6 @@ const getIconPixelSize = (size: string | undefined): number => {
   }
 };
 
-// Returns loading icon size in px
 const getIconLoadingPixelSize = (size: string | undefined): number => {
   switch (size) {
     case 'small':
@@ -61,53 +59,48 @@ const WebsiteTile: React.FC<WebsiteTileProps> = ({ website, isEditing, onEdit, o
       return;
     }
     setIsLoading(true);
-
-    // Simulate loading time (dev purpose)
-    // e.preventDefault();
-    // setTimeout(() => {
-    //   setIsLoading(false);
-    // }, 3500); // Small delay to show spinner before navigation
   };
 
   const iconSizeClass = `w-[${getIconPixelSize(tileSize)}px] h-[${getIconPixelSize(tileSize)}px]`;
   const iconSizeLoadingClass = `w-[${getIconLoadingPixelSize(tileSize)}px] h-[${getIconLoadingPixelSize(tileSize)}px]`;
 
   return (
-    <div className={`relative ${getTileSizeClass(tileSize)} transition-all duration-200 ease-ios`}>
+    <div className={`relative ${getTileSizeClass(tileSize)} transition-all duration-200 ease-ios ${isEditing ? 'mb-4' : ''}`}>
       <a
         href={isEditing ? undefined : website.url}
         target="_self"
         rel="noopener noreferrer"
         onClick={handleClick}
-        className="group flex flex-col items-center justify-center p-4 bg-black/25 backdrop-blur-md border border-white/10 rounded-2xl w-full h-full transform transition-all duration-200 ease-ios hover:scale-[1.04] active:scale-[0.96] hover:bg-white/25 shadow-lg focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-opacity-75"
+        className={`liquid-surface liquid-tile liquid-focus group flex flex-col items-center justify-center w-full h-full p-4 ${isEditing ? 'pb-6' : ''}`}
+        aria-label={isEditing ? `${website.name} edit controls` : `Open ${website.name}`}
       >
         {isLoading && (
-          <div className="absolute inset-0 flex items-center justify-center mb-6">
+          <div className="absolute inset-0 z-10 flex items-center justify-center mb-6">
             <svg className="animate-spin h-10 w-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
               <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
               <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
             </svg>
           </div>
         )}
-        <div className={`flex items-center transition-all duration-200 ease-ios ${isLoading ? 'mt-18' : 'flex-col'} ${isLoading ? 'gap-2' : ''}`}>
+        <div className={`relative z-10 flex items-center transition-all duration-200 ease-ios ${isLoading ? 'translate-y-5 gap-2' : 'flex-col gap-3'}`}>
-          <div className={`transition-all duration-200 ease-ios ${isLoading ? iconSizeLoadingClass : iconSizeClass}`}>
+          <div className={`transition-all duration-200 ease-ios drop-shadow-[0_10px_20px_rgba(0,0,0,0.28)] ${isLoading ? iconSizeLoadingClass : iconSizeClass}`}>
-            <img src={website.icon} alt={`${website.name} icon`} className={`object-contain w-full h-full`} />
+            <img src={website.icon} alt={`${website.name} icon`} className="object-contain w-full h-full" />
           </div>
-          <span className={`text-slate-100 font-medium text-base tracking-wide text-center transition-all duration-200 ease-ios ${isLoading ? 'text-sm' : ''}`}>
+          <span className={`max-w-full px-1 text-slate-50 font-semibold text-base text-center leading-tight transition-all duration-200 ease-ios [text-shadow:0_2px_12px_rgba(2,6,23,0.44)] ${isLoading ? 'text-sm' : ''}`}>
             {website.name}
           </span>
         </div>
       </a>
       {isEditing && (
-        <div className="absolute bottom-2 left-0 right-0 flex justify-center gap-2">
+        <div className="liquid-surface liquid-edit-toolbar">
-          <button onClick={() => onMove(website, 'left')} className="text-white/50 hover:text-white transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-left" viewBox="0 0 16 16">
+          <button onClick={() => onMove(website, 'left')} className="liquid-edit-action liquid-focus" aria-label={`Move ${website.name} left`}><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
-            <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
+            <path fillRule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
           </svg></button>
-          <button onClick={() => onEdit(website)} className="text-white/50 hover:text-white transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pencil" viewBox="0 0 16 16">
+          <button onClick={() => onEdit(website)} className="liquid-edit-action liquid-focus" aria-label={`Edit ${website.name}`}><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
             <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
           </svg></button>
-          <button onClick={() => onMove(website, 'right')} className="text-white/50 hover:text-white transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-right" viewBox="0 0 16 16">
+          <button onClick={() => onMove(website, 'right')} className="liquid-edit-action liquid-focus" aria-label={`Move ${website.name} right`}><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
-            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
+            <path fillRule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
           </svg></button>
         </div>
       )}
@@ -115,4 +108,4 @@ const WebsiteTile: React.FC<WebsiteTileProps> = ({ website, isEditing, onEdit, o
   );
 };
 
-export default WebsiteTile;
+export default memo(WebsiteTile);

components/configuration/ClockTab.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import Dropdown from '../Dropdown';
+import ToggleSwitch from '../ToggleSwitch';
+import { Config } from '../../types';
+
+interface ClockTabProps {
+  config: Config;
+  onChange: (updates: Partial<Config>) => void;
+}
+
+const ClockTab: React.FC<ClockTabProps> = ({ config, onChange }) => {
+  const updateClock = (updates: Partial<Config['clock']>) => {
+    onChange({ clock: { ...config.clock, ...updates } });
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Enable Clock</label>
+        <ToggleSwitch
+          checked={config.clock.enabled}
+          onChange={(checked) => updateClock({ enabled: checked })}
+        />
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Clock Size</label>
+        <Dropdown
+          name="clock.size"
+          value={config.clock.size}
+          onChange={(e) => updateClock({ size: e.target.value as string })}
+          options={[
+            { value: 'tiny', label: 'Tiny' },
+            { value: 'small', label: 'Small' },
+            { value: 'medium', label: 'Medium' },
+            { value: 'large', label: 'Large' },
+          ]}
+        />
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Clock Font</label>
+        <Dropdown
+          name="clock.font"
+          value={config.clock.font}
+          onChange={(e) => updateClock({ font: e.target.value as string })}
+          options={[
+            { value: 'Helvetica', label: 'Helvetica' },
+            { value: `'Orbitron', sans-serif`, label: 'Orbitron' },
+            { value: 'monospace', label: 'Monospace' },
+            { value: 'cursive', label: 'Cursive' },
+          ]}
+        />
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Time Format</label>
+        <Dropdown
+          name="clock.format"
+          value={config.clock.format}
+          onChange={(e) => updateClock({ format: e.target.value as string })}
+          options={[
+            { value: 'h:mm A', label: 'AM/PM' },
+            { value: 'HH:mm', label: '24:00' },
+          ]}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ClockTab;

components/configuration/GeneralTab.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import Dropdown from '../Dropdown';
+import { Config } from '../../types';
+
+interface GeneralTabProps {
+  config: Config;
+  onChange: (updates: Partial<Config>) => void;
+}
+
+const GeneralTab: React.FC<GeneralTabProps> = ({ config, onChange }) => {
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <label className="text-slate-300 text-sm font-semibold mb-2 block">Title</label>
+        <input
+          type="text"
+          value={config.title}
+          onChange={(e) => onChange({ title: e.target.value })}
+          className="liquid-input p-3"
+        />
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Title Size</label>
+        <Dropdown
+          name="titleSize"
+          value={config.titleSize}
+          onChange={(e) => onChange({ titleSize: e.target.value as string })}
+          options={[
+            { value: 'tiny', label: 'Tiny' },
+            { value: 'small', label: 'Small' },
+            { value: 'medium', label: 'Medium' },
+            { value: 'large', label: 'Large' },
+          ]}
+        />
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Vertical Alignment</label>
+        <Dropdown
+          name="alignment"
+          value={config.alignment}
+          onChange={(e) => onChange({ alignment: e.target.value as string })}
+          options={[
+            { value: 'top', label: 'Top' },
+            { value: 'middle', label: 'Middle' },
+            { value: 'bottom', label: 'Bottom' },
+          ]}
+        />
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Tile Size</label>
+        <Dropdown
+          name="tileSize"
+          value={config.tileSize || 'medium'}
+          onChange={(e) => onChange({ tileSize: e.target.value as string })}
+          options={[
+            { value: 'small', label: 'Small' },
+            { value: 'medium', label: 'Medium' },
+            { value: 'large', label: 'Large' },
+          ]}
+        />
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Horizontal Alignment</label>
+        <Dropdown
+          name="horizontalAlignment"
+          value={config.horizontalAlignment}
+          onChange={(e) => onChange({ horizontalAlignment: e.target.value as string })}
+          options={[
+            { value: 'left', label: 'Left' },
+            { value: 'middle', label: 'Middle' },
+            { value: 'right', label: 'Right' },
+          ]}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default GeneralTab;

components/configuration/ServerWidgetTab.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+import ToggleSwitch from '../ToggleSwitch';
+import { Config, Server } from '../../types';
+
+interface ServerWidgetTabProps {
+  config: Config;
+  onChange: (updates: Partial<Config>) => void;
+}
+
+type RangeStyle = React.CSSProperties & { '--range-progress': string };
+
+const getRangeStyle = (value: number, min: number, max: number): RangeStyle => {
+  const progress = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+  return { '--range-progress': `${progress}%` };
+};
+
+const ServerWidgetTab: React.FC<ServerWidgetTabProps> = ({ config, onChange }) => {
+  const [newServerName, setNewServerName] = useState('');
+  const [newServerAddress, setNewServerAddress] = useState('');
+
+  const updateServerWidget = (updates: Partial<Config['serverWidget']>) => {
+    onChange({ serverWidget: { ...config.serverWidget, ...updates } });
+  };
+
+  const handleAddServer = () => {
+    if (newServerName.trim() === '' || newServerAddress.trim() === '') return;
+    const newServer: Server = {
+      id: Date.now().toString(),
+      name: newServerName,
+      address: newServerAddress,
+    };
+    updateServerWidget({ servers: [...config.serverWidget.servers, newServer] });
+    setNewServerName('');
+    setNewServerAddress('');
+  };
+
+  const handleRemoveServer = (id: string) => {
+    updateServerWidget({
+      servers: config.serverWidget.servers.filter((s) => s.id !== id),
+    });
+  };
+
+  const onDragEnd = (result: any) => {
+    if (!result.destination) return;
+    const items = Array.from(config.serverWidget.servers);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+    updateServerWidget({ servers: items });
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Enable Server Widget</label>
+        <ToggleSwitch
+          checked={config.serverWidget.enabled}
+          onChange={(checked) => updateServerWidget({ enabled: checked })}
+        />
+      </div>
+      {config.serverWidget.enabled && (
+        <>
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <label className="text-slate-300 text-sm font-semibold">Ping Frequency</label>
+            <div className="flex items-center gap-4">
+              <input
+                type="range"
+                min="5"
+                max="60"
+                value={config.serverWidget.pingFrequency}
+                onChange={(e) => updateServerWidget({ pingFrequency: Number(e.target.value) })}
+                className="liquid-range"
+                style={getRangeStyle(config.serverWidget.pingFrequency, 5, 60)}
+              />
+              <span className="w-12 text-right text-sm text-slate-200">{config.serverWidget.pingFrequency}s</span>
+            </div>
+          </div>
+          <div>
+            <h3 className="text-slate-300 text-sm font-semibold mb-2">Servers</h3>
+            <DragDropContext onDragEnd={onDragEnd}>
+              <Droppable droppableId="servers">
+                {(provided) => (
+                  <div
+                    {...provided.droppableProps}
+                    ref={provided.innerRef}
+                    className="flex flex-col gap-2"
+                  >
+                    {config.serverWidget.servers.map((server: Server, index: number) => (
+                      <Draggable key={server.id} draggableId={server.id} index={index}>
+                        {(provided) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            className="liquid-surface flex items-center justify-between rounded-xl p-3"
+                          >
+                            <div>
+                              <p className="font-semibold">{server.name}</p>
+                              <p className="text-sm text-slate-400">{server.address}</p>
+                            </div>
+                            <button
+                              onClick={() => handleRemoveServer(server.id)}
+                              className="liquid-edit-action liquid-focus text-red-300 hover:text-red-100"
+                              aria-label={`Remove ${server.name}`}
+                            >
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="16"
+                                height="16"
+                                fill="currentColor"
+                                className="bi bi-trash"
+                                viewBox="0 0 16 16"
+                              >
+                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                                <path
+                                  fillRule="evenodd"
+                                  d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
+            <div className="flex flex-col gap-2 mt-3 sm:flex-row">
+              <input
+                type="text"
+                placeholder="Server Name"
+                value={newServerName}
+                onChange={(e) => setNewServerName(e.target.value)}
+                className="liquid-input p-2.5"
+              />
+              <input
+                type="text"
+                placeholder="HTTP Address"
+                value={newServerAddress}
+                onChange={(e) => setNewServerAddress(e.target.value)}
+                className="liquid-input p-2.5"
+              />
+              <button
+                onClick={handleAddServer}
+                className="liquid-button liquid-button-primary liquid-focus py-2.5 px-4"
+              >
+                Add
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ServerWidgetTab;

components/configuration/ThemeTab.tsx

@@ -0,0 +1,284 @@
+import React, { useRef, useState } from 'react';
+import Dropdown from '../Dropdown';
+import { Config, Wallpaper } from '../../types';
+
+interface ThemeTabProps {
+  config: Config;
+  onChange: (updates: Partial<Config>) => void;
+  userWallpapers: Wallpaper[];
+  allWallpapers: Wallpaper[];
+  chromeStorageAvailable: boolean;
+  onAddWallpaper: (name: string, url: string) => Promise<void>;
+  onAddWallpaperFile: (file: File) => Promise<void>;
+  onDeleteWallpaper: (wallpaper: Wallpaper) => Promise<void>;
+  onNextWallpaper: () => void;
+}
+
+type RangeStyle = React.CSSProperties & { '--range-progress': string };
+
+const getRangeStyle = (value: number, min: number, max: number): RangeStyle => {
+  const progress = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+  return { '--range-progress': `${progress}%` };
+};
+
+const MIN_WALLPAPER_FREQUENCY_HOURS = 1;
+const MAX_WALLPAPER_FREQUENCY_HOURS = 48;
+const DEFAULT_WALLPAPER_FREQUENCY_HOURS = 24;
+
+const clampWallpaperFrequencyHours = (hours: number): number =>
+  Math.min(MAX_WALLPAPER_FREQUENCY_HOURS, Math.max(MIN_WALLPAPER_FREQUENCY_HOURS, Math.round(hours)));
+
+const getWallpaperFrequencyHours = (frequency: string): number => {
+  const match = frequency.match(/^(\d+)(h|d)$/);
+  if (!match) return DEFAULT_WALLPAPER_FREQUENCY_HOURS;
+  const value = Number(match[1]);
+  const hours = match[2] === 'd' ? value * 24 : value;
+  return clampWallpaperFrequencyHours(hours);
+};
+
+const formatWallpaperFrequency = (hours: number): string =>
+  `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+
+const ThemeTab: React.FC<ThemeTabProps> = ({
+  config,
+  onChange,
+  userWallpapers,
+  allWallpapers,
+  chromeStorageAvailable,
+  onAddWallpaper,
+  onAddWallpaperFile,
+  onDeleteWallpaper,
+  onNextWallpaper,
+}) => {
+  const [newWallpaperName, setNewWallpaperName] = useState('');
+  const [newWallpaperUrl, setNewWallpaperUrl] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const wallpaperFrequencyHours = getWallpaperFrequencyHours(config.wallpaperFrequency);
+
+  const handleAddWallpaper = async () => {
+    if (newWallpaperUrl.trim() === '') return;
+    try {
+      await onAddWallpaper(newWallpaperName, newWallpaperUrl);
+      setNewWallpaperName('');
+      setNewWallpaperUrl('');
+    } catch (error) {
+      alert('Error adding wallpaper. Please check the URL and try again.');
+      console.error(error);
+    }
+  };
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    try {
+      await onAddWallpaperFile(file);
+    } catch (error: any) {
+      alert(error?.message || 'Error adding wallpaper. Please try again.');
+      console.error(error);
+    }
+    e.target.value = '';
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Background</label>
+        <Dropdown
+          name="currentWallpapers"
+          value={config.currentWallpapers}
+          onChange={(e) => onChange({ currentWallpapers: e.target.value as string[] })}
+          multiple
+          options={allWallpapers.map((w) => ({ value: w.name, label: w.name }))}
+        />
+      </div>
+      {Array.isArray(config.currentWallpapers) && config.currentWallpapers.length > 1 && (
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <label className="text-slate-300 text-sm font-semibold">Change Frequency</label>
+          <div className="flex items-center gap-4">
+            <input
+              type="range"
+              min={MIN_WALLPAPER_FREQUENCY_HOURS}
+              max={MAX_WALLPAPER_FREQUENCY_HOURS}
+              step="1"
+              value={wallpaperFrequencyHours}
+              onChange={(e) => onChange({ wallpaperFrequency: `${Number(e.target.value)}h` })}
+              className="liquid-range"
+              style={getRangeStyle(
+                wallpaperFrequencyHours,
+                MIN_WALLPAPER_FREQUENCY_HOURS,
+                MAX_WALLPAPER_FREQUENCY_HOURS,
+              )}
+            />
+            <span className="w-20 text-right text-sm text-slate-200">
+              {formatWallpaperFrequency(wallpaperFrequencyHours)}
+            </span>
+          </div>
+        </div>
+      )}
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Wallpaper Blur</label>
+        <div className="flex items-center gap-4">
+          <input
+            type="range"
+            min="0"
+            max="50"
+            value={config.wallpaperBlur}
+            onChange={(e) => onChange({ wallpaperBlur: Number(e.target.value) })}
+            className="liquid-range"
+            style={getRangeStyle(config.wallpaperBlur, 0, 50)}
+          />
+          <span className="w-12 text-right text-sm text-slate-200">{config.wallpaperBlur}px</span>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Wallpaper Brightness</label>
+        <div className="flex items-center gap-4">
+          <input
+            type="range"
+            min="0"
+            max="200"
+            value={config.wallpaperBrightness}
+            onChange={(e) => onChange({ wallpaperBrightness: Number(e.target.value) })}
+            className="liquid-range"
+            style={getRangeStyle(config.wallpaperBrightness, 0, 200)}
+          />
+          <span className="w-12 text-right text-sm text-slate-200">{config.wallpaperBrightness}%</span>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <label className="text-slate-300 text-sm font-semibold">Wallpaper Opacity</label>
+        <div className="flex items-center gap-4">
+          <input
+            type="range"
+            min="1"
+            max="100"
+            value={config.wallpaperOpacity}
+            onChange={(e) => onChange({ wallpaperOpacity: Number(e.target.value) })}
+            className="liquid-range"
+            style={getRangeStyle(config.wallpaperOpacity, 1, 100)}
+          />
+          <span className="w-12 text-right text-sm text-slate-200">{config.wallpaperOpacity}%</span>
+        </div>
+      </div>
+      {chromeStorageAvailable && (
+        <>
+          <div>
+            <h3 className="text-slate-300 text-sm font-semibold mb-2">User Wallpapers</h3>
+            <div className="flex flex-col gap-2">
+              {userWallpapers.map((wallpaper) => (
+                <div
+                  key={wallpaper.name}
+                  className="liquid-surface flex items-center justify-between rounded-xl p-2.5"
+                >
+                  <span className="truncate">{wallpaper.name}</span>
+                  <button
+                    onClick={() => onDeleteWallpaper(wallpaper)}
+                    className="liquid-edit-action liquid-focus text-red-300 hover:text-red-100"
+                    aria-label={`Delete ${wallpaper.name}`}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      fill="currentColor"
+                      className="bi bi-trash"
+                      viewBox="0 0 16 16"
+                    >
+                      <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                      <path
+                        fillRule="evenodd"
+                        d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div>
+            <h3 className="text-slate-300 text-sm font-semibold mb-2">Add New Wallpaper</h3>
+            <div className="flex flex-col gap-2">
+              <input
+                type="text"
+                placeholder="Wallpaper Name (optional for URLs)"
+                value={newWallpaperName}
+                onChange={(e) => setNewWallpaperName(e.target.value)}
+                className="liquid-input p-2.5"
+              />
+              <div className="flex flex-col gap-2 sm:flex-row">
+                <input
+                  type="text"
+                  placeholder="Image URL"
+                  value={newWallpaperUrl}
+                  onChange={(e) => setNewWallpaperUrl(e.target.value)}
+                  className="liquid-input p-2.5"
+                />
+                <button
+                  onClick={handleAddWallpaper}
+                  className="liquid-button liquid-button-primary liquid-focus py-2.5 px-4"
+                >
+                  Add
+                </button>
+              </div>
+              <div className="flex items-center justify-center w-full">
+                <label
+                  htmlFor="file-upload"
+                  className="liquid-surface liquid-ghost-tile flex flex-col items-center justify-center w-full h-32 cursor-pointer transition-all duration-200 ease-ios"
+                >
+                  <div className="flex flex-col items-center justify-center pt-5 pb-6">
+                    <svg
+                      className="w-8 h-8 mb-4 text-gray-400"
+                      aria-hidden="true"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 20 16"
+                    >
+                      <path
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+                      />
+                    </svg>
+                    <p className="mb-2 text-sm text-gray-400">
+                      <span className="font-semibold">Click to upload</span> or drag and drop
+                    </p>
+                    <p className="text-xs text-gray-400">PNG, JPG, WEBP, etc.</p>
+                  </div>
+                  <input
+                    id="file-upload"
+                    type="file"
+                    className="hidden"
+                    onChange={handleFileUpload}
+                    ref={fileInputRef}
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+      <div className="flex justify-center pt-2">
+        <button
+          onClick={onNextWallpaper}
+          disabled={config.currentWallpapers.length === 0}
+          className="liquid-surface liquid-control liquid-focus disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-semibold py-2 px-4 rounded-2xl"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM4.5 7.5a.5.5 0 0 1 .5-.5h5.379L8.646 5.354a.5.5 0 1 1 .708-.708l2.5 2.5a.5.5 0 0 1 0 .708l-2.5 2.5a.5.5 0 0 1-.708-.708L10.379 8H5a.5.5 0 0 1-.5-.5z" />
+          </svg>
+          Next Wallpaper
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ThemeTab;

components/layout/CategoryGroup.tsx

@@ -1,3 +1,4 @@
+import React, { memo } from 'react';
 import WebsiteTile from '../WebsiteTile';
 import { Category, Website } from '../../types';
 
@@ -10,12 +11,23 @@ interface CategoryGroupProps {
   setEditingWebsite: (website: Website) => void;
   handleMoveWebsite: (website: Website, direction: 'left' | 'right') => void;
   getHorizontalAlignmentClass: (alignment: string) => string;
-  config: {
+  horizontalAlignment: string;
-    horizontalAlignment: string;
+  tileSize?: string;
-    tileSize?: string;
-  };
 }
 
+const getAddTileSizeClass = (size: string | undefined) => {
+  switch (size) {
+    case 'small':
+      return 'w-28 h-28';
+    case 'medium':
+      return 'w-32 h-32';
+    case 'large':
+      return 'w-36 h-36';
+    default:
+      return 'w-32 h-32';
+  }
+};
+
 const CategoryGroup: React.FC<CategoryGroupProps> = ({
   category,
   isEditing,
@@ -25,27 +37,29 @@ const CategoryGroup: React.FC<CategoryGroupProps> = ({
   setEditingWebsite,
   handleMoveWebsite,
   getHorizontalAlignmentClass,
-  config,
+  horizontalAlignment,
+  tileSize,
 }) => {
   return (
     <div key={category.id} className="w-full">
-      <div className={`flex ${getHorizontalAlignmentClass(config.horizontalAlignment)} items-center mb-4 w-full ${config.horizontalAlignment !== 'middle' ? 'px-8' : ''}`}>
+      <div className={`flex ${getHorizontalAlignmentClass(horizontalAlignment)} items-center mb-3 w-full ${horizontalAlignment !== 'middle' ? 'px-3 sm:px-8' : ''}`}>
-        <h2 className={`text-2xl font-bold text-white ${config.horizontalAlignment === 'left' ? 'text-left' : config.horizontalAlignment === 'right' ? 'text-right' : 'text-center'} ${config.horizontalAlignment !== 'middle' ? 'w-full' : ''}`}>{category.name}</h2>
+        <h2 className={`liquid-category-title text-2xl font-extrabold text-white ${horizontalAlignment === 'left' ? 'text-left' : horizontalAlignment === 'right' ? 'text-right' : 'text-center'} ${horizontalAlignment !== 'middle' ? 'w-full' : ''}`}>{category.name}</h2>
         {isEditing && (
           <button
             onClick={() => {
               setEditingCategory(category);
               setIsCategoryModalOpen(true);
             }}
-            className={`ml-2 text-white/50 hover:text-white transition-all duration-300 ease-in-out transform ${isEditing ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
+            className={`liquid-surface liquid-edit-action liquid-focus ml-2 shrink-0 transition-all duration-300 ease-spring transform ${isEditing ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
+            aria-label={`Edit ${category.name} category`}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" className="bi bi-pencil" viewBox="0 0 16 16">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
               <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
             </svg>
           </button>
         )}
       </div>
-      <div className={`flex flex-wrap ${getHorizontalAlignmentClass(config.horizontalAlignment)} gap-6`}>
+      <div className={`flex flex-wrap ${getHorizontalAlignmentClass(horizontalAlignment)} gap-5 sm:gap-6 px-1 sm:px-0`}>
         {category.websites.map((website) => (
           <WebsiteTile
             key={website.id}
@@ -53,18 +67,20 @@ const CategoryGroup: React.FC<CategoryGroupProps> = ({
             isEditing={isEditing}
             onEdit={setEditingWebsite}
             onMove={handleMoveWebsite}
-            tileSize={config.tileSize}
+            tileSize={tileSize}
           />
         ))}
         {isEditing && (
           <button
             onClick={() => setAddingWebsite(category)}
-            className={`text-white/50 hover:text-white transition-all duration-300 ease-in-out transform ${isEditing ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
+            className={`liquid-surface liquid-control liquid-ghost-tile liquid-focus flex-col ${getAddTileSizeClass(tileSize)} transition-all duration-300 ease-spring transform ${isEditing ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
+            aria-label={`Add website to ${category.name}`}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" className="bi bi-plus-circle" viewBox="0 0 16 16">
+            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
               <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
               <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
             </svg>
+            <span className="text-sm font-bold">Add</span>
           </button>
         )}
       </div>
@@ -72,4 +88,4 @@ const CategoryGroup: React.FC<CategoryGroupProps> = ({
   );
 };
 
-export default CategoryGroup;
+export default memo(CategoryGroup);

components/layout/ConfigurationButton.tsx

@@ -6,12 +6,13 @@ interface ConfigurationButtonProps {
 
 const ConfigurationButton: React.FC<ConfigurationButtonProps> = ({ onClick }) => {
   return (
-    <div className="absolute top-4 right-4">
+    <div className="absolute top-4 right-4 z-20">
       <button
         onClick={onClick}
-        className="bg-black/25 backdrop-blur-md border border-white/10 rounded-xl p-3 text-white flex items-center gap-2 hover:bg-white/25 active:scale-90 transition-all duration-200 ease-ios"
+        className="liquid-surface liquid-control liquid-focus rounded-2xl p-3"
+        aria-label="Open configuration"
       >
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
             <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="2" fill="none"/>
             <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09c.7 0 1.31-.4 1.51-1a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06c.51.51 1.31.61 1.82.33.51-.28 1-.81 1-1.51V3a2 2 0 1 1 4 0v.09c0 .7.49 1.23 1 1.51.51.28 1.31.18 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82c.2.6.81 1 1.51 1H21a2 2 0 1 1 0 4h-.09c-.7 0-1.31.4-1.51 1z"/>
           </svg>

components/layout/EditButton.tsx

@@ -7,13 +7,13 @@ interface EditButtonProps {
 
 const EditButton: React.FC<EditButtonProps> = ({ isEditing, onClick }) => {
   return (
-    <div className="absolute top-4 left-4">
+    <div className="absolute top-4 left-4 z-20">
       <button
         onClick={onClick}
-        className="bg-black/25 backdrop-blur-md border border-white/10 rounded-xl p-3 text-white flex items-center gap-2 hover:bg-white/25 active:scale-90 transition-all duration-200 ease-ios"
+        className={`liquid-surface liquid-control liquid-focus rounded-2xl px-3.5 py-3 text-xs font-bold ${isEditing ? 'pr-4' : ''}`}
-        style={{ fontSize: '12px' }}
+        aria-label={isEditing ? 'Finish editing' : 'Edit page'}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pencil" viewBox="0 0 16 16">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
           <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
         </svg>
         {isEditing ? 'Done' : ''}

components/layout/Header.tsx

@@ -50,20 +50,21 @@ const getSubtitleSizeClass = (size: string) => {
   }
 };
 
+export { getClockSizeClass, getTitleSizeClass, getSubtitleSizeClass };
+
 const Header: React.FC<HeaderProps> = ({ config }) => {
   return (
     <>
       {config.clock.enabled && (
-        <div className="absolute top-5 left-1/2 -translate-x-1/2 z-10 flex justify-center w-auto p-2">
+        <div className="absolute top-5 left-1/2 -translate-x-1/2 z-10 flex justify-center w-auto px-3 py-2">
           <Clock config={config} getClockSizeClass={getClockSizeClass} />
         </div>
       )}
-      <div className={`flex flex-col ${config.alignment === 'bottom' ? 'mt-auto' : ''} items-center`}>
+      <div className={`relative z-10 flex flex-col ${config.alignment === 'bottom' ? 'mt-auto' : ''} items-center`}>
         {config.title && (
           <div className="text-center">
             <h1
-              className={`${getTitleSizeClass(config.titleSize)} font-extrabold text-white tracking-tighter mb-3 mt-4`}
+              className={`liquid-title-text ${getTitleSizeClass(config.titleSize)} font-extrabold text-white mb-2 mt-3`}
-              style={{ textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}
             >
               {config.title}
             </h1>

components/services/ConfigurationService.ts

@@ -0,0 +1,205 @@
+import { Config, Wallpaper } from '../../types';
+import {
+  addWallpaperToChromeStorageLocal,
+  removeWallpaperFromChromeStorageLocal,
+} from '../utils/StorageLocalManager';
+
+const REQUIRED_LOCAL_STORAGE_KEYS = ['config', 'categories', 'userWallpapers', 'wallpaperState'] as const;
+type RequiredLocalStorageKey = typeof REQUIRED_LOCAL_STORAGE_KEYS[number];
+
+export const DEFAULT_CONFIG: Config = {
+  title: 'Vision Start',
+  currentWallpapers: ['Beach'],
+  wallpaperFrequency: '1d',
+  wallpaperBlur: 0,
+  wallpaperBrightness: 108,
+  wallpaperOpacity: 96,
+  titleSize: 'medium',
+  alignment: 'middle',
+  horizontalAlignment: 'middle',
+  tileSize: 'medium',
+  clock: {
+    enabled: true,
+    size: 'medium',
+    font: 'Helvetica',
+    format: 'h:mm A',
+  },
+  serverWidget: {
+    enabled: false,
+    pingFrequency: 15,
+    servers: [],
+  },
+};
+
+const safeParse = (value: string | null): unknown => {
+  if (value === null) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+};
+
+const toStorageString = (value: unknown): string =>
+  typeof value === 'string' ? value : JSON.stringify(value);
+
+const isPlainObject = (v: unknown): v is Record<string, unknown> =>
+  typeof v === 'object' && v !== null && !Array.isArray(v);
+
+const deepMerge = <T>(base: T, stored: unknown): T => {
+  if (isPlainObject(base)) {
+    const result: Record<string, unknown> = { ...(base as Record<string, unknown>) };
+    const storedObj = isPlainObject(stored) ? stored : {};
+    for (const key of Object.keys(result)) {
+      if (Object.prototype.hasOwnProperty.call(storedObj, key)) {
+        result[key] = deepMerge(result[key], storedObj[key]);
+      }
+    }
+    return result as T;
+  }
+  if (Array.isArray(base)) {
+    return (Array.isArray(stored) ? stored : base) as T;
+  }
+  if (stored === null) return base;
+  return typeof stored === typeof base ? (stored as T) : base;
+};
+
+export const normalizeConfig = (stored: unknown): Config =>
+  deepMerge(DEFAULT_CONFIG, stored);
+
+export const ConfigurationService = {
+  loadConfig(): Config {
+    try {
+      const stored = localStorage.getItem('config');
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        return normalizeConfig(parsed);
+      }
+    } catch (error) {
+      console.error('Error parsing config from localStorage', error);
+    }
+    return { ...DEFAULT_CONFIG };
+  },
+
+  saveConfig(config: Config): void {
+    localStorage.setItem('config', JSON.stringify(config));
+  },
+
+  loadUserWallpapers(): Wallpaper[] {
+    try {
+      const stored = localStorage.getItem('userWallpapers');
+      if (stored) return JSON.parse(stored);
+    } catch {
+      // ignore
+    }
+    return [];
+  },
+
+  saveUserWallpapers(wallpapers: Wallpaper[]): void {
+    localStorage.setItem('userWallpapers', JSON.stringify(wallpapers));
+  },
+
+  async addWallpaper(name: string, url: string): Promise<Wallpaper> {
+    const finalName = await addWallpaperToChromeStorageLocal(name, url);
+    return { name: finalName };
+  },
+
+  async addWallpaperFile(file: File): Promise<Wallpaper> {
+    return new Promise((resolve, reject) => {
+      if (file.size > 4 * 1024 * 1024) {
+        reject(new Error('File size exceeds 4MB. Please choose a smaller file.'));
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const base64 = reader.result as string;
+        if (base64.length > 4.5 * 1024 * 1024) {
+          reject(new Error('The uploaded image is too large. Please choose a smaller file.'));
+          return;
+        }
+        try {
+          const finalName = await addWallpaperToChromeStorageLocal(file.name, base64);
+          resolve({ name: finalName });
+        } catch (error) {
+          reject(error);
+        }
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  },
+
+  async deleteWallpaper(wallpaper: Wallpaper): Promise<void> {
+    await removeWallpaperFromChromeStorageLocal(wallpaper.name);
+  },
+
+  exportConfig(): void {
+    const exportPayload = {
+      version: 1,
+      exportedAt: new Date().toISOString(),
+      requiredLocalStorageKeys: [...REQUIRED_LOCAL_STORAGE_KEYS],
+      localStorage: REQUIRED_LOCAL_STORAGE_KEYS.reduce(
+        (acc, key) => {
+          acc[key] = safeParse(localStorage.getItem(key));
+          return acc;
+        },
+        {} as Record<RequiredLocalStorageKey, unknown>,
+      ),
+    };
+
+    const blob = new Blob([JSON.stringify(exportPayload, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `vision-start-config-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  },
+
+  async importConfig(file: File): Promise<{ config: Config; userWallpapers: Wallpaper[] }> {
+    const fileContent = await file.text();
+    const parsed = JSON.parse(fileContent);
+    const localStorageData =
+      parsed?.localStorage && typeof parsed.localStorage === 'object'
+        ? parsed.localStorage
+        : parsed;
+
+    if (!localStorageData || typeof localStorageData !== 'object') {
+      throw new Error('Invalid import file format.');
+    }
+
+    let importedAny = false;
+    REQUIRED_LOCAL_STORAGE_KEYS.forEach((key) => {
+      if (Object.prototype.hasOwnProperty.call(localStorageData, key)) {
+        const rawValue = (localStorageData as Record<string, unknown>)[key];
+        localStorage.setItem(key, toStorageString(rawValue));
+        importedAny = true;
+      }
+    });
+
+    if (!importedAny) {
+      throw new Error(`No required keys found. Expected: ${REQUIRED_LOCAL_STORAGE_KEYS.join(', ')}`);
+    }
+
+    const importedConfig = (localStorageData as Record<string, unknown>).config;
+    const importedUserWallpapers = (localStorageData as Record<string, unknown>)
+      .userWallpapers;
+
+    return {
+      config: normalizeConfig(importedConfig),
+      userWallpapers: Array.isArray(importedUserWallpapers) ? importedUserWallpapers : [],
+    };
+  },
+
+  resetWallpaperState(): void {
+    localStorage.setItem(
+      'wallpaperState',
+      JSON.stringify({
+        lastWallpaperChange: new Date().toISOString(),
+        currentIndex: 0,
+      }),
+    );
+  },
+};

components/utils/jsping.js

@@ -1,9 +1,25 @@
 function request_image(url) {
     return new Promise(function(resolve, reject) {
         var img = new Image();
-        img.onload = function() { resolve(img); };
+        var settled = false;
-        img.onerror = function() { reject(url); };
+        function settleOk() {
+            if (settled) return;
+            settled = true;
+            clearTimeout(failTimer);
+            img.onload = img.onerror = null;
+            resolve(img);
+        }
+        function settleFail() {
+            if (settled) return;
+            settled = true;
+            clearTimeout(failTimer);
+            img.onload = img.onerror = null;
+            reject(url);
+        }
+        img.onload = settleOk;
+        img.onerror = settleFail;
         img.src = url + '?random-no-cache=' + Math.floor((1 + Math.random()) * 0x10000).toString(16);
+        var failTimer = setTimeout(settleFail, 5000);
     });
 }
 
@@ -16,8 +32,6 @@ function ping(url, multiplier) {
             resolve(delta);
         };
         request_image(url).then(response).catch(response);
-        
-        setTimeout(function() { reject(Error('Timeout')); }, 5000);
     });
 }
 

index.css

@@ -3,4 +3,547 @@
 @theme {
   --ease-ios: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-liquid: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+html {
+  background: #0f1720;
+}
+
+body {
+  min-width: 320px;
+  margin: 0;
+  background: #0f1720;
+  color: white;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+.vision-shell {
+  position: relative;
+  isolation: isolate;
+  overflow-x: hidden;
+  background:
+    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.06), transparent 28rem),
+    radial-gradient(circle at 82% 20%, rgba(34, 211, 238, 0.05), transparent 26rem),
+    linear-gradient(135deg, rgba(241, 245, 249, 0.04), rgba(15, 23, 42, 0.16) 52%, rgba(8, 13, 20, 0.32));
+}
+
+.vision-shell::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -15;
+  pointer-events: none;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(2, 6, 23, 0.3) 100%),
+    radial-gradient(ellipse at center, transparent 0%, rgba(2, 6, 23, 0.18) 78%, rgba(2, 6, 23, 0.36) 100%);
+}
+
+.wallpaper-transition {
+  transition: filter 0.7s var(--ease-liquid), opacity 0.7s var(--ease-liquid), transform 0.7s var(--ease-liquid);
+}
+
+.wallpaper-layer {
+  position: fixed;
+  inset: 0;
+  z-index: -30;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  transform: scale(1.015);
+  will-change: filter, opacity, transform;
+}
+
+.wallpaper-luminance {
+  position: fixed;
+  inset: 0;
+  z-index: -25;
+  pointer-events: none;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 34%, rgba(5, 12, 20, 0.34)),
+    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.05), transparent 28rem),
+    radial-gradient(circle at 50% 100%, rgba(8, 13, 24, 0.36), transparent 36rem);
+}
+
+.liquid-surface {
+  position: relative;
+  overflow: hidden;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04) 46%, rgba(15, 23, 42, 0.18)),
+    rgba(8, 13, 23, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.14),
+    inset 0 -10px 20px rgba(2, 6, 23, 0.12),
+    0 12px 28px rgba(2, 6, 23, 0.2);
+  -webkit-backdrop-filter: blur(10px) saturate(112%);
+  backdrop-filter: blur(10px) saturate(112%);
+}
+
+.liquid-surface::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 34%),
+    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07), transparent 42%);
+  opacity: 0.28;
+}
+
+.liquid-panel {
+  position: relative;
+  overflow: hidden;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04) 48%, rgba(5, 12, 22, 0.34)),
+    rgba(8, 13, 23, 0.48);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    0 22px 56px rgba(2, 6, 23, 0.3);
+  -webkit-backdrop-filter: blur(14px) saturate(115%);
+  backdrop-filter: blur(14px) saturate(115%);
+}
+
+.liquid-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  color: white;
+  transition:
+    transform 180ms var(--ease-ios),
+    background 180ms var(--ease-ios),
+    border-color 180ms var(--ease-ios),
+    box-shadow 180ms var(--ease-ios),
+    color 180ms var(--ease-ios);
+}
+
+.liquid-control:hover {
+  transform: translateY(-1px) scale(1.025);
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)),
+    rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.22);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.18),
+    0 14px 30px rgba(2, 6, 23, 0.22);
+}
+
+.liquid-control:active {
+  transform: scale(0.94);
+}
+
+.liquid-focus {
+  outline: none;
+}
+
+.liquid-focus:focus-visible {
+  outline: 2px solid rgba(34, 211, 238, 0.9);
+  outline-offset: 3px;
+}
+
+.liquid-input {
+  width: 100%;
+  color: white;
+  background: rgba(255, 255, 255, 0.075);
+  border: 1px solid rgba(255, 255, 255, 0.13);
+  border-radius: 0.875rem;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transition:
+    background 180ms var(--ease-ios),
+    border-color 180ms var(--ease-ios),
+    box-shadow 180ms var(--ease-ios);
+}
+
+.liquid-input::placeholder {
+  color: rgba(226, 232, 240, 0.58);
+}
+
+.liquid-input:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+.liquid-input:focus {
+  outline: none;
+  border-color: rgba(34, 211, 238, 0.76);
+  box-shadow:
+    0 0 0 3px rgba(34, 211, 238, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.16);
+}
+
+.liquid-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 0.875rem;
+  font-weight: 700;
+  color: white;
+  transition:
+    transform 150ms var(--ease-ios),
+    filter 150ms var(--ease-ios),
+    background 150ms var(--ease-ios),
+    box-shadow 150ms var(--ease-ios);
+}
+
+.liquid-button:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.08);
+}
+
+.liquid-button:active {
+  transform: scale(0.96);
+}
+
+.liquid-button-primary {
+  background: linear-gradient(135deg, #06b6d4, #22d3ee);
+  box-shadow: 0 14px 28px rgba(8, 145, 178, 0.22);
+}
+
+.liquid-button-success {
+  background: linear-gradient(135deg, #10b981, #22c55e);
+  box-shadow: 0 14px 28px rgba(34, 197, 94, 0.2);
+}
+
+.liquid-button-secondary {
+  background: rgba(100, 116, 139, 0.74);
+}
+
+.liquid-button-danger {
+  background: linear-gradient(135deg, #ef4444, #fb7185);
+}
+
+.liquid-range {
+  --range-progress: 50%;
+  width: clamp(10rem, 36vw, 13.5rem);
+  height: 1.6rem;
+  appearance: none;
+  background: transparent;
+  accent-color: #22d3ee;
+  cursor: pointer;
+}
+
+.liquid-range:focus {
+  outline: none;
+}
+
+.liquid-range:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.liquid-range::-webkit-slider-runnable-track {
+  height: 0.68rem;
+  border-radius: 999px;
+  background:
+    linear-gradient(90deg, rgba(34, 211, 238, 0.92), rgba(103, 232, 249, 0.78)) 0 / var(--range-progress) 100% no-repeat,
+    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)),
+    rgba(8, 13, 23, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 2px rgba(2, 6, 23, 0.24),
+    0 8px 18px rgba(2, 6, 23, 0.14);
+  transition:
+    border-color 180ms var(--ease-ios),
+    box-shadow 180ms var(--ease-ios);
+}
+
+.liquid-range:hover::-webkit-slider-runnable-track {
+  border-color: rgba(255, 255, 255, 0.24);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.18),
+    inset 0 -1px 2px rgba(2, 6, 23, 0.2),
+    0 10px 22px rgba(2, 6, 23, 0.18);
+}
+
+.liquid-range::-webkit-slider-thumb {
+  width: 1.18rem;
+  height: 1.18rem;
+  margin-top: -0.31rem;
+  appearance: none;
+  border-radius: 999px;
+  background: linear-gradient(145deg, #ffffff, #e5fbff 48%, #a5f3fc);
+  border: 1px solid rgba(255, 255, 255, 0.86);
+  box-shadow:
+    0 0 0 4px rgba(34, 211, 238, 0.1),
+    0 8px 18px rgba(2, 6, 23, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  transition:
+    transform 180ms var(--ease-ios),
+    box-shadow 180ms var(--ease-ios),
+    border-color 180ms var(--ease-ios);
+}
+
+.liquid-range:hover::-webkit-slider-thumb {
+  transform: scale(1.06);
+  box-shadow:
+    0 0 0 5px rgba(34, 211, 238, 0.15),
+    0 10px 22px rgba(2, 6, 23, 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.95);
+}
+
+.liquid-range:active::-webkit-slider-thumb {
+  transform: scale(0.94);
+}
+
+.liquid-range:focus-visible::-webkit-slider-thumb {
+  border-color: rgba(34, 211, 238, 0.9);
+  box-shadow:
+    0 0 0 4px rgba(34, 211, 238, 0.24),
+    0 0 0 7px rgba(255, 255, 255, 0.08),
+    0 10px 22px rgba(2, 6, 23, 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.95);
+}
+
+.liquid-range::-moz-range-track {
+  height: 0.68rem;
+  border-radius: 999px;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)),
+    rgba(8, 13, 23, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 2px rgba(2, 6, 23, 0.24),
+    0 8px 18px rgba(2, 6, 23, 0.14);
+}
+
+.liquid-range::-moz-range-progress {
+  height: 0.68rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(34, 211, 238, 0.92), rgba(103, 232, 249, 0.78));
+}
+
+.liquid-range::-moz-range-thumb {
+  width: 1.18rem;
+  height: 1.18rem;
+  border-radius: 999px;
+  background: linear-gradient(145deg, #ffffff, #e5fbff 48%, #a5f3fc);
+  border: 1px solid rgba(255, 255, 255, 0.86);
+  box-shadow:
+    0 0 0 4px rgba(34, 211, 238, 0.1),
+    0 8px 18px rgba(2, 6, 23, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  transition:
+    transform 180ms var(--ease-ios),
+    box-shadow 180ms var(--ease-ios),
+    border-color 180ms var(--ease-ios);
+}
+
+.liquid-range:hover::-moz-range-thumb {
+  transform: scale(1.06);
+  box-shadow:
+    0 0 0 5px rgba(34, 211, 238, 0.15),
+    0 10px 22px rgba(2, 6, 23, 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.95);
+}
+
+.liquid-range:active::-moz-range-thumb {
+  transform: scale(0.94);
+}
+
+.liquid-range:focus-visible::-moz-range-thumb {
+  border-color: rgba(34, 211, 238, 0.9);
+  box-shadow:
+    0 0 0 4px rgba(34, 211, 238, 0.24),
+    0 0 0 7px rgba(255, 255, 255, 0.08),
+    0 10px 22px rgba(2, 6, 23, 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.95);
+}
+
+.liquid-tile {
+  border-radius: 1.35rem;
+  transition:
+    transform 240ms var(--ease-liquid),
+    background 260ms var(--ease-ios),
+    border-color 260ms var(--ease-ios),
+    box-shadow 340ms var(--ease-liquid);
+  will-change: transform, box-shadow;
+}
+
+.liquid-tile:hover {
+  transform: translateY(-3px) scale(1.025);
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08) 46%, rgba(34, 211, 238, 0.08)),
+    rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.24);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.16),
+    0 18px 34px rgba(2, 6, 23, 0.24),
+    0 0 20px rgba(34, 211, 238, 0.04);
+}
+
+.liquid-tile:active {
+  transform: scale(0.965);
+}
+
+.liquid-ghost-tile {
+  border-radius: 1.35rem;
+  color: rgba(255, 255, 255, 0.72);
+  border-style: dashed;
+  border-color: rgba(255, 255, 255, 0.32);
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)),
+    rgba(255, 255, 255, 0.03);
+}
+
+.liquid-ghost-tile:hover {
+  color: white;
+  border-color: rgba(34, 211, 238, 0.62);
+  background:
+    linear-gradient(145deg, rgba(34, 211, 238, 0.08), rgba(255, 255, 255, 0.04)),
+    rgba(255, 255, 255, 0.05);
+}
+
+.liquid-edit-toolbar {
+  position: absolute;
+  left: 50%;
+  bottom: -0.9rem;
+  z-index: 5;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.25rem;
+  border-radius: 999px;
+  transform: translateX(-50%);
+}
+
+.liquid-edit-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.8rem;
+  height: 1.8rem;
+  border-radius: 999px;
+  color: rgba(255, 255, 255, 0.72);
+  transition:
+    color 150ms var(--ease-ios),
+    background 150ms var(--ease-ios),
+    transform 150ms var(--ease-ios);
+}
+
+.liquid-edit-action:hover {
+  color: white;
+  background: rgba(255, 255, 255, 0.16);
+  transform: scale(1.08);
+}
+
+.liquid-edit-action:active {
+  transform: scale(0.92);
+}
+
+.liquid-category-title {
+  text-shadow: 0 2px 16px rgba(2, 6, 23, 0.45);
+  letter-spacing: 0;
+}
+
+.liquid-clock-text,
+.liquid-title-text {
+  text-shadow:
+    0 2px 18px rgba(2, 6, 23, 0.45),
+    0 0 28px rgba(255, 255, 255, 0.12);
+  letter-spacing: 0;
+}
+
+.liquid-drawer {
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03) 38%, rgba(7, 12, 22, 0.44)),
+    rgba(7, 12, 22, 0.68);
+  border-left: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow:
+    inset 1px 0 0 rgba(255, 255, 255, 0.08),
+    -26px 0 64px rgba(2, 6, 23, 0.3);
+  -webkit-backdrop-filter: blur(16px) saturate(112%);
+  backdrop-filter: blur(16px) saturate(112%);
+}
+
+.liquid-modal-backdrop {
+  background:
+    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.04), transparent 32rem),
+    rgba(3, 7, 18, 0.72);
+  -webkit-backdrop-filter: blur(6px) saturate(108%);
+  backdrop-filter: blur(6px) saturate(108%);
+}
+
+.liquid-modal-card {
+  overflow: visible;
+  animation: liquid-pop 240ms var(--ease-spring);
+}
+
+.liquid-dropdown-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  animation: liquid-drop 150ms var(--ease-ios);
+  transform-origin: top;
+}
+
+.liquid-status-dot {
+  box-shadow:
+    0 0 0 3px rgba(255, 255, 255, 0.1),
+    0 0 18px currentColor;
+}
+
+@keyframes liquid-pop {
+  from {
+    opacity: 0;
+    transform: translateY(0.75rem) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes liquid-drop {
+  from {
+    opacity: 0;
+    transform: translateY(-0.35rem) scaleY(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+
+  .liquid-control:hover,
+  .liquid-tile:hover,
+  .liquid-button:hover,
+  .liquid-edit-action:hover,
+  .liquid-range:hover::-webkit-slider-thumb,
+  .liquid-range:active::-webkit-slider-thumb,
+  .liquid-range:hover::-moz-range-thumb,
+  .liquid-range:active::-moz-range-thumb {
+    transform: none;
+  }
+
+  .liquid-range::-webkit-slider-runnable-track,
+  .liquid-range::-webkit-slider-thumb,
+  .liquid-range::-moz-range-track,
+  .liquid-range::-moz-range-progress,
+  .liquid-range::-moz-range-thumb {
+    transition: none;
+  }
 }

index.html

@@ -8,7 +8,7 @@
     
 <link rel="stylesheet" href="/index.css">
 </head>
-  <body class="bg-black">
+  <body class="bg-slate-950">
     <div id="root"></div>
   <script type="module" src="/index.tsx"></script>
 </body>

manifest.json

@@ -1,14 +1,19 @@
 {
   "manifest_version": 3,
   "name": "Vision Startpage",
-  "version": "1.0",
+  "version": "0.0.0",
-  "description": "A beautiful and customizable startpage for your browser.",
+  "description": "A light, modern and customizable startpage.",
   "chrome_url_overrides": {
     "newtab": "index.html"
   },
   "permissions": [
     "storage"
   ],
+  "icons": {
+    "16": "extension/icons/vision-16.png",
+    "48": "extension/icons/vision-48.png",
+    "128": "extension/icons/vision-128.png"
+  },
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self';"
   }

nginx.conf

@@ -0,0 +1,13 @@
+gzip on;
+gzip_comp_level 6;
+gzip_min_length 256;
+gzip_proxied any;
+gzip_vary on;
+gzip_types
+    application/json
+    application/javascript
+    application/xml
+    text/css
+    text/plain
+    text/xml
+    image/svg+xml;

notes-widget-plan.md

@@ -1,57 +0,0 @@
-# Notes Widget Implementation Plan
-## Overview
-This document outlines the implementation plan for a Notes / Scratchpad Widget feature that:
-1. Provides a text area that saves content to local storage automatically
-2. Includes bold and italic formatting buttons
-3. Has a toggle icon to show/hide the widget
-4. Has a glassy/frosty design with strong blur
-## Implementation Steps
-### 1. Update Config Interface
-In `types.ts`, add a new `notesWidget` configuration object:
-```typescript
-notesWidget: {
-  enabled: boolean;
-}
-```
-### 2. Update ConfigurationModal Component
-In `components/ConfigurationModal.tsx`:
-- Add `notesWidget` to the config state initialization (lines 18-44)
-- Add a new "Notes" tab to the tab navigation (lines 259-284)
-- Add a toggle switch for notesWidget.enabled in the Notes tab (lines 552-560)
-- Add the Notes tab content with the toggle switch
-### 3. Create NotesWidget Component
-Create a new file `components/NotesWidget.tsx`:
-- Text area for notes input
-- Bold and italic formatting buttons
-- Toggle icon for showing/hiding the widget
-- Glassy/frosty design with strong blur
-- Auto-save to localStorage using `userNotes` key
-### 4. Update App Component
-In `App.tsx`:
-- Add notesWidget to the defaultConfig (lines 14-35)
-- Add the NotesWidget component to the render output when enabled in config (lines 250-251)
-- Add logic to save/load notes from localStorage
-## Technical Details
-### Configuration Structure
-The configuration will be stored in the same way as other widgets:
-```typescript
-config: {
-  notesWidget: {
-    enabled: boolean;
-  }
-}
-```
-### Local Storage Key
-All notes text will be saved to localStorage with the key `userNotes`.
-### UI Design
-- Widget will be positioned on the left side of the screen
-- Vertically centered using flexbox
-- Glassy/frosty design using backdrop-blur and background transparency
-- Strong blur effect (backdrop-blur-2xl or similar)
-- Toggle icon will be positioned on the left edge of the widget
-- When hidden, icon shows a "show" indicator
-- When open, icon shows a "hide" indicator
-### Formatting Buttons
-- Bold button (B)
-- Italic button (I)
-- These will use HTML formatting (bold/italic tags) or rich text approach

package-lock.json

@@ -19,6 +19,7 @@
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.5",
         "autoprefixer": "^10.4.21",
+        "playwright": "1.61.1",
         "postcss": "^8.5.6",
         "tailwindcss": "^4.1.11",
         "typescript": "~5.7.2",
@@ -2387,6 +2388,53 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "capture:screenshots": "node scripts/capture_screenshots.mjs"
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
@@ -20,6 +21,7 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.5",
     "autoprefixer": "^10.4.21",
+    "playwright": "1.61.1",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.11",
     "typescript": "~5.7.2",

project-context.md

@@ -0,0 +1,262 @@
+---
+project_name: Vision Start
+date: 2026-07-08
+type: general_overview
+---
+
+# Vision Start — Project Context
+
+A general, non-normative overview of the **Vision Start** project: what it is, how it's structured, what features it offers, and which files do what. This document is intended as a map for humans and AI agents to orient themselves in the codebase. It deliberately avoids coding-style prescriptive rules.
+
+---
+
+## 1. What Is This Project?
+
+**Vision Start** is a glassmorphism-styled, highly customizable **browser startpage** (new-tab page).
+
+- Distributed as a **Chrome/Chromium extension** (Manifest V3) that overrides the new tab with `index.html`.
+- Also runnable as a **standalone web app** and shipped as a **Docker image** served via nginx.
+- Built with **React + TypeScript**, bundled with **Vite**, and styled with **Tailwind CSS v4** (using the `@preact/preset-vite` so Preact is the actual React runtime).
+- Persistent state lives in `localStorage` and, when available, `chrome.storage.local`.
+
+Live instances / artifacts:
+- Public demo: `http://vision-start.ivanch.me`
+- Source: `https://gitea.com/ivan/vision-start.git`
+- Container registry: `git.ivanch.me/ivanch/vision-start`
+- Releases: `https://git.ivanch.me/ivanch/vision-start/releases/latest`
+
+---
+
+## 2. Technology Stack
+
+| Layer | Tech |
+|---|---|
+| Language | TypeScript (~5.7), target ES2020, strict mode |
+| UI runtime | Preact 10 (via `@preact/preset-vite`); types from `@types/react` 19 |
+| Bundler / dev server | Vite 6 |
+| Styling | Tailwind CSS v4 (`@tailwindcss/vite` plugin + `@tailwindcss/postcss` + `autoprefixer`) |
+| Drag & drop | `@hello-pangea/dnd` 18 |
+| Build output | Plain static files in `dist/` (relative `base: './'`, single CSS bundle; modals code-split into separate JS chunks via `React.lazy`) |
+| Container | Node 22 Alpine build stage → nginx Alpine serving `dist/` |
+| Extension packaging | Manifest V3 (`manifest.json`) consuming `dist/` + `manifest.json` zipped as `vision-start-<tag>.zip` |
+| CI/CD | Gitea Actions workflows (`.gitea/workflows/`) |
+| Release screenshots | Playwright 1.61.1 + Chromium capture the deployed production page at a fixed 1280×800 viewport |
+
+Entry points: `index.html` → `index.tsx` → `App.tsx`.
+
+---
+
+## 3. Feature Overview
+
+The startpage is composed of widgets and a configuration panel:
+
+- **Website Tiles** — Bookmarks organized into categories. Each tile shows an icon + name and opens the configured URL. Tiles can be added, edited, deleted, and moved left/right within their own category (reordering) while in edit mode.
+- **Categories** — Groupings of website tiles (e.g. "Search"). Add/edit/delete/name.
+- **Clock** — Optional header clock with selectable size, font, and 12h/24h format.
+- **Title** — Optional big header title (text + size configurable).
+- **Server Status Widget** — Bottom-center glass pill that periodically "pings" configured server addresses and shows online/offline indicators. Ping uses an image-load trick (`components/utils/jsping.js`) with a 5s timeout, at a configurable frequency.
+- **Wallpaper background** — Fullscreen background image with adjustable blur, brightness, and opacity, rendered behind a soft readability layer for the liquid-glass UI. Supports rotating through multiple wallpapers at an hourly cadence selected by slider (`1h`–`48h`).
+  - Built-in wallpapers: Abstract, Abstract Red, Beach, Dark, Mountain, Waves (`components/utils/baseWallpapers.ts`).
+  - User wallpapers: upload from a file (≤4MB, ≤4.5MB base64) or add by URL; stored in `chrome.storage.local` when available, falling back to storing the URL directly on CORS failure.
+- **Icon library & auto-fetch** — Website icons can be picked from the [Dashboard Icons](https://dashboardicons.com/) library (metadata pre-downloaded to `public/icon-metadata.json`) or auto-fetched from the target site's `apple-touch-icon`/`icon` link tags, with a fallback to Google's S2 favicon service.
+- **Configuration panel** — Slide-in right-side modal with four tabs: General, Theme, Clock, Server Widget. Includes **Export** (downloads a JSON bundle of selected `localStorage` keys) and **Import** (restores from JSON and reloads the page).
+- **Edit mode** — Toggle via the top-left pencil button; reveals per-tile glass action toolbars, per-category edit buttons, and ghost glass "add" tiles.
+- **Liquid glass design language** — Soft translucent surfaces, restrained edge highlights, moderate backdrop blur, soft shadows, cyan focus states, and iOS-like easing tokens (`ease-ios`, `ease-spring`, `ease-liquid`) defined in `index.css`.
+
+Performance notes:
+- Modals (`ConfigurationModal`, `WebsiteEditModal`, `CategoryEditModal`) are code-split via `React.lazy` + `Suspense` and only loaded when opened. `ConfigurationModal` is the heaviest chunk (it pulls in `@hello-pangea/dnd` via `ServerWidgetTab`); the rest of `@hello-pangea/dnd` is isolated from the initial load.
+- `WebsiteTile` and `CategoryGroup` are wrapped in `React.memo`; `App.tsx` handlers are `useCallback`-stabilized and pure alignment helpers are hoisted to module scope, so opening a modal / toggling edit no longer re-renders every tile.
+- `Clock` updates on the minute boundary (one `setTimeout` → `setInterval(60_000)`) instead of every second.
+- `jsping` cancels its 5s timeout on image resolve/error and nulls the `Image` handlers, preventing leaks across ping cycles.
+- `ServerWidget` batches pending-status updates into one `setState` and depends on a stable servers signature (ids+addresses) so unrelated config edits don't restart pings.
+- Icon metadata (`/icon-metadata.json`) is module-level cached and hydrated into each icon-picker instance, fetched lazily on first focus of the icon field with `cache: 'force-cache'`, filter debounced ~150ms, and color variants are expanded lazily during filtering rather than upfront.
+- `Wallpaper` caches resolved wallpaper URLs in a module-level `Map`; its image transition and readability overlay classes live in `index.css`.
+
+Planned / To-do (tracked in `README.md`):
+- Dynamic Weather widget, Search Bar widget, draggable/resizable grid system, Notes/Scratchpad widget, theming (light/dark, accent colors, wallpaper-derived accents, minimal feel toggle), and a general "refactor everything" note.
+
+---
+
+## 4. Project Structure
+
+```
+vision-start/
+├── App.tsx                      # Root React component; central state + handlers
+├── index.tsx                    # React root mount (ReactDOM.createRoot)
+├── index.html                   # HTML shell, links index.css, mounts #root
+├── index.css                    # Tailwind v4 import + liquid glass utilities, wallpaper overlays, and easing tokens
+├── vite-env.d.ts                # Type declaration for CSS imports used by TypeScript verification
+├── types.ts                     # Core domain types (Config, Category, Website, Server, Wallpaper)
+├── constants.tsx                # DEFAULT_CATEGORIES seed data
+├── manifest.json                # Chrome MV3 manifest (newtab override, storage permission)
+│
+├── components/
+│   ├── Clock.tsx                # Header clock widget
+│   ├── Wallpaper.tsx            # Background image renderer + rotation logic
+│   ├── WebsiteTile.tsx          # Individual bookmark tile + loading/edit controls
+│   ├── WebsiteEditModal.tsx     # Add/edit a website (icon picker inside)
+│   ├── CategoryEditModal.tsx    # Add/edit a category
+│   ├── ConfigurationModal.tsx   # Tabbed settings drawer with Export/Import
+│   ├── ServerWidget.tsx         # Bottom server status pill
+│   ├── Dropdown.tsx             # Reusable glassy dropdown (single/multi select)
+│   ├── ToggleSwitch.tsx         # Reusable toggle switch
+│   │
+│   ├── layout/
+│   │   ├── Header.tsx               # Renders Clock + Title
+│   │   ├── CategoryGroup.tsx        # Renders a category's title + its tiles + edit controls
+│   │   ├── EditButton.tsx           # Top-left pencil toggle
+│   │   └── ConfigurationButton.tsx # Top-right gear button
+│   │
+│   ├── configuration/
+│   │   ├── GeneralTab.tsx           # Title, sizes, alignment, tile size
+│   │   ├── ThemeTab.tsx             # Background selection, wallpaper cadence, wallpaper mgmt, blur/brightness/opacity
+│   │   ├── ClockTab.tsx             # Clock enable/size/font/format
+│   │   └── ServerWidgetTab.tsx      # Server widget enable/ping/servers (drag-to-reorder)
+│   │
+│   ├── services/
+│   │   └── ConfigurationService.ts  # DEFAULT_CONFIG, load/save config & wallpapers, add/delete wallpaper, export/import config, reset wallpaper state
+│   │
+│   └── utils/
+│       ├── baseWallpapers.ts        # Built-in wallpaper catalog (imgur/wallpapershome URLs)
+│       ├── iconService.ts           # getWebsiteIcon: fetch HTML, parse apple-touch-icon/icon, fallback to Google favicons
+│       ├── jsping.js                # Image-load based "ping" with 5s timeout (used by ServerWidget)
+│       └── StorageLocalManager.ts   # chrome.storage.local wrappers + availability check; wallpaper fetch/base64/URL storage
+│
+├── public/
+│   ├── favicon.ico
+│   └── icon-metadata.json        # Dashboard Icons metadata (gitignored; fetched at release build)
+│
+├── screenshots/                  # README/release screenshots (home, editing, configuration; regenerated at 1280×800)
+├── scripts/
+│   ├── capture_screenshots.mjs  # Loads demoData, captures home/edit/configuration with Playwright, and can target a deployed URL
+│   ├── demoData.json            # Base64-encoded localStorage fixture used for release screenshots
+│   ├── prepare_release.sh        # Downloads icon-metadata.json from homarr-labs/dashboard-icons
+│   └── check_virustotal.sh       # Uploads the release zip to VirusTotal, waits for & reports the verdict
+│
+├── .gitea/workflows/
+│   ├── main.yaml                 # On push to main: build, push staging Docker image, SSH-deploy to staging
+│   ├── pull-request.yaml         # On PR updates: build/zip, capture screenshots, and publish an inline visual preview
+│   └── release.yaml              # On v* tag: build, zip, VirusTotal check, Gitea release, push latest image, SSH-deploy to prod
+│
+├── Dockerfile                    # Node 22 build → nginx serving dist/ (with gzip via nginx.conf)
+├── nginx.conf                    # nginx gzip config (JSON/JS/CSS/SVG/XML), mounted into container
+├── .dockerignore
+├── .gitignore                    # Ignores node_modules, dist, .claude/, public/icon-metadata.json, etc.
+├── postcss.config.cjs            # @tailwindcss/postcss + autoprefixer
+├── tailwind.config.js            # Content globs + safelist of dynamic w-/h- sizes
+├── tsconfig.json                 # Strict TS, bundler resolution, `@/*` path alias to project root
+├── vite.config.ts                # preact + tailwindcss plugins; single-bundle output; base './'
+├── package.json                  # Scripts: dev, build, preview
+├── README.md                     # Public-facing readme + feature list + roadmap
+└── .env.local                    # Local env (not tracked in context here)
+```
+
+---
+
+## 5. Data Model & State
+
+The shape of all persisted data lives in `types.ts`:
+
+- **`Website`** — `id`, `name`, `url`, `icon`, `categoryId`
+- **`Server`** — `id`, `name`, `address`
+- **`Category`** — `id`, `name`, `websites: Website[]`
+- **`Wallpaper`** — `name`, optional `url` or `base64`
+- **`Config`** — Everything else: title, wallpaper list + hourly frequency/blur/brightness/opacity, titleSize, vertical & horizontal alignment, tileSize, `clock {enabled, size, font, format}`, `serverWidget {enabled, pingFrequency, servers}`
+
+`ConfigurationService` (`components/services/ConfigurationService.ts`) is the source of truth for default config and persistence helpers. Config loaded from `localStorage` (and imported from export files) is run through `normalizeConfig()`, a schema-driven deep merge against `DEFAULT_CONFIG`: nested blocks (`clock`, `serverWidget`) inherit new sub-fields added to defaults, stored values with the wrong type fall back to defaults, and keys absent from the default schema are pruned. The merge is self-healing — `App.tsx`'s persist-`useEffect` writes the normalized shape back to `localStorage` on first run.
+
+Storage layout (browser-side):
+
+| Key | Where | Contents |
+|---|---|---|
+| `config` | `localStorage` | The full `Config` JSON |
+| `categories` | `localStorage` | `Category[]` JSON |
+| `userWallpapers` | `localStorage` | `Wallpaper[]` index (names) |
+| `wallpaperState` | `localStorage` | `{ lastWallpaperChange, currentIndex }` for rotation |
+| `<wallpaperName>` | `chrome.storage.local` (when available) | base64 (or URL on CORS failure) image data |
+
+Export/import bundles keys: `config`, `categories`, `userWallpapers`, `wallpaperState`.
+
+---
+
+## 6. Application Flow (high level)
+
+1. `index.html` loads `index.tsx`, which mounts `<App/>` into `#root`.
+2. `App.tsx` initializes state from `localStorage` (`categories`) and `ConfigurationService.loadConfig()` (`config`), falling back to defaults.
+3. `useEffect` hooks persist `config` and `categories` back to `localStorage` whenever they change.
+4. The screen renders:
+   - `<Wallpaper>` behind everything (fetches URL/base64 from base catalog or chrome.storage.local; rotates per frequency).
+   - `<EditButton>` (top-left) and `<ConfigurationButton>` (top-right).
+   - `<Header>` (clock + title).
+   - One `<CategoryGroup>` per category (renders its `<WebsiteTile>`s and, in edit mode, add/edit/move controls).
+   - Optional `<ServerWidget>` if enabled.
+   - Conditionally one of: `<WebsiteEditModal>`, `<CategoryEditModal>`, `<ConfigurationModal>`.
+5. Edit / configuration interactions update central `App` state; the existing `useEffect`s persist it.
+
+---
+
+## 7. Build, Release & Deployment
+
+### Local development / preview
+```bash
+npm install
+npm run dev       # Vite dev server (note: PROJECT.md says prefer `npm run build` for real testing)
+npm run build     # Production build → dist/
+npm run preview   # Serve built dist/
+```
+
+### Chrome extension install (manual)
+Build, then combine `dist/` + `manifest.json` into a folder and "Load unpacked" from `chrome://extensions`. The release workflow automates this zip.
+
+### Docker
+`Dockerfile` builds in Node 22 Alpine (`npm ci` → runs `scripts/prepare_release.sh` → `npm run build`) and serves `/app/dist` + `manifest.json` via nginx:alpine on port 80.
+
+### CI/CD (Gitea Actions)
+- `release.yaml` validates each `vX.Y.Z` tag and stamps the version into `manifest.json` (`"version": "0.0.0"` → the tag) in each build checkout before producing the extension archive and production image.
+- **`pull-request.yaml`** — Triggers on pull request open, reopen, and synchronization. It builds and uploads a PR extension archive containing `dist/`, unpacks that archive in a separate Playwright job to generate the three demo screenshots, and uploads both artifacts (screenshots are retained for 30 days). For same-repository PRs, it maintains one Gitea PR comment with inline image attachments; fork PRs retain artifacts but skip the comment because their workflow token is read-only.
+- After `deploy_vision_start` succeeds, `release.yaml` uses Playwright Chromium against the deployed production page and seeds each browser context from `scripts/demoData.json`. It regenerates `home.png`, `editing.png`, and `configuration.png` at exactly 1280×800, uploads them as artifacts (retained for 30 days), and attaches them as individual Gitea release assets.
+- **`main.yaml`** — Triggers on push to `main` (and `workflow_dispatch`). Builds, pushes a `staging` multi-arch (amd64/arm64) image to `git.ivanch.me/ivanch/vision-start:staging`, then SSH-deploys on the staging host via `docker compose up -d --force-recreate`.
+- **`release.yaml`** — Triggers on `v*` tags. Builds, zips `dist/` + `manifest.json` as `vision-start-<tag>.zip`, runs `scripts/check_virustotal.sh` against it (publishes analysis URL + detection ratio on the release body), creates a Gitea release, pushes a `latest` multi-arch image, and SSH-deploys to production.
+
+Required CI secrets (referenced by the workflows): `REGISTRY_PASSWORD`, `HOST`, `USERNAME`, `KEY`, `PORT`, `STAGING_DIR`, `PROD_DIR`, `VIRUSTOTAL_APIKEY`.
+
+External assets fetched at build time by `scripts/prepare_release.sh`:
+- `https://raw.githubusercontent.com/homarr-labs/dashboard-icons/.../metadata.json` → `public/icon-metadata.json` (used by `WebsiteEditModal` for the icon picker; gitignored).
+
+---
+
+## 8. Notable Behaviors & Quirks
+
+- **`EditModal.tsx` has been removed.** It was a legacy drag-and-drop editor that imported non-existent `lucide-react` and `./IconPicker`; it was never wired into `App.tsx`. Use `WebsiteEditModal.tsx` / `CategoryEditModal.tsx` instead.
+- **`@hello-pangea/dnd`** is used only in `ServerWidgetTab.tsx` (server reorder), which itself is imported by the lazy-loaded `ConfigurationModal`, so it lives in a separate chunk and is absent from the initial page load. `WebsiteTile` moves tiles within their own category via simple left/right buttons (no cross-category movement), not drag-and-drop.
+- **Chrome storage is optional.** `StorageLocalManager` checks availability once (`checkChromeStorageLocalAvailable`) and caches it. When unavailable (e.g., running as a plain web page), wallpaper upload/delete flows are gated off and `addWallpaperToChromeStorageLocal` throws.
+- **Wallpaper rotation** is time-based, evaluated on render/mount rather than via a timer. It reads `wallpaperState` from `localStorage`, advances the index if the frequency window has elapsed, and writes it back; the frequency is clamped to 1–48 hours, while older saved values like `1d`/`2d` still resolve to their hour equivalents. The renderer clamps `currentIndex` to the valid range of the current selection and walks the list forward to find a wallpaper whose data actually resolves (so deleting the currently-displayed wallpaper, or shrinking the selection, never leaves the background blank); if no wallpaper resolves, the background layer is hidden. When the selection becomes empty, `wallpaperState` is reset and the background is hidden. A manual "Next Wallpaper" button in the Theme tab advances `currentIndex` (with wraparound) and bumps a `wallpaperVersion` nonce in `App.tsx` that retriggers the renderer.
+- **Icon picker** in `WebsiteEditModal` loads `/icon-metadata.json` at runtime and expands each icon's `colors` into duplicate-name entries so color variants are searchable.
+- **`tsconfig.json` does not emit JS** (`noEmit: true`, bundler resolution); Vite handles all transpilation.
+- **`tailwind.config.js` safelists** a set of `w-[Npx]/h-[Npx]` classes because `WebsiteTile` generates tailwind classes dynamically from `tileSize` (`w-[42px]`, etc.).
+- **Project guidance note** in `PROJECT.md`: do not use `npm run dev` for real verification — use `npm run build`.
+- **`.claude/` and `.env.local`** are local-only / gitignored; not part of shipped artifacts.
+
+---
+
+## 9. Where Things Live (Quick Lookup)
+
+| You want to find… | Look in… |
+|---|---|
+| The default config | `components/services/ConfigurationService.ts` (`DEFAULT_CONFIG`) |
+| The default seed bookmarks | `constants.tsx` (`DEFAULT_CATEGORIES`) |
+| Built-in wallpaper list | `components/utils/baseWallpapers.ts` |
+| Type definitions | `types.ts` |
+| Main app wiring (state, handlers, layout) | `App.tsx` |
+| Settings UI | `components/ConfigurationModal.tsx` + `components/configuration/*Tab.tsx` |
+| Wallpaper rendering/rotation | `components/Wallpaper.tsx` |
+| Server status logic | `components/ServerWidget.tsx` + `components/utils/jsping.js` |
+| Icon fetch / picker / metadata | `components/utils/iconService.ts`, `components/WebsiteEditModal.tsx`, `public/icon-metadata.json` |
+| chrome.storage.local access | `components/utils/StorageLocalManager.ts` |
+| Export/import config | `components/services/ConfigurationService.ts` (`exportConfig`, `importConfig`) |
+| Build/release/PR pipelines | `scripts/prepare_release.sh`, `scripts/capture_screenshots.mjs`, `scripts/check_virustotal.sh`, `.gitea/workflows/pull-request.yaml`, `.gitea/workflows/release.yaml` |
+| Docker build | `Dockerfile` |
+
+---
+
+_Last updated: 2026-07-10. Generated as a general project overview; not a coding-style guide._

scripts/capture_screenshots.mjs

@@ -0,0 +1,190 @@
+import { spawn } from 'node:child_process';
+import { mkdir, readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { chromium } from 'playwright';
+
+const viewport = { width: 1280, height: 800 };
+const host = '127.0.0.1';
+const port = 4173;
+const configuredBaseUrl = process.env.SCREENSHOT_BASE_URL?.replace(/\/+$/, '');
+const baseUrl = configuredBaseUrl || `http://${host}:${port}`;
+const outputDirectory = process.env.SCREENSHOT_OUTPUT_DIR || 'screenshots';
+const demoDataPath = process.env.SCREENSHOT_DEMO_DATA || 'scripts/demoData.json';
+const viteCli = path.resolve('node_modules/vite/bin/vite.js');
+const imgurImageCache = new Map();
+
+const delay = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+
+const waitForServer = async (preview) => {
+  const deadline = Date.now() + 30_000;
+  let lastError;
+
+  while (Date.now() < deadline) {
+    if (previewError) throw previewError;
+
+    if (preview && preview.exitCode !== null) {
+      throw new Error(`Vite preview exited with code ${preview.exitCode}.`);
+    }
+
+    try {
+      const response = await fetch(baseUrl);
+      if (response.ok) return;
+      lastError = new Error(`Vite preview returned ${response.status}.`);
+    } catch (error) {
+      lastError = error;
+    }
+
+    await delay(250);
+  }
+
+  throw new Error(`Screenshot target did not respond at ${baseUrl}. ${lastError?.message || ''}`.trim());
+};
+
+const loadDemoData = async () => {
+  const encodedData = JSON.parse(await readFile(demoDataPath, 'utf8'));
+
+  if (!encodedData || typeof encodedData !== 'object' || Array.isArray(encodedData)) {
+    throw new Error(`${demoDataPath} must contain an object of base64-encoded localStorage values.`);
+  }
+
+  return Object.entries(encodedData).map(([key, value]) => {
+    if (typeof value !== 'string') {
+      throw new Error(`${demoDataPath} contains a non-string value for ${key}.`);
+    }
+
+    return { key, value: Buffer.from(value, 'base64').toString('utf8') };
+  });
+};
+
+const fulfillImgurRequest = async (route) => {
+  const url = route.request().url();
+  let image = imgurImageCache.get(url);
+
+  if (!image) {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        await route.continue();
+        return;
+      }
+
+      image = {
+        body: Buffer.from(await response.arrayBuffer()),
+        contentType: response.headers.get('content-type') || 'image/jpeg',
+      };
+      imgurImageCache.set(url, image);
+    } catch {
+      await route.continue();
+      return;
+    }
+  }
+
+  await route.fulfill({
+    status: 200,
+    headers: { 'content-type': image.contentType },
+    body: image.body,
+  });
+};
+
+const stopPreview = async (preview) => {
+  if (preview.exitCode !== null) return;
+
+  const exited = new Promise((resolve) => preview.once('exit', resolve));
+  preview.kill('SIGTERM');
+  await Promise.race([exited, delay(5_000)]);
+
+  if (preview.exitCode === null) preview.kill('SIGKILL');
+};
+
+const assertPngDimensions = (image, filename) => {
+  const width = image.readUInt32BE(16);
+  const height = image.readUInt32BE(20);
+
+  if (width !== viewport.width || height !== viewport.height) {
+    throw new Error(`${filename} was generated at ${width}x${height}, expected ${viewport.width}x${viewport.height}.`);
+  }
+};
+
+const capture = async (page, filename) => {
+  const image = await page.screenshot({
+    path: path.join(outputDirectory, filename),
+    type: 'png',
+    fullPage: false,
+    scale: 'css',
+    animations: 'disabled',
+  });
+
+  assertPngDimensions(image, filename);
+};
+
+const loadPage = async (page) => {
+  await page.goto(baseUrl, { waitUntil: 'domcontentloaded' });
+  await page.locator('main').waitFor({ state: 'visible' });
+  await page.evaluate(() => document.fonts.ready);
+  await delay(1_500);
+};
+
+let previewError;
+const preview = configuredBaseUrl
+  ? undefined
+  : spawn(
+      process.execPath,
+      [viteCli, 'preview', '--host', host, '--port', String(port), '--strictPort'],
+      { stdio: 'inherit' },
+    );
+
+if (preview) {
+  preview.once('error', (error) => {
+    previewError = error;
+  });
+}
+
+try {
+  await waitForServer(preview);
+
+  await mkdir(outputDirectory, { recursive: true });
+  const demoData = await loadDemoData();
+
+  const browser = await chromium.launch();
+  const context = await browser.newContext({
+    viewport,
+    screen: viewport,
+    deviceScaleFactor: 1,
+    locale: 'en-US',
+    timezoneId: 'America/Sao_Paulo',
+    userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36',
+  });
+  await context.route('https://i.imgur.com/**', fulfillImgurRequest);
+  await context.addInitScript((storageItems) => {
+    storageItems.forEach(({ key, value }) => localStorage.setItem(key, value));
+  }, demoData);
+  const page = await context.newPage();
+
+  try {
+    await loadPage(page);
+    await capture(page, 'home.png');
+
+    await page.getByRole('button', { name: 'Edit page' }).click();
+    await capture(page, 'editing.png');
+
+    await loadPage(page);
+    await page.getByRole('button', { name: 'Open configuration' }).click();
+    await page.getByRole('dialog').waitFor({ state: 'visible' });
+    await page.waitForFunction(
+      () => {
+        const drawer = document.querySelector('.liquid-drawer');
+        if (!drawer) return false;
+        const { left, right } = drawer.getBoundingClientRect();
+        return left < window.innerWidth && right <= window.innerWidth;
+      },
+      undefined,
+      { timeout: 5_000 },
+    );
+    await capture(page, 'configuration.png');
+  } finally {
+    await context.close();
+    await browser.close();
+  }
+} finally {
+  if (preview) await stopPreview(preview);
+}

scripts/demoData.json

@@ -0,0 +1,6 @@
+{
+    "categories": "W3siaWQiOiIxIiwibmFtZSI6IlNlYXJjaCIsIndlYnNpdGVzIjpbeyJpZCI6IjEiLCJuYW1lIjoiR29vZ2xlIiwidXJsIjoiaHR0cHM6Ly93d3cuZ29vZ2xlLmNvbSIsImljb24iOiJodHRwczovL3d3dy5nb29nbGUuY29tL3MyL2Zhdmljb25zP2RvbWFpbj1nb29nbGUuY29tJnN6PTEyOCIsImNhdGVnb3J5SWQiOiIxIn0seyJpZCI6IjE3NTMwNDQxODAxMDgiLCJuYW1lIjoiWW91VHViZSIsInVybCI6Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tLyIsImljb24iOiJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvaG9tYXJyLWxhYnMvZGFzaGJvYXJkLWljb25zL3N2Zy95b3V0dWJlLnN2ZyIsImNhdGVnb3J5SWQiOiIxIn0seyJpZCI6IjE3NTMwNDQyMjI2OTQiLCJuYW1lIjoiRHJpdmUiLCJ1cmwiOiJodHRwczovL2RyaXZlLmdvb2dsZS5jb20vZHJpdmUvdS8wL215LWRyaXZlIiwiaWNvbiI6Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9naC9ob21hcnItbGFicy9kYXNoYm9hcmQtaWNvbnMvc3ZnL2dvb2dsZS1kcml2ZS5zdmciLCJjYXRlZ29yeUlkIjoiMSJ9LHsiaWQiOiIxNzUzMDQ0NDE0ODIwIiwibmFtZSI6IkdtYWlsIiwidXJsIjoiaHR0cHM6Ly9tYWlsLmdvb2dsZS5jb20vbWFpbC91LzAvP3RhYj13bSNpbmJveCIsImljb24iOiJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvaG9tYXJyLWxhYnMvZGFzaGJvYXJkLWljb25zL3N2Zy9nbWFpbC5zdmciLCJjYXRlZ29yeUlkIjoiMSJ9LHsiaWQiOiIxNzUzMDQ0NDI3NTYwIiwibmFtZSI6Ikxhc3QuZm0iLCJ1cmwiOiJodHRwczovL3d3dy5sYXN0LmZtL2hvbWUiLCJpY29uIjoiaHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS9zMi9mYXZpY29ucz9kb21haW49d3d3Lmxhc3QuZm0mc3o9MTI4IiwiY2F0ZWdvcnlJZCI6IjEifV19LHsiaWQiOiIxNzUzMDQ0NDQ2NzU1IiwibmFtZSI6IkNvZGUiLCJ3ZWJzaXRlcyI6W3siaWQiOiIxNzUzMDQ0NDU5MjcyIiwibmFtZSI6IkdpdGh1YiIsInVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9mZWVkIiwiaWNvbiI6Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9naC9ob21hcnItbGFicy9kYXNoYm9hcmQtaWNvbnMvc3ZnL2dpdGh1Yi1saWdodC5zdmciLCJjYXRlZ29yeUlkIjoiMTc1MzA0NDQ0Njc1NSJ9LHsiaWQiOiIxNzgzNzI4ODcwNjgzIiwibmFtZSI6IkFXUyIsInVybCI6IiIsImljb24iOiJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvaG9tYXJyLWxhYnMvZGFzaGJvYXJkLWljb25zL3N2Zy9hd3MtbGlnaHQuc3ZnIiwiY2F0ZWdvcnlJZCI6IjE3NTMwNDQ0NDY3NTUifSx7ImlkIjoiMTc4MzcyODkxNTg1MyIsIm5hbWUiOiJEb2NrZXIgSHViIiwidXJsIjoiIiwiaWNvbiI6Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9naC9ob21hcnItbGFicy9kYXNoYm9hcmQtaWNvbnMvc3ZnL2RvY2tlci5zdmciLCJjYXRlZ29yeUlkIjoiMTc1MzA0NDQ0Njc1NSJ9LHsiaWQiOiIxNzgzNzI4OTkyMzkwIiwibmFtZSI6IkZpZ21hIiwidXJsIjoiIiwiaWNvbiI6Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9naC9ob21hcnItbGFicy9kYXNoYm9hcmQtaWNvbnMvc3ZnL2ZpZ21hLnN2ZyIsImNhdGVnb3J5SWQiOiIxNzUzMDQ0NDQ2NzU1In1dfSx7ImlkIjoiMTc1MzA0NDY2ODAxMiIsIm5hbWUiOiJNZWRpYSIsIndlYnNpdGVzIjpbeyJpZCI6IjE3NTMwNDQ3MDYwMjQiLCJuYW1lIjoiTmV0ZmxpeCIsInVybCI6Imh0dHA6Ly90di5oYXZlbi8iLCJpY29uIjoiaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2hvbWFyci1sYWJzL2Rhc2hib2FyZC1pY29ucy9zdmcvbmV0ZmxpeC5zdmciLCJjYXRlZ29yeUlkIjoiMTc1MzA0NDY2ODAxMiJ9LHsiaWQiOiIxNzUzMDQ0NzQwOTg2IiwibmFtZSI6IlByaW1lIiwidXJsIjoiaHR0cDovL29tdi5oYXZlbiIsImljb24iOiJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvaG9tYXJyLWxhYnMvZGFzaGJvYXJkLWljb25zL3N2Zy9wcmltZS12aWRlby1hbHQtZGFyay5zdmciLCJjYXRlZ29yeUlkIjoiMTc1MzA0NDY2ODAxMiJ9LHsiaWQiOiIxNzgzNzI4Nzg0MjU2IiwibmFtZSI6IkhCTyIsInVybCI6IiIsImljb24iOiJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvaG9tYXJyLWxhYnMvZGFzaGJvYXJkLWljb25zL3N2Zy9oYm8tbGlnaHQuc3ZnIiwiY2F0ZWdvcnlJZCI6IjE3NTMwNDQ2NjgwMTIifSx7ImlkIjoiMTc1MzA0NDgyODg0MCIsIm5hbWUiOiJUcmFrdCIsInVybCI6Imh0dHBzOi8vYXBwLnRyYWt0LnR2LyIsImljb24iOiJodHRwczovL3d3dy5nb29nbGUuY29tL3MyL2Zhdmljb25zP2RvbWFpbj1hcHAudHJha3QudHYmc3o9MTI4IiwiY2F0ZWdvcnlJZCI6IjE3NTMwNDQ2NjgwMTIifSx7ImlkIjoiMTc4MzcyODcyOTQyNCIsIm5hbWUiOiJMZXR0ZXJib3hkIiwidXJsIjoiaHR0cHM6Ly9sZXR0ZXJib3hkLmNvbS8iLCJpY29uIjoiaHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS9zMi9mYXZpY29ucz9kb21haW49bGV0dGVyYm94ZC5jb20mc3o9MTI4IiwiY2F0ZWdvcnlJZCI6IjE3NTMwNDQ2NjgwMTIifV19XQ==",
+    "config": "eyJ0aXRsZSI6IiIsImN1cnJlbnRXYWxscGFwZXJzIjpbIkFic3RyYWN0IFJlZCJdLCJ3YWxscGFwZXJGcmVxdWVuY3kiOiIxZCIsIndhbGxwYXBlckJsdXIiOjAsIndhbGxwYXBlckJyaWdodG5lc3MiOjEwOCwid2FsbHBhcGVyT3BhY2l0eSI6MTAwLCJ0aXRsZVNpemUiOiJtZWRpdW0iLCJhbGlnbm1lbnQiOiJtaWRkbGUiLCJob3Jpem9udGFsQWxpZ25tZW50IjoibWlkZGxlIiwidGlsZVNpemUiOiJzbWFsbCIsImNsb2NrIjp7ImVuYWJsZWQiOnRydWUsInNpemUiOiJ0aW55IiwiZm9udCI6Im1vbm9zcGFjZSIsImZvcm1hdCI6Img6bW0gQSJ9LCJzZXJ2ZXJXaWRnZXQiOnsiZW5hYmxlZCI6dHJ1ZSwicGluZ0ZyZXF1ZW5jeSI6MTUsInNlcnZlcnMiOlt7ImlkIjoiMTc4MzcyOTE4MzU1MyIsIm5hbWUiOiJBZEd1YXJkIiwiYWRkcmVzcyI6Imh0dHBzOi8vZ29vZ2xlLmNvbSJ9LHsiaWQiOiIxNzgzNzI5MjI3NDQyIiwibmFtZSI6IlByb3htb3giLCJhZGRyZXNzIjoiaHR0cHM6Ly9nb29nbGUuY29tIn1dfX0=",
+    "userWallpapers": "W3sibmFtZSI6ImRhcmstYWJzdHJhY3QtMjU2MHgxNDQwLWNvbnRlbXBvcmFyeS1kZXNpZ24tc2xlZWstbGluZXMtMjY0MjYuanBnIn1d",
+    "wallpaperState": "eyJsYXN0V2FsbHBhcGVyQ2hhbmdlIjoiMjA0Ni0wNy0xMVQwMDoyMzozMS4zODdaIiwiY3VycmVudEluZGV4IjowfQ=="
+}

vite-env.d.ts

@@ -0,0 +1 @@
+declare module '*.css';