refactor: replace all legacy settings links with unified modal openers

This commit is contained in:
Usman Baig
2026-03-26 10:47:51 +01:00
parent 5165b885ff
commit 61a106eed6
7 changed files with 65 additions and 26 deletions

View File

@@ -327,6 +327,38 @@ function NavLink({
)
}
// ─── Settings Button (opens unified modal instead of navigating) ─────
function SettingsButton({
item, collapsed, onClick,
}: {
item: NavItem; collapsed: boolean; onClick?: () => void
}) {
const { openUnifiedSettings } = useUnifiedSettings()
return (
<div className="relative group/nav">
<button
onClick={() => {
openUnifiedSettings({ context: 'site', tab: 'general' })
onClick?.()
}}
className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
>
<span className="w-7 h-7 flex items-center justify-center shrink-0">
<item.icon className="w-[18px] h-[18px]" weight="regular" />
</span>
<Label collapsed={collapsed}>{item.label}</Label>
</button>
{collapsed && (
<span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
{item.label}
</span>
)}
</div>
)
}
// ─── Sidebar Content ────────────────────────────────────────
interface SidebarContentProps {
@@ -401,7 +433,7 @@ function SidebarContent({
<NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
))}
{group.label === 'Infrastructure' && canEdit && (
<NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
<SettingsButton item={SETTINGS_ITEM} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
)}
</div>
</div>

View File

@@ -4,7 +4,6 @@ import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { motion } from 'framer-motion'
import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
import { useAuth } from '@/lib/auth/context'
interface SiteNavProps {
siteId: string
@@ -13,8 +12,6 @@ interface SiteNavProps {
export default function SiteNav({ siteId }: SiteNavProps) {
const pathname = usePathname()
const handleTabKeyDown = useTabListKeyboard()
const { user } = useAuth()
const canEdit = user?.role === 'owner' || user?.role === 'admin'
const tabs = [
{ label: 'Dashboard', href: `/sites/${siteId}` },
@@ -24,7 +21,6 @@ export default function SiteNav({ siteId }: SiteNavProps) {
{ label: 'Search', href: `/sites/${siteId}/search` },
{ label: 'CDN', href: `/sites/${siteId}/cdn` },
{ label: 'Uptime', href: `/sites/${siteId}/uptime` },
...(canEdit ? [{ label: 'Settings', href: `/sites/${siteId}/settings` }] : []),
]
const isActive = (href: string) => {