From 83bfc0355dc199d4b68f0f0fc87d1887f38b0635 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Sat, 18 Jul 2026 20:24:51 +0700
Subject: [PATCH] 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 | 165 ++++++++++++++++------
 1 file changed, 121 insertions(+), 44 deletions(-)

diff --git a/apps/web/src/routes/_auth.admin.index.tsx b/apps/web/src/routes/_auth.admin.index.tsx
index 501260a..849e58b 100644
--- a/apps/web/src/routes/_auth.admin.index.tsx
+++ b/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">
-        <SheetHeader>
-          <SheetTitle>Новый пользователь</SheetTitle>
+      <SheetContent
+        side="right"
+        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">
-            <Field>
-              <FieldLabel htmlFor="create-name">Имя</FieldLabel>
-              <Input id="create-name" name="name" required />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="create-email">Email</FieldLabel>
-              <Input id="create-email" name="email" type="email" required />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="create-password">Пароль</FieldLabel>
-              <Input
-                id="create-password"
-                name="password"
-                type="password"
-                minLength={6}
-                required
-              />
-            </Field>
-            <label className="flex items-center gap-2 text-sm">
-              <Checkbox
-                checked={isAdmin}
-                onCheckedChange={(v) => setIsAdmin(v === true)}
-              />
-              Администратор портала
-            </label>
-          </FieldGroup>
-          {error ? <p className="text-destructive text-sm">{error}</p> : null}
-          <SheetFooter className="mt-auto">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-            >
-              Отмена
-            </Button>
-            <Button type="submit" disabled={pending}>
-              {pending ? 'Создание…' : 'Создать'}
-            </Button>
+          <div className="min-h-0 flex-1 overflow-y-auto px-4 py-5">
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="create-name">Имя</FieldLabel>
+                <Input
+                  id="create-name"
+                  name="name"
+                  autoComplete="name"
+                  required
+                />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="create-email">Email</FieldLabel>
+                <Input
+                  id="create-email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="create-password">Пароль</FieldLabel>
+                <Input
+                  id="create-password"
+                  name="password"
+                  type="password"
+                  autoComplete="new-password"
+                  minLength={6}
+                  required
+                />
+              </Field>
+              <Field orientation="horizontal">
+                <Checkbox
+                  id="create-is-admin"
+                  checked={isAdmin}
+                  onCheckedChange={(v) => setIsAdmin(v === true)}
+                />
+                <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>