feat(260928-ujj): Dashboard-Hintergrund pro Benutzer in der Datenbank

- Spalte User.dashboardBackground (JSONB) samt Migration - PATCH /users/me/dashboard-background, geprueft mit parseDashboardBackground aus @tessera/shared (Allowlist, UUID-Bildkennung) - getMe liefert dashboardBackground normalisiert neben accentColor - Web liest die Wahl aus dem Auth-Store, speichert ueber die Server-Aktion, alte localStorage-Wahl wird einmalig uebernommen - Hinweistext: gilt auf jedem Geraet Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-09-28 22:13:49 +02:00
parent 76f6d87973
commit 0aaa15240d
16 changed files with 333 additions and 66 deletions
@@ -0,0 +1,16 @@
+-- quick-260928-ujj: Dashboard-Hintergrund pro Benutzer in der Datenbank.
+--
+-- Bisher lag die Wahl des Dashboard-Hintergrunds (Design "Mosaik") im
+-- localStorage des Browsers und folgte dem Benutzer nicht auf ein anderes
+-- Geraet oder in die Desktop-App. Jetzt steht sie hier, geschrieben nur ueber
+-- PATCH /users/me/dashboard-background und dort wie beim Lesen durch
+-- parseDashboardBackground (@tessera/shared) geprueft und normalisiert.
+-- NULL = nie gewaehlt (das Web uebernimmt dann einmalig eine alte
+-- localStorage-Wahl); sonst ein Objekt { kind: 'none' | 'preset' | 'image', ... }.
+-- Bewusst kein Standardwert und kein Backfill.
+--
+-- Die Anmelde-Funktionen auth_lookup_* liefern eine feste Spaltenliste
+-- (RETURNS TABLE) und bleiben von der neuen Spalte unberuehrt.
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN "dashboardBackground" JSONB;
@@ -46,6 +46,10 @@ model User {
  // quick-260925-bow: zuletzt gesehene freigegebene Version (X.Y.Z) fuer das
  // "Was ist neu"-Fenster; null = Bestandsbenutzer (sieht nur die laufende Version)
  lastSeenReleaseVersion String?
+  // quick-260928-ujj: gewaehlter Dashboard-Hintergrund; null = nie gewaehlt,
+  // sonst das durch parseDashboardBackground (@tessera/shared) normalisierte
+  // Objekt, auch { kind: 'none' } fuer bewusst "kein Hintergrund"
+  dashboardBackground Json?
  passwordResetTokens PasswordResetToken[]
  groupMemberships    GroupMembership[]
  moduleGrants        ModuleGrant[]
@@ -8,6 +8,7 @@ import {
 import { ConfigService } from '@nestjs/config';
 import { JwtService } from '@nestjs/jwt';
 import { Role } from '@prisma/client';
+import { parseDashboardBackground } from '@tessera/shared';
 import * as argon2 from 'argon2';
 import { randomUUID } from 'node:crypto';
 import { Response } from 'express';
@@ -331,6 +332,7 @@ export class AuthService {
        ldapDn: true,
        avatarPath: true,
        accentColor: true,
+        dashboardBackground: true,
      },
    });

@@ -338,10 +340,13 @@ export class AuthService {
      return null;
    }

-    const { passwordHash, ldapDn, avatarPath, ...publicFields } = user;
+    const { passwordHash, ldapDn, avatarPath, dashboardBackground, ...publicFields } = user;

    return {
      ...publicFields,
+      // quick-260928-ujj (T-ujj-01): auch beim Lesen durch die gemeinsame
+      // Pruefregel — NULL oder ein ungueltiger Inhalt ergibt null.
+      dashboardBackground: parseDashboardBackground(dashboardBackground),
      isLocalUser: !!passwordHash && !ldapDn,
      hasAvatar: !!avatarPath,
    };
@@ -20,6 +20,8 @@ import { FileInterceptor } from '@nestjs/platform-express';
 import { Role } from '@prisma/client';
 import {
  compareReleaseVersions,
+  type DashboardBackground,
+  parseDashboardBackground,
  parseReleaseVersion,
  type ReleaseNoticeResponse,
 } from '@tessera/shared';
@@ -62,6 +64,10 @@ function resolveAvatarsDir(): string {
 * Selbstbedienungswege `GET me/release-notice` und `POST me/release-seen`
 * ("Was ist neu"-Fenster), ebenfalls `forTenant()` mit
 * `where: { id: currentUser.id }`.
+ *
+ * quick-260928-ujj: dazu kommt ein gebundener Zugriff des
+ * Selbstbedienungswegs `PATCH me/dashboard-background`, ebenfalls
+ * `forTenant()` mit `where: { id: currentUser.id }`.
 */
@Controller('users')
@UseGuards(RolesGuard)
@@ -483,6 +489,43 @@ export class UserController {
    return { success: true };
  }

+  /**
+   * PATCH /users/me/dashboard-background (quick-260928-ujj)
+   *
+   * Speichert den gewaehlten Dashboard-Hintergrund des angemeldeten
+   * Benutzers. Jeder angemeldete Benutzer, kein `@Roles`.
+   *
+   * T-ujj-01 (Tampering): der Wert wird spaeter als CSS-Hintergrund
+   * gerendert. `parseDashboardBackground` (@tessera/shared) laesst nur
+   * `kind` none/preset/image, bekannte Preset-Kennungen und eine UUID als
+   * Bildkennung zu und baut ein frisches Objekt ohne Zusatzschluessel;
+   * alles andere ergibt 400 ohne Schreibzugriff. Bewusst Inline-Body-Typ
+   * statt DTO-Klasse (wie `me/accent-color`): die globale ValidationPipe mit
+   * `whitelist` wuerde das verschachtelte Objekt sonst nicht pruefen.
+   *
+   * T-ujj-02 (Elevation of Privilege): kein Kennungsparameter; geschrieben
+   * wird ausschliesslich die eigene Zeile (`where: { id: currentUser.id }`)
+   * ueber `forTenant(this.prisma, currentUser.tenantId)`.
+   */
+  @Patch('me/dashboard-background')
+  async updateDashboardBackground(
+    @Body() body: { background: unknown },
+    @CurrentUser() currentUser: AuthUser,
+  ): Promise<{ success: true; dashboardBackground: DashboardBackground }> {
+    const background = parseDashboardBackground(body?.background);
+    if (background === null) {
+      throw new BadRequestException('Invalid dashboard background.');
+    }
+
+    const tenantPrisma = forTenant(this.prisma, currentUser.tenantId);
+    await tenantPrisma.user.update({
+      where: { id: currentUser.id },
+      data: { dashboardBackground: background },
+    });
+
+    return { success: true, dashboardBackground: background };
+  }
+
  /**
   * GET /users/me/avatar
   * Stream the current user's avatar image.
@@ -6,7 +6,6 @@ import { DashboardGrid } from '@/components/dashboard/dashboard-grid';
 import { DashboardTabs } from '@/components/dashboard/dashboard-tabs';
 import { EditModeToggle } from '@/components/dashboard/edit-mode-toggle';
 import { BackgroundPicker, DashboardBackdrop, useDashboardBackground } from '@/components/dashboard/dashboard-background';
-import { useAuthStore } from '@/lib/stores/auth-store';
 import { WidgetCatalogModal } from '@/components/dashboard/widget-catalog-modal';
 import { registerWidget } from '@/components/dashboard/widget-registry';
 import { ClockWidget } from '@/components/dashboard/widgets/clock-widget';
@@ -50,9 +49,9 @@ export default function DashboardPage() {
  // Seitlicher Versatz der zentrierten Kacheln — die Zeile mit Begruessung
  // und Befehlsleiste rueckt mit, damit sie buendig ueber den Kacheln steht.
  const [gridInset, setGridInset] = useState(0);
-  // Hintergrund je Benutzer (Design „Mosaik“, Prototyp mit localStorage).
-  const userId = useAuthStore((s) => s.user?.id);
-  const { background, choose: chooseBackground } = useDashboardBackground(userId);
+  // Hintergrund je Benutzer (Design „Mosaik“), seit quick-260928-ujj in der
+  // Datenbank gespeichert und mit der Sitzung geladen.
+  const { background, choose: chooseBackground } = useDashboardBackground();
  const hasBackground = background.kind !== 'none';
  // quick-260922-m1h: Slugs der Module, die dieser Benutzer nutzen darf —
  // der Katalog blendet Kacheln gesperrter Module damit aus. `null` heisst
@@ -52,7 +52,9 @@ describe('useDashboardBackground (quick-260928-ujj)', () => {
  });

  it('liest die Wahl aus dem Auth-Store; null ergibt „kein Hintergrund“', async () => {
-    useAuthStore.setState({ user: makeUser({ dashboardBackground: { kind: 'preset', id: 'dunes' } }) });
+    useAuthStore.setState({
+      user: makeUser({ dashboardBackground: { kind: 'preset', id: 'dunes' } }),
+    });
    const { result } = await renderBackgroundHook();
    expect(result.current.background).toEqual({ kind: 'preset', id: 'dunes' });

@@ -68,17 +70,26 @@ describe('useDashboardBackground (quick-260928-ujj)', () => {
      result.current.choose({ kind: 'preset', id: 'mosaic' });
    });

-    expect(useAuthStore.getState().user?.dashboardBackground).toEqual({ kind: 'preset', id: 'mosaic' });
+    expect(useAuthStore.getState().user?.dashboardBackground).toEqual({
+      kind: 'preset',
+      id: 'mosaic',
+    });
    expect(result.current.background).toEqual({ kind: 'preset', id: 'mosaic' });
    expect(updateDashboardBackgroundAction).toHaveBeenCalledWith({ kind: 'preset', id: 'mosaic' });
  });

  it.each([
-    ['Fehlerantwort', () => updateDashboardBackgroundAction.mockResolvedValue({ success: false, error: 'saveError' })],
+    [
+      'Fehlerantwort',
+      () =>
+        updateDashboardBackgroundAction.mockResolvedValue({ success: false, error: 'saveError' }),
+    ],
    ['Ausnahme', () => updateDashboardBackgroundAction.mockRejectedValue(new Error('offline'))],
  ])('Speichern schlaegt fehl (%s): der vorige Wert wird zurueckgesetzt', async (_label, arrange) => {
    arrange();
-    useAuthStore.setState({ user: makeUser({ dashboardBackground: { kind: 'preset', id: 'dunes' } }) });
+    useAuthStore.setState({
+      user: makeUser({ dashboardBackground: { kind: 'preset', id: 'dunes' } }),
+    });
    const { result } = await renderBackgroundHook();

    act(() => {
@@ -86,7 +97,10 @@ describe('useDashboardBackground (quick-260928-ujj)', () => {
    });

    await waitFor(() => expect(result.current.background).toEqual({ kind: 'preset', id: 'dunes' }));
-    expect(useAuthStore.getState().user?.dashboardBackground).toEqual({ kind: 'preset', id: 'dunes' });
+    expect(useAuthStore.getState().user?.dashboardBackground).toEqual({
+      kind: 'preset',
+      id: 'dunes',
+    });
  });

  it('Server-Wert null und alte localStorage-Wahl: wird genau einmal gespeichert, Schluessel entfernt', async () => {
@@ -3,13 +3,13 @@
 import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 import { type CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
+import { updateDashboardBackgroundAction } from '@/lib/auth-actions';
 import {
  BACKGROUND_PRESETS,
  type DashboardBackground,
-  loadDashboardBackground,
  NO_BACKGROUND,
  presetBackground,
-  saveDashboardBackground,
+  takeLegacyDashboardBackground,
 } from '@/lib/dashboard-background';
 import {
  type DashboardImageMeta,
@@ -17,23 +17,61 @@ import {
  fetchDashboardImages,
  uploadDashboardImage,
 } from '@/lib/dashboard-images-api';
+import { useAuthStore } from '@/lib/stores/auth-store';

-/** Wahl des Hintergrunds fuer den angemeldeten Benutzer (localStorage, Prototyp). */
-export function useDashboardBackground(userId: string | null | undefined) {
-  const [background, setBackground] = useState<DashboardBackground>(NO_BACKGROUND);
+/** Schreibt die Wahl in den Auth-Store, sofern noch derselbe Benutzer angemeldet ist. */
+function setStoredBackground(userId: string, value: DashboardBackground | null) {
+  const current = useAuthStore.getState().user;
+  if (!current || current.id !== userId) return;
+  useAuthStore.getState().setUser({ ...current, dashboardBackground: value });
+}

-  useEffect(() => {
-    if (userId) setBackground(loadDashboardBackground(userId));
-  }, [userId]);
+/**
+ * Wahl des Hintergrunds fuer den angemeldeten Benutzer (quick-260928-ujj).
+ *
+ * Gelesen aus dem Auth-Store (Sitzungsantwort, `null` = nie gewaehlt =
+ * kein Hintergrund). `choose()` setzt den Store sofort und speichert ueber
+ * die Server-Aktion; schlaegt das fehl, kommt der vorige Wert zurueck.
+ * Ist der Server-Wert `null` und liegt noch eine alte localStorage-Wahl vor,
+ * wird sie genau einmal je Benutzerkennung uebernommen.
+ */
+export function useDashboardBackground() {
+  const user = useAuthStore((s) => s.user);
+  const userId = user?.id ?? null;
+  const stored = user?.dashboardBackground ?? null;
+  const background = stored ?? NO_BACKGROUND;
+  const migratedFor = useRef<string | null>(null);
+
+  const save = useCallback(
+    (id: string, value: DashboardBackground, previous: DashboardBackground | null) => {
+      setStoredBackground(id, value);
+      const revert = () => setStoredBackground(id, previous);
+      updateDashboardBackgroundAction(value)
+        .then((result) => {
+          if (!result.success) revert();
+        })
+        .catch(revert);
+    },
+    [],
+  );

  const choose = useCallback(
    (value: DashboardBackground) => {
-      setBackground(value);
-      if (userId) saveDashboardBackground(userId, value);
+      if (!userId) return;
+      save(userId, value, stored);
    },
-    [userId],
+    [userId, stored, save],
  );

+  useEffect(() => {
+    if (!userId || migratedFor.current === userId) return;
+    migratedFor.current = userId;
+    // Auch bei gesetztem Server-Wert auslesen: der alte Schluessel wird so
+    // aufgeraeumt, uebernommen wird aber nur, wenn noch nie gewaehlt wurde.
+    const legacy = takeLegacyDashboardBackground(userId);
+    if (legacy && stored === null) save(userId, legacy, null);
+  }, [userId, stored, save]);
+
  return { background, choose };
 }

@@ -164,13 +202,17 @@ export function BackgroundPicker({ value, onChange }: BackgroundPickerProps) {
        >
          <span
            className={`flex h-12 items-center justify-center overflow-hidden rounded-md border text-muted-foreground transition-shadow group-focus-visible:ring-2 group-focus-visible:ring-ring ${
-              selected ? 'border-transparent ring-2 ring-foreground' : 'border-border group-hover:border-input-strong'
+              selected
+                ? 'border-transparent ring-2 ring-foreground'
+                : 'border-border group-hover:border-input-strong'
            }`}
            style={preview}
          >
            {content}
          </span>
-          <span className={`truncate text-xs ${selected ? 'font-semibold text-foreground' : 'text-muted-foreground'}`}>
+          <span
+            className={`truncate text-xs ${selected ? 'font-semibold text-foreground' : 'text-muted-foreground'}`}
+          >
            {label}
          </span>
        </button>
@@ -187,7 +229,18 @@ export function BackgroundPicker({ value, onChange }: BackgroundPickerProps) {
        aria-haspopup="dialog"
        className="btn btn-subtle"
      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <svg
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
          <rect x="3" y="3" width="18" height="18" rx="2" />
          <circle cx="9" cy="9" r="2" />
          <path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" />
@@ -206,8 +259,25 @@ export function BackgroundPicker({ value, onChange }: BackgroundPickerProps) {

          <h3 className="mt-4 text-xs font-semibold text-muted-foreground">{t('builtIn')}</h3>
          <ul className="mt-2 grid grid-cols-3 gap-3">
-            {option('none', t('none'), NO_BACKGROUND, { backgroundColor: 'var(--background)' },
-              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><circle cx="12" cy="12" r="8" /><path d="m6.5 17.5 11-11" /></svg>,
+            {option(
+              'none',
+              t('none'),
+              NO_BACKGROUND,
+              { backgroundColor: 'var(--background)' },
+              <svg
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.75"
+                strokeLinecap="round"
+              >
+                <circle cx="12" cy="12" r="8" />
+                <path d="m6.5 17.5 11-11" />
+              </svg>,
            )}
            {BACKGROUND_PRESETS.filter((preset) => !dark || preset.dark !== null).map((preset) => {
              const css = (dark ? preset.dark : preset.light) ?? preset.light;
@@ -247,7 +317,20 @@ export function BackgroundPicker({ value, onChange }: BackgroundPickerProps) {
                  {uploading ? (
                    <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                  ) : (
-                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14" /><path d="M5 12h14" /></svg>
+                    <svg
+                      aria-hidden="true"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    >
+                      <path d="M12 5v14" />
+                      <path d="M5 12h14" />
+                    </svg>
                  )}
                </span>
                <span className="truncate text-xs text-muted-foreground">{t('upload')}</span>
@@ -53,6 +53,7 @@ export function Header() {
          tenantId: u.tenantId,
          hasAvatar: u.hasAvatar,
          accentColor: u.accentColor,
+          dashboardBackground: u.dashboardBackground ?? null,
        });
      } else if (state.status === 'unauthenticated') {
        if (redirectedRef.current) {
@@ -1,5 +1,6 @@
 'use server';

+import type { DashboardBackground } from '@tessera/shared';
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';

@@ -15,6 +16,8 @@ export interface AuthUser {
  isLocalUser?: boolean;
  hasAvatar?: boolean;
  accentColor?: string | null;
+  /** quick-260928-ujj: null = nie gewaehlt. */
+  dashboardBackground?: DashboardBackground | null;
 }

 export interface LoginResult {
@@ -236,6 +239,30 @@ export async function updateAccentColorAction(
  }
 }

+/**
+ * Speichert den Dashboard-Hintergrund des angemeldeten Benutzers
+ * (quick-260928-ujj). Die API prueft die Wahl (parseDashboardBackground)
+ * und antwortet bei ungueltigem Wert mit 400.
+ */
+export async function updateDashboardBackgroundAction(
+  background: DashboardBackground,
+): Promise<{ success: boolean; error?: string }> {
+  const cookieStore = await cookies();
+  const session = cookieStore.get('session')?.value;
+  if (!session) return { success: false, error: 'notAuthenticated' };
+  try {
+    const response = await fetch(`${API_URL}/users/me/dashboard-background`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json', Cookie: `session=${session}` },
+      body: JSON.stringify({ background }),
+    });
+    if (!response.ok) return { success: false, error: 'saveError' };
+    return { success: true };
+  } catch {
+    return { success: false, error: 'networkError' };
+  }
+}
+
 export type SessionState =
  | { status: 'authenticated'; user: AuthUser }
  | { status: 'unauthenticated' }
@@ -66,7 +66,9 @@ describe('dashboard-background (Design „Mosaik“)', () => {
  });

  it('die eingebauten Hintergruende sind deckungsgleich mit der Pruefregel in @tessera/shared', () => {
-    expect(BACKGROUND_PRESETS.map((p) => p.id).sort()).toEqual([...DASHBOARD_BACKGROUND_PRESET_IDS].sort());
+    expect(BACKGROUND_PRESETS.map((p) => p.id).sort()).toEqual(
+      [...DASHBOARD_BACKGROUND_PRESET_IDS].sort(),
+    );
  });

  it('jeder eingebaute Hintergrund liefert hell und dunkel ein Bild (dunkel notfalls den Ersatz)', () => {
@@ -1,20 +1,28 @@
 /**
- * Dashboard-Hintergrund (Prototyp, Design „Mosaik“).
+ * Dashboard-Hintergrund (Design „Mosaik“).
 *
 * Wahl je Benutzer: kein Hintergrund, ein eingebauter (ruhige Flaechen und
 * drei abstrakte Motive in Gelb, Grau und Graphit — keine Regenbogen-
 * verlaeufe) oder ein eigenes Bild aus den Bilderrahmen-Bildern
- * (`/dashboard/images`, keine API-Aenderung). Gespeichert wird vorerst im
- * localStorage des Browsers, Schluessel je Benutzerkennung; ein Datenbankfeld
- * kann folgen, wenn die Funktion bleibt.
+ * (`/dashboard/images`).
+ *
+ * Gespeichert wird seit quick-260928-ujj in der Datenbank
+ * (`User.dashboardBackground`, `PATCH /users/me/dashboard-background`) und
+ * mit der Sitzungsantwort gelesen — die Wahl folgt dem Benutzer auf jedes
+ * Geraet. Typ, Preset-Kennungen und Pruefregel kommen aus `@tessera/shared`
+ * (EINE Regel fuer API und Web). Der fruehere localStorage-Schluessel wird
+ * nur noch einmalig ausgelesen und entfernt ({@link takeLegacyDashboardBackground}).
 */

-export type BackgroundPresetId = 'mist' | 'pebble' | 'bloom' | 'dunes' | 'mosaic';
+import {
+  type DashboardBackground,
+  type DashboardBackgroundPresetId,
+  parseDashboardBackground,
+} from '@tessera/shared';

-export type DashboardBackground =
-  | { kind: 'none' }
-  | { kind: 'preset'; id: BackgroundPresetId }
-  | { kind: 'image'; imageId: string };
+export type { DashboardBackground };
+
+export type BackgroundPresetId = DashboardBackgroundPresetId;

 export const NO_BACKGROUND: DashboardBackground = { kind: 'none' };

@@ -22,7 +30,8 @@ function svgUrl(svg: string): string {
  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }

-const VIEW = 'xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice"';
+const VIEW =
+  'xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice"';

 function bloom(base: string, a: string, b: string, c: string): string {
  return svgUrl(
@@ -121,35 +130,34 @@ export function presetBackground(id: BackgroundPresetId, dark: boolean): string
  return BACKGROUND_PRESETS.find((p) => p.id === DARK_FALLBACK_ID)?.dark ?? null;
 }

-function storageKey(userId: string): string {
+/** Schluessel der frueheren localStorage-Speicherung (Prototyp, vor quick-260928-ujj). */
+function legacyStorageKey(userId: string): string {
  return `tessera.dashboardBackground.${userId}`;
 }

-function isValid(value: unknown): value is DashboardBackground {
-  if (typeof value !== 'object' || value === null) return false;
-  const v = value as Record<string, unknown>;
-  if (v.kind === 'none') return true;
-  if (v.kind === 'preset') return BACKGROUND_PRESETS.some((p) => p.id === v.id);
-  if (v.kind === 'image') return typeof v.imageId === 'string' && v.imageId !== '';
-  return false;
-}
-
-/** Liest die Wahl; jeder Fehler (privates Fenster, kaputter Wert) ergibt „kein Hintergrund“. */
-export function loadDashboardBackground(userId: string): DashboardBackground {
+/**
+ * Liest eine im Browser gemerkte Wahl aus der Zeit vor der Datenbank-
+ * speicherung und entfernt den Schluessel — gueltig oder nicht, damit die
+ * Uebernahme genau einmal passiert. Geprueft mit derselben Regel wie die API
+ * (`parseDashboardBackground`); kaputte Werte, unbekannte Kennungen und ein
+ * gesperrter Speicher (privates Fenster) ergeben `null`, nie eine Ausnahme.
+ */
+export function takeLegacyDashboardBackground(userId: string): DashboardBackground | null {
+  let raw: string | null = null;
  try {
-    const raw = window.localStorage.getItem(storageKey(userId));
-    if (!raw) return NO_BACKGROUND;
-    const parsed: unknown = JSON.parse(raw);
-    return isValid(parsed) ? parsed : NO_BACKGROUND;
+    raw = window.localStorage.getItem(legacyStorageKey(userId));
  } catch {
-    return NO_BACKGROUND;
-  }
-}
-
-export function saveDashboardBackground(userId: string, value: DashboardBackground): void {
-  try {
-    window.localStorage.setItem(storageKey(userId), JSON.stringify(value));
-  } catch {
-    // Speicher gesperrt — die Wahl gilt dann nur fuer diese Sitzung.
+    return null;
+  }
+  if (raw === null) return null;
+  try {
+    window.localStorage.removeItem(legacyStorageKey(userId));
+  } catch {
+    // Entfernen gesperrt — die Wahl wird trotzdem hoechstens einmal je Sitzung uebernommen.
+  }
+  try {
+    return parseDashboardBackground(JSON.parse(raw));
+  } catch {
+    return null;
  }
 }
@@ -1,3 +1,4 @@
+import type { DashboardBackground } from '@tessera/shared';
 import { create } from 'zustand';
 import { readableOnAccent } from '@/lib/color';

@@ -9,6 +10,8 @@ export interface AuthUser {
  tenantId: string;
  hasAvatar?: boolean;
  accentColor?: string | null;
+  /** quick-260928-ujj: Dashboard-Hintergrund aus der Sitzungsantwort; null = nie gewaehlt. */
+  dashboardBackground?: DashboardBackground | null;
 }

 interface AuthState {
@@ -127,7 +127,7 @@
    "background": {
      "button": "Hintergrund",
      "title": "Hintergrund des Dashboards",
-      "hint": "Gilt nur für Sie und nur in diesem Browser.",
+      "hint": "Gilt nur für Sie – auf jedem Gerät, auf dem Sie sich anmelden.",
      "builtIn": "Eingebaut",
      "none": "Keiner",
      "ownImages": "Eigene Bilder",
@@ -127,7 +127,7 @@
    "background": {
      "button": "Background",
      "title": "Dashboard background",
-      "hint": "Applies only to you and only in this browser.",
+      "hint": "Applies only to you – on every device you sign in on.",
      "builtIn": "Built-in",
      "none": "None",
      "ownImages": "Your images",