scaffold the app: tauri crate, vite front end, icons, ci

docs/mockups/src/phone-thread.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en" data-theme="light" data-phone data-touch>
+<head>
+<meta charset="utf-8">
+<title>Margin Mail: Thread (iPhone)</title>
+<link rel="stylesheet" href="mail.css">
+</head>
+<body>
+<svg width="0" height="0" style="position:absolute">
+  <defs>
+    <symbol id="i-back" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></symbol>
+    <symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
+    <symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
+    <symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
+    <symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
+    <symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
+    <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
+  </defs>
+</svg>
+
+<div class="app">
+  <header class="phonebar">
+    <button class="icon-button" title="Back"><svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-back"/></svg></button>
+    <div class="phonebar-title">Inbox</div>
+    <button class="icon-button" title="More"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-more"/></svg></button>
+  </header>
+
+  <div class="thread">
+    <div class="thread-inner">
+      <div class="thread-head">
+        <h1 class="thread-subject">Lease renewal for the studio</h1>
+        <div class="thread-meta">
+          <span class="avatars"><span class="avatar" data-hue="6">AK</span><span class="avatar" data-hue="4">PJ</span></span>
+          <span>Arun Kulkarni and you</span>
+          <span>·</span>
+          <span>2 messages</span>
+        </div>
+      </div>
+
+      <div class="banner">
+        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>
+        <span>Blocked <b>1 tracker</b> from HubSpot. Remote images are off for this sender.</span>
+        <button class="banner-action">Show images</button>
+      </div>
+
+      <div class="msg" data-collapsed>
+        <div class="msg-head">
+          <span class="avatar" data-hue="4">PJ</span>
+          <div class="msg-who"><div class="msg-name">You</div><div class="msg-preview">Hi Arun, thanks for sending the renewal over. Two things before I sign: the notice period in clause 7 and</div></div>
+          <div class="msg-time">Mon 14:20</div>
+        </div>
+      </div>
+
+      <div class="msg">
+        <div class="msg-head">
+          <span class="avatar" data-hue="6">AK</span>
+          <div class="msg-who"><div class="msg-name">Arun Kulkarni<span class="addr">[email protected]</span></div><div class="msg-to">to you</div></div>
+          <div class="msg-time">Today 10:15</div>
+        </div>
+        <div class="msg-body">
+          <p>Hi Priyanshu,</p>
+          <p>Attached the revised draft. The only change is clause 7, which now reads three months either side rather than six. The rent review in clause 12 stays as it was, tied to the index and capped at four percent.</p>
+          <p>If that works, sign when you get a moment and I will countersign the same day. Happy to walk through anything on a call, Thursday afternoon is open.</p>
+          <p>Best,<br>Arun</p>
+          <span class="quoted">···  Show quoted text</span>
+          <div class="attachments">
+            <div class="attachment"><span class="ext">PDF</span>Studio-lease-2026-v2.pdf<span class="size">412 KB</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="phone-actions">
+    <button class="phone-action" data-primary><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-reply"/></svg>Reply</button>
+    <button class="phone-action"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later</button>
+    <button class="phone-action"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside</button>
+    <button class="phone-action"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-snooze"/></svg>Snooze</button>
+    <button class="phone-action"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-more"/></svg>More</button>
+  </div>
+</div>
+</body>
+</html>