relay-companion 0.1.261 → 0.1.263

package/overlay/inbox.html

@@ -970,17 +970,16 @@
   .gd-action.danger { color:var(--danger); }
   .gd-rename-form { display:flex; gap:7px; }
   .gd-rename-form .cv-input { min-width:0; flex:1; }
-  .gd-membership { padding:14px 16px 18px; }
-  .group-detail.in-sheet .gd-membership { padding:16px 22px 22px; }
+  .gd-membership { display:flex; align-items:center; min-height:58px; padding:0 16px; }
+  .group-detail.in-sheet .gd-membership { padding-inline:22px; }
+  .gd-membership-confirm { padding-block:14px 18px; }
+  .group-detail.in-sheet .gd-membership-confirm { padding-block:16px 22px; }
   .gd-leave {
-    appearance:none; display:grid; grid-template-columns:19px minmax(0,1fr) 10px; align-items:center; gap:11px; width:100%;
-    padding:12px 13px; border:1px solid color-mix(in srgb, var(--danger) 26%, var(--edge)); border-radius:var(--r-3);
-    background:color-mix(in srgb, var(--danger) 4%, var(--bg)); color:var(--danger); text-align:left; cursor:pointer;
-  }
-  .gd-leave-copy { display:flex; flex-direction:column; min-width:0; }
-  .gd-leave-copy strong { font-family:var(--sans); font-size:12.5px; font-weight:600; }
-  .gd-leave-copy span { margin-top:2px; color:var(--muted); font-family:var(--serif); font-size:12.5px; }
-  .gd-confirm { padding:12px 13px; border:1px solid color-mix(in srgb, var(--danger) 26%, var(--edge)); border-radius:var(--r-3); background:var(--wash); }
+    appearance:none; border:0; background:transparent; padding:8px 0; color:var(--danger);
+    font-family:var(--sans); font-size:12.5px; font-weight:500; text-align:left; cursor:pointer;
+  }
+  .gd-leave:hover { color:color-mix(in srgb, var(--danger) 84%, var(--ink)); }
+  .gd-confirm { width:100%; padding:12px 13px; border:1px solid color-mix(in srgb, var(--danger) 26%, var(--edge)); border-radius:var(--r-3); background:var(--wash); }
   .gd-confirm strong { display:block; color:var(--ink); font-family:var(--sans); font-size:12.5px; font-weight:600; }
   .gd-confirm p { margin:5px 0 0; color:var(--muted); font-family:var(--serif); font-size:12.5px; line-height:1.4; }
   .gd-confirm-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:11px; }
@@ -1155,7 +1154,7 @@
      switches: people move between Claude Code and Codex independently, so a
      radio-style Claude/Codex/Both picker made the common state harder to read. */
   .sv-open-section { margin:24px 12px 0; }
-  .sv-open-title { padding:0 4px; font-family:var(--sans); font-size:15px; line-height:1.35; font-weight:600; color:var(--ink); }
+  .sv-open-title, .sv-quiet-title { padding:0 4px; font-family:var(--sans); font-size:15px; line-height:1.35; font-weight:600; color:var(--ink); }
   .sv-open-intro { padding:0 4px; margin:4px 0 10px; font-family:var(--sans); font-size:12px; line-height:1.45; color:var(--muted-2); }
   .sv-open-list { overflow:hidden; border-radius:var(--r-3); background:var(--raised); box-shadow:inset 0 0 0 1px var(--edge); }
   .sv-open-row { display:flex; align-items:center; gap:11px; min-height:54px; padding:10px 12px; }
@@ -1523,8 +1522,10 @@
   .th-msg:hover + .th-under .th-reply-ghost, .th-under:hover .th-reply-ghost { opacity:.75; }
   /* A reply stays in the room's chronology. Its source is an inset preview,
      never a side thread: tap it to return to the exact Relay it answers. */
-  .th-reply-ref { flex:1 0 100%; min-width:0; appearance:none; border:0; border-left:2px solid var(--accent);
-    border-radius:7px; background:color-mix(in srgb, var(--ink) 4%, transparent); padding:6px 42px 6px 9px; margin:0 0 7px;
+  /* The bubble clock owns the top-right lane. End the source card before it
+     instead of padding beneath it, so the clock never sits on the card edge. */
+  .th-reply-ref { flex:0 0 calc(100% - 42px); width:calc(100% - 42px); min-width:0; appearance:none; border:0; border-left:2px solid var(--accent);
+    border-radius:7px; background:color-mix(in srgb, var(--ink) 4%, transparent); padding:6px 9px; margin:0 42px 7px 0;
     color:inherit; cursor:pointer; text-align:left; font-family:var(--sans); }
   .th-reply-ref:hover { background:color-mix(in srgb, var(--ink) 7%, transparent); }
   .th-reply-ref:disabled { cursor:default; opacity:.72; }
@@ -1961,7 +1962,8 @@
      A real switch, not the Enable/Disable label-flip the provider rows use: these
      are settings someone leaves ON for weeks, and a switch reads its own state at a
      glance. Same enclosure as .sv-provider-list so the pane stays one material. */
-  .sv-quiet-section { margin:18px 12px 0; }
+  .sv-quiet-section { margin:24px 12px 0; }
+  .sv-quiet-title { margin-bottom:10px; }
   .sv-quiet-list { overflow:hidden; border-radius:var(--r-3); background:var(--raised); box-shadow:inset 0 0 0 1px var(--edge); }
   .sv-quiet-row { display:flex; align-items:flex-start; gap:12px; padding:12px; }
   .sv-quiet-row + .sv-quiet-row { border-top:1px solid var(--edge); }
@@ -7328,8 +7330,8 @@
       membershipAction = `<div class="gd-membership"><div class="gd-status">This group is archived. Its messages stay readable, but nobody can post in it.</div></div>`;
     } else if (!mine) {
       membershipAction = groupLeaveArmedId === g.id
-        ? `<div class="gd-membership"><div class="gd-confirm"><strong>Leave ${esc(g.name)}?</strong><p>You’ll stop receiving new messages. Your existing messages will remain in Relays.</p><div class="gd-confirm-actions"><button class="cancel" type="button" data-gd-leave-cancel>Cancel</button><button class="confirm" type="button" data-gd-leave-confirm>Leave group</button></div></div></div>`
-        : `<div class="gd-membership"><button class="gd-leave" type="button" data-gd-leave><span aria-hidden="true">↪</span><span class="gd-leave-copy"><strong>Leave group</strong><span>Stop receiving new messages from this group</span></span><span aria-hidden="true">›</span></button></div>`;
+        ? `<div class="gd-membership gd-membership-confirm"><div class="gd-confirm"><strong>Leave ${esc(g.name)}?</strong><p>You’ll stop receiving new messages. Your existing messages will remain in Relays.</p><div class="gd-confirm-actions"><button class="cancel" type="button" data-gd-leave-cancel>Cancel</button><button class="confirm" type="button" data-gd-leave-confirm>Leave group</button></div></div></div>`
+        : `<div class="gd-membership"><button class="gd-leave" type="button" data-gd-leave>Leave group</button></div>`;
     }
     return `<div class="group-detail${sheet ? " in-sheet" : ""}" data-group-detail="${esc(g.id)}">
       ${sheet ? "" : `<button class="gd-back" type="button" data-gd-back>‹ Groups</button>`}
@@ -8894,6 +8896,8 @@
         const id = String(b.getAttribute("data-reply-to") || "");
         if (!id) return;
         threadReplyTargets.set(threadStateKey, id);
+        const liveBox = document.getElementById("thQrInput");
+        if (liveBox === document.activeElement) liveBox.blur();
         renderThreadDetail();
         requestAnimationFrame(() => {
           const box = document.getElementById("thQrInput");
@@ -8905,6 +8909,8 @@
       b.addEventListener("click", (e) => {
         e.stopPropagation();
         threadReplyTargets.delete(threadStateKey);
+        const liveBox = document.getElementById("thQrInput");
+        if (liveBox === document.activeElement) liveBox.blur();
         renderThreadDetail();
         requestAnimationFrame(() => document.getElementById("thQrInput")?.focus());
       });
@@ -9246,7 +9252,7 @@
     const surface = info.reopenSurface || "the Relay icon";
     return `
       <div class="sv-quiet-section" id="quietPrefs" data-stop="1">
-        <div class="td-label">Notifications</div>
+        <div class="sv-quiet-title">Notifications</div>
         <div class="sv-quiet-list">
           <div class="sv-quiet-row">
             <span class="sv-quiet-copy">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-companion",
-  "version": "0.1.261",
+  "version": "0.1.263",
   "description": "Companion CLI for Relay (sendrelays.com): pairs this machine with your Relay account so coding agents like Claude Code and Codex can send and receive Relay messages.",
   "homepage": "https://sendrelays.com",
   "repository": {