From 9fe9da75e03a48bdf72488ed848190896b98cdf0 Mon Sep 17 00:00:00 2001
From: Jon Staab <jstaab@protonmail.com>
Date: Fri, 12 Jun 2026 14:46:52 -0700
Subject: [PATCH] Add url routing

---
 AGENTS.md                       |  4 +-
 PROTOCOL.md                     |  2 +-
 README.md                       |  2 +-
 src/Layout.tsx                  | 41 +++-----------
 src/components/Npub.tsx         | 53 ++++++++++++++++++
 src/components/QuoraLanding.tsx | 95 +++++++++++++++++++++++++++++++++
 src/lib/pubkey.ts               | 25 +++++++++
 src/store.ts                    | 63 +++++++++++++++++-----
 8 files changed, 232 insertions(+), 53 deletions(-)
 create mode 100644 src/components/Npub.tsx
 create mode 100644 src/components/QuoraLanding.tsx
 create mode 100644 src/lib/pubkey.ts

diff --git a/AGENTS.md b/AGENTS.md
index d416847..b386247 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,8 +1,8 @@
 The user logs in via NIP-07, NIP-46, or private key. See https://gitea.coracle.social/coracle/caravel/raw/branch/master/frontend/src/views/Login.tsx for an example login component.
 
-The app has a sidebar with an "inbox", a list of existing quorums, and a "create quorum" button. The bottom shows the user's profile name/nip05 and a logout button. On mobile, an icon opens a quorum list in a drawer, and a plus button opens the quorum creation form.
+The app has a sidebar with an "inbox", a list of existing quora, and a "create quorum" button. The bottom shows the user's profile name/nip05 and a logout button. On mobile, an icon opens a quorum list in a drawer, and a plus button opens the quorum creation form.
 
-The inbox shows all events pending signature across all quorums, including events the user has not yet signed. Each event shows x/y signed. Events not yet signed by the user have options for signing and declining, each with an optional message posted to the NIP-17 quorum chat. The inbox also lists quorum invitations with options to join or decline, each with a message.
+The inbox shows all events pending signature across all quora, including events the user has not yet signed. Each event shows x/y signed. Events not yet signed by the user have options for signing and declining, each with an optional message posted to the NIP-17 quorum chat. The inbox also lists quorum invitations with options to join or decline, each with a message.
 
 Create quorum opens a modal for selecting quorum members and threshold, the quorum's outbox relays, and the quorum's kind 0 profile information.
 
diff --git a/PROTOCOL.md b/PROTOCOL.md
index 2561e35..ea7a3d2 100644
--- a/PROTOCOL.md
+++ b/PROTOCOL.md
@@ -8,7 +8,7 @@ FROST Multisig Quorum Protocol
 
 ## Abstract
 
-This NIP defines a protocol for creating and operating FROST threshold signature quorums over Nostr keys. A quorum is a group of n participants who collectively control a shared Nostr keypair via a (t,n) threshold signing scheme, where any t members can produce a valid signature but no fewer. The quorum's private key is never known to any single party.
+This NIP defines a protocol for creating and operating FROST threshold signature quora over Nostr keys. A quorum is a group of n participants who collectively control a shared Nostr keypair via a (t,n) threshold signing scheme, where any t members can produce a valid signature but no fewer. The quorum's private key is never known to any single party.
 
 ## Participant Indexing
 
diff --git a/README.md b/README.md
index cb8bfe3..cc8ce83 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # nq
 
-This is a web application which allows for creating, rotating, and signing under multisig quorums for nostr keys.
+This is a web application which allows for creating, rotating, and signing under multisig quora for nostr keys.
 
 # Protocol
 
diff --git a/src/Layout.tsx b/src/Layout.tsx
index d713d17..d49c00e 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -7,6 +7,7 @@ import AccountPage from "./components/AccountPage"
 import { ProposeQuorum } from "./components/forms/DkgForms"
 import { ProposeResharing } from "./components/forms/ResharingForms"
 import { ProposeSign } from "./components/forms/SigningForms"
+import QuoraLanding from "./components/QuoraLanding"
 import Avatar from "./components/Avatar"
 import Modal from "./components/Modal"
 import { displayProfile } from "@welshman/util"
@@ -62,7 +63,7 @@ export default function Layout() {
       {/* Desktop sidebar */}
       <aside class="hidden md:flex flex-col w-64 shrink-0 border-r border-gray-200 dark:border-neutral-700 bg-white dark:bg-neutral-800">
         <div class="px-4 py-4 border-b border-gray-200 dark:border-neutral-700">
-          <span class="text-base font-bold text-gray-900 dark:text-white">NQ</span>
+          <button class="text-base font-bold text-gray-900 dark:text-white hover:opacity-70 transition-opacity" onClick={() => setView("home")}>NQ</button>
         </div>
         <SidebarContent onNew={() => setShowProposeQuorum(true)} onNavigate={() => setDrawerOpen(false)} />
       </aside>
@@ -78,7 +79,7 @@ export default function Layout() {
       {/* Mobile drawer — always mounted, slides in/out via transform */}
       <aside class={`fixed inset-y-0 left-0 z-50 w-64 flex flex-col bg-white dark:bg-neutral-800 shadow-xl md:hidden transition-transform duration-300 ease-in-out ${drawerOpen() ? "translate-x-0" : "-translate-x-full"}`}>
         <div class="px-4 py-4 border-b border-gray-200 dark:border-neutral-700 flex items-center justify-between">
-          <span class="text-base font-bold text-gray-900 dark:text-white">NQ</span>
+          <button class="text-base font-bold text-gray-900 dark:text-white hover:opacity-70 transition-opacity" onClick={() => { setView("home"); setDrawerOpen(false) }}>NQ</button>
           <button
             class="p-1 rounded-md text-gray-400 hover:text-gray-600"
             onClick={() => setDrawerOpen(false)}
@@ -96,22 +97,7 @@ export default function Layout() {
         {/* Col 2: main content */}
         <div class="flex-1 min-w-0 overflow-y-auto">
           <Show when={view() === "home"}>
-            <div class="flex items-center justify-center min-h-full p-6">
-              <div class="flex flex-col items-center text-center gap-4 max-w-sm">
-                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Welcome to NQ</h1>
-                <p class="text-sm text-gray-500 dark:text-neutral-400">
-                  FROST threshold multisig for Nostr keys. Create a quorum to share control of a
-                  key with a group, where any threshold of members can sign.
-                </p>
-                <button
-                  type="button"
-                  class="px-5 py-2.5 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors"
-                  onClick={() => setShowProposeQuorum(true)}
-                >
-                  Create your first quorum
-                </button>
-              </div>
-            </div>
+            <QuoraLanding onNew={() => setShowProposeQuorum(true)} />
           </Show>
           <Show when={view() === "account"}>
             <AccountPage />
@@ -148,27 +134,12 @@ export default function Layout() {
               <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
             </svg>
           </button>
-          <span class="text-base font-semibold text-gray-900 dark:text-white">NQ</span>
+          <button class="text-base font-semibold text-gray-900 dark:text-white hover:opacity-70 transition-opacity" onClick={() => setView("home")}>NQ</button>
         </header>
 
         <main class="flex-1 overflow-y-auto">
           <Show when={view() === "home"}>
-            <div class="flex items-center justify-center min-h-full p-6">
-              <div class="flex flex-col items-center text-center gap-4 max-w-sm">
-                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Welcome to NQ</h1>
-                <p class="text-sm text-gray-500 dark:text-neutral-400">
-                  FROST threshold multisig for Nostr keys. Create a quorum to share control of a
-                  key with a group, where any threshold of members can sign.
-                </p>
-                <button
-                  type="button"
-                  class="px-5 py-2.5 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors"
-                  onClick={() => setShowProposeQuorum(true)}
-                >
-                  Create your first quorum
-                </button>
-              </div>
-            </div>
+            <QuoraLanding onNew={() => setShowProposeQuorum(true)} />
           </Show>
           <Show when={view() === "account"}>
             <AccountPage />
diff --git a/src/components/Npub.tsx b/src/components/Npub.tsx
new file mode 100644
index 0000000..2219960
--- /dev/null
+++ b/src/components/Npub.tsx
@@ -0,0 +1,53 @@
+import { createSignal, Show } from "solid-js"
+import toast from "solid-toast"
+import { fullNpub, shortNpub } from "../lib/pubkey"
+
+/**
+ * Renders a pubkey as a truncated npub with a copy button. Clicking copies the FULL npub to
+ * the clipboard and shows a success toast. Use this anywhere a raw pubkey would otherwise be
+ * shown as hex; where a profile name is the primary label, show the name and use this for the
+ * secondary key line.
+ */
+export default function Npub(props: { pubkey: string; class?: string }) {
+  const [copied, setCopied] = createSignal(false)
+
+  async function copy(e: MouseEvent) {
+    // Stop the click from triggering an enclosing button/link (cards, nav, modal backdrops).
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(fullNpub(props.pubkey))
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+      toast.success("Copied npub to clipboard")
+    } catch {
+      toast.error("Failed to copy to clipboard")
+    }
+  }
+
+  return (
+    <span class={`inline-flex items-center gap-1 min-w-0 ${props.class ?? ""}`}>
+      <span class="font-mono truncate">{shortNpub(props.pubkey)}</span>
+      <button
+        type="button"
+        title="Copy npub"
+        class="p-0.5 rounded text-gray-400 dark:text-neutral-500 hover:text-gray-600 dark:hover:text-neutral-300 transition-colors shrink-0"
+        onClick={copy}
+      >
+        <Show
+          when={copied()}
+          fallback={
+            <svg class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+              <rect x="9" y="9" width="13" height="13" rx="2" />
+              <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+            </svg>
+          }
+        >
+          <svg class="size-3.5 text-green-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+          </svg>
+        </Show>
+      </button>
+    </span>
+  )
+}
diff --git a/src/components/QuoraLanding.tsx b/src/components/QuoraLanding.tsx
new file mode 100644
index 0000000..aff4061
--- /dev/null
+++ b/src/components/QuoraLanding.tsx
@@ -0,0 +1,95 @@
+import { For, Show } from "solid-js"
+import { displayedQuora, openQuorum } from "../store"
+import { useProfileDisplay } from "../hooks"
+import { quorumHasActivity } from "../engine/notifications"
+import Npub from "./Npub"
+import type { DisplayedQuorum } from "../models"
+
+const badgeClass: Record<DisplayedQuorum["status"], string> = {
+  complete: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300",
+  sending: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300",
+  failed: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300",
+  pending: "bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300",
+}
+
+function QuorumCard(props: { quorum: DisplayedQuorum }) {
+  const name = useProfileDisplay(() => props.quorum.quorumPubkey ?? "")
+  const label = () => (props.quorum.quorumPubkey ? name() : "New quorum")
+  // A div (not a button) so the Npub copy button can live inside it without nesting buttons.
+  return (
+    <div
+      role="button"
+      tabindex={0}
+      class="flex flex-col gap-2 p-4 rounded-xl border border-gray-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 hover:border-blue-400 dark:hover:border-blue-500 hover:shadow-sm cursor-pointer transition-colors"
+      onClick={() => openQuorum(props.quorum.id)}
+      onKeyDown={e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openQuorum(props.quorum.id) } }}
+    >
+      <div class="flex items-start justify-between gap-2">
+        <span class="font-semibold text-gray-900 dark:text-white truncate flex items-center gap-1.5 min-w-0">
+          <span class="truncate">{label()}</span>
+          <Show when={quorumHasActivity(props.quorum)}>
+            <span class="size-2 rounded-full bg-blue-500 shrink-0" title="New activity" />
+          </Show>
+        </span>
+        <span class={`px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0 ${badgeClass[props.quorum.status]}`}>
+          {props.quorum.statusLabel}
+        </span>
+      </div>
+
+      <Show
+        when={props.quorum.quorumPubkey}
+        fallback={<span class="text-xs italic text-gray-400 dark:text-neutral-500">Key not generated yet</span>}
+      >
+        {pk => <Npub pubkey={pk()} class="text-xs text-gray-400 dark:text-neutral-500 max-w-full" />}
+      </Show>
+
+      <div class="text-xs text-gray-500 dark:text-neutral-400">
+        {props.quorum.threshold}-of-{props.quorum.members.length} signatures required
+      </div>
+    </div>
+  )
+}
+
+export default function QuoraLanding(props: { onNew: () => void }) {
+  return (
+    <Show
+      when={displayedQuora().length > 0}
+      fallback={
+        <div class="flex items-center justify-center min-h-full p-6">
+          <div class="flex flex-col items-center text-center gap-4 max-w-sm">
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Welcome to NQ</h1>
+            <p class="text-sm text-gray-500 dark:text-neutral-400">
+              FROST threshold multisig for Nostr keys. Create a quorum to share control of a
+              key with a group, where any threshold of members can sign.
+            </p>
+            <button
+              type="button"
+              class="px-5 py-2.5 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors"
+              onClick={props.onNew}
+            >
+              Create your first quorum
+            </button>
+          </div>
+        </div>
+      }
+    >
+      <div class="p-6 max-w-5xl mx-auto">
+        <div class="flex items-center justify-between mb-4">
+          <h1 class="text-xl font-bold text-gray-900 dark:text-white">Your Quora</h1>
+          <button
+            type="button"
+            class="px-4 py-2 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors"
+            onClick={props.onNew}
+          >
+            New quorum
+          </button>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          <For each={displayedQuora()}>
+            {(q) => <QuorumCard quorum={q} />}
+          </For>
+        </div>
+      </div>
+    </Show>
+  )
+}
diff --git a/src/lib/pubkey.ts b/src/lib/pubkey.ts
new file mode 100644
index 0000000..d8a7c20
--- /dev/null
+++ b/src/lib/pubkey.ts
@@ -0,0 +1,25 @@
+import { Pubkey, displayPubkey } from "@welshman/util"
+
+/**
+ * Full `npub1…` bech32 encoding of a hex pubkey — the value we put on the clipboard. Falls
+ * back to the raw input if it isn't a valid pubkey (so rendering can never throw).
+ */
+export function fullNpub(hex: string): string {
+  try {
+    return new Pubkey(hex).toNpub()
+  } catch {
+    return hex
+  }
+}
+
+/**
+ * Truncated npub for inline display (e.g. `npub1ab…wxyz`) — the same form welshman uses as
+ * its profile-display fallback, so npubs read consistently across named and unnamed pubkeys.
+ */
+export function shortNpub(hex: string): string {
+  try {
+    return displayPubkey(hex)
+  } catch {
+    return hex
+  }
+}
diff --git a/src/store.ts b/src/store.ts
index e256f55..d7a8708 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -28,7 +28,10 @@ import type {
   SigningSession,
 } from "./models"
 
-export type View = "home" | "account" | { type: "quorum"; id: string; tab: "log" | "members" | "chat" }
+export type QuorumTab = "log" | "members" | "chat"
+export type View = "home" | "account" | { type: "quorum"; id: string; tab: QuorumTab }
+
+const QUORUM_TABS: readonly QuorumTab[] = ["log", "members", "chat"]
 
 export function logout(): void {
   // dropSession removes the session and its cached signer entirely; the sync()
@@ -38,14 +41,53 @@ export function logout(): void {
   if (pk) { dropSession(pk) }
 }
 
-export const [view, setView] = createSignal<View>("home")
+// ── URL-backed view ────────────────────────────────────────────────────────────
+// The active view IS the URL path, so links are shareable and the browser back/forward
+// buttons work. Routes:  /  → home (Your Quora landing) · /account · /quorum/<id>/<tab>.
+// `setView` (and the openQuorum/setTab helpers built on it) pushes history; popstate syncs
+// the signal back. Kept as the same `view()/setView()` API so engine + components are unchanged.
+
+function pathToView(path: string): View {
+  const parts = path.replace(/^\/+|\/+$/g, "").split("/").filter(Boolean)
+  if (parts[0] === "account") { return "account" }
+  if (parts[0] === "quorum" && parts[1]) {
+    const tab = QUORUM_TABS.includes(parts[2] as QuorumTab) ? (parts[2] as QuorumTab) : "log"
+    return { type: "quorum", id: decodeURIComponent(parts[1]), tab }
+  }
+  return "home"
+}
+
+function viewToPath(v: View): string {
+  if (v === "account") { return "/account" }
+  if (typeof v === "object" && v.type === "quorum") { return `/quorum/${encodeURIComponent(v.id)}/${v.tab}` }
+  return "/"
+}
+
+const [view, setViewSignal] = createSignal<View>(pathToView(window.location.pathname))
+export { view }
+
+const onPopState = () => setViewSignal(pathToView(window.location.pathname))
+window.addEventListener("popstate", onPopState)
+
+/** Navigate to a view, syncing the URL. Accepts a value or an updater, like a signal setter. */
+export function setView(next: View | ((prev: View) => View), opts?: { replace?: boolean }): void {
+  const v = typeof next === "function" ? next(view()) : next
+  const path = viewToPath(v)
+  if (path !== window.location.pathname) {
+    if (opts?.replace) { window.history.replaceState(null, "", path) }
+    else { window.history.pushState(null, "", path) }
+  }
+  setViewSignal(v)
+}
 
 export function openQuorum(id: string): void {
   setView({ type: "quorum", id, tab: "log" })
 }
 
-export function setTab(tab: "log" | "members" | "chat"): void {
-  setView(v => (typeof v === "object" && v.type === "quorum") ? { ...v, tab } : v)
+// Switching tabs replaces (rather than pushes) history, so Back leaves the quorum instead of
+// cycling through every tab the user clicked.
+export function setTab(tab: QuorumTab): void {
+  setView(v => (typeof v === "object" && v.type === "quorum") ? { ...v, tab } : v, { replace: true })
 }
 
 // Completed quorum records (carry the secret share) — populated when a DKG finishes.
@@ -73,6 +115,9 @@ export function setDelivery(inviteId: string, status: "sending" | "saved" | "fai
 // they don't stack a duplicate on the surviving repository/session singletons each edit.
 const track = trackForHmr(import.meta.hot)
 
+// Drop the popstate listener (registered at module top) on hot reload.
+track(() => window.removeEventListener("popstate", onPopState))
+
 const [me, setMe] = createSignal("")
 const [inviteEvents, setInviteEvents] = createSignal<TrustedEvent[]>([])
 const [round1Events, setRound1Events] = createSignal<TrustedEvent[]>([])
@@ -282,16 +327,6 @@ export function membersAt(windows: MembershipWindow[], at: number): Set<string>
   return active
 }
 
-// Land on the first quorum instead of the empty home view — e.g. once quora hydrate on
-// load. Only fires while on "home", so it never overrides explicit navigation to a quorum
-// or the account page. When there are no quora, "home" stays (and shows the hero/CTA).
-trackEffect(track, () => {
-  const list = displayedQuora()
-  if (view() === "home" && list.length > 0) {
-    openQuorum(list[0].id)
-  }
-})
-
 // ── Inbox subscription ────────────────────────────────────────────────────────
 // One active subscription, restarted when the active pubkey or the user's
 // kind-10050 relay list changes. Subscribing to userMessagingRelayList makes it