feat(settings): organize system preferences by category

public/addons.js

@@ -3,7 +3,7 @@
   const DRAFT_KEY = 'lifeos_today_draft_v1';
   const localDay = () => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`; };
   const escapeHtml = value => String(value || '').replace(/[&<>]/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
-  const APP_VERSION = '1.15.0';
+  const APP_VERSION = '1.16.0';
   window.LifeOSVersion = APP_VERSION;
   const appIds = ['today', 'timeline', 'museum', 'insights', 'profile', 'tasks', 'calendar', 'system', 'browser', 'terminal', 'database'];
   const t = (key, values) => LifeI18n.t(key, values);

public/desktop-personalization.js

@@ -187,7 +187,7 @@
     const state = preference(), mode = state.wallpaperSource || 'bing';
     const appChoices = kind => `<div class="desktop-app-choices">${APP_IDS.map(id => `<button type="button" class="chip ${(kind === 'desktopShortcuts' ? chosenShortcuts() : validApps(state.startupApps)).includes(id) ? 'selected' : ''}" aria-pressed="${(kind === 'desktopShortcuts' ? chosenShortcuts() : validApps(state.startupApps)).includes(id)}" onclick="toggleDesktopApp('${kind}','${id}')">${appName(id)}</button>`).join('')}</div>`;
     const customUrl = String(state.customWallpaperUrl || '').replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
-    const personalization = `<section class="desktop-preferences"><div class="eyebrow">${desktopText('heading')}</div><h2>${desktopText('wallpaper')}</h2><div class="choices">${['bing','calm'].map(value => `<button class="chip ${mode === value ? 'selected' : ''}" aria-pressed="${mode === value}" onclick="setWallpaperSource('${value}')">${desktopText(value)}</button>`).join('')}</div><div class="desktop-wallpaper-custom"><label for="desktop-wallpaper-url">${desktopText('custom')}</label><div><input id="desktop-wallpaper-url" type="url" maxlength="2048" placeholder="https://example.com/image.jpg" value="${customUrl}"><button class="secondary" onclick="setWallpaperSource('custom')">${desktopText('useUrl')}</button></div><p>${desktopText('urlHint')}</p></div><h2>${desktopText('shortcuts')}</h2><p>${desktopText('shortcutsHint')}</p>${appChoices('desktopShortcuts')}<button class="desktop-text-button" onclick="resetIconPositions()">${desktopText('resetPositions')}</button><h2>${desktopText('windowLayout')}</h2><button class="chip ${state.rememberWindowLayout !== false ? 'selected' : ''}" aria-pressed="${state.rememberWindowLayout !== false}" onclick="toggleWindowMemory()">${state.rememberWindowLayout !== false ? desktopText('rememberOn') : desktopText('rememberOff')}</button><p>${desktopText('windowHint')}</p><h2>${desktopText('startup')}</h2><p>${desktopText('startupHint')}</p>${appChoices('startupApps')}</section>`;
+    const personalization = `<section class="desktop-preferences" data-settings-group="appearance"><div class="eyebrow">${desktopText('heading')}</div><h2>${desktopText('wallpaper')}</h2><div class="choices">${['bing','calm'].map(value => `<button class="chip ${mode === value ? 'selected' : ''}" aria-pressed="${mode === value}" onclick="setWallpaperSource('${value}')">${desktopText(value)}</button>`).join('')}</div><div class="desktop-wallpaper-custom"><label for="desktop-wallpaper-url">${desktopText('custom')}</label><div><input id="desktop-wallpaper-url" type="url" maxlength="2048" placeholder="https://example.com/image.jpg" value="${customUrl}"><button class="secondary" onclick="setWallpaperSource('custom')">${desktopText('useUrl')}</button></div><p>${desktopText('urlHint')}</p></div><h2>${desktopText('shortcuts')}</h2><p>${desktopText('shortcutsHint')}</p>${appChoices('desktopShortcuts')}<button class="desktop-text-button" onclick="resetIconPositions()">${desktopText('resetPositions')}</button><h2>${desktopText('windowLayout')}</h2><button class="chip ${state.rememberWindowLayout !== false ? 'selected' : ''}" aria-pressed="${state.rememberWindowLayout !== false}" onclick="toggleWindowMemory()">${state.rememberWindowLayout !== false ? desktopText('rememberOn') : desktopText('rememberOff')}</button><p>${desktopText('windowHint')}</p><h2>${desktopText('startup')}</h2><p>${desktopText('startupHint')}</p>${appChoices('startupApps')}</section>`;
     const panel = container.querySelector('.settings');
     if (panel) panel.insertAdjacentHTML('beforeend', personalization);
   };

public/desktop-widgets.js

@@ -137,7 +137,7 @@
     originalSystemApp(container);
     const panel = container.querySelector('.settings');
     if (!panel) return;
-    panel.insertAdjacentHTML('beforeend', `<section class="widget-preferences"><div class="eyebrow">${label('heading')}</div><p>${label('hint')}</p><div class="desktop-app-choices">${widgetIds.map(id => `<button type="button" class="chip ${selected().includes(id) ? 'selected' : ''}" aria-pressed="${selected().includes(id)}" onclick="toggleDesktopWidget('${id}')">${label(id)}</button>`).join('')}</div><button class="desktop-text-button" onclick="resetWidgetLayout()">${label('reset')}</button></section>`);
+    panel.insertAdjacentHTML('beforeend', `<section class="widget-preferences" data-settings-group="appearance"><div class="eyebrow">${label('heading')}</div><p>${label('hint')}</p><div class="desktop-app-choices">${widgetIds.map(id => `<button type="button" class="chip ${selected().includes(id) ? 'selected' : ''}" aria-pressed="${selected().includes(id)}" onclick="toggleDesktopWidget('${id}')">${label(id)}</button>`).join('')}</div><button class="desktop-text-button" onclick="resetWidgetLayout()">${label('reset')}</button></section>`);
   };
   setInterval(renderWidgets, 60000);
   window.addEventListener('resize', () => wrappers.forEach((_, id) => place(id)));