From 2ac7b1832173cd27c3268eb461d04e8ced9b554e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20Pe=CC=81rard?= <hugo.perard@bearstudio.fr>
Date: Mon, 28 Apr 2025 15:26:11 +0200
Subject: [PATCH 1/7] wip

---
 app/lib/ui-state.ts | 61 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 49 insertions(+), 12 deletions(-)

diff --git a/app/lib/ui-state.ts b/app/lib/ui-state.ts
index 05f098ce3..35af79a3b 100644
--- a/app/lib/ui-state.ts
+++ b/app/lib/ui-state.ts
@@ -7,17 +7,10 @@ type AvailableStatus =
   | 'default'
   | (string & {}); // Allows extra status
 
-export const getUiState = <
+type UiState<
   Status extends AvailableStatus,
   Data extends Record<string, unknown>,
->(
-  getState: (
-    set: <S extends AvailableStatus, D extends Record<string, unknown>>(
-      status: S,
-      data?: D
-    ) => { __status: S } & D
-  ) => { __status: Status } & Data
-): {
+> = {
   with: <S extends Status>(
     status: S
   ) => {
@@ -27,20 +20,64 @@ export const getUiState = <
   state: {
     __status: Status;
   } & Data;
-} => {
+  match: <S extends Status>(
+    status: Array<S>,
+    handler: (data: Data) => React.ReactNode,
+    __matched?: boolean,
+    render?: () => React.ReactNode
+  ) => UiState<Status, Data> & { render: () => React.ReactNode };
+};
+
+export const getUiState = <
+  Status extends AvailableStatus,
+  Data extends Record<string, unknown>,
+>(
+  getState: (
+    set: <S extends AvailableStatus, D extends Record<string, unknown>>(
+      status: S,
+      data?: D
+    ) => { __status: S } & D
+  ) => { __status: Status } & Data
+): UiState<Status, Data> => {
   const state = getState((status, data = {} as ExplicitAny) => {
     return {
       __status: status,
       ...data,
     };
   });
-  return {
+
+  const isMatching = <S extends Status>(
+    status: Array<Status>
+  ): status is Array<S> => status.includes(state.__status);
+
+  const uiState: UiState<Status, Data> = {
+    state,
     with: (status) => ({
       __status: status,
     }),
     is: (status) => {
       return state.__status === status;
     },
-    state,
+    match: (status, handler, __matched = false, render = () => null) => {
+      if (!__matched && isMatching(status)) {
+        return {
+          ...uiState,
+          __matched: true,
+          render: () => handler(state),
+          match: (status, _handler) =>
+            uiState.match(status, _handler, true, () => handler(uiState.state)),
+        };
+      }
+
+      return {
+        ...uiState,
+        __matched,
+        render,
+        match: (status, handler) =>
+          uiState.match(status, handler, __matched, render),
+      };
+    },
   };
+
+  return uiState;
 };

From 5750f8782b992f9d594288f9cd85838fa6659ddd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20Pe=CC=81rard?= <hugo.perard@bearstudio.fr>
Date: Tue, 29 Apr 2025 16:03:23 +0200
Subject: [PATCH 2/7] working ?

---
 app/lib/ui-state.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/lib/ui-state.ts b/app/lib/ui-state.ts
index 35af79a3b..2afb1a78f 100644
--- a/app/lib/ui-state.ts
+++ b/app/lib/ui-state.ts
@@ -22,7 +22,12 @@ type UiState<
   } & Data;
   match: <S extends Status>(
     status: Array<S>,
-    handler: (data: Data) => React.ReactNode,
+    handler: (
+      data: Omit<
+        Extract<UiState<Status, Data>['state'], { __status: S }>,
+        '__status'
+      >
+    ) => React.ReactNode,
     __matched?: boolean,
     render?: () => React.ReactNode
   ) => UiState<Status, Data> & { render: () => React.ReactNode };
@@ -63,9 +68,11 @@ export const getUiState = <
         return {
           ...uiState,
           __matched: true,
-          render: () => handler(state),
+          render: () => handler(state as ExplicitAny),
           match: (status, _handler) =>
-            uiState.match(status, _handler, true, () => handler(uiState.state)),
+            uiState.match(status, _handler, true, () =>
+              handler(uiState.state as ExplicitAny)
+            ),
         };
       }
 

From 4fde3e4e35b71889a055d12fcc665d58346fd592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20Pe=CC=81rard?= <hugo.perard@bearstudio.fr>
Date: Tue, 29 Apr 2025 16:12:44 +0200
Subject: [PATCH 3/7] allow array and string

---
 app/lib/ui-state.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/lib/ui-state.ts b/app/lib/ui-state.ts
index 2afb1a78f..84d95d276 100644
--- a/app/lib/ui-state.ts
+++ b/app/lib/ui-state.ts
@@ -21,7 +21,7 @@ type UiState<
     __status: Status;
   } & Data;
   match: <S extends Status>(
-    status: Array<S>,
+    status: S | Array<S>,
     handler: (
       data: Omit<
         Extract<UiState<Status, Data>['state'], { __status: S }>,
@@ -51,7 +51,10 @@ export const getUiState = <
     };
   });
 
-  const isMatching = <S extends Status>(
+  const isMatching = <S extends Status>(status: Status): status is S =>
+    status === state.__status;
+
+  const isMatchingArray = <S extends Status>(
     status: Array<Status>
   ): status is Array<S> => status.includes(state.__status);
 
@@ -64,7 +67,11 @@ export const getUiState = <
       return state.__status === status;
     },
     match: (status, handler, __matched = false, render = () => null) => {
-      if (!__matched && isMatching(status)) {
+      if (
+        !__matched && typeof status === 'string'
+          ? isMatching(status)
+          : isMatchingArray(status as Array<Status>)
+      ) {
         return {
           ...uiState,
           __matched: true,

From ccca921c475c44e4b718545c5e57996ef04277d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20Pe=CC=81rard?= <hugo.perard@bearstudio.fr>
Date: Tue, 29 Apr 2025 16:15:57 +0200
Subject: [PATCH 4/7] integrate ui state match in repos

---
 .../repository/app/page-repositories.tsx      | 93 +++++++++++++------
 1 file changed, 63 insertions(+), 30 deletions(-)

diff --git a/app/features/repository/app/page-repositories.tsx b/app/features/repository/app/page-repositories.tsx
index e432625a7..e95b9b8dc 100644
--- a/app/features/repository/app/page-repositories.tsx
+++ b/app/features/repository/app/page-repositories.tsx
@@ -41,36 +41,69 @@ export const PageRepositories = () => {
       <PageLayoutTopBar>
         <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 }) => (
-            <>
-              {items.map((item) => (
-                <Link
-                  key={item.id}
-                  to="/app/repositories/$id"
-                  params={{ id: item.id }}
-                >
-                  Repo: {item.name}
-                </Link>
-              ))}
-              {repositoriesQuery.hasNextPage && (
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="link"
-                  onClick={() => repositoriesQuery.fetchNextPage()}
-                  loading={repositoriesQuery.isFetchingNextPage}
-                >
-                  Load more
-                </Button>
-              )}
-            </>
-          ))
-          .exhaustive()}
+      <PageLayoutContent className="flex">
+        <div className="flex flex-1">
+          {ui
+            .match('pending', () => <>Loading...</>)
+            .match('error', () => <PageError />)
+            .match('empty', () => <>No repo</>)
+            .match('default', ({ items }) => (
+              <>
+                {items.map((item) => (
+                  <Link
+                    key={item.id}
+                    to="/app/repositories/$id"
+                    params={{ id: item.id }}
+                  >
+                    Repo: {item.name}
+                  </Link>
+                ))}
+                {repositoriesQuery.hasNextPage && (
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="link"
+                    onClick={() => repositoriesQuery.fetchNextPage()}
+                    loading={repositoriesQuery.isFetchingNextPage}
+                  >
+                    Load more
+                  </Button>
+                )}
+              </>
+            ))
+            .render()}
+        </div>
+        <div className="flex flex-1">
+          {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 }) => (
+              <>
+                {items.map((item) => (
+                  <Link
+                    key={item.id}
+                    to="/app/repositories/$id"
+                    params={{ id: item.id }}
+                  >
+                    Repo: {item.name}
+                  </Link>
+                ))}
+                {repositoriesQuery.hasNextPage && (
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="link"
+                    onClick={() => repositoriesQuery.fetchNextPage()}
+                    loading={repositoriesQuery.isFetchingNextPage}
+                  >
+                    Load more
+                  </Button>
+                )}
+              </>
+            ))
+            .exhaustive()}
+        </div>
       </PageLayoutContent>
     </PageLayout>
   );

From 29c60a377ff5e11ee5b789abf5f1246d1545dda1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20Pe=CC=81rard?= <hugo.perard@bearstudio.fr>
Date: Tue, 29 Apr 2025 18:14:29 +0200
Subject: [PATCH 5/7] exhaustive render

---
 app/lib/ui-state.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/lib/ui-state.ts b/app/lib/ui-state.ts
index 84d95d276..2ecd29929 100644
--- a/app/lib/ui-state.ts
+++ b/app/lib/ui-state.ts
@@ -30,7 +30,10 @@ type UiState<
     ) => React.ReactNode,
     __matched?: boolean,
     render?: () => React.ReactNode
-  ) => UiState<Status, Data> & { render: () => React.ReactNode };
+  ) => UiState<Exclude<Status, S>, Data> &
+    (Exclude<Status, S> extends never
+      ? { render: () => React.ReactNode }
+      : void);
 };
 
 export const getUiState = <
@@ -73,7 +76,7 @@ export const getUiState = <
           : isMatchingArray(status as Array<Status>)
       ) {
         return {
-          ...uiState,
+          ...(uiState as ExplicitAny),
           __matched: true,
           render: () => handler(state as ExplicitAny),
           match: (status, _handler) =>

From bebd59d5a268a79f6f59ccf4cd358f6aeb3edd3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20Pe=CC=81rard?= <hugo.perard@bearstudio.fr>
Date: Wed, 30 Apr 2025 09:37:03 +0200
Subject: [PATCH 6/7] use ui match instead of ts-pattern

---
 app/components/ui/select.tsx                  | 16 +---
 .../repository/app/page-repositories.tsx      | 94 ++++++-------------
 .../repository/app/page-repository.tsx        | 25 +++--
 .../repository/manager/page-repositories.tsx  | 15 ++-
 .../repository/manager/page-repository.tsx    | 25 +++--
 .../user/manager/page-user-update.tsx         | 13 +--
 app/features/user/manager/page-user.tsx       | 38 ++++----
 app/features/user/manager/page-users.tsx      | 15 ++-
 app/lib/ui-state.ts                           | 15 +--
 9 files changed, 96 insertions(+), 160 deletions(-)

diff --git a/app/components/ui/select.tsx b/app/components/ui/select.tsx
index 4d4aaffce..27889662c 100644
--- a/app/components/ui/select.tsx
+++ b/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>
diff --git a/app/features/repository/app/page-repositories.tsx b/app/features/repository/app/page-repositories.tsx
index e95b9b8dc..31fbd150b 100644
--- a/app/features/repository/app/page-repositories.tsx
+++ b/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';
@@ -41,69 +40,36 @@ export const PageRepositories = () => {
       <PageLayoutTopBar>
         <PageLayoutTopBarTitle>Repositories</PageLayoutTopBarTitle>
       </PageLayoutTopBar>
-      <PageLayoutContent className="flex">
-        <div className="flex flex-1">
-          {ui
-            .match('pending', () => <>Loading...</>)
-            .match('error', () => <PageError />)
-            .match('empty', () => <>No repo</>)
-            .match('default', ({ items }) => (
-              <>
-                {items.map((item) => (
-                  <Link
-                    key={item.id}
-                    to="/app/repositories/$id"
-                    params={{ id: item.id }}
-                  >
-                    Repo: {item.name}
-                  </Link>
-                ))}
-                {repositoriesQuery.hasNextPage && (
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant="link"
-                    onClick={() => repositoriesQuery.fetchNextPage()}
-                    loading={repositoriesQuery.isFetchingNextPage}
-                  >
-                    Load more
-                  </Button>
-                )}
-              </>
-            ))
-            .render()}
-        </div>
-        <div className="flex flex-1">
-          {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 }) => (
-              <>
-                {items.map((item) => (
-                  <Link
-                    key={item.id}
-                    to="/app/repositories/$id"
-                    params={{ id: item.id }}
-                  >
-                    Repo: {item.name}
-                  </Link>
-                ))}
-                {repositoriesQuery.hasNextPage && (
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant="link"
-                    onClick={() => repositoriesQuery.fetchNextPage()}
-                    loading={repositoriesQuery.isFetchingNextPage}
-                  >
-                    Load more
-                  </Button>
-                )}
-              </>
-            ))
-            .exhaustive()}
-        </div>
+      <PageLayoutContent>
+        {ui
+          .match('pending', () => <>Loading...</>)
+          .match('error', () => <PageError />)
+          .match('empty', () => <>No repo</>)
+          .match('default', ({ items }) => (
+            <>
+              {items.map((item) => (
+                <Link
+                  key={item.id}
+                  to="/app/repositories/$id"
+                  params={{ id: item.id }}
+                >
+                  Repo: {item.name}
+                </Link>
+              ))}
+              {repositoriesQuery.hasNextPage && (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="link"
+                  onClick={() => repositoriesQuery.fetchNextPage()}
+                  loading={repositoriesQuery.isFetchingNextPage}
+                >
+                  Load more
+                </Button>
+              )}
+            </>
+          ))
+          .render()}
       </PageLayoutContent>
     </PageLayout>
   );
diff --git a/app/features/repository/app/page-repository.tsx b/app/features/repository/app/page-repository.tsx
index fa2708817..5b7129491 100644
--- a/app/features/repository/app/page-repository.tsx
+++ b/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>
   );
diff --git a/app/features/repository/manager/page-repositories.tsx b/app/features/repository/manager/page-repositories.tsx
index 8c8d7dc89..7eecda11a 100644
--- a/app/features/repository/manager/page-repositories.tsx
+++ b/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>
diff --git a/app/features/repository/manager/page-repository.tsx b/app/features/repository/manager/page-repository.tsx
index 1540e217f..84a9e75d0 100644
--- a/app/features/repository/manager/page-repository.tsx
+++ b/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>
   );
diff --git a/app/features/user/manager/page-user-update.tsx b/app/features/user/manager/page-user-update.tsx
index f1a97288d..56f12ef48 100644
--- a/app/features/user/manager/page-user-update.tsx
+++ b/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>
diff --git a/app/features/user/manager/page-user.tsx b/app/features/user/manager/page-user.tsx
index 6f260aeaf..014ace8ec 100644
--- a/app/features/user/manager/page-user.tsx
+++ b/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 { orpc } from '@/lib/orpc/client';
@@ -140,23 +139,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>
@@ -221,7 +218,7 @@ export const PageUser = (props: { params: { id: string } }) => {
               </div>
             </div>
           ))
-          .exhaustive()}
+          .render()}
       </PageLayoutContent>
     </PageLayout>
   );
@@ -268,18 +265,17 @@ const UserSessions = (props: { userId: string }) => {
             </DataListCell>
           </WithPermissions>
         </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
@@ -331,7 +327,7 @@ const UserSessions = (props: { userId: string }) => {
               </DataListRow>
             </>
           ))
-          .exhaustive()}
+          .render()}
       </DataList>
     </WithPermissions>
   );
diff --git a/app/features/user/manager/page-users.tsx b/app/features/user/manager/page-users.tsx
index 5643fc933..845029aca 100644
--- a/app/features/user/manager/page-users.tsx
+++ b/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>
diff --git a/app/lib/ui-state.ts b/app/lib/ui-state.ts
index 2ecd29929..a933afb93 100644
--- a/app/lib/ui-state.ts
+++ b/app/lib/ui-state.ts
@@ -11,11 +11,6 @@ type UiState<
   Status extends AvailableStatus,
   Data extends Record<string, unknown>,
 > = {
-  with: <S extends Status>(
-    status: S
-  ) => {
-    __status: S;
-  };
   is: <S extends Status>(status: S) => boolean;
   state: {
     __status: Status;
@@ -30,10 +25,9 @@ type UiState<
     ) => React.ReactNode,
     __matched?: boolean,
     render?: () => React.ReactNode
-  ) => UiState<Exclude<Status, S>, Data> &
-    (Exclude<Status, S> extends never
-      ? { render: () => React.ReactNode }
-      : void);
+  ) => Exclude<Status, S> extends never
+    ? { render: () => React.ReactNode }
+    : Pick<UiState<Exclude<Status, S>, Data>, 'match'>;
 };
 
 export const getUiState = <
@@ -63,9 +57,6 @@ export const getUiState = <
 
   const uiState: UiState<Status, Data> = {
     state,
-    with: (status) => ({
-      __status: status,
-    }),
     is: (status) => {
       return state.__status === status;
     },

From 8e7a962870eefd9dc08efe04c8777d85e962d8fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20Pe=CC=81rard?= <hugo.perard@bearstudio.fr>
Date: Mon, 5 May 2025 13:20:53 +0200
Subject: [PATCH 7/7] ui state: replace render by exhaustive and add
 nonExhaustive

---
 app/components/ui/select.tsx                   |  2 +-
 .../repository/app/page-repositories.tsx       |  2 +-
 .../repository/app/page-repository.tsx         |  4 ++--
 .../repository/manager/page-repositories.tsx   |  2 +-
 .../repository/manager/page-repository.tsx     |  4 ++--
 app/features/user/manager/page-user-update.tsx |  2 +-
 app/features/user/manager/page-user.tsx        |  6 +++---
 app/features/user/manager/page-users.tsx       |  2 +-
 app/lib/ui-state.ts                            | 18 ++++++++++++------
 9 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/app/components/ui/select.tsx b/app/components/ui/select.tsx
index 27889662c..4ca33896a 100644
--- a/app/components/ui/select.tsx
+++ b/app/components/ui/select.tsx
@@ -177,7 +177,7 @@ export const Select = <Option extends OptionBase>({
                   ))}
                 </Combobox.ItemGroup>
               ))
-              .render()}
+              .exhaustive()}
           </Combobox.Content>
         </Combobox.Positioner>
       </Portal>
diff --git a/app/features/repository/app/page-repositories.tsx b/app/features/repository/app/page-repositories.tsx
index 31fbd150b..5439a1a5a 100644
--- a/app/features/repository/app/page-repositories.tsx
+++ b/app/features/repository/app/page-repositories.tsx
@@ -69,7 +69,7 @@ export const PageRepositories = () => {
               )}
             </>
           ))
-          .render()}
+          .exhaustive()}
       </PageLayoutContent>
     </PageLayout>
   );
diff --git a/app/features/repository/app/page-repository.tsx b/app/features/repository/app/page-repository.tsx
index 5b7129491..d46165d24 100644
--- a/app/features/repository/app/page-repository.tsx
+++ b/app/features/repository/app/page-repository.tsx
@@ -60,7 +60,7 @@ export const PageRepository = (props: { params: { id: string } }) => {
               <AlertCircleIcon className="size-4 text-muted-foreground" />
             ))
             .match('default', ({ repository }) => <>{repository.name}</>)
-            .render()}
+            .exhaustive()}
         </PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
@@ -69,7 +69,7 @@ export const PageRepository = (props: { params: { id: string } }) => {
           .match('not-found', () => <PageError errorCode={404} />)
           .match('error', () => <PageError />)
           .match('default', ({ repository }) => <>{repository.name}</>)
-          .render()}
+          .exhaustive()}
       </PageLayoutContent>
     </PageLayout>
   );
diff --git a/app/features/repository/manager/page-repositories.tsx b/app/features/repository/manager/page-repositories.tsx
index 7eecda11a..22866fa09 100644
--- a/app/features/repository/manager/page-repositories.tsx
+++ b/app/features/repository/manager/page-repositories.tsx
@@ -167,7 +167,7 @@ export const PageRepositories = (props: {
                 </DataListRow>
               </>
             ))
-            .render()}
+            .exhaustive()}
         </DataList>
       </PageLayoutContent>
     </PageLayout>
diff --git a/app/features/repository/manager/page-repository.tsx b/app/features/repository/manager/page-repository.tsx
index 84a9e75d0..c36459527 100644
--- a/app/features/repository/manager/page-repository.tsx
+++ b/app/features/repository/manager/page-repository.tsx
@@ -59,7 +59,7 @@ export const PageRepository = (props: { params: { id: string } }) => {
               <AlertCircleIcon className="size-4 text-muted-foreground" />
             ))
             .match('default', ({ repository }) => <>{repository.name}</>)
-            .render()}
+            .exhaustive()}
         </PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
@@ -68,7 +68,7 @@ export const PageRepository = (props: { params: { id: string } }) => {
           .match('not-found', () => <PageError errorCode={404} />)
           .match('error', () => <PageError />)
           .match('default', ({ repository }) => <>{repository.name}</>)
-          .render()}
+          .exhaustive()}
       </PageLayoutContent>
     </PageLayout>
   );
diff --git a/app/features/user/manager/page-user-update.tsx b/app/features/user/manager/page-user-update.tsx
index 56f12ef48..679206028 100644
--- a/app/features/user/manager/page-user-update.tsx
+++ b/app/features/user/manager/page-user-update.tsx
@@ -138,7 +138,7 @@ export const PageUserUpdate = (props: { params: { id: string } }) => {
                 <AlertCircleIcon className="size-4 text-muted-foreground" />
               ))
               .match('default', ({ user }) => <>{user.name || user.email}</>)
-              .render()}
+              .exhaustive()}
           </PageLayoutTopBarTitle>
         </PageLayoutTopBar>
         <PageLayoutContent>
diff --git a/app/features/user/manager/page-user.tsx b/app/features/user/manager/page-user.tsx
index 014ace8ec..baebe8541 100644
--- a/app/features/user/manager/page-user.tsx
+++ b/app/features/user/manager/page-user.tsx
@@ -145,7 +145,7 @@ export const PageUser = (props: { params: { id: string } }) => {
               <AlertCircleIcon className="size-4 text-muted-foreground" />
             ))
             .match('default', ({ user }) => <>{user.name || user.email}</>)
-            .render()}
+            .exhaustive()}
         </PageLayoutTopBarTitle>
       </PageLayoutTopBar>
       <PageLayoutContent>
@@ -218,7 +218,7 @@ export const PageUser = (props: { params: { id: string } }) => {
               </div>
             </div>
           ))
-          .render()}
+          .exhaustive()}
       </PageLayoutContent>
     </PageLayout>
   );
@@ -327,7 +327,7 @@ const UserSessions = (props: { userId: string }) => {
               </DataListRow>
             </>
           ))
-          .render()}
+          .exhaustive()}
       </DataList>
     </WithPermissions>
   );
diff --git a/app/features/user/manager/page-users.tsx b/app/features/user/manager/page-users.tsx
index 845029aca..12b3ee2a7 100644
--- a/app/features/user/manager/page-users.tsx
+++ b/app/features/user/manager/page-users.tsx
@@ -194,7 +194,7 @@ export const PageUsers = (props: { search: { searchTerm?: string } }) => {
                 </DataListRow>
               </>
             ))
-            .render()}
+            .exhaustive()}
         </DataList>
       </PageLayoutContent>
     </PageLayout>
diff --git a/app/lib/ui-state.ts b/app/lib/ui-state.ts
index a933afb93..51d738b3c 100644
--- a/app/lib/ui-state.ts
+++ b/app/lib/ui-state.ts
@@ -24,10 +24,14 @@ type UiState<
       >
     ) => React.ReactNode,
     __matched?: boolean,
-    render?: () => React.ReactNode
-  ) => Exclude<Status, S> extends never
-    ? { render: () => React.ReactNode }
-    : Pick<UiState<Exclude<Status, S>, Data>, 'match'>;
+    run?: () => React.ReactNode
+  ) => {
+    nonExhaustive: () => React.ReactNode;
+  } & (Exclude<Status, S> extends never
+    ? {
+        exhaustive: () => React.ReactNode;
+      }
+    : Pick<UiState<Exclude<Status, S>, Data>, 'match'>);
 };
 
 export const getUiState = <
@@ -69,7 +73,8 @@ export const getUiState = <
         return {
           ...(uiState as ExplicitAny),
           __matched: true,
-          render: () => handler(state as ExplicitAny),
+          exhaustive: () => handler(state as ExplicitAny),
+          nonExhaustive: () => handler(state as ExplicitAny),
           match: (status, _handler) =>
             uiState.match(status, _handler, true, () =>
               handler(uiState.state as ExplicitAny)
@@ -80,7 +85,8 @@ export const getUiState = <
       return {
         ...uiState,
         __matched,
-        render,
+        exhaustive: render,
+        nonExhaustive: render,
         match: (status, handler) =>
           uiState.match(status, handler, __matched, render),
       };