Restyle home sidebar icons and simplify menu.

Use SF Symbol-based sidebar icons with consistent settings icon styling, and keep the home rail focused on Home, Meetings, and Scheduler.

Made-with: Cursor

zoom_app/ViewController.swift

@@ -784,7 +784,7 @@ class ViewController: NSViewController {
         let chromeHeader = NSView()
         chromeHeader.wantsLayer = true
         chromeHeader.layer?.backgroundColor = chromeUnifiedBackground.cgColor
-        let sidebar = makeSidebar(items: ["Home", "Meetings", "Chat", "Scheduler", "Hub", "More"], selected: "Home", style: .home)
+        let sidebar = makeSidebar(items: ["Home", "Meetings", "Scheduler"], selected: "Home", style: .home)
         let content = NSView()
         content.wantsLayer = true
         content.layer?.backgroundColor = NSColor.clear.cgColor
@@ -1161,19 +1161,76 @@ class ViewController: NSViewController {
             row.layer?.cornerRadius = style == .home ? 12 : 10
             row.widthAnchor.constraint(equalToConstant: style == .home ? 68 : 70).isActive = true
 
-            let icon = makeLabel(selectedRow ? "⌂" : "◻︎", size: style == .home ? 14 : 15, color: primaryText, weight: .regular, centered: true)
-            let label = makeLabel(item, size: style == .home ? 10 : 11, color: selectedRow ? primaryText : secondaryText, weight: .regular, centered: true)
-            [icon, label].forEach {
-                $0.translatesAutoresizingMaskIntoConstraints = false
-                row.addSubview($0)
+            if style == .home {
+                let iconContainer = NSView()
+                iconContainer.translatesAutoresizingMaskIntoConstraints = false
+                row.addSubview(iconContainer)
+
+                let iconView = NSImageView()
+                iconView.translatesAutoresizingMaskIntoConstraints = false
+                iconView.contentTintColor = primaryText
+                iconView.imageScaling = .scaleProportionallyUpOrDown
+                iconView.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 20, weight: .regular)
+                iconView.image = NSImage(systemSymbolName: sidebarSymbolName(for: item), accessibilityDescription: item)
+                iconContainer.addSubview(iconView)
+
+                let label = makeLabel(item, size: 10, color: selectedRow ? primaryText : secondaryText, weight: .regular, centered: true)
+                label.translatesAutoresizingMaskIntoConstraints = false
+                row.addSubview(label)
+
+                NSLayoutConstraint.activate([
+                    iconContainer.topAnchor.constraint(equalTo: row.topAnchor, constant: 9),
+                    iconContainer.centerXAnchor.constraint(equalTo: row.centerXAnchor),
+                    iconContainer.widthAnchor.constraint(equalToConstant: 26),
+                    iconContainer.heightAnchor.constraint(equalToConstant: 26),
+
+                    iconView.centerXAnchor.constraint(equalTo: iconContainer.centerXAnchor),
+                    iconView.centerYAnchor.constraint(equalTo: iconContainer.centerYAnchor),
+                    iconView.widthAnchor.constraint(equalToConstant: 22),
+                    iconView.heightAnchor.constraint(equalToConstant: 22),
+
+                    label.topAnchor.constraint(equalTo: iconContainer.bottomAnchor, constant: 6),
+                    label.centerXAnchor.constraint(equalTo: row.centerXAnchor),
+                    label.bottomAnchor.constraint(equalTo: row.bottomAnchor, constant: -8)
+                ])
+
+                if item == "Hub" {
+                    let badge = makeSidebarBadge(text: "1")
+                    badge.translatesAutoresizingMaskIntoConstraints = false
+                    iconContainer.addSubview(badge)
+                    NSLayoutConstraint.activate([
+                        badge.centerXAnchor.constraint(equalTo: iconContainer.trailingAnchor, constant: -2),
+                        badge.centerYAnchor.constraint(equalTo: iconContainer.topAnchor, constant: 5)
+                    ])
+                } else if item == "More" {
+                    let dot = NSView()
+                    dot.translatesAutoresizingMaskIntoConstraints = false
+                    dot.wantsLayer = true
+                    dot.layer?.backgroundColor = NSColor.systemRed.cgColor
+                    dot.layer?.cornerRadius = 4
+                    row.addSubview(dot)
+                    NSLayoutConstraint.activate([
+                        dot.widthAnchor.constraint(equalToConstant: 8),
+                        dot.heightAnchor.constraint(equalToConstant: 8),
+                        dot.centerXAnchor.constraint(equalTo: iconContainer.centerXAnchor),
+                        dot.bottomAnchor.constraint(equalTo: iconContainer.topAnchor, constant: -4)
+                    ])
+                }
+            } else {
+                let icon = makeLabel(selectedRow ? "⌂" : "◻︎", size: 15, color: primaryText, weight: .regular, centered: true)
+                let label = makeLabel(item, size: 11, color: selectedRow ? primaryText : secondaryText, weight: .regular, centered: true)
+                [icon, label].forEach {
+                    $0.translatesAutoresizingMaskIntoConstraints = false
+                    row.addSubview($0)
+                }
+                NSLayoutConstraint.activate([
+                    icon.topAnchor.constraint(equalTo: row.topAnchor, constant: 10),
+                    icon.centerXAnchor.constraint(equalTo: row.centerXAnchor),
+                    label.topAnchor.constraint(equalTo: icon.bottomAnchor, constant: 5),
+                    label.centerXAnchor.constraint(equalTo: row.centerXAnchor),
+                    label.bottomAnchor.constraint(equalTo: row.bottomAnchor, constant: -8)
+                ])
             }
-            NSLayoutConstraint.activate([
-                icon.topAnchor.constraint(equalTo: row.topAnchor, constant: style == .home ? 8 : 10),
-                icon.centerXAnchor.constraint(equalTo: row.centerXAnchor),
-                label.topAnchor.constraint(equalTo: icon.bottomAnchor, constant: style == .home ? 4 : 5),
-                label.centerXAnchor.constraint(equalTo: row.centerXAnchor),
-                label.bottomAnchor.constraint(equalTo: row.bottomAnchor, constant: style == .home ? -7 : -8)
-            ])
             stack.addArrangedSubview(row)
         }
         
@@ -1185,17 +1242,23 @@ class ViewController: NSViewController {
             
             let settingsBadge = NSView()
             settingsBadge.wantsLayer = true
-            settingsBadge.layer?.backgroundColor = NSColor.white.withAlphaComponent(0.03).cgColor
+            settingsBadge.layer?.backgroundColor = NSColor.clear.cgColor
             settingsBadge.layer?.cornerRadius = 12
             settingsBadge.translatesAutoresizingMaskIntoConstraints = false
-            settingsBadge.widthAnchor.constraint(equalToConstant: 40).isActive = true
-            settingsBadge.heightAnchor.constraint(equalToConstant: 40).isActive = true
-            let gear = makeLabel("⚙︎", size: 14, color: secondaryText, weight: .regular, centered: true)
-            gear.translatesAutoresizingMaskIntoConstraints = false
-            settingsBadge.addSubview(gear)
+            settingsBadge.widthAnchor.constraint(equalToConstant: 32).isActive = true
+            settingsBadge.heightAnchor.constraint(equalToConstant: 32).isActive = true
+            let gearIcon = NSImageView()
+            gearIcon.translatesAutoresizingMaskIntoConstraints = false
+            gearIcon.image = NSImage(systemSymbolName: "gearshape", accessibilityDescription: "Settings")
+            gearIcon.contentTintColor = primaryText
+            gearIcon.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 20, weight: .regular)
+            gearIcon.imageScaling = .scaleProportionallyUpOrDown
+            settingsBadge.addSubview(gearIcon)
             NSLayoutConstraint.activate([
-                gear.centerXAnchor.constraint(equalTo: settingsBadge.centerXAnchor),
-                gear.centerYAnchor.constraint(equalTo: settingsBadge.centerYAnchor)
+                gearIcon.centerXAnchor.constraint(equalTo: settingsBadge.centerXAnchor),
+                gearIcon.centerYAnchor.constraint(equalTo: settingsBadge.centerYAnchor),
+                gearIcon.widthAnchor.constraint(equalToConstant: 22),
+                gearIcon.heightAnchor.constraint(equalToConstant: 22)
             ])
             stack.addArrangedSubview(settingsBadge)
         }
@@ -1216,6 +1279,43 @@ class ViewController: NSViewController {
         return sidebar
     }
 
+    private func sidebarSymbolName(for item: String) -> String {
+        switch item {
+        case "Home":
+            return "house"
+        case "Meetings":
+            return "video"
+        case "Chat":
+            return "message"
+        case "Scheduler":
+            return "calendar.badge.clock"
+        case "Hub":
+            return "square.grid.3x3"
+        case "More":
+            return "ellipsis"
+        default:
+            return "circle"
+        }
+    }
+
+    private func makeSidebarBadge(text: String) -> NSView {
+        let badge = NSView()
+        badge.wantsLayer = true
+        badge.layer?.backgroundColor = NSColor.systemRed.cgColor
+        badge.layer?.cornerRadius = 12 / 2
+        badge.widthAnchor.constraint(equalToConstant: 12).isActive = true
+        badge.heightAnchor.constraint(equalToConstant: 12).isActive = true
+
+        let label = makeLabel(text, size: 8, color: .white, weight: .bold, centered: true)
+        label.translatesAutoresizingMaskIntoConstraints = false
+        badge.addSubview(label)
+        NSLayoutConstraint.activate([
+            label.centerXAnchor.constraint(equalTo: badge.centerXAnchor),
+            label.centerYAnchor.constraint(equalTo: badge.centerYAnchor, constant: -0.3)
+        ])
+        return badge
+    }
+
     @MainActor
     private func alignNativeTrafficLights() {
         guard let window = view.window else { return }