feat(backups): replace button with checkbox for server selection in backup settings

Updated the BackupCreateSheet and BackupsSettings components to use checkboxes for selecting servers instead of buttons. This improves user interaction by allowing for easier selection and toggling of server states. The Checkbox component is now integrated for better accessibility and functionality.

components/backups/backup-create-sheet.tsx

@@ -4,6 +4,7 @@ import type { Server } from "@/lib/data"
 import { FormField } from "@/components/form-kit"
 import { StatusBadge } from "@/components/status-badge"
 import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
 import { Input } from "@/components/ui/input"
 import {
   Sheet,
@@ -110,27 +111,18 @@ export function BackupCreateSheet({
               {servers.map((s) => {
                 const checked = selected.has(s.id)
                 return (
-                  <button
+                  <label
                     key={s.id}
-                    type="button"
-                    onClick={() => onToggle(s.id)}
                     className={cn(
-                      "flex items-center gap-3 rounded-lg border p-3 text-left transition-colors",
+                      "flex cursor-pointer items-center gap-3 rounded-lg border p-3 text-left transition-colors",
                       checked ? "border-primary/40 bg-primary/5" : "border-border hover:bg-muted/40",
                     )}
                   >
-                    <div
-                      className={cn(
-                        "flex size-4 shrink-0 items-center justify-center rounded border transition-colors",
-                        checked ? "bg-primary border-primary" : "border-border",
-                      )}
-                    >
-                      {checked && (
-                        <svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden="true">
-                          <path d="M1 4l2.5 2.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                        </svg>
-                      )}
-                    </div>
+                    <Checkbox
+                      checked={checked}
+                      onCheckedChange={() => onToggle(s.id)}
+                      aria-label={`Выбрать ${s.name}`}
+                    />
                     <div className="flex-1 min-w-0">
                       <p className="text-sm font-medium">{s.name}</p>
                       <div className="flex items-center gap-1.5 mt-0.5">
@@ -141,7 +133,7 @@ export function BackupCreateSheet({
                     {s.status === "offline" && (
                       <span className="text-xs text-muted-foreground">недоступен</span>
                     )}
-                  </button>
+                  </label>
                 )
               })}
             </StepperContent>

components/backups/backups-settings.tsx

@@ -7,6 +7,7 @@ import { OpsPanel } from "@/components/ops-panel"
 import { FormField, FormToggle, SegmentedControl } from "@/components/form-kit"
 import { StatusBadge } from "@/components/status-badge"
 import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
 import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
 import { LoaderCircleIcon } from "lucide-react"
@@ -377,29 +378,20 @@ export function BackupsSettings({
           {servers.map((s) => {
             const checked = selectedServers.has(s.id)
             return (
-              <button
+              <label
                 key={s.id}
-                type="button"
-                onClick={() => onToggleServer(s.id)}
                 className={cn(
-                  "flex items-center gap-3 rounded-lg border p-3 text-left transition-colors",
+                  "flex cursor-pointer items-center gap-3 rounded-lg border p-3 text-left transition-colors",
                   checked
                     ? "border-primary/40 bg-primary/5"
                     : "border-border hover:border-border/80 hover:bg-muted/40",
                 )}
               >
-                <div
-                  className={cn(
-                    "flex size-4 shrink-0 items-center justify-center rounded border transition-colors",
-                    checked ? "bg-primary border-primary" : "border-border",
-                  )}
-                >
-                  {checked && (
-                    <svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden="true">
-                      <path d="M1 4l2.5 2.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                    </svg>
-                  )}
-                </div>
+                <Checkbox
+                  checked={checked}
+                  onCheckedChange={() => onToggleServer(s.id)}
+                  aria-label={`Выбрать ${s.name}`}
+                />
                 <div className="flex-1 min-w-0">
                   <p className="text-sm font-medium truncate">{s.name}</p>
                   <div className="flex items-center gap-1.5 mt-0.5">
@@ -407,7 +399,7 @@ export function BackupsSettings({
                     <StatusBadge status={s.status} />
                   </div>
                 </div>
-              </button>
+              </label>
             )
           })}
         </div>