Frontend refactor

2026-06-01 17:57:06 -07:00
parent 08e59e3b40
commit bd5f4b1cd0
52 changed files with 1490 additions and 1073 deletions
@@ -0,0 +1,108 @@
+import { Show } from "solid-js"
+
+type SignerTab = "qr" | "paste"
+
+// Presentational NIP-46 signer panel. No signers are created here; QR/URI are
+// generated in Login.tsx and passed down, and actions are surfaced as callbacks.
+// Props are reactive only when read lazily, so access props.* inside JSX, never
+// destructure signal-bearing props at the top.
+type LoginSignerScreenProps = {
+  signerTab: () => SignerTab
+  setSignerTab: (tab: SignerTab) => void
+  qrDataUrl: () => string
+  nostrConnectUri: () => string
+  bunkerUrl: () => string
+  setBunkerUrl: (value: string) => void
+  loading: () => boolean
+  onBack: () => void
+  onCopyUri: () => void
+  onScan: () => void
+  onConnectBunker: () => void
+}
+
+export default function LoginSignerScreen(props: LoginSignerScreenProps) {
+  return (
+    <>
+      <button
+        type="button"
+        class="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-900"
+        onClick={props.onBack}
+      >
+        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+        Back
+      </button>
+      <h2 class="mt-3 text-lg font-semibold text-gray-900">Log in with signer</h2>
+      <div class="mt-4 space-y-4">
+        <div class="flex gap-2 border border-gray-200 rounded-lg p-1">
+          <button
+            type="button"
+            class={`flex-1 rounded-md px-3 py-2 text-sm ${props.signerTab() === "qr" ? "bg-gray-900 text-white" : "text-gray-700"}`}
+            onClick={() => props.setSignerTab("qr")}
+          >
+            Use QR Code
+          </button>
+          <button
+            type="button"
+            class={`flex-1 rounded-md px-3 py-2 text-sm ${props.signerTab() === "paste" ? "bg-gray-900 text-white" : "text-gray-700"}`}
+            onClick={() => props.setSignerTab("paste")}
+          >
+            Paste Link
+          </button>
+        </div>
+
+        <Show when={props.signerTab() === "qr"}>
+          <Show when={props.qrDataUrl()} fallback={
+            <div class="flex items-center justify-center py-8 text-sm text-gray-400">
+              {props.loading() ? "Generating..." : "Loading QR code..."}
+            </div>
+          }>
+            <img src={props.qrDataUrl()} alt="Nostrconnect QR code" class="mx-auto rounded-lg" />
+          </Show>
+          <div class="flex rounded-lg border border-gray-300">
+            <input
+              type="text"
+              readOnly
+              value={props.nostrConnectUri()}
+              class="min-w-0 flex-1 rounded-l-lg border-0 px-3 py-2 text-xs text-gray-500 bg-transparent focus:outline-none"
+            />
+            <button
+              type="button"
+              class="flex items-center px-3 text-gray-400 hover:text-gray-700"
+              onClick={props.onCopyUri}
+              title="Copy link"
+            >
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+            </button>
+          </div>
+        </Show>
+
+        <Show when={props.signerTab() === "paste"}>
+          <div class="flex rounded-lg border border-gray-300">
+            <input
+              value={props.bunkerUrl()}
+              onInput={(e) => props.setBunkerUrl(e.currentTarget.value)}
+              placeholder="bunker://..."
+              class="min-w-0 flex-1 rounded-l-lg border-0 px-3 py-2 text-sm bg-transparent focus:outline-none"
+            />
+            <button
+              type="button"
+              class="flex items-center px-3 text-gray-400 hover:text-gray-700"
+              onClick={props.onScan}
+              title="Scan QR code"
+            >
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+            </button>
+          </div>
+          <button
+            type="button"
+            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium disabled:opacity-50"
+            disabled={props.loading() || !props.bunkerUrl().trim()}
+            onClick={props.onConnectBunker}
+          >
+            Connect to Signer
+          </button>
+        </Show>
+      </div>
+    </>
+  )
+}