shepherd-onboard 0.1.13 → 0.1.15

package/bin/shepherd-onboard.js

@@ -1333,18 +1333,18 @@ function renderMessagesSelectorPage(chats, token, error = "") {
       .join(" ")
       .toLowerCase();
 
+    const kindKey = chat.kind === "group" ? "group" : chat.kind === "dm" ? "dm" : "other";
+    const kindLabel = kindKey === "group" ? "Group" : kindKey === "dm" ? "Contact" : "Chat";
     return `
       <label class="chat-row" data-index="${index}" data-search="${htmlAttr(searchText)}">
         <input type="checkbox" name="chatId" value="${htmlAttr(chat.chatId)}">
         <span class="box" aria-hidden="true"></span>
-        <span class="chat-main">
-          <span class="chat-top">
-            <span class="chat-name">${html(chat.label)}</span>
-            <span class="chat-kind">${html(chat.kind === "group" ? "Group" : chat.kind === "dm" ? "Contact" : "Chat")}</span>
-          </span>
+        <span class="chat-name-block">
+          <span class="chat-name">${html(chat.label)}</span>
           ${people ? `<span class="chat-people">${html(people)}</span>` : ""}
-          ${when ? `<span class="chat-meta">${html(when)}</span>` : ""}
         </span>
+        <span class="chat-kind chat-kind--${kindKey}">${html(kindLabel)}</span>
+        <span class="chat-meta">${when ? html(when) : "—"}</span>
       </label>`;
   }).join("");
 
@@ -1356,125 +1356,134 @@ function renderMessagesSelectorPage(chats, token, error = "") {
   <title>Select Messages Chats</title>
   <style>
     :root {
-      color-scheme: light dark;
-      --bg: #FCFCFC;
-      --fg: #111111;
-      --muted: #6D726D;
-      --line: #E8ECE8;
-      --panel: #FFFFFF;
-      --button: #136033;
-      --button-text: #FFFFFF;
-      --link: #136033;
-      --radius: 10px;
-    }
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --bg: #000000;
-        --fg: #F8F8F8;
-        --muted: #A2A8A2;
-        --line: #202520;
-        --panel: #070907;
-        --button: #FFFFFF;
-        --button-text: #000000;
-        --link: #136033;
-      }
+      --bg: #fbfbfa;
+      --panel: #ffffff;
+      --fg: #141614;
+      --muted: #767d78;
+      --faint: #9aa09b;
+      --line: #dedfdd;
+      --green: #1f5c2e;
+      --green-hover: #246836;
+      --radius: 8px;
+      --grid: 20px minmax(0, 1fr) 84px 112px;
     }
     * { box-sizing: border-box; }
     body {
       margin: 0;
+      min-height: 100vh;
       background: var(--bg);
       color: var(--fg);
       font-family: Geist, "Geist Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       letter-spacing: 0;
+      -webkit-font-smoothing: antialiased;
     }
     main {
-      width: min(700px, calc(100vw - 32px));
-      margin: 36px auto;
+      width: min(720px, calc(100vw - 32px));
+      margin: 0 auto;
+      padding: 30px 0 28px;
     }
-    header {
+    .header {
       display: flex;
       justify-content: space-between;
-      gap: 16px;
       align-items: center;
-      padding-bottom: 18px;
-      border-bottom: 1px solid var(--line);
+      gap: 16px;
+      padding: 0 0 18px;
     }
     .brand {
       display: flex;
-      gap: 10px;
       align-items: center;
+      gap: 10px;
       min-width: 0;
     }
     .logo {
-      width: 30px;
-      height: 30px;
-      border-radius: 8px;
+      width: 28px;
+      height: 28px;
       object-fit: contain;
       flex: none;
     }
     .logo-fallback {
-      width: 30px;
-      height: 30px;
-      border-radius: 8px;
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
       display: grid;
       place-items: center;
       color: #FFFFFF;
-      background: #136033;
+      background: var(--green);
+      font-size: 13px;
       font-weight: 700;
       flex: none;
     }
     h1 {
       margin: 0;
-      font-size: 22px;
+      font-size: 19px;
       line-height: 1.1;
-      font-weight: 650;
+      font-weight: 700;
+      letter-spacing: 0;
     }
-    form {
-      margin-top: 18px;
+    .subtitle {
+      margin: 4px 0 0;
+      font-size: 13px;
+      line-height: 1.4;
+      color: var(--muted);
     }
-    .search {
-      width: 100%;
-      margin: 0 0 12px;
+    .panel {
+      background: var(--panel);
       border: 1px solid var(--line);
       border-radius: var(--radius);
-      background: var(--panel);
+      overflow: hidden;
+    }
+    .panel-head {
+      padding: 12px;
+      border-bottom: 1px solid var(--line);
+    }
+    .search {
+      width: 100%;
+      border: 1px solid #d7d9d6;
+      border-radius: 6px;
+      background: #ffffff;
       color: var(--fg);
-      padding: 11px 12px;
+      padding: 9px 10px;
       font: inherit;
-      font-size: 14px;
+      font-size: 13px;
       outline: none;
     }
     .search:focus {
-      border-color: #136033;
-      box-shadow: 0 0 0 3px color-mix(in srgb, #136033 16%, transparent);
-    }
-    .search::placeholder {
-      color: var(--muted);
+      border-color: var(--green);
+      outline: 2px solid color-mix(in srgb, var(--green) 22%, transparent);
+      outline-offset: 1px;
     }
+    .search::placeholder { color: var(--faint); }
     .error {
-      margin: 0 0 12px;
+      margin: 10px 12px 0;
       color: #9B1C1C;
-      font-size: 14px;
+      font-size: 13px;
     }
-    .chat-list {
+    .list-head {
       display: grid;
-      gap: 8px;
-      margin: 0 0 18px;
+      grid-template-columns: var(--grid);
+      gap: 12px;
+      align-items: center;
+      padding: 9px 12px;
+      border-bottom: 1px solid var(--line);
+      color: var(--faint);
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
     }
+    .list-head .right { text-align: left; }
+    .chat-list { display: block; }
     .chat-row {
       display: grid;
-      grid-template-columns: 24px 1fr;
+      grid-template-columns: var(--grid);
       gap: 12px;
-      align-items: start;
-      padding: 13px 14px;
-      background: var(--panel);
-      border: 1px solid var(--line);
-      border-radius: var(--radius);
+      align-items: center;
+      padding: 11px 12px;
+      border-bottom: 1px solid var(--line);
       cursor: pointer;
+      transition: background 120ms ease;
     }
-    .chat-row:hover {
-      border-color: color-mix(in srgb, var(--link) 45%, var(--line));
-    }
+    .chat-row:last-child { border-bottom: 0; }
+    .chat-row:hover { background: #f6f7f5; }
     input[type="checkbox"] {
       position: absolute;
       opacity: 0;
@@ -1483,61 +1492,63 @@ function renderMessagesSelectorPage(chats, token, error = "") {
     .box {
       width: 18px;
       height: 18px;
-      margin-top: 2px;
-      border: 1.5px solid var(--muted);
-      border-radius: 5px;
+      border: 1.5px solid #C7CDC8;
+      border-radius: 4px;
       display: inline-grid;
       place-items: center;
+      transition: background 120ms ease, border-color 120ms ease;
     }
+    .chat-row:hover .box { border-color: var(--green); }
     input[type="checkbox"]:checked + .box {
-      background: var(--button);
-      border-color: var(--button);
+      background: var(--green);
+      border-color: var(--green);
     }
     input[type="checkbox"]:checked + .box::after {
       content: "";
       width: 7px;
       height: 4px;
-      border-left: 2px solid var(--button-text);
-      border-bottom: 2px solid var(--button-text);
+      border-left: 2px solid #FFFFFF;
+      border-bottom: 2px solid #FFFFFF;
       transform: rotate(-45deg) translateY(-1px);
     }
-    .chat-main {
+    .chat-name-block {
       min-width: 0;
       display: grid;
-      gap: 4px;
-    }
-    .chat-top {
-      display: flex;
-      gap: 10px;
-      align-items: center;
-      min-width: 0;
+      gap: 2px;
     }
     .chat-name {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 15px;
-      font-weight: 600;
+      font-weight: 550;
+    }
+    .chat-people {
+      color: var(--muted);
+      font-size: 12.5px;
+      line-height: 1.3;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     .chat-kind {
-      color: var(--link);
-      font-size: 12px;
-      flex: none;
+      justify-self: start;
+      color: var(--muted);
+      font-size: 12.5px;
+      font-weight: 500;
     }
-    .chat-people,
+    .chat-kind--group { color: var(--green); }
     .chat-meta {
       color: var(--muted);
-      font-size: 13px;
-      line-height: 1.35;
+      font-size: 12.5px;
       overflow-wrap: anywhere;
     }
-    [hidden] {
-      display: none !important;
-    }
+    [hidden] { display: none !important; }
     .empty {
-      margin: 18px 0 28px;
+      margin: 0;
+      padding: 26px 12px;
       color: var(--muted);
-      font-size: 14px;
+      font-size: 13px;
       text-align: center;
     }
     .actions {
@@ -1547,44 +1558,67 @@ function renderMessagesSelectorPage(chats, token, error = "") {
       gap: 12px;
       position: sticky;
       bottom: 0;
-      padding: 14px 0 0;
-      background: linear-gradient(to top, var(--bg) 70%, transparent);
+      margin-top: 12px;
+      padding: 10px 0 0;
+      background: var(--bg);
     }
     .selection-count {
       color: var(--muted);
       font-size: 13px;
+      font-weight: 500;
     }
     button {
       appearance: none;
       border: 0;
-      border-radius: var(--radius);
-      background: var(--button);
-      color: var(--button-text);
-      padding: 10px 14px;
+      border-radius: 6px;
+      background: var(--green);
+      color: #FFFFFF;
+      padding: 9px 13px;
       font: inherit;
-      font-weight: 620;
+      font-size: 13px;
+      font-weight: 600;
       cursor: pointer;
+      transition: background 120ms ease;
+    }
+    button:hover { background: var(--green-hover); }
+    @media (max-width: 560px) {
+      :root { --grid: 18px minmax(0, 1fr) auto; }
+      .list-head span:last-child,
+      .chat-meta { display: none; }
     }
-    a { color: var(--link); }
   </style>
 </head>
 <body>
   <main>
-    <header>
+    <header class="header">
       <div class="brand">
-        ${logo ? `<img class="logo" src="${htmlAttr(logo)}" alt="">` : `<span class="logo-fallback" aria-hidden="true">G</span>`}
-        <h1>Select chats</h1>
+        ${logo ? `<img class="logo" src="${htmlAttr(logo)}" alt="">` : `<span class="logo-fallback" aria-hidden="true">S</span>`}
+        <div>
+          <h1>Select chats</h1>
+          <p class="subtitle">Choose the local Messages chats Shepherd should sync.</p>
+        </div>
       </div>
     </header>
     <form method="post" action="/select">
       <input type="hidden" name="token" value="${htmlAttr(token)}">
-      <input class="search" id="search" type="search" placeholder="Search contacts or groups" autocomplete="off">
-      ${error ? `<p class="error">${html(error)}</p>` : ""}
-      <div class="chat-list">${rows}</div>
-      <p class="empty" id="empty" hidden>No chats found.</p>
+      <div class="panel">
+        <div class="panel-head">
+          <input class="search" id="search" type="search" placeholder="Search contacts or groups" autocomplete="off">
+        </div>
+        ${error ? `<p class="error">${html(error)}</p>` : ""}
+        <div class="list-head">
+          <span></span>
+          <span></span>
+          <span>Name</span>
+          <span>Type</span>
+          <span class="right">Last message</span>
+        </div>
+        <div class="chat-list">${rows}</div>
+        <p class="empty" id="empty" hidden>No chats found.</p>
+      </div>
       <div class="actions">
-        <span class="selection-count" id="selection-count">Select one or more</span>
-        <button type="submit">return</button>
+        <span class="selection-count" id="selection-count">0 selected</span>
+        <button type="submit">Return</button>
       </div>
     </form>
   </main>
@@ -1611,7 +1645,7 @@ function renderMessagesSelectorPage(chats, token, error = "") {
 
     function updateSelected() {
       const count = checks.filter((check) => check.checked).length;
-      selected.textContent = count ? count + " selected" : "Select one or more";
+      selected.textContent = count + " selected";
     }
 
     search.addEventListener("input", updateRows);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shepherd-onboard",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Customer-facing Shepherd raw sync onboarding CLI",
   "type": "module",
   "bin": {