schalli/tessera-ctl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Schalli
2026-09-28 22:13:49 +02:00
parent 76f6d87973
commit 0aaa15240d
16 changed files with 333 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/(portal)/page.tsx
+3 -4
View File
@@ -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
apps/web/src/components/dashboard/dashboard-background.test.tsx
+19 -5
View File
@@ -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 () => {
apps/web/src/components/dashboard/dashboard-background.tsx
+100 -17
View File
@@ -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>
apps/web/src/components/layout/header.tsx
+1
View File
@@ -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) {
apps/web/src/lib/auth-actions.ts
+27
View File
@@ -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' }
apps/web/src/lib/dashboard-background.test.ts
+3 -1
View File
@@ -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)', () => {
apps/web/src/lib/dashboard-background.ts
+43 -35
View File
@@ -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;
}
}
apps/web/src/lib/stores/auth-store.ts
+3
View File
@@ -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 {
apps/web/src/messages/de.json
+1 -1
View File
@@ -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",
apps/web/src/messages/en.json
+1 -1
View File
@@ -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",