@withbuddi/buddi 0.1.0-pre.24 → 0.1.0-pre.26

package/extension/popup.html

@@ -2,34 +2,56 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=340" />
     <title>buddi</title>
     <link rel="stylesheet" href="popup.css" />
   </head>
-  <body>
+  <body data-view="address">
     <header class="head">
-      <span class="mark" aria-hidden="true">b</span>
-      <span class="head-name">buddi</span>
-      <span class="state" id="state" data-tone="idle">Not connected</span>
+      <img class="blob" src="blob.png" alt="" width="28" height="28" />
+      <span class="wordmark">buddi</span>
+      <span class="pill" id="pill" data-tone="idle" role="status">Not connected</span>
     </header>
 
-    <section class="section">
-      <label class="label" for="gateway">Your buddi</label>
-      <input class="field" id="gateway" type="url" spellcheck="false" autocomplete="off" />
-      <p class="hint" id="hint">The address of the buddi running on this machine.</p>
-      <div class="actions"><button class="button" id="connect" type="button">Connect</button></div>
+    <!-- Not connected, and Connecting: the address of the buddi to pair with. -->
+    <section class="view" id="view-address" data-view="address">
+      <div class="field-group">
+        <label class="label" for="gateway">Your buddi</label>
+        <input class="field" id="gateway" type="url" value="http://127.0.0.1:4317" placeholder="http://127.0.0.1:4317" spellcheck="false" autocomplete="off" />
+        <p class="hint" id="hint">The address of the buddi running on this machine.</p>
+      </div>
+      <p class="notice" id="notice" data-tone="critical" role="alert" hidden></p>
+      <p class="quiet" id="asking" hidden>Asking your buddi for a code…</p>
+      <div class="actions" id="address-actions">
+        <button class="btn" data-variant="accent" id="connect" type="button">Connect</button>
+      </div>
     </section>
 
-    <section class="section" id="pairing" hidden>
-      <span class="label">Pair this browser</span>
-      <div class="code-row">
-        <p class="code" id="code">000 000</p>
-        <button class="button button-quiet" id="copy" type="button">Copy</button>
+    <!-- Pairing: the six digits to type into buddi. -->
+    <section class="view" id="view-pairing" data-view="pairing" hidden>
+      <div class="code-tile">
+        <p class="code" id="code" aria-label="Pairing code"></p>
+        <button class="btn" data-size="sm" id="copy" type="button">Copy</button>
+      </div>
+      <p class="hint">Type it into buddi under Settings → Computer&nbsp;&amp;&nbsp;browser, within five minutes.</p>
+      <div class="actions actions-split">
+        <button class="link" id="not-this" type="button">Not this buddi</button>
+        <button class="btn" id="open-settings" type="button">Open buddi settings</button>
       </div>
-      <p class="hint">Type this code into buddi, under Settings, Computer &amp; browser, within five minutes.</p>
     </section>
 
-    <section class="section">
-      <div class="actions actions-left"><button class="button button-quiet" id="forget" type="button">Forget this buddi</button></div>
+    <!-- Connected: which buddi, and what it is doing here. -->
+    <section class="view" id="view-paired" data-view="paired" hidden>
+      <div class="facts">
+        <p class="fact" id="paired-to"></p>
+        <p class="quiet" id="working">Nothing open right now.</p>
+      </div>
+      <div class="actions">
+        <button class="btn" id="open-buddi" type="button">Open buddi</button>
+      </div>
+      <footer class="foot">
+        <button class="link" id="forget" type="button">Forget this buddi</button>
+      </footer>
     </section>
 
     <script src="popup.js" type="module"></script>

package/extension/popup.js

@@ -1,11 +1,65 @@
 // src/popup.ts
-var TONES = {
+var SETTINGS_HASH = "#/settings/computer";
+var PILL = {
   offline: { word: "Not connected", tone: "idle" },
-  connecting: { word: "Connecting", tone: "waiting" },
-  pairing: { word: "Waiting to be paired", tone: "waiting" },
+  connecting: { word: "Connecting\u2026", tone: "waiting" },
+  pairing: { word: "Pairing", tone: "waiting" },
   paired: { word: "Connected", tone: "good" }
 };
-var el = (id) => document.getElementById(id);
+function viewOf(model) {
+  const { connection, code } = model.state;
+  if (connection === "paired") return "paired";
+  if (connection === "pairing" && code && !model.editing) return "pairing";
+  return "address";
+}
+function dashboardUrl(gateway, hash = "") {
+  try {
+    const url = new URL(gateway);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+    return `${url.origin}/${hash}`;
+  } catch {
+    return null;
+  }
+}
+function hostOf(gateway) {
+  try {
+    return new URL(gateway).host;
+  } catch {
+    return gateway;
+  }
+}
+function groupCode(code) {
+  const digits = code.replace(/[^0-9]/g, "");
+  return digits.length === 6 ? `${digits.slice(0, 3)} ${digits.slice(3)}` : code;
+}
+function workingLine(tabs) {
+  if (!tabs) return "Nothing open right now.";
+  return tabs === 1 ? "Working in 1 tab" : `Working in ${tabs} tabs`;
+}
+var byId = (doc, id) => doc.getElementById(id);
+function render(model, doc = document) {
+  const { state } = model;
+  const view = viewOf(model);
+  const pill = byId(doc, "pill");
+  const { word, tone } = PILL[state.connection] ?? PILL.offline;
+  const failure = model.refused ?? (state.connection === "offline" ? state.error : null);
+  pill.textContent = word;
+  pill.dataset["tone"] = failure ? "bad" : tone;
+  for (const section of doc.querySelectorAll(".view")) section.hidden = section.dataset["view"] !== view;
+  doc.body.dataset["view"] = view;
+  const connecting = view === "address" && state.connection === "connecting" && !model.editing;
+  const field = byId(doc, "gateway");
+  field.disabled = connecting;
+  const notice = byId(doc, "notice");
+  notice.hidden = !failure || connecting;
+  notice.textContent = failure ?? "";
+  byId(doc, "asking").hidden = !connecting;
+  byId(doc, "address-actions").hidden = connecting;
+  byId(doc, "connect").textContent = failure ? "Try again" : "Connect";
+  byId(doc, "code").textContent = view === "pairing" ? groupCode(state.code ?? "") : "";
+  byId(doc, "paired-to").textContent = view === "paired" ? `Your buddi at ${state.installation ?? hostOf(model.gateway)}` : "";
+  byId(doc, "working").textContent = workingLine(model.tabs);
+}
 var COPIED_FOR = 2e3;
 function wireCopy(button, read) {
   let restore;
@@ -25,19 +79,14 @@ function wireCopy(button, read) {
     })();
   });
 }
-function render(state) {
-  const badge = el("state");
-  const { word, tone } = TONES[state.connection] ?? TONES.offline;
-  badge.textContent = state.installation && state.connection === "paired" ? `Connected to ${state.installation}` : word;
-  badge.dataset["tone"] = state.error && state.connection === "offline" ? "bad" : tone;
-  const pairing = el("pairing");
-  if (state.code) {
-    pairing.hidden = false;
-    el("code").textContent = state.code;
-  } else {
-    pairing.hidden = true;
+async function countBuddiTabs(api) {
+  try {
+    const groups = new Set((await api.tabGroups.query({ title: "buddi" })).map((group) => group.id));
+    if (groups.size === 0) return 0;
+    return (await api.tabs.query({})).filter((tab) => tab.groupId !== void 0 && groups.has(tab.groupId)).length;
+  } catch {
+    return null;
   }
-  el("hint").textContent = state.error && state.connection === "offline" ? state.error : "The address of the buddi running on this machine.";
 }
 async function ask(message) {
   try {
@@ -47,33 +96,80 @@ async function ask(message) {
   }
 }
 async function main() {
-  const field = el("gateway");
+  const field = byId(document, "gateway");
+  const model = {
+    state: { connection: "offline", code: null, installation: null, error: null },
+    gateway: field.value,
+    editing: false,
+    tabs: null,
+    refused: null
+  };
+  const draw = () => render(model, document);
+  const recount = async () => {
+    if (model.state.connection !== "paired") return;
+    model.tabs = await countBuddiTabs(chrome);
+    draw();
+  };
   const address = await ask({ type: "buddi-gateway" });
-  field.value = address?.gateway ?? "";
+  if (address?.gateway) {
+    model.gateway = address.gateway;
+    field.value = address.gateway;
+  }
   const current = await ask({ type: "buddi-get-state" });
-  if (current?.state) render(current.state);
-  wireCopy(el("copy"), () => el("code").textContent ?? "");
-  el("connect").addEventListener("click", async () => {
-    const answer = await ask({ type: "buddi-connect", gateway: field.value.trim() });
-    if (answer?.error) {
-      el("hint").textContent = answer.error;
-      return;
-    }
-    if (answer?.state) render(answer.state);
-  });
-  el("forget").addEventListener("click", async () => {
-    const answer = await ask({ type: "buddi-forget" });
-    if (answer?.state) render(answer.state);
-  });
-}
-if (typeof chrome !== "undefined") {
+  if (current?.state) model.state = current.state;
+  draw();
+  void recount();
   chrome.runtime.onMessage.addListener((message) => {
     const frame = message;
-    if (frame?.type === "buddi-state" && frame.state) render(frame.state);
+    if (frame?.type !== "buddi-state" || !frame.state) return;
+    model.state = frame.state;
+    draw();
+    void recount();
+  });
+  wireCopy(byId(document, "copy"), () => byId(document, "code").textContent ?? "");
+  byId(document, "connect").addEventListener("click", async () => {
+    const gateway = field.value.trim();
+    model.refused = null;
+    model.editing = false;
+    const answer = await ask({ type: "buddi-connect", gateway });
+    if (answer?.error) model.refused = answer.error;
+    else model.gateway = gateway || model.gateway;
+    if (answer?.state) model.state = answer.state;
+    draw();
+  });
+  field.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") byId(document, "connect").click();
+  });
+  byId(document, "not-this").addEventListener("click", () => {
+    model.editing = true;
+    draw();
+    field.focus();
+    field.select();
+  });
+  const open = (hash) => {
+    const url = dashboardUrl(model.gateway, hash);
+    if (url) void chrome.tabs.create({ url });
+  };
+  byId(document, "open-settings").addEventListener("click", () => open(SETTINGS_HASH));
+  byId(document, "open-buddi").addEventListener("click", () => open(""));
+  byId(document, "forget").addEventListener("click", async () => {
+    const answer = await ask({ type: "buddi-forget" });
+    if (answer?.state) {
+      model.state = answer.state;
+      model.tabs = null;
+      draw();
+    }
   });
-  void main();
 }
+if (typeof chrome !== "undefined" && chrome?.runtime?.onMessage) void main();
 export {
   COPIED_FOR,
-  wireCopy
+  SETTINGS_HASH,
+  countBuddiTabs,
+  dashboardUrl,
+  groupCode,
+  render,
+  viewOf,
+  wireCopy,
+  workingLine
 };