chore: Update package.json and pnpm-lock.yaml to add husky for Git hooks; enhance Docker workflow with pnpm setup and linting steps; refactor various components to utilize new form components and improve UI consistency.

apps/web/src/components/subdomain-edit-sheet.tsx

@@ -3,14 +3,10 @@ import type { CertMonitoring } from '@cfdm/shared'
 import type { ServiceView, SubdomainRecord } from '@/lib/schemas'
 import { certMonitoringOptions } from '@/lib/cert-monitoring'
 import { formatServiceGroupLabel } from '@/lib/service-utils'
-import { Button } from '@cfdm/ui/components/button'
+import { FormFieldSimple } from '@/components/form-field'
+import { LoadingButton } from '@/components/loading-button'
 import { Input } from '@cfdm/ui/components/input'
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-} from '@cfdm/ui/components/field'
+import { FieldDescription, FieldGroup } from '@cfdm/ui/components/field'
 import {
   Select,
   SelectContent,
@@ -26,7 +22,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@cfdm/ui/components/sheet'
-import { Spinner } from '@cfdm/ui/components/spinner'
 
 export interface SubdomainEditValues {
   name: string
@@ -121,20 +116,19 @@ export function SubdomainEditSheet({
         </SheetHeader>
         <form onSubmit={handleSubmit} className="flex flex-col gap-4 px-4">
           <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="subdomain_name">Имя</FieldLabel>
+            <FormFieldSimple label="Имя" htmlFor="subdomain_name">
               <Input
                 id="subdomain_name"
                 placeholder="www"
                 value={name}
                 onChange={(event) => setName(event.target.value)}
                 className="font-mono"
+                aria-invalid={!name.trim() && name.length > 0}
               />
-            </Field>
+            </FormFieldSimple>
             {mode === 'edit' && (
               <>
-                <Field>
-                  <FieldLabel htmlFor="subdomain_service">Сервис</FieldLabel>
+                <FormFieldSimple label="Сервис" htmlFor="subdomain_service">
                   <Select
                     items={serviceItems}
                     value={serviceId}
@@ -151,11 +145,11 @@ export function SubdomainEditSheet({
                       ))}
                     </SelectContent>
                   </Select>
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="subdomain_cert_monitoring">
-                    Мониторинг SSL
-                  </FieldLabel>
+                </FormFieldSimple>
+                <FormFieldSimple
+                  label="Мониторинг SSL"
+                  htmlFor="subdomain_cert_monitoring"
+                >
                   <Select
                     items={certMonitoringItems}
                     value={certMonitoring}
@@ -180,19 +174,20 @@ export function SubdomainEditSheet({
                         ?.description
                     }
                   </FieldDescription>
-                </Field>
+                </FormFieldSimple>
               </>
             )}
           </FieldGroup>
           <SheetFooter>
-            <Button type="submit" disabled={isSaving || !name.trim()} className="w-full">
-              {isSaving && <Spinner data-icon="inline-start" />}
-              {isSaving
-                ? 'Сохранение…'
-                : mode === 'create'
-                  ? 'Создать'
-                  : 'Сохранить'}
-            </Button>
+            <LoadingButton
+              type="submit"
+              className="w-full"
+              disabled={!name.trim()}
+              isLoading={isSaving}
+              loadingLabel="Сохранение…"
+            >
+              {mode === 'create' ? 'Создать' : 'Сохранить'}
+            </LoadingButton>
           </SheetFooter>
         </form>
       </SheetContent>