feat: improve UI and accessibility across cardsboard layout; enhance color scheme and shadows

Author: johappel

CHANGELOG.md

@@ -8,7 +8,14 @@ Diese Datei ist die kompakte Stakeholder-Ansicht.
 
 ## Unreleased
 
-- UI & Layout: Farbschema-Default fuer neue Settings und Fallback wurde von `stil` auf `rpi` umgestellt (Option `Stil` bleibt weiterhin manuell waehlbar).
+- Boards-Liste (Light): Board-Kacheln nutzen jetzt denselben sehr hellen Hintergrund wie die Board-Flaeche (`--board-bg`), Dark Mode bleibt bei `--card`.
+- Test-Runner (Windows): `test:e2e` ruft das Shell-Skript jetzt explizit ueber `bash` auf; zusaetzlich wurden Zeilenenden des Skripts auf LF normalisiert.
+- DX/Editor: VS-Code CSS-`unknownAtRules` Warnungen fuer Tailwind-v4 Direktiven (`@config`, `@custom-variant`) im Workspace unterdrueckt.
+- Boards-Liste (A11y): Status-/Aktions-Icons sind jetzt immer sichtbar und als kleine, rechts angepinnte Kreis-Badges umgesetzt; der Inhaltsbereich der Board-Kachel wurde rechts reduziert.
+- UI Light Mode: Cards nutzen jetzt einen weissen Hintergrund, der Board-Hintergrund ist auf ein sehr helles Grau angepasst.
+- UI Karten: Karten-Schatten wurde verstaerkt und auf feste RGBA-Werte umgestellt; Schattenfall ist jetzt konsistent nach rechts/unten (Light und Dark).
+- Navigation: Klick auf das Sidebar-Logo `Kanban-Editor` leitet jetzt auf die Basis-URL der App (`base`) weiter.
+ - UI Tiefenwirkung: Rechte Sidebar (Desktop) erhielt einen rechten Kanten-Schatten, Topbar einen unteren Schatten fuer klarere Layer-Trennung im Board-Layout.
 - AMB Publishing: `a`-Tag im Kind-30142 Event nutzt jetzt das kanonische Address-Format `30301:<pubkey>:<d-tag>` (optional mit Relay-Hint) statt `naddr`, damit Referenzen NIP-konform und robuster aufloesbar sind.
 - AMB Publishing: Optionaler `r`-Tag mit oeffentlicher Board-Web-URL (naddr-Pfad) wird zu Snapshot- und AMB-Events hinzugefuegt; lokale/private Origins (`localhost`, private IP-Ranges) werden dabei automatisch ausgeschlossen.
 - Sidebar-Branding: App-Name `Kanban-Editor` mit periodischem Accent-Shine (links→rechts) und statischem Gradient-Finish (light: foreground→accent, dark: foreground→accent) in `cardsboard` Layout.

docs/CHANGELOG/2026-Q1.md

@@ -154,6 +154,17 @@ Q1/2026 war kein einzelner Release, sondern ein schneller Stabilitaets- und Ausb
 ## Direkte Commits (ohne PR)
 
 ### 2026-03-05
+- **Boards-Liste Light-Background angeglichen:** Die Board-Kacheln in der linken Boards-Liste verwenden im Light-Mode nun `--board-bg` statt `--card`, damit die Flaechenwirkung dem Board-Hintergrund entspricht. Im Dark-Mode bleibt `--card` aktiv (`dark:bg-[var(--card)]`) fuer Kontrast/Lesbarkeit. Betroffene Datei: `src/routes/cardsboard/BoardsList.svelte`.
+- **E2E-Runner Windows-kompatibel gemacht:** Das NPM-Script `test:e2e` fuehrt den Shell-Runner nun explizit mit `bash` aus (`package.json`), und `scripts/test-e2e-with-ci-config.sh` wurde auf LF-Zeilenenden normalisiert. Dadurch scheitert der Aufruf unter PowerShell nicht mehr an Script-Start/CRLF, sondern laeuft bis zum fachlichen Precheck (lokaler Relay auf Port 7000 erforderlich).
+- **Editor-DX: CSS At-Rule Warnungen bereinigt:** Fuer das Workspace wurden VS-Code-Lint-Settings ergaenzt, damit Tailwind-v4-spezifische Direktiven (`@config`, `@custom-variant`) in `src/app.css` nicht mehr als `unknownAtRules` markiert werden. Umsetzung in `.vscode/settings.json` via `css/scss/less.lint.unknownAtRules = ignore`.
+- **Boards-Liste A11y verbessert (Icons immer sichtbar):** Die bisher hover-abhaengigen Board-Icons wurden auf eine dauerhaft sichtbare, rechts angepinnte Icon-Leiste umgestellt. Status-/Rollen-/Aktions-Icons werden als kleine Kreis-Badges am rechten Rand der Board-Kachel angezeigt. Zur Vermeidung von Ueberlappungen wurde der klickbare Inhaltsbereich rechts verschmaelert (`pr-16`). Betroffene Datei: `src/routes/cardsboard/BoardsList.svelte`.
+- **Light-Mode Flaechen angepasst (Cards/Board):** Kartenflaechen wurden im Light-Mode auf reines Weiss gesetzt (`--card`), waehrend die Board-Flaeche auf ein sehr helles Grau umgestellt wurde (`--board-bg`) fuer bessere Layer-Trennung. Die Anpassung gilt fuer `:root` und `:root.rpi`. Zusaetzlich wurde ein Tippfehler in der RPI-Light-Variable korrigiert (`---board-bg` → `--board-bg`). Betroffene Datei: `src/app.css`.
+- **Karten-Schatten verstaerkt (theme-unabhaengig):** Die Card-Komponente verwendet jetzt feste RGBA-Schattenwerte statt generischer Utility-Schatten (`shadow-md`/`hover:shadow-lg`), damit die Tiefenwirkung in Light- und Dark-Theme gleichmaessig stark bleibt. Der Schattenwurf ist dabei explizit nach rechts/unten ausgerichtet (positive X/Y-Offsets) fuer einen konsistenten "Licht von links oben"-Eindruck. Umsetzung in `src/routes/cardsboard/Card.svelte` ueber `shadow-[...]` und `hover:shadow-[...]`.
+- **Logo-Navigation zur Basis-URL:** Das Sidebar-Logo `Kanban-Editor` ist nun sowohl im mobilen als auch im Desktop-Header als Link auf die Basis-URL der App umgesetzt (`${base}/`). Dadurch fuehrt ein Klick konsistent zur Startseite, auch bei Deployments mit konfiguriertem SvelteKit-`base`-Pfad. Betroffene Datei: `src/routes/cardsboard/+layout.svelte`.
+- **OER-Finder Local-Dev Fallback fuer private Registry:** `src/lib/components/OerImagePicker.svelte` verwendet keine statischen TypeScript-Imports von `@edufeed-org/oer-finder-plugin` mehr, sondern laedt das Plugin optional clientseitig via dynamischem Import. Damit schlagen lokale Editor-/Type-Checks ohne gesetzten `NODE_AUTH_TOKEN` nicht mehr mit `TS2307` fehl. Wenn das Paket nicht installiert ist, zeigt die Komponente stattdessen einen klaren Hinweis (`fehlender NODE_AUTH_TOKEN`) und beendet den Picker-Flow kontrolliert.
+- **OER-Finder Plugin Kompatibilitaetsfix (`Missing "./adapters" specifier`):** `src/lib/components/OerImagePicker.svelte` wurde auf die tatsaechlich exportierte API von `@edufeed-org/oer-finder-plugin@0.1.0` umgestellt. Der nicht exportierte Deep-Import `@edufeed-org/oer-finder-plugin/adapters` wurde entfernt. Zusaetzlich wurden veraltete Typen/APIs (`SourceConfig`, `LoadMoreElement`, `searchEl.sources`) auf aktuelle Plugin-Typen (`SourceOption`, `searchEl.availableSources`) migriert sowie Event-Casts auf `CustomEvent<...>` korrigiert (`search-results`, `card-click`). Der Build-/Dev-Blocker in Vite ist damit beseitigt und `pnpm run check` laeuft wieder fehlerfrei.
+- **Layout-Tiefe verbessert (Sidebar/Topbar):** Im `cardsboard`-Layout wurde die rechte Desktop-Sidebar um einen sichtbaren rechten Kanten-Schatten erweitert (inset-shadow fuer robuste Darstellung trotz `overflow-hidden`). Die Topbar erhielt zusaetzlich einen unteren Schatten fuer eine klarere visuelle Trennung zwischen Header und Board-Inhalt. Betroffene Dateien: `src/routes/cardsboard/+layout.svelte`, `src/routes/cardsboard/Topbar.svelte`.
+- **RPI-Farbspezifikation umgesetzt (Hex-vorgaben):** Das RPI-Theme in `src/app.css` wurde auf die vorgegebenen Farben aus dem Design-Briefing abgestimmt: Light `Primaer #203A8F` und `Sekundaer #FFA500`, Dark `Primaer #4C68C4` und `Sekundaer #FFA500`. Die Werte wurden konsistent auf die relevanten Theme-Tokens gemappt (`--primary`, `--accent`, `--ring`, `--sidebar-primary`, `--sidebar-ring`, `--chart-1`, `--chart-2`) und die RPI-Board-Hintergrundverlaeufe entsprechend angepasst. Zusaetzlich wurde die RPI-Farbvorschau im SettingsPanel auf `#203A8F` vereinheitlicht (`src/lib/components/settings/SettingsPanel.svelte`).
 - **UI & Layout Farbschema-Default auf RPI gesetzt:** In den globalen UI-Einstellungen wurde `colorScheme` standardmaessig auf `rpi` gesetzt. Zusaetzlich nutzt `applyTheme()` jetzt `rpi` als Fallback, wenn kein Farbschema vorhanden ist. Damit starten neue Installationen und ungefuellte Settings konsistent mit dem RPI-Farbschema; das Schema `stil` bleibt als manuell waehlbare Option unveraendert verfuegbar. Betroffene Datei: `src/lib/stores/settingsStore.svelte.ts`.
 
 ### 2026-02-23

package.json

@@ -14,7 +14,7 @@
     "lint": "eslint .",
     "test:unit": "vitest",
     "test": "npm run test:unit -- --run && npm run test:e2e",
-    "test:e2e": "./scripts/test-e2e-with-ci-config.sh"
+    "test:e2e": "bash ./scripts/test-e2e-with-ci-config.sh"
   },
   "files": [
     "dist",

scripts/test-e2e-with-ci-config.sh

@@ -20,19 +20,19 @@ BACKUP_FILE="${CONFIG_DIR}/config.json.backup"
 # Function to restore config on exit
 cleanup() {
   local exit_code=$?
-  
+
   if [ -f "$BACKUP_FILE" ]; then
     echo -e "\n${BLUE}🔄 Restoring original config.json...${NC}"
     mv "$BACKUP_FILE" "$CONFIG_FILE"
     echo -e "${GREEN}✅ Original config.json restored${NC}"
   fi
-  
+
   if [ $exit_code -ne 0 ]; then
     echo -e "${RED}❌ Tests failed with exit code: $exit_code${NC}"
   else
     echo -e "${GREEN}✅ Tests completed successfully${NC}"
   fi
-  
+
   exit $exit_code
 }
 
@@ -56,7 +56,7 @@ if ! nc -z localhost 7000 2>/dev/null && ! lsof -i:7000 >/dev/null 2>&1 && ! ss
   echo -e ""
   echo -e "Once the relay is running, try this command again."
   echo -e "${RED}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
-  
+
   # Unset trap to avoid cleanup on this error exit
   trap - EXIT INT TERM
   exit 1

src/app.css

@@ -22,7 +22,7 @@
   /* Core Colors — FOERBICO "stil" */
   --background: oklch(100% 0 0);
   --foreground: oklch(38% .02 250);
-  --card: oklch(97% 0 0);
+  --card: oklch(100% 0 0);
   --card-hover: oklch(94% 0 0);
   --card-foreground: oklch(38% .02 250);
   --popover: oklch(97% 0 0);
@@ -69,6 +69,7 @@
   /* Board */
   --column-border: oklch(85% .01 250);
   --button: oklch(88% 0 0);
+  --board-bg: oklch(97.8% 0.002 250);
 
   /* Card Colors for Color Picker */
   --color-slate: oklch(88.734% 0.02327 285.861 / 0.945);
@@ -153,24 +154,24 @@
   /* Core Colors — FOERBICO "rpi" */
   --background: oklch(100% 0 0);
   --foreground: oklch(25% .02 264);
-  --card: oklch(97% .005 264);
+  --card: oklch(100% 0 0);
   --card-hover: oklch(94% .01 264);
   --card-foreground: oklch(25% .02 264);
   --popover: oklch(97% .005 264);
   --popover-foreground: oklch(25% .02 264);
-  --primary: oklch(35% .16 264);
+  --primary: #203a8f;
   --primary-foreground: oklch(100% 0 0);
   --secondary: oklch(94% .01 264);
   --secondary-foreground: oklch(25% .02 264);
   --muted: oklch(94% .01 264);
   --muted-foreground: oklch(55% .01 264);
-  --accent: oklch(79% .17 70);
+  --accent: #ffa500;
   --accent-foreground: oklch(20% 0 0);
   --destructive: oklch(65% .2 25);
   --destructive-foreground: oklch(100% 0 0);
   --border: oklch(88% .005 264);
   --input: oklch(91% .005 264);
-  --ring: oklch(35% .16 264);
+  --ring: #203a8f;
 
   /* Semantic Status Colors */
   --info: oklch(72% .11 230);
@@ -181,34 +182,29 @@
   --warning-foreground: oklch(20% 0 0);
 
   /* Chart Colors */
-  --chart-1: oklch(35% .16 264);
-  --chart-2: oklch(79% .17 70);
+  --chart-1: #203a8f;
+  --chart-2: #ffa500;
   --chart-3: oklch(72% .11 230);
   --chart-4: oklch(82% .17 85);
   --chart-5: oklch(65% .2 25);
+  --color-slate: var(--card);
 
   /* Sidebar */
   --sidebar: oklch(97% .005 264);
   --sidebar-foreground: oklch(25% .02 264);
-  --sidebar-primary: oklch(35% .16 264);
+  --sidebar-primary: #203a8f;
   --sidebar-primary-foreground: oklch(100% 0 0);
   --sidebar-accent: oklch(94% .01 264);
   --sidebar-accent-foreground: oklch(25% .02 264);
   --sidebar-border: oklch(88% .005 264);
-  --sidebar-ring: oklch(35% .16 264);
+  --sidebar-ring: #203a8f;
 
   /* Board */
   --column-border: oklch(85% .01 264);
   --button: oklch(88% .005 264);
 
   /* Board Background — primary (blue) → accent (gold) diagonal */
-  --board-bg: linear-gradient(
-    to bottom right,
-    oklch(72.577% 0.14152 265.272 / 0.534) 0%,
-    oklch(54.98% 0.16067 264.173 / 0.192) 60%,
-    oklch(89.946% 0.02229 74.012 / 0.562) 85%,
-    oklch(78.807% 0.16987 69.733 / 0.534) 98%
-  );
+  --board-bg: oklch(97.6% 0.004 264);
 }
 
 /* ============================================
@@ -224,19 +220,19 @@
   --card-foreground: oklch(90% 0 0);
   --popover: oklch(18% .02 264);
   --popover-foreground: oklch(90% 0 0);
-  --primary: oklch(54.98% 0.16067 264.173);
+  --primary: #4c68c4;
   --primary-foreground: oklch(100% 0 0);
   --secondary: oklch(50% .02 264);
   --secondary-foreground: oklch(100% 0 0);
   --muted: oklch(30% .01 264);
   --muted-foreground: oklch(65% .01 264);
-  --accent: oklch(79% .17 70);
+  --accent: #ffa500;
   --accent-foreground: oklch(15% 0 0);
   --destructive: oklch(65% .2 25);
   --destructive-foreground: oklch(100% 0 0);
   --border: oklch(35% .01 264);
   --input: oklch(26% .02 264);
-  --ring: oklch(55% .16 264);
+  --ring: #4c68c4;
 
   /* Semantic Status Colors */
   --info: oklch(72% .11 230);
@@ -247,21 +243,21 @@
   --warning-foreground: oklch(15% 0 0);
 
   /* Chart Colors */
-  --chart-1: oklch(55% .16 264);
-  --chart-2: oklch(79% .17 70);
+  --chart-1: #4c68c4;
+  --chart-2: #ffa500;
   --chart-3: oklch(72% .11 230);
   --chart-4: oklch(82% .17 85);
   --chart-5: oklch(65% .2 25);
 
   /* Sidebar */
   --sidebar: oklch(18% .02 264);
   --sidebar-foreground: oklch(90% 0 0);
-  --sidebar-primary: oklch(55% .16 264);
+  --sidebar-primary: #4c68c4;
   --sidebar-primary-foreground: oklch(100% 0 0);
   --sidebar-accent: oklch(30% .01 264);
   --sidebar-accent-foreground: oklch(90% 0 0);
   --sidebar-border: oklch(35% .01 264);
-  --sidebar-ring: oklch(55% .16 264);
+  --sidebar-ring: #4c68c4;
 
   /* Board */
   --column-border: oklch(35% .01 264);
@@ -271,14 +267,14 @@
   /* Board Background — primary (blue) → accent (gold) diagonal */
   --board-bg: linear-gradient(
     to bottom right,
-    oklch(54.98% 0.16067 264.173) 0%,
-    oklch(54.98% 0.16067 264.173 / 0.150) 50%,
-    oklch(69.137% 0.09057 73.175 / 0.108) 85%,
-    oklch(78.807% 0.16987 69.733 / 0.534) 98%
+    rgba(76, 104, 196, 0.46) 0%,
+    rgba(76, 104, 196, 0.16) 50%,
+    rgba(255, 165, 0, 0.14) 85%,
+    rgba(255, 165, 0, 0.36) 98%
   );
 
   /* Card Colors for Color Picker - Dark Mode */
-  --color-slate: oklch(32.579% 0.00353 286.054 / 0.945);
+  --color-slate: var(--card);
   --color-blue: oklch(36.012% 0.24863 264.466);
   --color-green: #0ef347;
   --color-orange: oklch(76.57% 0.15684 77.795);
@@ -469,3 +465,8 @@
   outline-offset: 2px;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
 }
+
+.add-board-button:hover {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}

src/lib/components/OerImagePicker.svelte

@@ -1,15 +1,52 @@
 <script lang="ts">
-	import type {
-		OerSearchResultEvent,
-		OerSearchElement,
-		OerListElement,
-        OerCardClickEvent,
-        SourceConfig,
-        LoadMoreElement
-	} from '@edufeed-org/oer-finder-plugin';
 	import { onMount } from 'svelte';
 	import { settingsStore } from '$lib/stores/settingsStore.svelte';
-	import { registerAllBuiltInAdapters } from '@edufeed-org/oer-finder-plugin/adapters';
+
+	// Keep these local fallback types so TS stays happy when the optional
+	// private plugin package is not installed in local environments.
+	type SourceConfig = {
+		id: string;
+		label: string;
+		checked?: boolean;
+		baseUrl?: string;
+	};
+
+	type OerData = {
+		extensions?: {
+			images?: {
+				high?: string;
+				medium?: string;
+				small?: string;
+			};
+		};
+		amb?: {
+			id?: string;
+		};
+	};
+
+	type OerSearchResultEvent = CustomEvent<{
+		data: OerData[];
+		meta: unknown;
+	}>;
+
+	type OerCardClickEvent = CustomEvent<{
+		oer: OerData;
+	}>;
+
+	type OerSearchElement = HTMLElement & {
+		sources: SourceConfig[];
+	};
+
+	type OerListElement = HTMLElement & {
+		loading: boolean;
+		oers: OerData[];
+		error: string | null;
+	};
+
+	type LoadMoreElement = HTMLElement & {
+		loading: boolean;
+		metadata: unknown;
+	};
 
 	interface Props {
 		onSelect: (imageUrl: string) => void;
@@ -20,8 +57,6 @@
 	const language = $state(settingsStore.settings.language)
 	const { onSelect }: Props = $props();
 
-    registerAllBuiltInAdapters();
-
 	const availableSources: SourceConfig[] = [
 		{ id: 'arasaac', label: 'ARASAAC' },
 		{ id: 'openverse', label: 'Openverse', checked: true },
@@ -35,8 +70,28 @@
 	let loadMoreElement: LoadMoreElement;
 
 	onMount(async () => {
-		// Dynamically import the plugin only on the client side to avoid SSR issues
-		await import('@edufeed-org/oer-finder-plugin');
+		// Dynamically import the plugin only on the client side to avoid SSR issues.
+		// Using an indirection avoids hard TS module resolution in environments
+		// where the private package is not available.
+		const pluginPackage = '@edufeed-org/oer-finder-plugin';
+		const plugin = await import(pluginPackage).catch(() => null);
+		if (!plugin) {
+			console.warn(
+				'[OerImagePicker] Optional package "@edufeed-org/oer-finder-plugin" fehlt lokal. ' +
+				'Bitte NODE_AUTH_TOKEN setzen/erneuern und danach "pnpm install" ausfuehren.'
+			);
+			listEl.loading = false;
+			listEl.error = 'OER plugin fehlt lokal. Bitte NODE_AUTH_TOKEN aktualisieren und pnpm install ausfuehren.';
+			loadMoreElement.loading = false;
+			loadMoreElement.metadata = null;
+			return;
+		}
+
+		const maybeRegisterAdapters = (plugin as { registerAllBuiltInAdapters?: () => void })
+			.registerAllBuiltInAdapters;
+		if (typeof maybeRegisterAdapters === 'function') {
+			maybeRegisterAdapters();
+		}
 
 		// Set sources as a JS property (not HTML attribute)
 		searchEl.sources = availableSources;

src/lib/components/settings/SettingsPanel.svelte

@@ -209,7 +209,7 @@
                 onclick={() => settingsStore.setColorScheme('rpi')}
                 class="flex-1 gap-2 {settings.colorScheme === 'rpi' ? 'ring-2 ring-primary ring-offset-background' : 'text-muted-foreground'}"
               >
-                <span class="inline-block h-4 w-4 rounded-full" style="background: oklch(35% .16 264);"></span>
+                <span class="inline-block h-4 w-4 rounded-full" style="background: #203A8F;"></span>
                 RPI
               </Button>
             </div>