FEAT: ui-state match

app/components/ui/select.tsx

@@ -7,7 +7,6 @@ import { Portal } from '@ark-ui/react/portal';
 import { ChevronDown, X } from 'lucide-react';
 import { ComponentProps, ReactNode, useMemo, useState } from 'react';
 import { isNonNullish, isNullish } from 'remeda';
-import { match } from 'ts-pattern';
 
 import { cn } from '@/lib/tailwind/utils';
 import { getUiState } from '@/lib/ui-state';
@@ -157,15 +156,10 @@ export const Select = <Option extends OptionBase>({
       <Portal>
         <Combobox.Positioner>
           <Combobox.Content className="z-10 rounded-md bg-white p-1 shadow dark:bg-neutral-900">
-            {match(ui.state)
-              .with(
-                ui.with('empty'),
-                () => <div className="p-4">No results found</div> // TODO translate
-              )
-              .with(ui.with('empty-override'), ({ renderEmpty }) =>
-                renderEmpty(search)
-              )
-              .with(ui.with('default'), () => (
+            {ui
+              .match('empty', () => <div className="p-4">No results found</div>)
+              .match('empty-override', ({ renderEmpty }) => renderEmpty(search))
+              .match('default', () => (
                 <Combobox.ItemGroup className="flex flex-col gap-0.5">
                   {collection.items.slice(0, 20).map((item) => (
                     <Combobox.Item
@@ -183,7 +177,7 @@ export const Select = <Option extends OptionBase>({
                   ))}
                 </Combobox.ItemGroup>
               ))
-              .exhaustive()}
+              .render()}
           </Combobox.Content>
         </Combobox.Positioner>
       </Portal>

app/features/repository/app/page-repositories.tsx

@@ -1,6 +1,5 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
-import { match } from 'ts-pattern';
 
 import { orpc } from '@/lib/orpc/client';
 import { getUiState } from '@/lib/ui-state';
@@ -42,11 +41,11 @@ export const PageRepositories = () => {
         <PageLayoutTopBarTitle>Repositories</PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
-        {match(ui.state)
-          .with(ui.with('pending'), () => <>Loading...</>) // TODO Design
-          .with(ui.with('error'), () => <PageError />)
-          .with(ui.with('empty'), () => <>No Repo</>) // TODO Design
-          .with(ui.with('default'), ({ items }) => (
+        {ui
+          .match('pending', () => <>Loading...</>)
+          .match('error', () => <PageError />)
+          .match('empty', () => <>No repo</>)
+          .match('default', ({ items }) => (
             <>
               {items.map((item) => (
                 <Link
@@ -70,7 +69,7 @@ export const PageRepositories = () => {
               )}
             </>
           ))
-          .exhaustive()}
+          .render()}
       </PageLayoutContent>
     </PageLayout>
   );

app/features/repository/app/page-repository.tsx

@@ -1,7 +1,6 @@
 import { ORPCError } from '@orpc/client';
 import { useQuery } from '@tanstack/react-query';
 import { AlertCircleIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
 
 import { orpc } from '@/lib/orpc/client';
 import { getUiState } from '@/lib/ui-state';
@@ -55,24 +54,22 @@ export const PageRepository = (props: { params: { id: string } }) => {
         }
       >
         <PageLayoutTopBarTitle>
-          {match(ui.state)
-            .with(ui.with('pending'), () => <Skeleton className="h-4 w-48" />)
-            .with(ui.with('not-found'), ui.with('error'), () => (
+          {ui
+            .match('pending', () => <Skeleton className="h-4 w-48" />)
+            .match(['not-found', 'error'], () => (
               <AlertCircleIcon className="size-4 text-muted-foreground" />
             ))
-            .with(ui.with('default'), ({ repository }) => (
-              <>{repository.name}</>
-            ))
-            .exhaustive()}
+            .match('default', ({ repository }) => <>{repository.name}</>)
+            .render()}
         </PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
-        {match(ui.state)
-          .with(ui.with('pending'), () => <Spinner full />)
-          .with(ui.with('not-found'), () => <PageError errorCode={404} />)
-          .with(ui.with('error'), () => <PageError />)
-          .with(ui.with('default'), ({ repository }) => <>{repository.name}</>)
-          .exhaustive()}
+        {ui
+          .match('pending', () => <Spinner full />)
+          .match('not-found', () => <PageError errorCode={404} />)
+          .match('error', () => <PageError />)
+          .match('default', ({ repository }) => <>{repository.name}</>)
+          .render()}
       </PageLayoutContent>
     </PageLayout>
   );

app/features/repository/manager/page-repositories.tsx

@@ -1,7 +1,6 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { Link, useRouter } from '@tanstack/react-router';
 import { BookMarkedIcon, PlusIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
 
 import { orpc } from '@/lib/orpc/client';
 import { getUiState } from '@/lib/ui-state';
@@ -97,16 +96,16 @@ export const PageRepositories = (props: {
       </PageLayoutTopBar>
       <PageLayoutContent className="pb-20">
         <DataList>
-          {match(ui.state)
-            .with(ui.with('pending'), () => <DataListLoadingState />)
-            .with(ui.with('error'), () => (
+          {ui
+            .match('pending', () => <DataListLoadingState />)
+            .match('error', () => (
               <DataListErrorState retry={() => repositoriesQuery.refetch()} />
             ))
-            .with(ui.with('empty'), () => <DataListEmptyState />)
-            .with(ui.with('empty-search'), ({ searchTerm }) => (
+            .match('empty', () => <DataListEmptyState />)
+            .match('empty-search', ({ searchTerm }) => (
               <DataListEmptyState searchTerm={searchTerm} />
             ))
-            .with(ui.with('default'), ({ items, searchTerm, total }) => (
+            .match('default', ({ items, searchTerm, total }) => (
               <>
                 {!!searchTerm && (
                   <DataListRowResults
@@ -168,7 +167,7 @@ export const PageRepositories = (props: {
                 </DataListRow>
               </>
             ))
-            .exhaustive()}
+            .render()}
         </DataList>
       </PageLayoutContent>
     </PageLayout>

app/features/repository/manager/page-repository.tsx

@@ -1,7 +1,6 @@
 import { ORPCError } from '@orpc/client';
 import { useQuery } from '@tanstack/react-query';
 import { AlertCircleIcon, PencilLineIcon, Trash2Icon } from 'lucide-react';
-import { match } from 'ts-pattern';
 
 import { orpc } from '@/lib/orpc/client';
 import { getUiState } from '@/lib/ui-state';
@@ -54,24 +53,22 @@ export const PageRepository = (props: { params: { id: string } }) => {
         }
       >
         <PageLayoutTopBarTitle>
-          {match(ui.state)
-            .with(ui.with('pending'), () => <Skeleton className="h-4 w-48" />)
-            .with(ui.with('not-found'), ui.with('error'), () => (
+          {ui
+            .match('pending', () => <Skeleton className="h-4 w-48" />)
+            .match(['not-found', 'error'], () => (
               <AlertCircleIcon className="size-4 text-muted-foreground" />
             ))
-            .with(ui.with('default'), ({ repository }) => (
-              <>{repository.name}</>
-            ))
-            .exhaustive()}
+            .match('default', ({ repository }) => <>{repository.name}</>)
+            .render()}
         </PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
-        {match(ui.state)
-          .with(ui.with('pending'), () => <Spinner full />)
-          .with(ui.with('not-found'), () => <PageError errorCode={404} />)
-          .with(ui.with('error'), () => <PageError />)
-          .with(ui.with('default'), ({ repository }) => <>{repository.name}</>)
-          .exhaustive()}
+        {ui
+          .match('pending', () => <Spinner full />)
+          .match('not-found', () => <PageError errorCode={404} />)
+          .match('error', () => <PageError />)
+          .match('default', ({ repository }) => <>{repository.name}</>)
+          .render()}
       </PageLayoutContent>
     </PageLayout>
   );

app/features/user/manager/page-user-update.tsx

@@ -5,7 +5,6 @@ import { useBlocker, useCanGoBack, useRouter } from '@tanstack/react-router';
 import { AlertCircleIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
-import { match } from 'ts-pattern';
 
 import { authClient } from '@/lib/auth/client';
 import { orpc } from '@/lib/orpc/client';
@@ -133,15 +132,13 @@ export const PageUserUpdate = (props: { params: { id: string } }) => {
           }
         >
           <PageLayoutTopBarTitle>
-            {match(ui.state)
-              .with(ui.with('pending'), () => <Skeleton className="h-4 w-48" />)
-              .with(ui.with('not-found'), ui.with('error'), () => (
+            {ui
+              .match('pending', () => <Skeleton className="h-4 w-48" />)
+              .match(['not-found', 'error'], () => (
                 <AlertCircleIcon className="size-4 text-muted-foreground" />
               ))
-              .with(ui.with('default'), ({ user }) => (
-                <>{user.name || user.email}</>
-              ))
-              .exhaustive()}
+              .match('default', ({ user }) => <>{user.name || user.email}</>)
+              .render()}
           </PageLayoutTopBarTitle>
         </PageLayoutTopBar>
         <PageLayoutContent>

app/features/user/manager/page-user.tsx

@@ -9,7 +9,6 @@ import { Link, useCanGoBack, useRouter } from '@tanstack/react-router';
 import dayjs from 'dayjs';
 import { AlertCircleIcon, PencilLineIcon, Trash2Icon } from 'lucide-react';
 import { toast } from 'sonner';
-import { match } from 'ts-pattern';
 
 import { authClient } from '@/lib/auth/client';
 import { Role } from '@/lib/auth/permissions';
@@ -143,23 +142,21 @@ export const PageUser = (props: { params: { id: string } }) => {
         }
       >
         <PageLayoutTopBarTitle>
-          {match(ui.state)
-            .with(ui.with('pending'), () => <Skeleton className="h-4 w-48" />)
-            .with(ui.with('not-found'), ui.with('error'), () => (
+          {ui
+            .match('pending', () => <Skeleton className="h-4 w-48" />)
+            .match(['not-found', 'error'], () => (
               <AlertCircleIcon className="size-4 text-muted-foreground" />
             ))
-            .with(ui.with('default'), ({ user }) => (
-              <>{user.name || user.email}</>
-            ))
-            .exhaustive()}
+            .match('default', ({ user }) => <>{user.name || user.email}</>)
+            .render()}
         </PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
-        {match(ui.state)
-          .with(ui.with('pending'), () => <Spinner full />)
-          .with(ui.with('not-found'), () => <PageError errorCode={404} />)
-          .with(ui.with('error'), () => <PageError />)
-          .with(ui.with('default'), ({ user }) => (
+        {ui
+          .match('pending', () => <Spinner full />)
+          .match('not-found', () => <PageError errorCode={404} />)
+          .match('error', () => <PageError />)
+          .match('default', ({ user }) => (
             <div className="flex flex-col gap-4 xl:flex-row xl:items-start">
               <Card className="relative flex-1">
                 <CardHeader>
@@ -222,7 +219,7 @@ export const PageUser = (props: { params: { id: string } }) => {
               </div>
             </div>
           ))
-          .exhaustive()}
+          .render()}
       </PageLayoutContent>
     </PageLayout>
   );
@@ -330,18 +327,17 @@ const UserSessions = (props: { userId: string }) => {
             </DataListCell>
           </WithPermission>
         </DataListRow>
-
-        {match(ui.state)
-          .with(ui.with('pending'), () => <DataListLoadingState />)
-          .with(ui.with('error'), () => (
+        {ui
+          .match('pending', () => <DataListLoadingState />)
+          .match('error', () => (
             <DataListErrorState retry={() => sessionsQuery.refetch()} />
           ))
-          .with(ui.with('empty'), () => (
+          .match('empty', () => (
             <DataListEmptyState className="min-h-20">
               No user sessions
             </DataListEmptyState>
           ))
-          .with(ui.with('default'), ({ items }) => (
+          .match('default', ({ items }) => (
             <>
               {items.map((item) => (
                 <DataListRow
@@ -405,7 +401,7 @@ const UserSessions = (props: { userId: string }) => {
               </DataListRow>
             </>
           ))
-          .exhaustive()}
+          .render()}
       </DataList>
     </WithPermission>
   );

app/features/user/manager/page-users.tsx

@@ -2,7 +2,6 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 import { Link, useRouter } from '@tanstack/react-router';
 import dayjs from 'dayjs';
 import { PlusIcon } from 'lucide-react';
-import { match } from 'ts-pattern';
 
 import { orpc } from '@/lib/orpc/client';
 import { cn } from '@/lib/tailwind/utils';
@@ -103,16 +102,16 @@ export const PageUsers = (props: { search: { searchTerm?: string } }) => {
       </PageLayoutTopBar>
       <PageLayoutContent className="pb-20">
         <DataList>
-          {match(ui.state)
-            .with(ui.with('pending'), () => <DataListLoadingState />)
-            .with(ui.with('error'), () => (
+          {ui
+            .match('pending', () => <DataListLoadingState />)
+            .match('error', () => (
               <DataListErrorState retry={() => usersQuery.refetch()} />
             ))
-            .with(ui.with('empty'), () => <DataListEmptyState />)
-            .with(ui.with('empty-search'), ({ searchTerm }) => (
+            .match('empty', () => <DataListEmptyState />)
+            .match('empty-search', ({ searchTerm }) => (
               <DataListEmptyState searchTerm={searchTerm} />
             ))
-            .with(ui.with('default'), ({ items, searchTerm, total }) => (
+            .match('default', ({ items, searchTerm, total }) => (
               <>
                 {!!searchTerm && (
                   <DataListRowResults
@@ -195,7 +194,7 @@ export const PageUsers = (props: { search: { searchTerm?: string } }) => {
                 </DataListRow>
               </>
             ))
-            .exhaustive()}
+            .render()}
         </DataList>
       </PageLayoutContent>
     </PageLayout>