Vibecode/epaper-dashboard
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BUG-05: "Speichern"-Button im Toolbar ist tot — autosaved schon bei jedem Drop #7

New Issue
Closed
opened 2026-08-29 15:15:06 +02:00 by ki · 1 comment
ki commented 2026-08-29 15:15:06 +02:00
Owner
Copy Link
Copy Source

Symptom

Der "Speichern"-Button (templates/index.html:1017) ist prominent im Toolbar, tut aber nichts Sichtbares — die Toast-Bestätigung beim Klick ist redundant, weil nach jedem Drag-Drop schon debouncedSave() (:1248-1251) läuft.

Ursache

debouncedSave() wird nach jedem drop, add, delete, resize aufgerufen (templates/index.html:1416, 1452, 1518, 1609). Der "Speichern"-Button macht nur einen sofortigen POST statt eines 500ms-debounce — semantisch identisch.

Optionen zur Lösung

  1. Button komplett entfernen, Toolbar aufräumen
  2. Button behalten, aber als "Force Save" mit diskreter Optik (nicht primary)
  3. Button umbenennen zu "Sofort speichern" mit Tooltip

Empfehlung: 1 — der Button verwirrt mehr als er nutzt.

Akzeptanz

  • Toolbar hat keinen "Speichern"-Button mehr (oder ist klar umetikettiert)
  • Auto-Save-Verhalten bleibt unverändert
  • Connection-Status-Indikator (offline/online) neu denken — User braucht Feedback, dass Saves durchgehen
## Symptom Der "Speichern"-Button (templates/index.html:1017) ist prominent im Toolbar, tut aber nichts Sichtbares — die Toast-Bestätigung beim Klick ist redundant, weil nach jedem Drag-Drop schon `debouncedSave()` (`:1248-1251`) läuft. ## Ursache `debouncedSave()` wird nach jedem `drop`, `add`, `delete`, `resize` aufgerufen (`templates/index.html:1416, 1452, 1518, 1609`). Der "Speichern"-Button macht nur einen sofortigen POST statt eines 500ms-debounce — semantisch identisch. ## Optionen zur Lösung 1. Button komplett entfernen, Toolbar aufräumen 2. Button behalten, aber als "Force Save" mit diskreter Optik (nicht primary) 3. Button umbenennen zu "Sofort speichern" mit Tooltip Empfehlung: **1** — der Button verwirrt mehr als er nutzt. ## Akzeptanz - Toolbar hat keinen "Speichern"-Button mehr (oder ist klar umetikettiert) - Auto-Save-Verhalten bleibt unverändert - Connection-Status-Indikator (offline/online) neu denken — User braucht Feedback, dass Saves durchgehen
ki added the uxfrontendadmin-uilayoutbug labels 2026-08-29 15:15:06 +02:00
ki commented 2026-08-29 15:47:39 +02:00
Author
Owner
Copy Link
Copy Source

Fixed in branch fix/BUG-05-save-indicator (commit d0cc694, pushed).

Fix:

  • Speichern-Button aus dem Toolbar entfernt (war redundant zu debouncedSave()).
  • Stattdessen <div id="saveIndicator" data-state="idle"> mit .save-dot und .save-label, rechtsbündig im Toolbar (margin-left:auto).
  • States via CSS-Data-Attr: idle | pending | saving | error
    • idle: grüner Punkt, "Gespeichert"
    • pending: warn-gelber Punkt pulsiert, "Ungespeichert…" (debouncedSave-Start)
    • saving: info-blauer Punkt pulsiert schneller, "Speichern…" (saveLayout-Start)
    • error: alert-roter Punkt, "Fehler: …" (j.ok=false)
  • setSaveState(state, label?) als zentraler Helper.
  • saveLayout() macht success-toast weg — der Indicator reicht.
  • Fehlerfall: error-toast bleibt (kritisch, separat sichtbar).

Vorteile:

  • Toolbar aufgeräumter, +Button ist eindeutig der primäre Action.
  • User sieht Save-Status ohne Klick auf irgendwas — visuelles Feedback für Auto-Save.
  • Fehler-State zeigt sofort "Fehler: …" mit Details.
  • Toast-System entlastet (kein redundantes "Layout gespeichert" mehr).

Frischer Beweis: node tests/test_save_indicator.js → 11/11 grün

✓ Speichern-Button entfernt
✓ Save-Indicator #saveIndicator vorhanden
✓ setSaveState() Funktion definiert
✓ setSaveState setzt dataset.state
✓ debouncedSave setzt pending-Status
✓ saveLayout setzt saving am Anfang
✓ saveLayout setzt idle bei Erfolg
✓ saveLayout setzt error bei j.ok=false
✓ CSS für alle 4 Indicator-States
✓ Kein success-toast in saveLayout mehr
✓ Save-Indicator rechtsbündig (margin-left:auto)

Live-Test: GET /?demo=1 → 200, 93484 bytes

  • saveIndicator: 1
  • setSaveState: 6
  • old saveLayout button: 0
  • .save-indicator class: 8

PR: https://git.pkop.de/Vibecode/epaper-dashboard/pulls/new/fix/BUG-05-save-indicator

Fixed in branch `fix/BUG-05-save-indicator` (commit d0cc694, pushed). **Fix:** - Speichern-Button aus dem Toolbar entfernt (war redundant zu `debouncedSave()`). - Stattdessen `<div id="saveIndicator" data-state="idle">` mit `.save-dot` und `.save-label`, rechtsbündig im Toolbar (`margin-left:auto`). - States via CSS-Data-Attr: `idle` | `pending` | `saving` | `error` - idle: grüner Punkt, "Gespeichert" - pending: warn-gelber Punkt pulsiert, "Ungespeichert…" (debouncedSave-Start) - saving: info-blauer Punkt pulsiert schneller, "Speichern…" (saveLayout-Start) - error: alert-roter Punkt, "Fehler: …" (j.ok=false) - `setSaveState(state, label?)` als zentraler Helper. - `saveLayout()` macht success-toast weg — der Indicator reicht. - Fehlerfall: error-toast bleibt (kritisch, separat sichtbar). **Vorteile:** - Toolbar aufgeräumter, +Button ist eindeutig der primäre Action. - User sieht Save-Status ohne Klick auf irgendwas — visuelles Feedback für Auto-Save. - Fehler-State zeigt sofort "Fehler: …" mit Details. - Toast-System entlastet (kein redundantes "Layout gespeichert" mehr). **Frischer Beweis:** `node tests/test_save_indicator.js` → 11/11 grün ``` ✓ Speichern-Button entfernt ✓ Save-Indicator #saveIndicator vorhanden ✓ setSaveState() Funktion definiert ✓ setSaveState setzt dataset.state ✓ debouncedSave setzt pending-Status ✓ saveLayout setzt saving am Anfang ✓ saveLayout setzt idle bei Erfolg ✓ saveLayout setzt error bei j.ok=false ✓ CSS für alle 4 Indicator-States ✓ Kein success-toast in saveLayout mehr ✓ Save-Indicator rechtsbündig (margin-left:auto) ``` Live-Test: `GET /?demo=1 → 200, 93484 bytes` - saveIndicator: 1 - setSaveState: 6 - old saveLayout button: 0 - .save-indicator class: 8 PR: https://git.pkop.de/Vibecode/epaper-dashboard/pulls/new/fix/BUG-05-save-indicator
ki closed this issue 2026-08-29 15:47:39 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
admin-ui
bug
frontend
good-first-issue
layout
ux
No labels admin-ui bug frontend layout ux
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
Jenkins ki patrik
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Vibecode/epaper-dashboard#7