relay: custom confirm dialog, custom recipient dropdown, inbox polish

Replaces all native confirm() calls with styled relayConfirm() promise.
Replaces native <select> recipient picker with custom dropdown control.
Adds synced badge, title-only preview, delete-all, inline delete confirm.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

relay/ui/layout.php

@@ -74,7 +74,14 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
         <h2><i class="ph ph-paper-plane-tilt"></i> compose</h2>
         <div class="field" id="compose-recipient-field">
             <label>recipient</label>
-            <select id="compose-recipient"></select>
+            <div id="compose-recipient-wrap" style="position:relative;">
+                <button id="compose-recipient-btn" type="button" class="input" style="text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;">
+                    <span id="compose-recipient-label">select…</span>
+                    <i class="ph ph-caret-down" style="font-size:10px;color:var(--dim);"></i>
+                </button>
+                <input type="hidden" id="compose-recipient" value="">
+                <div id="compose-recipient-dropdown" class="hidden" style="position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:50;max-height:200px;overflow-y:auto;padding:4px 0;"></div>
+            </div>
         </div>
         <div class="field">
             <label>title (optional)</label>
@@ -92,7 +99,10 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
         </div>
     </div>
     <div id="inbox-section" class="section">
-        <h2><i class="ph ph-tray"></i> your inbox <span class="count" id="inbox-count">0</span></h2>
+        <h2><i class="ph ph-tray"></i> your inbox <span class="count" id="inbox-count">0</span>
+            <span style="flex:1"></span>
+            <button id="inbox-delete-all" class="btn btn-danger hidden" style="padding:3px 10px;font-size:9px;" onclick="deleteAllMessages()"><i class="ph ph-trash"></i> delete all</button>
+        </h2>
         <div id="inbox-list"></div>
     </div>
 </div>
@@ -185,6 +195,17 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
 
 </main>
 
+<!-- Confirm dialog (replaces native confirm()) -->
+<div id="relay-confirm" class="hidden" style="position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;padding:24px;">
+    <div style="background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:0 16px 48px rgba(0,0,0,0.5);padding:24px;max-width:380px;width:100%;text-align:center;">
+        <p id="relay-confirm-msg" style="font-size:12px;color:var(--text);line-height:1.5;margin-bottom:18px;"></p>
+        <div style="display:flex;gap:8px;justify-content:center;">
+            <button id="relay-confirm-no" class="btn btn-secondary">Cancel</button>
+            <button id="relay-confirm-yes" class="btn btn-danger">Confirm</button>
+        </div>
+    </div>
+</div>
+
 <div id="toast-stack"></div>
 
 <script src="ui/app.js"></script>