Autosave device display name instead of an explicit Save button

Typing in the name field now debounces (600ms) and saves in the
background, with an inline spinner-then-checkmark instead of a button
click - one less step, and no risk of leaving an edited name unsaved.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd

components/devices/DevicesTable.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
+import { Check, Loader2 } from "lucide-react";
 import { toast } from "sonner";
+import { cn } from "@/lib/utils";
 
 export interface DeviceRow {
   id: number;
@@ -14,34 +15,67 @@ export interface DeviceRow {
   lastConnectedAt: number | null;
 }
 
+const AUTOSAVE_DELAY_MS = 600;
+
 function DeviceNameCell({ device }: { device: DeviceRow }) {
   const router = useRouter();
-  const [value, setValue] = useState(device.displayName ?? device.bleName);
-  const [saving, setSaving] = useState(false);
+  const initial = device.displayName ?? device.bleName;
+  const [value, setValue] = useState(initial);
+  const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle");
+  const lastSaved = useRef(initial);
 
-  async function handleSave() {
-    if (value.trim().length === 0) return;
-    setSaving(true);
+  useEffect(() => {
+    const trimmed = value.trim();
+    if (trimmed.length === 0 || trimmed === lastSaved.current) return;
+
+    setStatus("saving");
+    const timer = setTimeout(async () => {
       const res = await fetch(`/api/devices/${device.id}`, {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ displayName: value.trim() }),
+        body: JSON.stringify({ displayName: trimmed }),
       });
-    setSaving(false);
       if (res.ok) {
-      toast.success("Renamed");
+        lastSaved.current = trimmed;
+        setStatus("saved");
         router.refresh();
       } else {
+        setStatus("idle");
         toast.error("Could not rename device");
       }
-  }
+    }, AUTOSAVE_DELAY_MS);
+
+    return () => clearTimeout(timer);
+  }, [value, device.id, router]);
+
+  useEffect(() => {
+    if (status !== "saved") return;
+    const timer = setTimeout(() => setStatus("idle"), 1500);
+    return () => clearTimeout(timer);
+  }, [status]);
 
   return (
-    <div className="flex items-center gap-2">
-      <Input value={value} onChange={(e) => setValue(e.target.value)} className="h-8 w-40 min-w-40" />
-      <Button size="sm" variant="outline" onClick={handleSave} disabled={saving} className="shrink-0">
-        Save
-      </Button>
+    <div className="relative w-48">
+      <Input
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        className="h-8 pr-8"
+        aria-label="Device display name"
+      />
+      <div className="pointer-events-none absolute inset-y-0 right-2 flex w-3.5 items-center justify-center">
+        <Loader2
+          className={cn(
+            "absolute size-3.5 animate-spin text-muted-foreground transition-opacity",
+            status === "saving" ? "opacity-100" : "opacity-0",
+          )}
+        />
+        <Check
+          className={cn(
+            "absolute size-3.5 text-primary transition-opacity",
+            status === "saved" ? "opacity-100" : "opacity-0",
+          )}
+        />
+      </div>
     </div>
   );
 }