tapimo 0.15.0 → 0.15.1

package/src/admin/apps/verified-tokens.ts

@@ -2,6 +2,7 @@ import { type Context, Hono } from 'hono'
 import * as z from 'zod/mini'
 
 import * as AssetResponse from '../../internal/AssetResponse.js'
+import * as Cursor from '../../internal/Cursor.js'
 import * as OpenApi from '../../internal/OpenApi.js'
 import * as Response from '../../internal/Response.js'
 import * as Schema from '../../internal/Schema.js'
@@ -15,6 +16,8 @@ import type * as App from '../App.js'
 
 /** Required `chainId` query: admin mutations always address a chain explicitly. */
 const ChainIdQuery = Schema.ChainId
+/** Maximum rows per review-queue response, bounding inline SVG payloads to 1.25 MiB. */
+const maxRequestPage = 5
 
 /** Zod schemas owned by the admin verified-tokens handler. */
 export namespace schema {
@@ -157,6 +160,16 @@ export namespace schema {
     /** Query parameters for the request queue. */
     export const Query = z
       .strictObject({
+        cursor: Schema.Cursor,
+        limit: z
+          .pipe(
+            Schema.Limit,
+            z.transform((value) => Math.min(value, maxRequestPage)),
+          )
+          .check(
+            z.describe(`How many requests to return (5 maximum, default ${maxRequestPage}).`),
+            z.meta({ examples: [maxRequestPage] }),
+          ),
         status: z
           ._default(z.enum(['approved', 'denied', 'pending']), 'pending')
           .check(z.describe('Review status to filter by.')),
@@ -167,8 +180,9 @@ export namespace schema {
     export const Response = Schema.describe(
       z.object({
         data: z.array(Request).check(z.describe('Requests in the selected status, oldest first.')),
+        nextCursor: Schema.NextCursor,
       }),
-      'Verified-token requests in review-queue order.',
+      'A page of verified-token requests in review-queue order.',
     )
   }
 
@@ -558,14 +572,26 @@ export function verifiedTokens() {
         }),
         async (c) => {
           const db = Db.get(c.get('db'))
-          const { status } = c.req.valid('query')
-          const records = await VerifiedTokenRequests.listByStatus(db, status)
+          const { cursor, limit, status } = c.req.valid('query')
+          const decoded = cursor ? Cursor.decode(cursor, ['timestamp', 'id']) : undefined
+          const records = await VerifiedTokenRequests.listByStatus(db, status, {
+            ...(decoded
+              ? { cursor: { createdAt: String(decoded[0]), id: String(decoded[1]) } }
+              : {}),
+            limit: limit + 1,
+          })
+          const page = Cursor.paginate({
+            key: (record) => [record.createdAt, record.id],
+            limit,
+            rows: records,
+          })
           return c.json(
             Response.validated(schema.listVerifiedTokenRequests.Response, {
-              data: records.map((record) => ({
+              data: page.rows.map((record) => ({
                 ...VerifiedTokenRequests.toRequest(record),
                 orgName: record.orgName,
               })),
+              nextCursor: page.nextCursor,
             }),
           )
         },

package/src/admin/ui/src/lib/verified-tokens.ts

@@ -76,26 +76,41 @@ export namespace create {
 
 /** Review queue over organization verification requests. */
 export namespace requests {
+  /** One page returned by the queue endpoint. */
+  export type Data = InferResponseType<(typeof client)['verified-tokens']['requests']['$get'], 200>
+
   /** A verification request record from the queue endpoint. */
-  export type VerifiedTokenRequest = InferResponseType<
-    (typeof client)['verified-tokens']['requests']['$get'],
-    200
-  >['data'][number]
+  export type VerifiedTokenRequest = Data['data'][number]
 
   export namespace list {
     export function key() {
       return ['verified-token-requests'] as const
     }
-    export async function fn() {
-      const response = await client['verified-tokens'].requests.$get({ query: {} })
+    export async function fn(options: fn.Options) {
+      const response = await client['verified-tokens'].requests.$get({
+        query: { ...options, limit: '5' },
+      })
       if (!response.ok) throw new Error('Failed to load requests.')
-      return response.json()
+      return response.json() as Promise<Data>
+    }
+    export declare namespace fn {
+      /** Review-queue page selection. */
+      type Options = {
+        /** Cursor after the previous loaded page. */
+        cursor?: string | undefined
+      }
     }
     export function options() {
-      return ReactQuery.queryOptions({ queryFn: fn, queryKey: key(), staleTime: 30_000 })
+      return ReactQuery.infiniteQueryOptions({
+        getNextPageParam: (page: Data) => page.nextCursor ?? undefined,
+        initialPageParam: null as string | null,
+        queryFn: ({ pageParam }): Promise<Data> => fn({ cursor: pageParam ?? undefined }),
+        queryKey: key(),
+        staleTime: 30_000,
+      })
     }
     export function useQuery() {
-      return ReactQuery.useQuery(options())
+      return ReactQuery.useInfiniteQuery(options())
     }
   }
 

package/src/admin/ui/src/routes/__root.tsx

@@ -111,7 +111,7 @@ function Admin() {
     <div className="relative flex min-h-dvh min-w-[360px] bg-background max-md:h-dvh max-md:flex-col max-md:overflow-hidden">
       <div className="flex-1 bg-background max-md:hidden" />
       <Sidebar email={email} logoutUrl={logoutUrl} />
-      <main className="flex w-full max-w-[1024px] flex-col px-4 pt-5 pb-10 max-md:min-h-0 max-md:flex-1 max-md:overflow-y-auto sm:px-8">
+      <main className="flex min-w-0 w-full max-w-[1024px] flex-col px-4 pt-5 pb-10 max-md:min-h-0 max-md:flex-1 max-md:overflow-y-auto sm:px-8">
         <Outlet />
       </main>
       <div className="flex-1 max-md:hidden" />

package/src/admin/ui/src/routes/organizations.tsx

@@ -6,7 +6,7 @@ import {
   useNavigate,
   useRouter,
 } from '@tanstack/react-router'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Button, Input, Rows } from 'regen-ui'
 import { ChevronRight, Search } from 'lucide-react'
 
@@ -27,20 +27,39 @@ function PageComponent() {
   const { query } = Route.useLoaderDeps()
   const navigate = useNavigate({ from: Route.fullPath })
   const [value, setValue] = useState(query ?? '')
+  const debouncedValue = useDebouncedValue(value, 300)
+  const submittedValue = useRef(query ?? '')
   const organizations = useSuspenseInfiniteQuery(Organizations.list.options({ query }))
   const records = organizations.data.pages.flatMap((page) => page.data)
   const invalid = value.trim().length > 0 && value.trim().length < 3
 
-  useEffect(() => setValue(query ?? ''), [query])
+  useEffect(() => {
+    if (value.trim() !== submittedValue.current) return
+    const next = query ?? ''
+    submittedValue.current = next
+    setValue(next)
+  }, [query, value])
+  useEffect(() => {
+    const next = debouncedValue.trim()
+    if (value.trim() !== next || (next.length > 0 && next.length < 3) || next === (query ?? ''))
+      return
+    submittedValue.current = next
+    void navigate({
+      replace: true,
+      search: Organizations.searchParameters({ query: next }),
+      to: '/organizations',
+    })
+  }, [debouncedValue, navigate, query, value])
 
   return (
     <Page title="Organizations" description="Look up organizations by id, name, or member email">
       <form
-        className="flex gap-2"
+        className="flex min-w-0 gap-2"
         onSubmit={(event) => {
           event.preventDefault()
           const next = value.trim()
           if (invalid) return
+          submittedValue.current = next
           void navigate({
             search: Organizations.searchParameters({ query: next }),
             to: '/organizations',
@@ -56,7 +75,7 @@ function PageComponent() {
             value={value}
           />
         </div>
-        <Button disabled={invalid} type="submit">
+        <Button className="shrink-0" disabled={invalid} type="submit">
           <Search className="size-4" />
           Search
         </Button>
@@ -127,6 +146,17 @@ function PageComponent() {
   )
 }
 
+function useDebouncedValue(value: string, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setDebouncedValue(value), delay)
+    return () => clearTimeout(timeout)
+  }, [delay, value])
+
+  return debouncedValue
+}
+
 function LookupError(options: LookupError.Props) {
   const router = useRouter()
   return (

package/src/admin/ui/src/routes/verified-tokens.tsx

@@ -22,7 +22,7 @@ export const Route = createFileRoute('/verified-tokens')({
   loader: ({ context }) =>
     Promise.all([
       context.queryClient.prefetchQuery(VerifiedTokens.get.options({ chainId: defaultChain })),
-      context.queryClient.prefetchQuery(VerifiedTokens.requests.list.options()),
+      context.queryClient.prefetchInfiniteQuery(VerifiedTokens.requests.list.options()),
     ]),
   component: RouteComponent,
 })
@@ -47,7 +47,10 @@ function RouteComponent() {
   const tokens = VerifiedTokens.get.useQuery({ chainId: chain })
   const requests = VerifiedTokens.requests.list.useQuery()
   const create = VerifiedTokens.create.useMutation()
-  const pendingCount = requests.data?.data.length ?? 0
+  const pending =
+    requests.data?.pages.flatMap((page: VerifiedTokens.requests.Data) => page.data) ?? []
+  const pendingCount = pending.length
+  const pendingLabel = requests.hasNextPage ? `${pendingCount}+` : String(pendingCount)
 
   return (
     <Dialog.Root onOpenChange={setOpen} open={open}>
@@ -75,7 +78,7 @@ function RouteComponent() {
           onChange={(id) => void navigate({ search: id === 'verified' ? {} : { tab: id } })}
           tabs={[
             { id: 'verified', label: 'Verified' },
-            { id: 'pending', label: pendingCount > 0 ? `Pending (${pendingCount})` : 'Pending' },
+            { id: 'pending', label: pendingCount > 0 ? `Pending (${pendingLabel})` : 'Pending' },
           ]}
         />
         {tab === 'verified' ? (
@@ -87,9 +90,13 @@ function RouteComponent() {
           />
         ) : (
           <RequestQueue
-            error={requests.error}
+            error={requests.isLoadingError ? requests.error : null}
+            hasNextPage={requests.hasNextPage}
+            loadMoreError={requests.isFetchNextPageError ? requests.error : null}
             loading={requests.isPending}
-            requests={requests.data?.data ?? []}
+            loadingMore={requests.isFetchingNextPage}
+            onLoadMore={() => requests.fetchNextPage()}
+            requests={pending}
           />
         )}
         <Dialog.Popup>
@@ -115,11 +122,7 @@ function chainLabel(chainId: number) {
 }
 
 /** Pending verification requests, oldest first, reviewed in bulk via selection. */
-function RequestQueue(props: {
-  error: Error | null
-  loading: boolean
-  requests: readonly VerifiedTokens.requests.VerifiedTokenRequest[]
-}) {
+function RequestQueue(props: RequestQueue.Props) {
   const approve = VerifiedTokens.requests.approve.useMutation()
   const deny = VerifiedTokens.requests.deny.useMutation()
   const [selected, setSelected] = useState<ReadonlySet<string>>(new Set())
@@ -197,21 +200,62 @@ function RequestQueue(props: {
       ) : props.requests.length === 0 ? (
         <Notice>No pending requests.</Notice>
       ) : (
-        <ul className="divide-y divide-border">
-          {props.requests.map((request) => (
-            <RequestRow
-              key={request.id}
-              onToggle={() => toggle(request.id)}
-              request={request}
-              selected={selected.has(request.id)}
-            />
-          ))}
-        </ul>
+        <div className="flex flex-col gap-4 pb-4">
+          <ul className="divide-y divide-border">
+            {props.requests.map((request) => (
+              <RequestRow
+                key={request.id}
+                onToggle={() => toggle(request.id)}
+                request={request}
+                selected={selected.has(request.id)}
+              />
+            ))}
+          </ul>
+          {props.loadMoreError ? (
+            <div
+              className="flex items-center justify-center gap-3 text-copy-14 text-negative"
+              role="alert"
+            >
+              <span>{props.loadMoreError.message}</span>
+              <Button loading={props.loadingMore} onClick={() => void props.onLoadMore()}>
+                Retry
+              </Button>
+            </div>
+          ) : props.hasNextPage ? (
+            <Button
+              className="self-center"
+              loading={props.loadingMore}
+              onClick={() => void props.onLoadMore()}
+            >
+              Load more
+            </Button>
+          ) : null}
+        </div>
       )}
     </Card>
   )
 }
 
+declare namespace RequestQueue {
+  /** Pending queue display state and pagination controls. */
+  type Props = {
+    /** Queue load error. */
+    error: Error | null
+    /** Whether another queue page is available. */
+    hasNextPage: boolean
+    /** Whether the first page is loading. */
+    loading: boolean
+    /** Error returned while loading another page. */
+    loadMoreError: Error | null
+    /** Whether another page is loading. */
+    loadingMore: boolean
+    /** Loads the next queue page. */
+    onLoadMore: () => Promise<unknown>
+    /** Loaded requests in review order. */
+    requests: readonly VerifiedTokens.requests.VerifiedTokenRequest[]
+  }
+}
+
 /** Confirmation label: one token by name, several by count. */
 function describeSelection(requests: readonly VerifiedTokens.requests.VerifiedTokenRequest[]) {
   const [first] = requests