feat: implement debounced autosave functionality for form extra settings with status indicators

app/admin/form/[id]/extra/client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useTransition, useEffect } from "react";
+import { useState, useTransition, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -9,7 +9,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
 import { updateForm } from "@/app/admin/form/actions";
-import { Loader2, Save, ChevronDown } from "lucide-react";
+import { Loader2, ChevronDown, Check } from "lucide-react";
 import { getGuildRoles, DiscordRole } from "@/app/actions/discord";
 import {
   DropdownMenu,
@@ -17,7 +17,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
+import { ScrollArea } from "@/components/ui/scroll-area"
 
 interface FormExtraClientProps {
   form: {
@@ -30,6 +30,8 @@ interface FormExtraClientProps {
   };
 }
 
+type AutoSaveStatus = "idle" | "saving" | "saved";
+
 export default function FormExtraClient({ form }: FormExtraClientProps) {
   const router = useRouter();
   const [webhookUrl, setWebhookUrl] = useState(form.discordWebhookUrl || "");
@@ -42,6 +44,11 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
   const [loadingRoles, setLoadingRoles] = useState(true);
 
   const [isSaving, startSaveTransition] = useTransition();
+  const [saveStatus, setSaveStatus] = useState<AutoSaveStatus>("idle");
+  const [lastEdited, setLastEdited] = useState<"access" | "webhook" | null>(null);
+
+  const isFirstRender = useRef(true);
+  const saveTimeout = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     getGuildRoles()
@@ -50,7 +57,8 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
       .finally(() => setLoadingRoles(false));
   }, []);
 
-  const handleSave = () => {
+  const handleSave = (silent = false) => {
+    setSaveStatus("saving");
     startSaveTransition(async () => {
       try {
         await updateForm(form.id, {
@@ -60,15 +68,35 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
           allowedRoles,
           deniedRoles,
         });
-        toast.success("Extra settings saved!");
+        setSaveStatus("saved");
+        setTimeout(() => setSaveStatus("idle"), 2000);
         router.refresh();
       } catch (err: any) {
+        setSaveStatus("idle");
         toast.error(err.message || "Failed to update settings.");
       }
     });
   };
 
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    if (saveTimeout.current) clearTimeout(saveTimeout.current);
+    
+    saveTimeout.current = setTimeout(() => {
+      handleSave(true);
+    }, 1000);
+
+    return () => {
+      if (saveTimeout.current) clearTimeout(saveTimeout.current);
+    };
+  }, [webhookUrl, webhookTemplate, webhookUpdateTemplate, allowedRoles, deniedRoles]);
+
   const toggleRole = (list: string[], setList: (v: string[]) => void, roleId: string) => {
+    setLastEdited("access");
     if (list.includes(roleId)) {
       setList(list.filter(id => id !== roleId));
     } else {
@@ -151,11 +179,14 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
   return (
     <div className="space-y-6">
       <Card>
-        <CardHeader>
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4">
-          <CardTitle>Access Control</CardTitle>
+          <div className="space-y-1">
-          <CardDescription>
+            <CardTitle>Access Control</CardTitle>
-            Restrict form access to specific Discord roles.
+            <CardDescription>
-          </CardDescription>
+              Restrict form access to specific Discord roles.
+            </CardDescription>
+          </div>
+          <SaveStatusIndicator status={lastEdited === "access" ? saveStatus : "idle"} />
         </CardHeader>
         <CardContent className="space-y-6">
           {renderRoleList(
@@ -174,12 +205,15 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
       </Card>
 
       <Card>
-        <CardHeader>
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4">
-          <CardTitle>Discord Webhook</CardTitle>
+          <div className="space-y-1">
-          <CardDescription>
+            <CardTitle>Discord Webhook</CardTitle>
-            Send notifications to a Discord channel when a new submission is received.
+            <CardDescription>
-            Leave URL empty to disable.
+              Send notifications to a Discord channel when a new submission is received.
-          </CardDescription>
+              Leave URL empty to disable.
+            </CardDescription>
+          </div>
+          <SaveStatusIndicator status={lastEdited === "webhook" ? saveStatus : "idle"} />
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
@@ -187,7 +221,7 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
             <Input
               id="webhook-url"
               value={webhookUrl}
-              onChange={(e) => setWebhookUrl(e.target.value)}
+              onChange={(e) => { setLastEdited("webhook"); setWebhookUrl(e.target.value); }}
               placeholder="https://discord.com/api/webhooks/..."
             />
           </div>
@@ -196,7 +230,7 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
             <Textarea
               id="webhook-template"
               value={webhookTemplate}
-              onChange={(e) => setWebhookTemplate(e.target.value)}
+              onChange={(e) => { setLastEdited("webhook"); setWebhookTemplate(e.target.value); }}
               placeholder="New submission received from {Name} for skill: {skill}!"
               className="min-h-24"
             />
@@ -209,7 +243,7 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
             <Textarea
               id="webhook-update-template"
               value={webhookUpdateTemplate}
-              onChange={(e) => setWebhookUpdateTemplate(e.target.value)}
+              onChange={(e) => { setLastEdited("webhook"); setWebhookUpdateTemplate(e.target.value); }}
               placeholder="Submission updated by {Name} for skill: {skill}!"
               className="min-h-24"
             />
@@ -219,13 +253,27 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
           </div>
         </CardContent>
       </Card>
-      
-      <div className="flex justify-end pt-2 pb-8">
-        <Button onClick={handleSave} disabled={isSaving} className="gap-2">
-          {isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
-          Save Settings
-        </Button>
-      </div>
     </div>
   );
 }
+
+function SaveStatusIndicator({ status }: { status: AutoSaveStatus }) {
+  if (status === "idle") return null;
+
+  return (
+    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+      {status === "saving" && (
+        <>
+          <Loader2 className="w-3 h-3 animate-spin" />
+          Saving...
+        </>
+      )}
+      {status === "saved" && (
+        <>
+          <Check className="w-3 h-3 text-green-500" />
+          Saved
+        </>
+      )}
+    </span>
+  );
+}