From cb45d2663ac65954463e8c5a6bf859f73a555e86 Mon Sep 17 00:00:00 2001 From: Schalli Date: Mon, 28 Sep 2026 22:18:51 +0200 Subject: [PATCH] docs(260928-ujj): CHANGELOG und Anleitungen fuer Design Mosaik - Unveroeffentlicht: Hintergrundwahl (Neu), neues Aussehen (Geaendert), Resize-Fehler (Behoben) - Anwender-Anleitung: App-Leiste, Seitenleiste, Anmeldeseite, Befehlsleiste, Hintergrund, Kalender - Entwickler-Anleitung: User.dashboardBackground, PATCH /users/me/dashboard-background, parseDashboardBackground Co-Authored-By: Claude Opus 5.5 (1M context) --- CHANGELOG.md | 13 +++++++++++++ docs/anleitung-anwender.md | 22 ++++++++++++---------- docs/anleitung-entwicklung.md | 20 ++++++++++++++++++++ 3 files changed, 45 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c704d91..028a92d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,19 @@ Diese Liste beschreibt in einfachen Worten, was sich von Version zu Version an T ### Neu - Nach einem Versionswechsel zeigt Tessera bei Ihrer ersten Anmeldung ein Fenster mit den wichtigsten Änderungen der neuen Version – neue Funktionen, Verbesserungen und behobene Fehler. Haben Sie mehrere Versionen verpasst, erscheinen die drei neuesten. „Verstanden“ schließt das Fenster; es erscheint erst mit der nächsten Version wieder, im Browser wie in der Desktop-App. Die vollständige Liste finden Sie weiterhin unter „Was ist neu“. +- Dashboard: Sie können jetzt einen Hintergrund wählen. Im Bearbeitungsmodus öffnet der Knopf „Hintergrund“ eine Auswahl – keiner, ruhige Flächen und Motive in Gelb, Grau und Graphit, oder ein eigenes Bild aus Ihren Bilderrahmen-Bildern bzw. ein neu hochgeladenes. Der Hintergrund gilt nur für Sie und folgt Ihnen auf jedes Gerät, auf dem Sie sich anmelden, auch in die Desktop-App. Eine bisher nur in Ihrem Browser gemerkte Wahl wird dabei automatisch übernommen. + +### Geändert + +- Neues Aussehen: Tessera hat eine dunkle App-Leiste oben und eine neu gestaltete Seitenleiste. Jedes Modul erscheint dort mit einer eigenen kleinen Kachel, die Kategorien tragen deutsche Namen und sind anfangs aufgeklappt, und unten in der Seitenleiste begrüßt Sie Tessera mit Ihrem Namen und dem heutigen Datum. Die persönliche Akzentfarbe hebt nur noch das Modul hervor, in dem Sie gerade arbeiten. Auch die übrigen Seiten – Marktplatz, Module, Einstellungen und Verwaltung – folgen diesem ruhigeren Stil. +- Neue Anmeldeseite: Auf großen Bildschirmen ist sie geteilt, links ein dunkler Bereich mit dem Tessera-Zeichen und einem Farbmosaik, rechts das Anmeldeformular. +- Dashboard: Die Kacheln stehen mittig auf der Seite. Jedes Widget trägt oben ein gelbes Symbol-Feld, hebt sich beim Darüberfahren leicht an und blendet beim Laden sanft ein. Die Knöpfe „Bearbeiten“, „Widget hinzufügen“ und „Hintergrund“ sitzen jetzt als Leiste oben rechts über den Kacheln statt unten rechts. Kalender, Favoriten und Notizen sind ruhiger gestaltet, und ein leeres Dashboard schlägt Ihnen passende erste Kacheln vor. +- Kalender-Widget: Die nächsten Termine stehen jetzt in einer kompakten, einzeiligen Liste, in der „Heute“ und „Morgen“ statt des Datums erscheinen – so passen auch in eine kleine Kachel mehrere Termine. Den Ort eines Termins sehen Sie, wenn Sie mit der Maus darüberfahren. +- Auf dem Handy öffnet sich die Seitenleiste als Schublade über der ganzen Seite, samt App-Leiste. + +### Behoben + +- Dashboard: Widgets ließen sich manchmal nicht schmaler ziehen, wenn die Maus dabei leicht nach oben oder unten wackelte. Jetzt klappt das zuverlässig. ## 1.4.0 – 2026-09-25 diff --git a/docs/anleitung-anwender.md b/docs/anleitung-anwender.md index 6e7b05d..5a32b5d 100644 --- a/docs/anleitung-anwender.md +++ b/docs/anleitung-anwender.md @@ -29,7 +29,7 @@ Tessera ist das zentrale Portal, in dem alle Arbeitswerkzeuge Ihres Unternehmens ## Anmeldung -Rufen Sie die Anmeldeseite auf. Auf der linken Seite sehen Sie das Tessera-Logo, rechts das Anmeldeformular mit den Feldern **Benutzername** und **Passwort**. +Rufen Sie die Anmeldeseite auf. Auf einem großen Bildschirm ist sie geteilt: links ein dunkler Bereich mit dem Tessera-Zeichen, dem Satz „Ihre Werkzeuge an einem Ort." und einem Farbmosaik, rechts das Anmeldeformular mit den Feldern **Benutzername** und **Passwort**. Auf kleineren Bildschirmen steht das Tessera-Zeichen über dem Formular. **Wichtig:** Melden Sie sich immer mit Ihrem **Benutzernamen** an — nicht mit Ihrer E-Mail-Adresse. Das Anmeldefeld heißt zwar oft wie eine E-Mail-Eingabe aus, akzeptiert aber ausschließlich den Benutzernamen. Wird stattdessen eine E-Mail-Adresse eingegeben, meldet das System schlicht „Benutzername oder Passwort ungültig" — es sieht dann so aus, als sei die Anmeldung grundsätzlich kaputt, obwohl nur das falsche Feld befüllt wurde. Fragen Sie im Zweifel Ihren Administrator nach Ihrem Benutzernamen. @@ -41,8 +41,8 @@ Falls Ihr Administrator beim Anlegen Ihres Kontos eine Passwort-Änderung erzwun Die Portal-Oberfläche gliedert sich in drei feste Bereiche: -**Kopfleiste (oben)** -Links steht das Tessera-Logo, in der Mitte der aktuelle Seitentitel. Rechts finden Sie drei Bedienelemente: +**App-Leiste (oben)** +Die schmale dunkle Leiste am oberen Rand. Links steht das Tessera-Logo, in der Mitte der aktuelle Seitentitel — auf dem Dashboard stattdessen die Reiter Ihrer Dashboards. Rechts finden Sie drei Bedienelemente: - Einen Knopf **Fehler melden** (Käfer-Symbol) — siehe [Einen Fehler melden](#einen-fehler-melden). - Einen Schalter zum Umschalten zwischen hellem und dunklem Erscheinungsbild (siehe [Persönliche Einstellungen](#persönliche-einstellungen)). - Ihr Benutzersymbol (Avatar oder Ihr Anfangsbuchstabe). Ein Klick öffnet das **Benutzermenü** mit: @@ -52,26 +52,28 @@ Links steht das Tessera-Logo, in der Mitte der aktuelle Seitentitel. Rechts find - **Abmelden**. **Seitenleiste (links)** -Ganz oben stehen zwei feste Einträge: **Dashboard** (Ihre Startseite) und **Marktplatz**. Darunter folgt ein Suchfeld „Module suchen…", mit dem Sie die Modulliste filtern können, und darunter die Liste der für Sie freigegebenen Module, gruppiert nach **Kategorien**. Ein Klick auf eine Kategorie klappt sie auf und zeigt die einzelnen Module darin. Sind für Sie noch keine Module aktiv, steht dort „Keine Module". +Ganz oben stehen zwei feste Einträge: **Dashboard** (Ihre Startseite) und **Marktplatz**. Darunter folgt ein Suchfeld „Module suchen…", mit dem Sie die Modulliste filtern können, und darunter die Liste der für Sie freigegebenen Module, gruppiert nach **Kategorien** mit deutschen Namen. Jedes Modul trägt eine eigene kleine Kachel mit Symbol. Die Kategorien sind anfangs aufgeklappt; ein Klick auf eine Kategorie klappt sie zu und wieder auf, Tessera merkt sich Ihre Wahl. Das Modul, in dem Sie gerade arbeiten, ist in Ihrer persönlichen Akzentfarbe hervorgehoben. Sind für Sie noch keine Module aktiv, steht dort „Keine Module". -Unten in der Seitenleiste finden Sie die Sprachumschaltung (Deutsch/English) sowie Ihren Namen mit Rolle. Über den Pfeil-Button am unteren Rand können Sie die Seitenleiste ein- und wieder ausklappen — im eingeklappten Zustand bleiben nur die Symbole sichtbar, das spart Platz auf kleineren Bildschirmen. Ganz unten steht die Versionsnummer von Tessera; ein Klick darauf öffnet die Seite [Was ist neu](#was-ist-neu). +Unten in der Seitenleiste begrüßt Tessera Sie je nach Tageszeit mit Ihrem Namen und nennt das heutige Datum. Darunter können Sie die Seitenleiste über **Einklappen** schmal machen — im eingeklappten Zustand bleiben nur die Modul-Kacheln sichtbar (der Name erscheint, wenn Sie mit der Maus darüberfahren), das spart Platz auf kleineren Bildschirmen. Ganz unten steht die Versionsnummer von Tessera; ein Klick darauf öffnet die Seite [Was ist neu](#was-ist-neu). Auf dem Handy öffnen Sie die Seitenleiste über das Menü-Symbol links in der App-Leiste; sie legt sich dann als Schublade über die ganze Seite. ## Dashboard -Das Dashboard ist Ihre persönliche Startseite und öffnet sich automatisch nach der Anmeldung. Es zeigt ein Raster aus Kacheln — den **Widgets**. Ist noch kein Widget platziert, sehen Sie nur das Tessera-Symbol mit dem Hinweis „Keine Widgets aktiv". +Das Dashboard ist Ihre persönliche Startseite und öffnet sich automatisch nach der Anmeldung. Es zeigt ein Raster aus Kacheln — den **Widgets** —, das mittig auf der Seite steht. Jedes Widget trägt oben ein gelbes Symbol-Feld, hebt sich leicht an, wenn Sie mit der Maus darüberfahren, und blendet beim Laden sanft ein. Ist noch kein Widget platziert, sehen Sie den Hinweis „Ihr Dashboard ist noch leer" mit einigen Vorschlägen für erste Kacheln. -**Mehrere Dashboards (Reiter):** Über dem Raster steht eine Reiterleiste — Sie können mehrere Dashboards anlegen, die dort nebeneinander stehen. Jeder Reiter trägt seine eigenen Kacheln und seine eigene Anordnung; was auf dem einen Reiter liegt, erscheint nicht auf dem anderen. Ein Klick auf einen Reiter wechselt dorthin. Beim Öffnen wird immer der ERSTE Reiter geladen — Sie legen ihn fest, indem Sie einen Reiter mit der Maus ganz nach vorn ziehen (das geht jederzeit, auch ohne den Bearbeitungsmodus). Im Bearbeitungsmodus können Sie außerdem: +**Mehrere Dashboards (Reiter):** Die Reiter stehen in der Mitte der App-Leiste — Sie können mehrere Dashboards anlegen, die dort nebeneinander stehen. Jeder Reiter trägt seine eigenen Kacheln und seine eigene Anordnung; was auf dem einen Reiter liegt, erscheint nicht auf dem anderen. Ein Klick auf einen Reiter wechselt dorthin. Beim Öffnen wird immer der ERSTE Reiter geladen — Sie legen ihn fest, indem Sie einen Reiter mit der Maus ganz nach vorn ziehen (das geht jederzeit, auch ohne den Bearbeitungsmodus). Im Bearbeitungsmodus können Sie außerdem: - Über den Knopf am Ende der Leiste einen neuen, leeren Reiter anlegen — er heißt automatisch „Dashboard 2", „Dashboard 3" und so weiter. - Den Namen des gerade aktiven Reiters ändern: Klicken Sie auf den Stift daneben, geben Sie den neuen Namen ein und bestätigen Sie mit der Eingabetaste (Escape verwirft die Änderung). - Einen Reiter löschen: Klicken Sie auf das Kreuz daneben und bestätigen Sie die Rückfrage — seine Kacheln und seine Anordnung werden dabei mit gelöscht. Der letzte verbleibende Reiter lässt sich nicht löschen, der Knopf dafür erscheint dort gar nicht erst. -**Widgets hinzufügen und anordnen:** Unten rechts auf dem Dashboard schwebt der Stift-Schalter **„Dashboard bearbeiten"**; im Bearbeitungsmodus wird daraus ein Häkchen **„Änderungen speichern"**, und daneben erscheint **„Widget hinzufügen"**. Sobald der Bearbeitungsmodus aktiv ist: +**Widgets hinzufügen und anordnen:** Oben rechts über den Kacheln steht eine kleine Leiste mit dem Knopf **„Bearbeiten"**; im Bearbeitungsmodus wird daraus **„Fertig"**, und daneben erscheinen **„Widget hinzufügen"** und **„Hintergrund"**. Sobald der Bearbeitungsmodus aktiv ist: - Erscheint der Button **„Widget hinzufügen"**, der eine Auswahl aller verfügbaren Widget-Typen als Kachel-Katalog öffnet. Ein Klick auf einen Eintrag fügt das Widget sofort dem Dashboard hinzu. - Können Sie bestehende Widgets per Ziehen an eine neue Position verschieben. Fassen Sie die Kachel dazu an einer beliebigen Stelle an — Eingabefelder, Knöpfe und Links ausgenommen; ein grauer Griff am oberen Kachelrand zeigt, dass die Kachel beweglich ist. Abgelegt wird nur dort, wo Platz ist: über einer anderen Kachel springt sie an ihren Ausgangspunkt zurück. - Können Sie Widgets an der Ecke in der Größe ziehen (jeder Widget-Typ hat eine Mindestgröße, bei der er gerade noch bedienbar bleibt — kleiner geht es nicht, größer jederzeit). Position und Größe rasten dabei in feinen Schritten ein, sodass sich auch kleine Anpassungen vornehmen lassen. - Erscheint an jedem Widget rechts im Griff ein Symbol zum Entfernen. -Ihre Änderungen werden über **„Änderungen speichern"** übernommen. Verlassen Sie den Bearbeitungsmodus, ist das Dashboard wieder fest — Verschieben und Größenänderung sind dann gesperrt, damit Sie es im normalen Gebrauch nicht versehentlich verstellen. +Ihre Änderungen werden über **„Fertig"** übernommen. Verlassen Sie den Bearbeitungsmodus, ist das Dashboard wieder fest — Verschieben und Größenänderung sind dann gesperrt, damit Sie es im normalen Gebrauch nicht versehentlich verstellen. + +**Hintergrund:** Im Bearbeitungsmodus öffnet der Knopf **„Hintergrund"** ein kleines Fenster mit Vorschaubildern. Wählen Sie **Keiner**, eine der eingebauten ruhigen Flächen und Motive (Nebel, Kiesel, Blüte, Dünen, Mosaik) oder eines Ihrer eigenen Bilder — dazu zählen die Bilder, die Sie für den Bilderrahmen hochgeladen haben; über **„Bild hochladen"** fügen Sie direkt ein neues hinzu. Ihre Wahl gilt sofort und nur für Sie. Tessera speichert sie mit Ihrem Konto, sodass derselbe Hintergrund auf jedem Gerät erscheint, auf dem Sie sich anmelden, auch in der Desktop-App. Eine Wahl, die Sie vor dieser Änderung nur in einem Browser getroffen hatten, übernimmt Tessera beim nächsten Öffnen des Dashboards automatisch. Im dunklen Erscheinungsbild werden eigene Bilder etwas abgedunkelt, damit die Schrift auf den Kacheln lesbar bleibt, und statt „Blüte" erscheint dort „Nebel". **Verfügbare Widgets:** @@ -79,7 +81,7 @@ Ihre Änderungen werden über **„Änderungen speichern"** übernommen. Verlass |---|---| | Uhr | Zeigt die aktuelle Uhrzeit an (optional mit Datum). Die Uhrzeit wächst und schrumpft mit der Kachel; wer eine feste Größe möchte, stellt sie unter Einstellungen > Dashboard als Schriftgröße in Punkt ein | | Suchleiste | Schnellsuche im Web über frei konfigurierbare Suchanbieter | -| Kalender | Monatsübersicht mit der Anzahl der Termine je Tag (die Termine eines Tages erscheinen, wenn Sie mit der Maus darüberfahren) und darunter die nächsten Termine aus Ihren verbundenen Kalenderquellen. Ob die Monatsansicht erscheint, wie viele Termine und welcher Zeitraum gezeigt werden, stellen Sie unter Einstellungen > Dashboard > Widgets ein | +| Kalender | Monatsübersicht mit der Anzahl der Termine je Tag (die Termine eines Tages erscheinen, wenn Sie mit der Maus darüberfahren) und darunter die nächsten Termine aus Ihren verbundenen Kalenderquellen als kompakte, einzeilige Liste — bei Terminen von heute und morgen steht „Heute" bzw. „Morgen" statt des Datums, den Ort sehen Sie, wenn Sie mit der Maus über einen Termin fahren. Ob die Monatsansicht erscheint, wie viele Termine und welcher Zeitraum gezeigt werden, stellen Sie unter Einstellungen > Dashboard > Widgets ein | | Notizen | Freitext-Notizen mit Markdown-Formatierung; Listen zum Abhaken (`- [ ]`) lassen sich in der Ansicht direkt per Klick abhaken | | Taschenrechner | Grundrechenarten, auch per Tastatur bedienbar | | Favoriten | Schnellzugriff auf mehrere selbst gepflegte Links, als Liste oder Kachelansicht, optional mit eigener Überschrift. Im Bearbeitungsmodus des Dashboards bringen Sie die Links mit den Pfeilen „Nach oben"/„Nach unten" in die gewünschte Reihenfolge. Das Symbol einer Seite holt Tessera automatisch; bei internen Adressen versucht es zusätzlich Ihr Browser direkt. Im Bearbeitungsformular tragen Sie stattdessen eine eigene Logo-Adresse ein oder laden ein eigenes Symbol hoch (PNG, JPEG, GIF, WebP, ICO oder SVG, höchstens 512 KB) — ein hochgeladenes Symbol hat Vorrang und lässt sich über „Hochgeladenes Symbol entfernen“ wieder zurücknehmen; blockiert eine Seite automatische Abrufe (z. B. durch eine Cloudflare-Prüfung), meldet Tessera das beim Speichern | diff --git a/docs/anleitung-entwicklung.md b/docs/anleitung-entwicklung.md index c544484..b3cd01a 100644 --- a/docs/anleitung-entwicklung.md +++ b/docs/anleitung-entwicklung.md @@ -677,6 +677,26 @@ Fenster aus; Punkte unter „Unveröffentlicht“ erscheinen darin nie. Lokal st setzen. Fehlt der Abschnitt der laufenden Version in der Änderungsliste des Web-Abbilds, entsteht kein Fenster und nichts wird gemerkt. +**Dashboard-Hintergrund pro Benutzer (quick-260928-ujj):** Die Hintergrundwahl des Designs „Mosaik“ +steht in der Spalte `User.dashboardBackground` (JSONB, Migration +`20260928120000_user_dashboard_background`): `null` = nie gewählt, sonst ein normalisiertes Objekt +`{ kind: 'none' }`, `{ kind: 'preset', id }` oder `{ kind: 'image', imageId }`. Geschrieben wird +nur über `PATCH /users/me/dashboard-background` mit `{ background }` — ohne Kennungsparameter, +ausschließlich die eigene Zeile (`forTenant()`, `where: { id: currentUser.id }`); ein ungültiger +Wert ergibt 400 und schreibt nichts. Gelesen wird der Wert mit der Sitzungsantwort (`GET /auth/me`, +`AuthService.getMe`, neben `accentColor`) und landet über die `setUser`-Abbildung in `header.tsx` +im Auth-Store; `useDashboardBackground()` in +`apps/web/src/components/dashboard/dashboard-background.tsx` liest von dort und speichert über +`updateDashboardBackgroundAction` (optimistisch, bei Fehlschlag zurückgesetzt). Einzige Prüfregel +ist `parseDashboardBackground` in `packages/shared/src/index.ts` (Laufzeit-Import in API und Web, +angewendet beim Schreiben UND beim Lesen): `kind` und die Preset-Kennungen +(`DASHBOARD_BACKGROUND_PRESET_IDS`) aus einer festen Liste, `imageId` nur als UUID, weil das Web +den Wert als CSS-Hintergrund `url("...")` rendert. Wer ein neues Preset ergänzt, trägt es dort und +in `BACKGROUND_PRESETS` (`apps/web/src/lib/dashboard-background.ts`) ein — ein Test prüft, dass +beide Listen deckungsgleich sind. Der frühere localStorage-Schlüssel +`tessera.dashboardBackground.` wird von `takeLegacyDashboardBackground` einmal gelesen, +entfernt und nur übernommen, wenn der Server-Wert noch `null` ist. + **i18n — Schlüsselparität zwischen de.json und en.json:** Jeder benutzersichtbare Text gehört in beide Sprachdateien, `apps/web/src/messages/de.json` und `apps/web/src/messages/en.json`. Ein strukturelle Wächter-Test, `apps/web/src/messages/tenderRadar-parity.spec.ts`, prüft für den