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
2026-01-02 22:32:27 +08:00 · 2025-12-06 21:42:28 +09:00
parent 77f2569a3b
commit 9f77199272
7 changed files with 358 additions and 15 deletions
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react"
 import { DrawIoEmbed } from "react-drawio"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import ChatPanel from "@/components/chat-panel"
+import { STORAGE_CLOSE_PROTECTION_KEY } from "@/components/settings-dialog"
 import {
    ResizableHandle,
    ResizablePanel,
@@ -21,6 +22,13 @@ export default function Home() {
        }
        return "min"
    })
+    const [closeProtection, setCloseProtection] = useState(() => {
+        if (typeof window !== "undefined") {
+            const saved = localStorage.getItem(STORAGE_CLOSE_PROTECTION_KEY)
+            return saved !== "false" // Default to true
+        }
+        return true
+    })
    const chatPanelRef = useRef<ImperativePanelHandle>(null)

    useEffect(() => {
@@ -61,6 +69,8 @@ export default function Home() {
    // Show confirmation dialog when user tries to leave the page
    // This helps prevent accidental navigation from browser back gestures
    useEffect(() => {
+        if (!closeProtection) return
+
        const handleBeforeUnload = (event: BeforeUnloadEvent) => {
            event.preventDefault()
            return ""
@@ -69,7 +79,7 @@ export default function Home() {
        window.addEventListener("beforeunload", handleBeforeUnload)
        return () =>
            window.removeEventListener("beforeunload", handleBeforeUnload)
-    }, [])
+    }, [closeProtection])

    return (
        <div className="h-screen bg-background relative overflow-hidden">
@@ -127,6 +137,7 @@ export default function Home() {
                                setDrawioUi(newTheme)
                            }}
                            isMobile={isMobile}
+                            onCloseProtectionChange={setCloseProtection}
                        />
                    </div>
                </ResizablePanel>
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -31,6 +31,7 @@ interface ChatPanelProps {
    drawioUi: "min" | "sketch"
    onToggleDrawioUi: () => void
    isMobile?: boolean
+    onCloseProtectionChange?: (enabled: boolean) => void
 }

 export default function ChatPanel({
@@ -39,6 +40,7 @@ export default function ChatPanel({
    drawioUi,
    onToggleDrawioUi,
    isMobile = false,
+    onCloseProtectionChange,
 }: ChatPanelProps) {
    const {
        loadDiagram: onDisplayChart,
@@ -497,7 +499,6 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                                className={`${isMobile ? "w-4 h-4" : "w-5 h-5"}`}
                            />
                        </a>
-                        {accessCodeRequired && (
                        <ButtonWithTooltip
                            tooltipContent="Settings"
                            variant="ghost"
@@ -509,7 +510,6 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                                className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`}
                            />
                        </ButtonWithTooltip>
-                        )}
                        {!isMobile && (
                            <ButtonWithTooltip
                                tooltipContent="Hide chat panel (Ctrl+B)"
@@ -570,6 +570,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
            <SettingsDialog
                open={showSettingsDialog}
                onOpenChange={setShowSettingsDialog}
+                onCloseProtectionChange={onCloseProtectionChange}
            />
        </div>
    )
--- a/components/settings-dialog.tsx
+++ b/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
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,9 +24,11 @@
                "@openrouter/ai-sdk-provider": "^1.2.3",
                "@opentelemetry/sdk-trace-node": "^2.2.0",
                "@radix-ui/react-dialog": "^1.1.6",
+                "@radix-ui/react-label": "^2.1.8",
                "@radix-ui/react-scroll-area": "^1.2.3",
                "@radix-ui/react-select": "^2.2.6",
                "@radix-ui/react-slot": "^1.1.2",
+                "@radix-ui/react-switch": "^1.2.6",
                "@radix-ui/react-tooltip": "^1.1.8",
                "@vercel/analytics": "^1.5.0",
                "@xmldom/xmldom": "^0.9.8",
@@ -3400,6 +3402,85 @@
                }
            }
        },
+        "node_modules/@radix-ui/react-label": {
+            "version": "2.1.8",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.8.tgz",
+            "integrity": "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.4"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+            "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "1.2.4"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+            "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/@radix-ui/react-popper": {
            "version": "1.2.2",
            "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
@@ -3989,6 +4070,164 @@
                }
            }
        },
+        "node_modules/@radix-ui/react-switch": {
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+            "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.3",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-controllable-state": "1.2.2",
+                "@radix-ui/react-use-previous": "1.1.1",
+                "@radix-ui/react-use-size": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+            "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+            "license": "MIT"
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-context": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+            "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "1.2.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+            "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-effect-event": "0.0.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-size": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+            "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/@radix-ui/react-tooltip": {
            "version": "1.1.8",
            "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz",
--- a/package.json
+++ b/package.json
@@ -28,9 +28,11 @@
        "@openrouter/ai-sdk-provider": "^1.2.3",
        "@opentelemetry/sdk-trace-node": "^2.2.0",
        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-label": "^2.1.8",
        "@radix-ui/react-scroll-area": "^1.2.3",
        "@radix-ui/react-select": "^2.2.6",
        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-switch": "^1.2.6",
        "@radix-ui/react-tooltip": "^1.1.8",
        "@vercel/analytics": "^1.5.0",
        "@xmldom/xmldom": "^0.9.8",