From ee9874c91952d6a01bf9e1624deb143336a8c866 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 18 Jul 2025 17:55:27 +0100
Subject: [PATCH] Copyable admin area table fields and autofocus search

---
 apps/webapp/app/routes/admin._index.tsx | 18 +++++++++++++-----
 apps/webapp/app/routes/admin.orgs.tsx   | 20 ++++++++++++++------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/apps/webapp/app/routes/admin._index.tsx b/apps/webapp/app/routes/admin._index.tsx
index 06fbfe00bf..8da48339ac 100644
--- a/apps/webapp/app/routes/admin._index.tsx
+++ b/apps/webapp/app/routes/admin._index.tsx
@@ -5,6 +5,7 @@ import { redirect } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import { Header1 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
 import { PaginationControls } from "~/components/primitives/Pagination";
@@ -69,13 +70,14 @@ export default function AdminDashboardRoute() {
         <Form className="flex items-center gap-2">
           <Input
             placeholder="Search users or orgs"
-            variant="small"
+            variant="medium"
             icon={MagnifyingGlassIcon}
             fullWidth={true}
             name="search"
             defaultValue={filters.search}
+            autoFocus
           />
-          <Button type="submit" variant="tertiary/small">
+          <Button type="submit" variant="secondary/medium">
             Search
           </Button>
         </Form>
@@ -101,7 +103,9 @@ export default function AdminDashboardRoute() {
               users.map((user) => {
                 return (
                   <TableRow key={user.id}>
-                    <TableCell>{user.email}</TableCell>
+                    <TableCell>
+                      <CopyableText value={user.email} />
+                    </TableCell>
                     <TableCell>
                       {user.orgMemberships.map((org) => (
                         <LinkButton
@@ -124,8 +128,12 @@ export default function AdminDashboardRoute() {
                         {user.displayName}
                       </a>
                     </TableCell>
-                    <TableCell>{user.id}</TableCell>
-                    <TableCell>{user.createdAt.toISOString()}</TableCell>
+                    <TableCell>
+                      <CopyableText value={user.id} />
+                    </TableCell>
+                    <TableCell>
+                      <CopyableText value={user.createdAt.toISOString()} />
+                    </TableCell>
                     <TableCell>{user.admin ? "✅" : ""}</TableCell>
                     <TableCell isSticky={true}>
                       <Form method="post" reloadDocument>
diff --git a/apps/webapp/app/routes/admin.orgs.tsx b/apps/webapp/app/routes/admin.orgs.tsx
index 7c7db7cfe9..bb59cebf31 100644
--- a/apps/webapp/app/routes/admin.orgs.tsx
+++ b/apps/webapp/app/routes/admin.orgs.tsx
@@ -4,6 +4,7 @@ import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import { Input } from "~/components/primitives/Input";
 import { PaginationControls } from "~/components/primitives/Pagination";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -54,13 +55,14 @@ export default function AdminDashboardRoute() {
         <Form className="flex items-center gap-2">
           <Input
             placeholder="Search users or orgs"
-            variant="small"
+            variant="medium"
             icon={MagnifyingGlassIcon}
             fullWidth={true}
             name="search"
             defaultValue={filters.search}
+            autoFocus
           />
-          <Button type="submit" variant="tertiary/small">
+          <Button type="submit" variant="secondary/medium">
             Search
           </Button>
         </Form>
@@ -87,8 +89,12 @@ export default function AdminDashboardRoute() {
               organizations.map((org) => {
                 return (
                   <TableRow key={org.id}>
-                    <TableCell>{org.title}</TableCell>
-                    <TableCell>{org.slug}</TableCell>
+                    <TableCell>
+                      <CopyableText value={org.title} />
+                    </TableCell>
+                    <TableCell>
+                      <CopyableText value={org.slug} />
+                    </TableCell>
                     <TableCell>
                       {org.members.map((member) => (
                         <LinkButton
@@ -96,11 +102,13 @@ export default function AdminDashboardRoute() {
                           variant="minimal/small"
                           to={`/admin?search=${encodeURIComponent(member.user.email)}`}
                         >
-                          {member.user.email}
+                          <CopyableText value={member.user.email} />
                         </LinkButton>
                       ))}
                     </TableCell>
-                    <TableCell>{org.id}</TableCell>
+                    <TableCell>
+                      <CopyableText value={org.id} />
+                    </TableCell>
                     <TableCell>{org.v2Enabled ? "✅" : ""}</TableCell>
                     <TableCell>{org.v3Enabled ? "✅" : ""}</TableCell>
                     <TableCell>{org.deletedAt ? "☠️" : ""}</TableCell>