Changeset 5218863 in Klonkt for src/assets/css

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/assets/css/ward.css (modified) (1 diff)

src/assets/css/ward.css

@@ -100 +100 @@
 /* De kaarten vallen weg, de hemel blijft: dezelfde beweging als in de app. */
 body.messages-mode .help, body.messages-mode .cards { display: none; }
+
+/* ── De zwaai-hand ────────────────────────────────────────────────────── */
+/* Zelfde hoek als de boei; ze wisselen elkaar af met de stand. */
+#hand {
+  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
+  width: 76px; height: 76px; border: 0; border-radius: 50%;
+  background: transparent; font-size: 52px; line-height: 1;
+  touch-action: none; cursor: grab; z-index: 50;
+}
+#hand.dragging { cursor: grabbing; transform: scale(1.1); }
+
+/* ── Het gesprek over de hemel ────────────────────────────────────────── */
+#thread {
+  position: fixed; inset: 0; z-index: 40;
+  display: flex; flex-direction: column;
+  /* Doorschijnend: de hemel eronder blijft zichtbaar draaien, net als de
+     glazen bubbels in de app. */
+  background: rgba(20, 26, 36, .72); backdrop-filter: blur(14px);
+}
+#thread header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
+#thread header h2 { margin: 0; font-size: 1.05rem; }
+#thread-close { border: 0; background: #2a3342; color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 1rem; }
+#thread-list { flex: 1; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 8px; }
+.bubble { max-width: 78%; padding: 10px 12px; border-radius: 14px; background: var(--card); }
+.bubble.out { align-self: flex-end; background: var(--accent); }
+.bubble.wave { font-size: 1.4rem; }
+.bubble .when { display: block; margin-top: 4px; font-size: .7rem; color: rgba(255,255,255,.55); }
+.bubble .body img { max-width: 100%; border-radius: 8px; }
+#thread-form { display: flex; gap: 8px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
+#thread-form input {
+  flex: 1; border-radius: 999px; border: 1px solid #2a3342;
+  background: #131a25; color: var(--ink); padding: 10px 16px; font: inherit;
+}
+#thread-form button { border: 0; border-radius: 999px; padding: 10px 18px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
+
+/* ── Het zwaai-paneel ─────────────────────────────────────────────────── */
+dialog#wave-dialog {
+  border: 0; border-radius: 16px; padding: 18px; max-width: 320px; width: calc(100% - 48px);
+  background: var(--card); color: var(--ink); text-align: center;
+}
+dialog#wave-dialog::backdrop { background: rgba(0,0,0,.4); }
+dialog#wave-dialog h2 { margin: 0 0 12px; font-size: 1.05rem; }
+.wave-answers { display: grid; gap: 8px; }
+.wave-answers button { border: 0; border-radius: 10px; padding: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
+#wave-cancel { margin-top: 10px; border: 0; background: none; color: var(--dim); font: inherit; }