relay-companion 0.1.85 → 0.1.86

package/overlay/inbox.html

@@ -503,6 +503,29 @@
   .cv-sub { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
   .cv-chev { flex:0 0 auto; display:flex; align-items:center; }
   .cv-empty { padding:34px 16px; text-align:center; color:var(--muted-2); font-size:12.5px; line-height:1.5; }
+  /* ---- contact groups (rosters) ---- */
+  .cvg { border-top:1px solid var(--hair-2); padding-bottom:10px; }
+  .cvg-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 6px; }
+  .cvg-newform { display:flex; gap:7px; padding:6px 16px 10px; align-items:center; }
+  .cvg-newform.hidden { display:none; }
+  .cvg-newform .cv-input { flex:1; }
+  .cvg-error { color:#b4332a; font-size:11.5px; padding:0 16px; line-height:1.4; }
+  .cvg-error:empty { display:none; }
+  .cvg-item { display:flex; align-items:center; gap:11px; padding:9px 16px; cursor:pointer; text-align:left; appearance:none; border:0; border-bottom:1px solid var(--hair-2); background:transparent; width:100%; font-family:var(--sans); transition:background-color .14s var(--settle); }
+  .cvg-item:hover { background:rgba(31,26,23,.035); }
+  .cvg-name { font-size:13px; font-weight:600; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .cvg-count { font-size:11.5px; color:var(--muted-2); }
+  .cvg-panel { padding:4px 16px 12px; border-bottom:1px solid var(--hair-2); display:flex; flex-direction:column; gap:8px; }
+  .cvg-members { display:flex; flex-wrap:wrap; gap:5px; }
+  .cvg-none { font-size:11.5px; color:var(--muted-2); }
+  .cvg-addwrap { position:relative; }
+  .cvg-sugg { display:flex; flex-direction:column; gap:3px; margin-top:4px; }
+  .cvg-sugg button { text-align:left; appearance:none; border:1px solid var(--hair-2); background:transparent; border-radius:7px; padding:5px 9px; font-size:12px; color:var(--ink); cursor:pointer; font-family:var(--sans); }
+  .cvg-sugg button:hover { background:rgba(31,26,23,.045); }
+  .cvg-actions { display:flex; gap:10px; }
+  .cvg-act { appearance:none; border:0; background:transparent; padding:0; font-size:11.5px; color:var(--muted-2); cursor:pointer; font-family:var(--sans); }
+  .cvg-act:hover { color:var(--ink); text-decoration:underline; }
+  .cvg-act.danger { color:#b4332a; }
   .cv-form { display:flex; flex-direction:column; gap:7px; padding:8px 16px 14px; border-bottom:1px solid var(--hair-2); }
   .cv-form.hidden { display:none; }
   .cv-row2 { display:flex; gap:7px; }
@@ -827,6 +850,23 @@
         </form>
         <div class="cv-list" id="cvList"></div>
         <div id="contactsEmpty" class="cv-empty gone">No contacts yet.<br>Add someone, or your agent saves them as you relay.</div>
+
+        <!-- Contact groups: saved rosters. A relay to a group fans out to every
+             member under ONE shared thread; replies reach everyone. -->
+        <div class="cvg" id="cvGroups">
+          <div class="cvg-head">
+            <span class="cv-title">Groups</span>
+            <button class="cv-add" type="button" id="cvgNew">+ New group</button>
+          </div>
+          <form class="cvg-newform hidden" id="cvgNewForm">
+            <input class="cv-input" id="cvgNewName" placeholder="Group name" autocomplete="off" spellcheck="false" />
+            <button class="cv-save" type="submit">Create</button>
+            <button class="cv-cancel" type="button" id="cvgNewCancel">Cancel</button>
+          </form>
+          <div class="cvg-error" id="cvgError"></div>
+          <div id="cvgList"></div>
+          <div class="cv-empty" id="cvgEmpty">No groups yet. A group relays to everyone in it as one conversation.</div>
+        </div>
       </section>
 
       <!-- Settings view (account card + sign-out / switch-account; rendered by JS) -->
@@ -2425,7 +2465,181 @@
     try { contactsList = (await window.relay.contacts()) || []; }
     catch { contactsList = []; }
     renderContacts();
+    loadGroups();
+  }
+
+  // ---- Contact groups (rosters) ----
+  // Server-truth only: every mutation returns the updated group view and the
+  // section re-renders from it, so nothing here can drift from the API.
+  const cvgNewEl = document.getElementById("cvgNew");
+  const cvgNewFormEl = document.getElementById("cvgNewForm");
+  const cvgNewNameEl = document.getElementById("cvgNewName");
+  const cvgNewCancelEl = document.getElementById("cvgNewCancel");
+  const cvgListEl = document.getElementById("cvgList");
+  const cvgEmptyEl = document.getElementById("cvgEmpty");
+  const cvgErrorEl = document.getElementById("cvgError");
+  let groupsList = [];
+  let cvgExpandedId = null; // group whose member panel is open
+  let cvgRenamingId = null;
+  let cvgDeleteArmedId = null;
+  let cvgSearchTimer = null;
+  function cvgShowError(message) { cvgErrorEl.textContent = message || ""; }
+  function cvgApply(result) {
+    // A mutation's returned view replaces (or appends) its group; delete passes
+    // a removal marker. Sort by name so rows don't jump around per mutation.
+    if (result && result.removeId) groupsList = groupsList.filter((g) => g.id !== result.removeId);
+    else if (result && result.id) {
+      const at = groupsList.findIndex((g) => g.id === result.id);
+      if (at === -1) groupsList.push(result);
+      else groupsList[at] = result;
+    }
+    groupsList.sort((a, b) => String(a.name).localeCompare(String(b.name)));
+    renderGroups();
+  }
+  async function cvgCall(fn, ...args) {
+    cvgShowError("");
+    let res = null;
+    try { res = await fn(...args); } catch (e) { res = { ok: false, error: e && e.message ? e.message : String(e) }; }
+    if (!res || res.ok !== true) {
+      cvgShowError((res && res.error) || "That didn't go through — try again.");
+      return null;
+    }
+    return res.result;
+  }
+  async function loadGroups() {
+    const groups = await cvgCall(window.relay.groups);
+    if (Array.isArray(groups)) {
+      groupsList = groups.slice().sort((a, b) => String(a.name).localeCompare(String(b.name)));
+      renderGroups();
+    }
+  }
+  function renderGroups() {
+    cvgEmptyEl.classList.toggle("gone", groupsList.length > 0);
+    cvgListEl.innerHTML = groupsList.map((g) => {
+      const open = g.id === cvgExpandedId;
+      const count = Number(g.memberCount ?? (g.members || []).length) || 0;
+      const row = cvgRenamingId === g.id
+        ? `<form class="cvg-newform" data-rename-form="${esc(g.id)}"><input class="cv-input" data-rename-input="${esc(g.id)}" value="${esc(g.name)}" autocomplete="off" spellcheck="false" /><button class="cv-save" type="submit">Save</button><button class="cv-cancel" type="button" data-rename-cancel="${esc(g.id)}">Cancel</button></form>`
+        : `<button class="cvg-item" type="button" data-group="${esc(g.id)}">
+            <span class="cvg-name">${esc(g.name)}</span>
+            <span class="cvg-count">${count} member${count === 1 ? "" : "s"}</span>
+            <span class="cv-chev">${CHEVRON_SVG}</span>
+          </button>`;
+      if (!open) return row;
+      const members = (g.members || []).map((m) => {
+        const label = m.name || m.email || m.contactId || m.id;
+        const cid = m.contactId || m.id;
+        return `<span class="cv-chip"><span class="e">${esc(label)}</span><button type="button" class="cv-chip-x" data-unmember="${esc(g.id)}|${esc(cid)}" aria-label="Remove ${esc(label)}">×</button></span>`;
+      }).join("");
+      return row + `
+      <div class="cvg-panel" data-stop="1">
+        <div class="cvg-members">${members || '<span class="cvg-none">No members yet.</span>'}</div>
+        <div class="cvg-addwrap">
+          <input class="cv-input" data-addmember="${esc(g.id)}" placeholder="Add member — type a name…" autocomplete="off" spellcheck="false" />
+          <div class="cvg-sugg" data-sugg="${esc(g.id)}"></div>
+        </div>
+        <div class="cvg-actions">
+          <button class="cvg-act" type="button" data-rename="${esc(g.id)}">Rename</button>
+          <button class="cvg-act danger" type="button" data-delete="${esc(g.id)}">${cvgDeleteArmedId === g.id ? "Really delete? Every member drops out" : "Delete group"}</button>
+        </div>
+      </div>`;
+    }).join("");
+    wireGroupRows();
   }
+  function wireGroupRows() {
+    for (const el of cvgListEl.querySelectorAll("[data-group]")) {
+      el.addEventListener("click", () => {
+        const id = el.getAttribute("data-group");
+        cvgExpandedId = cvgExpandedId === id ? null : id;
+        cvgDeleteArmedId = null; cvgRenamingId = null;
+        renderGroups();
+      });
+    }
+    for (const el of cvgListEl.querySelectorAll("[data-unmember]")) {
+      el.addEventListener("click", async (ev) => {
+        ev.stopPropagation();
+        const [gid, cid] = el.getAttribute("data-unmember").split("|");
+        const view = await cvgCall(window.relay.groupRemoveMember, gid, cid);
+        if (view) cvgApply(view);
+      });
+    }
+    for (const el of cvgListEl.querySelectorAll("[data-rename]")) {
+      el.addEventListener("click", () => { cvgRenamingId = el.getAttribute("data-rename"); renderGroups();
+        const input = cvgListEl.querySelector(`[data-rename-input="${CSS.escape(cvgRenamingId)}"]`);
+        if (input) { input.focus(); input.select(); }
+      });
+    }
+    for (const el of cvgListEl.querySelectorAll("[data-rename-cancel]")) {
+      el.addEventListener("click", () => { cvgRenamingId = null; renderGroups(); });
+    }
+    for (const form of cvgListEl.querySelectorAll("[data-rename-form]")) {
+      form.addEventListener("submit", async (ev) => {
+        ev.preventDefault();
+        const gid = form.getAttribute("data-rename-form");
+        const name = form.querySelector("input").value.trim();
+        if (!name) return;
+        const view = await cvgCall(window.relay.groupRename, gid, name);
+        if (view) { cvgRenamingId = null; cvgApply(view); }
+      });
+    }
+    for (const el of cvgListEl.querySelectorAll("[data-delete]")) {
+      el.addEventListener("click", async () => {
+        const gid = el.getAttribute("data-delete");
+        // Deleting a roster is destructive: first tap arms, second tap commits.
+        if (cvgDeleteArmedId !== gid) { cvgDeleteArmedId = gid; renderGroups(); return; }
+        const res = await cvgCall(window.relay.groupDelete, gid);
+        cvgDeleteArmedId = null;
+        if (res) { cvgExpandedId = null; cvgApply({ removeId: gid }); }
+      });
+    }
+    for (const input of cvgListEl.querySelectorAll("[data-addmember]")) {
+      const gid = input.getAttribute("data-addmember");
+      const suggEl = cvgListEl.querySelector(`[data-sugg="${CSS.escape(gid)}"]`);
+      input.addEventListener("focus", () => { if (window.relay.setFocusable) window.relay.setFocusable(true); });
+      input.addEventListener("blur", () => { if (activeView !== "contacts" && window.relay.setFocusable) window.relay.setFocusable(false); });
+      input.addEventListener("input", () => {
+        clearTimeout(cvgSearchTimer);
+        const q = input.value.trim();
+        if (q.length < 2) { suggEl.innerHTML = ""; return; }
+        cvgSearchTimer = setTimeout(async () => {
+          const res = await cvgCall(window.relay.contactsSearch, q);
+          const group = groupsList.find((x) => x.id === gid);
+          const already = new Set(((group && group.members) || []).map((m) => m.contactId || m.id));
+          const matches = ((res && res.matches) || []).filter((m) => m.contactId && !already.has(m.contactId)).slice(0, 4);
+          suggEl.innerHTML = matches.map((m) =>
+            `<button type="button" data-addpick="${esc(gid)}|${esc(m.contactId)}">${esc(m.name || m.email)}${m.email && m.name ? ` — ${esc(m.email)}` : ""}</button>`,
+          ).join("");
+          for (const b of suggEl.querySelectorAll("[data-addpick]")) {
+            b.addEventListener("click", async () => {
+              const [g2, cid] = b.getAttribute("data-addpick").split("|");
+              const view = await cvgCall(window.relay.groupAddMember, g2, cid);
+              if (view) cvgApply(view);
+            });
+          }
+        }, 250);
+      });
+    }
+  }
+  cvgNewEl.addEventListener("click", () => {
+    cvgNewFormEl.classList.toggle("hidden");
+    if (!cvgNewFormEl.classList.contains("hidden")) {
+      if (window.relay.setFocusable) window.relay.setFocusable(true);
+      cvgNewNameEl.focus();
+    }
+  });
+  cvgNewCancelEl.addEventListener("click", () => { cvgNewNameEl.value = ""; cvgNewFormEl.classList.add("hidden"); });
+  cvgNewFormEl.addEventListener("submit", async (ev) => {
+    ev.preventDefault();
+    const name = cvgNewNameEl.value.trim();
+    if (!name) return;
+    const view = await cvgCall(window.relay.groupCreate, name);
+    if (view) {
+      cvgNewNameEl.value = "";
+      cvgNewFormEl.classList.add("hidden");
+      cvgExpandedId = view.id; // open the fresh group so adding members is the next tap
+      cvgApply(view);
+    }
+  });
   function cvSplitName(name) {
     const parts = String(name || "").trim().split(/\s+/).filter(Boolean);
     return { first: parts[0] || "", last: parts.slice(1).join(" ") };

package/overlay/main.cjs

@@ -3171,6 +3171,26 @@ ipcMain.handle("relay:contacts", () => readContacts());
 ipcMain.handle("relay:contactSave", (_e, input) => saveContact(input));
 ipcMain.handle("relay:contactDelete", (_e, input) => deleteContactFromBook(input));
 
+// Contact groups (Contacts tab): thin proxies over the owner-scoped API. Every
+// mutation returns the server's updated group view and the renderer re-renders
+// from it, so there is no local cache to drift. Errors come back as
+// { ok:false, error } — the renderer shows them inline instead of dying.
+const groupCall = async (fn) => {
+  try {
+    const client = await relayClient();
+    return { ok: true, result: await fn(client) };
+  } catch (error) {
+    return { ok: false, error: error && error.message ? error.message : String(error) };
+  }
+};
+ipcMain.handle("relay:groups", () => groupCall(async (c) => (await c.groups()).groups || []));
+ipcMain.handle("relay:groupCreate", (_e, name) => groupCall((c) => c.createGroup({ name })));
+ipcMain.handle("relay:groupRename", (_e, id, name) => groupCall((c) => c.renameGroup(id, { name })));
+ipcMain.handle("relay:groupDelete", (_e, id) => groupCall((c) => c.deleteGroup(id)));
+ipcMain.handle("relay:groupAddMember", (_e, id, contactId) => groupCall((c) => c.addGroupMember(id, contactId)));
+ipcMain.handle("relay:groupRemoveMember", (_e, id, contactId) => groupCall((c) => c.removeGroupMember(id, contactId)));
+ipcMain.handle("relay:contactsSearch", (_e, q) => groupCall((c) => c.searchContacts(String(q || ""))));
+
 // Settings tab: account card + the sign-out / switch-account lifecycle.
 ipcMain.handle("relay:accountInfo", () => accountInfo());
 ipcMain.handle("relay:pairWithCode", (_e, input) => pairWithCode(input));

package/overlay/preload.cjs

@@ -53,6 +53,14 @@ contextBridge.exposeInMainWorld("relay", {
 
   // contacts
   contacts: () => ipcRenderer.invoke("relay:contacts"),
+  contactsSearch: (q) => ipcRenderer.invoke("relay:contactsSearch", q),
+  // contact groups (saved rosters; a group relays to every member as one thread)
+  groups: () => ipcRenderer.invoke("relay:groups"),
+  groupCreate: (name) => ipcRenderer.invoke("relay:groupCreate", name),
+  groupRename: (id, name) => ipcRenderer.invoke("relay:groupRename", id, name),
+  groupDelete: (id) => ipcRenderer.invoke("relay:groupDelete", id),
+  groupAddMember: (id, contactId) => ipcRenderer.invoke("relay:groupAddMember", id, contactId),
+  groupRemoveMember: (id, contactId) => ipcRenderer.invoke("relay:groupRemoveMember", id, contactId),
   contactSave: (input) => ipcRenderer.invoke("relay:contactSave", input),
   contactDelete: (input) => ipcRenderer.invoke("relay:contactDelete", input),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-companion",
-  "version": "0.1.85",
+  "version": "0.1.86",
   "description": "Relay companion for ordinary messages, with dormant coordination features available only by explicit opt-in.",
   "type": "module",
   "bin": {