Changeset 2086ea2 in Klonkt for src/assets/css

Timestamp:

08/12/2026 09:16:09 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

39dab6b

Parents:

5412cbb

Message:

Ward-PWA: de composer met media

Schrijven met foto, geluid of video, in de browser.

DEZELFDE POORT ALS DE APP, en dat is de kern. De composer bouwt precies
de AS2 Create die Shaer over C2S stuurt en geeft die aan
ingestOutboxActivity: die doet de compose-poort (par. 5), de
attachment-validatie en de zichtbaarheid. GEEN eigen posting-pad, want
dan zou de web-ward een sluiproute om de guardians heen zijn. Een test
bewaakt precies dat: een gated ward wordt ook via de browser
tegengehouden.

Media gaan eerst apart naar /ward/api/upload, in DEZELFDE bak als de
app (reply-media), zodat een foto van een app-ward en een browser-ward
niet van twee plekken federeert. De server maakt de rest af zoals altijd:
posterframe voor video, waveform voor audio. De post draagt daarna alleen
de url, dus de payload blijft klein.

Sessie-geauthenticeerd, niet met een bearer: /ward draait op je eigen
ingelogde Klonkt, dus de browser heeft geen token nodig zoals de app.

New file: (geen)
Changed files:
src/routes/ward.js

• /api/upload: sessie-geauthenticeerd, zelfde filters/map als C2S
• /api/post: bouwt de AS2 Create, door ingestOutboxActivity

src/views/pages/ward.ejs

• schrijfknop, composer-dialoog met tekst, media en zichtbaarheid

src/assets/js/ward.js

• upload-per-bestand, media-chips, plaatsen; opruiming van een dubbel geraakte doc-comment

src/assets/css/ward.css

• composer, media-chips, tools

src/services/i18n.js

• twaalf sleutels in nl, en, de

test/ward-pwa.test.js

• de gate geldt ook in de browser; een vrij account plaatst met media; leeg wordt geweigerd; een vreemde kan niet uploaden

remarks: 903 tests groen. Opnemen van audio/video in de browser zelf
(MediaRecorder) is nog niet gebouwd; nu kies je een bestand. Bead volgt.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• src/assets/css/ward.css (modified) (1 diff)

src/assets/css/ward.css

@@ -166 +166 @@
 .friend .wie { display: flex; flex-direction: column; }
 #friends-cancel { margin-top: 12px; border: 0; background: none; color: var(--dim); font: inherit; }
+
+/* ── De composer ──────────────────────────────────────────────────────── */
+.feed-head { display: flex; align-items: center; gap: 12px; }
+.feed-head h2 { margin: 24px 0 10px; }
+#compose-open { margin-left: auto; border: 0; border-radius: 999px; padding: 8px 16px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
+
+dialog#compose-dialog {
+  border: 0; border-radius: 16px; padding: 16px; max-width: 480px; width: calc(100% - 32px);
+  background: var(--card); color: var(--ink);
+}
+dialog#compose-dialog::backdrop { background: rgba(0,0,0,.5); }
+.compose-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+.compose-head #compose-cancel { border: 0; background: #2a3342; color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 1rem; }
+.compose-head #compose-vis { flex: 1; border-radius: 10px; border: 1px solid #2a3342; background: #131a25; color: var(--ink); padding: 8px; font: inherit; }
+.compose-head .primary { border: 0; border-radius: 10px; padding: 8px 16px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
+.compose-head .primary:disabled { background: #3a3f4d; color: var(--dim); }
+#compose-text { width: 100%; border-radius: 12px; border: 1px solid #2a3342; background: #131a25; color: var(--ink); padding: 10px; font: inherit; resize: vertical; }
+.compose-media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.media-chip { position: relative; display: flex; align-items: center; gap: 6px; background: #131a25; border-radius: 10px; padding: 6px 8px; }
+.media-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
+.media-chip .kind { font-size: 1.2rem; }
+.media-chip .name { font-size: .8rem; color: var(--dim); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.media-chip .drop { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #000; color: #fff; font-size: .75rem; line-height: 1; }
+.compose-tools { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
+.compose-tools .tool { font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 10px; background: #131a25; }
+.compose-tools .hint { margin-left: auto; }