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-account-dialog.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { useState, useTransition } from 'react';
-
 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';
@@ -37,8 +36,7 @@ export function AdminDeleteAccountDialog(
     accountId: string;
   }>,
 ) {
-  const [pending, startTransition] = useTransition();
-  const [error, setError] = useState<boolean>(false);
+  const { execute, isPending, hasErrored } = useAction(deleteAccountAction);
 
   const form = useForm({
     resolver: zodResolver(DeleteAccountSchema),
@@ -50,7 +48,7 @@ export function AdminDeleteAccountDialog(
 
   return (
     <AlertDialog>
-      <AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
+      <AlertDialogTrigger render={props.children as React.ReactElement} />
 
       <AlertDialogContent>
         <AlertDialogHeader>
@@ -65,20 +63,11 @@ export function AdminDeleteAccountDialog(
 
         <Form {...form}>
           <form
-            data-form={'admin-delete-account-form'}
+            data-test={'admin-delete-account-form'}
             className={'flex flex-col space-y-8'}
-            onSubmit={form.handleSubmit((data) => {
-              startTransition(async () => {
-                try {
-                  await deleteAccountAction(data);
-                  setError(false);
-                } catch {
-                  setError(true);
-                }
-              });
-            })}
+            onSubmit={form.handleSubmit((data) => execute(data))}
           >
-            <If condition={error}>
+            <If condition={hasErrored}>
               <Alert variant={'destructive'}>
                 <AlertTitle>Error</AlertTitle>
 
@@ -120,11 +109,11 @@ export function AdminDeleteAccountDialog(
               <AlertDialogCancel>Cancel</AlertDialogCancel>
 
               <Button
-                disabled={pending}
+                disabled={isPending}
                 type={'submit'}
                 variant={'destructive'}
               >
-                {pending ? 'Deleting...' : 'Delete'}
+                {isPending ? 'Deleting...' : 'Delete'}
               </Button>
             </AlertDialogFooter>
           </form>