Merge branch 'staging-v4' of github.com:simstudioai/sim into staging-v4

icecrasher321 · icecrasher321 · commit 927c767b3070 · 2026-07-22T17:18:55.000-07:00
diff --git a/apps/sim/app/(auth)/auth-layout-client.tsx b/apps/sim/app/(auth)/auth-layout-client.tsx
@@ -1,5 +1,16 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import { DesktopTitleBarController } from '@/app/_shell/desktop-title-bar'
 import { AuthShell } from '@/app/(auth)/components'
 
 export default function AuthLayoutClient({ children }: { children: React.ReactNode }) {
-  return <AuthShell>{children}</AuthShell>
+  const isLogin = usePathname() === '/login'
+
+  return (
+    <>
+      {isLogin && <DesktopTitleBarController />}
+      <AuthShell reserveDesktopTitleBar={isLogin}>{children}</AuthShell>
+    </>
+  )
 }
diff --git a/apps/sim/app/(auth)/components/auth-shell.tsx b/apps/sim/app/(auth)/components/auth-shell.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
 import Link from 'next/link'
 import { LogoMark, SimWordmark } from '@/app/(landing)/components/navbar/components'
 
@@ -7,6 +8,8 @@ interface AuthShellProps {
   children: ReactNode
   /** Optional element pinned to the bottom of the shell (e.g. the support footer). */
   footer?: ReactNode
+  /** Reserve the native macOS title-bar lane for the desktop login route. */
+  reserveDesktopTitleBar?: boolean
 }
 
 /**
@@ -19,9 +22,14 @@ interface AuthShellProps {
  * the landing {@link LogoMark} + {@link SimWordmark} at the same nav gutters. The
  * single content column is centered and capped for a calm single-form layout.
  */
-export function AuthShell({ children, footer }: AuthShellProps) {
+export function AuthShell({ children, footer, reserveDesktopTitleBar = false }: AuthShellProps) {
   return (
-    <div className='desktop-title-bar-page light relative flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
+    <div
+      className={cn(
+        'light relative flex flex-col bg-[var(--bg)] text-[var(--text-primary)]',
+        reserveDesktopTitleBar ? 'desktop-title-bar-page' : 'min-h-screen'
+      )}
+    >
       <header>
         <nav className='mx-auto flex w-full max-w-[1446px] items-center px-12 py-4 max-sm:px-5 max-lg:px-8'>
           <Link href='/' aria-label='Sim home' className='flex h-[30px] items-center'>
diff --git a/apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx b/apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx
@@ -426,7 +426,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
   }
 
   return (
-    <div className='desktop-title-bar-fixed-page light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
+    <div className='light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
       {/* Header component */}
       <ChatHeader chatConfig={chatConfig} starCount={starCount} />
 
diff --git a/apps/sim/app/(interfaces)/chat/[identifier]/loading.tsx b/apps/sim/app/(interfaces)/chat/[identifier]/loading.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '@sim/emcn'
 
 export default function ChatLoading() {
   return (
-    <div className='desktop-title-bar-fixed-page light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
+    <div className='light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
       <div className='border-[var(--border-1)] border-b px-4 py-3'>
         <div className='mx-auto flex max-w-3xl items-center justify-between'>
           <div className='flex items-center gap-[12px]'>
diff --git a/apps/sim/app/(interfaces)/chat/components/loading-state/loading-state.tsx b/apps/sim/app/(interfaces)/chat/components/loading-state/loading-state.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '@sim/emcn'
 
 export function ChatLoadingState() {
   return (
-    <div className='desktop-title-bar-fixed-page light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)]'>
+    <div className='light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)]'>
       <div className='flex flex-1 items-center justify-center px-4'>
         <div className='w-full max-w-[410px]'>
           <div className='flex flex-col items-center justify-center'>
diff --git a/apps/sim/app/(interfaces)/chat/components/voice-interface/voice-interface.tsx b/apps/sim/app/(interfaces)/chat/components/voice-interface/voice-interface.tsx
@@ -524,7 +524,7 @@ export function VoiceInterface({
   return (
     <div
       className={cn(
-        'desktop-title-bar-fixed-page light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]',
+        'light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]',
         className
       )}
     >
diff --git a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/loading.tsx b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/loading.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '@sim/emcn'
 
 export default function ResumeLoading() {
   return (
-    <div className='desktop-title-bar-page bg-background'>
+    <div className='min-h-screen bg-background'>
       <div className='border-b px-4 py-3'>
         <div className='mx-auto flex max-w-[1200px] items-center justify-between'>
           <Skeleton className='h-[24px] w-[80px] rounded-[4px]' />
diff --git a/apps/sim/app/(landing)/components/landing-shell/landing-shell.tsx b/apps/sim/app/(landing)/components/landing-shell/landing-shell.tsx
@@ -15,8 +15,7 @@ import { SiteStructuredData } from '@/app/(landing)/components/site-structured-d
  *   light-mode value regardless of the visitor's theme - the landing family is
  *   always light, and uses the platform's own light-mode tokens (from
  *   `globals.css`) with no separate palette.
- * - The page's traffic-light-safe scroll port (`desktop-title-bar-page-height`
- *   + `overflow-y-auto` +
+ * - The page's scroll port (`h-screen` + `overflow-y-auto` +
  *   `overscroll-y-none`): the document body no longer overflows, so the viewport
  *   can't rubber-band, and the container's own overscroll bounce is disabled -
  *   without this the sticky navbar gets dragged past the top/bottom edges.
@@ -37,7 +36,7 @@ export async function LandingShell({ children }: LandingShellProps) {
   const stars = await getGitHubStars()
 
   return (
-    <div className='desktop-title-bar-page-height light overflow-y-auto overscroll-y-none bg-[var(--bg)] text-[var(--text-primary)]'>
+    <div className='light h-screen overflow-y-auto overscroll-y-none bg-[var(--bg)] text-[var(--text-primary)]'>
       <SiteStructuredData />
       <a
         href='#main-content'
diff --git a/apps/sim/app/(landing)/components/logo-shell/logo-shell.tsx b/apps/sim/app/(landing)/components/logo-shell/logo-shell.tsx
@@ -26,7 +26,7 @@ interface LogoShellProps {
 
 export function LogoShell({ children, center = false, footer }: LogoShellProps) {
   return (
-    <div className='desktop-title-bar-page light relative flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
+    <div className='light relative flex min-h-screen flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
       <header>
         <nav className='mx-auto flex w-full max-w-[1460px] items-center px-20 py-4 max-sm:px-5 max-lg:px-8'>
           <Link href='/' aria-label='Sim home' className='flex h-[30px] items-center'>
diff --git a/apps/sim/app/_shell/desktop-title-bar-surfaces.test.ts b/apps/sim/app/_shell/desktop-title-bar-surfaces.test.ts
@@ -5,41 +5,21 @@ import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { describe, expect, it } from 'vitest'
 
-const auditedSurfaces = {
-  'desktop-title-bar-page': [
-    'app/(auth)/components/auth-shell.tsx',
-    'app/(interfaces)/resume/[workflowId]/[executionId]/loading.tsx',
-    'app/(landing)/components/logo-shell/logo-shell.tsx',
-    'app/desktop/auth/page.tsx',
-    'app/desktop/connect/complete/page.tsx',
-    'app/desktop/connect/connect-launcher.tsx',
-    'app/desktop/connect/page.tsx',
-    'app/f/[token]/public-file-view.tsx',
-    'app/playground/page.tsx',
-    'app/workspace/[workspaceId]/components/workspace-access-denied.tsx',
-  ],
-  'desktop-title-bar-page-height': [
-    'app/(landing)/components/landing-shell/landing-shell.tsx',
-    'app/workspace/page.tsx',
-    'components/settings/settings-unavailable.tsx',
-    'components/settings/standalone-settings-shell.tsx',
-  ],
-  'desktop-title-bar-fixed-page': [
-    'app/(interfaces)/chat/[identifier]/chat.tsx',
-    'app/(interfaces)/chat/[identifier]/loading.tsx',
-    'app/(interfaces)/chat/components/loading-state/loading-state.tsx',
-    'app/(interfaces)/chat/components/voice-interface/voice-interface.tsx',
-    'app/workspace/[workspaceId]/components/impersonation-banner/impersonation-expired.tsx',
-    'app/workspace/[workspaceId]/files/[fileId]/view/file-viewer.tsx',
-  ],
-} as const
-
 describe('desktop title-bar surface audit', () => {
-  for (const [safeAreaClass, files] of Object.entries(auditedSurfaces)) {
-    for (const file of files) {
-      it(`${file} uses ${safeAreaClass}`, () => {
-        expect(readFileSync(resolve(process.cwd(), file), 'utf8')).toContain(safeAreaClass)
-      })
-    }
-  }
+  it('applies the safe-area shell only when the auth route is login', () => {
+    const authLayout = readFileSync(
+      resolve(process.cwd(), 'app/(auth)/auth-layout-client.tsx'),
+      'utf8'
+    )
+    const authShell = readFileSync(
+      resolve(process.cwd(), 'app/(auth)/components/auth-shell.tsx'),
+      'utf8'
+    )
+
+    expect(authLayout).toContain("usePathname() === '/login'")
+    expect(authLayout).toContain('reserveDesktopTitleBar={isLogin}')
+    expect(authShell).toContain(
+      "reserveDesktopTitleBar ? 'desktop-title-bar-page' : 'min-h-screen'"
+    )
+  })
 })
diff --git a/apps/sim/app/_shell/desktop-title-bar.test.ts b/apps/sim/app/_shell/desktop-title-bar.test.ts
@@ -5,9 +5,10 @@ import { describe, expect, it } from 'vitest'
 import { applyDesktopTitleBarMode, supportsDesktopTitleBar } from '@/app/_shell/desktop-title-bar'
 
 describe('desktop title bar', () => {
-  it('reserves traffic-light space only in the macOS main desktop window', () => {
+  it('reserves traffic-light space only for desktop login on macOS', () => {
     expect(supportsDesktopTitleBar('/login', 'Macintosh', true)).toBe(true)
-    expect(supportsDesktopTitleBar('/workspace/ws/home', 'Macintosh', true)).toBe(true)
+    expect(supportsDesktopTitleBar('/workspace/ws/home', 'Macintosh', true)).toBe(false)
+    expect(supportsDesktopTitleBar('/signup', 'Macintosh', true)).toBe(false)
     expect(supportsDesktopTitleBar('/desktop/launcher', 'Macintosh', true)).toBe(false)
     expect(supportsDesktopTitleBar('/login', 'Windows NT 10.0', true)).toBe(false)
     expect(supportsDesktopTitleBar('/login', 'Macintosh', false)).toBe(false)
diff --git a/apps/sim/app/_shell/desktop-title-bar.tsx b/apps/sim/app/_shell/desktop-title-bar.tsx
@@ -6,13 +6,13 @@ import { getDesktopBridge } from '@/lib/desktop'
 
 export type DesktopTitleBarMode = 'fullscreen' | 'inset' | null
 
-/** The frameless Quick Ask panel has no native traffic lights to reserve. */
+/** Only the macOS desktop login route reserves space outside workspace chrome. */
 export function supportsDesktopTitleBar(
   pathname: string,
   userAgent: string,
   hasDesktopBridge: boolean
 ): boolean {
-  return hasDesktopBridge && /Mac/i.test(userAgent) && pathname !== '/desktop/launcher'
+  return hasDesktopBridge && /Mac/i.test(userAgent) && pathname === '/login'
 }
 
 export function applyDesktopTitleBarMode(
@@ -27,9 +27,8 @@ export function applyDesktopTitleBarMode(
 }
 
 /**
- * Keeps the macOS title-bar inset correct across every App Router surface and
- * native fullscreen transition. The blocking head script owns first paint;
- * this controller owns client navigation and subsequent window-state changes.
+ * Keeps the macOS login inset correct across native fullscreen transitions.
+ * Workspace routes retain their existing WorkspaceChrome-owned listener.
  */
 export function DesktopTitleBarController() {
   const pathname = usePathname()
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
@@ -46,28 +46,13 @@ html[data-sim-desktop-title-bar="inset"] {
   --desktop-title-bar-height: 36px;
 }
 
-/**
- * Route-shell primitives for the main macOS desktop window. Fullscreen,
- * browser, Windows/Linux, and the frameless Quick Ask panel all resolve the
- * shared variable to 0px, so these remain no-ops outside the traffic-light UI.
- */
+/** The macOS desktop login shell reserves the native traffic-light lane. */
 .desktop-title-bar-page {
   margin-top: var(--desktop-title-bar-height);
   min-height: calc(100vh - var(--desktop-title-bar-height));
 }
 
-.desktop-title-bar-page-height {
-  margin-top: var(--desktop-title-bar-height);
-  height: calc(100vh - var(--desktop-title-bar-height));
-}
-
-.desktop-title-bar-fixed-page {
-  top: var(--desktop-title-bar-height);
-}
-
-.desktop-title-bar-page::before,
-.desktop-title-bar-page-height::before,
-.desktop-title-bar-fixed-page::before {
+.desktop-title-bar-page::before {
   position: fixed;
   inset: 0 0 auto;
   height: var(--desktop-title-bar-height);
diff --git a/apps/sim/app/desktop/auth/page.tsx b/apps/sim/app/desktop/auth/page.tsx
@@ -22,7 +22,7 @@ interface DesktopAuthPageProps {
 
 function InvalidRequest() {
   return (
-    <main className='desktop-title-bar-page flex items-center justify-center px-6'>
+    <main className='flex min-h-screen items-center justify-center px-6'>
       <div className='max-w-sm text-center'>
         <h1 className='font-semibold text-foreground text-lg'>Sign-in link incomplete</h1>
         <p className='mt-2 text-muted-foreground text-sm'>
diff --git a/apps/sim/app/desktop/connect/complete/page.tsx b/apps/sim/app/desktop/connect/complete/page.tsx
@@ -16,7 +16,7 @@ interface ConnectCompletePageProps {
 
 function InvalidRequest() {
   return (
-    <main className='desktop-title-bar-page flex items-center justify-center px-6'>
+    <main className='flex min-h-screen items-center justify-center px-6'>
       <div className='max-w-sm text-center'>
         <h1 className='font-semibold text-foreground text-lg'>Nothing to return to</h1>
         <p className='mt-2 text-muted-foreground text-sm'>
diff --git a/apps/sim/app/desktop/connect/connect-launcher.tsx b/apps/sim/app/desktop/connect/connect-launcher.tsx
@@ -43,7 +43,7 @@ export function ConnectLauncher({ providerId, completePath }: ConnectLauncherPro
   }, [start])
 
   return (
-    <main className='desktop-title-bar-page flex items-center justify-center px-6'>
+    <main className='flex min-h-screen items-center justify-center px-6'>
       <div className='max-w-sm text-center'>
         {error ? (
           <>
diff --git a/apps/sim/app/desktop/connect/page.tsx b/apps/sim/app/desktop/connect/page.tsx
@@ -25,7 +25,7 @@ interface DesktopConnectPageProps {
 
 function InvalidRequest() {
   return (
-    <main className='desktop-title-bar-page flex items-center justify-center px-6'>
+    <main className='flex min-h-screen items-center justify-center px-6'>
       <div className='max-w-sm text-center'>
         <h1 className='font-semibold text-foreground text-lg'>Connection link incomplete</h1>
         <p className='mt-2 text-muted-foreground text-sm'>
diff --git a/apps/sim/app/f/[token]/public-file-view.tsx b/apps/sim/app/f/[token]/public-file-view.tsx
@@ -65,7 +65,7 @@ export function PublicFileView({
   )
 
   return (
-    <div className='desktop-title-bar-page light flex flex-col bg-[var(--bg)]'>
+    <div className='light flex min-h-screen flex-col bg-[var(--bg)]'>
       <header className='sticky top-0 z-10 flex items-center justify-between gap-4 border-[var(--border)] border-b bg-[var(--bg)] px-4 py-3'>
         <div className='flex min-w-0 items-center gap-3'>
           {!brand.logoUrl && (
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
@@ -3,7 +3,6 @@ import Script from 'next/script'
 import { PublicEnvScript as RuntimePublicEnvScript } from 'next-runtime-env'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import { BrandedLayout } from '@/components/branded-layout'
-import { DesktopTitleBarController } from '@/app/_shell/desktop-title-bar'
 import { PostHogProvider } from '@/app/_shell/providers/posthog-provider'
 import { generateBrandedMetadata, generateThemeCSS } from '@/ee/whitelabeling'
 import '@/app/_styles/globals.css'
@@ -68,23 +67,18 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             __html: `
               (function () {
                 // The macOS desktop shell overlays native traffic lights on the
-                // page. Mark it before first paint so every route-level shell can
-                // reserve its inset title-bar lane without a hydration shift.
+                // workspace. Mark it before first paint so the sidebar reserves
+                // its inset title-bar lane without a post-hydration layout shift.
                 var collapsedSidebarWidth = 51;
-                var path = '';
                 try {
-                  path = window.location.pathname;
-                  if (
-                    window.simDesktop &&
-                    /Mac/i.test(navigator.userAgent) &&
-                    path !== '/desktop/launcher'
-                  ) {
+                  if (window.simDesktop && /Mac/i.test(navigator.userAgent)) {
                     document.documentElement.setAttribute('data-sim-desktop-title-bar', 'inset');
                     collapsedSidebarWidth = 0;
                   }
                 } catch (e) {}
 
                 try {
+                  var path = window.location.pathname;
                   if (path.indexOf('/workspace/') === -1) {
                     return;
                   }
@@ -264,7 +258,6 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
           </noscript>
         )}
         <HydrationErrorHandler />
-        <DesktopTitleBarController />
         <NuqsAdapter>
           <PostHogProvider>
             <ThemeProvider>
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
@@ -166,7 +166,7 @@ export default function PlaygroundPage() {
   return (
     <ToastProvider>
       <Tooltip.Provider>
-        <div className='desktop-title-bar-page relative bg-[var(--bg)] p-8'>
+        <div className='relative min-h-screen bg-[var(--bg)] p-8'>
           <div className='absolute top-8 left-8 flex items-center gap-2'>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/impersonation-banner/impersonation-expired.tsx b/apps/sim/app/workspace/[workspaceId]/components/impersonation-banner/impersonation-expired.tsx
@@ -51,7 +51,7 @@ export function ImpersonationExpired() {
   }
 
   return (
-    <main className='desktop-title-bar-fixed-page fixed inset-0 z-50 flex flex-col items-center justify-center gap-3 bg-[var(--surface-1)] p-6'>
+    <main className='fixed inset-0 z-50 flex flex-col items-center justify-center gap-3 bg-[var(--surface-1)] p-6'>
       <p className='text-[var(--text-muted)] text-sm'>
         {failed
           ? 'The impersonation session expired, but signing out failed.'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/workspace-access-denied.tsx b/apps/sim/app/workspace/[workspaceId]/components/workspace-access-denied.tsx
@@ -3,7 +3,7 @@ import { CircleAlert } from '@sim/emcn/icons'
 
 export function WorkspaceAccessDenied() {
   return (
-    <main className='desktop-title-bar-page flex items-center justify-center bg-[var(--surface-1)] p-6'>
+    <main className='flex min-h-screen items-center justify-center bg-[var(--surface-1)] p-6'>
       <div className='flex max-w-md flex-col items-center gap-3 text-center'>
         <div className='flex size-10 items-center justify-center rounded-full bg-[var(--surface-3)]'>
           <CircleAlert className='size-[18px] text-[var(--text-icon)]' aria-hidden />
diff --git a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
diff --git a/apps/sim/app/workspace/[workspaceId]/files/[fileId]/view/file-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/[fileId]/view/file-viewer.tsx
diff --git a/apps/sim/app/workspace/page.tsx b/apps/sim/app/workspace/page.tsx
diff --git a/apps/sim/components/settings/settings-unavailable.tsx b/apps/sim/components/settings/settings-unavailable.tsx
diff --git a/apps/sim/components/settings/standalone-settings-shell.tsx b/apps/sim/components/settings/standalone-settings-shell.tsx

Original file line number	Diff line number	Diff line change
`@@ -426,7 +426,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {`
`426`	`426`	`}`
`427`	`427`
`428`	`428`	`return (`
`429`		`- <div className='desktop-title-bar-fixed-page light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>`
	`429`	`+ <div className='light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>`
`430`	`430`	`{/* Header component */}`
`431`	`431`	`<ChatHeader chatConfig={chatConfig} starCount={starCount} />`
`432`	`432`
Original file line number	Diff line number	Diff line change
`@@ -524,7 +524,7 @@ export function VoiceInterface({`
`524`	`524`	`return (`
`525`	`525`	`<div`
`526`	`526`	`className={cn(`
`527`		`- 'desktop-title-bar-fixed-page light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]',`
	`527`	`+ 'light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]',`
`528`	`528`	`className`
`529`	`529`	`)}`
`530`	`530`	`>`