From aebd1716db4e0c57fc00f42cca9f2c53a5850948 Mon Sep 17 00:00:00 2001
From: Pablo Abella <pablo.abella@tinybird.co>
Date: Tue, 13 Oct 2026 13:16:59 +0200
Subject: [PATCH] Make the Connect step 2 its own view and polish the console

After the Vercel Connect round trip, /sign-in now shows a focused
"Choose your database" view: no method tabs, no preview or how-it-works
sections, a connected row with Disconnect, and searchable selects ported
from jev-pr-quality. ?method=key is ignored while connected.

Console: gray card icons nudged onto the title's optical center, the
collector and database on their own line in the consent row, a visible
hover on outline buttons, and room for the cards' ring in the scrolling
column.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 app/sign-in/page.tsx                    | 206 +++++++++++++-----------
 components/console/console-app.tsx      |  20 +--
 components/date/button.tsx              |   2 +-
 components/sign-in/search-select.tsx    |  74 +++++++++
 components/sign-in/workspace-picker.tsx |  51 +++---
 5 files changed, 217 insertions(+), 136 deletions(-)
 create mode 100644 components/sign-in/search-select.tsx

diff --git a/app/sign-in/page.tsx b/app/sign-in/page.tsx
index 194da19..064136b 100644
--- a/app/sign-in/page.tsx
+++ b/app/sign-in/page.tsx
@@ -1,9 +1,10 @@
 // Sign-in mode only (no RAWTREE_QUERY_KEY / RAWTREE_INGEST_KEY). Layout follows
 // jev-pr-quality's sign-in page: connect with a RawTree account through Vercel Connect (when
 // RAWTREE_CONNECTOR is set) or with an API key, then a preview and how it works. `?method=key`
-// picks the API key tab without client JavaScript. Env mode redirects to the dashboard.
+// picks the API key tab without client JavaScript. Once connected, the page becomes step 2 of the
+// Connect flow: only the workspace picker and Disconnect. Env mode redirects to the dashboard.
 
-import { IconChartBar, IconChevronRight, IconCode, IconDatabase, IconExternalLink, IconSend, IconShieldCheck } from "@tabler/icons-react";
+import { IconChartBar, IconCheck, IconChevronRight, IconCode, IconDatabase, IconExternalLink, IconSend, IconShieldCheck } from "@tabler/icons-react";
 import Image from "next/image";
 import Link from "next/link";
 import { cookies } from "next/headers";
@@ -108,8 +109,9 @@ export default async function SignInPage({ searchParams }: { searchParams: Promi
   const connector = connectorInSignInMode();
   const session = (await cookies()).get(SESSION_COOKIE)?.value;
   const picker = await loadPicker(connector, session);
-  const useKey = !connector || method === "key";
   const connected = Boolean(picker.workspaces);
+  // Once connected, the API key form is out of reach until the visitor disconnects.
+  const useKey = !connected && (!connector || method === "key");
 
   return (
     <div className="flex min-h-dvh flex-col bg-background-extra">
@@ -134,17 +136,32 @@ export default async function SignInPage({ searchParams }: { searchParams: Promi
         <BrandLines />
         <div className="relative z-10 flex w-full max-w-[500px] flex-col gap-4">
           <div className="grid gap-2 px-6 pb-2">
-            <h1 className="m-0 text-2xl font-semibold tracking-tight">Web analytics on RawTree</h1>
+            <h1 className="m-0 text-2xl font-semibold tracking-tight">{connected ? "Choose your database" : "Web analytics on RawTree"}</h1>
             <p className="m-0 text-sm text-muted-foreground">
-              Send your own events and session recordings with one SDK, keep every row in your RawTree database, and see traffic, acquisition,
-              engagement, and bots without counting retries twice.
+              {connected
+                ? "Pick the RawTree organization, cluster, and database where your events are stored."
+                : "Send your own events and session recordings with one SDK, keep every row in your RawTree database, and see traffic, acquisition, engagement, and bots without counting retries twice."}
             </p>
           </div>
 
           <section className={cn(panel, "grid gap-5")}>
             <div className="grid gap-3">
-              <h2 className="m-0 text-lg font-semibold">Connect to RawTree</h2>
-              {connector ? (
+              {connected ? (
+                <div className="flex items-center justify-between gap-3">
+                  <p className="m-0 flex items-center gap-2 text-sm font-semibold">
+                    <span className="flex size-5 items-center justify-center rounded-full bg-success/15 text-success">
+                      <IconCheck aria-hidden className="size-3.5" />
+                    </span>
+                    Connected to RawTree
+                  </p>
+                  <button className={cn(link, "text-sm")} form="disconnect" type="submit">
+                    Disconnect
+                  </button>
+                </div>
+              ) : (
+                <h2 className="m-0 text-lg font-semibold">Connect to RawTree</h2>
+              )}
+              {connector && !connected ? (
                 <nav aria-label="Connection method" className="grid grid-cols-2 gap-1 rounded-full bg-muted p-1">
                   {[
                     { label: "RawTree account", href: "/sign-in", active: !useKey },
@@ -162,23 +179,18 @@ export default async function SignInPage({ searchParams }: { searchParams: Promi
                   ))}
                 </nav>
               ) : null}
-              <p className="m-0 text-sm">
-                {useKey ? (
-                  <>
-                    Enter an API key that can <strong>read and write</strong> your analytics database: the dashboard reads it, and the console sends test
-                    events to it.
-                  </>
-                ) : connected ? (
-                  <>
-                    Connected to RawTree. Choose where your events are stored.{" "}
-                    <button className={link} form="disconnect" type="submit">
-                      Disconnect
-                    </button>
-                  </>
-                ) : (
-                  "Sign in with your RawTree account to see your traffic, acquisition, engagement, bots, and session replays."
-                )}
-              </p>
+              {connected ? null : (
+                <p className="m-0 text-sm">
+                  {useKey ? (
+                    <>
+                      Enter an API key that can <strong>read and write</strong> your analytics database: the dashboard reads it, and the console sends
+                      test events to it.
+                    </>
+                  ) : (
+                    "Sign in with your RawTree account to see your traffic, acquisition, engagement, bots, and session replays."
+                  )}
+                </p>
+              )}
               {expired ? <p className="m-0 rounded-lg bg-muted px-3 py-2 text-sm">RawTree rejected your credentials. Sign in again.</p> : null}
               {picker.error && !useKey ? <p className="m-0 text-sm text-muted-foreground">{picker.error}</p> : null}
             </div>
@@ -196,80 +208,86 @@ export default async function SignInPage({ searchParams }: { searchParams: Promi
               </div>
             )}
           </section>
-          {/* Target of the Disconnect button, which sits inside a paragraph. */}
+          {/* Target of the Disconnect button, which sits outside the picker's form. */}
           <form action={signOut} className="hidden" id="disconnect" />
 
-          <aside className={cn(panel, "grid gap-2 text-sm")}>
-            {useKey ? (
-              <>
-                <p className="m-0 font-semibold">Your key stays on the server side of this app</p>
-                <p className="m-0 text-muted-foreground">
-                  It's kept in an HTTP-only cookie that page scripts can't read, used only to run the dashboard's own queries and the console's test
-                  events, never logged, and cleared when you sign out or close the browser. Create one with{" "}
-                  <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">rtree key create --permission read_write --database web_analytics</code>.
-                </p>
-              </>
-            ) : (
-              <>
-                <p className="m-0 font-semibold">No keys to copy or paste</p>
-                <p className="m-0 text-muted-foreground">
-                  <span className="text-foreground">Vercel Connect</span> holds your RawTree grant; this browser only keeps a session cookie. The dashboard
-                  runs its own fixed queries and never accepts SQL from the browser. Disconnect revokes access.
-                </p>
-              </>
-            )}
-          </aside>
+          {connected ? null : (
+            <aside className={cn(panel, "grid gap-2 text-sm")}>
+              {useKey ? (
+                <>
+                  <p className="m-0 font-semibold">Your key stays on the server side of this app</p>
+                  <p className="m-0 text-muted-foreground">
+                    It's kept in an HTTP-only cookie that page scripts can't read, used only to run the dashboard's own queries and the console's test
+                    events, never logged, and cleared when you sign out or close the browser. Create one with{" "}
+                    <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">rtree key create --permission read_write --database web_analytics</code>.
+                  </p>
+                </>
+              ) : (
+                <>
+                  <p className="m-0 font-semibold">No keys to copy or paste</p>
+                  <p className="m-0 text-muted-foreground">
+                    <span className="text-foreground">Vercel Connect</span> holds your RawTree grant; this browser only keeps a session cookie. The dashboard
+                    runs its own fixed queries and never accepts SQL from the browser. Disconnect revokes access.
+                  </p>
+                </>
+              )}
+            </aside>
+          )}
         </div>
 
-        <figure className={cn(panel, "relative z-10 m-0 mt-12 w-full max-w-[1120px] p-3 sm:p-6")}>
-          <figcaption className="mb-4 grid gap-1 px-2 pt-2 text-center sm:mb-6 sm:pt-0">
-            <span className="text-lg font-semibold">What you'll see</span>
-            <span className="text-sm text-muted-foreground">Traffic, acquisition, engagement, bots, and session replays. Preview uses sample data.</span>
-          </figcaption>
-          <Image
-            alt="Dashboard preview with headline numbers, the traffic trend, and the dashboard sections"
-            className="h-auto w-full rounded-xl border"
-            placeholder="blur"
-            sizes="(min-width: 1152px) 1072px, calc(100vw - 56px)"
-            src={overview}
-          />
-        </figure>
+        {connected ? null : (
+          <>
+            <figure className={cn(panel, "relative z-10 m-0 mt-12 w-full max-w-[1120px] p-3 sm:p-6")}>
+              <figcaption className="mb-4 grid gap-1 px-2 pt-2 text-center sm:mb-6 sm:pt-0">
+                <span className="text-lg font-semibold">What you'll see</span>
+                <span className="text-sm text-muted-foreground">Traffic, acquisition, engagement, bots, and session replays. Preview uses sample data.</span>
+              </figcaption>
+              <Image
+                alt="Dashboard preview with headline numbers, the traffic trend, and the dashboard sections"
+                className="h-auto w-full rounded-xl border"
+                placeholder="blur"
+                sizes="(min-width: 1152px) 1072px, calc(100vw - 56px)"
+                src={overview}
+              />
+            </figure>
 
-        <section aria-labelledby="how-it-works" className={cn(panel, "relative z-10 mt-6 w-full max-w-[1120px]")}>
-          <div className="mb-6 grid gap-1 text-center">
-            <h2 className="m-0 text-lg font-semibold" id="how-it-works">
-              How it works
-            </h2>
-            <p className="m-0 text-sm text-muted-foreground">From your app to your dashboard.</p>
-          </div>
-          <ol className="m-0 grid list-none gap-3 p-0 md:grid-cols-4">
-            {HOW_IT_WORKS.map(({ icon: Icon, title, body }, index) => (
-              <li className="grid content-start gap-3 rounded-xl border bg-muted/50 p-4" key={title}>
-                <div className="flex items-center justify-between">
-                  <span className="flex size-9 items-center justify-center rounded-full bg-primary/10 text-primary">
-                    <Icon aria-hidden className="size-4" />
-                  </span>
-                  <span className="numeric text-xs text-muted-foreground">0{index + 1}</span>
-                </div>
-                <div className="grid gap-1">
-                  <h3 className="m-0 text-sm font-semibold">{title}</h3>
-                  <p className="m-0 text-sm text-muted-foreground">{body}</p>
-                </div>
-              </li>
-            ))}
-          </ol>
-          <div className="mt-4 flex flex-col gap-3 rounded-xl border border-primary/15 bg-primary/5 px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between">
-            <p className="m-0 flex items-start gap-2">
-              <IconShieldCheck aria-hidden className="mt-0.5 size-4 shrink-0 text-primary" />
-              {useKey
-                ? "Your site sends events with an insert-only key. Your dashboard key stays in an HTTP-only cookie."
-                : "Your site sends events with an insert-only key. Viewers sign in with their own RawTree account."}
-            </p>
-            <External className={cn(link, "shrink-0")} href={`${LINKS.github}#-how-it-works`}>
-              Technical details
-            </External>
-          </div>
-        </section>
+            <section aria-labelledby="how-it-works" className={cn(panel, "relative z-10 mt-6 w-full max-w-[1120px]")}>
+              <div className="mb-6 grid gap-1 text-center">
+                <h2 className="m-0 text-lg font-semibold" id="how-it-works">
+                  How it works
+                </h2>
+                <p className="m-0 text-sm text-muted-foreground">From your app to your dashboard.</p>
+              </div>
+              <ol className="m-0 grid list-none gap-3 p-0 md:grid-cols-4">
+                {HOW_IT_WORKS.map(({ icon: Icon, title, body }, index) => (
+                  <li className="grid content-start gap-3 rounded-xl border bg-muted/50 p-4" key={title}>
+                    <div className="flex items-center justify-between">
+                      <span className="flex size-9 items-center justify-center rounded-full bg-primary/10 text-primary">
+                        <Icon aria-hidden className="size-4" />
+                      </span>
+                      <span className="numeric text-xs text-muted-foreground">0{index + 1}</span>
+                    </div>
+                    <div className="grid gap-1">
+                      <h3 className="m-0 text-sm font-semibold">{title}</h3>
+                      <p className="m-0 text-sm text-muted-foreground">{body}</p>
+                    </div>
+                  </li>
+                ))}
+              </ol>
+              <div className="mt-4 flex flex-col gap-3 rounded-xl border border-primary/15 bg-primary/5 px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between">
+                <p className="m-0 flex items-start gap-2">
+                  <IconShieldCheck aria-hidden className="mt-0.5 size-4 shrink-0 text-primary" />
+                  {useKey
+                    ? "Your site sends events with an insert-only key. Your dashboard key stays in an HTTP-only cookie."
+                    : "Your site sends events with an insert-only key. Viewers sign in with their own RawTree account."}
+                </p>
+                <External className={cn(link, "shrink-0")} href={`${LINKS.github}#-how-it-works`}>
+                  Technical details
+                </External>
+              </div>
+            </section>
+          </>
+        )}
       </main>
 
       <footer className="border-t">
diff --git a/components/console/console-app.tsx b/components/console/console-app.tsx
index 8577e6e..ce43a47 100644
--- a/components/console/console-app.tsx
+++ b/components/console/console-app.tsx
@@ -133,7 +133,8 @@ export function ConsoleApp({ database }: { database: string }) {
       <div className="flex min-h-0 flex-1 flex-col gap-4">
         <ConsentBar database={database} />
         <div className="grid min-h-0 flex-1 gap-4 @5xl:grid-cols-[400px_minmax(0,1fr)]">
-          <div className="grid min-h-0 auto-rows-max content-start gap-4 @5xl:-mr-2 @5xl:overflow-y-auto @5xl:overscroll-contain @5xl:pr-2">
+          {/* The scroll container clips what's outside its box; the padding (offset by the negative margin) keeps the cards' ring and shadow visible. */}
+          <div className="grid min-h-0 auto-rows-max content-start gap-4 @5xl:-m-2 @5xl:overflow-y-auto @5xl:overscroll-contain @5xl:p-2">
             <BrowserEventsCard />
             <ServerEventsCard />
             <TrafficCard />
@@ -189,7 +190,7 @@ function ConsentBar({ database }: { database: string }) {
   return (
     <section aria-label="Consent" className="flex shrink-0 flex-wrap items-center gap-x-8 gap-y-3 rounded-2xl bg-card px-5 py-3 text-sm shadow-soft ring-1 ring-foreground/10">
       <div className="flex items-center gap-2 font-semibold">
-        <IconShieldCheck className="size-4 text-primary" /> Consent
+        <IconShieldCheck className="size-4 -translate-y-px text-muted-foreground" /> Consent
         <span className="text-xs font-normal text-muted-foreground">Nothing is sent until analytics is allowed. Stored in localStorage.</span>
       </div>
       <label className="flex items-center gap-3">
@@ -208,7 +209,7 @@ function ConsentBar({ database }: { database: string }) {
         )}
       </label>
       <div className="flex w-full flex-wrap items-center gap-x-4 gap-y-1.5 border-t pt-2.5 text-xs text-muted-foreground">
-        <span>
+        <span className="w-full">
           Collector <Mono>{COLLECT_ENDPOINT}</Mono> · Database <Mono>{database}</Mono>
         </span>
         <IdField label="anonymous_id" value={identity?.anonymousId} testId="anonymous-id" variant="info" />
@@ -221,7 +222,8 @@ function ConsentBar({ database }: { database: string }) {
 
 const cardTitle = (icon: ReactNode, text: string) => (
   <span className="flex items-center gap-2">
-    {icon}
+    {/* Centered on the line box, the icon reads low next to Geist's capitals; nudge it up. */}
+    <span className="-translate-y-px text-muted-foreground">{icon}</span>
     {text}
   </span>
 );
@@ -247,7 +249,7 @@ function BrowserEventsCard() {
 
   return (
     <DashboardCard
-      title={cardTitle(<IconBrowser className="size-4 text-primary" />, "Browser events")}
+      title={cardTitle(<IconBrowser className="size-4" />, "Browser events")}
       description={consent.analytics ? "Recipe-shaped events with example properties." : "Turn on analytics consent to send events."}
     >
       <div className="flex flex-col gap-4">
@@ -286,7 +288,7 @@ function ServerEventsCard() {
   const { lastServerEvent } = useConsole();
   return (
     <DashboardCard
-      title={cardTitle(<IconServer className="size-4 text-primary" />, "Server events")}
+      title={cardTitle(<IconServer className="size-4" />, "Server events")}
       description="Sent by this app's server with createServerAnalytics and a stable event ID."
       info="Server events need no consent: they record outcomes your backend already knows. Resending with the same ID still counts once."
     >
@@ -314,7 +316,7 @@ function TrafficCard() {
   const { consent } = useConsole();
   return (
     <DashboardCard
-      title={cardTitle(<IconRobot className="size-4 text-primary" />, "Simulated traffic")}
+      title={cardTitle(<IconRobot className="size-4" />, "Simulated traffic")}
       info="Each click is a new visitor (own anonymous_id and session_id) sending one page_view. Your own IDs are untouched."
       description={consent.analytics ? "Crawler visits and campaign visits for the dashboard." : "Turn on analytics consent to send events."}
     >
@@ -389,7 +391,7 @@ function PlaygroundCard() {
   const panelSeen = open || recordingBytesSent > 0 ? found[SECRETS.panel] : undefined;
   return (
     <DashboardCard
-      title={cardTitle(<IconPlayerRecord className="size-4 text-primary" />, "Recording playground")}
+      title={cardTitle(<IconPlayerRecord className="size-4" />, "Recording playground")}
       info="Session recording captures the page structure and every change to it (plus clicks, scrolls, and typing), not video. Replay rebuilds the page from that data."
       description={recording === "off" ? "Turn on session recording in the consent row first." : "Change the page and check what stays private."}
       action={
@@ -608,7 +610,7 @@ function EventViewer() {
   return (
     <DashboardCard
       className="max-@5xl:max-h-[80vh]"
-      title={cardTitle(<IconCloudUpload className="size-4 text-primary" />, "Event viewer")}
+      title={cardTitle(<IconCloudUpload className="size-4" />, "Event viewer")}
       description="Newest first. Queued → Sent (collector 200) → Stored (found in RawTree). Click a row for the JSON as sent."
       action={<Badge>{entries.length} rows</Badge>}
     >
diff --git a/components/date/button.tsx b/components/date/button.tsx
index d468f43..7926609 100644
--- a/components/date/button.tsx
+++ b/components/date/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         default:
           "bg-primary font-semibold text-primary-foreground hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary-hover aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
diff --git a/components/sign-in/search-select.tsx b/components/sign-in/search-select.tsx
new file mode 100644
index 0000000..c3afd41
--- /dev/null
+++ b/components/sign-in/search-select.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+// A select whose popup has a search input to filter its fixed options, ported from
+// jev-pr-quality's components/ui/search-select.tsx.
+import { Combobox } from "@base-ui/react/combobox";
+import { IconCheck, IconSearch, IconSelector } from "@tabler/icons-react";
+
+export function SearchSelect({
+  label,
+  items,
+  value,
+  onValueChange,
+  placeholder,
+}: {
+  label: string;
+  items: string[];
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder: string;
+}) {
+  return (
+    <Combobox.Root
+      disabled={items.length === 0}
+      items={items}
+      onValueChange={(next: string | null) => {
+        if (next) onValueChange(next);
+      }}
+      value={value || null}
+    >
+      {/* base-ui 1.2 has no Combobox.Label; a wrapping label names the trigger button. */}
+      <label className="grid gap-1.5 text-sm font-medium">
+        {label}
+        <Combobox.Trigger className="flex h-10 w-full items-center justify-between gap-2 rounded-lg border bg-background px-3 text-left text-sm font-normal outline-none focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-50 data-[popup-open]:border-primary">
+          <span className="truncate">
+            <Combobox.Value placeholder={<span className="text-muted-foreground">{placeholder}</span>} />
+          </span>
+          <Combobox.Icon className="shrink-0 text-muted-foreground">
+            <IconSelector className="size-4" />
+          </Combobox.Icon>
+        </Combobox.Trigger>
+      </label>
+      <Combobox.Portal>
+        <Combobox.Positioner align="start" className="z-50 outline-none" sideOffset={4}>
+          <Combobox.Popup aria-label={label} className="w-[var(--anchor-width)] overflow-hidden rounded-lg border bg-card shadow-soft outline-none">
+            <div className="flex items-center gap-2 border-b px-3">
+              <IconSearch aria-hidden className="size-4 shrink-0 text-muted-foreground" />
+              <Combobox.Input
+                className="h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                placeholder={`Search ${label.toLowerCase()}…`}
+              />
+            </div>
+            <Combobox.Empty className="px-3 py-4 text-sm text-muted-foreground empty:hidden">No {label.toLowerCase()} found.</Combobox.Empty>
+            <Combobox.List className="max-h-64 overflow-y-auto p-1 empty:hidden">
+              {(item: string) => (
+                <Combobox.Item
+                  className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm outline-none select-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
+                  key={item}
+                  value={item}
+                >
+                  <span className="flex size-4 shrink-0 items-center justify-center">
+                    <Combobox.ItemIndicator>
+                      <IconCheck className="size-4 text-primary" />
+                    </Combobox.ItemIndicator>
+                  </span>
+                  <span className="truncate">{item}</span>
+                </Combobox.Item>
+              )}
+            </Combobox.List>
+          </Combobox.Popup>
+        </Combobox.Positioner>
+      </Combobox.Portal>
+    </Combobox.Root>
+  );
+}
diff --git a/components/sign-in/workspace-picker.tsx b/components/sign-in/workspace-picker.tsx
index ebb5e17..7947415 100644
--- a/components/sign-in/workspace-picker.tsx
+++ b/components/sign-in/workspace-picker.tsx
@@ -6,8 +6,8 @@ import { IconChevronRight } from "@tabler/icons-react";
 import { useState } from "react";
 import { pickWorkspace } from "../../app/sign-in/actions.ts";
 import type { Workspace } from "../../lib/rawtree-connect.ts";
+import { SearchSelect } from "./search-select.tsx";
 
-const select = "h-10 w-full rounded-lg border bg-background px-3 text-sm outline-none focus:border-primary";
 const DEFAULT_DATABASE = "web_analytics";
 
 export function WorkspacePicker({ workspaces, buttonClass }: { workspaces: Workspace[]; buttonClass: string }) {
@@ -37,37 +37,24 @@ export function WorkspacePicker({ workspaces, buttonClass }: { workspaces: Works
 
   return (
     <form action={pickWorkspace} className="grid gap-4">
-      <label className="grid gap-1.5 text-sm font-medium">
-        Organization
-        <select
-          className={select}
-          onChange={(event) => {
-            setOrganization(event.target.value);
-            chooseCluster(usable.find((w) => w.organization === event.target.value));
-          }}
-          value={organization}
-        >
-          {organizations.map((name) => (
-            <option key={name}>{name}</option>
-          ))}
-        </select>
-      </label>
-      <label className="grid gap-1.5 text-sm font-medium">
-        Cluster
-        <select className={select} onChange={(event) => chooseCluster(clusters.find((w) => w.cluster === event.target.value))} value={cluster}>
-          {clusters.map((w) => (
-            <option key={w.cluster}>{w.cluster}</option>
-          ))}
-        </select>
-      </label>
-      <label className="grid gap-1.5 text-sm font-medium">
-        Database
-        <select className={select} onChange={(event) => setDatabase(event.target.value)} value={database}>
-          {databases.map((name) => (
-            <option key={name}>{name}</option>
-          ))}
-        </select>
-      </label>
+      <SearchSelect
+        items={organizations}
+        label="Organization"
+        onValueChange={(name) => {
+          setOrganization(name);
+          chooseCluster(usable.find((w) => w.organization === name));
+        }}
+        placeholder="Select an organization"
+        value={organization}
+      />
+      <SearchSelect
+        items={clusters.map((w) => w.cluster)}
+        label="Cluster"
+        onValueChange={(name) => chooseCluster(clusters.find((w) => w.cluster === name))}
+        placeholder="Select a cluster"
+        value={cluster}
+      />
+      <SearchSelect items={databases} label="Database" onValueChange={setDatabase} placeholder="Select a database" value={database} />
       <input name="workspace" type="hidden" value={JSON.stringify({ organization, cluster, database })} />
       <button className={`${buttonClass} justify-self-end`} disabled={!database} type="submit">
         Load dashboard <IconChevronRight className="size-4" />