robert/todo
Watch
1
0
Fork
You've already forked todo
 0
Code Issues 3 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Kopfzeile - Listenname in die oberste Leiste neben das Navigationsmenue verschieben (alle Listentypen) #211

New issue
Closed
opened 2026-09-28 08:51:15 +02:00 by lena · 2 comments
lena commented 2026-09-28 08:51:15 +02:00
Collaborator
Copy link

Story: Kopfzeile - Listenname in die oberste Leiste neben das Navigationsmenue

As a Nutzer (vor allem mobil),
I want to den Namen der aktuell geoeffneten Liste direkt in der obersten App-Leiste sehen, neben dem Button mit den drei Strichen, ueber den ich zu anderen Listen wechsle,
so that die zweite Zeile (die Listen-Kopfzeile) frei wird fuer direkt erreichbare Aktionen wie den Kamera-Scan-Button.

Kontext (verifiziert im Code):

  • Die oberste Leiste (Application.tsx) enthaelt aktuell nur den Hamburger-Button (mobil) links und Feedback/Benachrichtigungen/Avatar rechts - kein Listenname.
  • Der Listenname steht erst eine Zeile tiefer in der jeweiligen Seiten-Kopfzeile (z. B. ShoppingListPage.tsx), zusammen mit Kamera-Button und "..."-Menue.
  • Vorarbeit: "Einkaufsliste - Kopfzeile entlasten" (#160) und "Direkter Kamera-Scan-Button in der Kopfzeile" (#161) sind erledigt. Diese Story ist der noch offene zweite Teil der urspruenglichen Anmerkung.

Acceptance criteria:

  • Auf allen Listentypen (To-Do, Einkaufsliste, Vorratsschrank, Masterpackliste, Priorisierte Liste) steht der Listenname (mit Icon/Farbe wie bisher) in der obersten Leiste neben dem Navigations-Button.
  • Die Listen-Kopfzeile darunter zeigt den Namen nicht mehr doppelt und hat dadurch Platz fuer Aktions-Buttons (Kamera-Scan, "..."-Menue usw.).
  • Lange Listennamen werden sauber gekuerzt (Ellipsis) und verdraengen die rechten Buttons (Feedback, Glocke, Avatar) nicht.
  • Auf Desktop (Sidebar sichtbar, kein Hamburger) steht der Name ebenfalls links in der obersten Leiste.
  • Ohne geoeffnete Liste (z. B. Dashboard/Einstellungen) bleibt die Leiste wie bisher.

Out of scope:

  • Neue Aktions-Buttons ausser den bereits vorhandenen.
## Story: Kopfzeile - Listenname in die oberste Leiste neben das Navigationsmenue **As a** Nutzer (vor allem mobil), **I want to** den Namen der aktuell geoeffneten Liste direkt in der obersten App-Leiste sehen, neben dem Button mit den drei Strichen, ueber den ich zu anderen Listen wechsle, **so that** die zweite Zeile (die Listen-Kopfzeile) frei wird fuer direkt erreichbare Aktionen wie den Kamera-Scan-Button. **Kontext (verifiziert im Code):** - Die oberste Leiste (`Application.tsx`) enthaelt aktuell nur den Hamburger-Button (mobil) links und Feedback/Benachrichtigungen/Avatar rechts - kein Listenname. - Der Listenname steht erst eine Zeile tiefer in der jeweiligen Seiten-Kopfzeile (z. B. `ShoppingListPage.tsx`), zusammen mit Kamera-Button und "..."-Menue. - Vorarbeit: "Einkaufsliste - Kopfzeile entlasten" (#160) und "Direkter Kamera-Scan-Button in der Kopfzeile" (#161) sind erledigt. Diese Story ist der noch offene zweite Teil der urspruenglichen Anmerkung. **Acceptance criteria:** - [ ] Auf allen Listentypen (To-Do, Einkaufsliste, Vorratsschrank, Masterpackliste, Priorisierte Liste) steht der Listenname (mit Icon/Farbe wie bisher) in der obersten Leiste neben dem Navigations-Button. - [ ] Die Listen-Kopfzeile darunter zeigt den Namen nicht mehr doppelt und hat dadurch Platz fuer Aktions-Buttons (Kamera-Scan, "..."-Menue usw.). - [ ] Lange Listennamen werden sauber gekuerzt (Ellipsis) und verdraengen die rechten Buttons (Feedback, Glocke, Avatar) nicht. - [ ] Auf Desktop (Sidebar sichtbar, kein Hamburger) steht der Name ebenfalls links in der obersten Leiste. - [ ] Ohne geoeffnete Liste (z. B. Dashboard/Einstellungen) bleibt die Leiste wie bisher. **Out of scope:** - Neue Aktions-Buttons ausser den bereits vorhandenen.
lena self-assigned this 2026-09-28 21:56:08 +02:00
lena commented 2026-09-28 21:56:09 +02:00
Author
Collaborator
Copy link

Start: Claim durch den autonomen Loop (auf ausdruecklichen Wunsch des Menschen). Plan: Listenname samt Icon/Farbe aus den Seiten-Kopfzeilen aller Listentypen in die oberste App-Leiste neben den Navigations-Button verschieben (per Kontext/Portal aus der Listenseite gesetzt), mit Ellipsis fuer lange Namen; Dashboard/Einstellungen bleiben unveraendert.

Start: Claim durch den autonomen Loop (auf ausdruecklichen Wunsch des Menschen). Plan: Listenname samt Icon/Farbe aus den Seiten-Kopfzeilen aller Listentypen in die oberste App-Leiste neben den Navigations-Button verschieben (per Kontext/Portal aus der Listenseite gesetzt), mit Ellipsis fuer lange Namen; Dashboard/Einstellungen bleiben unveraendert.
lena commented 2026-09-28 22:12:20 +02:00
Author
Collaborator
Copy link

Erledigt (Commits a7cfda86, 9a70bbe6 auf master).

Umfang

  • Der Listenname (bei To-Do/Priorisierten Listen mit Farbpunkt, Icon und Farbe wie bisher; Masterpackliste mit Koffer-Symbol) steht jetzt in der obersten App-Leiste direkt neben dem Navigations-Button - auf allen Listentypen: To-Do, Priorisierte Liste, Einkaufsliste, Vorratsschrank (inkl. Scan-Station und Zielmengen-Uebersicht, dort zusammen mit dem Zurueck-Pfeil), Masterpackliste.
  • Die Listen-Kopfzeile darunter zeigt den Namen nicht mehr doppelt und enthaelt nur noch Aktionen (rechtsbuendig). Die Zielmengen-Uebersicht hatte ausser Zurueck+Titel keine Aktionen und hat daher keine eigene Kopfzeile mehr.
  • Lange Namen werden mit "..." gekuerzt; Glocke/Avatar bleiben sichtbar (live bei 375px Breite geprueft, kein horizontales Scrollen).
  • Desktop: Name steht links in der obersten Leiste, auf die 16px-Einrueckung der Sidebar ausgerichtet.
  • Ohne geoeffnete Liste (Dashboard, Faellig-Uebersicht, Gruppen-Dashboard) bleibt die Leiste leer wie bisher.

Technik / Entscheidungen

  • Neues AppBarTitle.tsx: Application rendert einen Slot in der Top-Bar, die Seiten portalen ihren Titel per createPortal hinein. So bleibt die Listen-DTO-Logik in der Seite, Application bestimmt nur die Position. Ohne Provider (Seite isoliert, z. B. in Unit-Tests) wird der Titel an Ort und Stelle gerendert - bestehende Seiten- und E2E-Tests (h2-Locator) funktionieren unveraendert.
  • Rein Frontend, kein Backend/Schema-Change.

Tests

  • Neu: AppBarTitle.test.tsx (Portal in den Slot, Fallback ohne Provider, Slot leert sich beim Verlassen der Seite), 2 neue Application-Tests (Listenname in der Top-Bar; Top-Bar leer auf /due).
  • Frontend komplett gruen lokal: 149 Dateien / 1473 Tests, npm run build ok. Live im lokalen Review-Container (Desktop + 375px) geprueft.
  • Security-Selbstreview: keine neuen Eingaben/Datenpfade, Titel weiterhin von React escaped - keine Befunde.
Erledigt (Commits a7cfda86, 9a70bbe6 auf master). **Umfang** - Der Listenname (bei To-Do/Priorisierten Listen mit Farbpunkt, Icon und Farbe wie bisher; Masterpackliste mit Koffer-Symbol) steht jetzt in der obersten App-Leiste direkt neben dem Navigations-Button - auf allen Listentypen: To-Do, Priorisierte Liste, Einkaufsliste, Vorratsschrank (inkl. Scan-Station und Zielmengen-Uebersicht, dort zusammen mit dem Zurueck-Pfeil), Masterpackliste. - Die Listen-Kopfzeile darunter zeigt den Namen nicht mehr doppelt und enthaelt nur noch Aktionen (rechtsbuendig). Die Zielmengen-Uebersicht hatte ausser Zurueck+Titel keine Aktionen und hat daher keine eigene Kopfzeile mehr. - Lange Namen werden mit "..." gekuerzt; Glocke/Avatar bleiben sichtbar (live bei 375px Breite geprueft, kein horizontales Scrollen). - Desktop: Name steht links in der obersten Leiste, auf die 16px-Einrueckung der Sidebar ausgerichtet. - Ohne geoeffnete Liste (Dashboard, Faellig-Uebersicht, Gruppen-Dashboard) bleibt die Leiste leer wie bisher. **Technik / Entscheidungen** - Neues AppBarTitle.tsx: Application rendert einen Slot in der Top-Bar, die Seiten portalen ihren Titel per createPortal hinein. So bleibt die Listen-DTO-Logik in der Seite, Application bestimmt nur die Position. Ohne Provider (Seite isoliert, z. B. in Unit-Tests) wird der Titel an Ort und Stelle gerendert - bestehende Seiten- und E2E-Tests (h2-Locator) funktionieren unveraendert. - Rein Frontend, kein Backend/Schema-Change. **Tests** - Neu: AppBarTitle.test.tsx (Portal in den Slot, Fallback ohne Provider, Slot leert sich beim Verlassen der Seite), 2 neue Application-Tests (Listenname in der Top-Bar; Top-Bar leer auf /due). - Frontend komplett gruen lokal: 149 Dateien / 1473 Tests, npm run build ok. Live im lokalen Review-Container (Desktop + 375px) geprueft. - Security-Selbstreview: keine neuen Eingaben/Datenpfade, Titel weiterhin von React escaped - keine Befunde.
lena 2026-09-28 22:12:21 +02:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
master
feature/in-app-notifications
feature/list-archiving
feature/filter-search
No results found.
Labels
Clear labels   
priority/could

   
priority/must

   
priority/should

   
priority/wont

   
status/blocked

   
status/claimed

   
status/done-migrated

   
type/bug

   
type/feature

   
type/infra

   
type/tech-debt
No labels
priority/could
priority/must
priority/should
priority/wont
status/blocked
status/claimed
status/done-migrated
type/bug
type/feature
type/infra
type/tech-debt
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
lena
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
robert/todo#211
No description provided.