Changeset 5412cbb in Klonkt for src/assets

Timestamp:

08/12/2026 08:38:08 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

2086ea2

Parents:

4bb93aa

Message:

Ward-PWA: de (+) voor een nieuw gesprek

De hemel toont alleen met wie je al sprak; de (+) is de deur naar de
rest. Hij zit op de OORSPRONG van het veld en pant en zoomt met de
gezichten mee, zodat hij altijd het midden van de vliegende avatars is,
waar de hemel ook heen drijft. Precies waar de plaatsing bewust ruimte
vrijhoudt: elk gezicht hangt minstens 1.4 cel naar buiten.

De tik kiest eerst een gezicht en pas daarna de (+), met een raakzone
die meeschaalt met de zoom. De kiezer erachter toont iedereen met een
volgrelatie, welke kant op dan ook: dezelfde bron als de Connect-pagina
(listConnections), want de vraag is dezelfde. Kies iemand en het lege
gesprek opent gewoon; het eerste bericht maakt het echt.

Changed files:
src/routes/ward.js

• /api/friends: following + followers samengevoegd, met naam en icoon

src/assets/js/ward-sky.js

• de (+) getekend op de veldoorsprong; onNew naast onPick

src/assets/js/ward.js

• de vriendenkiezer, die doorvalt in openThread

src/views/pages/ward.ejs + src/assets/css/ward.css

• de kiezer als dialoog

src/services/i18n.js

• twee sleutels in nl, en, de

test/ward-pwa.test.js

• beide richtingen zijn een deur, en elke deur heeft een naam

remarks: 899 tests groen.

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

Location:

src/assets

Files:

• css/ward.css (modified) (1 diff)
• js/ward-sky.js (modified) (3 diffs)
• js/ward.js (modified) (1 diff)

src/assets/css/ward.css

@@ -150 +150 @@
 .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; }
+
+/* ── De vriendenkiezer achter de (+) ──────────────────────────────────── */
+dialog#friends-dialog {
+  border: 0; border-radius: 16px; padding: 18px; max-width: 380px; width: calc(100% - 48px);
+  max-height: 70vh; overflow-y: auto;
+  background: var(--card); color: var(--ink);
+}
+dialog#friends-dialog::backdrop { background: rgba(0,0,0,.4); }
+dialog#friends-dialog h2 { margin: 0 0 12px; font-size: 1.05rem; }
+.friend button.row {
+  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
+  border: 0; background: none; color: var(--ink); padding: 4px 2px; font: inherit; cursor: pointer;
+}
+.friend .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
+.friend .wie { display: flex; flex-direction: column; }
+#friends-cancel { margin-top: 12px; border: 0; background: none; color: var(--dim); font: inherit; }

src/assets/js/ward-sky.js

@@ -152 +152 @@
    * @param {(index:number)=>void} onPick  een gezicht aangetikt
    */
-  constructor(canvas, onPick) {
+  constructor(canvas, onPick, onNew) {
     this.canvas = canvas;
     this.g = canvas.getContext('2d');
     this.onPick = onPick;
+    // De (+) in het midden: de deur naar iemand NIEUW. Hij zit op de
+    // OORSPRONG van het veld en pant en zoomt met de gezichten mee, zodat hij
+    // altijd het midden van de vliegende avatars is, waar de hemel ook heen
+    // drijft. De plaatsing houdt daar bewust ruimte vrij (elk gezicht hangt
+    // minstens 1.4 cel naar buiten).
+    this.onNew = onNew;
     this.faces = [];
     this.spots = [];
@@ -211 +217 @@
     const s = Math.min(Math.max(this.scale, 0.5), 1.6);
     const draw = FACE * s;
+
+    // De (+) eerst, dan de gezichten eroverheen als het krap wordt.
+    if (this.interactive && this.onNew) {
+      const px = cx + this.panX;
+      const py = cy + this.panY;
+      const pr = 22 * s;
+      g.beginPath(); g.arc(px, py, pr, 0, Math.PI * 2);
+      g.fillStyle = 'rgba(255,255,255,0.92)'; g.fill();
+      g.strokeStyle = '#11131a'; g.lineWidth = Math.max(2, 3 * s); g.lineCap = 'round';
+      g.beginPath();
+      g.moveTo(px - pr * 0.45, py); g.lineTo(px + pr * 0.45, py);
+      g.moveTo(px, py - pr * 0.45); g.lineTo(px, py + pr * 0.45);
+      g.stroke();
+    }
 
     for (let i = 0; i < this.spots.length; i++) {
@@ -248 +268 @@
       if (moved < 6) {
         const r = c.getBoundingClientRect();
-        const hit = nearestFace(e.clientX - r.left, e.clientY - r.top, this.spots, {
+        const x = e.clientX - r.left;
+        const y = e.clientY - r.top;
+        const hit = nearestFace(x, y, this.spots, {
           cx: this.w / 2, cy: this.h / 2, cell: CELL, scale: this.scale,
           panX: this.panX, panY: this.panY,
         });
-        if (hit != null) this.onPick?.(hit);
+        if (hit != null) { this.onPick?.(hit); return; }
+        // Geen gezicht? Dan misschien de (+): zelfde middelpunt als getekend,
+        // met een raakzone die meeschaalt zodat mikken bij elke zoom klopt.
+        const s2 = Math.min(Math.max(this.scale, 0.5), 1.6);
+        const d = Math.hypot(x - (this.w / 2 + this.panX), y - (this.h / 2 + this.panY));
+        if (d <= 26 * s2) this.onNew?.();
       }
     };

src/assets/js/ward.js

@@ -232 +232 @@
     const c = convs[i];
     if (c) openThread(c);
-  });
+  }, () => openFriendsPicker());
+
+  /* ── De (+): de deur naar iemand nieuw ─────────────────────────────────
+     De hemel toont alleen met wie je al sprak; de kiezer toont iedereen met
+     een volgrelatie. Kies iemand en het lege gesprek opent gewoon: het
+     eerste bericht maakt het echt. */
+  const friendsDlg = document.getElementById('friends-dialog');
+  async function openFriendsPicker() {
+    const list = document.getElementById('friends-list');
+    list.replaceChildren();
+    friendsDlg.showModal();
+    try {
+      const r = await fetch('/ward/api/friends', { headers: { Accept: 'application/json' } });
+      const items = r.ok ? (await r.json()).items || [] : [];
+      document.getElementById('friends-empty').hidden = items.length > 0;
+      items.forEach((f) => {
+        const li = el('li', 'card friend');
+        const row = el('button', 'row');
+        row.type = 'button';
+        if (f.icon) {
+          const img = el('img', 'avatar');
+          img.src = f.icon; img.alt = ''; img.loading = 'lazy';
+          row.append(img);
+        }
+        const kolom = el('span', 'wie');
+        kolom.append(el('span', 'name', f.name), el('span', 'hint', f.handle));
+        row.append(kolom);
+        row.addEventListener('click', () => {
+          friendsDlg.close();
+          openThread({ uri: f.uri, name: f.name, icon: f.icon });
+        });
+        li.append(row);
+        list.append(li);
+      });
+    } catch { /* de kiezer blijft leeg staan; annuleren kan altijd */ }
+  }
+  document.getElementById('friends-cancel').addEventListener('click', () => friendsDlg.close());
 
   /* ── Het gesprek: een overlay OVER de levende hemel ────────────────────