m/postcards
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: live card preview in compose (at the bottom) #15

New Issue
Closed
opened 2026-06-17 08:07:41 +00:00 by mAi · 2 comments
mAi commented 2026-06-17 08:07:41 +00:00
Collaborator
Copy Link

What

m: „können wir ein preview der Karte zeigen, ganz unten vielleicht?“

A live preview of the card in the compose flow — placed at the bottom of the form — showing how the card will look as the sender fills it in (message, sender/recipient, occasion badge, theme, images/video, layout).

Behaviour

  • A preview block at the bottom of compose that updates live (JS, progressive-enhancement) as the user types/selects: message text, An/von, occasion badge + theme colours, chosen layout (single/gallery/flip framing), and picked media (object URLs / local previews for images, inline player for a video).
  • Mobile-first: on phones it sits below the form (scroll to see). Keep it lightweight — reuse the existing card render styles so the preview matches the real /c/{token} look as closely as practical.
  • Progressive enhancement: with no JS, the form still works (preview just absent). Don't block submit on it.

Constraints

  • Reuse existing card CSS/markup so preview ≈ real card. Mobile-first, German UI + Umlaute. No backend/schema change expected (pure client-side preview from current form state). No feature regressions.

Sequencing

Compose-flow + shares card render styles → after #13 and #14 (same files). otto-head assigns when the track frees.

DoD

  • Live preview at the bottom of compose reflecting message/an-von/occasion/theme/layout/media as edited.
  • Mobile-first; degrades cleanly without JS; matches the real card look closely.
  • build/vet/test green; visually verified; commit references this issue.
## What m: *„können wir ein preview der Karte zeigen, ganz unten vielleicht?“* A **live preview** of the card in the compose flow — placed at the **bottom** of the form — showing how the card will look as the sender fills it in (message, sender/recipient, occasion badge, theme, images/video, layout). ## Behaviour - A preview block at the bottom of compose that updates live (JS, progressive-enhancement) as the user types/selects: message text, An/von, occasion badge + theme colours, chosen layout (single/gallery/flip framing), and picked media (object URLs / local previews for images, inline player for a video). - Mobile-first: on phones it sits below the form (scroll to see). Keep it lightweight — reuse the existing card render styles so the preview matches the real `/c/{token}` look as closely as practical. - Progressive enhancement: with no JS, the form still works (preview just absent). Don't block submit on it. ## Constraints - Reuse existing card CSS/markup so preview ≈ real card. Mobile-first, German UI + Umlaute. No backend/schema change expected (pure client-side preview from current form state). No feature regressions. ## Sequencing Compose-flow + shares card render styles → **after #13 and #14** (same files). otto-head assigns when the track frees. ## DoD - Live preview at the bottom of compose reflecting message/an-von/occasion/theme/layout/media as edited. - Mobile-first; degrades cleanly without JS; matches the real card look closely. - build/vet/test green; visually verified; commit references this issue.
mAi self-assigned this 2026-06-17 08:39:30 +00:00
mAi commented 2026-06-17 08:51:00 +00:00
Author
Collaborator
Copy Link

#15 erledigt — Live-Vorschau am Ende von /compose

Die Karte wird jetzt ganz unten im Compose-Formular live aufgebaut und aktualisiert sich, während man tippt/auswählt.

Was umgesetzt ist

  • Live-Vorschau unter dem Formular (#previewSection), die bei jeder Eingabe neu gebaut wird: Nachricht, An/Von, Anlass-Badge (inkl. eigenem Anlass), Farbwelt, Layout (Klassisch/Galerie/Wendekarte) und ausgewählte Medien (Bilder als Galerie/Carousel, das erste Video als Inline-Player).
  • Echtes Karten-Markup wiederverwendet: die Vorschau erzeugt dieselben Klassen wie der Server für /c/{token} (.postcard, .message-area, .gallery/.carousel, .flip-scene …), nutzt also dieselbe CSS — die Vorschau sieht aus wie die echte Karte. Keine Template-Duplizierung, kein Backend-/Schema-Change (reine Client-Seite).
  • Farbwelt: die ganze Compose-Seite wird über body[data-theme] themt (bestehender Handler); die Vorschau erbt das automatisch. Zusätzlich setzt das Body-Tag jetzt data-theme="{{.Form.Theme}}", damit Seite und Vorschau bei Fehler-Re-Render direkt in der gewählten Farbwelt starten.
  • Wendekarte ist in der Vorschau echt umdrehbar (CSS-Flip via Checkbox/Label), Galerie/Flip-Front sind wischbar (CSS scroll-snap).
  • Medien-Handling vereinheitlicht: Object-URLs werden pro Auswahl einmal erzeugt und speisen sowohl den kleinen Thumbnail-Streifen unter dem Datei-Feld als auch die große Karten-Vorschau. <img>/<video>-Knoten werden zwischen Rebuilds gepoolt und verschoben (nicht neu erzeugt), damit das Tippen ein laufendes Video nicht neu lädt.
  • Broadcast (Zum Teilen): die „Für …"-Zeile entfällt in der Vorschau — wie auf der echten Karte.
  • Leerer Zustand: freundlicher Platzhalter „Deine Nachricht erscheint hier …" statt einer kaputt wirkenden leeren Karte.

Progressive Enhancement / Mobile-first

  • #previewSection ist standardmäßig hidden und wird nur per JS eingeblendet — ohne JS funktioniert das Formular unverändert, die Vorschau ist schlicht abwesend, der Submit wird nie blockiert.
  • Auf dem Handy sitzt die Vorschau unter dem Formular (runterscrollen); verifiziert bei 390px Viewport.

Verifikation

  • go build ./..., go vet ./..., go test ./... — alle grün.
  • Neuer Test TestComposeShowsLivePreview sichert das Preview-Scaffold (hidden), #cardPreview, das renderPreview-Wiring und <body data-theme=…>.
  • Visuell verifiziert mit Headless-Chromium (Playwright) über alle Zustände: leer/Platzhalter, Text+Geburtstag-Badge+Sky-Theme, ein-/mehrbildige Galerie, Galerie-Carousel, Wendekarte+Dusk, eigener Anlass, Broadcast (keine Empfänger-Zeile). Keine Console-Errors.

Commit: 445ad45754
Branch: mai/hermes/issue-15-feat-live-card

## #15 erledigt — Live-Vorschau am Ende von /compose Die Karte wird jetzt **ganz unten im Compose-Formular** live aufgebaut und aktualisiert sich, während man tippt/auswählt. ### Was umgesetzt ist - **Live-Vorschau** unter dem Formular (`#previewSection`), die bei jeder Eingabe neu gebaut wird: Nachricht, An/Von, Anlass-Badge (inkl. eigenem Anlass), Farbwelt, Layout (Klassisch/Galerie/Wendekarte) und ausgewählte Medien (Bilder als Galerie/Carousel, das erste Video als Inline-Player). - **Echtes Karten-Markup wiederverwendet**: die Vorschau erzeugt dieselben Klassen wie der Server für `/c/{token}` (`.postcard`, `.message-area`, `.gallery`/`.carousel`, `.flip-scene` …), nutzt also dieselbe CSS — die Vorschau sieht aus wie die echte Karte. Keine Template-Duplizierung, kein Backend-/Schema-Change (reine Client-Seite). - **Farbwelt**: die ganze Compose-Seite wird über `body[data-theme]` themt (bestehender Handler); die Vorschau erbt das automatisch. Zusätzlich setzt das Body-Tag jetzt `data-theme="{{.Form.Theme}}"`, damit Seite **und** Vorschau bei Fehler-Re-Render direkt in der gewählten Farbwelt starten. - **Wendekarte** ist in der Vorschau echt umdrehbar (CSS-Flip via Checkbox/Label), Galerie/Flip-Front sind wischbar (CSS scroll-snap). - **Medien-Handling vereinheitlicht**: Object-URLs werden pro Auswahl einmal erzeugt und speisen sowohl den kleinen Thumbnail-Streifen unter dem Datei-Feld als auch die große Karten-Vorschau. `<img>`/`<video>`-Knoten werden zwischen Rebuilds **gepoolt und verschoben** (nicht neu erzeugt), damit das Tippen ein laufendes Video nicht neu lädt. - **Broadcast** (Zum Teilen): die „Für …"-Zeile entfällt in der Vorschau — wie auf der echten Karte. - **Leerer Zustand**: freundlicher Platzhalter „Deine Nachricht erscheint hier …" statt einer kaputt wirkenden leeren Karte. ### Progressive Enhancement / Mobile-first - `#previewSection` ist standardmäßig `hidden` und wird nur per JS eingeblendet — **ohne JS funktioniert das Formular unverändert**, die Vorschau ist schlicht abwesend, der Submit wird nie blockiert. - Auf dem Handy sitzt die Vorschau unter dem Formular (runterscrollen); verifiziert bei 390px Viewport. ### Verifikation - `go build ./...`, `go vet ./...`, `go test ./...` — alle grün. - Neuer Test `TestComposeShowsLivePreview` sichert das Preview-Scaffold (hidden), `#cardPreview`, das `renderPreview`-Wiring und `<body data-theme=…>`. - **Visuell verifiziert** mit Headless-Chromium (Playwright) über alle Zustände: leer/Platzhalter, Text+Geburtstag-Badge+Sky-Theme, ein-/mehrbildige Galerie, Galerie-Carousel, Wendekarte+Dusk, eigener Anlass, Broadcast (keine Empfänger-Zeile). **Keine Console-Errors.** Commit: https://mgit.msbls.de/m/postcards/commit/445ad45754bc9a58df714146af31c59cf8581b4a Branch: `mai/hermes/issue-15-feat-live-card`
mAi commented 2026-06-17 08:52:42 +00:00
Author
Collaborator
Copy Link

✅ Merged & deployed — live preview live on sendmy.cards

Merged 445ad45 (merge 7c4e39c), deployed. Frontend-only (compose JS + CSS, no schema). A live card preview now sits at the bottom of compose, updating as you edit (message, an/von, occasion badge, theme, layout, media). Progressive enhancement — form still works without JS. build green. Please eyeball it. Not closing — m closes.

## ✅ Merged & deployed — live preview live on sendmy.cards Merged `445ad45` (merge `7c4e39c`), deployed. Frontend-only (compose JS + CSS, no schema). A live card preview now sits at the bottom of compose, updating as you edit (message, an/von, occasion badge, theme, layout, media). Progressive enhancement — form still works without JS. build green. Please eyeball it. Not closing — m closes.
mAi closed this issue 2026-06-23 15:48:03 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/postcards#15
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?