feat(app): Onboarding, Settings-Redesign und Docs für v1.9.0

- Onboarding mit Widget-Toolbar Slide und Gaming Starter Board - Settings in Darstellung-Modal und schlankes Settings-Panel - About-Block als fixierten Footer im Settings-Panel - Dropdown-Optionen an Theme-Farben anpassen - Projekt-Dokumentation (Architektur, Widget-Schema, Patterns) - Firefox Update-URL für Store-Veröffentlichung - Versions-Bump auf 1.9.0 in allen Manifests
2026-03-22 08:54:57 +01:00
parent 51947b229c
commit 198171b6c2
14 changed files with 1035 additions and 197 deletions
@@ -537,7 +537,13 @@ body.show-desc .bm-desc { display: block; }
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: 2px; color: var(--accent); text-transform: uppercase;
 }
-.panel-body { flex: 1; overflow-y: auto; padding: 12px 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+.panel-body { flex: 1; overflow-y: auto; padding: 12px 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; min-height: 0; }
+.panel-footer {
+  flex-shrink: 0; border-top: 1px solid var(--border);
+  max-height: 45vh; overflow-y: auto;
+  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
+}
+.panel-footer .about-block { padding: 12px 18px 16px; }

 .settings-section { margin-bottom: 4px; }
 .settings-section-title {
@@ -639,11 +645,12 @@ body.show-desc .bm-desc { display: block; }

 /* INPUTS */
 .select-input {
-  padding: 5px 8px; background: rgba(255,255,255,0.06);
+  padding: 5px 8px; background: var(--bg-board, rgba(255,255,255,0.06));
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font-family: var(--font-body); font-size: 12px;
  cursor: pointer; min-width: 70px;
 }
+.select-input option { background: var(--bg-primary, #0a0e17); color: var(--text-primary); }
 .select-input:focus { outline: none; border-color: var(--border-accent); }

 .text-input {
@@ -103,7 +103,7 @@ async function checkBackupReminder() {
    const notesData = (widgetData && Array.isArray(widgetData.notes)) ? widgetData.notes : [];
    const calcHistory = (widgetData && widgetData.calculator) ? widgetData.calculator.history || [] : [];
    const timerPresets = (widgetData && widgetData.timer) ? widgetData.timer.presets || [] : [];
-    const data = { version: '1.7.0', exported: new Date().toISOString(), boards, settings, notes: notesData, calculator: calcHistory, timerPresets };
+    const data = { version: '1.9.0', exported: new Date().toISOString(), boards, settings, notes: notesData, calculator: calcHistory, timerPresets };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
@@ -13,7 +13,7 @@ function initDataButtons() {
  btnExport.addEventListener('click', async () => {
    const widgetData = await Store.get('widgetStates');
    const data = {
-      version: '1.7.0',
+      version: '1.9.0',
      exported: new Date().toISOString(),
      boards,
      settings,
@@ -25,17 +25,19 @@ const Onboarding = {
    {
      hero: '\uD83C\uDFA8',
      title: '8 handgefertigte Themes',
-      text: 'Klicke auf den „Theme" Button im Header um dein Theme zu wählen. Jedes hat seinen eigenen Stil und Farbpalette.',
+      text: 'Klicke auf den \u201ETheme\u201C Button im Header um dein Theme zu w\u00E4hlen. Jedes hat seinen eigenen Stil und Farbpalette.',
      showThemes: true
    },
    {
-      hero: '\u26A1',
-      title: 'Weitere Features',
+      hero: '\uD83E\uDDF0',
+      title: 'Widget-Toolbar',
      features: [
-        'Suchleiste mit Google, DuckDuckGo oder Bing',
-        'Widget-Toolbar rechts \u2014 Notes und Checklisten erstellen',
-        'Notebook-Sidebar \u00FCber den \u201ENote\u201C Button oder die Toolbar',
-        'Funktioniert komplett offline \u2014 alles lokal gespeichert'
+        'Die schwebenden Buttons rechts \u00F6ffnen Widgets',
+        'Notes und Checklisten f\u00FCr schnelle Notizen',
+        'Taschenrechner mit History',
+        'Timer/Countdown mit speicherbaren Presets',
+        'Bild-Referenz Widgets (aktivierbar in Settings)',
+        'Notebook-Sidebar zeigt alle Notes auf einen Blick'
      ]
    },
    {
@@ -43,10 +45,16 @@ const Onboarding = {
      title: 'Backups nicht vergessen!',
      text: 'Deine Daten sind lokal im Browser gespeichert. Wenn du Browserdaten l\u00F6schst, gehen sie verloren! Sichere regelm\u00E4\u00DFig \u00FCber Settings \u2192 Data \u2192 Export. Wir erinnern dich alle 7 Tage daran.'
    },
+    {
+      hero: '\uD83C\uDFAE',
+      title: 'Gaming Starter Board',
+      text: 'Spielst du Games wie Satisfactory, Factorio oder Star Citizen? Ich kann ein Board mit n\u00FCtzlichen Community-Links anlegen.',
+      interactive: 'gaming-board'
+    },
    {
      hero: '\uD83D\uDE80',
      title: 'Bereit!',
-      text: 'Klicke auf \u201E+ Board\u201C um dein erstes Board zu erstellen, oder nutze den \u201EImport\u201C Button im Header um deine Browser-Lesezeichen zu importieren.'
+      text: 'Erstelle dein erstes Board mit \u201E+ Board\u201C oder importiere deine Browser-Lesezeichen \u00FCber den Import-Button im Header. Viel Spa\u00DF!'
    }
  ],

@@ -160,7 +168,27 @@ const Onboarding = {
      nav.appendChild(backBtn);
    }

-    if (isLast) {
+    if (slide.interactive === 'gaming-board') {
+      // Interaktive Slide: Zwei Buttons statt "Weiter"
+      const noBtn = document.createElement('button');
+      noBtn.className = 'btn-secondary';
+      noBtn.textContent = 'Nein danke';
+      noBtn.addEventListener('click', () => {
+        this.currentSlide++;
+        this._render();
+      });
+
+      const yesBtn = document.createElement('button');
+      yesBtn.className = 'btn-primary';
+      yesBtn.textContent = 'Ja, gerne';
+      yesBtn.addEventListener('click', async () => {
+        await this._createGamingBoard();
+        this.currentSlide++;
+        this._render();
+      });
+
+      nav.append(noBtn, yesBtn);
+    } else if (isLast) {
      const startBtn = document.createElement('button');
      startBtn.className = 'btn-primary';
      startBtn.textContent = 'Los geht\u2019s!';
@@ -181,6 +209,34 @@ const Onboarding = {
    modal.appendChild(footer);
  },

+  /**
+   * Gaming Starter Board erstellen
+   * Vorbefuelltes Board mit Community-Links fuer Factory/Space Games
+   */
+  async _createGamingBoard() {
+    const gamingBoard = {
+      id: uid(),
+      title: '\uD83C\uDFAE Gaming',
+      bookmarks: [
+        { id: uid(), title: 'Satisfactory Wiki', url: 'https://satisfactory.wiki.gg', desc: '' },
+        { id: uid(), title: 'Satisfactory Calculator', url: 'https://satisfactorytools.com', desc: '' },
+        { id: uid(), title: 'Factorio Wiki', url: 'https://wiki.factorio.com', desc: '' },
+        { id: uid(), title: 'Factorio Cheatsheet', url: 'https://factoriocheatsheet.com', desc: '' },
+        { id: uid(), title: 'Avorion Wiki', url: 'https://wiki.avorion.net', desc: '' },
+        { id: uid(), title: 'Minecraft Wiki', url: 'https://minecraft.wiki', desc: '' },
+        { id: uid(), title: 'Modrinth (Mods)', url: 'https://modrinth.com', desc: '' },
+        { id: uid(), title: 'Star Citizen Wiki', url: 'https://starcitizen.tools', desc: '' },
+        { id: uid(), title: 'UEX Corp (Trading)', url: 'https://uexcorp.space', desc: '' },
+        { id: uid(), title: 'Hellion TradeCenter', url: 'https://hellion-initiative.online/tradecenter', desc: 'Trade Center f\u00FCr Star Citizen' }
+      ],
+      blurred: false
+    };
+
+    boards.push(gamingBoard);
+    await saveBoards();
+    renderBoards();
+  },
+
  /** Keyboard-Navigation */
  _bindKeyboard() {
    this._keyHandler = (e) => {
@@ -25,7 +25,7 @@ function closeThemeModal() {

 // ---- ACCORDION ----
 function initAccordion() {
-  const defaultOpen = new Set(['appearance', 'behavior', 'widgets', 'data', 'help']);
+  const defaultOpen = new Set(['widgets']);
  const sections = document.querySelectorAll('.settings-section[data-section]');

  sections.forEach(section => {