feat(post-form): U4 — Draft badge + owner Edit/Delete controls on cards

Render on each journal card, gated by owner_can_edit (R1/R3/R5/R6, KTD8):
- Draft badge (amber) when the entry is unpublished.
- Edit link -> /post?edit=<route>&return=<feed-url> (D5: a save from the home
  feed returns to home, not always the trip page); feed_return_url threaded from
  trip.html.twig/home.html.twig (page.url).
- Delete control with inline Cancel/Confirm button-swap (no browser dialog),
  data-entry-route carried for U6's delete JS, plus an aria-live status slot.
- 44x44px min tap targets (D8); titlerow wraps on narrow phones.

Verified on the container: anon sees no controls/badge; owner sees Edit+Delete on
all 13 cards with a Draft badge on the unpublished one; a non-owner authenticated
session (testrunner vs owner mischa) sees none and no drafts (V5). Browser
screenshot verification unavailable (no local Playwright); did a code-level
layout review instead.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H1FrCYNq6RXdGYbn5PFrhM
This commit is contained in:
2026-07-04 23:48:57 +02:00
co-authored by Claude Opus 4.8
parent a2d4f81bfe
commit c4228e9027
4 changed files with 102 additions and 4 deletions
+81
View File
@@ -269,6 +269,87 @@ body::after {
gap: var(--space-1);
}
/* ── Owner card controls (U4): Draft badge + Edit/Delete ─────────────────── */
.journal-post-titlerow {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap; /* phone-first: actions wrap below a long title */
gap: var(--space-2) var(--space-3);
margin-bottom: var(--space-2);
}
.journal-post-titlerow .journal-post-title { margin-bottom: 0; }
.journal-draft-badge {
display: inline-block;
vertical-align: middle;
margin-left: var(--space-2);
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #E0A458; /* warm amber — draft/unpublished */
border: 1px solid #E0A458;
border-radius: var(--radius-sm);
padding: 0.1em 0.5em;
line-height: 1.5;
white-space: nowrap;
}
.journal-post-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
flex-shrink: 0;
}
.entry-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px; /* D8 — phone-first tap target */
min-width: 44px;
padding: 0 var(--space-3);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-ink-2);
text-decoration: none;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.entry-action:hover,
.entry-action:focus-visible {
border-color: var(--color-accent);
color: var(--color-accent);
outline: none;
}
.entry-action--confirm {
color: #E5786A; /* soft red — destructive confirm */
border-color: #E5786A;
}
.entry-action--confirm:hover,
.entry-action--confirm:focus-visible {
background: #E5786A;
color: var(--color-ink-inverse);
}
.entry-delete-confirm {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.entry-delete-confirm[hidden] { display: none; }
.entry-delete-msg {
font-size: var(--text-xs);
color: #E5786A;
}
.entry-delete-msg:empty { display: none; }
.journal-photo-wrap {
position: relative;
margin-bottom: var(--space-5);