fixes

App.tsx

@@ -13,14 +13,12 @@ import Wallpaper from './components/Wallpaper';
 
 const defaultConfig: Config = {
   title: 'Vision Start',
-  subtitle: 'Your personal portal to the web.',
   currentWallpapers: ['Abstract'],
   wallpaperFrequency: '1d',
   wallpaperBlur: 0,
   wallpaperBrightness: 100,
   wallpaperOpacity: 100,
   titleSize: 'medium',
-  subtitleSize: 'medium',
   alignment: 'middle',
   horizontalAlignment: 'middle',
   clock: {
@@ -71,6 +69,14 @@ const App: React.FC = () => {
     localStorage.setItem('config', JSON.stringify(config));
   }, [config]);
 
+  useEffect(() => {
+    try {
+      localStorage.setItem('categories', JSON.stringify(categories));
+    } catch (error) {
+      console.error('Error saving categories to localStorage', error);
+    }
+  }, [categories]);
+
   const handleSaveConfig = (newConfig: Config) => {
     setConfig(newConfig);
     setIsConfigModalOpen(false);
@@ -82,10 +88,11 @@ const App: React.FC = () => {
 
   const handleSaveWebsite = (website: Partial<Website>) => {
     if (editingWebsite) {
+      const idToUpdate = website.id ?? editingWebsite.id;
       const newCategories = categories.map(category => ({
         ...category,
         websites: category.websites.map(w =>
-          w.id === website.id ? { ...w, ...website } : w
+          w.id === idToUpdate ? { ...w, ...website, id: idToUpdate } : w
         ),
       }));
       setCategories(newCategories);
@@ -147,6 +154,7 @@ const App: React.FC = () => {
   };
 
   const handleMoveWebsite = (website: Website, direction: 'left' | 'right') => {
+    const categoryIndex = categories.findIndex(cat => cat.websites.some(w => w.id === website.id));
     if (categoryIndex === -1) return;
 
     const category = categories[categoryIndex];

README.md

@@ -82,7 +82,7 @@ npm run dev
   * Dynamic Wallpaper-Based Theming
     * Automatically adapt the UI's accent color to match the current wallpaper
   * Minimal feel toggle
-    * Disable title & subtitle and search widget
+    * Disable title and search widget
     * Tiles become small stylish lines
 
 From a technical side:

components/CategoryEditModal.tsx

@@ -40,7 +40,7 @@ const CategoryEditModal: React.FC<CategoryEditModalProps> = ({ category, edit, o
             )}
           </div>
           <div className="flex justify-end gap-4">
-            <button onClick={handleSave} className="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-lg">
+            <button onClick={() => onSave(name)} className="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-lg">
               Save
             </button>
             <button onClick={onClose} className="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-6 rounded-lg">

components/ConfigurationModal.tsx

@@ -18,7 +18,6 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({ onClose, onSave
   const [config, setConfig] = useState({
     ...currentConfig,
     titleSize: currentConfig.titleSize || 'medium',
-    subtitleSize: currentConfig.subtitleSize || 'medium',
     alignment: currentConfig.alignment || 'middle',
     tileSize: currentConfig.tileSize || 'medium',
     horizontalAlignment: currentConfig.horizontalAlignment || 'middle',
@@ -310,30 +309,6 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({ onClose, onSave
                   ]}
                 />
               </div>
-              <div>
-                <label className="text-slate-300 text-sm font-semibold mb-2 block">Subtitle</label>
-                <input
-                  type="text"
-                  name="subtitle"
-                  value={config.subtitle}
-                  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">Subtitle Size</label>
-                <Dropdown
-                  name="subtitleSize"
-                  value={config.subtitleSize}
-                  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

components/WebsiteEditModal.tsx

@@ -76,6 +76,7 @@ const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onCl
   };
 
   const handleSave = () => {
+    console.log({ id: website?.id, name, url, icon });
     onSave({ id: website?.id, name, url, icon });
   };
 

components/layout/Header.tsx

@@ -59,7 +59,7 @@ const Header: React.FC<HeaderProps> = ({ config }) => {
         </div>
       )}
       <div className={`flex flex-col ${config.alignment === 'bottom' ? 'mt-auto' : ''} items-center`}>
-        {(config.title || config.subtitle) && (
+        {config.title && (
           <div className="text-center">
             <h1
               className={`${getTitleSizeClass(config.titleSize)} font-extrabold text-white tracking-tighter mb-3 mt-4`}
@@ -67,12 +67,6 @@ const Header: React.FC<HeaderProps> = ({ config }) => {
             >
               {config.title}
             </h1>
-            <p
-              className={`${getSubtitleSizeClass(config.subtitleSize)} text-slate-300`}
-              style={{ textShadow: '0 1px 3px rgba(0,0,0,0.5)' }}
-            >
-              {config.subtitle}
-            </p>
           </div>
         )}
       </div>

types.ts

@@ -26,14 +26,12 @@ export interface Wallpaper {
 
 export interface Config {
   title: string;
-  subtitle: string;
   currentWallpapers: string[];
   wallpaperFrequency: string;
   wallpaperBlur: number;
   wallpaperBrightness: number;
   wallpaperOpacity: number;
   titleSize: string;
-  subtitleSize: string;
   alignment: string;
   horizontalAlignment: string;
   clock: {