488 lines
18 KiB
TypeScript
488 lines
18 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useCallback, useEffect, useRef } from 'react'
|
|
import dynamic from 'next/dynamic'
|
|
import { AnimatePresence, motion } from 'framer-motion'
|
|
import { X, GearSix, Buildings, User } from '@phosphor-icons/react'
|
|
import { Button, Spinner } from '@ciphera-net/ui'
|
|
import { useUnifiedSettings } from '@/lib/unified-settings-context'
|
|
import { useAuth } from '@/lib/auth/context'
|
|
import { useSite } from '@/lib/swr/dashboard'
|
|
import { listSites, type Site } from '@/lib/api/sites'
|
|
|
|
// Lazy-load tab components — only loaded when the tab is first rendered
|
|
const tabLoader = () => <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
|
|
const SiteGeneralTab = dynamic(() => import('./tabs/SiteGeneralTab'), { loading: tabLoader })
|
|
const SiteGoalsTab = dynamic(() => import('./tabs/SiteGoalsTab'), { loading: tabLoader })
|
|
const SiteVisibilityTab = dynamic(() => import('./tabs/SiteVisibilityTab'), { loading: tabLoader })
|
|
const SitePrivacyTab = dynamic(() => import('./tabs/SitePrivacyTab'), { loading: tabLoader })
|
|
const SiteBotSpamTab = dynamic(() => import('./tabs/SiteBotSpamTab'), { loading: tabLoader })
|
|
const SiteReportsTab = dynamic(() => import('./tabs/SiteReportsTab'), { loading: tabLoader })
|
|
const SiteIntegrationsTab = dynamic(() => import('./tabs/SiteIntegrationsTab'), { loading: tabLoader })
|
|
const WorkspaceGeneralTab = dynamic(() => import('./tabs/WorkspaceGeneralTab'), { loading: tabLoader })
|
|
const WorkspaceBillingTab = dynamic(() => import('./tabs/WorkspaceBillingTab'), { loading: tabLoader })
|
|
const WorkspaceMembersTab = dynamic(() => import('./tabs/WorkspaceMembersTab'), { loading: tabLoader })
|
|
const WorkspaceNotificationsTab = dynamic(() => import('./tabs/WorkspaceNotificationsTab'), { loading: tabLoader })
|
|
const WorkspaceAuditTab = dynamic(() => import('./tabs/WorkspaceAuditTab'), { loading: tabLoader })
|
|
const AccountProfileTab = dynamic(() => import('./tabs/AccountProfileTab'), { loading: tabLoader })
|
|
const AccountSecurityTab = dynamic(() => import('./tabs/AccountSecurityTab'), { loading: tabLoader })
|
|
const AccountDevicesTab = dynamic(() => import('./tabs/AccountDevicesTab'), { loading: tabLoader })
|
|
|
|
// ─── Types ──────────────────────────────────────────────────────
|
|
|
|
type SettingsContext = 'site' | 'workspace' | 'account'
|
|
|
|
interface TabDef {
|
|
id: string
|
|
label: string
|
|
}
|
|
|
|
const SITE_TABS: TabDef[] = [
|
|
{ id: 'general', label: 'General' },
|
|
{ id: 'goals', label: 'Goals' },
|
|
{ id: 'visibility', label: 'Visibility' },
|
|
{ id: 'privacy', label: 'Privacy' },
|
|
{ id: 'bot-spam', label: 'Bot & Spam' },
|
|
{ id: 'reports', label: 'Reports' },
|
|
{ id: 'integrations', label: 'Integrations' },
|
|
]
|
|
|
|
const WORKSPACE_TABS: TabDef[] = [
|
|
{ id: 'general', label: 'General' },
|
|
{ id: 'members', label: 'Members' },
|
|
{ id: 'billing', label: 'Billing' },
|
|
{ id: 'notifications', label: 'Notifications' },
|
|
{ id: 'audit', label: 'Audit Log' },
|
|
]
|
|
|
|
const ACCOUNT_TABS: TabDef[] = [
|
|
{ id: 'profile', label: 'Profile' },
|
|
{ id: 'security', label: 'Security' },
|
|
{ id: 'devices', label: 'Devices' },
|
|
]
|
|
|
|
// ─── Context Switcher ───────────────────────────────────────────
|
|
|
|
function ContextSwitcher({
|
|
active,
|
|
onChange,
|
|
activeSiteDomain,
|
|
}: {
|
|
active: SettingsContext
|
|
onChange: (ctx: SettingsContext) => void
|
|
activeSiteDomain: string | null
|
|
}) {
|
|
return (
|
|
<div className="flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl">
|
|
{/* Site button — locked to current site, no dropdown */}
|
|
{activeSiteDomain && (
|
|
<button
|
|
onClick={() => onChange('site')}
|
|
className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
|
|
active === 'site'
|
|
? 'bg-neutral-700 text-white shadow-sm'
|
|
: 'text-neutral-400 hover:text-white'
|
|
}`}
|
|
>
|
|
<GearSix weight="bold" className="w-4 h-4" />
|
|
<span className="hidden sm:inline">{activeSiteDomain}</span>
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => onChange('workspace')}
|
|
className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
|
|
active === 'workspace'
|
|
? 'bg-neutral-700 text-white shadow-sm'
|
|
: 'text-neutral-400 hover:text-white'
|
|
}`}
|
|
>
|
|
<Buildings weight="bold" className="w-4 h-4" />
|
|
<span className="hidden sm:inline">Organization</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => onChange('account')}
|
|
className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
|
|
active === 'account'
|
|
? 'bg-neutral-700 text-white shadow-sm'
|
|
: 'text-neutral-400 hover:text-white'
|
|
}`}
|
|
>
|
|
<User weight="bold" className="w-4 h-4" />
|
|
<span className="hidden sm:inline">Account</span>
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Tab Bar ────────────────────────────────────────────────────
|
|
|
|
function TabBar({
|
|
tabs,
|
|
activeTab,
|
|
onChange,
|
|
}: {
|
|
tabs: TabDef[]
|
|
activeTab: string
|
|
onChange: (id: string) => void
|
|
}) {
|
|
return (
|
|
<div className="flex gap-1 overflow-x-auto overflow-y-hidden scrollbar-hide pb-px">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => onChange(tab.id)}
|
|
className={`relative px-3 py-2 text-sm font-medium whitespace-nowrap rounded-lg transition-all duration-200 ${
|
|
activeTab === tab.id
|
|
? 'text-brand-orange'
|
|
: 'text-neutral-500 hover:text-neutral-300'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
{activeTab === tab.id && (
|
|
<motion.div
|
|
layoutId="settings-tab-indicator"
|
|
className="absolute bottom-0 left-2 right-2 h-0.5 bg-brand-orange rounded-full"
|
|
transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
|
|
/>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Tab Content ────────────────────────────────────────────────
|
|
|
|
function ComingSoon({ label }: { label: string }) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-16 text-center">
|
|
<div className="rounded-full bg-neutral-800 p-4 mb-4">
|
|
<GearSix className="w-8 h-8 text-neutral-500" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-white mb-1">{label}</h3>
|
|
<p className="text-sm text-neutral-400 max-w-sm">
|
|
This section is being migrated. For now, use the existing settings page.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TabContent({
|
|
context,
|
|
activeTab,
|
|
siteId,
|
|
onDirtyChange,
|
|
onRegisterSave,
|
|
}: {
|
|
context: SettingsContext
|
|
activeTab: string
|
|
siteId: string | null
|
|
onDirtyChange: (dirty: boolean) => void
|
|
onRegisterSave: (fn: () => Promise<void>) => void
|
|
}) {
|
|
const dirtyProps = { onDirtyChange, onRegisterSave }
|
|
// Site tabs
|
|
if (context === 'site' && siteId) {
|
|
switch (activeTab) {
|
|
case 'general': return <SiteGeneralTab siteId={siteId} {...dirtyProps} />
|
|
case 'goals': return <SiteGoalsTab siteId={siteId} />
|
|
case 'visibility': return <SiteVisibilityTab siteId={siteId} {...dirtyProps} />
|
|
case 'privacy': return <SitePrivacyTab siteId={siteId} {...dirtyProps} />
|
|
case 'bot-spam': return <SiteBotSpamTab siteId={siteId} {...dirtyProps} />
|
|
case 'reports': return <SiteReportsTab siteId={siteId} />
|
|
case 'integrations': return <SiteIntegrationsTab siteId={siteId} />
|
|
}
|
|
}
|
|
|
|
// Workspace tabs
|
|
if (context === 'workspace') {
|
|
switch (activeTab) {
|
|
case 'general': return <WorkspaceGeneralTab {...dirtyProps} />
|
|
case 'billing': return <WorkspaceBillingTab />
|
|
case 'members': return <WorkspaceMembersTab />
|
|
case 'notifications': return <WorkspaceNotificationsTab {...dirtyProps} />
|
|
case 'audit': return <WorkspaceAuditTab />
|
|
}
|
|
}
|
|
|
|
// Account tabs
|
|
if (context === 'account') {
|
|
switch (activeTab) {
|
|
case 'profile': return <AccountProfileTab {...dirtyProps} />
|
|
case 'security': return <AccountSecurityTab />
|
|
case 'devices': return <AccountDevicesTab />
|
|
}
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
// ─── Main Modal ─────────────────────────────────────────────────
|
|
|
|
export default function UnifiedSettingsModal() {
|
|
const { isOpen, openUnifiedSettings, closeUnifiedSettings: closeSettings, initialTab: initTab } = useUnifiedSettings()
|
|
const { user } = useAuth()
|
|
|
|
const [context, setContext] = useState<SettingsContext>('site')
|
|
const [siteTabs, setSiteTabs] = useState('general')
|
|
const [workspaceTabs, setWorkspaceTabs] = useState('general')
|
|
const [accountTabs, setAccountTabs] = useState('profile')
|
|
|
|
const [sites, setSites] = useState<Site[]>([])
|
|
const [activeSiteId, setActiveSiteId] = useState<string | null>(null)
|
|
|
|
// ─── Dirty state & pending navigation ────────────────────────
|
|
const isDirtyRef = useRef(false)
|
|
const [isDirtyVisible, setIsDirtyVisible] = useState(false)
|
|
const pendingActionRef = useRef<(() => void) | null>(null)
|
|
const [hasPendingAction, setHasPendingAction] = useState(false)
|
|
const saveHandlerRef = useRef<(() => Promise<void>) | null>(null)
|
|
const [saving, setSaving] = useState(false)
|
|
const [showGlass, setShowGlass] = useState(false)
|
|
|
|
const handleDirtyChange = useCallback((dirty: boolean) => {
|
|
isDirtyRef.current = dirty
|
|
setIsDirtyVisible(dirty)
|
|
// If user saved and there was a pending action, execute it
|
|
if (!dirty && pendingActionRef.current) {
|
|
const action = pendingActionRef.current
|
|
pendingActionRef.current = null
|
|
setHasPendingAction(false)
|
|
action()
|
|
}
|
|
}, [])
|
|
|
|
const handleRegisterSave = useCallback((fn: () => Promise<void>) => {
|
|
saveHandlerRef.current = fn
|
|
}, [])
|
|
|
|
const handleSaveFromBar = useCallback(async () => {
|
|
if (!saveHandlerRef.current) return
|
|
setSaving(true)
|
|
try {
|
|
await saveHandlerRef.current()
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}, [])
|
|
|
|
/** Run action if clean, or store as pending if dirty */
|
|
const guardedAction = useCallback((action: () => void) => {
|
|
if (isDirtyRef.current) {
|
|
pendingActionRef.current = action
|
|
setHasPendingAction(true)
|
|
} else {
|
|
action()
|
|
}
|
|
}, [])
|
|
|
|
const handleDiscard = useCallback(() => {
|
|
isDirtyRef.current = false
|
|
setIsDirtyVisible(false)
|
|
setHasPendingAction(false)
|
|
saveHandlerRef.current = null
|
|
const action = pendingActionRef.current
|
|
pendingActionRef.current = null
|
|
action?.()
|
|
}, [])
|
|
|
|
// Apply initial tab when modal opens
|
|
useEffect(() => {
|
|
if (isOpen && initTab) {
|
|
if (initTab.context) setContext(initTab.context)
|
|
if (initTab.tab) {
|
|
if (initTab.context === 'site') setSiteTabs(initTab.tab)
|
|
else if (initTab.context === 'workspace') setWorkspaceTabs(initTab.tab)
|
|
else if (initTab.context === 'account') setAccountTabs(initTab.tab)
|
|
}
|
|
}
|
|
}, [isOpen, initTab])
|
|
|
|
// Reset dirty state when modal opens
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
isDirtyRef.current = false
|
|
pendingActionRef.current = null
|
|
setHasPendingAction(false)
|
|
setShowGlass(true)
|
|
}
|
|
}, [isOpen])
|
|
|
|
// Detect site from URL and load sites list when modal opens
|
|
useEffect(() => {
|
|
if (!isOpen || !user?.org_id) return
|
|
|
|
if (typeof window !== 'undefined') {
|
|
const match = window.location.pathname.match(/\/sites\/([a-f0-9-]+)/)
|
|
if (match) {
|
|
setActiveSiteId(match[1])
|
|
// Only default to site context if no specific context was requested
|
|
if (!initTab?.context) setContext('site')
|
|
} else {
|
|
setActiveSiteId(null)
|
|
if (!initTab?.context) setContext('workspace')
|
|
}
|
|
}
|
|
|
|
// Only fetch sites if we don't have them yet
|
|
if (sites.length === 0) {
|
|
listSites().then(data => {
|
|
setSites(Array.isArray(data) ? data : [])
|
|
}).catch(() => {})
|
|
}
|
|
}, [isOpen, user?.org_id])
|
|
|
|
// Global keyboard shortcuts: `,` toggles settings, Escape closes
|
|
useEffect(() => {
|
|
const handler = (e: KeyboardEvent) => {
|
|
const tag = (e.target as HTMLElement)?.tagName
|
|
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
|
|
|
|
if (e.key === ',' && !e.metaKey && !e.ctrlKey && !e.altKey) {
|
|
e.preventDefault()
|
|
if (isOpen) guardedAction(closeSettings)
|
|
else openUnifiedSettings()
|
|
}
|
|
if (e.key === 'Escape' && isOpen) {
|
|
guardedAction(closeSettings)
|
|
}
|
|
}
|
|
window.addEventListener('keydown', handler)
|
|
return () => window.removeEventListener('keydown', handler)
|
|
}, [isOpen, openUnifiedSettings, closeSettings, guardedAction])
|
|
|
|
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) => {
|
|
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 (
|
|
<>
|
|
{/* Backdrop — fades in/out */}
|
|
<div
|
|
className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-200 ${
|
|
isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
|
|
}`}
|
|
onClick={handleBackdropClick}
|
|
/>
|
|
|
|
{/* Glass panel — always mounted, fades out on close */}
|
|
<div
|
|
className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${
|
|
isOpen
|
|
? 'opacity-100 pointer-events-auto transition-opacity duration-150'
|
|
: showGlass
|
|
? 'opacity-0 pointer-events-none transition-opacity duration-150'
|
|
: 'opacity-0 pointer-events-none invisible'
|
|
}`}
|
|
onClick={handleBackdropClick}
|
|
>
|
|
<div
|
|
className="relative w-full max-w-4xl h-[90vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
{/* Content animates in/out */}
|
|
<AnimatePresence onExitComplete={() => setShowGlass(false)}>
|
|
{isOpen && (
|
|
<motion.div
|
|
className="flex flex-col h-full"
|
|
initial={{ opacity: 0, scale: 0.98 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.98 }}
|
|
transition={{ duration: 0.15 }}
|
|
>
|
|
{/* Header */}
|
|
<div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-white">Settings</h2>
|
|
<button
|
|
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" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Context Switcher */}
|
|
<ContextSwitcher
|
|
active={context}
|
|
onChange={handleContextChange}
|
|
activeSiteDomain={sites.find(s => s.id === activeSiteId)?.domain ?? null}
|
|
/>
|
|
|
|
{/* Tabs */}
|
|
<div className="mt-4">
|
|
<TabBar tabs={tabs} activeTab={activeTab} onChange={handleTabChange} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto overflow-x-hidden">
|
|
<div key={`${context}-${activeTab}`} className="p-6">
|
|
<TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save bar */}
|
|
<AnimatePresence>
|
|
{isDirtyVisible && (
|
|
<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={`px-6 py-3 border-t flex items-center justify-between ${
|
|
hasPendingAction
|
|
? 'bg-red-900/10 border-red-900/30'
|
|
: 'bg-neutral-950/80 border-white/[0.06]'
|
|
}`}>
|
|
<span className="text-sm font-medium text-neutral-400">
|
|
{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
{hasPendingAction && (
|
|
<Button onClick={handleDiscard} variant="secondary" className="text-sm">
|
|
Discard
|
|
</Button>
|
|
)}
|
|
<Button onClick={handleSaveFromBar} variant="primary" disabled={saving} className="text-sm">
|
|
{saving ? 'Saving...' : 'Save Changes'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|