fix(config): добавить новые зависимости и обновить конфигурацию компонентов

app/(main)/settings/page.tsx

@@ -1,8 +1,10 @@
 "use client"
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import Link from "next/link"
 import { PageHeader } from "@/components/page-header"
+import { FormField, FormToggle } from "@/components/form-kit"
+import { FileImportDialog } from "@/components/file-import-dialog"
 import {
   Card, CardContent, CardHeader, CardTitle, CardDescription,
 } from "@/components/ui/card"
@@ -162,17 +164,6 @@ function makeApiFetch(backendUrl: string) {
 
 // ─── small components ─────────────────────────────────────────────────────────
 
-function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button type="button" onClick={() => onChange(!checked)}
-      className={cn("relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors cursor-pointer",
-        checked ? "bg-primary" : "bg-input")}>
-      <span className={cn("pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
-        checked ? "translate-x-4" : "translate-x-0")} />
-    </button>
-  )
-}
-
 function SettingRow({ label, description, children }: { label: string; description?: string; children: React.ReactNode }) {
   return (
     <div className="flex items-center justify-between gap-4 py-3.5">
@@ -413,24 +404,24 @@ function UserSheet({ open, user, onSave, onClose }: {
           {tab === "profile" && (
             <div className="px-5 py-5 flex flex-col gap-4">
 
-              <Field label="Полное имя" error={errors.name}>
+              <FormField label="Полное имя" error={errors.name}>
                 <Input value={form.name} onChange={e => setField("name", e.target.value)}
                   placeholder="Иван Иванов" className="h-9" />
-              </Field>
+              </FormField>
 
-              <Field label="Логин" error={errors.login}>
+              <FormField label="Логин" error={errors.login}>
                 <Input value={form.login} onChange={e => setField("login", e.target.value)}
                   placeholder="i.ivanov" className="h-9 font-mono" />
-              </Field>
+              </FormField>
 
-              <Field label="Email" error={errors.email}>
+              <FormField label="Email" error={errors.email}>
                 <Input value={form.email} onChange={e => setField("email", e.target.value)}
                   placeholder="i.ivanov@company.io" type="email" className="h-9" />
-              </Field>
+              </FormField>
 
               <Separator />
 
-              <Field label="Роль">
+              <FormField label="Роль">
                 <div className="flex gap-2 flex-wrap">
                   {(["viewer", "operator", "admin"] as Role[]).map(r => (
                     <button key={r} type="button" onClick={() => setRole(r)}
@@ -453,18 +444,18 @@ function UserSheet({ open, user, onSave, onClose }: {
                     ? "Управление инфраструктурой согласно выданным правам"
                     : "Только просмотр согласно выданным правам"}
                 </p>
-              </Field>
+              </FormField>
 
               <Separator />
 
-              <Field label="Статус учётной записи">
+              <FormField label="Статус учётной записи">
                 <div className="flex items-center gap-3">
-                  <Toggle checked={form.active} onChange={v => setField("active", v)} />
+                  <FormToggle checked={form.active} onChange={v => setField("active", v)} />
                   <span className={cn("text-xs font-medium", form.active ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground")}>
                     {form.active ? "Активна" : "Заблокирована"}
                   </span>
                 </div>
-              </Field>
+              </FormField>
             </div>
           )}
 
@@ -660,7 +651,7 @@ function UserSheet({ open, user, onSave, onClose }: {
                       </span>
 
                       {/* active toggle */}
-                      <Toggle checked={su.active} onChange={() => toggleSubUser(su.id)} />
+                      <FormToggle checked={su.active} onChange={() => toggleSubUser(su.id)} />
 
                       {/* delete */}
                       <button onClick={() => removeSubUser(su.id)}
@@ -775,22 +766,6 @@ function UserSheet({ open, user, onSave, onClose }: {
   )
 }
 
-// ─── helper ───────────────────────────────────────────────────────────────────
-
-function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-xs font-medium">{label}</label>
-      {children}
-      {error && (
-        <p className="text-xs text-destructive flex items-center gap-1">
-          <AlertCircleIcon className="size-3" />{error}
-        </p>
-      )}
-    </div>
-  )
-}
-
 // ─── delete confirm ───────────────────────────────────────────────────────────
 
 function DatabaseRestoreConfirm({
@@ -900,7 +875,7 @@ export default function SettingsPage() {
   const [dbBackupBusy, setDbBackupBusy] = useState(false)
   const [dbRestoreBusy, setDbRestoreBusy] = useState(false)
   const [dbRestoreFile, setDbRestoreFile] = useState<File | null>(null)
-  const dbRestoreInputRef = useRef<HTMLInputElement>(null)
+  const [dbRestoreDialogOpen, setDbRestoreDialogOpen] = useState(false)
 
   // notifications
   const [notifEmail,   setNotifEmail]   = useState(true)
@@ -1031,7 +1006,6 @@ export default function SettingsPage() {
       await restoreSystemDatabaseBackup(backendUrl, dbRestoreFile)
       toast.success("База приложения восстановлена")
       setDbRestoreFile(null)
-      if (dbRestoreInputRef.current) dbRestoreInputRef.current.value = ""
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "Не удалось восстановить базу")
     } finally {
@@ -1230,30 +1204,16 @@ export default function SettingsPage() {
             description="Полностью заменяет текущую базу SQLite"
           >
             <div className="flex flex-col items-end gap-2">
-              <Input
-                ref={dbRestoreInputRef}
-                type="file"
-                accept=".db,.sqlite,.sqlite3,application/octet-stream"
-                className="hidden"
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8"
                 disabled={!systemDbAvailable || dbBackupBusy || dbRestoreBusy}
-                onChange={(e) => {
-                  const file = e.target.files?.[0] ?? null
-                  if (!file) return
-                  setDbRestoreFile(file)
-                }}
-              />
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-8"
-                  disabled={!systemDbAvailable || dbBackupBusy || dbRestoreBusy}
-                  onClick={() => dbRestoreInputRef.current?.click()}
-                >
-                  <UploadIcon className="size-4" />
-                  Выбрать файл
-                </Button>
-              </div>
+                onClick={() => setDbRestoreDialogOpen(true)}
+              >
+                <UploadIcon className="size-4" />
+                Выбрать файл
+              </Button>
               {dbRestoreFile && (
                 <p className="text-xs text-muted-foreground max-w-[220px] text-right break-all">{dbRestoreFile.name}</p>
               )}
@@ -1384,7 +1344,7 @@ export default function SettingsPage() {
               label="Подставлять данные EvoBGP"
               description="На страницах Домены, IP-диапазоны, ASN и Communities вместо моков из lib/data"
             >
-              <Toggle
+              <FormToggle
                 checked={evoEnabledDraft}
                 onChange={(v) => setEvoEnabledDraft(v)}
               />
@@ -1496,15 +1456,15 @@ export default function SettingsPage() {
           <CardHeader><CardTitle className="text-base">Каналы уведомлений</CardTitle></CardHeader>
           <CardContent className="divide-y px-5">
             <SettingRow label="Email" description="Отправка уведомлений на admin@routerlists.io">
-              <Toggle checked={notifEmail} onChange={setNotifEmail} />
+              <FormToggle checked={notifEmail} onChange={setNotifEmail} />
             </SettingRow>
             {notifEmail && <div className="py-3"><Input className="text-sm h-8" defaultValue="admin@routerlists.io" /></div>}
             <SettingRow label="Slack" description="Webhook-интеграция с каналом #alerts">
-              <Toggle checked={notifSlack} onChange={setNotifSlack} />
+              <FormToggle checked={notifSlack} onChange={setNotifSlack} />
             </SettingRow>
             {notifSlack && <div className="py-3"><Input className="text-sm h-8 font-mono" placeholder="https://hooks.slack.com/…" /></div>}
             <SettingRow label="Webhook" description="POST-запрос на произвольный endpoint">
-              <Toggle checked={notifWh} onChange={setNotifWh} />
+              <FormToggle checked={notifWh} onChange={setNotifWh} />
             </SettingRow>
             {notifWh && <div className="py-3"><Input className="text-sm h-8 font-mono" defaultValue="https://hooks.example.com/routerlists" /></div>}
           </CardContent>
@@ -1513,16 +1473,16 @@ export default function SettingsPage() {
           <CardHeader><CardTitle className="text-base">Триггеры</CardTitle></CardHeader>
           <CardContent className="divide-y px-5">
             <SettingRow label="Деградация узла" description="Потери пакетов > 5% или RTT > 100мс">
-              <Toggle checked={notifDegr} onChange={setNotifDegr} />
+              <FormToggle checked={notifDegr} onChange={setNotifDegr} />
             </SettingRow>
             <SettingRow label="Узел ушёл offline">
-              <Toggle checked={notifOffline} onChange={setNotifOffline} />
+              <FormToggle checked={notifOffline} onChange={setNotifOffline} />
             </SettingRow>
             <SettingRow label="Падение BGP-сессии">
-              <Toggle checked={notifBgp} onChange={setNotifBgp} />
+              <FormToggle checked={notifBgp} onChange={setNotifBgp} />
             </SettingRow>
             <SettingRow label="Просроченный бэкап" description="Если последний бэкап старше 2 дней">
-              <Toggle checked={notifBackup} onChange={setNotifBackup} />
+              <FormToggle checked={notifBackup} onChange={setNotifBackup} />
             </SettingRow>
           </CardContent>
         </Card>
@@ -1741,7 +1701,7 @@ export default function SettingsPage() {
           <CardContent className="divide-y px-5">
             <SettingRow label="Двухфакторная аутентификация (MFA)"
               description="TOTP / Authenticator app для всех администраторов">
-              <Toggle checked={mfa} onChange={setMfa} />
+              <FormToggle checked={mfa} onChange={setMfa} />
             </SettingRow>
             <SettingRow label="Тайм-аут сессии (мин)" description="Автоматический выход при бездействии">
               <Input className="w-20 h-8 text-sm" value={sessMin} onChange={e => setSessMin(e.target.value)} />
@@ -1763,7 +1723,7 @@ export default function SettingsPage() {
           <CardContent className="divide-y px-5">
             <SettingRow label="Расширенный журнал аудита"
               description="Записывать все изменения конфигурации с указанием пользователя и IP">
-              <Toggle checked={auditLog} onChange={setAuditLog} />
+              <FormToggle checked={auditLog} onChange={setAuditLog} />
             </SettingRow>
           </CardContent>
         </Card>
@@ -1853,7 +1813,6 @@ export default function SettingsPage() {
           onCancel={() => {
             if (dbRestoreBusy) return
             setDbRestoreFile(null)
-            if (dbRestoreInputRef.current) dbRestoreInputRef.current.value = ""
           }}
         />
       )}
@@ -1864,6 +1823,19 @@ export default function SettingsPage() {
           onCancel={() => setDeleteTarget(null)}
         />
       )}
+
+      <FileImportDialog
+        open={dbRestoreDialogOpen}
+        onOpenChange={setDbRestoreDialogOpen}
+        title="Восстановление базы данных"
+        description="Выберите файл SQLite (.db) — текущая база будет полностью заменена"
+        accept=".db,.sqlite,.sqlite3,application/octet-stream"
+        onImport={async (files) => {
+          const file = files[0]
+          if (!file) return
+          setDbRestoreFile(file)
+        }}
+      />
     </div>
   )
 }