From a3523d3316d11fcf18238ced57fbb9ab2fa0b2c5 Mon Sep 17 00:00:00 2001
From: Claude <claude@webklar.local>
Date: Sun, 4 Oct 2026 16:40:17 +0000
Subject: [PATCH] chore(web): veraltete Kommentare, Theme-Skript in IIFE,
 CARD_W/CARD_H und reportsLabel nur aus einer Quelle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- publish.ts und editor-page.ts: Kommentare zum Aufräumen bzw. zur Adresse /gestalten?karte= stimmen wieder.
- index.html: Inline-Skript für Hell/Dunkel in einer sofort aufgerufenen Funktion (keine globale Variable theme);
  Test führt es aus und vergleicht mit initialTheme().
- CARD_W/CARD_H nur noch aus card/geometry.ts (Startseite, Detailseite, Raster), Vorschauhöhe des Rasters daraus abgeleitet;
  reportsLabel nur aus pages/format.ts. Ein Test sorgt dafür, dass es dabei bleibt.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 web/index.html                         | 19 +++++----
 web/src/branding.test.ts               | 53 ++++++++++++++++++++++++++
 web/src/community/gallery-grid.test.ts |  3 ++
 web/src/community/gallery-grid.ts      | 11 ++----
 web/src/community/publish.ts           |  3 +-
 web/src/editor/editor-page.ts          |  2 +-
 web/src/pages/community-page.ts        | 11 +-----
 web/src/pages/format.test.ts           | 11 +++++-
 web/src/pages/format.ts                |  7 +++-
 web/src/pages/home-page.ts             |  3 +-
 web/src/single-sources.test.ts         | 31 +++++++++++++++
 11 files changed, 124 insertions(+), 30 deletions(-)
 create mode 100644 web/src/single-sources.test.ts

diff --git a/web/index.html b/web/index.html
index 792ce73..d40a323 100644
--- a/web/index.html
+++ b/web/index.html
@@ -11,16 +11,19 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2" />
     <script>
       // Hell/Dunkel vor dem ersten Paint setzen (kein Aufblitzen); dieselbe Regel wie initialTheme() in src/shell/theme.ts.
-      try {
-        var theme = null;
+      // In einer sofort aufgerufenen Funktion, damit keine globale Variable `theme` entsteht.
+      (function () {
         try {
-          theme = localStorage.getItem('aircard.theme');
+          var theme = null;
+          try {
+            theme = localStorage.getItem('aircard.theme');
+          } catch (e) {}
+          if (theme !== 'light' && theme !== 'dark') {
+            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+          }
+          document.documentElement.setAttribute('data-theme', theme);
         } catch (e) {}
-        if (theme !== 'light' && theme !== 'dark') {
-          theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        }
-        document.documentElement.setAttribute('data-theme', theme);
-      } catch (e) {}
+      })();
     </script>
   </head>
   <body>
diff --git a/web/src/branding.test.ts b/web/src/branding.test.ts
index 76e594a..b9ca7a2 100644
--- a/web/src/branding.test.ts
+++ b/web/src/branding.test.ts
@@ -1,7 +1,9 @@
 import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
+import { runInNewContext } from 'node:vm';
 import { describe, expect, it } from 'vitest';
 import indexHtml from '../index.html?raw';
+import { initialTheme } from './shell/theme';
 
 const publicFile = (name: string) => readFileSync(resolve(import.meta.dirname, '../public', name));
 
@@ -47,3 +49,54 @@ describe('Icon-Dateien', () => {
     expect(pngInfo(publicFile('apple-touch-icon.png'))).toEqual({ width: 180, height: 180, colorType: 2 });
   });
 });
+
+describe('Inline-Skript für Hell/Dunkel in index.html', () => {
+  const script = /<script>([\s\S]*?)<\/script>/.exec(indexHtml)?.[1] ?? '';
+
+  /** Führt das Skript in einer leeren Umgebung aus (kein Browser) und liefert, was es gesetzt hat. */
+  function run(stored: string | null, prefersDark: boolean, storageThrows = false) {
+    const attributes: Record<string, string> = {};
+    const sandbox: Record<string, unknown> = {
+      localStorage: {
+        getItem: () => {
+          if (storageThrows) throw new Error('gesperrt');
+          return stored;
+        },
+      },
+      window: { matchMedia: () => ({ matches: prefersDark }) },
+      document: { documentElement: { setAttribute: (name: string, value: string) => (attributes[name] = value) } },
+    };
+    runInNewContext(script, sandbox);
+    return { attributes, sandbox };
+  }
+
+  it('ist da und läuft ohne Browser-Umgebung durch', () => {
+    expect(script).toContain('data-theme');
+    expect(() => run(null, true)).not.toThrow();
+  });
+
+  it('legt keine globale Variable an (Skript steckt in einer sofort aufgerufenen Funktion)', () => {
+    const { sandbox } = run('dark', false);
+    expect(Object.keys(sandbox).sort()).toEqual(['document', 'localStorage', 'window']);
+    expect('theme' in sandbox).toBe(false);
+  });
+
+  it.each([
+    ['dark', false],
+    ['light', true],
+    ['dark', true],
+    ['light', false],
+    ['blau', true],
+    ['blau', false],
+    ['', true],
+    [null, true],
+    [null, false],
+  ] as const)('gleiche Regel wie initialTheme(): gespeichert %j, Systemvorgabe dunkel %s', (stored, prefersDark) => {
+    expect(run(stored, prefersDark).attributes['data-theme']).toBe(initialTheme(stored, prefersDark));
+  });
+
+  it('gesperrter localStorage: es gilt die Systemvorgabe', () => {
+    expect(run(null, true, true).attributes['data-theme']).toBe('dark');
+    expect(run(null, false, true).attributes['data-theme']).toBe('light');
+  });
+});
diff --git a/web/src/community/gallery-grid.test.ts b/web/src/community/gallery-grid.test.ts
index 32533be..eda417e 100644
--- a/web/src/community/gallery-grid.test.ts
+++ b/web/src/community/gallery-grid.test.ts
@@ -126,6 +126,9 @@ describe('mountGalleryGrid: Vorschaubilder', () => {
     expect(load.mock.calls.map((c) => (c as unknown as [GalleryCard])[0].id)).toEqual(['g1', 'g2']);
     const srcs = [...host.querySelectorAll<HTMLImageElement>('.gallery-thumb img')].map((i) => i.getAttribute('src'));
     expect(srcs).toEqual(['blob:t-1', 'blob:t-2']);
+    // Vorschau 480 breit, Höhe nach 1536 : 969 (wie exportCard sie rendert)
+    const first = host.querySelector('.gallery-thumb img');
+    expect([first?.getAttribute('width'), first?.getAttribute('height')]).toEqual(['480', '303']);
   });
 
   it('gibt alle Object-URLs beim Aufräumen frei', async () => {
diff --git a/web/src/community/gallery-grid.ts b/web/src/community/gallery-grid.ts
index 26bda2b..55f4629 100644
--- a/web/src/community/gallery-grid.ts
+++ b/web/src/community/gallery-grid.ts
@@ -1,7 +1,9 @@
 // Kachelraster der Community-Galerie: Vorschau, Titel, Herausgeber, bis zu drei Tags.
 // Die Vorschaubilder kommen über `load` (WebP 480 px aus dem Galerie-Bucket, mit Pixelgrenze geprüft: loadGalleryImageChecked)
 // als fertige Object-URL; `dispose()` gibt alle URLs wieder frei. Alle Texte gehen als Text in den DOM, nie als HTML.
+import { CARD_H, CARD_W, PREVIEW_WIDTH } from '../card/geometry';
 import { el } from '../editor/dom';
+import { reportsLabel } from '../pages/format';
 import type { CheckedImage, GalleryCard } from './gallery';
 
 export interface GalleryGridOptions {
@@ -22,13 +24,8 @@ export interface GalleryGrid {
 
 const PARALLEL = 6;
 const MAX_TAGS = 3;
-const THUMB_W = 480;
-const THUMB_H = 303; // 480 x 1536:969
-
-/** „1 Meldung“, „3 Meldungen“. */
-function reportsLabel(count: number): string {
-  return count === 1 ? '1 Meldung' : `${count} Meldungen`;
-}
+const THUMB_W = PREVIEW_WIDTH;
+const THUMB_H = Math.round((THUMB_W * CARD_H) / CARD_W); // wie exportCard: 480 x 1536:969 = 303
 
 export function mountGalleryGrid(container: HTMLElement, opts: GalleryGridOptions): GalleryGrid {
   const list = el('ul', { class: 'gallery-grid' });
diff --git a/web/src/community/publish.ts b/web/src/community/publish.ts
index f8f22dd..39fb2e5 100644
--- a/web/src/community/publish.ts
+++ b/web/src/community/publish.ts
@@ -1,5 +1,6 @@
 // Eine gespeicherte Karte in der Community-Galerie veröffentlichen: rendern, zwei Dateien hochladen, API rufen.
-// Scheitert danach irgendetwas, löscht der Client genau die zwei Dateien dieses Versuchs wieder.
+// Aufgeräumt wird nur bei eindeutigem Scheitern (Upload-Fehler, eindeutige Ablehnung der API): dann löscht der Client genau
+// die zwei Dateien dieses Versuchs wieder. Bleibt der Ausgang offen, bleiben sie liegen (siehe publishSavedCard).
 import { ID, Permission, Role } from 'appwrite';
 import { IDS, storage } from '../account/appwrite';
 import { cardsService, requireUserId, toUploadFile, type SavedCard } from '../account/cards';
diff --git a/web/src/editor/editor-page.ts b/web/src/editor/editor-page.ts
index 3ba84d8..9eed98c 100644
--- a/web/src/editor/editor-page.ts
+++ b/web/src/editor/editor-page.ts
@@ -205,7 +205,7 @@ export function mountEditor(root: HTMLElement, store: EditorStore): () => void {
     onStatus: onSaveStatus,
   });
 
-  // Karte öffnen (/?karte=<id>): nur die zuletzt angeforderte zählt.
+  // Karte öffnen (/gestalten?karte=<id>): nur die zuletzt angeforderte zählt.
   let loadToken = 0;
   function cancelCardLoad(): void {
     loadToken += 1;
diff --git a/web/src/pages/community-page.ts b/web/src/pages/community-page.ts
index add6827..c35a2fe 100644
--- a/web/src/pages/community-page.ts
+++ b/web/src/pages/community-page.ts
@@ -16,10 +16,11 @@ import {
   type GalleryReport,
 } from '../community/gallery';
 import { REPORT_REASONS, reportDialog } from '../community/report-dialog';
+import { CARD_H, CARD_W } from '../card/geometry';
 import { confirmDialog, type ConfirmOptions } from '../editor/confirm-dialog';
 import { el } from '../editor/dom';
 import { downloadFileName, saveBlobAs } from '../editor/download';
-import { formatDate } from './format';
+import { formatDate, reportsLabel } from './format';
 import { navigate, titleFor } from './router';
 
 /** Alles, was die Seite von außen braucht (für Tests austauschbar). */
@@ -56,9 +57,6 @@ export const defaultDeps: CommunityDeps = {
   withLogin: (fn) => withLogin(fn),
 };
 
-const CARD_W = 1536;
-const CARD_H = 969;
-
 const UNAVAILABLE = 'Diese Karte ist nicht (mehr) verfügbar.';
 const LOADING = 'Karte wird geladen …';
 const LOAD_ERROR = 'Die Karte konnte gerade nicht geladen werden.';
@@ -76,11 +74,6 @@ interface ReportsState {
   list: GalleryReport[];
 }
 
-/** „1 Meldung“, „3 Meldungen“. */
-function reportsLabel(count: number): string {
-  return count === 1 ? '1 Meldung' : `${count} Meldungen`;
-}
-
 /** Der Text für den Nutzer: Servertexte (deutsch) unverändert, alles andere über errorMessage. */
 function failureText(err: unknown): string {
   if (err instanceof LoginCancelled) return LOGIN_NEEDED;
diff --git a/web/src/pages/format.test.ts b/web/src/pages/format.test.ts
index 5d26bb5..1c9289d 100644
--- a/web/src/pages/format.test.ts
+++ b/web/src/pages/format.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { formatDate } from './format';
+import { formatDate, reportsLabel } from './format';
 
 describe('formatDate', () => {
   it('schreibt dd.mm.yyyy', () => {
@@ -11,3 +11,12 @@ describe('formatDate', () => {
     expect(formatDate('kaputt')).toBe('');
   });
 });
+
+describe('reportsLabel', () => {
+  it('„1 Meldung“, sonst „n Meldungen“', () => {
+    expect(reportsLabel(1)).toBe('1 Meldung');
+    expect(reportsLabel(0)).toBe('0 Meldungen');
+    expect(reportsLabel(2)).toBe('2 Meldungen');
+    expect(reportsLabel(12)).toBe('12 Meldungen');
+  });
+});
diff --git a/web/src/pages/format.ts b/web/src/pages/format.ts
index 45a0852..a8e4545 100644
--- a/web/src/pages/format.ts
+++ b/web/src/pages/format.ts
@@ -1,4 +1,4 @@
-// Gemeinsame Formatierung der Seiten (Meine Karten, Community-Detailseite).
+// Gemeinsame Formatierung der Seiten (Meine Karten, Community-Detailseite, Galerie-Raster).
 
 /** `dd.mm.yyyy` in der Zeitzone des Betrachters; leer, wenn das Datum unlesbar ist. */
 export function formatDate(iso: string): string {
@@ -7,3 +7,8 @@ export function formatDate(iso: string): string {
   const pad = (n: number) => String(n).padStart(2, '0');
   return `${pad(date.getDate())}.${pad(date.getMonth() + 1)}.${date.getFullYear()}`;
 }
+
+/** „1 Meldung“, „3 Meldungen“. */
+export function reportsLabel(count: number): string {
+  return count === 1 ? '1 Meldung' : `${count} Meldungen`;
+}
diff --git a/web/src/pages/home-page.ts b/web/src/pages/home-page.ts
index ddabde4..385f7bb 100644
--- a/web/src/pages/home-page.ts
+++ b/web/src/pages/home-page.ts
@@ -11,6 +11,7 @@ import {
   type GalleryFilter,
   type GalleryOptions,
 } from '../community/gallery';
+import { CARD_H, CARD_W } from '../card/geometry';
 import { el } from '../editor/dom';
 import { navigate, scrollToHash } from './router';
 
@@ -38,8 +39,6 @@ export const defaultDeps: HomeDeps = {
 
 const EXAMPLE_IMAGE = '/hero-beispiel.png';
 const EXAMPLE_ALT = 'Beispielmotiv: violetter Verlauf mit Wellen und dem AirCard-IOS-Symbol';
-const CARD_W = 1536;
-const CARD_H = 969;
 
 const LOADING = 'Karten werden geladen …';
 const LOAD_ERROR = 'Die Community-Karten konnten gerade nicht geladen werden.';
diff --git a/web/src/single-sources.test.ts b/web/src/single-sources.test.ts
new file mode 100644
index 0000000..d805ac2
--- /dev/null
+++ b/web/src/single-sources.test.ts
@@ -0,0 +1,31 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+/** Alle Quelldateien (ohne Tests) unter src/ als [Pfad relativ zu src, Text]. */
+function sources(dir = import.meta.dirname): Array<[string, string]> {
+  const out: Array<[string, string]> = [];
+  for (const name of readdirSync(dir)) {
+    const path = join(dir, name);
+    if (statSync(path).isDirectory()) out.push(...sources(path));
+    else if (/\.ts$/.test(name) && !/\.test\.ts$/.test(name)) out.push([relative(import.meta.dirname, path), readFileSync(path, 'utf8')]);
+  }
+  return out;
+}
+
+const definedIn = (pattern: RegExp) =>
+  sources()
+    .filter(([, text]) => pattern.test(text))
+    .map(([path]) => path)
+    .sort();
+
+describe('Einzelne Quellen', () => {
+  it('CARD_W und CARD_H werden nur in card/geometry.ts definiert', () => {
+    expect(definedIn(/\b(?:const|let|var)\s+CARD_W\b/)).toEqual(['card/geometry.ts']);
+    expect(definedIn(/\b(?:const|let|var)\s+CARD_H\b/)).toEqual(['card/geometry.ts']);
+  });
+
+  it('reportsLabel wird nur in pages/format.ts definiert', () => {
+    expect(definedIn(/\bfunction\s+reportsLabel\b/)).toEqual(['pages/format.ts']);
+  });
+});