feat(auth): enhance CreateUserSheet with improved layout and error handling

- Added useEffect to reset admin state when the sheet is closed.
- Updated SheetContent to include a close button and improved styling.
- Enhanced form structure with better accessibility and user experience.
- Integrated error display using Alert component for form submission feedback.

apps/web/src/routes/_auth.admin.index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
@@ -8,9 +8,15 @@ import {
   useReactTable,
   type ColumnDef,
 } from '@tanstack/react-table'
+import { XIcon } from 'lucide-react'
 import type { AdminUser, CreateUserRequest } from '@authportal/shared'
 import { PageShell } from '@/components/page-shell'
 import { UserAccessSheet } from '@/components/reui-kit/user-access-sheet'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
 import { Badge } from '@/components/reui/badge'
 import {
   Frame,
@@ -29,7 +35,9 @@ import { Input } from '@authportal/ui/components/input'
 import { Checkbox } from '@authportal/ui/components/checkbox'
 import {
   Sheet,
+  SheetClose,
   SheetContent,
+  SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
@@ -43,6 +51,9 @@ import { Skeleton } from '@authportal/ui/components/skeleton'
 import { api, ApiError } from '@/lib/api-client'
 import { usersQueryKey, usersQueryOptions } from '@/queries/auth'
 
+/** Same shell as UserAccessSheet / solution-users-1. @see https://reui.io/preview/base/solution-users-1 */
+const mutedIconButtonClassName = 'text-muted-foreground hover:text-foreground'
+
 export const Route = createFileRoute('/_auth/admin/')({
   component: AdminUsersPage,
 })
@@ -300,14 +311,44 @@ function CreateUserSheet({
 }) {
   const [isAdmin, setIsAdmin] = useState(false)
 
+  useEffect(() => {
+    if (!open) setIsAdmin(false)
+  }, [open])
+
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="flex flex-col gap-4 sm:max-w-md">
+      <SheetContent
-        <SheetHeader>
+        side="right"
-          <SheetTitle>Новый пользователь</SheetTitle>
+        showCloseButton={false}
+        className="inset-y-4 right-4 left-auto flex h-[calc(100svh-2rem)] w-[min(24rem,calc(100vw-2rem))] max-w-none flex-col gap-0 overflow-hidden rounded-xl p-0 outline-none sm:max-w-none"
+      >
+        <SheetHeader className="shrink-0 gap-0 p-0">
+          <div className="flex min-h-12 items-center justify-between gap-2 border-b px-4">
+            <SheetTitle className="min-w-0 truncate text-base font-semibold">
+              Новый пользователь
+            </SheetTitle>
+            <SheetClose
+              render={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="Закрыть"
+                  className={mutedIconButtonClassName}
+                >
+                  <XIcon aria-hidden="true" />
+                </Button>
+              }
+            />
+          </div>
+          <SheetDescription className="sr-only">
+            Создание учётной записи портала
+          </SheetDescription>
         </SheetHeader>
+
         <form
-          className="flex flex-1 flex-col gap-4"
+          id="create-user-form"
+          className="flex min-h-0 flex-1 flex-col"
           onSubmit={(e) => {
             e.preventDefault()
             const fd = new FormData(e.currentTarget)
@@ -321,45 +362,81 @@ function CreateUserSheet({
             })
           }}
         >
-          <FieldGroup className="gap-3">
+          <div className="min-h-0 flex-1 overflow-y-auto px-4 py-5">
-            <Field>
+            <FieldGroup>
-              <FieldLabel htmlFor="create-name">Имя</FieldLabel>
+              <Field>
-              <Input id="create-name" name="name" required />
+                <FieldLabel htmlFor="create-name">Имя</FieldLabel>
-            </Field>
+                <Input
-            <Field>
+                  id="create-name"
-              <FieldLabel htmlFor="create-email">Email</FieldLabel>
+                  name="name"
-              <Input id="create-email" name="email" type="email" required />
+                  autoComplete="name"
-            </Field>
+                  required
-            <Field>
+                />
-              <FieldLabel htmlFor="create-password">Пароль</FieldLabel>
+              </Field>
-              <Input
+              <Field>
-                id="create-password"
+                <FieldLabel htmlFor="create-email">Email</FieldLabel>
-                name="password"
+                <Input
-                type="password"
+                  id="create-email"
-                minLength={6}
+                  name="email"
-                required
+                  type="email"
-              />
+                  autoComplete="email"
-            </Field>
+                  required
-            <label className="flex items-center gap-2 text-sm">
+                />
-              <Checkbox
+              </Field>
-                checked={isAdmin}
+              <Field>
-                onCheckedChange={(v) => setIsAdmin(v === true)}
+                <FieldLabel htmlFor="create-password">Пароль</FieldLabel>
-              />
+                <Input
-              Администратор портала
+                  id="create-password"
-            </label>
+                  name="password"
-          </FieldGroup>
+                  type="password"
-          {error ? <p className="text-destructive text-sm">{error}</p> : null}
+                  autoComplete="new-password"
-          <SheetFooter className="mt-auto">
+                  minLength={6}
-            <Button
+                  required
-              type="button"
+                />
-              variant="outline"
+              </Field>
-              onClick={() => onOpenChange(false)}
+              <Field orientation="horizontal">
-            >
+                <Checkbox
-              Отмена
+                  id="create-is-admin"
-            </Button>
+                  checked={isAdmin}
-            <Button type="submit" disabled={pending}>
+                  onCheckedChange={(v) => setIsAdmin(v === true)}
-              {pending ? 'Создание…' : 'Создать'}
+                />
-            </Button>
+                <FieldLabel
+                  htmlFor="create-is-admin"
+                  className="font-normal"
+                >
+                  Администратор портала
+                </FieldLabel>
+              </Field>
+            </FieldGroup>
+
+            {error ? (
+              <Alert variant="destructive" className="mt-5">
+                <AlertTitle>Ошибка</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : null}
+          </div>
+
+          <SheetFooter className="bg-background shrink-0 border-t">
+            <div className="flex w-full gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                className="min-w-0 flex-1"
+                disabled={pending}
+                onClick={() => onOpenChange(false)}
+              >
+                Отмена
+              </Button>
+              <Button
+                type="submit"
+                form="create-user-form"
+                className="min-w-0 flex-1"
+                disabled={pending}
+              >
+                {pending ? 'Создание…' : 'Создать'}
+              </Button>
+            </div>
           </SheetFooter>
         </form>
       </SheetContent>