Changeset 5218863 in Klonkt for src/views

Timestamp:

08/12/2026 08:25:10 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

4bb93aa

Parents:

084b046

Message:

De Ward PWA: het gesprek over de hemel, en de zwaai-hand

Plak 4. Een tik op een gezicht opent nu echt iets.

HET GESPREK is een overlay OVER de levende hemel, geen aparte pagina:
de hemel eronder blijft dezelfde draaiende instantie, en het paneel is
doorschijnend met blur, zoals de glazen bubbels in de app. Dezelfde
bron als de C2S-lezing die Shaer gebruikt (conversationHistory):
inkomend de ap_mentions, uitgaand de eigen directe notes. Openen is
lezen: markRead neemt het maximum, dus een oud toestel kan nooit iets
weer ongelezen maken. Verversen is pollen om de acht seconden zolang
het gesprek open staat; het ritme van een gesprek is geen milliseconde,
en een socket kan later zonder iets te slopen.

DE ZWAAI-HAND hangt in dezelfde hoek als de boei en ze wisselen elkaar
af met de stand: met de kaarten verdwijnt de boei, op de hemel hangt de
hand. Slepen op een gezicht opent het paneel met de drie antwoorden, en
de tekst die je kiest IS het bericht. De treffer is sky.pick(): exact
dezelfde rekensom als een tik, dus mikken gedraagt zich overal gelijk.

Changed files:
src/routes/ward.js

• /api/thread: beide kanten, cursor, markRead bij openen
• /api/message: direct bericht of zwaai (shaer:wave reist mee)

src/assets/js/ward-sky.js

• pick() als publieke mikfunctie

src/assets/js/ward.js

• thread-overlay met poll, verstuurvak, Escape sluit
• de hand: slepen, mikken, paneel, versturen

src/views/pages/ward.ejs

• thread, hand en zwaai-paneel in de schil

src/assets/css/ward.css

• doorschijnend gesprek, bubbels, hand, paneel

src/services/i18n.js

• tien sleutels in nl, en, de

test/ward-pwa.test.js

• het gesprek draagt beide kanten en de zwaai-vlag overleeft; versturen eist een echte ontvanger en echte tekst

remarks: 897 tests groen. Nog niet geport: de (+) voor een nieuw
gesprek, Friends/Orbit-panelen, de composer met media, de mini-speler
en de themakleur; beads volgen. Slepen met een echte vinger is aan
Robin op dev.

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

File:

• src/views/pages/ward.ejs (modified) (1 diff)

src/views/pages/ward.ejs

@@ -58 +58 @@
   <p id="buoy-hint" class="sr-only"><%= state.strings.buoyHint %></p>
 
+  <!-- De zwaai-hand (§5): alleen in berichtenstand, dezelfde hoek als de
+       boei. Ze wisselen elkaar af: met de kaarten verdwijnt de boei, op de
+       hemel hangt de hand. -->
+  <button id="hand" type="button" hidden aria-describedby="hand-hint">👋</button>
+  <p id="hand-hint" class="sr-only"><%= state.strings.handHint %></p>
+
+  <!-- Het gesprek schuift OVER de hemel; die blijft eronder gewoon draaien. -->
+  <section id="thread" hidden>
+    <header>
+      <button id="thread-close" type="button" aria-label="<%= state.strings.close %>">←</button>
+      <h2 id="thread-name"></h2>
+    </header>
+    <div id="thread-list"></div>
+    <form id="thread-form">
+      <input id="thread-text" type="text" autocomplete="off" maxlength="2000"
+             placeholder="<%= state.strings.writeHere %>">
+      <button type="submit" class="primary"><%= state.strings.send %></button>
+    </form>
+  </section>
+
+  <!-- Het zwaai-paneel: de tekst die je kiest IS het bericht. -->
+  <dialog id="wave-dialog">
+    <h2 id="wave-title"></h2>
+    <div class="wave-answers">
+      <button data-wave="1">👋 <%= state.strings.wave %></button>
+      <button data-text="<%= state.strings.waveCall %>"><%= state.strings.waveCall %></button>
+      <button data-text="<%= state.strings.waveThanks %>"><%= state.strings.waveThanks %></button>
+    </div>
+    <button id="wave-cancel" type="button"><%= state.strings.notNow %></button>
+  </dialog>
+
   <dialog id="help-dialog">
     <form method="dialog">