fixing wallpaper

.gitea/workflows/release.yaml

@@ -59,8 +59,9 @@ jobs:
           virustotal_apikey: ${{ secrets.VIRUSTOTAL_APIKEY }}
           VIRUS_TOTAL_FILE: vision-start-${{ gitea.ref_name }}.zip
         run: |
-          # Run the VirusTotal check script and capture output
+          # Run the VirusTotal check script and capture output in real-time
-          bash scripts/check_virustotal.sh > vt_output.txt 2>&1
+          set -o pipefail
+          bash scripts/check_virustotal.sh 2>&1 | tee vt_output.txt
 
           # Extract analysis URL and detection ratio from output
           ANALYSIS_URL=$(grep "Analysis URL:" vt_output.txt | cut -d' ' -f3- || echo "Not available")
@@ -70,9 +71,6 @@ jobs:
           echo "analysis-url=$ANALYSIS_URL" >> $GITEA_OUTPUT
           echo "detection-ratio=$DETECTION_RATIO" >> $GITEA_OUTPUT
 
-          # Display the full output
-          cat vt_output.txt
-
   release:
     runs-on: ubuntu-latest
     needs: [build, virus-total-check]

AGENTS.md

@@ -0,0 +1,113 @@
+# 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 **glassmorphism**: translucent black surfaces, backdrop blur, thin light borders, subtle shadows, cyan accents, and iOS-like easing.
+
+### Surface recipe (use consistently)
+- **Cards / modals / panels:** `bg-black/25 backdrop-blur-md border border-white/10 rounded-2xl shadow-lg`
+- **Inputs:** `bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400`
+- **Floating buttons (corner):** `bg-black/25 backdrop-blur-md border border-white/10 rounded-xl ... hover:bg-white/25 active:scale-90`
+- **Full-screen modal overlay:** `bg-black/90 backdrop-blur-sm` (modals) or `bg-black/60 backdrop-blur-sm` (drawers)
+- **Slide-in drawer:** `bg-black/50 backdrop-blur-xl border-l border-white/10`
+
+### Color tokens
+- Accent / focus / selection: `cyan-400` (focus ring), `cyan-500` (active/selected background)
+- Confirm/Save: `green-500` → `hover:bg-green-400`
+- Cancel/secondary: `gray-600` → `hover:bg-gray-500`
+- Destructive: `red-500` → `hover:bg-red-400`
+- Tertiary (export/import etc.): `slate-700` → `hover:bg-slate-600`
+- Status: online `bg-green-500`, offline `bg-red-500`, pending `bg-gray-500`
+- 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) and `ease-spring` (toggle knobs, drawer slides).
+- Standard durations: `duration-150` (buttons), `duration-200` (tiles, toggles, icons), `duration-250`/`duration-300` (modals, drawers).
+- Micro-interactions are encouraged: `hover:scale-[1.04]`, `active:scale-90` / `active:scale-95` / `active:scale-[0.96]`, `hover:bg-white/25`.
+
+### 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: backdrop + centered glass card (`bg-black/25 backdrop-blur-md border border-white/10 rounded-2xl`), 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 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 glass tokens (`bg-black/25`, `backdrop-blur-md`, `border-white/10`, `cyan-400/500`) over ad-hoc colors.
+- 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

@@ -10,29 +10,7 @@ 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 = {
-  title: 'Vision Start',
-  currentWallpapers: ['Abstract'],
-  wallpaperFrequency: '1d',
-  wallpaperBlur: 0,
-  wallpaperBrightness: 100,
-  wallpaperOpacity: 100,
-  titleSize: 'medium',
-  alignment: 'middle',
-  horizontalAlignment: 'middle',
-  clock: {
-    enabled: true,
-    size: 'medium',
-    font: 'Helvetica',
-    format: 'h:mm A',
-  },
-  serverWidget: {
-    enabled: false,
-    pingFrequency: 15,
-    servers: [],
-  },
-};
 
 const App: React.FC = () => {
   const [categories, setCategories] = useState<Category[]>(() => {
@@ -52,21 +30,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(() => {
@@ -86,6 +54,27 @@ const App: React.FC = () => {
     setConfig(prev => ({ ...prev, ...newConfig }));
   };
 
+  const handleNextWallpaper = () => {
+    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);
+  };
+
   const handleSaveWebsite = (website: Partial<Website>) => {
     if (editingWebsite) {
       const idToUpdate = website.id ?? editingWebsite.id;
@@ -218,6 +207,7 @@ 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)} />
@@ -291,6 +281,7 @@ const App: React.FC = () => {
           onClose={() => setIsConfigModalOpen(false)}
           onSave={handleSaveConfig}
           onWallpaperChange={handleWallpaperChange}
+          onNextWallpaper={handleNextWallpaper}
         />
       )}
     </main>

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`.

README.md

@@ -1,5 +1,12 @@
-# Vision Start
+<div style="display: flex; justify-content: center; font-size: 2rem; font-weight: bold;">
-#### A glassmorphism-looking like, modern and customizable startpage built with React.
+Vision Start
+</div>
+
+<div style="display: flex; justify-content: center; font-size: 1.5rem;">
+A glassmorphism-looking like, 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
 
@@ -25,7 +32,7 @@ Vision Start is not yet available on Chrome Web Store, but it can be installed m
 * **Server Status Widgets:** Monitor the status of services directly from the startpage.
 * **Glassmorphism UI:** A modern and stylish interface with a frosted glass effect.
 * **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/ConfigurationModal.tsx

@@ -1,71 +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';
+import GeneralTab from './configuration/GeneralTab';
+import ThemeTab from './configuration/ThemeTab';
+import ClockTab from './configuration/ClockTab';
+import ServerWidgetTab from './configuration/ServerWidgetTab';
 
 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 menuRef = useRef<HTMLDivElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const isSaving = useRef(false);
   const [isVisible, setIsVisible] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const importInputRef = useRef<HTMLInputElement>(null);
+  const isSaving = useRef(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);
   }, []);
 
@@ -77,167 +50,86 @@ 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 handleImportConfig = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    try {
+      const { config: importedConfig, userWallpapers: importedWallpapers } =
+        await ConfigurationService.importConfig(file);
+      setConfig(importedConfig);
+      setUserWallpapers(importedWallpapers);
+      onWallpaperChange({ currentWallpapers: importedConfig.currentWallpapers || [] });
+      onSave(importedConfig);
+      alert('Configuration imported successfully. The page will reload to apply all data.');
+      window.location.reload();
+    } catch (error) {
+      alert('Could not import configuration. Please use a valid export JSON file.');
+      console.error(error);
+    } finally {
+      event.target.value = '';
+    }
+  };
+
   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
@@ -245,7 +137,7 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({ onClose, onSave
           isVisible ? 'opacity-100' : 'opacity-0'
         }`}
         onClick={handleClose}
-      ></div>
+      />
 
       <div
         ref={menuRef}
@@ -257,398 +149,86 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({ onClose, onSave
           <h2 className="text-3xl font-bold mb-6">Configuration</h2>
 
           <div className="flex border-b border-white/10 mb-6">
-            <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={`px-4 py-2 text-lg font-semibold ${
-              General
+                  activeTab === tab.id
-            </button>
+                    ? 'text-cyan-400 border-b-2 border-cyan-400'
-            <button
+                    : 'text-slate-400'
-              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 justify-end gap-4">
+          <div className="flex items-center justify-between gap-4">
-                <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">
+            <div className="flex gap-2">
-                    Save & Close
+              <button
-                </button>
+                onClick={() => ConfigurationService.exportConfig()}
-                <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">
+                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"
-                    Cancel
+              >
-                </button>
+                Export
+              </button>
+              <button
+                onClick={() => importInputRef.current?.click()}
+                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"
+              >
+                Import
+              </button>
+              <input
+                ref={importInputRef}
+                type="file"
+                accept="application/json"
+                className="hidden"
+                onChange={handleImportConfig}
+              />
             </div>
+            <div className="flex justify-end gap-4">
+              <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"
+              >
+                Save & Close
+              </button>
+              <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"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

components/Wallpaper.tsx

@@ -10,35 +10,41 @@ interface WallpaperProps {
   brightness: number;
   opacity: number;
   wallpaperFrequency: string;
+  wallpaperVersion: number;
 }
 
 const getWallpaperUrlByName = async (name: string): Promise<string | undefined> => {
+  if (!name) return undefined;
   const foundInBase = baseWallpapers.find((w: WallpaperType) => w.name === name);
   if (foundInBase) {
     return foundInBase.url || foundInBase.base64;
   }
 
-  const userWallpapers: WallpaperType[] = JSON.parse(localStorage.getItem('userWallpapers') || '[]');
+  try {
-  const foundInUser = userWallpapers.find((w: WallpaperType) => w.name === name);
+    const storedUserWallpapers: WallpaperType[] =
-  if (foundInUser) {
+      JSON.parse(localStorage.getItem('userWallpapers') || '[]');
-    try {
+    const foundInUser = storedUserWallpapers.find((w: WallpaperType) => w.name === name);
-      const wallpaperData = await getWallpaperFromChromeStorageLocal(name);
+    if (foundInUser) {
-      if (wallpaperData && wallpaperData.startsWith('http')) {
+      try {
-        return wallpaperData;
+        const wallpaperData = await getWallpaperFromChromeStorageLocal(name);
+        if (wallpaperData && wallpaperData.startsWith('http')) {
+          return wallpaperData;
+        }
+        return wallpaperData || undefined;
+      } catch (error) {
+        console.error('Error getting wallpaper from chrome storage', error);
+        return undefined;
       }
-      return wallpaperData || undefined;
-    } catch (error) {
-      console.error('Error getting wallpaper from chrome storage', error);
-      return undefined;
     }
+  } catch (error) {
+    console.error('Error reading userWallpapers from localStorage', error);
   }
 
   return undefined;
 };
 
-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);
 
   // Helper to parse wallpaperFrequency string to ms
   const parseFrequencyToMs = (freq: string): number => {
@@ -54,36 +60,61 @@ const Wallpaper: React.FC<WallpaperProps> = ({ wallpaperNames, blur, brightness,
 
   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,
+        }),
+      );
+
+      setImageUrl(resolvedUrl);
     };
     updateWallpaper();
-    // No timer, just run on render/dependency change
+  }, [wallpaperNames, wallpaperFrequency, wallpaperVersion]);
-  }, [wallpaperNames, wallpaperFrequency]);
 
   if (!imageUrl) return null;
 

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 items-center 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 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={(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 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={(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 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={(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="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={(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 items-center 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 items-center 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 items-center 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,150 @@
+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;
+}
+
+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 items-center 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 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"
+                min="5"
+                max="60"
+                value={config.serverWidget.pingFrequency}
+                onChange={(e) => updateServerWidget({ pingFrequency: Number(e.target.value) })}
+                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>
+  );
+};
+
+export default ServerWidgetTab;

components/configuration/ThemeTab.tsx

@@ -0,0 +1,248 @@
+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;
+}
+
+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 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 items-center 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 items-center justify-between">
+          <label className="text-slate-300 text-sm font-semibold">Change Frequency</label>
+          <Dropdown
+            name="wallpaperFrequency"
+            value={config.wallpaperFrequency}
+            onChange={(e) => onChange({ wallpaperFrequency: e.target.value as string })}
+            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"
+            min="0"
+            max="50"
+            value={config.wallpaperBlur}
+            onChange={(e) => onChange({ wallpaperBlur: Number(e.target.value) })}
+            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"
+            min="0"
+            max="200"
+            value={config.wallpaperBrightness}
+            onChange={(e) => onChange({ wallpaperBrightness: Number(e.target.value) })}
+            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"
+            min="1"
+            max="100"
+            value={config.wallpaperOpacity}
+            onChange={(e) => onChange({ wallpaperOpacity: Number(e.target.value) })}
+            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={() => onDeleteWallpaper(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 active:scale-95 text-white font-bold py-2 px-4 rounded-lg transition-all duration-150 ease-ios"
+                >
+                  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 className="flex justify-center pt-2">
+        <button
+          onClick={onNextWallpaper}
+          disabled={config.currentWallpapers.length === 0}
+          className="flex items-center gap-2 bg-black/25 backdrop-blur-md border border-white/10 hover:bg-white/25 active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-semibold py-2 px-4 rounded-xl transition-all duration-150 ease-ios"
+        >
+          <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/services/ConfigurationService.ts

@@ -0,0 +1,181 @@
+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: ['Abstract'],
+  wallpaperFrequency: '1d',
+  wallpaperBlur: 0,
+  wallpaperBrightness: 100,
+  wallpaperOpacity: 100,
+  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);
+
+export const ConfigurationService = {
+  loadConfig(): Config {
+    try {
+      const stored = localStorage.getItem('config');
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        return { ...DEFAULT_CONFIG, ...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 as Config;
+    const importedUserWallpapers = (localStorageData as Record<string, unknown>)
+      .userWallpapers as Wallpaper[];
+
+    return {
+      config: importedConfig || { ...DEFAULT_CONFIG },
+      userWallpapers: Array.isArray(importedUserWallpapers) ? importedUserWallpapers : [],
+    };
+  },
+
+  resetWallpaperState(): void {
+    localStorage.setItem(
+      'wallpaperState',
+      JSON.stringify({
+        lastWallpaperChange: new Date().toISOString(),
+        currentIndex: 0,
+      }),
+    );
+  },
+};

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

project-context.md

@@ -0,0 +1,247 @@
+---
+project_name: Vision Start
+date: 2026-07-02
+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) |
+| 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/`) |
+
+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 across categories 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. Supports rotating through multiple wallpapers at a cadence (`1h`–`2d`).
+  - 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 move/edit buttons, per-category edit buttons, and "add" buttons.
+- **Glassmorphism design language** — Translucent surfaces, `backdrop-blur`, subtle borders, and custom iOS-like easing tokens (`ease-ios`, `ease-spring`) defined 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 + custom easing tokens
+├── 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)
+├── icon.png                     # Extension icon source
+│
+├── 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
+│   ├── EditModal.tsx            # Legacy drag-and-drop editor (imports IconPicker & lucide-react; not wired into App.tsx)
+│   ├── 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 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 screenshots (dark page, editing, configuration)
+├── scripts/
+│   ├── 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
+│   └── 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/
+├── .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 + 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.
+
+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)
+- **`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` is not wired up.** It imports `./IconPicker` and `lucide-react`, neither of which exist in `package.json` or this tree. It appears to be a legacy/abandoned editor superseded by `WebsiteEditModal.tsx` + `CategoryEditModal.tsx`. Treat it as dead code unless reintended.
+- **`EditModal` references `lucide-react` and `IconPicker`** which are **not** in `package.json`; do not rely on them.
+- **`@hello-pangea/dnd`** is used only inside `EditModal.tsx` (legacy) and `ServerWidgetTab.tsx` (server reorder). `WebsiteTile` moves tile via simple left/right buttons, 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 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`) |
+| Release packaging | `scripts/prepare_release.sh`, `scripts/check_virustotal.sh`, `.gitea/workflows/release.yaml` |
+| Docker build | `Dockerfile` |
+
+---
+
+_Last updated: 2026-07-02. Generated as a general project overview; not a coding-style guide._

scripts/check_virustotal.sh

@@ -9,7 +9,7 @@ set -e
 # Configuration
 FILE_PATH="${VIRUS_TOTAL_FILE:-vision-start.zip}"
 API_KEY="${virustotal_apikey}"
-BASE_URL="https://www.virustotal.com/vtapi/v2"
+BASE_URL="https://www.virustotal.com/api/v3"
 
 # Check if API key is set
 if [ -z "$API_KEY" ]; then
@@ -38,12 +38,12 @@ echo "Uploading $FILE_PATH to VirusTotal for analysis..."
 
 # Upload file to VirusTotal
 UPLOAD_RESPONSE=$(curl -s -X POST \
-    -F "apikey=$API_KEY" \
+    -H "x-apikey: $API_KEY" \
     -F "file=@$FILE_PATH" \
-    "$BASE_URL/file/scan")
+    "$BASE_URL/files")
 
 # Extract scan_id from response
-SCAN_ID=$(echo "$UPLOAD_RESPONSE" | jq -r '.scan_id')
+SCAN_ID=$(echo "$UPLOAD_RESPONSE" | jq -r '.data.id')
 
 if [ "$SCAN_ID" == "null" ] || [ -z "$SCAN_ID" ]; then
     echo "Error: Failed to upload file or get scan ID"
@@ -55,7 +55,7 @@ echo "File uploaded successfully. Scan ID: $SCAN_ID"
 echo "Waiting for analysis to complete..."
 
 # Wait for analysis to complete and get results
-MAX_ATTEMPTS=30
+MAX_ATTEMPTS=60
 ATTEMPT=0
 SLEEP_INTERVAL=10
 
@@ -63,40 +63,40 @@ while [ $ATTEMPT -lt $MAX_ATTEMPTS ]; do
     echo "Checking analysis status (attempt $((ATTEMPT + 1))/$MAX_ATTEMPTS)..."
 
     # Get scan report
-    REPORT_RESPONSE=$(curl -s -X POST \
+    REPORT_RESPONSE=$(curl -s -X GET \
-        -d "apikey=$API_KEY" \
+        -H "x-apikey: $API_KEY" \
-        -d "resource=$SCAN_ID" \
+        "$BASE_URL/analyses/$SCAN_ID")
-        "$BASE_URL/file/report")
 
     # Check if analysis is complete
-    RESPONSE_CODE=$(echo "$REPORT_RESPONSE" | jq -r '.response_code')
+    RESPONSE_CODE=$(echo "$REPORT_RESPONSE" | jq -r '.data.attributes.status')
 
-    if [ "$RESPONSE_CODE" == "1" ]; then
+    if [ "$RESPONSE_CODE" == "completed" ]; then
         # Analysis complete
         echo "Analysis completed!"
 
         # Extract results
-        POSITIVES=$(echo "$REPORT_RESPONSE" | jq -r '.positives')
+        POSITIVES=$(echo "$REPORT_RESPONSE" | jq -r '.data.attributes.stats.malicious')
-        TOTAL=$(echo "$REPORT_RESPONSE" | jq -r '.total')
+        SUSPICIOUS=$(echo "$REPORT_RESPONSE" | jq -r '.data.attributes.stats.suspicious')
-        PERMALINK=$(echo "$REPORT_RESPONSE" | jq -r '.permalink')
+        # The v3 analyses object has no 'total' field — compute it by summing all stat categories
+        TOTAL=$(echo "$REPORT_RESPONSE" | jq '[.data.attributes.stats | to_entries[].value] | add')
+        ANALYSIS_ID=$(echo "$REPORT_RESPONSE" | jq -r '.data.id')
+        PERMALINK="https://www.virustotal.com/gui/file-analysis/${ANALYSIS_ID}"
 
         echo "Analysis URL: $PERMALINK"
         echo "Detection ratio: $POSITIVES/$TOTAL"
 
         # Check if file is safe
-        if [ "$POSITIVES" -eq 0 ]; then
+        if [ "$POSITIVES" -eq 0 ] && [ "$SUSPICIOUS" -eq 0 ]; then
             echo "✅ File is clean (no threats detected)"
             exit 0
         else
-            echo "❌ File contains threats ($POSITIVES detections out of $TOTAL scanners)"
+            echo "❌ File flagged: $POSITIVES malicious, $SUSPICIOUS suspicious (out of $TOTAL scanners)"
             exit 1
         fi
-    elif [ "$RESPONSE_CODE" == "0" ]; then
+    elif [ "$RESPONSE_CODE" == "queued" ]; then
-        # File not found or analysis not complete yet
-        echo "Analysis still in progress..."
-    elif [ "$RESPONSE_CODE" == "-2" ]; then
-        # Still queued for analysis
         echo "File still queued for analysis..."
+    elif [ "$RESPONSE_CODE" == "in-progress" ]; then
+        echo "Analysis still in progress..."
     else
         echo "Unexpected response code: $RESPONSE_CODE"
         echo "Response: $REPORT_RESPONSE"