Polish sidebar selection, Join with URL heading, and sidebar icons.

Use solid primary blue for the selected sidebar row with white labels, left-align section headers and full-width rows, add an underlined Join with URL tab with smaller type, and refresh Video and Settings sidebar glyphs for a cleaner white template look.

Made-with: Cursor

meetings_app/ViewController.swift

@@ -82,6 +82,7 @@ private extension ViewController {
         let menuStack = NSStackView()
         menuStack.translatesAutoresizingMaskIntoConstraints = false
         menuStack.orientation = .vertical
+        menuStack.alignment = .leading
         menuStack.spacing = 10
 
         menuStack.addArrangedSubview(sidebarSectionTitle("Meetings"))
@@ -106,6 +107,10 @@ private extension ViewController {
             menuStack.topAnchor.constraint(equalTo: titleRow.bottomAnchor, constant: 20)
         ])
 
+        for subview in menuStack.arrangedSubviews {
+            subview.widthAnchor.constraint(equalTo: menuStack.widthAnchor).isActive = true
+        }
+
         return sidebar
     }
 
@@ -123,7 +128,7 @@ private extension ViewController {
 
         contentStack.addArrangedSubview(textLabel("Join Meetings", font: typography.pageTitle, color: palette.textPrimary))
         contentStack.addArrangedSubview(meetingTypeTabs())
-        contentStack.addArrangedSubview(textLabel("Join with URL", font: typography.sectionTitle, color: palette.textPrimary))
+        contentStack.addArrangedSubview(joinWithURLHeading())
         contentStack.addArrangedSubview(meetingUrlSection())
         contentStack.addArrangedSubview(scheduleHeader())
         contentStack.addArrangedSubview(textLabel("Tuesday, 14 Apr", font: typography.dateHeading, color: palette.textSecondary))
@@ -140,6 +145,39 @@ private extension ViewController {
         return panel
     }
 
+    func joinWithURLHeading() -> NSView {
+        let container = NSView()
+        container.translatesAutoresizingMaskIntoConstraints = false
+
+        let title = textLabel("Join with URL", font: typography.joinWithURLTitle, color: palette.textPrimary)
+        title.alignment = .left
+        title.setContentHuggingPriority(.defaultHigh, for: .horizontal)
+        title.setContentCompressionResistancePriority(.required, for: .horizontal)
+
+        let bar = NSView()
+        bar.translatesAutoresizingMaskIntoConstraints = false
+        bar.wantsLayer = true
+        bar.layer?.backgroundColor = palette.primaryBlue.cgColor
+        bar.heightAnchor.constraint(equalToConstant: 3).isActive = true
+
+        container.addSubview(title)
+        container.addSubview(bar)
+
+        NSLayoutConstraint.activate([
+            title.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+            title.topAnchor.constraint(equalTo: container.topAnchor),
+
+            bar.leadingAnchor.constraint(equalTo: title.leadingAnchor),
+            bar.topAnchor.constraint(equalTo: title.bottomAnchor, constant: 6),
+            bar.widthAnchor.constraint(equalTo: title.widthAnchor),
+            bar.bottomAnchor.constraint(equalTo: container.bottomAnchor),
+
+            container.trailingAnchor.constraint(equalTo: title.trailingAnchor)
+        ])
+
+        return container
+    }
+
     func meetingTypeTabs() -> NSView {
         let wrapper = NSView()
         wrapper.translatesAutoresizingMaskIntoConstraints = false
@@ -362,18 +400,18 @@ private extension ViewController {
     }
 
     func sidebarSectionTitle(_ text: String) -> NSTextField {
-        textLabel(text, font: typography.sidebarSection, color: palette.textMuted)
+        let field = textLabel(text, font: typography.sidebarSection, color: palette.textMuted)
+        field.alignment = .left
+        return field
     }
 
     func sidebarItem(_ text: String, icon: String, selected: Bool, logoImageName: String? = nil, logoIconWidth: CGFloat = 18, logoHeightMultiplier: CGFloat = 1, logoTemplate: Bool = true) -> NSView {
-        let item = roundedContainer(cornerRadius: 9, color: selected ? palette.sidebarItemSelectedBackground : .clear)
+        let item = roundedContainer(cornerRadius: 10, color: selected ? palette.primaryBlue : .clear)
         item.translatesAutoresizingMaskIntoConstraints = false
         item.heightAnchor.constraint(equalToConstant: 36).isActive = true
-        if selected {
-            styleSurface(item, borderColor: palette.sidebarItemSelectedBorder, borderWidth: 1, shadow: false)
-        }
+        item.layer?.borderWidth = 0
 
-        let tint = selected ? palette.textPrimary : palette.textSecondary
+        let tint = selected ? NSColor.white : palette.textSecondary
         let leadingView: NSView
         if let name = logoImageName, let logo = NSImage(named: name) {
             let imageView = NSImageView(image: logo)
@@ -390,6 +428,7 @@ private extension ViewController {
         }
 
         let titleLabel = textLabel(text, font: typography.sidebarItem, color: tint)
+        titleLabel.alignment = .left
 
         item.addSubview(leadingView)
         item.addSubview(titleLabel)
@@ -501,8 +540,6 @@ private struct Palette {
     let inputBorder = NSColor(calibratedRed: 38.0 / 255.0, green: 40.0 / 255.0, blue: 44.0 / 255.0, alpha: 1)
     let primaryBlue = NSColor(calibratedRed: 27.0 / 255.0, green: 115.0 / 255.0, blue: 232.0 / 255.0, alpha: 1)
     let primaryBlueBorder = NSColor(calibratedRed: 42.0 / 255.0, green: 118.0 / 255.0, blue: 220.0 / 255.0, alpha: 1)
-    let sidebarItemSelectedBackground = NSColor(calibratedRed: 27.0 / 255.0, green: 115.0 / 255.0, blue: 232.0 / 255.0, alpha: 0.22)
-    let sidebarItemSelectedBorder = NSColor(calibratedRed: 55.0 / 255.0, green: 125.0 / 255.0, blue: 215.0 / 255.0, alpha: 0.55)
     let cancelButton = NSColor(calibratedRed: 20.0 / 255.0, green: 21.0 / 255.0, blue: 24.0 / 255.0, alpha: 1)
     let meetingBadge = NSColor(calibratedRed: 0.88, green: 0.66, blue: 0.14, alpha: 1)
     let separator = NSColor(calibratedRed: 26.0 / 255.0, green: 27.0 / 255.0, blue: 30.0 / 255.0, alpha: 1)
@@ -519,7 +556,7 @@ private struct Typography {
     let sidebarItem = NSFont.systemFont(ofSize: 16, weight: .medium)
 
     let pageTitle = NSFont.systemFont(ofSize: 27, weight: .semibold)
-    let sectionTitle = NSFont.systemFont(ofSize: 20, weight: .semibold)
+    let joinWithURLTitle = NSFont.systemFont(ofSize: 17, weight: .semibold)
     let sectionTitleBold = NSFont.systemFont(ofSize: 25, weight: .bold)
     let dateHeading = NSFont.systemFont(ofSize: 18, weight: .medium)