Refine home chrome spacing and slim the left sidebar.

This unifies top/left chrome colors, stabilizes traffic-light and brand spacing to prevent overlap, and reduces left panel width for a cleaner, less bulky layout.

Made-with: Cursor

zoom_app/ViewController.swift

@@ -23,14 +23,16 @@ class ViewController: NSViewController {
     private let appShellBackground = NSColor(calibratedRed: 10 / 255, green: 11 / 255, blue: 12 / 255, alpha: 1)
     private let contentShellBackground = NSColor(calibratedRed: 10 / 255, green: 11 / 255, blue: 12 / 255, alpha: 1)
     private let topStripBackground = NSColor(calibratedRed: 22 / 255, green: 23 / 255, blue: 26 / 255, alpha: 1)
+    private let chromeUnifiedBackground = NSColor(calibratedRed: 22 / 255, green: 23 / 255, blue: 26 / 255, alpha: 1)
     private let searchPillBackground = NSColor.white.withAlphaComponent(0.06)
     private let meetingCardBackground = NSColor(calibratedRed: 30 / 255, green: 34 / 255, blue: 42 / 255, alpha: 1)
     private let titleBarControlBackground = NSColor.white.withAlphaComponent(0.04)
     private let titleBarLightControlBackground = NSColor.white.withAlphaComponent(0.02)
     private let appShellCornerRadius: CGFloat = 20
     private let homeChromeHeaderHeight: CGFloat = 56
-    private let nativeTrafficLightsLeading: CGFloat = 18
+    private let nativeTrafficLightsLeading: CGFloat = 14
     private let nativeTrafficLightsTopInset: CGFloat = 20
+    private let brandLeadingInset: CGFloat = 84
     private let accentBlue = NSColor(calibratedRed: 27 / 255, green: 115 / 255, blue: 232 / 255, alpha: 1)
     private let accentOrange = NSColor(calibratedRed: 1.0, green: 0.60, blue: 0.20, alpha: 1)
     private let primaryText = NSColor(calibratedWhite: 0.98, alpha: 1)
@@ -74,6 +76,7 @@ class ViewController: NSViewController {
         super.viewDidAppear()
         if let window = view.window {
             window.setContentSize(NSSize(width: 1020, height: 690))
+            window.backgroundColor = chromeUnifiedBackground
             // Use full-size content view so custom top chrome sits in the titlebar region.
             window.titleVisibility = .hidden
             window.titlebarAppearsTransparent = true
@@ -665,13 +668,13 @@ class ViewController: NSViewController {
         shell.layer?.borderColor = NSColor.white.withAlphaComponent(0.06).cgColor
         let chromeColumn = NSView()
         chromeColumn.wantsLayer = true
-        chromeColumn.layer?.backgroundColor = NSColor.white.withAlphaComponent(0.03).cgColor
+        chromeColumn.layer?.backgroundColor = chromeUnifiedBackground.cgColor
         let chromeDivider = NSView()
         chromeDivider.wantsLayer = true
         chromeDivider.layer?.backgroundColor = NSColor.black.withAlphaComponent(0.32).cgColor
         let chromeHeader = NSView()
         chromeHeader.wantsLayer = true
-        chromeHeader.layer?.backgroundColor = NSColor.clear.cgColor
+        chromeHeader.layer?.backgroundColor = chromeUnifiedBackground.cgColor
         let sidebar = makeSidebar(items: ["Home", "Meetings", "Chat", "Scheduler", "Hub", "More"], selected: "Home", style: .home)
         let content = NSView()
         content.wantsLayer = true
@@ -698,7 +701,7 @@ class ViewController: NSViewController {
             chromeColumn.leadingAnchor.constraint(equalTo: shell.leadingAnchor),
             chromeColumn.topAnchor.constraint(equalTo: shell.topAnchor),
             chromeColumn.bottomAnchor.constraint(equalTo: shell.bottomAnchor),
-            chromeColumn.widthAnchor.constraint(equalToConstant: 128),
+            chromeColumn.widthAnchor.constraint(equalToConstant: 82),
             chromeDivider.topAnchor.constraint(equalTo: chromeColumn.topAnchor),
             chromeDivider.bottomAnchor.constraint(equalTo: chromeColumn.bottomAnchor),
             chromeDivider.trailingAnchor.constraint(equalTo: chromeColumn.trailingAnchor),
@@ -723,12 +726,13 @@ class ViewController: NSViewController {
         brandStack.alignment = .leading
         let brandTop = makeLabel("zoom", size: 14, color: primaryText, weight: .semibold, centered: false)
         let brandBottom = makeLabel("Workplace", size: 27, color: primaryText, weight: .bold, centered: false)
-        brandBottom.font = .systemFont(ofSize: 14, weight: .bold)
+        brandTop.font = .systemFont(ofSize: 12, weight: .semibold)
+        brandBottom.font = .systemFont(ofSize: 12, weight: .bold)
         [brandTop, brandBottom].forEach { brandStack.addArrangedSubview($0) }
 
         let topBar = NSView()
         topBar.wantsLayer = true
-        topBar.layer?.backgroundColor = NSColor.white.withAlphaComponent(0.03).cgColor
+        topBar.layer?.backgroundColor = chromeUnifiedBackground.cgColor
         
         let topBarDivider = NSView()
         topBarDivider.wantsLayer = true
@@ -826,7 +830,7 @@ class ViewController: NSViewController {
             $0.translatesAutoresizingMaskIntoConstraints = false
         }
         [brandStack].forEach {
-            chromeHeader.addSubview($0)
+            shell.addSubview($0)
         }
         [leftTopBarCluster, rightTopBarCluster, searchPill, search].forEach {
             $0.translatesAutoresizingMaskIntoConstraints = false
@@ -844,7 +848,8 @@ class ViewController: NSViewController {
         meetingsDocument.addSubview(meetingsStack)
 
         NSLayoutConstraint.activate([
-            brandStack.leadingAnchor.constraint(equalTo: chromeHeader.leadingAnchor, constant: 84),
+            brandStack.leadingAnchor.constraint(equalTo: shell.leadingAnchor, constant: brandLeadingInset),
+            brandStack.trailingAnchor.constraint(lessThanOrEqualTo: leftTopBarCluster.leadingAnchor, constant: -12),
             brandStack.centerYAnchor.constraint(equalTo: chromeHeader.centerYAnchor, constant: -1),
 
             topBar.topAnchor.constraint(equalTo: content.topAnchor),
@@ -861,7 +866,8 @@ class ViewController: NSViewController {
             contentColumn.leadingAnchor.constraint(equalTo: content.leadingAnchor, constant: 8),
             contentColumn.trailingAnchor.constraint(equalTo: content.trailingAnchor, constant: -8),
 
-            leftTopBarCluster.leadingAnchor.constraint(equalTo: topBar.leadingAnchor, constant: 40),
+            leftTopBarCluster.leadingAnchor.constraint(greaterThanOrEqualTo: topBar.leadingAnchor, constant: 40),
+            leftTopBarCluster.leadingAnchor.constraint(greaterThanOrEqualTo: brandStack.trailingAnchor, constant: 16),
             leftTopBarCluster.centerYAnchor.constraint(equalTo: topBar.centerYAnchor),
             rightTopBarCluster.trailingAnchor.constraint(equalTo: topBar.trailingAnchor, constant: -12),
             rightTopBarCluster.centerYAnchor.constraint(equalTo: topBar.centerYAnchor),