feat: add configurable close protection setting (#123)

- Add Close Protection toggle to Settings dialog
- Save setting to localStorage (default: enabled)
- Make beforeunload confirmation conditional
- Settings button now always visible in header
- Add shadcn Switch and Label components

components/settings-dialog.tsx

@@ -11,27 +11,47 @@ import {
     DialogTitle,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
 
 interface SettingsDialogProps {
     open: boolean
     onOpenChange: (open: boolean) => void
+    onCloseProtectionChange?: (enabled: boolean) => void
 }
 
 export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
+export const STORAGE_CLOSE_PROTECTION_KEY = "next-ai-draw-io-close-protection"
 
-export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
+export function SettingsDialog({
+    open,
+    onOpenChange,
+    onCloseProtectionChange,
+}: SettingsDialogProps) {
     const [accessCode, setAccessCode] = useState("")
+    const [closeProtection, setCloseProtection] = useState(true)
 
     useEffect(() => {
         if (open) {
             const storedCode =
                 localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
             setAccessCode(storedCode)
+
+            const storedCloseProtection = localStorage.getItem(
+                STORAGE_CLOSE_PROTECTION_KEY,
+            )
+            // Default to true if not set
+            setCloseProtection(storedCloseProtection !== "false")
         }
     }, [open])
 
     const handleSave = () => {
         localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim())
+        localStorage.setItem(
+            STORAGE_CLOSE_PROTECTION_KEY,
+            closeProtection.toString(),
+        )
+        onCloseProtectionChange?.(closeProtection)
         onOpenChange(false)
     }
 
@@ -68,6 +88,21 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                             Required if the server has enabled access control.
                         </p>
                     </div>
+                    <div className="flex items-center justify-between">
+                        <div className="space-y-0.5">
+                            <Label htmlFor="close-protection">
+                                Close Protection
+                            </Label>
+                            <p className="text-[0.8rem] text-muted-foreground">
+                                Show confirmation when leaving the page.
+                            </p>
+                        </div>
+                        <Switch
+                            id="close-protection"
+                            checked={closeProtection}
+                            onCheckedChange={setCloseProtection}
+                        />
+                    </div>
                 </div>
                 <DialogFooter>
                     <Button