feat(settings): unsaved changes guard with inline confirmation bar

2026-03-25 20:09:11 +01:00
parent 1ad68943c8
commit 9a3fab3535
5 changed files with 176 additions and 32 deletions
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -1,8 +1,8 @@
 'use client'

-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback, useEffect, useRef } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
-import { X, GearSix, Buildings, User } from '@phosphor-icons/react'
+import { X, GearSix, Buildings, User, Warning } from '@phosphor-icons/react'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useAuth } from '@/lib/auth/context'
 import { useSite } from '@/lib/swr/dashboard'
@@ -172,19 +172,21 @@ function TabContent({
  context,
  activeTab,
  siteId,
+  onDirtyChange,
 }: {
  context: SettingsContext
  activeTab: string
  siteId: string | null
+  onDirtyChange: (dirty: boolean) => void
 }) {
  // Site tabs
  if (context === 'site' && siteId) {
    switch (activeTab) {
-      case 'general': return <SiteGeneralTab siteId={siteId} />
+      case 'general': return <SiteGeneralTab siteId={siteId} onDirtyChange={onDirtyChange} />
      case 'goals': return <SiteGoalsTab siteId={siteId} />
-      case 'visibility': return <SiteVisibilityTab siteId={siteId} />
-      case 'privacy': return <SitePrivacyTab siteId={siteId} />
-      case 'bot-spam': return <SiteBotSpamTab siteId={siteId} />
+      case 'visibility': return <SiteVisibilityTab siteId={siteId} onDirtyChange={onDirtyChange} />
+      case 'privacy': return <SitePrivacyTab siteId={siteId} onDirtyChange={onDirtyChange} />
+      case 'bot-spam': return <SiteBotSpamTab siteId={siteId} onDirtyChange={onDirtyChange} />
      case 'reports': return <SiteReportsTab siteId={siteId} />
      case 'integrations': return <SiteIntegrationsTab siteId={siteId} />
    }
@@ -227,6 +229,39 @@ export default function UnifiedSettingsModal() {
  const [sites, setSites] = useState<Site[]>([])
  const [activeSiteId, setActiveSiteId] = useState<string | null>(null)

+  // ─── Dirty state & pending navigation ────────────────────────
+  const isDirtyRef = useRef(false)
+  const [showDirtyBar, setShowDirtyBar] = useState(false)
+  const pendingActionRef = useRef<(() => void) | null>(null)
+
+  const handleDirtyChange = useCallback((dirty: boolean) => {
+    isDirtyRef.current = dirty
+    // Hide the bar if user saves (dirty becomes false) while bar is showing
+    if (!dirty) setShowDirtyBar(false)
+  }, [])
+
+  /** Try to execute an action — if dirty, show confirmation bar instead */
+  const guardedAction = useCallback((action: () => void) => {
+    if (isDirtyRef.current) {
+      pendingActionRef.current = action
+      setShowDirtyBar(true)
+    } else {
+      action()
+    }
+  }, [])
+
+  const handleDiscardAndContinue = useCallback(() => {
+    isDirtyRef.current = false
+    setShowDirtyBar(false)
+    pendingActionRef.current?.()
+    pendingActionRef.current = null
+  }, [])
+
+  const handleStayHere = useCallback(() => {
+    setShowDirtyBar(false)
+    pendingActionRef.current = null
+  }, [])
+
  // Apply initial tab when modal opens
  useEffect(() => {
    if (isOpen && initTab) {
@@ -239,24 +274,30 @@ export default function UnifiedSettingsModal() {
    }
  }, [isOpen, initTab])

+  // Reset dirty state when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      isDirtyRef.current = false
+      setShowDirtyBar(false)
+      pendingActionRef.current = null
+    }
+  }, [isOpen])
+
  // Detect site from URL and load sites list when modal opens
  useEffect(() => {
    if (!isOpen || !user?.org_id) return

-    // Pick up site ID from URL — this is the only site the user can configure
    if (typeof window !== 'undefined') {
      const match = window.location.pathname.match(/\/sites\/([a-f0-9-]+)/)
      if (match) {
        setActiveSiteId(match[1])
        setContext('site')
      } else {
-        // Not on a site page — default to organization context
        setActiveSiteId(null)
        if (!initTab?.context) setContext('workspace')
      }
    }

-    // Load sites for domain display
    listSites().then(data => {
      setSites(Array.isArray(data) ? data : [])
    }).catch(() => {})
@@ -270,28 +311,42 @@ export default function UnifiedSettingsModal() {

      if (e.key === ',' && !e.metaKey && !e.ctrlKey && !e.altKey) {
        e.preventDefault()
-        if (isOpen) closeSettings()
+        if (isOpen) guardedAction(closeSettings)
        else openUnifiedSettings()
      }
      if (e.key === 'Escape' && isOpen) {
-        closeSettings()
+        if (showDirtyBar) handleStayHere()
+        else guardedAction(closeSettings)
      }
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
-  }, [isOpen, openUnifiedSettings, closeSettings])
+  }, [isOpen, openUnifiedSettings, closeSettings, guardedAction, showDirtyBar, handleStayHere])

  const tabs = context === 'site' ? SITE_TABS : context === 'workspace' ? WORKSPACE_TABS : ACCOUNT_TABS
  const activeTab = context === 'site' ? siteTabs : context === 'workspace' ? workspaceTabs : accountTabs
  const setActiveTab = context === 'site' ? setSiteTabs : context === 'workspace' ? setWorkspaceTabs : setAccountTabs

  const handleContextChange = useCallback((ctx: SettingsContext) => {
-    setContext(ctx)
-    // Reset tabs to defaults when switching context
-    if (ctx === 'site') setSiteTabs('general')
-    else if (ctx === 'workspace') setWorkspaceTabs('general')
-    else if (ctx === 'account') setAccountTabs('profile')
-  }, [])
+    guardedAction(() => {
+      setContext(ctx)
+      if (ctx === 'site') setSiteTabs('general')
+      else if (ctx === 'workspace') setWorkspaceTabs('general')
+      else if (ctx === 'account') setAccountTabs('profile')
+    })
+  }, [guardedAction])
+
+  const handleTabChange = useCallback((tabId: string) => {
+    guardedAction(() => setActiveTab(tabId))
+  }, [guardedAction, setActiveTab])
+
+  const handleClose = useCallback(() => {
+    guardedAction(closeSettings)
+  }, [guardedAction, closeSettings])
+
+  const handleBackdropClick = useCallback(() => {
+    guardedAction(closeSettings)
+  }, [guardedAction, closeSettings])

  return (
    <AnimatePresence>
@@ -304,7 +359,7 @@ export default function UnifiedSettingsModal() {
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm"
-            onClick={closeSettings}
+            onClick={handleBackdropClick}
          />

          {/* Modal */}
@@ -324,7 +379,7 @@ export default function UnifiedSettingsModal() {
                <div className="flex items-center justify-between mb-4">
                  <h2 className="text-lg font-semibold text-white">Settings</h2>
                  <button
-                    onClick={closeSettings}
+                    onClick={handleClose}
                    className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
                  >
                    <X weight="bold" className="w-4 h-4" />
@@ -340,11 +395,45 @@ export default function UnifiedSettingsModal() {

                {/* Tabs */}
                <div className="mt-4">
-                  <TabBar tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+                  <TabBar tabs={tabs} activeTab={activeTab} onChange={handleTabChange} />
                </div>
              </div>

-              {/* Content — parent has fixed h-[85vh] so this fills remaining space without jumping */}
+              {/* Unsaved changes bar */}
+              <AnimatePresence>
+                {showDirtyBar && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.15 }}
+                    className="shrink-0 overflow-hidden"
+                  >
+                    <div className="flex items-center justify-between gap-3 px-6 py-2.5 bg-amber-900/20 border-b border-amber-800/40">
+                      <div className="flex items-center gap-2 text-sm text-amber-200">
+                        <Warning weight="bold" className="w-4 h-4 text-amber-400 shrink-0" />
+                        You have unsaved changes.
+                      </div>
+                      <div className="flex items-center gap-2 shrink-0">
+                        <button
+                          onClick={handleDiscardAndContinue}
+                          className="px-3 py-1 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors"
+                        >
+                          Discard & continue
+                        </button>
+                        <button
+                          onClick={handleStayHere}
+                          className="px-3 py-1 text-xs font-medium text-neutral-400 hover:text-white transition-colors"
+                        >
+                          Stay here
+                        </button>
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+              {/* Content */}
              <div className="flex-1 overflow-y-auto overflow-x-hidden">
                <AnimatePresence mode="wait">
                  <motion.div
@@ -355,7 +444,7 @@ export default function UnifiedSettingsModal() {
                    transition={{ duration: 0.12 }}
                    className="p-6"
                  >
-                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} />
+                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} />
                  </motion.div>
                </AnimatePresence>
              </div>
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -1,17 +1,18 @@
 'use client'

-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Button, Toggle, toast, Spinner, getDateRange } from '@ciphera-net/ui'
 import { ShieldCheck } from '@phosphor-icons/react'
 import { useSite, useBotFilterStats, useSessions } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
 import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'

-export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
+export default function SiteBotSpamTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
  const { data: site, mutate } = useSite(siteId)
  const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
  const [filterBots, setFilterBots] = useState(false)
  const [saving, setSaving] = useState(false)
+  const initialFilterRef = useRef<boolean | null>(null)

  const [botView, setBotView] = useState<'review' | 'blocked'>('review')
  const [suspiciousOnly, setSuspiciousOnly] = useState(true)
@@ -22,14 +23,25 @@ export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
  const sessions = sessionsData?.sessions

  useEffect(() => {
-    if (site) setFilterBots(site.filter_bots ?? false)
+    if (site) {
+      setFilterBots(site.filter_bots ?? false)
+      initialFilterRef.current = site.filter_bots ?? false
+    }
  }, [site])

+  // Track dirty state
+  useEffect(() => {
+    if (initialFilterRef.current === null) return
+    onDirtyChange?.(filterBots !== initialFilterRef.current)
+  }, [filterBots, onDirtyChange])
+
  const handleSave = async () => {
    setSaving(true)
    try {
      await updateSite(siteId, { name: site?.name || '', filter_bots: filterBots })
      await mutate()
+      initialFilterRef.current = filterBots
+      onDirtyChange?.(false)
      toast.success('Bot filtering updated')
    } catch {
      toast.error('Failed to save')
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useRouter } from 'next/navigation'
 import { Input, Button, Select, toast, Spinner, getAuthErrorMessage, CheckIcon, ZapIcon } from '@ciphera-net/ui'
 import { useSite } from '@/lib/swr/dashboard'
@@ -28,7 +28,7 @@ const TIMEZONES = [
  { value: 'Australia/Sydney', label: 'Australia/Sydney (AEST)' },
 ]

-export default function SiteGeneralTab({ siteId }: { siteId: string }) {
+export default function SiteGeneralTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
  const router = useRouter()
  const { user } = useAuth()
  const { closeUnifiedSettings: closeSettings } = useUnifiedSettings()
@@ -40,20 +40,31 @@ export default function SiteGeneralTab({ siteId }: { siteId: string }) {
  const [showVerificationModal, setShowVerificationModal] = useState(false)

  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const initialRef = useRef('')

  useEffect(() => {
    if (site) {
      setName(site.name || '')
      setTimezone(site.timezone || 'UTC')
+      initialRef.current = JSON.stringify({ name: site.name || '', timezone: site.timezone || 'UTC' })
    }
  }, [site])

+  // Track dirty state
+  useEffect(() => {
+    if (!initialRef.current) return
+    const current = JSON.stringify({ name, timezone })
+    onDirtyChange?.(current !== initialRef.current)
+  }, [name, timezone, onDirtyChange])
+
  const handleSave = async () => {
    if (!site) return
    setSaving(true)
    try {
      await updateSite(siteId, { name, timezone })
      await mutate()
+      initialRef.current = JSON.stringify({ name, timezone })
+      onDirtyChange?.(false)
      toast.success('Site updated')
    } catch {
      toast.error('Failed to save')
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Button, Select, Toggle, toast, Spinner } from '@ciphera-net/ui'
 import { useSite, useSubscription, usePageSpeedConfig } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
@@ -16,7 +16,7 @@ const GEO_OPTIONS = [
  { value: 'none', label: 'Disabled' },
 ]

-export default function SitePrivacyTab({ siteId }: { siteId: string }) {
+export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
  const { data: site, mutate } = useSite(siteId)
  const { data: subscription, error: subscriptionError, mutate: mutateSubscription } = useSubscription()
  const { data: psiConfig, mutate: mutatePSIConfig } = usePageSpeedConfig(siteId)
@@ -30,6 +30,7 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
  const [excludedPaths, setExcludedPaths] = useState('')
  const [snippetCopied, setSnippetCopied] = useState(false)
  const [saving, setSaving] = useState(false)
+  const initialRef = useRef('')

  useEffect(() => {
    if (site) {
@@ -41,9 +42,26 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
      setHideUnknownLocations(site.hide_unknown_locations ?? false)
      setDataRetention(site.data_retention_months ?? 6)
      setExcludedPaths((site.excluded_paths || []).join('\n'))
+      initialRef.current = JSON.stringify({
+        collectPagePaths: site.collect_page_paths ?? true,
+        collectReferrers: site.collect_referrers ?? true,
+        collectDeviceInfo: site.collect_device_info ?? true,
+        collectScreenRes: site.collect_screen_resolution ?? true,
+        collectGeoData: site.collect_geo_data ?? 'full',
+        hideUnknownLocations: site.hide_unknown_locations ?? false,
+        dataRetention: site.data_retention_months ?? 6,
+        excludedPaths: (site.excluded_paths || []).join('\n'),
+      })
    }
  }, [site])

+  // Track dirty state
+  useEffect(() => {
+    if (!initialRef.current) return
+    const current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths })
+    onDirtyChange?.(current !== initialRef.current)
+  }, [collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, onDirtyChange])
+
  const handleSave = async () => {
    setSaving(true)
    try {
@@ -59,6 +77,8 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
        excluded_paths: excludedPaths.split('\n').map(p => p.trim()).filter(Boolean),
      })
      await mutate()
+      initialRef.current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths })
+      onDirtyChange?.(false)
      toast.success('Privacy settings updated')
    } catch {
      toast.error('Failed to save')
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Button, Input, Toggle, toast, Spinner } from '@ciphera-net/ui'
 import { Copy, CheckCircle, Lock } from '@phosphor-icons/react'
 import { AnimatePresence, motion } from 'framer-motion'
@@ -9,21 +9,31 @@ import { updateSite } from '@/lib/api/sites'

 const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'

-export default function SiteVisibilityTab({ siteId }: { siteId: string }) {
+export default function SiteVisibilityTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
  const { data: site, mutate } = useSite(siteId)
  const [isPublic, setIsPublic] = useState(false)
  const [password, setPassword] = useState('')
  const [passwordEnabled, setPasswordEnabled] = useState(false)
  const [saving, setSaving] = useState(false)
  const [linkCopied, setLinkCopied] = useState(false)
+  const initialRef = useRef('')

  useEffect(() => {
    if (site) {
      setIsPublic(site.is_public ?? false)
      setPasswordEnabled(site.has_password ?? false)
+      initialRef.current = JSON.stringify({ isPublic: site.is_public ?? false, passwordEnabled: site.has_password ?? false })
    }
  }, [site])

+  // Track dirty state
+  useEffect(() => {
+    if (!initialRef.current) return
+    const current = JSON.stringify({ isPublic, passwordEnabled })
+    const dirty = current !== initialRef.current || password.length > 0
+    onDirtyChange?.(dirty)
+  }, [isPublic, passwordEnabled, password, onDirtyChange])
+
  const handleSave = async () => {
    setSaving(true)
    try {
@@ -35,6 +45,8 @@ export default function SiteVisibilityTab({ siteId }: { siteId: string }) {
      })
      setPassword('')
      await mutate()
+      initialRef.current = JSON.stringify({ isPublic, passwordEnabled })
+      onDirtyChange?.(false)
      toast.success('Visibility updated')
    } catch {
      toast.error('Failed to save')