Rework CSS snippets

Introduce a new CSS snippets system: add state.cssSnippets and STORAGE_KEYS.cssSnippets, normalize stored snippets (with built-in presets) and persist changes. applyCustomCSS now composes active snippets with raw custom CSS and listens for bds:cssSnippetsChanged for live updates. Add Settings UI to manage snippets (save/edit/toggle/restore/delete) including a new SnippetList.svelte component, modal, toolbar and styles, plus mount/app/drawer refresh hooks to update the UI. Update localization strings for snippet-related labels and adjust an e2e test selector to be more robust.

Author: EdgeTypE

src/content/index.js

@@ -46,7 +46,7 @@ async function init() {
   await waitForBody();
   await loadStateFromStorage();
 
-  applyCustomCSS(state.settings.customCSS);
+  applyCustomCSS(state.settings.customCSS, state.cssSnippets);
 
   // Initialize localization locale
   i18n.init(state.settings.syncLocale ? null : state.settings.locale);
@@ -79,7 +79,12 @@ async function init() {
 
   // Live-update custom CSS when settings change
   window.addEventListener("bds:settingsChanged", () => {
-    applyCustomCSS(state.settings.customCSS);
+    applyCustomCSS(state.settings.customCSS, state.cssSnippets);
+  });
+
+  // Live-update custom CSS when snippets change
+  window.addEventListener("bds:cssSnippetsChanged", () => {
+    applyCustomCSS(state.settings.customCSS, state.cssSnippets);
   });
 
   window.addEventListener("bds:deep-research-config-changed", () => {
@@ -248,13 +253,25 @@ async function waitForBody() {
   });
 }
 
-function applyCustomCSS(css) {
+function applyCustomCSS(customCSS, snippets) {
   const id = "bds-custom-css";
   let style = document.getElementById(id);
   if (!style) {
     style = document.createElement("style");
     style.id = id;
     document.head.appendChild(style);
   }
-  style.textContent = css || "";
+  
+  let compiled = customCSS || "";
+  if (Array.isArray(snippets)) {
+    const activeSnippetsCss = snippets
+      .filter((s) => s.active)
+      .map((s) => `/* Snippet: ${s.name} */\n${s.css}`)
+      .join("\n\n");
+    if (activeSnippetsCss) {
+      compiled = `${activeSnippetsCss}\n\n/* Raw Custom CSS */\n${compiled}`;
+    }
+  }
+  
+  style.textContent = compiled;
 }

src/content/state.js

@@ -65,6 +65,7 @@ const state = {
   whatsNewPending: false,
   /** @type {Object<string, string[]>} session ID -> tag names */
   chatTags: {},
+  cssSnippets: [],
   savedItems: [],
   /** @type {{indicator: 'none'|'minor'|'major'|'critical', description: string, lastChecked: number}} */
   serverStatus: {

src/content/storage.js

@@ -11,6 +11,7 @@ import {
   SYSTEM_PROMPT_TEMPLATE_VERSION,
   DOWNLOAD_BEHAVIOR_VERSION,
   DEFAULT_REMOTE_CONFIG,
+  CSS_PRESETS,
 } from "../lib/constants.js";
 import { makeId } from "../lib/utils/helpers.js";
 import { setHtmlToMarkdownMaxDepth } from "./dom/message-text.js";
@@ -32,6 +33,7 @@ export async function loadStateFromStorage() {
     STORAGE_KEYS.savedItems,
     STORAGE_KEYS.remoteAnnouncement,
     STORAGE_KEYS.dismissedAnnouncements,
+    STORAGE_KEYS.cssSnippets,
     "bds_locale_updates",
   ]);
 
@@ -107,6 +109,7 @@ export async function loadStateFromStorage() {
   }
 
   state.skills = normalizeSkills(values[STORAGE_KEYS.skills]);
+  state.cssSnippets = normalizeCssSnippets(values[STORAGE_KEYS.cssSnippets]);
   state.memories = normalizeMemories(values[STORAGE_KEYS.memories]);
   state.characters = normalizeCharacters(values[STORAGE_KEYS.characters]);
   state.projects = normalizeProjects(values[STORAGE_KEYS.projects]);
@@ -337,6 +340,70 @@ export function normalizeSavedItems(raw) {
     }));
 }
 
+export function normalizeCssSnippets(raw) {
+  const defaultPresets = [
+    {
+      id: "preset-reducePadding",
+      name: "presetReducePadding",
+      css: CSS_PRESETS.reducePadding.css,
+      active: false,
+      isPreset: true,
+    },
+    {
+      id: "preset-widerMessages",
+      name: "presetWiderMessages",
+      css: CSS_PRESETS.widerMessages.css,
+      active: false,
+      isPreset: true,
+    },
+    {
+      id: "preset-compact",
+      name: "presetCompact",
+      css: CSS_PRESETS.compact.css,
+      active: false,
+      isPreset: true,
+    },
+    {
+      id: "preset-betterCodeFont",
+      name: "presetBetterCodeFont",
+      css: CSS_PRESETS.betterCodeFont.css,
+      active: false,
+      isPreset: true,
+    },
+  ];
+
+  if (!Array.isArray(raw)) {
+    return defaultPresets;
+  }
+
+  const map = new Map(raw.map((item) => [item.id, item]));
+
+  const finalPresets = defaultPresets.map((preset) => {
+    const existing = map.get(preset.id);
+    if (existing) {
+      map.delete(preset.id);
+      return {
+        ...preset,
+        css: existing.css !== undefined ? existing.css : preset.css,
+        active: !!existing.active,
+      };
+    }
+    return preset;
+  });
+
+  const customSnippets = Array.from(map.values())
+    .map((item) => ({
+      id: String(item.id || makeId()),
+      name: String(item.name || "Snippet"),
+      css: String(item.css || ""),
+      active: !!item.active,
+      isPreset: false,
+    }))
+    .filter((item) => item.css.trim().length > 0);
+
+  return [...finalPresets, ...customSnippets];
+}
+
 // ── Storage change listener ──
 
 export function bindStorageChangeListener() {
@@ -423,6 +490,14 @@ export function bindStorageChangeListener() {
       if (state.ui) state.ui.refreshSavedItems();
     }
 
+    if (changes[STORAGE_KEYS.cssSnippets]) {
+      state.cssSnippets = normalizeCssSnippets(changes[STORAGE_KEYS.cssSnippets].newValue);
+      if (state.ui && typeof state.ui.refreshCssSnippets === 'function') {
+        state.ui.refreshCssSnippets();
+      }
+      window.dispatchEvent(new CustomEvent("bds:cssSnippetsChanged"));
+    }
+
     if (changes[STORAGE_KEYS.remoteAnnouncement]) {
       state.remoteAnnouncements = Array.isArray(changes[STORAGE_KEYS.remoteAnnouncement].newValue) ? changes[STORAGE_KEYS.remoteAnnouncement].newValue : [];
       window.dispatchEvent(new CustomEvent("bds:remote-announcement-updated", { detail: state.remoteAnnouncements }));

src/content/ui/App.svelte

@@ -58,6 +58,9 @@
   export function refreshSavedItems() {
     if (drawerRef) drawerRef.refreshSavedItems();
   }
+  export function refreshCssSnippets() {
+    if (drawerRef) drawerRef.refreshCssSnippets();
+  }
 
   export function refreshWhatsNew() {
     whatsNewPending = appState.whatsNewPending;

src/content/ui/Drawer.svelte

@@ -44,6 +44,9 @@
   export function refreshSavedItems() {
     if (savedItemsRef) savedItemsRef.refresh();
   }
+  export function refreshCssSnippets() {
+    if (settingsRef) settingsRef.refreshCssSnippets();
+  }
 
   function openProjectsManager() {
     showProjectsManager = true;