From 628d5e1c87f5c5cc7c7b3438b7fa3f806428b805 Mon Sep 17 00:00:00 2001 From: davetoolctrl Date: Thu, 27 Aug 2026 03:19:37 +0200 Subject: [PATCH] docs: finalize D-P3 notification handoff --- .../Screens/S01 Glocken-Drawer.md | 51 ++-- .../Screens/S02 Benachrichtigungen Seite.md | 53 ++-- .../S03 Benachrichtigungen Einstellungen.md | 35 ++- .../S04 Permanent und Standard Banner.md | 54 ++++ .../S05 Live Notifications im App-Shell.md | 55 ++++ .../S06 Kurzinfos Status und Upload.md | 65 +++++ .../Screens/S07 Mikro Feedback.md | 58 ++++ .../Screens/S08 Kritischer Dialog.md | 51 ++++ .../WF-P3 Benachrichtigungen.canvas | 226 ++++++--------- .../WF-P3 Benachrichtigungen.md | 263 ++++++++++++++---- 02 Wireframes/Screen Paket Tracker.md | 27 +- 05 HiveGrid Map/HiveGrid Map.canvas | 2 +- 05 HiveGrid Map/HiveGrid Map.md | 18 +- .../D-P3 Benachrichtigungen.md | 112 ++++++++ Tickets/README.md | 1 + 15 files changed, 805 insertions(+), 266 deletions(-) create mode 100644 02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S04 Permanent und Standard Banner.md create mode 100644 02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S05 Live Notifications im App-Shell.md create mode 100644 02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S06 Kurzinfos Status und Upload.md create mode 100644 02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S07 Mikro Feedback.md create mode 100644 02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S08 Kritischer Dialog.md create mode 100644 Tickets/Fertige Tickets/D-P3 Benachrichtigungen.md diff --git a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S01 Glocken-Drawer.md b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S01 Glocken-Drawer.md index 42953d81..de9c5b69 100644 --- a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S01 Glocken-Drawer.md +++ b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S01 Glocken-Drawer.md @@ -6,17 +6,17 @@ package: WF-P3 Benachrichtigungen id: S01 screen: Glocken-Drawer typ: Drawer -umsetzung: Bauen +umsetzung: Gebaut status: Validiert route: "Topbar, global" -subframe: "" +subframe: "https://app.subframe.com/f023064a5ca0/design/c6db2245-5962-459e-82b9-e700272c692f/edit" --- # S01 — Glocken-Drawer ## Ziel -Schneller Blick auf Neues, ohne den aktuellen Kontext zu verlassen. Wird das Muster für alle künftigen Topbar-Drawer. +Schneller Blick auf Neues, ohne den aktuellen Kontext zu verlassen. Der Screen ist die validierte Leitseite für das globale Notification-Item im Drawer. ## Pattern / Archetyp @@ -24,28 +24,47 @@ A2 Liste als Drawer/Panel, öffnet aus der Glocke in der Topbar (App-Gerüst D0 ## Daten -- Einträge, neueste zuerst: Typ-Icon je Quelle (Aufgabe, E-Mail, Antrag, Erwähnung, System …), Titel, kurzer Body, Actor, Zeit (relativ), Ungelesen-Punkt, Prioritäts-Marker +- Einträge mit Quelle, Titel, kurzer Zusammenfassung, Zeit, Read-Status und Actor/Icon +- Bereiche: Neu und Früher; keine fachlichen Kategorien oder Sammelgruppen +- Repräsentative Quellen: Chat, E-Mail, Aufgaben, Kalender, Leads, Projekte, Automation, System und Billing +- Drei aufeinanderfolgende E-Mails erscheinen als drei eigenständige Items, nach Eingangszeit einsortiert; E-Mail ist Quelle, nicht Kanal +- Quellenfarbe unabhängig von Dringlichkeit: Chat grün, E-Mail teal, Aufgaben rot, Kalender gelb, Leads blau, Projekte violett, Automation orange, System grau, Billing indigo +- Keine farbigen Severity-/Attention-Punkte; ungelesene Items zeigen stattdessen Fokus-Schatten und einen kleinen blauen Punkt am Quell-Icon/Avatar +- Kein zusätzlicher blauer Kreis oder Count im rechten Aktionsbereich +- Notification-Hover: leichter Schatten statt grauer Flächenwechsel; Deeplink-Hover: leichte neutrale Fläche nur direkt am Link +- Eingangszeit klein oben rechts im Item +- Explizite einzeilige Zielverknüpfung unter der Zusammenfassung im Aufgaben-Muster „Typ · konkretes Objekt" - Tabs: Alle / Ungelesen - Zähler kommt aus der Topbar-Glocke (D0) ## Aktionen -- Klick auf Eintrag → typ-abhängiger Sprung zur Sache (neue Aufgabe → Aufgabe öffnen usw.); Eintrag wird dabei gelesen -- Einzelnen Eintrag wegklicken (X), wenn erledigt -- „Alle als gelesen" -- Aktualisieren-Knopf -- „Alle anzeigen" → [[S02 Benachrichtigungen Seite]] +- Explizite Zielverknüpfung → exaktes Tool, Objekt oder eine passende gefilterte Liste; Eintrag wird dabei gelesen +- Ungelesener Eintrag → dauerhaft sichtbarer Button `Gelesen` mit Haken; der Button setzt nur diesen Eintrag auf gelesen +- Center-Einträge besitzen kein X; `Gelesen` ist die einzige direkte Statusaktion am Item +- Zahnrad → [[S03 Benachrichtigungen Einstellungen]] +- `Alle Benachrichtigungen öffnen` steht oben links mit Maximize-Icon und zusätzlich am unteren Ende → [[S02 Benachrichtigungen Seite]] +- Keine Aktion `Alle als gelesen` und kein Ungelesen-Zähler im Drawer-Kopf; beides bleibt der Vollseite vorbehalten + +## Live-Overlay-Übergang + +- Klick auf den Kartenkörper in S05 öffnet diesen Drawer und scrollt das zugehörige Item in den sichtbaren Bereich. +- Das Ziel-Item erhält einmalig einen kurzen helleren Fokus-Schein: 150 ms aufhellen, 350 ms halten, 200 ms zurücknehmen. +- Das Öffnen des Drawers markiert das Item noch nicht als gelesen. +- Klick auf den blauen Ziel-Link springt dagegen direkt zum Ziel und setzt den Eintrag auf gelesen. +- Das X in S05 schließt nur die Live-Karte; der persistente Eintrag bleibt im Drawer. +- `Gelesen` in S05 setzt den Eintrag auf gelesen und schließt die Live-Karte ohne Navigation. ## Banner / Hinweise -- Bounce-Banner: „E-Mails an dich kommen aktuell nicht an." + Prüf-Knopf (nur wenn E-Mail-Zustellung pausiert) +- Banner sind nicht Teil des Drawers; Regeln und Referenz stehen in [[S04 Permanent und Standard Banner]]. ## Meldungsentscheidung | Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz | |---|---|---|---|---| -| Bounce (E-Mail-Zustellung pausiert) | Banner | nein | Nur dokumentieren | s. oben | -| Live-Verbindung weg | Inline | nein | Nur dokumentieren | „Aktualisiert sich gerade nicht — neu laden." | +| Ziel nicht verfügbar | Deeplink-Fallback | nein | Development klären | Kein toter Link | +| Liste nicht aktuell | Inline | nein | Nur dokumentieren | „Aktualisiert sich gerade nicht — neu laden." | ## Zustände @@ -57,13 +76,13 @@ A2 Liste als Drawer/Panel, öffnet aus der Glocke in der Topbar (App-Gerüst D0 ## Permissions / Gates -Keine — jeder sieht nur die eigenen Benachrichtigungen. +Der Drawer zeigt die für den aktuellen Nutzer ermittelten Hinweise. Empfänger- und Berechtigungslogik wird im Development finalisiert. ## Subframe -- (erst nach explizitem OK) +- [S01 Notification Center – Glocken-Drawer]() ## Notizen -- Offen: Zahnrad im Drawer-Kopf als Direkteinstieg zu S03? -- Offen (Dev): Wegklicken = löschen oder archivieren? +- Quellenmodell, Gelesen-Aktion, beide Einstiege zur Vollseite, Center ohne X sowie der Übergang von S05 inklusive Fokus-Schein sind validiert. +- Empfängerlogik wird im Development finalisiert. diff --git a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S02 Benachrichtigungen Seite.md b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S02 Benachrichtigungen Seite.md index 3dcecede..948bd1a3 100644 --- a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S02 Benachrichtigungen Seite.md +++ b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S02 Benachrichtigungen Seite.md @@ -3,20 +3,20 @@ kind: screen project: HiveGrid Screen Project ticket: D-P3 package: WF-P3 Benachrichtigungen -id: S02 -screen: Benachrichtigungen Seite +id: S02B +screen: Benachrichtigungen Seite mit Fokus-Schatten typ: Liste -umsetzung: Bauen +umsetzung: Gebaut status: Validiert route: "/notifications" -subframe: "" +subframe: "https://app.subframe.com/f023064a5ca0/design/66571863-970d-4890-8352-a112c057e910/edit" --- -# S02 — Benachrichtigungen Seite +# S02B — Benachrichtigungen Seite ## Ziel -Der Drawer in groß: alle Meldungen durchsehen, in Ruhe aufräumen. +Alle persistenten, anklickbaren In-App-Benachrichtigungen chronologisch durchsuchen und nach Quelle, Lesestatus und Zeitraum eingrenzen. ## Pattern / Archetyp @@ -24,26 +24,41 @@ A2 Liste (volle Seite in der App-Shell), gleiche Einträge wie S01. ## Daten -- Gleiche Eintrags-Struktur wie [[S01 Glocken-Drawer]] (Typ-Icon, Titel, Body, Actor, Zeit, Read-Status, Prioritäts-Marker) -- Tabs: Alle / Ungelesen +- Gleiches globales Notification-Item wie [[S01 Glocken-Drawer]] +- Segmented Control: Alle / Ungelesen / Gelesen, rechts im Seitenkopf bei den globalen Aktionen +- Filter Bar mit Presets; Filter: Quelle und Zeitraum +- Quellen-Presets und Quellenfilter enthalten Chat, E-Mail, Aufgaben, Kalender, Leads, Projekte, Automation, System und Billing +- Zeitabschnitte: Heute, Gestern, ältere Tage +- Innerhalb der Zeitabschnitte streng nach Ereigniszeit absteigend; gleiche Quellen werden nicht zusammengefasst +- Quellenfarben wie S01: Chat grün, E-Mail teal, Aufgaben rot, Kalender gelb, Leads blau, Projekte violett, Automation orange, System grau, Billing indigo +- Keine farbigen Severity-/Attention-Punkte; ungelesene Items verwenden den manuell gesetzten Fokus-Schatten +- Eingangszeit klein oben rechts im Item +- Explizite einzeilige, blau hervorgehobene Zielverknüpfung unter der Zusammenfassung im Aufgaben-Muster „Typ · konkretes Objekt" +- `state="unread"` zeigt Fokus-Schatten und einen kleinen blauen Punkt oben rechts am Quell-Icon/Avatar +- Kein zusätzlicher blauer Kreis oder Count im rechten Aktionsbereich +- Größerer vertikaler Abstand verhindert, dass die Fokus-Schatten ineinanderlaufen +- Notification-Hover: leichter Schatten statt grauer Flächenwechsel; Deeplink-Hover: leichte neutrale Fläche nur direkt am Link +- Mehrere aufeinanderfolgende E-Mails oder andere Ereignisse erscheinen als eigenständige Notification-Items mit eigener Zeit, Beschreibung und Zielverknüpfung ## Aktionen -- Klick → typ-abhängiger Sprung zur Sache -- Einzeln als gelesen/ungelesen markieren -- Einzeln wegklicken -- Bulk-Aufräumen („alle als gelesen" / Auswahl entfernen) -- Aktualisieren +- Explizite Zielverknüpfung → exaktes Tool, Objekt oder eine passende gefilterte Liste +- Ungelesenes Item: dauerhaft sichtbarer Button „Gelesen" mit einfachem Haken statt X; nach dem Lesen verschwindet die Aktion +- Kein Wegklicken einzelner Items auf der Vollseite +- Globale Aktion `Alle als gelesen` im Seitenkopf +- Checkboxen links neben jedem Item; die ersten zwei Items zeigen den ausgewählten Zustand als visuelle Referenz +- Bestehende `Bulk Action Bar` mit zwei klaren Buttons: `Als gelesen markieren` und `Als ungelesen markieren` +- Bulk-Bar zeigt Auswahlanzahl und `Alle 20 auswählen`; kein Dropdown für die Read-Aktion ## Banner / Hinweise -- Bounce-Banner wie in S01 +- Standard/Permanent Banner sind getrennte Oberflächen; siehe [[S04 Permanent und Standard Banner]]. ## Meldungsentscheidung | Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz | |---|---|---|---|---| -| Bounce | Banner | nein | Nur dokumentieren | wie S01 | +| Ziel nicht verfügbar | Deeplink-Fallback | nein | Development klären | Kein toter Link | | Live-Verbindung weg | Inline | nein | Nur dokumentieren | wie S01 | ## Zustände @@ -56,12 +71,14 @@ A2 Liste (volle Seite in der App-Shell), gleiche Einträge wie S01. ## Permissions / Gates -Keine — nur eigene Benachrichtigungen. +Die Seite zeigt die für den aktuellen Nutzer ermittelten Hinweise. Empfänger- und Berechtigungslogik wird im Development finalisiert. ## Subframe -- (erst nach explizitem OK) +- [S02B – Fokus-Schatten, gewählte Referenzvariante]() ## Notizen -- Erreichbar über „Alle anzeigen" im Drawer; ob es zusätzlich einen Sidebar-Punkt braucht: nein (bewusst nur über Glocke). +- Erreichbar über „Alle Benachrichtigungen öffnen" im Drawer; im validierten Stand gibt es keinen eigenen Sidebar-Punkt. +- Vollseiten-Referenz, Filterumfang und Read-/Bulk-Aktionen sind validiert. +- S02B ist die einzige verbleibende Subframe-Referenz. Die früheren S02-/S02A-Vergleichsstände wurden entfernt. diff --git a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S03 Benachrichtigungen Einstellungen.md b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S03 Benachrichtigungen Einstellungen.md index b7fbc31a..fe883a00 100644 --- a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S03 Benachrichtigungen Einstellungen.md +++ b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S03 Benachrichtigungen Einstellungen.md @@ -6,17 +6,17 @@ package: WF-P3 Benachrichtigungen id: S03 screen: Benachrichtigungen Einstellungen typ: Settings -umsetzung: Bauen +umsetzung: Gebaut status: Validiert route: "/settings/notifications" -subframe: "" +subframe: "https://app.subframe.com/f023064a5ca0/design/ad1f213a-39cf-451f-8525-ff4e9b3a0854/edit" --- # S03 — Benachrichtigungen Einstellungen ## Ziel -Selbst steuern, worüber man wie informiert wird — pro Ereignis-Typ. +Steuern, welche neuen Benachrichtigungen kurz als Live-Pop-up oben rechts erscheinen. Das Notification Center bleibt unabhängig von diesen Einstellungen vollständig. ## Pattern / Archetyp @@ -24,18 +24,27 @@ A6 Settings-Seite unter Einstellungen → Persönlich → Benachrichtigungen (P2 ## Daten -- Ereignis-Typen **nach Modul gruppiert** (z. B. Aufgaben, Leads, Projekte, Chat, HR …) -- Je Zeile: Name + Kurzbeschreibung des Ereignisses, Toggle **In-App**, Toggle **E-Mail**, Prioritäts-Selektor (ab welcher Wichtigkeit) -- Oben: **Master-Schalter „alle E-Mails aus"** mit Klartext: „Gilt auch für Ereignis-Typen, die später dazukommen." +- Nur In-App; keine E-Mail-, Push- oder SMS-Kanalsteuerung +- Ein globaler Schalter steuert sämtliche Live-Einblendungen +- Je ein Schalter für die neun Quellen: Chat, E-Mail, Aufgaben, Kalender, Leads, Projekte, Automation, System und Billing +- Integrationen werden unter System geführt +- Ausgeschaltete Live-Einblendungen verschwinden nicht: Sie bleiben unter der Glocke und auf der Benachrichtigungsseite erhalten +- Es gibt keine Kategorie-, Attention- oder Ereignistyp-Matrix +- Kritische Dialoge und permanente Hinweise bleiben unabhängig von diesen Einstellungen immer aktiv +- Microfeedback und Status-Toasts sind Produktfeedback und keine Benachrichtigungseinstellungen +- Empfänger werden anhand von Zuständigkeit und Berechtigungen ermittelt ## Aktionen -- Toggles je Zeile (speichern sofort, Toast als Bestätigung) -- Master-Schalter (graut E-Mail-Spalte aus) +- Globaler Toggle `Neue Benachrichtigungen live anzeigen` +- Ein Toggle je Quelle; er beeinflusst nur das Live-Pop-up dieser Quelle +- Beim Ausschalten des globalen Toggles bleiben die individuellen Quellenwerte gespeichert und gelten nach dem erneuten Einschalten weiter +- Kritische Hinweise sind als gesperrter, aktivierter Schalter sichtbar +- Automation ist im Referenzscreen beispielhaft ausgeschaltet, bleibt aber weiterhin im Notification Center sichtbar ## Banner / Hinweise -- Bei aktivem Bounce: Hinweis „E-Mails an dich kommen aktuell nicht an" auch hier sichtbar +- Prominente Infozeile: „Ausgeschaltete Live-Einblendungen sind nicht weg: Alle Benachrichtigungen bleiben unter der Glocke und auf der Benachrichtigungsseite verfügbar." ## Meldungsentscheidung @@ -56,9 +65,11 @@ Keine — persönliche Einstellungen. ## Subframe -- (erst nach explizitem OK) +- [S03 Benachrichtigungen – Globale Einstellungen]() ## Notizen -- v2 (nicht bauen, nicht andeuten): Ruhezeiten, Bündelung, Push-Geräte. -- E-Mail-Spalte bei Master-aus: ausgegraut, nicht versteckt (Nutzer soll sehen, was er verpasst). +- Globaler Schalter, neun Quellen-Schalter, erklärende Persistenz-Copy und der gesperrte kritische Zustand sind validiert. +- Die Settings steuern ausschließlich Live-Pop-ups; Center-Persistenz, Read-State und Empfängerlogik sind keine User-Settings. +- Das Center aggregiert Ereignisse grundsätzlich nicht. +- Out of scope: Quiet Hours, Snooze, Digest und Geräte-/Push-Verwaltung. diff --git a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S04 Permanent und Standard Banner.md b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S04 Permanent und Standard Banner.md new file mode 100644 index 00000000..0a5cef5e --- /dev/null +++ b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S04 Permanent und Standard Banner.md @@ -0,0 +1,54 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-P3 +package: WF-P3 Benachrichtigungen +id: S04 +screen: Permanent und Standard Banner +typ: Referenzscreen +umsetzung: Gebaut +status: Validiert +route: "global + Content" +subframe: "https://app.subframe.com/f023064a5ca0/design/f6eccfbe-058c-4b5a-b984-ce656526efab/edit" +--- + +# S04 — Permanent und Standard Banner + +## Ziel + +Die zwei Banner-Regeln im realen App-Shell eindeutig voneinander abgrenzen. + +Der Inhaltsbereich ist bewusst ein leerer, klar beschrifteter Platzhalter wie in S05 und S06. Bewertet werden hier ausschließlich Position, Breite und Verhalten der beiden Banner. + +## Standard Banner + +- Bestehender `Banner Alert` +- Innerhalb des jeweiligen Inhaltskontexts +- Immer dismissible +- Mit Deeplink-Aktion zum passenden Ziel + +## Permanent Banner + +- Ein globaler `Banner Permanent`-Baustein, ca. 28 px hoch +- Ganz oben über Sidebar und Header +- Nie dismissible; bleibt bis zur Lösung +- Für fortbestehende Probleme wie offene Rechnung oder notwendige Kontoverifizierung +- Bei mehreren Problemen: wichtigstes zeigen plus Anzahl weiterer + +## Offline-Zustand + +- Offline ist keine eigene Komponente, sondern ein Zustand des `Banner Permanent`. +- Die App besitzt nur einen globalen Permanent-Banner-Slot. +- Der bestehende Baustein kann dafür `message`, `icon`, `actionLabel` und `variant` dynamisch wechseln; eine zusätzliche UI-Komponente ist nicht nötig. +- Solange die App offline ist, hat die Offline-Meldung in diesem Slot Vorrang vor offenen Rechnungen oder anderen permanenten Hinweisen. +- Nach wiederhergestellter Verbindung verschwindet die Offline-Meldung und der zuvor relevante permanente Hinweis wird wieder angezeigt. +- Der Offline-Zustand übernimmt das Verhalten des Permanent Banners und ist deshalb nicht dismissible. +- Die frühere Subframe-Komponente `Banner Offline` wurde entfernt. + +## Subframe + +- [S04 App-Shell – Permanent und Standard Banner]() + +## Status + +Standard Banner, Permanent Banner, Offline-Priorität und die Darstellung im Platzhalter-App-Shell sind validiert. diff --git a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S05 Live Notifications im App-Shell.md b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S05 Live Notifications im App-Shell.md new file mode 100644 index 00000000..98f32b74 --- /dev/null +++ b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S05 Live Notifications im App-Shell.md @@ -0,0 +1,55 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-P3 +package: WF-P3 Benachrichtigungen +id: S05 +screen: Live Notifications im App-Shell +typ: Overlay-Referenz +umsetzung: Gebaut +status: Validiert +route: "global, oben rechts" +subframe: "https://app.subframe.com/f023064a5ca0/design/14386a95-8c95-46c6-8127-61c261f6e305/edit" +--- + +# S05 — Live Notifications im App-Shell + +## Ziel + +Zeigen, wie ein neues persistentes Notification-Ereignis live im aktuellen Arbeitskontext erscheint, bevor es im Drawer oder auf der Vollseite weiterbearbeitet wird. + +## Darstellung + +- Position oben rechts innerhalb des App-Shell +- Kompaktere Variante des globalen Notification Items +- Maximal drei sichtbare Karten; neueste Karte oben +- Bei mehr als drei Ereignissen erhält die oberste Karte zwei flache Backplates und ein rundes `+N`-Badge für weitere, gerade nicht sichtbare Karten +- Das Badge ist nur Überlaufanzeige; im Notification Center werden Ereignisse weiterhin einzeln und chronologisch geführt +- Zeitmetadaten entfallen in dieser kompakten, dismissiblen Darstellung zugunsten eines X +- Jede ungelesene Live-Karte zeigt zusätzlich dauerhaft `Gelesen` mit Haken +- Jede Karte besitzt weiterhin einen einzeiligen blauen Ziel-Link + +## Aktionen + +- Kartenkörper → [[S01 Glocken-Drawer]] öffnen, das passende Item in den sichtbaren Bereich scrollen und dessen Fokusrahmen einmal kurz heller aufscheinen lassen +- Das Öffnen des Drawers markiert die Notification nicht automatisch als gelesen +- Blauer Ziel-Link → direkt zum exakten Ziel und Eintrag als gelesen markieren +- `Gelesen` → Eintrag als gelesen markieren und die Live-Karte schließen, ohne zu navigieren +- X → nur Live-Overlay schließen; Center-Eintrag bleibt bestehen +- Stapel oder `+N`-Badge → Drawer am neuesten noch nicht sichtbaren Ereignis öffnen + +## Timing / Motion + +- Standarddauer: 8 Sekunden +- Hover, Tastaturfokus und inaktiver Browser-Tab pausieren den Timer; nach Rückkehr bleiben mindestens zwei Sekunden +- Eintritt ca. 250 ms, Austritt ca. 180 ms +- Drawer-Fokus-Schein: 150 ms aufhellen, 350 ms halten, 200 ms zurücknehmen +- Reduzierte Bewegung: nur Opacity und statisch hellerer Rahmen, kein Slide oder Bounce + +## Subframe + +- [S05 App-Shell – Live Notifications]() + +## Status + +Position oben rechts, maximal drei sichtbare Karten, der `+N`-Überlaufstapel, die getrennten Aktionen `Gelesen` und X sowie der Übergang in den Drawer sind validiert. diff --git a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S06 Kurzinfos Status und Upload.md b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S06 Kurzinfos Status und Upload.md new file mode 100644 index 00000000..ed210a7a --- /dev/null +++ b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S06 Kurzinfos Status und Upload.md @@ -0,0 +1,65 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-P3 +package: WF-P3 Benachrichtigungen +id: S06 +screen: Kurzinfos Status und Upload +typ: Toast-Referenz +umsetzung: Gebaut +status: Validiert +route: "global, unten rechts" +subframe: "https://app.subframe.com/f023064a5ca0/design/66b46a36-1d7f-418b-b0ea-3550569c3374/edit" +--- + +# S06 — Kurzinfos, Status und Upload + +## Ziel + +Flüchtiges Produktfeedback für laufende Aktionen, Ergebnisse, Warnungen und behebbare Fehler im App-Shell definieren. Diese Toasts werden nicht im Notification Center gespeichert. + +## Stapel + +- Position unten rechts +- Maximal fünf sichtbare Toasts +- Neuester Toast liegt am unteren Rand; ältere wandern nach oben +- Alle Toasts besitzen ein X +- Kein Sammel-Count nötig; bei mehr als fünf entscheidet die Queue nach Priorität und Aktualität + +## Varianten + +| Variante | Beispiel | Verhalten | +|---|---|---| +| Fortschritt | `Datei wird hochgeladen` mit Dateiname, MB-Angabe, Progress und `Abbrechen` | bleibt bis Abschluss/Abbruch | +| Hintergrundstatus | `Synchronisierung läuft` | bleibt während des Prozesses | +| Erfolg | `Import abgeschlossen` | 4 Sekunden | +| Information | neutraler Status ohne Aktion | 6 Sekunden | +| Warnung | `Speichern verzögert` | 8 Sekunden | +| Fehler mit Aktion | `Upload fehlgeschlagen` plus `Erneut versuchen` | bleibt bis X oder erfolgreicher Aktion | +| Rückgängig | `Projekt archiviert` plus `Rückgängig` | zeitlich begrenzte Aktionschance | + +## Prozesslogik + +- Loading-/Progress-UI erscheint erst nach etwa 500 ms, damit sehr kurze Vorgänge nicht flackern. +- Während ein Prozess läuft, gibt es kein Auto-Dismiss. +- Derselbe Toast wechselt bei Erfolg in den Erfolgszustand und schließt dann nach vier Sekunden. +- Bei Fehler wechselt derselbe Toast in den Fehlerzustand und bleibt offen. +- Ein fehlgeschlagener Retry hält den Toast offen; ein erfolgreicher Retry schließt ihn nach dem Erfolgsfeedback. +- Nach zehn Sekunden darf ein langer Prozess zu `Läuft im Hintergrund` verdichtet und nach weiteren fünf Sekunden ausgeblendet werden; der Prozess läuft weiter. +- Wird der Abschluss später relevant und besitzt ein Ziel, endet der Status-Toast und derselbe Vorgang wechselt zu genau einem persistenten Notification-Event. Für dasselbe Ergebnis erscheinen nicht zusätzlich Erfolg-Toast und Live-Notification. + +## Abgrenzung + +- Ein Ergebnis mit später relevantem Ziel, etwa `Export fertig`, wechselt vom Status-Toast zu genau einem persistenten Notification-Event. +- Sehr häufige Bestätigungen wie `Änderungen gespeichert` verwenden [[S07 Mikro Feedback]]. +- Status-Toast und Mikro-Feedback desselben Vorgangs werden dedupliziert; der informationsreichere Status-Toast gewinnt. +- Bei verschiedenen Vorgängen dürfen beide gleichzeitig sichtbar sein. Das Mikro-Feedback steht dann links neben dem Toast-Stapel und überlagert ihn nicht. +- Formularvalidierung bleibt Inline Alert; Offline bleibt Permanent Banner. + +## Subframe + +- [S06 App-Shell – Kurzinfos und Statusfarben]() + +## Status + +Validiert sind maximal fünf Toasts, die dokumentierten Timings, Upload-/Loading-Übergänge und das persistente Fehlerverhalten bis X oder erfolgreiche Aktion. Der Screen bleibt eine visuelle Referenz für diese Regeln. diff --git a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S07 Mikro Feedback.md b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S07 Mikro Feedback.md new file mode 100644 index 00000000..4fd73c60 --- /dev/null +++ b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S07 Mikro Feedback.md @@ -0,0 +1,58 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-P3 +package: WF-P3 Benachrichtigungen +id: S07 +screen: Mikro Feedback +typ: Micro-Referenz +umsetzung: Gebaut +status: Validiert +route: "global, unten rechts" +subframe: "https://app.subframe.com/f023064a5ca0/design/78c8e52f-c328-4583-9a97-40cf95130a47/edit" +--- + +# S07 — Mikro Feedback + +## Ziel + +Sehr häufige, harmlose Bestätigungen sichtbar machen, ohne Nutzer mit großen Toasts oder wiederholtem Wegklicken zu belasten. + +## Darstellung + +- Kleine, ruhige Pill unten rechts +- Leichter positiver Rahmen zur besseren Erkennbarkeit, ohne wie ein voller Toast zu wirken +- Ein kurzes Statuswort oder ein sehr kurzer Satz plus positives Icon +- Kein Titel-Body-Aufbau, kein Link, kein Fortschritt und kein X +- Maximal eine Instanz; ein neuer identischer Hinweis ersetzt den bestehenden statt zu stapeln +- Bei einem gleichzeitig sichtbaren Status-Toast zu einem anderen Vorgang steht die Pill links neben dem unten rechts verankerten Toast-Stapel +- Beziehen sich Toast und Mikro-Feedback auf denselben Vorgang oder dasselbe Ergebnis, erscheint nur der informationsreichere Status-Toast + +## Geeignete Beispiele + +- Änderungen gespeichert +- Link kopiert +- Reihenfolge aktualisiert +- Zuordnung geändert + +## Nicht verwenden für + +- Fehler oder Warnungen +- Loading und Fortschritt +- Ergebnisse mit später relevantem Ziel +- Handlungen, die bestätigt oder rückgängig gemacht werden müssen + +## Timing / Motion + +- Etwa 150 ms Fade plus 4 px ruhige Aufwärtsbewegung +- 1,5 Sekunden sichtbar +- Etwa 120 ms Fade-out +- Bei reduzierter Bewegung nur Opacity + +## Subframe + +- [S07 App-Shell – Micro Feedback]() + +## Status + +Eigene kleine Verhaltensklasse, maximal eine Instanz, 1,5 Sekunden Sichtbarkeit, leichter Rahmen und Kollisionsregel mit Status-Toasts sind validiert. diff --git a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S08 Kritischer Dialog.md b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S08 Kritischer Dialog.md new file mode 100644 index 00000000..a65bc31b --- /dev/null +++ b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S08 Kritischer Dialog.md @@ -0,0 +1,51 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-P3 +package: WF-P3 Benachrichtigungen +id: S08 +screen: Kritischer Dialog +typ: Dialog-Referenz +umsetzung: Gebaut +status: Validiert +route: "global, modal" +subframe: "https://app.subframe.com/f023064a5ca0/design/4ecac4cb-d303-40f3-8c32-8aa04ef3cbad/edit" +--- + +# S08 — Kritischer Dialog + +## Ziel + +Seltene Situationen sichtbar unterbrechen, in denen ein Vorgang unmittelbare Aufmerksamkeit braucht. Inhalt und Hauptaktion werden je Ereignis gesetzt; das gezeigte Layout bleibt global wiederverwendbar. + +## Darstellung + +- Echte bestehende `Dialog`-Root mit `Dialog.Content`; kein manuell gebautes Overlay und kein künstlicher Blur-Hintergrund +- Zentrierter Dialog auf dem von der Komponente gelieferten Overlay +- Keine Auto-Dismiss-Zeit +- Standardmäßig X oben rechts und zusätzliche Aktion `Schließen` +- Klare Problembeschreibung, Konsequenz und höchstens zwei sinnvolle Aktionen +- Allgemeine Referenzcopy: `Aktion erforderlich` +- Hauptaktion im Referenzscreen: `Problem beheben`; Development ersetzt sie ereignisspezifisch + +## Verhalten + +- Der Dialog hat kein Auto-Dismiss, kann standardmäßig aber über X oder `Schließen` verlassen werden. +- Hauptaktion, Folgefeedback und Schließverhalten nach erfolgreicher Aktion werden je Ereignis definiert. +- Ein wirklich nicht schließbarer Dialog ist kein Standard. Development darf X und `Schließen` nur für ausdrücklich festgelegte echte Blocker ausblenden. +- Das kritische Ereignis bleibt parallel als persistenter Eintrag im Notification Center, sofern es später noch relevant oder nachvollziehbar ist. +- Kritisch ist eine zusätzliche Ausgabefläche, keine rote Quellenkategorie. + +## Motion + +- Backdrop ca. 200 ms einblenden +- Dialog ca. 320 ms mit 8 px ruhigem Settle, ohne Bounce +- Bei reduzierter Bewegung ausschließlich Fade + +## Subframe + +- [S08 App-Shell – Kritischer Dialog]() + +## Status + +Echte Dialog-Komponente, kein Auto-Dismiss, standardmäßige Schließbarkeit und ereignisspezifische Inhalte/Aktionen sind validiert. diff --git a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/WF-P3 Benachrichtigungen.canvas b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/WF-P3 Benachrichtigungen.canvas index 48649f56..9d522c8d 100644 --- a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/WF-P3 Benachrichtigungen.canvas +++ b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/WF-P3 Benachrichtigungen.canvas @@ -1,143 +1,87 @@ { - "nodes": [ - { - "id": "group-main", - "type": "group", - "x": -80, - "y": -100, - "width": 1840, - "height": 420, - "label": "Hauptflow" - }, - { - "id": "group-settings", - "type": "group", - "x": -80, - "y": 460, - "width": 1000, - "height": 400, - "label": "Einstellungen" - }, - { - "id": "group-notes", - "type": "group", - "x": 1060, - "y": 460, - "width": 1240, - "height": 400, - "label": "Regeln und Offenes" - }, - { - "id": "note-entry", - "type": "text", - "text": "# Einstieg\n\nGlocke in der Topbar (App-Gerüst D0) mit Ungelesen-Zähler.\n\nKlick öffnet den Drawer.", - "x": 0, - "y": 0, - "width": 360, - "height": 200 - }, - { - "id": "s01", - "type": "file", - "file": "02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S01 Glocken-Drawer.md", - "x": 560, - "y": 0, - "width": 420, - "height": 200 - }, - { - "id": "s02", - "type": "file", - "file": "02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S02 Benachrichtigungen Seite.md", - "x": 1240, - "y": 0, - "width": 420, - "height": 200 - }, - { - "id": "note-entry-settings", - "type": "text", - "text": "# Einstieg\n\nEinstellungen → Persönlich → Benachrichtigungen", - "x": 0, - "y": 560, - "width": 320, - "height": 200 - }, - { - "id": "s03", - "type": "file", - "file": "02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S03 Benachrichtigungen Einstellungen.md", - "x": 440, - "y": 560, - "width": 420, - "height": 200 - }, - { - "id": "note-deeplink", - "type": "text", - "text": "# Regel: Typ-Sprung\n\nKlick auf einen Eintrag springt typ-abhängig zur Sache (neue Aufgabe → Aufgabe, Anfrage → Anfrage …). Typ-Icon je Quelle.\n\nKein eigener Screen.", - "x": 1120, - "y": 560, - "width": 360, - "height": 240 - }, - { - "id": "note-bounce", - "type": "text", - "text": "# Banner (nur Doku)\n\nBounce-Hinweis „E-Mails an dich kommen aktuell nicht an\" + Prüf-Knopf — sichtbar in S01, S02 und S03.", - "x": 1520, - "y": 560, - "width": 360, - "height": 240 - }, - { - "id": "note-dismiss", - "type": "text", - "text": "# Offen (Dev)\n\nWegklicken: endgültig löschen oder archivieren?\n\nUI: Eintrag verschwindet aus der Liste.", - "x": 1920, - "y": 560, - "width": 340, - "height": 240 - }, - { - "id": "md-paket", - "type": "file", - "file": "02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/WF-P3 Benachrichtigungen.md", - "x": -80, - "y": -440, - "width": 460, - "height": 280 - } - ], - "edges": [ - { - "id": "e-entry", - "fromNode": "note-entry", - "fromSide": "right", - "toNode": "s01", - "toSide": "left", - "toEnd": "arrow", - "label": "öffnen" - }, - { - "id": "e-page", - "fromNode": "s01", - "fromSide": "right", - "toNode": "s02", - "toSide": "left", - "toEnd": "arrow", - "label": "Alle anzeigen" - }, - { - "id": "e-settings", - "fromNode": "note-entry-settings", - "fromSide": "right", - "toNode": "s03", - "toSide": "left", - "toEnd": "arrow", - "styleAttributes": { - "path": "dotted" - } - } - ] + "nodes":[ + {"id":"a3f19c20d4e56780","type":"group","x":-80,"y":1040,"width":3240,"height":2300,"color":"5","label":"Validiert · Globales Notification-System"}, + {"id":"a3f19c20d4e56796","type":"group","x":0,"y":2220,"width":3120,"height":420,"color":"2","label":"4 · Darstellung / Referenz-Screens"}, + {"id":"a3f19c20d4e56790","type":"group","x":2180,"y":1120,"width":940,"height":1020,"color":"5","label":"3 · Gemeinsamer Notification-Vertrag"}, + {"id":"a3f19c20d4e5678a","type":"group","x":1200,"y":1120,"width":860,"height":1020,"color":"4","label":"2 · Quellenfilter und Ausgabeflächen"}, + {"id":"group-main","type":"group","x":-80,"y":-100,"width":2040,"height":420,"label":"Hauptflow"}, + {"id":"group-notes","type":"group","x":1060,"y":460,"width":1240,"height":400,"label":"Validierte Regeln"}, + {"id":"a3f19c20d4e56782","type":"group","x":0,"y":1380,"width":620,"height":760,"color":"6","label":"1 · Quellen (Beispiele)"}, + {"id":"group-settings","type":"group","x":-80,"y":460,"width":1000,"height":400,"label":"Einstellungen · Live-Einblendungen"}, + {"id":"c5f29d30c5f67820","type":"group","x":0,"y":2800,"width":2120,"height":400,"color":"2","label":"5 · Status- und Sonderflächen"}, + {"id":"note-entry","type":"text","text":"# Neues Ereignis\n\nEin persistentes Ereignis erscheint zuerst live oben rechts. Die Glocke öffnet den Drawer jederzeit direkt.","x":0,"y":0,"width":340,"height":200}, + {"id":"c5f29d30c5f67825","type":"file","file":"02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S05 Live Notifications im App-Shell.md","x":420,"y":0,"width":420,"height":200}, + {"id":"s01","type":"file","file":"02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S01 Glocken-Drawer.md","x":920,"y":0,"width":420,"height":200}, + {"id":"s02","type":"file","file":"02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S02 Benachrichtigungen Seite.md","x":1420,"y":0,"width":420,"height":200}, + {"id":"note-entry-settings","type":"text","text":"# Einstieg\n\nEinstellungen → Persönlich → Benachrichtigungen\n\nSteuert ausschließlich Live-Pop-ups: global und je Quelle. Ausgeschaltete Einblendungen bleiben vollständig im Notification Center.","x":0,"y":560,"width":320,"height":200}, + {"id":"s03","type":"file","file":"02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S03 Benachrichtigungen Einstellungen.md","x":440,"y":560,"width":420,"height":200}, + {"id":"c5f29d30c5f67821","type":"file","file":"02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S04 Permanent und Standard Banner.md","x":60,"y":2880,"width":420,"height":220}, + {"id":"c5f29d30c5f67822","type":"file","file":"02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S06 Kurzinfos Status und Upload.md","x":560,"y":2880,"width":420,"height":220}, + {"id":"c5f29d30c5f67823","type":"file","file":"02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S07 Mikro Feedback.md","x":1060,"y":2880,"width":420,"height":220}, + {"id":"c5f29d30c5f67824","type":"file","file":"02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/Screens/S08 Kritischer Dialog.md","x":1560,"y":2880,"width":420,"height":220}, + {"id":"note-deeplink","type":"text","text":"# Pflicht: Deeplink\n\nJede Notification ist ein Einzelereignis und führt zum konkreten Objekt oder einem klaren Fallback-Ziel.\n\nKein toter Link: gelöschte oder nicht erlaubte Ziele brauchen einen Nicht-verfügbar-Zustand.","x":1120,"y":560,"width":360,"height":240}, + {"id":"md-paket","type":"file","file":"02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/WF-P3 Benachrichtigungen.md","x":-80,"y":-440,"width":460,"height":280}, + {"id":"note-bounce","type":"text","text":"# Standard-Banner\n\nVorhandene Banner-Komponente; immer dismissible.\n\nE-Mail ist kein Versandkanal mehr. Eine eingehende E-Mail erzeugt stattdessen eine In-App-Notification mit kurzer Zusammenfassung und Link zum Thread.","x":1520,"y":560,"width":360,"height":240}, + {"id":"note-dismiss","type":"text","text":"# Lebenszyklus\n\nGelesen, Live-Overlay geschlossen und fachlich gelöst sind getrennte Zustände.\n\nCenter-Einträge haben kein X. Im Live-Overlay markiert `Gelesen` den Eintrag als gelesen; X schließt nur das Pop-up. Permanent Banner verschwinden erst nach Lösung.","x":1920,"y":560,"width":340,"height":240}, + {"id":"a3f19c20d4e56781","type":"text","text":"# Leitidee\n\nEin globales **In-App-System** statt eigener Notifications pro Tool. Quellen liefern einzelne Ereignisse; die Ausgabefläche bestimmt Verhalten und Lebensdauer. Es gibt keine zusätzliche Kategorie-Ebene.\n\nEmpfängerregeln bleiben Development-Logik. Mikro-Feedback und Status-Toasts gehören nicht in das Notification Center.","x":0,"y":1120,"width":1080,"height":200}, + {"id":"a3f19c20d4e56784","type":"text","text":"## Eingehende E-Mail\n\nAbsender, Betreff, kurzer Ausschnitt; Link zum Thread","x":330,"y":1480,"width":250,"height":140}, + {"id":"a3f19c20d4e56797","type":"text","text":"# Notification-Event\n\nS05 zeigt live maximal drei Karten plus `+N`-Stapel. `Gelesen` setzt den Read-State; X schließt nur das Pop-up. Kartenkörper öffnet S01, der blaue Link springt direkt zum Ziel. S02B bleibt die vollständige chronologische Liste.","x":60,"y":2320,"width":650,"height":230}, + {"id":"a3f19c20d4e56798","type":"text","text":"# Einstellungen S03\n\nNur In-App. Globaler Schalter plus neun Quellen steuern ausschließlich Live-Pop-ups. Das Center bleibt vollständig. Kritische Dialoge und permanente Hinweise bleiben immer aktiv.","x":820,"y":2320,"width":650,"height":230}, + {"id":"a3f19c20d4e5679a","type":"text","text":"# Permanent Banner · Sonderkomponente\n\nSehr dünn, global ganz oben, kein X. Bleibt bis zur fachlichen Lösung. Beispiel: **Rechnung offen**. Bei mehreren Problemen nur das wichtigste plus Anzahl anzeigen.","x":2340,"y":2320,"width":650,"height":230,"color":"1"}, + {"id":"a3f19c20d4e56783","type":"text","text":"## Aufgaben & Kalender\n\nZuweisung, Frist, Termin, Überfälligkeit","x":40,"y":1480,"width":250,"height":140}, + {"id":"a3f19c20d4e56785","type":"text","text":"## Chat\n\nDM, Erwähnung, Antwort – nicht jede Aktivität","x":40,"y":1660,"width":250,"height":140}, + {"id":"a3f19c20d4e56786","type":"text","text":"## Leads & Projekte\n\nZuweisung und relevante Statusänderung","x":330,"y":1660,"width":250,"height":140}, + {"id":"a3f19c20d4e56787","type":"text","text":"## Automation\n\nFehler, Handlungsbedarf, Ergebnis","x":40,"y":1840,"width":250,"height":140}, + {"id":"a3f19c20d4e56788","type":"text","text":"## System & Billing\n\nSystem umfasst Integrationen; Billing bleibt eigene Quelle","x":330,"y":1840,"width":250,"height":140}, + {"id":"a3f19c20d4e56789","type":"text","text":"# Ereignis einordnen\n\n1. Reines Feedback oder später relevant?\n2. Ausgabefläche wählen\n3. Bei Notification: Quelle + Deeplink\n4. Read-State und Live-Aktion\n5. Empfänger-Suggestion\n\nKeine Aggregation: jedes Center-Ereignis bleibt einzeln.","x":740,"y":1560,"width":360,"height":320,"color":"3"}, + {"id":"a3f19c20d4e5678f","type":"text","text":"## Notification-Event\n\nSpäter relevant, persistent, Read-State und Pflicht-Deeplink","x":1470,"y":1720,"width":340,"height":170}, + {"id":"a3f19c20d4e5679c","type":"text","text":"**Keine Kategorien:** Quelle ist die einzige fachliche Taxonomie; Ausgabefläche, Lesestatus und Lebensdauer sind getrennte Verhaltensmerkmale.","x":1280,"y":1960,"width":700,"height":110}, + {"id":"a3f19c20d4e56791","type":"text","text":"# Pflichtdaten für Notification-Events\n\n- `id` + feste `source`\n- Titel + kurze Zusammenfassung\n- verpflichtender Deeplink\n- Zeitstempel\n- gelesen / ungelesen\n- optional Actor, Avatar und Critical-Flag\n\nQuelle, Read-State und Zeitraum dienen als Filtermerkmale.","x":2260,"y":1240,"width":780,"height":300}, + {"id":"a3f19c20d4e56792","type":"text","text":"## Kritisch\n\nDialog + Center-Eintrag","x":2260,"y":1590,"width":240,"height":150,"color":"1"}, + {"id":"a3f19c20d4e56793","type":"text","text":"## Notification\n\nLive + Drawer + Vollseite","x":2530,"y":1590,"width":240,"height":150,"color":"3"}, + {"id":"a3f19c20d4e56794","type":"text","text":"## Kurzfeedback\n\nMikro oder Status-Toast","x":2800,"y":1590,"width":240,"height":150,"color":"5"}, + {"id":"a3f19c20d4e56795","type":"text","text":"# Verhalten pro Ereignis\n\n- Ausgabefläche bestimmt Lebensdauer und Interaktion\n- keine Center-Aggregation; chronologisch absteigend\n- Quelle, Read-State und Zeitraum als Filter\n- gelesen ≠ Live-Pop-up geschlossen ≠ gelöst\n- Empfänger final im Development\n- gelöschtes oder gesperrtes Ziel → Nicht-verfügbar-Zustand\n\nCenter-Einträge haben kein X. Permanent Banner sind nie dismissible; echte nicht schließbare Dialoge bleiben eine explizite Development-Ausnahme.","x":2260,"y":1800,"width":780,"height":270}, + {"id":"a3f19c20d4e56799","type":"text","text":"# Standard-Banner\n\nVorhandene Banner-Komponente. Immer dismissible. Für einen klaren Hinweis im aktuellen Kontext; kein eigener Notification-Item-Typ nötig.","x":1580,"y":2320,"width":650,"height":230}, + {"id":"a3f19c20d4e5678b","type":"text","text":"## Quellen-Preset\n\nNeun feste Quellen; Integrationen werden unter System geführt","x":1280,"y":1155,"width":340,"height":170}, + {"id":"a3f19c20d4e5678d","type":"text","text":"## Mikro-Feedback\n\nGespeichert, kopiert, aktualisiert; 1,5 s und nie stapeln","x":1280,"y":1435,"width":340,"height":170}, + {"id":"a3f19c20d4e5678e","type":"text","text":"## Status-Toast\n\nProgress, Erfolg, Warnung oder behebbarer Fehler; maximal fünf","x":1660,"y":1495,"width":340,"height":170}, + {"id":"a3f19c20d4e5678c","type":"text","text":"## Lesestatus\n\nAlle · Ungelesen · Gelesen; Bulk nur auf S02B","x":1660,"y":1220,"width":340,"height":170} + ], + "edges":[ + {"id":"e-entry","fromNode":"note-entry","fromSide":"right","toNode":"c5f29d30c5f67825","toSide":"left","label":"live zeigen"}, + {"id":"c5f29d30c5f67831","fromNode":"c5f29d30c5f67825","fromSide":"right","toNode":"s01","toSide":"left","label":"Kartenkörper"}, + {"id":"e-page","fromNode":"s01","fromSide":"right","toNode":"s02","toSide":"left","label":"Alle anzeigen"}, + { + "id":"e-settings", + "styleAttributes":{"path":"dotted"}, + "fromNode":"note-entry-settings", + "fromSide":"right", + "toNode":"s03", + "toSide":"left" + }, + {"id":"b4e29d30c5f67801","fromNode":"a3f19c20d4e56783","fromSide":"right","toNode":"a3f19c20d4e56789","toSide":"left"}, + {"id":"b4e29d30c5f67802","fromNode":"a3f19c20d4e56784","fromSide":"right","toNode":"a3f19c20d4e56789","toSide":"left"}, + {"id":"b4e29d30c5f67803","fromNode":"a3f19c20d4e56785","fromSide":"right","toNode":"a3f19c20d4e56789","toSide":"left"}, + {"id":"b4e29d30c5f67804","fromNode":"a3f19c20d4e56786","fromSide":"right","toNode":"a3f19c20d4e56789","toSide":"left"}, + {"id":"b4e29d30c5f67805","fromNode":"a3f19c20d4e56787","fromSide":"right","toNode":"a3f19c20d4e56789","toSide":"left"}, + {"id":"b4e29d30c5f67806","fromNode":"a3f19c20d4e56788","fromSide":"right","toNode":"a3f19c20d4e56789","toSide":"left"}, + {"id":"b4e29d30c5f67807","fromNode":"a3f19c20d4e56789","fromSide":"right","toNode":"a3f19c20d4e5678b","toSide":"left","label":"Ausgabe wählen"}, + {"id":"b4e29d30c5f67808","fromNode":"a3f19c20d4e56789","fromSide":"right","toNode":"a3f19c20d4e5678c","toSide":"left"}, + {"id":"b4e29d30c5f67809","fromNode":"a3f19c20d4e56789","fromSide":"right","toNode":"a3f19c20d4e5678d","toSide":"left"}, + {"id":"b4e29d30c5f6780a","fromNode":"a3f19c20d4e56789","fromSide":"right","toNode":"a3f19c20d4e5678e","toSide":"left"}, + {"id":"b4e29d30c5f6780b","fromNode":"a3f19c20d4e56789","fromSide":"right","toNode":"a3f19c20d4e5678f","toSide":"left"}, + {"id":"b4e29d30c5f6780c","fromNode":"a3f19c20d4e5678b","fromSide":"right","toNode":"a3f19c20d4e56791","toSide":"left"}, + {"id":"b4e29d30c5f6780d","fromNode":"a3f19c20d4e5678c","fromSide":"right","toNode":"a3f19c20d4e56791","toSide":"left"}, + {"id":"b4e29d30c5f6780e","fromNode":"a3f19c20d4e5678d","fromSide":"right","toNode":"a3f19c20d4e56791","toSide":"left","label":"gemeinsamer Vertrag"}, + {"id":"b4e29d30c5f6780f","fromNode":"a3f19c20d4e5678e","fromSide":"right","toNode":"a3f19c20d4e56791","toSide":"left"}, + {"id":"b4e29d30c5f67810","fromNode":"a3f19c20d4e5678f","fromSide":"right","toNode":"a3f19c20d4e56791","toSide":"left"}, + {"id":"b4e29d30c5f67811","fromNode":"a3f19c20d4e56791","fromSide":"bottom","toNode":"a3f19c20d4e56797","toSide":"top","label":"anzeigen"}, + {"id":"b4e29d30c5f67812","fromNode":"a3f19c20d4e56791","fromSide":"bottom","toNode":"a3f19c20d4e56798","toSide":"top"}, + {"id":"b4e29d30c5f67813","fromNode":"a3f19c20d4e56791","fromSide":"bottom","toNode":"a3f19c20d4e56799","toSide":"top"}, + {"id":"b4e29d30c5f67814","fromNode":"a3f19c20d4e56791","fromSide":"bottom","toNode":"a3f19c20d4e5679a","toSide":"top"} + ], + "metadata":{ + "version":"1.0-1.0", + "frontmatter":{} + } } \ No newline at end of file diff --git a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/WF-P3 Benachrichtigungen.md b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/WF-P3 Benachrichtigungen.md index aa14d7d4..d18f86fc 100644 --- a/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/WF-P3 Benachrichtigungen.md +++ b/02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/WF-P3 Benachrichtigungen.md @@ -4,23 +4,32 @@ project: HiveGrid Screen Project ticket: D-P3 package: WF-P3 Benachrichtigungen typ: Flow -status: Validiert -subframe: "" +status: Validiert · Development-Handoff +subframe: "https://app.subframe.com/f023064a5ca0/flow/f6bc85c2-186c-40d9-a0c1-bacb03fad68a/edit" canvas: "WF-P3 Benachrichtigungen.canvas" --- # WF-P3 Benachrichtigungen -Status: Validiert (Screen-Liste) -Subframe-Link: - -Canvas: [Canvas]() -Stand: 2026-07-08 +Status: **validiert** · Produktregeln, Timings und alle Referenzscreens für den Development-Handoff abgeschlossen + +Subframe-Link: [Finaler Handoff-Flow]() + +Canvas: [Canvas]() + +Ticket-Handoff: [D-P3 Benachrichtigungen](<../../../Tickets/Fertige Tickets/D-P3 Benachrichtigungen.md>) + +Stand: 2026-08-27 --- ## 1. Kurzfassung -Die Benachrichtigungs-Oberflächen: Glocken-Drawer in der Topbar, volle Seite `/notifications` und die persönlichen Einstellungen. Der Versand-Dienst existiert schon (Dev P1) — wir bauen nur die Bedienung. +Globales In-App-System für fünf klar getrennte Ausgabeflächen: Mikro-Feedback, Status-Toast, Live-Notification, Notification Center und kritischer Dialog. Banner bleiben ein eigener Kontextbaustein. Produktregeln, Timings, Einstellungen und die acht finalen Referenzscreens S01 bis S08 sind für den Development-Handoff validiert. + +Der bisherige Subframe-Flow [`WF-P16 Benachrichtigungen`]() bleibt mit seinen sieben Seiten unverändert bestehen. Der neue Flow verwendet keine seiner Seiten oder Verbindungen. + +Der finale Flow trägt in Subframe technisch noch den internen Altnamen `(MCP) WF-P16 Benachrichtigungen – Review-Draft 2026-08`. Die stabile Flow-URL, dieses Paket und das Ticket ordnen ihn eindeutig `WF-P3 Benachrichtigungen` zu; der Name blockiert die Übergabe nicht. Die nicht mehr benötigte Übersichtsseite S00 wurde nach der Abschlussreview aus Subframe und Obsidian entfernt. --- @@ -29,13 +38,13 @@ Die Benachrichtigungs-Oberflächen: Glocken-Drawer in der Topbar, volle Seite `/ | Frage | Antwort | |---|---| | Welches Ticket/Modul ist betroffen? | D-P3 (Teil Benachrichtigungen), Dev-Pendant AK-P3 | -| Was soll der Nutzer am Ende schaffen? | Neues sofort sehen, per Klick zur Sache springen, Erledigtes wegräumen, selbst steuern, worüber er wie informiert wird | -| Flow, Screen, Zustand oder Doku? | Kleiner Flow: Drawer → Seite + separater Einstellungs-Screen | -| Welche Planning-Quellen wurden geprüft? | `ticket-docs/D-P3.md`, SCREEN-MAP §2, HiveGrid Map | -| Was ist sicher im Scope? | Drawer, Seite, Einstellungen, Bounce-Hinweis, Zustände | -| Was ist sicher nicht im Scope? | Ruhezeiten, Bündelung, Push-Geräte-Liste, Sprach-Wechsler (alles v2) | -| Admin/Normalrolle-Unterschiede? | Keine — Benachrichtigungen sind persönlich, jeder sieht nur seine | -| Unsichere Annahmen? | Ob der Drawer zusätzlich einen Zahnrad-Einstieg zu den Einstellungen bekommt (offen) | +| Was soll der Nutzer am Ende schaffen? | Relevante Ereignisse sofort erkennen, später wiederfinden und per Pflicht-Deeplink exakt zur Sache springen; häufiges Produktfeedback soll ruhig bleiben | +| Flow, Screen, Zustand oder Doku? | Handoff-Flow aus Live-Overlay, Drawer, Vollseite, Settings, Banner-, Toast-, Mikro- und Dialog-Referenzen | +| Welche Planning-Quellen wurden geprüft? | Screen Paket Tracker, HiveGrid Map und der bisherige Subframe-Flow | +| Was ist sicher im Scope? | In-App only, globales Item, neun Quellen, Deeplinks, chronologische Liste, Read-State, Dismissibility, fünf Ausgabeflächen und verbindliche Timing-Leitplanken | +| Was ist sicher nicht im Scope? | Push/SMS, Quiet Hours, Snooze, Digest, vollständiger Ereignis- und Empfängerkatalog sowie tool-spezifische Notification-Layouts | +| Admin/Normalrolle-Unterschiede? | Empfänger werden erst im Development anhand von Zuständigkeit und Berechtigungen finalisiert | +| Development-owned Follow-ups? | Konkrete Empfängerlogik, Ereignis-Katalog, Deeplink-Fallback und die explizite Liste echter nicht schließbarer Blocker | --- @@ -45,84 +54,216 @@ Die Benachrichtigungs-Oberflächen: Glocken-Drawer in der Topbar, volle Seite `/ |---|---| | Ticket/Modul | D-P3 · Benachrichtigungen | | Nutzerrolle | Alle (persönlicher Bereich) | -| Startpunkt | Glocke in der Topbar (App-Gerüst, D0) | -| Ziel | Meldung gesehen → zur Sache gesprungen oder weggeräumt | -| Haupt-Archetyp | A2 Liste + Drawer · A6 Settings | -| Bespoke-Anteil | Keiner — reines Baukasten-Compose | -| Out of scope | Ruhezeiten, Bündelung, Push, Sprach-Wechsler (v2) | +| Startpunkt | Live-Ereignis im App-Shell oder Glocke in der Topbar | +| Ziel | Meldung verstanden → im Drawer/Center wiederfinden → per Pflicht-Deeplink zur Sache | +| Haupt-Archetyp | A2 Liste + Drawer · A6 Settings · flüchtige Overlays · blockierender Dialog | +| Bespoke-Anteil | Niedrig — bestehende Komponenten werden global komponiert | +| Out of scope | Externe Kanäle, tool-eigene Sonderlayouts, vollständige Event-Matrix und Empfängerregeln | --- -## 4. Entscheidungen (validiert 2026-07-08) +## 4. Entscheidungen (Produktstand 2026-08-27) | Entscheidung | Status | Notiz | |---|---|---| -| Drawer UND Seite als eigene Frames | genommen | Seite = Drawer in groß; Drawer wird Muster für künftige Topbar-Drawer | -| Drawer-Inhalt: Hinweis/Link zur vollen Seite | genommen | Davids Ergänzung — „Alle anzeigen" | -| Drawer: Aktualisieren-Aktion | genommen | Davids Ergänzung | -| Einzelne Benachrichtigung wegklickbar (wenn erledigt) | genommen | Davids Ergänzung; wegklicken ≠ nur „gelesen" — Verhalten s. offene Fragen | -| Klick auf Eintrag springt typ-abhängig zur Sache | genommen | z. B. neue Aufgabe → Aufgabe öffnen; Typ-Icon je Quelle (Aufgabe, E-Mail, Antrag, System …) | -| Bounce-Hinweis als Banner, nicht als Screen | genommen | „E-Mails an dich kommen aktuell nicht an" + Prüf-Knopf | -| Live-Verbindung weg = Inline-Hinweis | genommen | „aktualisiert sich gerade nicht" | -| Einstellungen unter Einstellungen → Persönlich → Benachrichtigungen | genommen | passt zum Infrastruktur-Beschluss (ein Einstellungen-Hub) | +| Nur In-App | Validiert | E-Mail, Push und SMS sind keine Benachrichtigungskanäle in diesen Settings | +| Eingehende E-Mail als Quelle | Validiert | Jede eingehende E-Mail ist ein eigener chronologischer Eintrag mit Betreff, Ausschnitt und Deeplink | +| Nur Quellen, keine Kategorien | Validiert | Quelle ist die einzige fachliche Taxonomie und Filtergrundlage; es gibt keine zusätzliche globale Kategorie-Ebene | +| Feste Quellen | Validiert | Chat · E-Mail · Aufgaben · Kalender · Leads · Projekte · Automation · System · Billing; Integrationen werden unter System geführt | +| Quellenfarben ohne Severity-Bedeutung | Validiert | Chat grün · E-Mail teal · Aufgaben rot · Kalender gelb · Leads blau · Projekte violett · Automation orange · System grau · Billing indigo | +| Pflicht-Deeplink | Validiert | Jedes persistente Notification-Item führt zum exakten Tool, Objekt oder Fallback-Ziel | +| Ausgabefläche statt Attention-Level | Validiert | Mikro-Feedback, Status-Toast, Notification-Event und kritische Unterbrechung sind verschiedene Verhaltensklassen, keine farbigen Dringlichkeitspunkte | +| Ungelesen-Zustand | Validiert | Fokus-Schatten plus kleiner blauer Punkt am Quell-Icon; kein zusätzlicher leerer oder numerischer Kreis rechts | +| Keine Center-Aggregation | Validiert | Ein Ereignis entspricht genau einem Listeneintrag; auch mehrere E-Mails stehen einzeln nach Zeit sortiert | +| Dismissibility der Ausgabeflächen | Validiert | Live-Overlays, Status-Toasts, Standard Banner und der normale kritische Dialog sind per X schließbar; Permanent Banner bleibt die feste Ausnahme | +| Aktionen im Live-Overlay | Validiert | `Gelesen` markiert den persistenten Eintrag als gelesen und beendet das Live-Overlay; X schließt nur das Overlay und lässt den Eintrag ungelesen im Center | +| Center-Dismissibility | Validiert | Center-Einträge haben kein X; gelesen/ungelesen ist der einzige Listenstatus. X existiert nur am Live-Overlay und verändert den Read-State nicht | +| Einstellungen S03 | Validiert | Globaler Schalter plus neun Quellen steuern ausschließlich Live-Pop-ups; ausgeschaltete Einblendungen bleiben vollständig im Notification Center | +| Kritischer Dialog | Validiert | Echte `Dialog`-Komponente, kein Auto-Dismiss, standardmäßig X/Schließen; Titel, Beschreibung und Hauptaktion sind ereignisabhängig | +| Nicht schließbarer Dialog | Development-owned | Nur für ausdrücklich definierte echte Blocker; dann darf das X ereignisspezifisch entfallen | +| Live-Overlay-Limit | Validiert | Oben rechts höchstens drei sichtbare Karten; weitere Ereignisse werden als Stapel mit `+N`-Badge an der obersten Karte angedeutet | +| Status-Toast-Limit | Validiert | Unten rechts höchstens fünf sichtbare Toasts; neuester Toast liegt am unteren Rand | +| Timing-Regeln | Validiert | Auto-Dismiss, Loading-Verzögerung, Pausen und Zustandswechsel gelten wie in Abschnitt 6 | +| Standard Banner | Validiert | Bestehender `Banner Alert`; immer dismissible | +| Permanent Banner | Validiert | Dünner globaler Baustein ganz oben; niemals dismissible, bleibt bis zur Lösung | +| Offline als Permanent-Banner-Zustand | Validiert | Keine eigene Komponente. Offline belegt denselben Slot mit höchster Priorität; nach Reconnect erscheint der zuvor relevante permanente Hinweis wieder | +| Empfängerlogik | Development-owned | Design liefert Suggestions; Zuständigkeit/Berechtigung entscheiden final | -### Happy Path +### Hauptfluss -1. Glocke zeigt Ungelesen-Zähler → Klick öffnet Drawer (S01). -2. Eintrag anklicken → Sprung zur Sache (Aufgabe, Anfrage, Antrag …), Eintrag wird gelesen. -3. Erledigtes wegklicken oder „alle als gelesen"; für Historie/Aufräumen „Alle anzeigen" → Seite (S02). -4. Wer weniger/mehr will: Einstellungen (S03) — pro Ereignis-Typ In-App/E-Mail + Priorität, Master-Schalter. - -### Meldungs-/Error-States (validiert) - -| Ereignis | UI-Form | Blockiert? | Bauen? | Copy/Notiz | -|---|---|---|---|---| -| E-Mails kommen nicht an (Bounce) | Banner in Drawer + Seite | nein | Nur dokumentieren | „E-Mails an dich kommen aktuell nicht an." + Prüf-Knopf | -| Live-Verbindung weg | Inline in Drawer/Seite | nein | Nur dokumentieren | „Aktualisiert sich gerade nicht — neu laden." | -| Liste lädt nicht | Fehler-Zustand (A7) | nein | Wiederverwenden | Baukasten-Fehlerzustand mit Lösungs-Knopf | -| Keine Benachrichtigungen | Leer-Zustand | nein | Nur dokumentieren | „Keine Benachrichtigungen — du bist auf dem Stand." | +1. Ein persistentes Ereignis erscheint oben rechts als Live-Notification (S05); maximal drei Karten sind sichtbar. +2. Klick auf den Kartenkörper öffnet S01, scrollt das zugehörige Item in den sichtbaren Bereich und lässt dessen Fokusrahmen kurz heller aufscheinen. Allein das Öffnen setzt den Eintrag noch nicht auf gelesen. +3. Klick auf den blauen Ziel-Link springt direkt zum exakten Ziel und setzt das Ereignis auf gelesen. +4. Im Drawer kann jedes ungelesene Item einzeln über `Gelesen` markiert werden. Die globale Aktion `Alle als gelesen` existiert nur auf S02B. +5. `Alle Benachrichtigungen öffnen` ist im Drawer oben links und unten vorhanden und führt zu S02B. +6. S02B trennt Alle / Ungelesen / Gelesen, filtert ausschließlich nach Quelle und Zeitraum und unterstützt Checkboxen plus Bulk-Aktionen. +7. Mehrere Ereignisse derselben Quelle bleiben einzelne, chronologisch einsortierte Items. --- -## 7. Validierte Screen-Liste +## 5. Development-Modell und Interaktionen + +### Ausgabeflächen + +| Technischer Name | Bedeutung | Gespeichert? | Referenz | +|---|---|---|---| +| `micro-feedback` | Sehr häufige, harmlose Bestätigung wie „Änderungen gespeichert" | nein | S07 | +| `status-toast` | Fortschritt, Hintergrundstatus, Erfolg, Warnung oder behebbarer Fehler | nein | S06 | +| `notification-event` | Relevantes, anklickbares Ereignis mit Read-State und Pflicht-Deeplink | ja | S05 → S01/S02B | +| `critical-interruption` | Seltener unterbrechender Dialog bei unmittelbarem Risiko; standardmäßig schließbar und bei Bedarf parallel als Notification-Event gespeichert | ereignisabhängig | S08 | +| `banner` | Kontextbezogener oder global permanenter Zustand | nein | S04 | + +### Minimaler Event-Vertrag + +- `id` +- `source`: eine der neun festen Quellen; für die sichtbare Quelle Chat lautet der technische Wert `chat` +- `title` +- `summary` +- `createdAt` +- `readAt` oder eindeutiger Read-State +- `targetLabel` und `targetUrl` +- optional `actor`, Avatar oder Tool-Icon +- optional `criticalInterruption`, wenn zusätzlich S08 ausgelöst wird + +Das Center erhält eine flache Ereignisliste und sortiert nach `createdAt` absteigend. Quelle, Read-State und Zeitraum sind Filtermerkmale; es gibt weder Kategorien noch visuelle Sammelgruppen. + +### Live-Notification → Drawer + +- Klick auf den Kartenkörper: S01 öffnen, relevantes Item fokussieren, Read-State unverändert lassen. +- Ziel-Link: direkt zum Ziel navigieren und als gelesen markieren. +- `Gelesen`: persistenten Eintrag als gelesen markieren und die Live-Karte schließen, ohne zu navigieren. +- X im Live-Overlay: nur das flüchtige Overlay schließen; der persistente Center-Eintrag bleibt bestehen. +- Fokus-Schein im Drawer: 150 ms aufhellen, 350 ms halten, 200 ms zurücknehmen; kein Bounce. Bei reduzierter Bewegung nur den Rahmen für etwa 700 ms heller zeigen. +- Klick auf das `+N`-Badge oder den Stapel öffnet den Drawer am neuesten noch nicht sichtbaren Ereignis. + +### Settings-Vertrag für Live-Einblendungen + +- `liveOverlayEnabled`: globaler boolescher Schalter für S05. +- `liveOverlayBySource`: boolesche Einstellung je fester Quelle. +- Ist der globale Schalter aus, erscheinen keine Live-Pop-ups; die je Quelle gespeicherten Werte bleiben erhalten und gelten wieder nach dem Einschalten. +- Ist nur eine Quelle aus, wird S05 für Ereignisse dieser Quelle unterdrückt. +- Ereigniserzeugung, Center-Persistenz, Read-State sowie S01/S02B bleiben von beiden Einstellungen unberührt. +- Kritische Dialoge, Permanent Banner, Status-Toasts und Microfeedback umgehen diese Settings vollständig. + +--- + +## 6. Timing und Stapelregeln · validiert + +| Zustand | Sichtbarkeit | Ende | +|---|---|---| +| Live-Notification | 8 s | automatisch oder X; Hover/Fokus pausiert | +| Erfolg-Toast | 4 s | automatisch oder X | +| Info-Toast | 6 s | automatisch oder X | +| Warnung | 8 s | automatisch oder X | +| Fehler mit Aktion | unbegrenzt | X oder erfolgreiche Aktion; ein fehlgeschlagener Retry hält den Toast offen | +| Loading/Fortschritt | ab 500 ms Verzögerung, dann solange aktiv | derselbe Toast wandelt sich in Erfolg oder Fehler um | +| Langer Hintergrundprozess | nach 10 s zu „Läuft im Hintergrund" verdichten | nach weiteren 5 s ausblenden; Prozess läuft weiter | +| Mikro-Feedback | 1,5 s | automatisch; kein X und kein Stapel | +| Kritischer Dialog | kein Auto-Dismiss | X, `Schließen` oder erfolgreiche ereignisspezifische Hauptaktion; echte nicht schließbare Blocker nur nach expliziter Development-Regel | + +Für Live-Notifications gelten maximal drei sichtbare Karten und ein Überlaufstapel. Für Status-Toasts gelten maximal fünf sichtbare Karten. Mikro-Feedback zeigt immer nur eine Instanz; ein neuer identischer Hinweis ersetzt den bestehenden. Hover, Tastaturfokus und ein nicht sichtbarer Browser-Tab pausieren automatische Timer; nach Rückkehr bleiben mindestens zwei Sekunden Restzeit. + +Status-Toast und Mikro-Feedback werden über eine gemeinsame Ereignis- beziehungsweise Operations-ID dedupliziert. Beschreiben beide denselben Vorgang oder dasselbe Ergebnis, wird nur die informationsreichere Fläche gezeigt: Ein aktiver Status-Toast gewinnt gegenüber Mikro-Feedback. Gehören sie zu unterschiedlichen Vorgängen, dürfen beide gleichzeitig erscheinen; das Mikro-Feedback steht links neben dem unten rechts verankerten Status-Toast-Stapel und überlagert ihn nicht. + +Wird aus einem laufenden Status-Toast ein später relevantes Ergebnis mit Ziel, endet der Toast und derselbe Vorgang wechselt zu genau einem persistenten `notification-event`. Es erscheinen nicht zusätzlich ein Erfolg-Toast und eine Live-Notification für dasselbe Ergebnis. + +Bewegung: Live-Notification und Toast ca. 250 ms hinein, 180 ms hinaus; Mikro-Feedback 150 ms hinein und 120 ms hinaus; kritischer Dialog 320 ms mit 8 px ruhigem Settle. Bei `prefers-reduced-motion` nur über Opacity wechseln. + +--- + +## 7. Brainstorming: Kurzinfos und Status + +| Fall | Empfohlene Fläche | Beispiel | +|---|---|---| +| Sehr häufige Bestätigung | Mikro-Feedback | Änderungen gespeichert · Link kopiert · Reihenfolge aktualisiert | +| Bekannter Fortschritt | Status-Toast mit Progress | Datei hochladen · Import · Download | +| Unbestimmter Hintergrundprozess | Status-Toast mit Spinner | Synchronisierung läuft · Daten werden verarbeitet | +| Relevanter Abschluss ohne weiteres Ziel | Erfolg-Toast | Import abgeschlossen · Datei hochgeladen | +| Abschluss mit später nutzbarem Ergebnis | Notification-Event | Export fertig · Bericht erstellt · Dokument bereit | +| Verzögerung oder instabile Verbindung | Warn-Toast | Speichern verzögert · Synchronisierung pausiert | +| Behebbarer Fehler | persistenter Fehler-Toast | Upload fehlgeschlagen · erneut versuchen | +| Rückgängig machbare Aktion | Aktions-Toast | Projekt archiviert · Rückgängig | +| Kontextfehler im Formular | Inline Alert | Pflichtfeld fehlt · Eingabe ungültig | +| App offline | Permanent Banner | Offline – Änderungen werden später synchronisiert | +| Akutes Risiko / mögliche Datenverluste | kritischer Dialog plus Center-Eintrag | Änderungen konnten nicht gespeichert werden | + +Faustregel: Nur ein Ereignis mit später relevantem Ziel gehört ins Notification Center. Reines Feedback zur gerade ausgeführten Aktion bleibt Mikro-Feedback, Toast oder Inline Alert. + +--- + +## 8. Komponentenstand + +| Komponente | Zweck | Status | +|---|---|---| +| [Review Draft – Notification Item]() | Einheitliches Item für Live-Overlay, Drawer und Vollseite | Validiert | +| [Review Draft – Permanent Banner]() | Dünner globaler, nicht schließbarer Banner | Validiert | + +Der bestehende `Banner Alert` bleibt der Standard Banner. Für Offline gibt es keine separate Komponente: Text, Icon und Farbe werden als Zustand des `Banner Permanent` gesetzt. Die frühere Subframe-Komponente `Banner Offline` wurde gelöscht. `Alert` und `Badge Feedback` bleiben erhalten, gehören aber nicht zum persistenten Notification-System. + +Im Notification Item steuert `sourceColor` nur Icon/Avatar und Quellenlabel. `metadata` steht als kleiner Zeitstempel oben rechts. `targetLabel` ist die einzeilige blaue Zielverknüpfung und erhält bei Hover eine leichte neutrale Fläche. Das Item selbst bekommt bei Hover einen leichten Schatten. + +`state="unread"` steuert Fokus-Schatten und kleinen blauen Punkt am Quell-Icon/Avatar. Der zuvor getestete zusätzliche blaue Kreis/Count rechts wurde vollständig verworfen. `markAsRead` blendet den dauerhaft sichtbaren Button `Gelesen` mit Haken ein. Bei `state="read"` verschwinden Icon-Punkt und Gelesen-Aktion. + +--- + +## 9. Validierte Handoff-Screens | ID | Screen/Zustand | Typ | Umsetzung | Ort | Status | |---|---|---|---|---|---| -| S01 | Glocken-Drawer | Drawer | Bauen | Topbar, global | Validiert | -| S02 | Benachrichtigungen Seite | Screen | Bauen | `/notifications` | Validiert | -| S03 | Benachrichtigungen Einstellungen | Settings | Bauen | `/settings/notifications` | Validiert | -| D01 | Bounce-Banner | Banner | Nur dokumentieren | in S01/S02 | Validiert | -| D02 | Leer-Zustand | Inline | Nur dokumentieren | in S01/S02 | Validiert | -| D03 | Live-Verbindung weg | Inline | Nur dokumentieren | in S01/S02 | Validiert | +| S01 | Notification Center – Glocken-Drawer | Drawer | Gebaut | Topbar, global | Validiert | +| S02B | Benachrichtigungen – Vollseite mit Fokus-Schatten | Screen | Gebaut | `/notifications` | Validiert | +| S03 | Benachrichtigungen – Globale Einstellungen | Settings | Gebaut | `/settings/notifications` | Validiert | +| S04 | Permanent und Standard Banner | Referenzscreen | Gebaut | global + Content | Validiert | +| S05 | Live-Notifications im App-Shell | Overlay-Referenz | Gebaut | oben rechts | Validiert | +| S06 | Kurzinfos, Status und Upload | Toast-Referenz | Gebaut | unten rechts | Validiert | +| S07 | Mikro-Feedback | Micro-Referenz | Gebaut | unten rechts | Validiert | +| S08 | Kritischer Dialog | Dialog-Referenz | Gebaut | modal | Validiert | --- -## 8. Grid +## 10. Grid ```text -Glocke (Topbar, D0) -> S01 -> (Alle anzeigen) -> S02 -Einstellungen -> S03 +Notification-Event -> S05 Live-Overlay -> Kartenkörper -> S01 Drawer -> S02B Vollseite + -> Ziel-Link -> exaktes Ziel +S01/S02B -> Einstellungen -> S03 +Häufige Bestätigung -> S07 Mikro-Feedback +Fortschritt / Ergebnis / behebbarer Fehler -> S06 Status-Toast +Akutes Risiko -> S08 kritischer Dialog + persistenter Center-Eintrag +Fortbestehendes Problem / Offline -> S04 Permanent Banner +Kontextbezogener Hinweis -> S04 Standard Banner ``` --- -## 9. Screen-Pakete +## 11. Screen-Pakete - [[S01 Glocken-Drawer]] - [[S02 Benachrichtigungen Seite]] - [[S03 Benachrichtigungen Einstellungen]] +- [[S04 Permanent und Standard Banner]] +- [[S05 Live Notifications im App-Shell]] +- [[S06 Kurzinfos Status und Upload]] +- [[S07 Mikro Feedback]] +- [[S08 Kritischer Dialog]] --- -## 10. Offene Fragen +## 12. Development-owned Follow-ups -- Drawer-Zahnrad als Direkteinstieg zu S03? (klein, noch nicht validiert) -- Wegklicken: verschwindet der Eintrag endgültig oder nur aus der Ansicht (Archiv)? → Frage an Dev, UI zeigt erstmal „X entfernt aus Liste" -- Prioritäts-Marker: eigene Optik (Farbe/Icon) — beim Subframe-Bau entscheiden +- Welche konkreten Ereignisse werden als `notification-event` gespeichert? +- Welche Empfänger werden je Ereignis anhand von Zuständigkeit und Berechtigungen ermittelt? +- Welcher Fallback erscheint, wenn das Deeplink-Ziel gelöscht oder nicht mehr erlaubt ist? +- Welche wenigen Ereignisse sind echte nicht schließbare Dialog-Blocker? ## Handoff-Check -- [x] Jeder Screen ist mit Umsetzung markiert. -- [x] Meldungs-/Error-State-Matrix ist ausgefüllt. -- [x] Banner/Inline-Meldungen sind dokumentiert. -- [ ] Subframe-Link ist eingetragen. *(Subframe erst nach explizitem OK)* +- [x] Neuer unabhängiger Subframe-Flow ist verlinkt. +- [x] Alter Flow bleibt unverändert bestehen. +- [x] Acht finale Handoff-Seiten S01 bis S08 und zwei Komponenten sind gebaut und gerendert geprüft. +- [x] Die nur für die Review benötigte Übersichtsseite S00 wurde aus Subframe und Obsidian entfernt. +- [x] Quellenmodell, Stapellimits, Klickverhalten, Timings und Status-Beispiele sind als Development-Leitplanken dokumentiert. +- [x] Definitiv entschiedene Produktregeln und Timings sind als validiert markiert. +- [x] Gemeinsame Screen-Review abgeschlossen. +- [x] S03 und sämtliche Designentscheidungen finalisiert. +- [x] Verbleibende Ereignis-, Empfänger- und Berechtigungslogik ist ausdrücklich als Development-owned markiert. diff --git a/02 Wireframes/Screen Paket Tracker.md b/02 Wireframes/Screen Paket Tracker.md index 41ab5aaa..24b96d75 100644 --- a/02 Wireframes/Screen Paket Tracker.md +++ b/02 Wireframes/Screen Paket Tracker.md @@ -35,7 +35,7 @@ Diese Datei ist der erste Ort, um zu sehen: | WF-P2 Admin RBAC | D-P2 | Auth/Admin | In Subframe | [MD]() | [Canvas]() | [Subframe]() | Review | Neue Seiten erstellt; Permission-Bundles als Arbeitsgeruest; Gruppen/Reassign raus | | WF-P2 Konto loeschen | D-P2 | Auth/Settings | Backlog | [MD]() | [Canvas]() | [Subframe]() | Backlog | Gesamter Account/Konto-Loeschflow geparkt; bestehende Screens nur Referenz | | WF-P2 Workspace loeschen | D-P2 | Auth/Settings | Backlog | [MD]() | [Canvas]() | - | Backlog | Eigener Workflow; erst planen, wenn Workspace Settings gebaut/validiert sind | -| WF-P3 Benachrichtigungen | D-P3 | Querschnitt | Validiert | [MD]() | [Canvas]() | - | Subframe nach explizitem OK | Screens validiert 2026-07-08; Drawer wird Muster fuer Topbar-Drawer | +| WF-P3 Benachrichtigungen | D-P3 | Querschnitt | Fertig / Development-Handoff | [MD]() | [Canvas]() | [Subframe]() | Uebergabe abgeschlossen | 8/8 finale Seiten S01-S08 und zwei Komponenten validiert; S00 entfernt; alter 7-Seiten-Flow bleibt unveraendert; technischer Flow-Altname ist nicht blockierend | | WF-P3 Audit Log | D-P3 | Querschnitt | Validiert | [MD]() | [Canvas]() | - | Subframe nach explizitem OK | Screens validiert 2026-07-08; Export als Reiter; M03 = wiederverwendbares Verlauf-Muster | | WF-P4 Aufgaben | D-P4 | Aufgaben & Dateien | Fertig / Development-Handoff | [MD]() | [Canvas]() | [Subframe]() | Übergabe abgeschlossen | 16/16 Live-Seiten synchron: S01/S02/S03/M01, zwei finale V01-Repräsentationen und zehn Interaktionsmodals; Zustände in Z01; Flow-Name `WF-P16 Aufgaben` als nicht blockierende Abweichung dokumentiert | | WF-P4 Dateien | D-P4 | Aufgaben & Dateien | Validiert | [MD]() | [Canvas]() | - | Subframe nach explizitem OK | Screens validiert 2026-07-08; Teilen/Ordner/Versionen sichtbar als Backlog v2 | @@ -118,10 +118,14 @@ Diese Datei ist der erste Ort, um zu sehen: | M01 | Loeschung anfragen | WF-P2 Konto loeschen | Modal | Spaeter | Backlog | von zukuenftigem Settings-Einstieg | [MD]() | [Subframe]() | [Canvas]() | | D01 | Anfrage gesendet | WF-P2 Konto loeschen | Toast/Status | Nur dokumentieren | Backlog | nach M01 | [MD]() | - | [Canvas]() | | D02 | Keine Berechtigung | WF-P2 Konto loeschen | Permission State | Nur dokumentieren | Backlog | in S01 | [MD]() | - | [Canvas]() | -| S01 | Glocken-Drawer | WF-P3 Benachrichtigungen | Drawer | Bauen | Validiert | Topbar, global | [MD]() | - | [Canvas]() | -| S02 | Benachrichtigungen Seite | WF-P3 Benachrichtigungen | Liste | Bauen | Validiert | `/notifications` | [MD]() | - | [Canvas]() | -| S03 | Benachrichtigungen Einstellungen | WF-P3 Benachrichtigungen | Settings | Bauen | Validiert | `/settings/notifications` | [MD]() | - | [Canvas]() | -| D01 | Bounce-Banner (E-Mails kommen nicht an) | WF-P3 Benachrichtigungen | Banner | Nur dokumentieren | Validiert | in S01/S02/S03 | [MD]() | - | - | +| S01 | Glocken-Drawer | WF-P3 Benachrichtigungen | Drawer | Gebaut | Fertig / Development-Handoff | Topbar, global | [MD]() | [Subframe]() | [Canvas]() | +| S02B | Benachrichtigungen Seite mit Fokus-Schatten | WF-P3 Benachrichtigungen | Liste | Gebaut | Fertig / Development-Handoff | `/notifications` | [MD]() | [Subframe]() | [Canvas]() | +| S03 | Benachrichtigungen Einstellungen | WF-P3 Benachrichtigungen | Settings | Gebaut | Fertig / Development-Handoff | `/settings/notifications` | [MD]() | [Subframe]() | [Canvas]() | +| S04 | Permanent und Standard Banner | WF-P3 Benachrichtigungen | Referenzscreen | Gebaut | Fertig / Development-Handoff | global + Content | [MD]() | [Subframe]() | [Canvas]() | +| S05 | Live Notifications im App-Shell | WF-P3 Benachrichtigungen | Overlay-Referenz | Gebaut | Fertig / Development-Handoff | global, oben rechts | [MD]() | [Subframe]() | [Canvas]() | +| S06 | Kurzinfos Status und Upload | WF-P3 Benachrichtigungen | Toast-Referenz | Gebaut | Fertig / Development-Handoff | global, unten rechts | [MD]() | [Subframe]() | [Canvas]() | +| S07 | Mikro Feedback | WF-P3 Benachrichtigungen | Micro-Referenz | Gebaut | Fertig / Development-Handoff | global, unten rechts | [MD]() | [Subframe]() | [Canvas]() | +| S08 | Kritischer Dialog | WF-P3 Benachrichtigungen | Dialog-Referenz | Gebaut | Fertig / Development-Handoff | global, modal | [MD]() | [Subframe]() | [Canvas]() | | S01 | Protokoll-Ansicht | WF-P3 Audit Log | Admin Liste | Bauen | Validiert | `/admin/audit` | [MD]() | - | [Canvas]() | | S02 | Exporte (Reiter) | WF-P3 Audit Log | Admin Liste | Bauen | Validiert | `/admin/audit`, Reiter | [MD]() | - | [Canvas]() | | M01 | Detail-Drawer (Vorher/Nachher) | WF-P3 Audit Log | Drawer | Bauen | Validiert | aus S01 | [MD]() | - | [Canvas]() | @@ -387,9 +391,16 @@ Diese Datei ist der erste Ort, um zu sehen: | WF-P2 Konto loeschen | Gesamter Account/Konto-Loeschflow | Backlog | Account/Konto-Loeschen wird geparkt und nicht als aktueller v1-Flow weitergebaut. | Konto loeschen und Workspace loeschen sind zwei getrennte Workflows | | WF-P2 Workspace loeschen | Eigener Workspace-Loeschflow | Backlog | Workspace/Tenant-Loeschen wird als eigener Workflow vorgemerkt. | Startpunkt spaeter in Workspace Settings; Settings sind noch nicht gebaut | | WF-P2 Konto/Workspace loeschen | Voller Loesch-/Export-Wizard | Backlog | Erklaerung, Datenexport, Reauth, Confirm Phrase, Countdown und operative Bearbeitung spaeter klaeren. | Kein mehrstufiger Wizard jetzt | -| WF-P3 Benachrichtigungen | Drawer-Umfang | Genommen | Drawer enthaelt Link zur vollen Seite, Aktualisieren und Wegklicken einzelner Eintraege; Klick springt typ-abhaengig zur Sache. | Validiert 2026-07-08 | -| WF-P3 Benachrichtigungen | Wegklicken-Verhalten | Offen | Endgueltig loeschen oder archivieren? | Frage an Dev; UI zeigt erstmal nur Entfernen aus der Liste | -| WF-P3 Benachrichtigungen | Drawer-Zahnrad zu Einstellungen | Offen | Direkteinstieg vom Drawer zu den Benachrichtigungs-Einstellungen? | Klein; beim Subframe-Bau entscheiden | +| WF-P3 Benachrichtigungen | Finaler Handoff-Flow | Validiert | Acht finale Seiten S01-S08 ohne Wiederverwendung oder Verbindung zum alten Flow; S00 wurde nach der Review entfernt, der alte Flow bleibt bestehen. | Gemeinsame Schlussreview am 2026-08-27 abgeschlossen | +| WF-P3 Benachrichtigungen | In-App only | Validiert | Keine E-Mail-/Push-/SMS-Kanaele; eingehende E-Mail ist nur eine Ereignisquelle. | Produktentscheidung 2026-08-27 | +| WF-P3 Benachrichtigungen | Globales Modell | Validiert | Pflicht-Deeplink und genau neun Quellen statt zusaetzlicher Kategorien: Chat, E-Mail, Aufgaben, Kalender, Leads, Projekte, Automation, System, Billing. Integrationen gehoeren zu System. | Ereignis-Katalog und Empfaenger bleiben Development-Detail | +| WF-P3 Benachrichtigungen | Ausgabeflaechen | Validiert | Mikro-Feedback, Status-Toast, persistentes Notification-Event und kritische Unterbrechung sind getrennte Verhaltensklassen; Banner bleiben ein eigener Kontextbaustein. | S04 bis S08 zeigen die Referenzen | +| WF-P3 Benachrichtigungen | Quellenfarben | Validiert | Chat gruen, E-Mail teal, Aufgaben rot, Kalender gelb, Leads blau, Projekte violett, Automation orange, System grau, Billing indigo. Farben tragen keine Severity. | In S01/S02B angewendet | +| WF-P3 Benachrichtigungen | Ungelesen und Bulk | Validiert | Fokus-Schatten plus blauer Punkt am Icon; kein rechter Count-Kreis. S01 hat einzelne Gelesen-Aktionen, S02B zusaetzlich Checkboxen und zwei Bulk-Buttons. | In S01/S02B umgesetzt | +| WF-P3 Benachrichtigungen | Overlay-, Toast- und Timing-Regeln | Validiert | Oben rechts maximal drei Live-Karten plus `+N`-Stapel; unten rechts maximal fuenf Status-Toasts; Mikro-Feedback maximal eine Instanz fuer 1,5 s; Auto-Dismiss und Loading-Uebergaenge sind dokumentiert. | S05 bis S07 und Paketdoku | +| WF-P3 Benachrichtigungen | Live-Karte zu Drawer | Validiert | Kartenkoerper oeffnet S01 und hebt das Ziel-Item kurz per Fokus-Schein hervor, ohne es zu lesen; blauer Ziel-Link navigiert direkt und markiert gelesen. | Development-Interaktion dokumentiert | +| WF-P3 Benachrichtigungen | Fehler und kritischer Dialog | Validiert / Development-Detail offen | Fehler mit Aktion bleiben bis X oder erfolgreicher Aktion. Kritischer Dialog nutzt die echte Dialog-Komponente, hat kein Auto-Dismiss und ist standardmaessig per X/Schliessen verlassbar; echte nicht schliessbare Blocker werden explizit im Development festgelegt. | S06/S08 umgesetzt und visuell validiert | +| WF-P3 Benachrichtigungen | Banner-Regeln | Validiert | Standard Banner immer dismissible; ein Permanent-Banner-Slot duenn, global ganz oben und nie dismissible. Offline ist keine eigene Komponente, sondern der hoechst priorisierte Zustand dieses Slots und verdraengt andere permanente Hinweise nur bis zum Reconnect. | S04 auf Platzhalter-App-Shell reduziert; `Banner Offline` entfernt | | WF-P3 Audit Log | Export-Ort | Genommen | Export-Uebersicht als Reiter im Protokoll-Screen (kein eigener Menuepunkt). | Validiert 2026-07-08 | | WF-P3 Audit Log | Sortierung/Filter | Genommen | Nach Mitarbeiter, Zeitraum, Bereich (Modul) und Aenderungs-Art sortier-/filterbar; Quick-Filter per Klick auf Tabellenwerte. | Davids Ergaenzung 2026-07-08 | | WF-P3 Audit Log | Drawer-Komponente geteilt? | Offen | Teilen Detail-Drawer (M01) und Objekt-Verlauf (M03) eine Komponente? | Beim Subframe-Bau klaeren | diff --git a/05 HiveGrid Map/HiveGrid Map.canvas b/05 HiveGrid Map/HiveGrid Map.canvas index 12116015..4540bef5 100644 --- a/05 HiveGrid Map/HiveGrid Map.canvas +++ b/05 HiveGrid Map/HiveGrid Map.canvas @@ -68,7 +68,7 @@ {"id":"5c72e7b04059503a","type":"text","text":"## Integrationen (Apps verbinden)\n**Ticket:** `D-P5` · **Status:** 🟡 vorgeplant (Screens validiert, Subframe offen)\n**Wo:** `/admin/integrations`\n\n**Was drin ist:** App-Katalog (nach Kategorie, mit Status-Ampel), Verbindung einrichten per Schritt-für-Schritt-Assistent, Verbindungs-Zustand + Sync-Verlauf in Klartext\n\n**So funktioniert's:** Das gemeinsame Gerüst für alle Anbindungen — E-Mail, Telefonie, Kalender, Signatur nutzen alle dieselben Verbindungs-Karten.","x":5537,"y":3100,"width":460,"height":360,"color":"5"}, {"id":"29ca06733a9b243b","type":"text","text":"## Telefonie (Anrufe)\n**Ticket:** `D-P15` · **Status:** ⬜ offen\n**Wo:** `/calls` + Einstellungen\n\n**Was drin ist:** AirCall verbinden (Telefon-Nutzer zuordnen), Anruf-Liste + Detail (Notiz, Aufnahme), Anruf-Knopf direkt an Kontakt/Anfrage/Projekt\n\n**So funktioniert's:** Anrufe werden automatisch dem richtigen Kontakt zugeordnet. Unbekannte Nummer ruft an → wird automatisch eine Anfrage im Lead-Eingang.","x":5577,"y":2160,"width":460,"height":360,"color":"5"}, {"id":"0f6acf7087283c0c","type":"text","text":"## Aktivitäts-Protokoll (Audit-Log)\n**Ticket:** `D-P3` (Teil) · **Status:** 🟡 vorgeplant (Screens validiert, Subframe offen)\n**Wo:** `/admin/audit`\n\n**Was drin ist:** Wer hat wann was geändert — als deutscher Klartext-Satz, mit Filter und Vorher/Nachher-Vergleich, Export mit Zweck-Angabe\n\n**So funktioniert's:** Der gleiche Verlauf ist auch an jedem Datensatz einblendbar (»Verlauf dieses Objekts«). Unterscheidet Mensch / Automation / Agent / Admin.","x":6037,"y":3100,"width":460,"height":360,"color":"5"}, - {"id":"50945ed6e43505ce","type":"text","text":"## Benachrichtigungen\n**Ticket:** `D-P3` (Teil) · **Status:** 🟡 vorgeplant (Screens validiert, Subframe offen)\n**Wo:** Glocke oben + Einstellungen\n\n**Was drin ist:** Glocke mit Ungelesen-Zähler + aufklappbare Liste (Klick springt zur Sache), eigene Seite mit allen Meldungen, Einstellungen: pro Ereignis-Typ wählen ob In-App und/oder E-Mail\n\n**So funktioniert's:** Wird von allen Features gespeist (neue Anfrage, Aufgabe fällig, Antrag genehmigt …). Master-Schalter »alle E-Mails aus«.","x":6077,"y":2160,"width":460,"height":360,"color":"5"}, + {"id":"50945ed6e43505ce","type":"text","text":"## Benachrichtigungen\n**Ticket:** `D-P3` (Teil) · **Status:** ✅ validiert / Development-Handoff\n**Wo:** Glocke oben + `/notifications` + Einstellungen\n\n**Was drin ist:** Live-Karten, Glocken-Drawer, chronologische Vollseite, Quellenfilter, Read-State und Pflicht-Deeplinks. Einstellungen steuern Live-Pop-ups global und je Quelle.\n\n**So funktioniert's:** Relevante Ereignisse bleiben im Center; Status-Toasts und Mikro-Feedback sind flüchtiges Produktfeedback. E-Mail ist nur eine Quelle, kein Versandkanal.","x":6077,"y":2160,"width":460,"height":360,"color":"5"}, {"id":"6b3c0929759a607b","type":"text","text":"## Abo & Rechnungen (für HiveGrid)\n**Ticket:** `D-P20` (Teil) · **Status:** ⚠️ Ticket braucht Recut\n**Wo:** `/admin/subscription`\n\n**Was drin ist:** Abo-Übersicht (Plan, Plätze, gebuchte Module, Test-Countdown), Verbrauchs-Balken (Automations-Läufe, Speicher), Rechnungen + Zahlungsstatus\n\n**Achtung:** Das Ticket wird gerade umgeschnitten (neuer Abrechnungs-Unterbau) — erst planen, wenn der Brief neu steht. Kein Selbst-Upgrade in v1.","x":6537,"y":3100,"width":460,"height":360,"color":"5"}, {"id":"db76161d24fb0c1d","type":"text","text":"## Feedback & Hilfe\n**Ticket:** `D-P21` (Teil) · **Status:** ⬜ offen\n**Wo:** überall + `/help`\n\n**Was drin ist:** Schwebender Feedback-Knopf (Fehler melden / Idee / Frage, optional mit Screenshot), kleine FAQ-Seite\n\n**So funktioniert's:** Meldungen landen direkt in unserer Support-Inbox im Plattform-Admin.","x":6537,"y":3760,"width":460,"height":360,"color":"5"}, {"id":"89c0813f7e139a88","type":"text","text":"## Dashboard (Startseite)\n**Ticket:** `D-DASH` (Teil) · **Status:** ⬜ offen\n**Wo:** `/dashboard`\n\n**Was drin ist:** 3 feste Ansichten je Rolle: Chef (Umsatz, Projekte, Auslastung) · Büro (Projekte, Aufgaben, Anrufe) · Monteur 📱 (meine Termine, Projekte, Aufgaben)\n\n**So funktioniert's:** Kacheln mit Zahlen, Listen und Trend-Charts, live aktualisiert. Kein freies Umbauen in v1 — nur Filter/Zeitraum einstellbar.","x":4037,"y":80,"width":460,"height":360,"color":"2"}, diff --git a/05 HiveGrid Map/HiveGrid Map.md b/05 HiveGrid Map/HiveGrid Map.md index 1bd3c2a6..d5c7284b 100644 --- a/05 HiveGrid Map/HiveGrid Map.md +++ b/05 HiveGrid Map/HiveGrid Map.md @@ -57,7 +57,7 @@ Gesamtkarte aller HiveGrid-v1-Features. Eine Karte = **ein Feature** (so benannt | Digital unterschreiben (E-Signatur) | Termine & Formulare | D-P16 (Teil) | 🔵 | 🟡 vorgeplant | | Team-Chat 📱 | Kommunikation | D-CHAT | 🟠 | ⬜ offen | | Telefonie (Anrufe) | Kommunikation | D-P15 | 🔵 | ⬜ offen | -| Benachrichtigungen | Kommunikation | D-P3 (Teil) | 🔵 | 🟡 vorgeplant | +| Benachrichtigungen | Kommunikation | D-P3 (Teil) | 🔵 | ✅ validiert / Development-Handoff | | Aufgaben | Aufgaben & Dateien | D-P4 (Teil) | 🔵 | ✅ validiert / Development-Handoff | | Dateien | Aufgaben & Dateien | D-P4 (Teil) | 🔵 | 🟡 vorgeplant | | Automations-Baukasten (Flow-Editor) | Automationen | D-FLOW | 🔴 schwerste UI | ✅ validiert | @@ -346,14 +346,14 @@ Abhaken = in der groben Planung berücksichtigt (Screens/Flow verortet). Quelle: - [ ] Meldung bei eingehendem Anruf; unbekannte Nummer → automatisch neue Anfrage - v2: HalloPetra (KI-Telefonassistent). -#### Benachrichtigungen — `D-P3` (Teil) — 🟡 vorgeplant (2026-07-08) -- [x] Glocke mit Ungelesen-Zähler + Aufklapp-Liste (Klick springt direkt zur Sache) -- [x] Eigene Seite mit allen Meldungen (Reiter Alle/Ungelesen, als gelesen markieren, aufräumen) -- [x] Einstellungen: je Ereignis-Typ wählbar In-App und/oder E-Mail, Master-Schalter »alle E-Mails aus« -- [x] Klartext-Hinweis, wenn Mails nicht ankommen -- Davids Ergänzungen: Drawer mit »Alle anzeigen«, Aktualisieren, Wegklicken einzelner Einträge, Typ-Icons je Quelle -- v2: Ruhezeiten, Zusammenfassen, Push. -- Paket: `02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/` (Screens validiert; Subframe steht aus) +#### Benachrichtigungen — `D-P3` (Teil) — ✅ validiert / Development-Handoff (2026-08-27) +- [x] Glocken-Drawer und chronologische Vollseite mit Read-State, Einzel- und Bulk-Aktionen sowie Pflicht-Deeplinks. +- [x] Neun feste Quellen ohne zusätzliche Kategorien: Chat, E-Mail, Aufgaben, Kalender, Leads, Projekte, Automation, System und Billing. +- [x] Live-Pop-ups global und je Quelle steuerbar; ausgeschaltete Einblendungen bleiben vollständig im Notification Center. +- [x] Getrennte Referenzen für Live-Notification, Status-Toast, Mikro-Feedback, Banner und kritischen Dialog. +- [x] Stapellimits, Timings, Deduplizierung, Klicklogik und Dismissibility als Development-Vertrag dokumentiert. +- v2: Ruhezeiten, Snooze, Digest und Push/SMS. +- Paket: `02 Wireframes/P3 Benachrichtigungen/WF-P3 Benachrichtigungen/` — 8/8 finale Subframe-Seiten S01-S08; S00 nach Review entfernt. ### Aufgaben & Dateien diff --git a/Tickets/Fertige Tickets/D-P3 Benachrichtigungen.md b/Tickets/Fertige Tickets/D-P3 Benachrichtigungen.md new file mode 100644 index 00000000..813fe234 --- /dev/null +++ b/Tickets/Fertige Tickets/D-P3 Benachrichtigungen.md @@ -0,0 +1,112 @@ +--- +kind: ticket-handoff +project: HiveGrid Screen Project +ticket: D-P3 +area: Benachrichtigungen +status: Fertig / Development-Handoff +scope: Teil Benachrichtigungen +repo: https://git.tool-ctrl.de/toolctrl-labs/HiveGrid-Wireframes +stand: 2026-08-27 +--- + +# D-P3 Benachrichtigungen + +Repo: https://git.tool-ctrl.de/toolctrl-labs/HiveGrid-Wireframes + +Zentrale Tracker-Datei: [Screen Paket Tracker](../../02%20Wireframes/Screen%20Paket%20Tracker.md) + +Flow-Paket: [WF-P3 Benachrichtigungen](../../02%20Wireframes/P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen.md) + +Canvas: [WF-P3 Benachrichtigungen.canvas](../../02%20Wireframes/P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen.canvas) + +Subframe: [Finaler Handoff-Flow](https://app.subframe.com/f023064a5ca0/flow/f6bc85c2-186c-40d9-a0c1-bacb03fad68a/edit) + +## Kurzfassung + +Der Benachrichtigungs-Teil von D-P3 ist als Development-Handoff abgeschlossen. Der finale Live-Stand umfasst **acht Seiten in einem Subframe-Flow**: S01, S02B und S03 bis S08. Drawer, Vollseite, Einstellungen, Live-Einblendungen, Banner, Status-Toasts, Mikro-Feedback und kritischer Dialog sind gemeinsam validiert. + +Die nur für die Systemreview gebaute Übersichtsseite S00 wurde anschließend aus Subframe und Obsidian entfernt. Die Systemzusammenfassung bleibt im Paket-MD und im Obsidian-Canvas erhalten. Zwei globale Komponenten sind als Referenzen verlinkt: Notification Item und Permanent Banner. + +Der Subframe-Flow trägt technisch noch den internen Altnamen `(MCP) WF-P16 Benachrichtigungen – Review-Draft 2026-08`. Die stabile Flow-URL und dieses Handoff ordnen ihn eindeutig D-P3 / WF-P3 zu; der Altname blockiert Development nicht. + +D-P3 umfasst außerdem den getrennten Bereich Audit Log. Dieses Handoff finalisiert ausschließlich den Teil **Benachrichtigungen** und verändert den Status des separaten Pakets `WF-P3 Audit Log` nicht. + +## Gemacht + +- Einheitliches, quellenbasiertes In-App-Modell ohne zusätzliche Kategorie- oder Severity-Ebene festgelegt. +- Notification Item für Live-Overlay, Drawer und Vollseite validiert. +- Drawer ohne X an Center-Einträgen, mit einzelner Aktion `Gelesen` und zwei Einstiegen zur Vollseite abgeschlossen. +- Vollseite mit Alle/Ungelesen/Gelesen, Quellen- und Zeitraumfiltern, Checkboxen sowie zwei klaren Bulk-Aktionen abgeschlossen. +- Einstellungen auf einen globalen Live-Schalter plus neun Quellenschalter reduziert; Center-Persistenz bleibt davon unberührt. +- Live-Notification oben rechts mit X, `Gelesen`, maximal drei sichtbaren Karten und `+N`-Stapel festgelegt. +- Status-Toast, Upload/Loading, Mikro-Feedback, Standard/Permanent Banner und kritischen Dialog als getrennte Referenzen gebaut. +- Timings, Timer-Pausen, Deduplizierung, Zustandswechsel und Reduced-Motion-Leitplanken dokumentiert. +- Quellenbezeichnung final von Team auf Chat vereinheitlicht; technischer Wert ist `source: "chat"`. + +## Finale Produktentscheidungen + +- **Nur In-App:** E-Mail, Push und SMS sind keine Notification-Kanäle. Eine eingehende E-Mail ist eine Quelle und erzeugt einen normalen Center-Eintrag. +- **Neun Quellen:** Chat, E-Mail, Aufgaben, Kalender, Leads, Projekte, Automation, System und Billing. Integrationen gehören zu System. +- **Ein Ereignis, ein Eintrag:** keine Aggregation oder ausklappbaren Gruppen; die Liste ist flach und chronologisch absteigend. +- **Pflicht-Deeplink:** jedes persistente Ereignis führt zum exakten Tool, Objekt oder definierten Fallback. +- **Read-State:** ungelesen wird über Fokus-Schatten und blauen Punkt am Quell-Icon gezeigt. Der verworfene Count-Kreis rechts existiert nicht. +- **Center ohne X:** Center-Einträge werden gelesen oder ungelesen gesetzt, nicht weggeklickt. X existiert nur am flüchtigen Live-Overlay. +- **Live-Einstellungen:** global und je Quelle steuerbar; abgeschaltete Live-Pop-ups bleiben im Drawer und auf der Vollseite erhalten. +- **Kurzes Produktfeedback:** Mikro-Feedback und Status-Toasts sind nicht persistent und nicht Teil der Notification-Einstellungen. +- **Banner:** Standard Banner ist dismissible. Permanent Banner ist dünn, global, nicht dismissible; Offline ist sein höchst priorisierter Zustand und keine eigene Komponente. +- **Kritischer Dialog:** kein Auto-Dismiss, standardmäßig X/Schließen; echte nicht schließbare Blocker müssen Development explizit festlegen. + +## Ausgabeflächen + +| Fläche | Persistiert | Referenz | Kernverhalten | +|---|---:|---|---| +| Mikro-Feedback | nein | S07 | sehr häufige Bestätigung, 1,5 s, kein X | +| Status-Toast | nein | S06 | Fortschritt, Ergebnis, Warnung oder behebbarer Fehler | +| Live-Notification | ja, im Center | S05 | 8 s, Hover/Fokus pausiert, X oder `Gelesen` | +| Notification Center | ja | S01/S02B | flache Chronologie, Read-State, Filter und Deeplinks | +| Kritischer Dialog | ereignisabhängig | S08 | unterbrechend, kein Auto-Dismiss | +| Banner | nein | S04 | kontextbezogener oder permanenter globaler Zustand | + +## Finales Subframe-Inventar + +| # | Live-Name | UUID | Repo | Subframe | +|---:|---|---|---|---| +| 1 | S01 Notification Center – Glocken-Drawer | `c6db2245-5962-459e-82b9-e700272c692f` | [S01](../../02%20Wireframes/P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen/Screens/S01%20Glocken-Drawer.md) | [Öffnen](https://app.subframe.com/f023064a5ca0/design/c6db2245-5962-459e-82b9-e700272c692f/edit) | +| 2 | S02B · Blauer Fokusrahmen | `66571863-970d-4890-8352-a112c057e910` | [S02B](../../02%20Wireframes/P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen/Screens/S02%20Benachrichtigungen%20Seite.md) | [Öffnen](https://app.subframe.com/f023064a5ca0/design/66571863-970d-4890-8352-a112c057e910/edit) | +| 3 | S03 Benachrichtigungen – Globale Einstellungen | `ad1f213a-39cf-451f-8525-ff4e9b3a0854` | [S03](../../02%20Wireframes/P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen/Screens/S03%20Benachrichtigungen%20Einstellungen.md) | [Öffnen](https://app.subframe.com/f023064a5ca0/design/ad1f213a-39cf-451f-8525-ff4e9b3a0854/edit) | +| 4 | S04 App-Shell – Permanent und Standard Banner | `f6eccfbe-058c-4b5a-b984-ce656526efab` | [S04](../../02%20Wireframes/P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen/Screens/S04%20Permanent%20und%20Standard%20Banner.md) | [Öffnen](https://app.subframe.com/f023064a5ca0/design/f6eccfbe-058c-4b5a-b984-ce656526efab/edit) | +| 5 | S05 App-Shell – Notification Center geöffnet | `14386a95-8c95-46c6-8127-61c261f6e305` | [S05](../../02%20Wireframes/P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen/Screens/S05%20Live%20Notifications%20im%20App-Shell.md) | [Öffnen](https://app.subframe.com/f023064a5ca0/design/14386a95-8c95-46c6-8127-61c261f6e305/edit) | +| 6 | S06 App-Shell – Kurzinfos und Statusfarben | `66b46a36-1d7f-418b-b0ea-3550569c3374` | [S06](../../02%20Wireframes/P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen/Screens/S06%20Kurzinfos%20Status%20und%20Upload.md) | [Öffnen](https://app.subframe.com/f023064a5ca0/design/66b46a36-1d7f-418b-b0ea-3550569c3374/edit) | +| 7 | S07 App-Shell – Micro Feedback | `78c8e52f-c328-4583-9a97-40cf95130a47` | [S07](../../02%20Wireframes/P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen/Screens/S07%20Mikro%20Feedback.md) | [Öffnen](https://app.subframe.com/f023064a5ca0/design/78c8e52f-c328-4583-9a97-40cf95130a47/edit) | +| 8 | S08 App-Shell – Kritischer Dialog | `4ecac4cb-d303-40f3-8c32-8aa04ef3cbad` | [S08](../../02%20Wireframes/P3%20Benachrichtigungen/WF-P3%20Benachrichtigungen/Screens/S08%20Kritischer%20Dialog.md) | [Öffnen](https://app.subframe.com/f023064a5ca0/design/4ecac4cb-d303-40f3-8c32-8aa04ef3cbad/edit) | + +## Komponenten + +| Komponente | UUID | Status | Subframe | +|---|---|---|---| +| Review Draft – Notification Item | `5e430568-e5d8-4a3d-a842-40ba6e3555a8` | Validiert | [Öffnen](https://app.subframe.com/f023064a5ca0/design/5e430568-e5d8-4a3d-a842-40ba6e3555a8/edit) | +| Review Draft – Permanent Banner | `b4beb642-5c8a-4a98-af93-83922bc91ed0` | Validiert | [Öffnen](https://app.subframe.com/f023064a5ca0/design/b4beb642-5c8a-4a98-af93-83922bc91ed0/edit) | + +## Development-Vertrag + +Ein persistentes `notification-event` enthält mindestens `id`, `source`, `title`, `summary`, `createdAt`, Read-State sowie `targetLabel` und `targetUrl`. Optional kommen Actor/Avatar, Tool-Icon und das Flag für eine zusätzliche kritische Unterbrechung hinzu. + +`liveOverlayEnabled` steuert S05 global, `liveOverlayBySource` je Quelle. Beide Einstellungen beeinflussen ausschließlich die Live-Einblendung; Ereigniserzeugung, Center-Persistenz, Read-State, S01 und S02B bleiben unverändert. Kritische Dialoge, Permanent Banner, Status-Toasts und Mikro-Feedback umgehen diese Settings. + +Live-Notifications zeigen maximal drei Karten plus Überlaufstapel. Status-Toasts zeigen maximal fünf Karten. Ein Loading-Toast wandelt sich in Erfolg oder Fehler um, statt eine zweite Meldung zu erzeugen. Status-Toast und Mikro-Feedback werden über Operations-ID dedupliziert; wird ein Ergebnis später relevant und anklickbar, wechselt derselbe Vorgang zu genau einem persistenten Notification-Event. + +## Development-owned Follow-ups + +- Konkreter Ereigniskatalog je Quelle. +- Empfängerlogik anhand von Zuständigkeit und Berechtigungen. +- Fallback für gelöschte oder nicht mehr erlaubte Deeplink-Ziele. +- Explizite Liste der wenigen echten nicht schließbaren Dialog-Blocker. + +## Abschlusscheck + +- [x] Acht finale Subframe-Seiten inventarisiert, verlinkt und visuell geprüft. +- [x] S00 aus Subframe, Tracker und Screen-Paket entfernt. +- [x] Paket-MD, Screen-MDs, Canvas, Tracker und HiveGrid Map synchronisiert. +- [x] Produktregeln, Timings, Quellen, Einstellungen und Interaktionen validiert. +- [x] Nicht vom Design zu entscheidende Details ausdrücklich als Development-owned markiert. +- [x] Benachrichtigungs-Teil von D-P3 ist bereit für Development. diff --git a/Tickets/README.md b/Tickets/README.md index 469203a2..0eeb9e06 100644 --- a/Tickets/README.md +++ b/Tickets/README.md @@ -19,6 +19,7 @@ Die Detailwahrheit bleibt in den Wireframe-Paketen und im `Screen Paket Tracker` | Ticket | Datei | |---|---| | D-P2 | [D-P2 Auth Wireframes]() | +| D-P3 (Benachrichtigungen) | [D-P3 Benachrichtigungen]() | | D-D0b | [D-D0b Layout Standards]() | | D-FORM | [D-FORM Form Builder]() | | D-P8 + D-KANBAN | [D-P8 Pipelines Wireframes]() |