Unify workspace dropdowns; Update layouts (#458)

Unified Account and Workspace drop-downs; Layout updates, now header lives within the PageBody component; Sidebars now use floating variant

packages/features/admin/src/components/admin-delete-user-dialog.tsx

@@ -1,10 +1,7 @@
 'use client';
 
-import { useState, useTransition } from 'react';
-
-import { isRedirectError } from 'next/dist/client/components/redirect-error';
-
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useAction } from 'next-safe-action/hooks';
 import { useForm } from 'react-hook-form';
 
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -39,8 +36,7 @@ export function AdminDeleteUserDialog(
     userId: string;
   }>,
 ) {
-  const [pending, startTransition] = useTransition();
-  const [error, setError] = useState<boolean>(false);
+  const { execute, isPending, hasErrored } = useAction(deleteUserAction);
 
   const form = useForm({
     resolver: zodResolver(DeleteUserSchema),
@@ -52,7 +48,7 @@ export function AdminDeleteUserDialog(
 
   return (
     <AlertDialog>
-      <AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
+      <AlertDialogTrigger render={props.children as React.ReactElement} />
 
       <AlertDialogContent>
         <AlertDialogHeader>
@@ -69,23 +65,9 @@ export function AdminDeleteUserDialog(
           <form
             data-test={'admin-delete-user-form'}
             className={'flex flex-col space-y-8'}
-            onSubmit={form.handleSubmit((data) => {
-              startTransition(async () => {
-                try {
-                  await deleteUserAction(data);
-
-                  setError(false);
-                } catch {
-                  if (isRedirectError(error)) {
-                    // Do nothing
-                  } else {
-                    setError(true);
-                  }
-                }
-              });
-            })}
+            onSubmit={form.handleSubmit((data) => execute(data))}
           >
-            <If condition={error}>
+            <If condition={hasErrored}>
               <Alert variant={'destructive'}>
                 <AlertTitle>Error</AlertTitle>
 
@@ -127,11 +109,11 @@ export function AdminDeleteUserDialog(
               <AlertDialogCancel>Cancel</AlertDialogCancel>
 
               <Button
-                disabled={pending}
+                disabled={isPending}
                 type={'submit'}
                 variant={'destructive'}
               >
-                {pending ? 'Deleting...' : 'Delete'}
+                {isPending ? 'Deleting...' : 'Delete'}
               </Button>
             </AlertDialogFooter>
           </form>