update docs styling, add delete confirmation on inbox

Author: waleedlatif1

apps/docs/app/global.css

@@ -32,7 +32,7 @@ html {
 :root {
   --fd-border: transparent !important;
   --fd-border-sidebar: transparent !important;
-  --fd-nav-height: 65px; /* Custom navbar height (h-16 = 64px + 1px border) */
+  --fd-nav-height: 94px; /* Custom navbar height (52px top + 42px tabs) */
   /* Content container width used to center main content */
   --spacing-fd-container: 1400px;
   /* Edge gutter = leftover space on each side of centered container */
@@ -97,7 +97,7 @@ aside#nd-sidebar {
   display: none !important;
 }
 
-/* Mobile only: Reduce gap between navbar and content */
+/* Mobile only: Reduce gap between navbar and content (custom navbar hidden on mobile) */
 @media (max-width: 1023px) {
   #nd-docs-layout {
     margin-top: -25px;
@@ -121,11 +121,11 @@ aside#nd-sidebar {
 /* On mobile, let fumadocs handle the layout natively */
 @media (min-width: 1024px) {
   :root {
-    --fd-banner-height: 65px !important; /* 64px navbar + 1px border */
+    --fd-banner-height: 94px !important; /* 52px top + 42px tabs */
   }
 
   #nd-docs-layout {
-    --fd-docs-height: calc(100dvh - 65px) !important; /* 64px navbar + 1px border */
+    --fd-docs-height: calc(100dvh - 94px) !important; /* 52px top + 42px tabs */
     --fd-sidebar-width: 300px !important;
     margin-left: var(--sidebar-offset) !important;
     margin-right: var(--toc-offset) !important;

apps/docs/components/navbar/navbar.tsx

@@ -8,65 +8,88 @@ import { SimLogoFull } from '@/components/ui/sim-logo'
 import { ThemeToggle } from '@/components/ui/theme-toggle'
 import { cn } from '@/lib/utils'
 
+const NAV_TABS = [
+  {
+    label: 'Documentation',
+    href: '/introduction',
+    match: (p: string) => !p.includes('/api-reference'),
+    external: false,
+  },
+  {
+    label: 'API Reference',
+    href: '/api-reference/getting-started',
+    match: (p: string) => p.includes('/api-reference'),
+    external: false,
+  },
+  { label: 'Mothership', href: 'https://sim.ai', external: true },
+] as const
+
 export function Navbar() {
   const pathname = usePathname()
-  const isApiReference = pathname.includes('/api-reference')
 
   return (
-    <nav className='sticky top-0 z-50 border-border/50 border-b bg-background/80 backdrop-blur-md backdrop-saturate-150'>
-      {/* Desktop: Single row layout */}
-      <div className='hidden h-16 w-full items-center lg:flex'>
+    <nav className='sticky top-0 z-50 bg-background/80 backdrop-blur-md backdrop-saturate-150'>
+      <div className='hidden w-full flex-col lg:flex'>
+        {/* Top row: logo, search, controls */}
         <div
-          className='relative flex w-full items-center justify-between'
+          className='flex h-[52px] w-full items-center justify-between'
           style={{
             paddingLeft: 'calc(var(--sidebar-offset) + 32px)',
             paddingRight: 'calc(var(--toc-offset) + 60px)',
           }}
         >
-          {/* Left cluster: logo */}
-          <div className='flex items-center'>
-            <Link href='/' className='flex min-w-[100px] items-center'>
-              <SimLogoFull className='h-7 w-auto' />
-            </Link>
-          </div>
+          <Link href='/' className='flex min-w-[100px] items-center'>
+            <SimLogoFull className='h-7 w-auto' />
+          </Link>
 
-          {/* Center cluster: search - absolutely positioned to center */}
           <div className='-translate-x-1/2 absolute left-1/2 flex items-center justify-center'>
             <SearchTrigger />
           </div>
 
-          {/* Right cluster aligns with TOC edge */}
           <div className='flex items-center gap-1'>
-            <Link
-              href='/introduction'
-              className={cn(
-                'rounded-xl px-3 py-2 font-normal text-[0.9375rem] leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground',
-                !isApiReference ? 'text-foreground' : 'text-foreground/60'
-              )}
-            >
-              Documentation
-            </Link>
-            <Link
-              href='/api-reference/getting-started'
-              className={cn(
-                'rounded-xl px-3 py-2 font-normal text-[0.9375rem] leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground',
-                isApiReference ? 'text-foreground' : 'text-foreground/60'
-              )}
-            >
-              API
-            </Link>
-            <Link
-              href='https://sim.ai'
-              target='_blank'
-              rel='noopener noreferrer'
-              className='rounded-xl px-3 py-2 font-normal text-[0.9375rem] text-foreground/60 leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground'
-            >
-              Platform
-            </Link>
             <LanguageDropdown />
             <ThemeToggle />
           </div>
         </div>
+
+        {/* Divider — only spans content width */}
+        <div
+          className='border-b'
+          style={{
+            marginLeft: 'calc(var(--sidebar-offset) + 32px)',
+            marginRight: 'calc(var(--toc-offset) + 60px)',
+            borderColor: 'rgba(128, 128, 128, 0.1)',
+          }}
+        />
+
+        {/* Bottom row: navigation tabs — border on row, tabs overlap it */}
+        <div
+          className='flex h-[42px] items-stretch gap-6 border-border/20 border-b'
+          style={{
+            paddingLeft: 'calc(var(--sidebar-offset) + 32px)',
+          }}
+        >
+          {NAV_TABS.map((tab) => {
+            const isActive = !tab.external && tab.match(pathname)
+            return (
+              <Link
+                key={tab.label}
+                href={tab.href}
+                {...(tab.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                className={cn(
+                  '-mb-px relative flex items-center border-b text-[14px] tracking-[-0.01em] transition-colors',
+                  isActive
+                    ? 'border-neutral-400 font-[550] text-neutral-800 dark:border-neutral-500 dark:text-neutral-200'
+                    : 'border-transparent font-medium text-fd-muted-foreground hover:border-neutral-300 hover:text-neutral-600 dark:hover:border-neutral-600 dark:hover:text-neutral-400'
+                )}
+              >
+                {/* Invisible bold text reserves width to prevent layout shift */}
+                <span className='invisible font-[550]'>{tab.label}</span>
+                <span className='absolute'>{tab.label}</span>
+              </Link>
+            )
+          })}
+        </div>
       </div>
     </nav>
   )

apps/docs/components/ui/search-trigger.tsx

@@ -27,11 +27,11 @@ export function SearchTrigger() {
       <Search className='h-4 w-4' />
       <span>Search...</span>
       <kbd
-        className='ml-auto flex items-center gap-0.5 font-medium'
+        className='ml-auto flex items-center font-medium'
         style={{ color: 'rgba(255, 255, 255, 0.6)' }}
       >
-        <span style={{ fontSize: '15px', lineHeight: '1' }}>⌘</span>
-        <span style={{ fontSize: '13px', lineHeight: '1' }}>K</span>
+        <span className='text-[16px]'>⌘</span>
+        <span className='text-[13px]'>K</span>
       </kbd>
     </button>
   )

apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx

@@ -25,6 +25,7 @@ export function InboxEnableToggle() {
   const toggleInbox = useToggleInbox()
 
   const [isEnableOpen, setIsEnableOpen] = useState(false)
+  const [isDisableOpen, setIsDisableOpen] = useState(false)
   const [enableUsername, setEnableUsername] = useState('')
 
   const handleToggle = useCallback(
@@ -33,15 +34,20 @@ export function InboxEnableToggle() {
         setIsEnableOpen(true)
         return
       }
-      try {
-        await toggleInbox.mutateAsync({ workspaceId, enabled: false })
-      } catch (error) {
-        logger.error('Failed to disable inbox', { error })
-      }
+      setIsDisableOpen(true)
     },
     [workspaceId]
   )
 
+  const handleDisable = useCallback(async () => {
+    try {
+      await toggleInbox.mutateAsync({ workspaceId, enabled: false })
+      setIsDisableOpen(false)
+    } catch (error) {
+      logger.error('Failed to disable inbox', { error })
+    }
+  }, [workspaceId])
+
   const handleEnable = useCallback(async () => {
     try {
       await toggleInbox.mutateAsync({
@@ -108,6 +114,36 @@ export function InboxEnableToggle() {
           </ModalFooter>
         </ModalContent>
       </Modal>
+
+      <Modal open={isDisableOpen} onOpenChange={setIsDisableOpen}>
+        <ModalContent size='sm'>
+          <ModalHeader>Disable email inbox</ModalHeader>
+          <ModalBody>
+            <p className='text-[var(--text-secondary)]'>
+              Are you sure you want to disable the inbox
+              {config?.address && (
+                <>
+                  {' '}
+                  <span className='font-medium text-[var(--text-primary)]'>{config.address}</span>
+                </>
+              )}
+              ? Any emails sent to this address after disabling will not be delivered.{' '}
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+            <p className='mt-[8px] text-[var(--text-secondary)]'>
+              Your existing conversations and task history will be preserved.
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setIsDisableOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant='destructive' onClick={handleDisable} disabled={toggleInbox.isPending}>
+              {toggleInbox.isPending ? 'Disabling...' : 'Disable inbox'}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </>
   )
 }