refactor: replace all legacy settings links with unified modal openers

app/notifications/page.tsx

@@ -16,6 +16,7 @@ import {
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
 import { Button, ArrowLeftIcon } from '@ciphera-net/ui'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { NotificationsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import { toast } from '@ciphera-net/ui'
 
@@ -23,6 +24,7 @@ const PAGE_SIZE = 50
 
 export default function NotificationsPage() {
   const { user } = useAuth()
+  const { openUnifiedSettings } = useUnifiedSettings()
   const [notifications, setNotifications] = useState<Notification[]>([])
   const [unreadCount, setUnreadCount] = useState(0)
   const [loading, setLoading] = useState(true)
@@ -125,9 +127,9 @@ export default function NotificationsPage() {
         <h1 className="text-2xl font-bold text-white mb-2">Notifications</h1>
         <p className="text-sm text-neutral-400 mb-6">
           Manage which notifications you receive in{' '}
-          <Link href="/org-settings?tab=notifications" className="text-brand-orange hover:underline">
+          <button onClick={() => openUnifiedSettings({ context: 'workspace', tab: 'notifications' })} className="text-brand-orange hover:underline cursor-pointer">
             Organization Settings → Notifications
-          </Link>
+          </button>
         </p>
 
         {showSkeleton ? (
@@ -141,9 +143,9 @@ export default function NotificationsPage() {
             <p>No notifications yet</p>
             <p className="text-sm mt-2">
               Manage which notifications you receive in{' '}
-              <Link href="/org-settings?tab=notifications" className="text-brand-orange hover:underline">
+              <button onClick={() => openUnifiedSettings({ context: 'workspace', tab: 'notifications' })} className="text-brand-orange hover:underline cursor-pointer">
                 Organization Settings → Notifications
-              </Link>
+              </button>
             </p>
           </div>
         ) : (

app/page.tsx

@@ -24,11 +24,13 @@ import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { getSitesLimitForPlan } from '@/lib/plans'
 import { formatDate } from '@/lib/utils/formatDate'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 
 type SiteStatsMap = Record<string, { stats: Stats }>
 
 export default function HomePage() {
   const { user, loading: authLoading } = useAuth()
+  const { openUnifiedSettings } = useUnifiedSettings()
   const [sites, setSites] = useState<Site[]>([])
   const [sitesLoading, setSitesLoading] = useState(true)
   const [siteStats, setSiteStats] = useState<SiteStatsMap>({})
@@ -355,9 +357,9 @@ export default function HomePage() {
               )}
               <div className="mt-2 flex gap-2">
                 {subscription.has_payment_method ? (
-                  <Link href="/org-settings?tab=billing" className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded">
+                  <button onClick={() => openUnifiedSettings({ context: 'workspace', tab: 'billing' })} className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded cursor-pointer">
                     Manage billing
-                  </Link>
+                  </button>
                 ) : (
                   <Link href="/pricing" className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded">
                     Upgrade

app/sites/[id]/cdn/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import dynamic from 'next/dynamic'
 import { useParams } from 'next/navigation'
-import Link from 'next/link'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import * as Flags from 'country-flag-icons/react/3x2'
 
 const DottedMap = dynamic(() => import('@/components/dashboard/DottedMap'), { ssr: false })
@@ -115,6 +115,8 @@ export default function CDNPage() {
   const [period, setPeriod] = useState('7')
   const [dateRange, setDateRange] = useState(() => getDateRange(7))
 
+  const { openUnifiedSettings } = useUnifiedSettings()
+
   // Data fetching
   const { data: bunnyStatus } = useBunnyStatus(siteId)
   const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end)
@@ -183,13 +185,13 @@ export default function CDNPage() {
           <p className="text-sm text-neutral-400 max-w-md mb-6">
             Monitor your CDN performance including bandwidth usage, cache hit rates, request volumes, and geographic distribution.
           </p>
-          <Link
-            href={`/sites/${siteId}/settings?tab=integrations`}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors"
+          <button
+            onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })}
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors cursor-pointer"
           >
             Connect in Settings
             <ArrowSquareOut size={16} weight="bold" />
-          </Link>
+          </button>
         </div>
       </div>
     )

app/sites/[id]/search/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
-import Link from 'next/link'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { Select, DatePicker } from '@ciphera-net/ui'
 import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
 import { CaretDown, CaretUp, MagnifyingGlass, ArrowSquareOut } from '@phosphor-icons/react'
@@ -36,6 +36,7 @@ const PAGE_SIZE = 50
 export default function SearchConsolePage() {
   const params = useParams()
   const siteId = params.id as string
+  const { openUnifiedSettings } = useUnifiedSettings()
 
   // Date range
   const [period, setPeriod] = useState('28')
@@ -172,13 +173,13 @@ export default function SearchConsolePage() {
           <p className="text-sm text-neutral-400 max-w-md mb-6">
             See how your site performs in Google Search. View top queries, pages, click-through rates, and average position data.
           </p>
-          <Link
-            href={`/sites/${siteId}/settings?tab=integrations`}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors"
+          <button
+            onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })}
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors cursor-pointer"
           >
             Connect in Settings
             <ArrowSquareOut size={16} weight="bold" />
-          </Link>
+          </button>
         </div>
       </div>
     )