Refine root UI around shadcn primitives

components/root/sidebar-maintenance-control.tsx

@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import { useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 
 type SidebarMaintenanceControlProps = {
@@ -33,10 +34,10 @@ export function SidebarMaintenanceControl({
       <label
         htmlFor="sidebar-maintenance-enabled"
         className={cn(
-          "flex cursor-pointer items-center justify-between gap-3 rounded-nested border px-3 py-2 transition-colors",
+          "flex cursor-pointer items-center justify-between gap-3 rounded-md border px-3 py-2 transition-colors",
           enabled
             ? "border-status-warning/40 bg-status-warning-soft/80"
-            : "border-border bg-surface-1 hover:bg-surface-2",
+            : "border-input bg-card hover:bg-accent/20",
         )}
       >
         <span className="flex min-w-0 items-center gap-3">
@@ -63,11 +64,10 @@ export function SidebarMaintenanceControl({
         </Badge>
       </label>
 
-      <input
+      <Checkbox
         id="sidebar-maintenance-enabled"
-        type="checkbox"
         checked={enabled}
-        onChange={(event) => setEnabled(event.target.checked)}
+        onCheckedChange={(checked) => setEnabled(checked === true)}
         className="sr-only"
       />
     </form>