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-reactivate-user-dialog.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useState, useTransition } from 'react';
+import { useState } 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';
@@ -41,7 +42,7 @@ export function AdminReactivateUserDialog(
 
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
+      <AlertDialogTrigger render={props.children as React.ReactElement} />
 
       <AlertDialogContent>
         <AlertDialogHeader>
@@ -62,8 +63,9 @@ export function AdminReactivateUserDialog(
 }
 
 function ReactivateUserForm(props: { userId: string; onSuccess: () => void }) {
-  const [pending, startTransition] = useTransition();
-  const [error, setError] = useState<boolean>(false);
+  const { execute, isPending, hasErrored } = useAction(reactivateUserAction, {
+    onSuccess: () => props.onSuccess(),
+  });
 
   const form = useForm({
     resolver: zodResolver(ReactivateUserSchema),
@@ -78,18 +80,9 @@ function ReactivateUserForm(props: { userId: string; onSuccess: () => void }) {
       <form
         data-test={'admin-reactivate-user-form'}
         className={'flex flex-col space-y-8'}
-        onSubmit={form.handleSubmit((data) => {
-          startTransition(async () => {
-            try {
-              await reactivateUserAction(data);
-              props.onSuccess();
-            } catch {
-              setError(true);
-            }
-          });
-        })}
+        onSubmit={form.handleSubmit((data) => execute(data))}
       >
-        <If condition={error}>
+        <If condition={hasErrored}>
           <Alert variant={'destructive'}>
             <AlertTitle>Error</AlertTitle>
 
@@ -127,10 +120,10 @@ function ReactivateUserForm(props: { userId: string; onSuccess: () => void }) {
         />
 
         <AlertDialogFooter>
-          <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
 
-          <Button disabled={pending} type={'submit'}>
-            {pending ? 'Reactivating...' : 'Reactivate User'}
+          <Button disabled={isPending} type={'submit'}>
+            {isPending ? 'Reactivating...' : 'Reactivate User'}
           </Button>
         </AlertDialogFooter>
       </form>