Changeset 2086ea2 in Klonkt for src/views

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/views/pages/ward.ejs (modified) (2 diffs)

src/views/pages/ward.ejs

@@ -30 +30 @@
 
     <section id="feed">
-      <h2><%= state.strings.feed %></h2>
+      <div class="feed-head">
+        <h2><%= state.strings.feed %></h2>
+        <button id="compose-open" type="button" class="primary"><%= state.strings.write %></button>
+      </div>
       <div class="cards" id="card-list"></div>
       <p class="empty" id="feed-empty" hidden><%= state.strings.feedEmpty %></p>
@@ -51 +54 @@
     </section>
   </main>
+
+  <!-- De composer: schrijven met foto, geluid of video. De posttypes
+       dicteren hoe de widget eruitziet (Robins wens), maar de kern is een
+       tekstvak plus tot vier media; de server maakt de rest af (poster,
+       waveform) zoals bij de app. -->
+  <dialog id="compose-dialog">
+    <div class="compose-head">
+      <button id="compose-cancel" type="button" aria-label="<%= state.strings.cancel %>">✕</button>
+      <select id="compose-vis" aria-label="<%= state.strings.visibility %>">
+        <option value="friends"><%= state.strings.visFriends %></option>
+        <option value="public"><%= state.strings.visPublic %></option>
+      </select>
+      <button id="compose-send" type="button" class="primary"><%= state.strings.post %></button>
+    </div>
+    <textarea id="compose-text" rows="4" maxlength="5000" placeholder="<%= state.strings.writeHere %>"></textarea>
+    <div id="compose-media" class="compose-media"></div>
+    <div class="compose-tools">
+      <label class="tool" title="<%= state.strings.addPhoto %>">
+        📷<input type="file" accept="image/*" hidden data-kind="image">
+      </label>
+      <label class="tool" title="<%= state.strings.addAudio %>">
+        🎤<input type="file" accept="audio/*" hidden data-kind="audio">
+      </label>
+      <label class="tool" title="<%= state.strings.addVideo %>">
+        🎬<input type="file" accept="video/*" hidden data-kind="video">
+      </label>
+      <span id="compose-status" class="hint"></span>
+    </div>
+  </dialog>
 
   <!-- De reddingsboei zweeft boven de pagina en is sleepbaar, net als in