From 48cf9a1f62bc0c474c2fa30f85303b4fe6ba4f27 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 5 Mar 2026 22:16:36 +0100
Subject: [PATCH] feat: replace settings page with SettingsModal

- Add SettingsModalProvider context and SettingsModalWrapper
- Wire Header onOpenSettings callback via LayoutInner pattern
- Remove old /settings page and SettingsPageClient
- Bump @ciphera-net/ui to ^0.0.88
---
 app/layout-content.tsx                       |  25 +-
 app/settings/SettingsPageClient.tsx          | 532 -------------------
 app/settings/page.tsx                        |  14 -
 components/settings/SettingsModalWrapper.tsx | 186 +++++++
 lib/settings-modal-context.tsx               |  31 ++
 package-lock.json                            |   8 +-
 package.json                                 |   2 +-
 7 files changed, 241 insertions(+), 557 deletions(-)
 delete mode 100644 app/settings/SettingsPageClient.tsx
 delete mode 100644 app/settings/page.tsx
 create mode 100644 components/settings/SettingsModalWrapper.tsx
 create mode 100644 lib/settings-modal-context.tsx

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 8ef4acd..e5f2caa 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -13,6 +13,8 @@ import { getUserOrganizations, switchContext, type OrganizationMember } from '@/
 import { setSessionAction } from '@/app/actions/auth'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
+import { SettingsModalProvider, useSettingsModal } from '@/lib/settings-modal-context'
+import SettingsModalWrapper from '@/components/settings/SettingsModalWrapper'
 
 const ORG_SWITCH_KEY = 'pulse_switching_org'
 
@@ -44,10 +46,11 @@ const CIPHERA_APPS: CipheraApp[] = [
   },
 ]
 
-export default function LayoutContent({ children }: { children: React.ReactNode }) {
+function LayoutInner({ children }: { children: React.ReactNode }) {
   const auth = useAuth()
   const router = useRouter()
   const isOnline = useOnlineStatus()
+  const { openSettings } = useSettingsModal()
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [isSwitchingOrg, setIsSwitchingOrg] = useState(() => {
     if (typeof window === 'undefined') return false
@@ -87,7 +90,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
   const handleCreateOrganization = () => {
     router.push('/onboarding')
   }
-  
+
   const showOfflineBar = Boolean(auth.user && !isOnline);
   const barHeightRem = 2.5;
   const headerHeightRem = 6;
@@ -100,9 +103,9 @@ export default function LayoutContent({ children }: { children: React.ReactNode
   return (
     <>
       {auth.user && <OfflineBanner isOnline={isOnline} />}
-      <Header 
-        auth={auth} 
-        LinkComponent={Link} 
+      <Header
+        auth={auth}
+        LinkComponent={Link}
         logoSrc="/pulse_icon_no_margins.png"
         appName="Pulse"
         orgs={orgs}
@@ -117,6 +120,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
         rightSideActions={auth.user ? <NotificationCenter /> : null}
         apps={CIPHERA_APPS}
         currentAppId="pulse"
+        onOpenSettings={openSettings}
         customNavItems={
           <>
             {!auth.user && (
@@ -136,11 +140,20 @@ export default function LayoutContent({ children }: { children: React.ReactNode
       >
         {children}
       </main>
-      <Footer 
+      <Footer
         LinkComponent={Link}
         appName="Pulse"
         isAuthenticated={!!auth.user}
       />
+      <SettingsModalWrapper />
     </>
   )
 }
+
+export default function LayoutContent({ children }: { children: React.ReactNode }) {
+  return (
+    <SettingsModalProvider>
+      <LayoutInner>{children}</LayoutInner>
+    </SettingsModalProvider>
+  )
+}
diff --git a/app/settings/SettingsPageClient.tsx b/app/settings/SettingsPageClient.tsx
deleted file mode 100644
index 5cb7464..0000000
--- a/app/settings/SettingsPageClient.tsx
+++ /dev/null
@@ -1,532 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import Link from 'next/link'
-import { useAuth } from '@/lib/auth/context'
-import ProfileSettings from '@/components/settings/ProfileSettings'
-import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
-import SecurityActivityCard from '@/components/settings/SecurityActivityCard'
-import { updateUserPreferences } from '@/lib/api/user'
-import { motion, AnimatePresence } from 'framer-motion'
-import {
-  UserIcon,
-  LockIcon,
-  BoxIcon,
-  ChevronRightIcon,
-  ChevronDownIcon,
-  ExternalLinkIcon,
-} from '@ciphera-net/ui'
-
-// Inline SVG icons not available in ciphera-ui
-function BellIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
-      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
-    </svg>
-  )
-}
-
-// --- Types ---
-
-type ProfileSubTab = 'profile' | 'security' | 'preferences'
-type NotificationSubTab = 'security' | 'center'
-
-type ActiveSelection =
-  | { section: 'profile'; subTab: ProfileSubTab }
-  | { section: 'notifications'; subTab: NotificationSubTab }
-  | { section: 'account' }
-  | { section: 'devices' }
-  | { section: 'activity' }
-
-type ExpandableSection = 'profile' | 'notifications' | 'account'
-
-// --- Sidebar Components ---
-
-function SectionHeader({
-  expanded,
-  active,
-  onToggle,
-  icon: Icon,
-  label,
-  description,
-  hasChildren = true,
-}: {
-  expanded: boolean
-  active: boolean
-  onToggle: () => void
-  icon: React.ElementType
-  label: string
-  description?: string
-  hasChildren?: boolean
-}) {
-  return (
-    <button
-      onClick={onToggle}
-      className={`w-full flex items-start gap-3 px-4 py-3 text-left rounded-xl transition-all duration-200 ${
-        active
-          ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-      }`}
-    >
-      <Icon className="w-5 h-5 mt-0.5 shrink-0" />
-      <div className="flex-1 min-w-0">
-        <span className="font-medium">{label}</span>
-        {description && (
-          <p className={`text-xs mt-0.5 ${active ? 'text-brand-orange/70' : 'text-neutral-500'}`}>
-            {description}
-          </p>
-        )}
-      </div>
-      {hasChildren ? (
-        <ChevronDownIcon
-          className={`w-4 h-4 shrink-0 mt-1 transition-transform duration-200 ${
-            expanded ? '' : '-rotate-90'
-          }`}
-        />
-      ) : (
-        <ChevronRightIcon className={`w-4 h-4 shrink-0 mt-1 transition-transform ${active ? 'rotate-90' : ''}`} />
-      )}
-    </button>
-  )
-}
-
-function SubItem({
-  active,
-  onClick,
-  label,
-  external = false,
-}: {
-  active: boolean
-  onClick: () => void
-  label: string
-  external?: boolean
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className={`w-full flex items-center gap-2.5 pl-12 pr-4 py-2 text-sm text-left rounded-lg transition-all duration-150 ${
-        active
-          ? 'text-brand-orange font-medium bg-brand-orange/5'
-          : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-50 dark:hover:bg-neutral-800/50'
-      }`}
-    >
-      <span className="flex-1">{label}</span>
-      {external && <ExternalLinkIcon className="w-3 h-3 opacity-60" />}
-    </button>
-  )
-}
-
-function ExpandableSubItems({ expanded, children }: { expanded: boolean; children: React.ReactNode }) {
-  return (
-    <AnimatePresence initial={false}>
-      {expanded && (
-        <motion.div
-          initial={{ height: 0, opacity: 0 }}
-          animate={{ height: 'auto', opacity: 1 }}
-          exit={{ height: 0, opacity: 0 }}
-          transition={{ duration: 0.2, ease: 'easeInOut' }}
-          className="overflow-hidden"
-        >
-          <div className="py-1 space-y-0.5">
-            {children}
-          </div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-}
-
-// --- Content Components ---
-
-// Security Alerts Card (granular security toggles)
-const SECURITY_ALERT_OPTIONS = [
-  { key: 'login_alerts', label: 'Login Activity', description: 'New device sign-ins and suspicious login attempts.' },
-  { key: 'password_alerts', label: 'Password Changes', description: 'Password changes and session revocations.' },
-  { key: 'two_factor_alerts', label: 'Two-Factor Authentication', description: '2FA enabled/disabled and recovery code changes.' },
-]
-
-function SecurityAlertsCard() {
-  const { user } = useAuth()
-  const [emailNotifications, setEmailNotifications] = useState<Record<string, boolean>>({})
-
-  useEffect(() => {
-    if (user?.preferences?.email_notifications) {
-      setEmailNotifications(user.preferences.email_notifications)
-    } else {
-      const defaults = SECURITY_ALERT_OPTIONS.reduce((acc, option) => ({
-        ...acc,
-        [option.key]: true
-      }), {} as Record<string, boolean>)
-      setEmailNotifications(defaults)
-    }
-  }, [user])
-
-  const handleToggle = async (key: string) => {
-    const newState = {
-      ...emailNotifications,
-      [key]: !emailNotifications[key]
-    }
-    setEmailNotifications(newState)
-    try {
-      await updateUserPreferences({
-        email_notifications: newState as { new_file_received: boolean; file_downloaded: boolean; login_alerts: boolean; password_alerts: boolean; two_factor_alerts: boolean }
-      })
-    } catch {
-      setEmailNotifications(prev => ({
-        ...prev,
-        [key]: !prev[key]
-      }))
-    }
-  }
-
-  return (
-    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 shadow-sm">
-      <div className="flex items-center gap-3 mb-6">
-        <div className="p-2 rounded-lg bg-brand-orange/10">
-          <BellIcon className="w-5 h-5 text-brand-orange" />
-        </div>
-        <div>
-          <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Security Alerts</h2>
-          <p className="text-sm text-neutral-500">Choose which security events trigger email alerts</p>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        {SECURITY_ALERT_OPTIONS.map((item) => (
-          <div
-            key={item.key}
-            className={`flex items-center justify-between p-4 border rounded-xl transition-all duration-200 ${
-              emailNotifications[item.key]
-                ? 'bg-orange-50 dark:bg-brand-orange/10 border-brand-orange shadow-sm'
-                : 'bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800'
-            }`}
-          >
-            <div className="space-y-0.5">
-              <span className={`block text-sm font-medium transition-colors duration-200 ${
-                emailNotifications[item.key] ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'
-              }`}>
-                {item.label}
-              </span>
-              <span className={`block text-xs transition-colors duration-200 ${
-                emailNotifications[item.key] ? 'text-brand-orange/80' : 'text-neutral-500 dark:text-neutral-400'
-              }`}>
-                {item.description}
-              </span>
-            </div>
-            <button
-              onClick={() => handleToggle(item.key)}
-              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                emailNotifications[item.key] ? 'bg-brand-orange' : 'bg-neutral-200 dark:bg-neutral-700'
-              }`}
-            >
-              <span
-                className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-                  emailNotifications[item.key] ? 'translate-x-5' : 'translate-x-0'
-                }`}
-              />
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function AccountManagementCard() {
-  const accountLinks = [
-    {
-      label: 'Profile & Personal Info',
-      description: 'Update your name, email, and avatar',
-      href: 'https://auth.ciphera.net/settings',
-      icon: UserIcon,
-    },
-    {
-      label: 'Security & 2FA',
-      description: 'Password, two-factor authentication, and passkeys',
-      href: 'https://auth.ciphera.net/settings?tab=security',
-      icon: LockIcon,
-    },
-    {
-      label: 'Active Sessions',
-      description: 'Manage devices logged into your account',
-      href: 'https://auth.ciphera.net/settings?tab=sessions',
-      icon: BoxIcon,
-    },
-  ]
-
-  return (
-    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 shadow-sm">
-      <div className="flex items-center gap-3 mb-6">
-        <div className="p-2 rounded-lg bg-brand-orange/10">
-          <UserIcon className="w-5 h-5 text-brand-orange" />
-        </div>
-        <div>
-          <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Ciphera Account</h2>
-          <p className="text-sm text-neutral-500">Manage your account across all Ciphera products</p>
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        {accountLinks.map((link) => (
-          <a
-            key={link.label}
-            href={link.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-start gap-3 p-3 rounded-xl border border-neutral-200 dark:border-neutral-800 hover:border-brand-orange/30 hover:bg-brand-orange/5 transition-all group"
-          >
-            <link.icon className="w-5 h-5 text-neutral-400 group-hover:text-brand-orange shrink-0 mt-0.5" />
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2">
-                <span className="font-medium text-neutral-900 dark:text-white group-hover:text-brand-orange">
-                  {link.label}
-                </span>
-                <ExternalLinkIcon className="w-3.5 h-3.5 text-neutral-400" />
-              </div>
-              <p className="text-sm text-neutral-500 mt-0.5">{link.description}</p>
-            </div>
-            <ChevronRightIcon className="w-4 h-4 text-neutral-400 shrink-0 mt-1" />
-          </a>
-        ))}
-      </div>
-
-      <div className="mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800">
-        <p className="text-xs text-neutral-500">
-          These settings apply to your Ciphera Account and affect all products (Drop, Pulse, and Auth).
-        </p>
-      </div>
-    </div>
-  )
-}
-
-// --- Main Settings Section ---
-
-function AppSettingsSection() {
-  const [active, setActive] = useState<ActiveSelection>({ section: 'profile', subTab: 'profile' })
-  const [expanded, setExpanded] = useState<Set<ExpandableSection>>(new Set(['profile']))
-
-  const toggleSection = (section: ExpandableSection) => {
-    setExpanded(prev => {
-      const next = new Set(prev)
-      if (next.has(section)) {
-        next.delete(section)
-      } else {
-        next.add(section)
-      }
-      return next
-    })
-  }
-
-  const selectSubTab = (selection: ActiveSelection) => {
-    setActive(selection)
-    if ('subTab' in selection) {
-      setExpanded(prev => new Set(prev).add(selection.section as ExpandableSection))
-    }
-  }
-
-  const renderContent = () => {
-    switch (active.section) {
-      case 'profile':
-        return <ProfileSettings activeTab={active.subTab} />
-      case 'notifications':
-        if (active.subTab === 'security') return <SecurityAlertsCard />
-        if (active.subTab === 'center') return (
-          <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-8 shadow-sm">
-            <div className="text-center max-w-md mx-auto">
-              <BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notification Center</h3>
-              <p className="text-sm text-neutral-500 mb-4">
-                View and manage all your notifications in one place.
-              </p>
-              <Link
-                href="/notifications"
-                className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors"
-              >
-                Open Notification Center
-                <ChevronRightIcon className="w-4 h-4" />
-              </Link>
-            </div>
-          </div>
-        )
-        return null
-      case 'account':
-        return <AccountManagementCard />
-      case 'devices':
-        return <TrustedDevicesCard />
-      case 'activity':
-        return <SecurityActivityCard />
-      default:
-        return null
-    }
-  }
-
-  return (
-    <div className="flex flex-col lg:flex-row gap-8">
-      {/* Sidebar Navigation */}
-      <nav className="w-full lg:w-72 flex-shrink-0 space-y-6">
-        {/* Pulse Settings Section */}
-        <div>
-          <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3 px-4">
-            Pulse Settings
-          </h3>
-          <div className="space-y-1">
-            <div>
-              <SectionHeader
-                expanded={expanded.has('profile')}
-                active={active.section === 'profile'}
-                onToggle={() => {
-                  toggleSection('profile')
-                  if (!expanded.has('profile')) {
-                    selectSubTab({ section: 'profile', subTab: 'profile' })
-                  }
-                }}
-                icon={UserIcon}
-                label="Profile & Preferences"
-                description="Your profile and sharing defaults"
-              />
-              <ExpandableSubItems expanded={expanded.has('profile')}>
-                <SubItem
-                  active={active.section === 'profile' && active.subTab === 'profile'}
-                  onClick={() => selectSubTab({ section: 'profile', subTab: 'profile' })}
-                  label="Profile"
-                />
-                <SubItem
-                  active={active.section === 'profile' && active.subTab === 'security'}
-                  onClick={() => selectSubTab({ section: 'profile', subTab: 'security' })}
-                  label="Security"
-                />
-                <SubItem
-                  active={active.section === 'profile' && active.subTab === 'preferences'}
-                  onClick={() => selectSubTab({ section: 'profile', subTab: 'preferences' })}
-                  label="Preferences"
-                />
-              </ExpandableSubItems>
-            </div>
-
-            {/* Notifications (expandable) */}
-            <div>
-              <SectionHeader
-                expanded={expanded.has('notifications')}
-                active={active.section === 'notifications'}
-                onToggle={() => {
-                  toggleSection('notifications')
-                  if (!expanded.has('notifications')) {
-                    selectSubTab({ section: 'notifications', subTab: 'security' })
-                  }
-                }}
-                icon={BellIcon}
-                label="Notifications"
-                description="Email and in-app notifications"
-              />
-              <ExpandableSubItems expanded={expanded.has('notifications')}>
-                <SubItem
-                  active={active.section === 'notifications' && active.subTab === 'security'}
-                  onClick={() => selectSubTab({ section: 'notifications', subTab: 'security' })}
-                  label="Security Alerts"
-                />
-                <SubItem
-                  active={active.section === 'notifications' && active.subTab === 'center'}
-                  onClick={() => selectSubTab({ section: 'notifications', subTab: 'center' })}
-                  label="Notification Center"
-                />
-              </ExpandableSubItems>
-            </div>
-          </div>
-        </div>
-
-        {/* Ciphera Account Section */}
-        <div className="pt-4 border-t border-neutral-200 dark:border-neutral-800">
-          <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3 px-4">
-            Ciphera Account
-          </h3>
-          <div>
-            <SectionHeader
-              expanded={expanded.has('account')}
-              active={active.section === 'account' || active.section === 'devices' || active.section === 'activity'}
-              onToggle={() => {
-                toggleSection('account')
-                if (!expanded.has('account')) {
-                  setActive({ section: 'account' })
-                }
-              }}
-              icon={LockIcon}
-              label="Manage Account"
-              description="Security, 2FA, and sessions"
-            />
-            <ExpandableSubItems expanded={expanded.has('account')}>
-              <SubItem
-                active={false}
-                onClick={() => window.open('https://auth.ciphera.net/settings', '_blank')}
-                label="Profile & Personal Info"
-                external
-              />
-              <SubItem
-                active={false}
-                onClick={() => window.open('https://auth.ciphera.net/settings?tab=security', '_blank')}
-                label="Security & 2FA"
-                external
-              />
-              <SubItem
-                active={false}
-                onClick={() => window.open('https://auth.ciphera.net/settings?tab=sessions', '_blank')}
-                label="Active Sessions"
-                external
-              />
-              <SubItem
-                active={active.section === 'devices'}
-                onClick={() => setActive({ section: 'devices' })}
-                label="Trusted Devices"
-              />
-              <SubItem
-                active={active.section === 'activity'}
-                onClick={() => setActive({ section: 'activity' })}
-                label="Security Activity"
-              />
-            </ExpandableSubItems>
-          </div>
-        </div>
-      </nav>
-
-      {/* Content Area */}
-      <div className="flex-1 min-w-0">
-        {renderContent()}
-      </div>
-    </div>
-  )
-}
-
-export default function SettingsPageClient() {
-  const { user } = useAuth()
-
-  return (
-    <div className="space-y-8">
-      {/* Page Header */}
-      <div>
-        <h1 className="text-3xl font-bold text-neutral-900 dark:text-white">Settings</h1>
-        <p className="mt-2 text-neutral-600 dark:text-neutral-400">
-          Manage your Pulse preferences and Ciphera account settings
-        </p>
-      </div>
-
-      {/* Breadcrumb / Context */}
-      <div className="flex items-center gap-2 text-sm text-neutral-500">
-        <span>You are signed in as</span>
-        <span className="font-medium text-neutral-900 dark:text-white">{user?.email}</span>
-        <span>&bull;</span>
-        <a
-          href="https://auth.ciphera.net/settings"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-brand-orange hover:underline inline-flex items-center gap-1"
-        >
-          Manage in Ciphera Account
-          <ExternalLinkIcon className="w-3 h-3" />
-        </a>
-      </div>
-
-      {/* Settings Content */}
-      <AppSettingsSection />
-    </div>
-  )
-}
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
deleted file mode 100644
index 334828c..0000000
--- a/app/settings/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import SettingsPageClient from './SettingsPageClient'
-
-export const metadata = {
-  title: 'Settings - Pulse',
-  description: 'Manage your account settings',
-}
-
-export default function SettingsPage() {
-  return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
-      <SettingsPageClient />
-    </div>
-  )
-}
diff --git a/components/settings/SettingsModalWrapper.tsx b/components/settings/SettingsModalWrapper.tsx
new file mode 100644
index 0000000..5b37916
--- /dev/null
+++ b/components/settings/SettingsModalWrapper.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { SettingsModal, type SettingsSection } from '@ciphera-net/ui'
+import { UserIcon, LockIcon, ChevronRightIcon } from '@ciphera-net/ui'
+import ProfileSettings from '@/components/settings/ProfileSettings'
+import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
+import SecurityActivityCard from '@/components/settings/SecurityActivityCard'
+import { useSettingsModal } from '@/lib/settings-modal-context'
+import { useAuth } from '@/lib/auth/context'
+import { updateUserPreferences } from '@/lib/api/user'
+
+// Inline SVG icons not available in ciphera-ui
+function BellIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+    </svg>
+  )
+}
+
+// --- Security Alerts ---
+
+const SECURITY_ALERT_OPTIONS = [
+  { key: 'login_alerts', label: 'Login Activity', description: 'New device sign-ins and suspicious login attempts.' },
+  { key: 'password_alerts', label: 'Password Changes', description: 'Password changes and session revocations.' },
+  { key: 'two_factor_alerts', label: 'Two-Factor Authentication', description: '2FA enabled/disabled and recovery code changes.' },
+]
+
+function SecurityAlertsCard() {
+  const { user } = useAuth()
+  const [emailNotifications, setEmailNotifications] = useState<Record<string, boolean>>({})
+
+  useEffect(() => {
+    if (user?.preferences?.email_notifications) {
+      setEmailNotifications(user.preferences.email_notifications)
+    } else {
+      const defaults = SECURITY_ALERT_OPTIONS.reduce((acc, option) => ({
+        ...acc,
+        [option.key]: true
+      }), {} as Record<string, boolean>)
+      setEmailNotifications(defaults)
+    }
+  }, [user])
+
+  const handleToggle = async (key: string) => {
+    const newState = {
+      ...emailNotifications,
+      [key]: !emailNotifications[key]
+    }
+    setEmailNotifications(newState)
+    try {
+      await updateUserPreferences({
+        email_notifications: newState as { new_file_received: boolean; file_downloaded: boolean; login_alerts: boolean; password_alerts: boolean; two_factor_alerts: boolean }
+      })
+    } catch {
+      setEmailNotifications(prev => ({
+        ...prev,
+        [key]: !prev[key]
+      }))
+    }
+  }
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 shadow-sm">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="p-2 rounded-lg bg-brand-orange/10">
+          <BellIcon className="w-5 h-5 text-brand-orange" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Security Alerts</h2>
+          <p className="text-sm text-neutral-500">Choose which security events trigger email alerts</p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {SECURITY_ALERT_OPTIONS.map((item) => (
+          <div
+            key={item.key}
+            className={`flex items-center justify-between p-4 border rounded-xl transition-all duration-200 ${
+              emailNotifications[item.key]
+                ? 'bg-orange-50 dark:bg-brand-orange/10 border-brand-orange shadow-sm'
+                : 'bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800'
+            }`}
+          >
+            <div className="space-y-0.5">
+              <span className={`block text-sm font-medium transition-colors duration-200 ${
+                emailNotifications[item.key] ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'
+              }`}>
+                {item.label}
+              </span>
+              <span className={`block text-xs transition-colors duration-200 ${
+                emailNotifications[item.key] ? 'text-brand-orange/80' : 'text-neutral-500 dark:text-neutral-400'
+              }`}>
+                {item.description}
+              </span>
+            </div>
+            <button
+              onClick={() => handleToggle(item.key)}
+              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                emailNotifications[item.key] ? 'bg-brand-orange' : 'bg-neutral-200 dark:bg-neutral-700'
+              }`}
+            >
+              <span
+                className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                  emailNotifications[item.key] ? 'translate-x-5' : 'translate-x-0'
+                }`}
+              />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// --- Notification Center Placeholder ---
+
+function NotificationCenterPlaceholder() {
+  return (
+    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-8 shadow-sm">
+      <div className="text-center max-w-md mx-auto">
+        <BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
+        <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notification Center</h3>
+        <p className="text-sm text-neutral-500 mb-4">
+          View and manage all your notifications in one place.
+        </p>
+        <Link
+          href="/notifications"
+          className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors"
+        >
+          Open Notification Center
+          <ChevronRightIcon className="w-4 h-4" />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+// --- Main Wrapper ---
+
+export default function SettingsModalWrapper() {
+  const { isOpen, closeSettings } = useSettingsModal()
+
+  const sections: SettingsSection[] = [
+    {
+      id: 'pulse',
+      label: 'Pulse Settings',
+      description: 'Profile and preferences',
+      icon: UserIcon,
+      defaultExpanded: true,
+      items: [
+        { id: 'profile', label: 'Profile', content: <ProfileSettings activeTab="profile" /> },
+        { id: 'security', label: 'Security', content: <ProfileSettings activeTab="security" /> },
+        { id: 'preferences', label: 'Preferences', content: <ProfileSettings activeTab="preferences" /> },
+      ],
+    },
+    {
+      id: 'notifications',
+      label: 'Notifications',
+      description: 'Email and in-app notifications',
+      icon: BellIcon,
+      items: [
+        { id: 'security-alerts', label: 'Security Alerts', content: <SecurityAlertsCard /> },
+        { id: 'center', label: 'Notification Center', content: <NotificationCenterPlaceholder /> },
+      ],
+    },
+    {
+      id: 'account',
+      label: 'Ciphera Account',
+      description: 'Security, 2FA, and sessions',
+      icon: LockIcon,
+      items: [
+        { id: 'auth-profile', label: 'Profile & Personal Info', href: 'https://auth.ciphera.net/settings', external: true },
+        { id: 'auth-security', label: 'Security & 2FA', href: 'https://auth.ciphera.net/settings?tab=security', external: true },
+        { id: 'auth-sessions', label: 'Active Sessions', href: 'https://auth.ciphera.net/settings?tab=sessions', external: true },
+        { id: 'devices', label: 'Trusted Devices', content: <TrustedDevicesCard /> },
+        { id: 'activity', label: 'Security Activity', content: <SecurityActivityCard /> },
+      ],
+    },
+  ]
+
+  return <SettingsModal open={isOpen} onClose={closeSettings} sections={sections} />
+}
diff --git a/lib/settings-modal-context.tsx b/lib/settings-modal-context.tsx
new file mode 100644
index 0000000..f4de243
--- /dev/null
+++ b/lib/settings-modal-context.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { createContext, useContext, useState, useCallback } from 'react'
+
+interface SettingsModalContextType {
+  isOpen: boolean
+  openSettings: () => void
+  closeSettings: () => void
+}
+
+const SettingsModalContext = createContext<SettingsModalContextType>({
+  isOpen: false,
+  openSettings: () => {},
+  closeSettings: () => {},
+})
+
+export function SettingsModalProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const openSettings = useCallback(() => setIsOpen(true), [])
+  const closeSettings = useCallback(() => setIsOpen(false), [])
+
+  return (
+    <SettingsModalContext.Provider value={{ isOpen, openSettings, closeSettings }}>
+      {children}
+    </SettingsModalContext.Provider>
+  )
+}
+
+export function useSettingsModal() {
+  return useContext(SettingsModalContext)
+}
diff --git a/package-lock.json b/package-lock.json
index 67de8f1..346f3fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.13.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.80",
+        "@ciphera-net/ui": "^0.0.88",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@radix-ui/react-icons": "^1.3.0",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1665,9 +1665,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.80",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.80/0fc38c4004f3d899afffa8c15addc490b72efe15",
-      "integrity": "sha512-/Jc0aTEE94YA+V/FbpCK133IYbwp/rPpr1a/pdhIG54OzMzVnaRndaVpNLpmLB2Y7POmRTecJr831L1DUrI4WQ==",
+      "version": "0.0.88",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.88/70285ac19f9349fd13b4cbedf59612bc9c6ecc7e",
+      "integrity": "sha512-YMfrK8NVfFyS/KqvlnFSm3EmeCnIc5Wb4gO//qqyIt7d1lFGgsQJfQ0xOHoo0oQq0STywdnXPOwaTUWJeUIdMA==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index 0c03c2d..a2ecb1d 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.80",
+    "@ciphera-net/ui": "^0.0.88",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-icons": "^1.3.0",
     "@simplewebauthn/browser": "^13.2.2",