Add sidebar navigation and settings popover

Wire sidebar to swap main content pages, add a Settings popover menu with dark mode toggle, and persist appearance preference.

Made-with: Cursor

meetings_app/AppDelegate.swift

@@ -9,13 +9,13 @@ import Cocoa
 
 @main
 class AppDelegate: NSObject, NSApplicationDelegate {
-
-    
-
+    private let darkModeDefaultsKey = "settings.darkModeEnabled"
 
     func applicationDidFinishLaunching(_ aNotification: Notification) {
-        // Force app-wide dark appearance for consistent dark UI.
-        NSApp.appearance = NSAppearance(named: .darkAqua)
+        // Match saved preference (defaults to dark if never set).
+        let hasValue = UserDefaults.standard.object(forKey: darkModeDefaultsKey) != nil
+        let darkEnabled = hasValue ? UserDefaults.standard.bool(forKey: darkModeDefaultsKey) : true
+        NSApp.appearance = NSAppearance(named: darkEnabled ? .darkAqua : .aqua)
     }
 
     func applicationWillTerminate(_ aNotification: Notification) {

meetings_app/ViewController.swift

@@ -7,10 +7,70 @@
 
 import Cocoa
 
+private enum SidebarPage: Int {
+    case joinMeetings = 0
+    case photo = 1
+    case video = 2
+    case tutorials = 3
+    case settings = 4
+}
+
+private enum MeetingProvider: Int {
+    case meet = 0
+    case zoom = 1
+    case teams = 2
+    case zoho = 3
+}
+
+private enum SettingsAction: Int {
+    case restore = 0
+    case rateUs = 1
+    case support = 2
+    case moreApps = 3
+    case shareApp = 4
+}
+
 final class ViewController: NSViewController {
     private let palette = Palette()
     private let typography = Typography()
 
+    private var mainContentHost: NSView?
+    private var sidebarRowViews: [SidebarPage: NSView] = [:]
+    private var tabViews: [MeetingProvider: NSView] = [:]
+    private var selectedSidebarPage: SidebarPage = .joinMeetings
+    private var selectedMeetingProvider: MeetingProvider = .meet
+    private var pageCache: [SidebarPage: NSView] = [:]
+    private var sidebarPageByView = [ObjectIdentifier: SidebarPage]()
+    private var meetingProviderByView = [ObjectIdentifier: MeetingProvider]()
+    private var settingsActionByView = [ObjectIdentifier: SettingsAction]()
+
+    private let darkModeDefaultsKey = "settings.darkModeEnabled"
+    private var darkModeEnabled: Bool {
+        get {
+            let hasValue = UserDefaults.standard.object(forKey: darkModeDefaultsKey) != nil
+            return hasValue ? UserDefaults.standard.bool(forKey: darkModeDefaultsKey) : true
+        }
+        set { UserDefaults.standard.set(newValue, forKey: darkModeDefaultsKey) }
+    }
+
+    private lazy var settingsPopover: NSPopover = {
+        let popover = NSPopover()
+        popover.behavior = .transient
+        popover.animates = true
+        popover.contentViewController = SettingsMenuViewController(
+            palette: palette,
+            typography: typography,
+            darkModeEnabled: darkModeEnabled,
+            onToggleDarkMode: { [weak self] enabled in
+                self?.setDarkMode(enabled)
+            },
+            onAction: { [weak self] action in
+                self?.handleSettingsAction(action)
+            }
+        )
+        return popover
+    }()
+
     override func viewDidLoad() {
         super.viewDidLoad()
         setupRootView()
@@ -21,7 +81,7 @@ final class ViewController: NSViewController {
         super.viewDidAppear()
         view.window?.setContentSize(NSSize(width: 1120, height: 690))
         view.window?.minSize = NSSize(width: 940, height: 600)
-        view.window?.title = "App for Google Meet"
+        applyWindowTitle(for: selectedSidebarPage)
     }
 
     override var representedObject: Any? {
@@ -31,7 +91,7 @@ final class ViewController: NSViewController {
 
 private extension ViewController {
     func setupRootView() {
-        view.appearance = NSAppearance(named: .darkAqua)
+        view.appearance = NSAppearance(named: darkModeEnabled ? .darkAqua : .aqua)
         view.wantsLayer = true
         view.layer?.backgroundColor = palette.pageBackground.cgColor
     }
@@ -57,6 +117,170 @@ private extension ViewController {
         splitContainer.addArrangedSubview(mainPanel)
     }
 
+    @objc private func sidebarItemClicked(_ sender: NSClickGestureRecognizer) {
+        guard let view = sender.view,
+              let page = sidebarPageByView[ObjectIdentifier(view)],
+              page != selectedSidebarPage || page == .settings else { return }
+
+        if page == .settings {
+            showSettingsPopover()
+            return
+        }
+
+        showSidebarPage(page)
+    }
+
+    @objc private func meetingTabClicked(_ sender: NSClickGestureRecognizer) {
+        guard let view = sender.view,
+              let provider = meetingProviderByView[ObjectIdentifier(view)],
+              provider != selectedMeetingProvider else { return }
+        selectedMeetingProvider = provider
+        updateTabAppearance()
+    }
+
+    private func showSidebarPage(_ page: SidebarPage) {
+        selectedSidebarPage = page
+        updateSidebarAppearance()
+        applyWindowTitle(for: page)
+
+        guard let host = mainContentHost else { return }
+        host.subviews.forEach { $0.removeFromSuperview() }
+        let child = viewForPage(page)
+        child.translatesAutoresizingMaskIntoConstraints = false
+        host.addSubview(child)
+        NSLayoutConstraint.activate([
+            child.leadingAnchor.constraint(equalTo: host.leadingAnchor),
+            child.trailingAnchor.constraint(equalTo: host.trailingAnchor),
+            child.topAnchor.constraint(equalTo: host.topAnchor),
+            child.bottomAnchor.constraint(equalTo: host.bottomAnchor)
+        ])
+    }
+
+    private func showSettingsPopover() {
+        guard let anchor = sidebarRowViews[.settings] else { return }
+        if settingsPopover.isShown {
+            settingsPopover.performClose(nil)
+            return
+        }
+
+        if let menu = settingsPopover.contentViewController as? SettingsMenuViewController {
+            menu.setDarkModeEnabled(darkModeEnabled)
+        }
+
+        settingsPopover.show(relativeTo: anchor.bounds, of: anchor, preferredEdge: .maxX)
+    }
+
+    private func setDarkMode(_ enabled: Bool) {
+        darkModeEnabled = enabled
+        NSApp.appearance = NSAppearance(named: enabled ? .darkAqua : .aqua)
+        view.appearance = NSAppearance(named: enabled ? .darkAqua : .aqua)
+    }
+
+    private func handleSettingsAction(_ action: SettingsAction) {
+        switch action {
+        case .restore:
+            showSimpleAlert(title: "Restore", message: "Restore action tapped.")
+        case .rateUs:
+            // Replace with your App Store URL when ready.
+            showSimpleAlert(title: "Rate Us", message: "Rate Us tapped (add App Store URL).")
+        case .support:
+            showSimpleAlert(title: "Support", message: "Support tapped (add support email / page).")
+        case .moreApps:
+            showSimpleAlert(title: "More Apps", message: "More Apps tapped (add developer page URL).")
+        case .shareApp:
+            let urlString = "https://example.com"
+            NSPasteboard.general.clearContents()
+            NSPasteboard.general.setString(urlString, forType: .string)
+            showSimpleAlert(title: "Share App", message: "Link copied to clipboard:\n\(urlString)")
+        }
+    }
+
+    private func showSimpleAlert(title: String, message: String) {
+        let alert = NSAlert()
+        alert.messageText = title
+        alert.informativeText = message
+        alert.addButton(withTitle: "OK")
+        alert.runModal()
+    }
+
+    private func viewForPage(_ page: SidebarPage) -> NSView {
+        if let cached = pageCache[page] { return cached }
+        let built: NSView
+        switch page {
+        case .joinMeetings:
+            built = makeJoinMeetingsContent()
+        case .photo:
+            built = makePlaceholderPage(title: "Photo", subtitle: "Backgrounds — choose a photo background for your meetings.")
+        case .video:
+            built = makePlaceholderPage(title: "Video", subtitle: "Backgrounds — video background options.")
+        case .tutorials:
+            built = makePlaceholderPage(title: "Tutorials", subtitle: "Learn how to use the app.")
+        case .settings:
+            built = makePlaceholderPage(title: "Settings", subtitle: "Preferences and account options.")
+        }
+        pageCache[page] = built
+        return built
+    }
+
+    private func makePlaceholderPage(title: String, subtitle: String) -> NSView {
+        let panel = NSView()
+        panel.translatesAutoresizingMaskIntoConstraints = false
+        let titleLabel = textLabel(title, font: typography.pageTitle, color: palette.textPrimary)
+        titleLabel.translatesAutoresizingMaskIntoConstraints = false
+        let sub = textLabel(subtitle, font: typography.fieldLabel, color: palette.textSecondary)
+        sub.translatesAutoresizingMaskIntoConstraints = false
+        panel.addSubview(titleLabel)
+        panel.addSubview(sub)
+        NSLayoutConstraint.activate([
+            titleLabel.leadingAnchor.constraint(equalTo: panel.leadingAnchor, constant: 28),
+            titleLabel.topAnchor.constraint(equalTo: panel.topAnchor, constant: 26),
+            sub.leadingAnchor.constraint(equalTo: titleLabel.leadingAnchor),
+            sub.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 8)
+        ])
+        return panel
+    }
+
+    private func applyWindowTitle(for page: SidebarPage) {
+        switch page {
+        case .joinMeetings:
+            view.window?.title = "App for Google Meet"
+        case .photo:
+            view.window?.title = "Backgrounds — Photo"
+        case .video:
+            view.window?.title = "Backgrounds — Video"
+        case .tutorials:
+            view.window?.title = "Tutorials"
+        case .settings:
+            view.window?.title = "Settings"
+        }
+    }
+
+    private func updateSidebarAppearance() {
+        for (page, row) in sidebarRowViews {
+            applySidebarRowStyle(row, page: page, logoTemplate: logoTemplateForSidebarPage(page))
+        }
+    }
+
+    private func updateTabAppearance() {
+        for (provider, tab) in tabViews {
+            applyTabStyle(tab, provider: provider, logoTemplate: logoTemplateForMeetingProvider(provider))
+        }
+    }
+
+    private func logoTemplateForSidebarPage(_ page: SidebarPage) -> Bool {
+        switch page {
+        case .photo, .tutorials: return false
+        case .joinMeetings, .video, .settings: return true
+        }
+    }
+
+    private func logoTemplateForMeetingProvider(_ provider: MeetingProvider) -> Bool {
+        switch provider {
+        case .teams: return false
+        case .meet, .zoom, .zoho: return true
+        }
+    }
+
     func makeSidebar() -> NSView {
         let sidebar = NSView()
         sidebar.translatesAutoresizingMaskIntoConstraints = false
@@ -86,13 +310,23 @@ private extension ViewController {
         menuStack.spacing = 10
 
         menuStack.addArrangedSubview(sidebarSectionTitle("Meetings"))
-        menuStack.addArrangedSubview(sidebarItem("Join Meetings", icon: "􀉣", selected: true, logoImageName: "JoinMeetingsLogo", logoIconWidth: 24, logoHeightMultiplier: 56.0 / 52.0))
+        let joinRow = sidebarItem("Join Meetings", icon: "􀉣", page: .joinMeetings, logoImageName: "JoinMeetingsLogo", logoIconWidth: 24, logoHeightMultiplier: 56.0 / 52.0)
+        menuStack.addArrangedSubview(joinRow)
+        sidebarRowViews[.joinMeetings] = joinRow
         menuStack.addArrangedSubview(sidebarSectionTitle("Backgrounds"))
-        menuStack.addArrangedSubview(sidebarItem("Photo", icon: "􀏂", selected: false, logoImageName: "SidebarPhotoLogo", logoIconWidth: 24, logoHeightMultiplier: 82.0 / 62.0, logoTemplate: false))
-        menuStack.addArrangedSubview(sidebarItem("Video", icon: "􀎚", selected: false, logoImageName: "SidebarVideoLogo", logoIconWidth: 28, logoHeightMultiplier: 52.0 / 60.0))
+        let photoRow = sidebarItem("Photo", icon: "􀏂", page: .photo, logoImageName: "SidebarPhotoLogo", logoIconWidth: 24, logoHeightMultiplier: 82.0 / 62.0, logoTemplate: false)
+        menuStack.addArrangedSubview(photoRow)
+        sidebarRowViews[.photo] = photoRow
+        let videoRow = sidebarItem("Video", icon: "􀎚", page: .video, logoImageName: "SidebarVideoLogo", logoIconWidth: 28, logoHeightMultiplier: 52.0 / 60.0)
+        menuStack.addArrangedSubview(videoRow)
+        sidebarRowViews[.video] = videoRow
         menuStack.addArrangedSubview(sidebarSectionTitle("Additional"))
-        menuStack.addArrangedSubview(sidebarItem("Tutorials", icon: "􀛩", selected: false, logoImageName: "SidebarTutorialsLogo", logoIconWidth: 24, logoHeightMultiplier: 50.0 / 60.0, logoTemplate: false))
-        menuStack.addArrangedSubview(sidebarItem("Settings", icon: "􀍟", selected: false, logoImageName: "SidebarSettingsLogo", logoIconWidth: 28, logoHeightMultiplier: 68.0 / 62.0))
+        let tutorialsRow = sidebarItem("Tutorials", icon: "􀛩", page: .tutorials, logoImageName: "SidebarTutorialsLogo", logoIconWidth: 24, logoHeightMultiplier: 50.0 / 60.0, logoTemplate: false)
+        menuStack.addArrangedSubview(tutorialsRow)
+        sidebarRowViews[.tutorials] = tutorialsRow
+        let settingsRow = sidebarItem("Settings", icon: "􀍟", page: .settings, logoImageName: "SidebarSettingsLogo", logoIconWidth: 28, logoHeightMultiplier: 68.0 / 62.0, showsDisclosure: true)
+        menuStack.addArrangedSubview(settingsRow)
+        sidebarRowViews[.settings] = settingsRow
 
         sidebar.addSubview(titleRow)
         sidebar.addSubview(menuStack)
@@ -120,6 +354,25 @@ private extension ViewController {
         panel.wantsLayer = true
         panel.layer?.backgroundColor = palette.pageBackground.cgColor
 
+        let host = NSView()
+        host.translatesAutoresizingMaskIntoConstraints = false
+        panel.addSubview(host)
+        NSLayoutConstraint.activate([
+            host.leadingAnchor.constraint(equalTo: panel.leadingAnchor),
+            host.trailingAnchor.constraint(equalTo: panel.trailingAnchor),
+            host.topAnchor.constraint(equalTo: panel.topAnchor),
+            host.bottomAnchor.constraint(equalTo: panel.bottomAnchor)
+        ])
+        mainContentHost = host
+        showSidebarPage(.joinMeetings)
+
+        return panel
+    }
+
+    func makeJoinMeetingsContent() -> NSView {
+        let panel = NSView()
+        panel.translatesAutoresizingMaskIntoConstraints = false
+
         let contentStack = NSStackView()
         contentStack.translatesAutoresizingMaskIntoConstraints = false
         contentStack.orientation = .vertical
@@ -192,10 +445,18 @@ private extension ViewController {
         stack.distribution = .fillEqually
         stack.spacing = 4
 
-        stack.addArrangedSubview(topTab("Meet", icon: "􀤆", selected: true, logoImageName: "MeetLogo"))
-        stack.addArrangedSubview(topTab("Zoom", icon: "􀤉", selected: false, logoImageName: "ZoomLogo", logoPointSize: 34))
-        stack.addArrangedSubview(topTab("Teams", icon: "􀉨", selected: false, logoImageName: "TeamsLogo", logoPointSize: 26, logoHeightMultiplier: 62.0 / 50.0, logoTemplate: false))
-        stack.addArrangedSubview(topTab("Zoho", icon: "􀯶", selected: false, logoImageName: "ZohoLogo", logoPointSize: 28))
+        let meetTab = topTab("Meet", icon: "􀤆", provider: .meet, logoImageName: "MeetLogo")
+        stack.addArrangedSubview(meetTab)
+        tabViews[.meet] = meetTab
+        let zoomTab = topTab("Zoom", icon: "􀤉", provider: .zoom, logoImageName: "ZoomLogo", logoPointSize: 34)
+        stack.addArrangedSubview(zoomTab)
+        tabViews[.zoom] = zoomTab
+        let teamsTab = topTab("Teams", icon: "􀉨", provider: .teams, logoImageName: "TeamsLogo", logoPointSize: 26, logoHeightMultiplier: 62.0 / 50.0, logoTemplate: false)
+        stack.addArrangedSubview(teamsTab)
+        tabViews[.teams] = teamsTab
+        let zohoTab = topTab("Zoho", icon: "􀯶", provider: .zoho, logoImageName: "ZohoLogo", logoPointSize: 28)
+        stack.addArrangedSubview(zohoTab)
+        tabViews[.zoho] = zohoTab
 
         shell.addSubview(stack)
         wrapper.addSubview(shell)
@@ -367,6 +628,188 @@ private extension ViewController {
     }
 }
 
+/// Ensures `NSClickGestureRecognizer` on the row receives clicks instead of child label/image views swallowing them.
+private final class RowHitTestView: NSView {
+    override func hitTest(_ point: NSPoint) -> NSView? {
+        guard let superview else { return nil }
+        let local = convert(point, from: superview)
+        return bounds.contains(local) ? self : nil
+    }
+}
+
+private final class SettingsMenuViewController: NSViewController {
+    private let palette: Palette
+    private let typography: Typography
+    private let onToggleDarkMode: (Bool) -> Void
+    private let onAction: (SettingsAction) -> Void
+
+    private var darkToggle: NSSwitch?
+
+    init(
+        palette: Palette,
+        typography: Typography,
+        darkModeEnabled: Bool,
+        onToggleDarkMode: @escaping (Bool) -> Void,
+        onAction: @escaping (SettingsAction) -> Void
+    ) {
+        self.palette = palette
+        self.typography = typography
+        self.onToggleDarkMode = onToggleDarkMode
+        self.onAction = onAction
+        super.init(nibName: nil, bundle: nil)
+        self.view = makeView(darkModeEnabled: darkModeEnabled)
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        nil
+    }
+
+    func setDarkModeEnabled(_ enabled: Bool) {
+        darkToggle?.state = enabled ? .on : .off
+    }
+
+    private func makeView(darkModeEnabled: Bool) -> NSView {
+        let root = NSView()
+        root.translatesAutoresizingMaskIntoConstraints = false
+
+        let card = roundedCard()
+        root.addSubview(card)
+        NSLayoutConstraint.activate([
+            card.leadingAnchor.constraint(equalTo: root.leadingAnchor),
+            card.trailingAnchor.constraint(equalTo: root.trailingAnchor),
+            card.topAnchor.constraint(equalTo: root.topAnchor),
+            card.bottomAnchor.constraint(equalTo: root.bottomAnchor),
+            root.widthAnchor.constraint(equalToConstant: 260)
+        ])
+
+        let stack = NSStackView()
+        stack.translatesAutoresizingMaskIntoConstraints = false
+        stack.orientation = .vertical
+        stack.spacing = 6
+        stack.alignment = .leading
+        card.addSubview(stack)
+
+        NSLayoutConstraint.activate([
+            stack.leadingAnchor.constraint(equalTo: card.leadingAnchor, constant: 14),
+            stack.trailingAnchor.constraint(equalTo: card.trailingAnchor, constant: -14),
+            stack.topAnchor.constraint(equalTo: card.topAnchor, constant: 14),
+            stack.bottomAnchor.constraint(lessThanOrEqualTo: card.bottomAnchor, constant: -14)
+        ])
+
+        stack.addArrangedSubview(settingsDarkModeRow(enabled: darkModeEnabled))
+        stack.addArrangedSubview(settingsActionRow(icon: "⟳", title: "Restore", action: .restore))
+        stack.addArrangedSubview(settingsActionRow(icon: "★", title: "Rate Us", action: .rateUs))
+        stack.addArrangedSubview(settingsActionRow(icon: "💬", title: "Support", action: .support))
+        stack.addArrangedSubview(settingsActionRow(icon: "⋯", title: "More Apps", action: .moreApps))
+        stack.addArrangedSubview(settingsActionRow(icon: "⤴︎", title: "Share App", action: .shareApp))
+
+        for v in stack.arrangedSubviews {
+            v.widthAnchor.constraint(equalTo: stack.widthAnchor).isActive = true
+        }
+
+        return root
+    }
+
+    private func roundedCard() -> NSView {
+        let view = NSView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.wantsLayer = true
+        view.layer?.cornerRadius = 12
+        view.layer?.backgroundColor = NSColor(calibratedWhite: 0.12, alpha: 1).cgColor
+        view.layer?.borderColor = NSColor(calibratedWhite: 0.22, alpha: 1).cgColor
+        view.layer?.borderWidth = 1
+        view.layer?.shadowColor = NSColor.black.cgColor
+        view.layer?.shadowOpacity = 0.28
+        view.layer?.shadowOffset = CGSize(width: 0, height: -1)
+        view.layer?.shadowRadius = 10
+        return view
+    }
+
+    private func settingsDarkModeRow(enabled: Bool) -> NSView {
+        let row = RowHitTestView()
+        row.translatesAutoresizingMaskIntoConstraints = false
+        row.heightAnchor.constraint(equalToConstant: 44).isActive = true
+
+        let icon = NSTextField(labelWithString: "◐")
+        icon.translatesAutoresizingMaskIntoConstraints = false
+        icon.font = NSFont.systemFont(ofSize: 18, weight: .medium)
+        icon.textColor = .white
+
+        let title = NSTextField(labelWithString: "Dark Mode")
+        title.translatesAutoresizingMaskIntoConstraints = false
+        title.font = NSFont.systemFont(ofSize: 16, weight: .semibold)
+        title.textColor = .white
+
+        let toggle = NSSwitch()
+        toggle.translatesAutoresizingMaskIntoConstraints = false
+        toggle.state = enabled ? .on : .off
+        toggle.target = self
+        toggle.action = #selector(darkModeToggled(_:))
+        darkToggle = toggle
+
+        row.addSubview(icon)
+        row.addSubview(title)
+        row.addSubview(toggle)
+
+        NSLayoutConstraint.activate([
+            icon.leadingAnchor.constraint(equalTo: row.leadingAnchor, constant: 4),
+            icon.centerYAnchor.constraint(equalTo: row.centerYAnchor),
+
+            title.leadingAnchor.constraint(equalTo: icon.trailingAnchor, constant: 10),
+            title.centerYAnchor.constraint(equalTo: row.centerYAnchor),
+
+            toggle.trailingAnchor.constraint(equalTo: row.trailingAnchor, constant: -2),
+            toggle.centerYAnchor.constraint(equalTo: row.centerYAnchor)
+        ])
+
+        return row
+    }
+
+    private func settingsActionRow(icon: String, title: String, action: SettingsAction) -> NSView {
+        let row = RowHitTestView()
+        row.translatesAutoresizingMaskIntoConstraints = false
+        row.heightAnchor.constraint(equalToConstant: 42).isActive = true
+
+        let iconLabel = NSTextField(labelWithString: icon)
+        iconLabel.translatesAutoresizingMaskIntoConstraints = false
+        iconLabel.font = NSFont.systemFont(ofSize: 18, weight: .medium)
+        iconLabel.textColor = .white
+
+        let titleLabel = NSTextField(labelWithString: title)
+        titleLabel.translatesAutoresizingMaskIntoConstraints = false
+        titleLabel.font = NSFont.systemFont(ofSize: 16, weight: .semibold)
+        titleLabel.textColor = .white
+
+        row.addSubview(iconLabel)
+        row.addSubview(titleLabel)
+
+        NSLayoutConstraint.activate([
+            iconLabel.leadingAnchor.constraint(equalTo: row.leadingAnchor, constant: 4),
+            iconLabel.centerYAnchor.constraint(equalTo: row.centerYAnchor),
+            titleLabel.leadingAnchor.constraint(equalTo: iconLabel.trailingAnchor, constant: 10),
+            titleLabel.centerYAnchor.constraint(equalTo: row.centerYAnchor)
+        ])
+
+        let click = NSClickGestureRecognizer(target: self, action: #selector(settingsActionClicked(_:)))
+        row.addGestureRecognizer(click)
+        row.identifier = NSUserInterfaceItemIdentifier(rawValue: "\(action.rawValue)")
+
+        return row
+    }
+
+    @objc private func darkModeToggled(_ sender: NSSwitch) {
+        onToggleDarkMode(sender.state == .on)
+    }
+
+    @objc private func settingsActionClicked(_ sender: NSClickGestureRecognizer) {
+        guard let view = sender.view,
+              let raw = Int(view.identifier?.rawValue ?? ""),
+              let action = SettingsAction(rawValue: raw) else { return }
+        onAction(action)
+    }
+}
+
 private extension ViewController {
     func roundedContainer(cornerRadius: CGFloat, color: NSColor) -> NSView {
         let view = NSView()
@@ -408,13 +851,16 @@ private extension ViewController {
         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: 10, color: selected ? palette.primaryBlue : .clear)
+    func sidebarItem(_ text: String, icon: String, page: SidebarPage, logoImageName: String? = nil, logoIconWidth: CGFloat = 18, logoHeightMultiplier: CGFloat = 1, logoTemplate: Bool = true, showsDisclosure: Bool = false) -> NSView {
+        let item = RowHitTestView()
+        item.wantsLayer = true
+        item.layer?.cornerRadius = 10
+        item.layer?.backgroundColor = NSColor.clear.cgColor
         item.translatesAutoresizingMaskIntoConstraints = false
         item.heightAnchor.constraint(equalToConstant: 36).isActive = true
         item.layer?.borderWidth = 0
+        sidebarPageByView[ObjectIdentifier(item)] = page
 
-        let tint = selected ? NSColor.white : palette.textSecondary
         let leadingView: NSView
         if let name = logoImageName, let logo = NSImage(named: name) {
             let imageView = NSImageView(image: logo)
@@ -422,15 +868,12 @@ private extension ViewController {
             imageView.imageScaling = .scaleProportionallyDown
             imageView.imageAlignment = .alignCenter
             imageView.isEditable = false
-            if logoTemplate {
-                imageView.contentTintColor = tint
-            }
             leadingView = imageView
         } else {
-            leadingView = textLabel(icon, font: typography.sidebarIcon, color: tint)
+            leadingView = textLabel(icon, font: typography.sidebarIcon, color: palette.textSecondary)
         }
 
-        let titleLabel = textLabel(text, font: typography.sidebarItem, color: tint)
+        let titleLabel = textLabel(text, font: typography.sidebarItem, color: palette.textSecondary)
         titleLabel.alignment = .left
 
         item.addSubview(leadingView)
@@ -442,6 +885,21 @@ private extension ViewController {
             titleLabel.leadingAnchor.constraint(equalTo: leadingView.trailingAnchor, constant: 8),
             titleLabel.centerYAnchor.constraint(equalTo: item.centerYAnchor)
         ]
+
+        if showsDisclosure {
+            let chevron = textLabel("›", font: NSFont.systemFont(ofSize: 22, weight: .semibold), color: palette.textSecondary)
+            chevron.translatesAutoresizingMaskIntoConstraints = false
+            chevron.alignment = .right
+            item.addSubview(chevron)
+            constraints.append(contentsOf: [
+                chevron.trailingAnchor.constraint(equalTo: item.trailingAnchor, constant: -10),
+                chevron.centerYAnchor.constraint(equalTo: item.centerYAnchor),
+                titleLabel.trailingAnchor.constraint(lessThanOrEqualTo: chevron.leadingAnchor, constant: -8)
+            ])
+        } else {
+            constraints.append(titleLabel.trailingAnchor.constraint(lessThanOrEqualTo: item.trailingAnchor, constant: -10))
+        }
+
         if logoImageName != nil {
             let h = logoIconWidth * logoHeightMultiplier
             constraints.append(contentsOf: [
@@ -451,12 +909,42 @@ private extension ViewController {
         }
         NSLayoutConstraint.activate(constraints)
 
+        applySidebarRowStyle(item, page: page, logoTemplate: logoTemplate)
+
+        let click = NSClickGestureRecognizer(target: self, action: #selector(sidebarItemClicked(_:)))
+        item.addGestureRecognizer(click)
+
         return item
     }
 
-    func topTab(_ title: String, icon: String, selected: Bool, logoImageName: String? = nil, logoPointSize: CGFloat = 26, logoHeightMultiplier: CGFloat = 1, logoTemplate: Bool = true) -> NSView {
-        let tab = roundedContainer(cornerRadius: 19, color: selected ? palette.primaryBlue : .clear)
+    func applySidebarRowStyle(_ item: NSView, page: SidebarPage, logoTemplate: Bool) {
+        let selected = (page == selectedSidebarPage)
+        item.layer?.backgroundColor = (selected ? palette.primaryBlue : NSColor.clear).cgColor
+        let tint = selected ? NSColor.white : palette.textSecondary
+        guard item.subviews.count >= 2 else { return }
+        let leading = item.subviews[0]
+        let title = item.subviews.first { $0 is NSTextField } as? NSTextField
+        title?.textColor = tint
+        // Optional disclosure chevron (if present) is the last text field.
+        if let chevron = item.subviews.last as? NSTextField, chevron !== title {
+            chevron.textColor = tint
+        }
+        if let imageView = leading as? NSImageView {
+            if logoTemplate {
+                imageView.contentTintColor = tint
+            }
+        } else if let iconField = leading as? NSTextField {
+            iconField.textColor = tint
+        }
+    }
+
+    func topTab(_ title: String, icon: String, provider: MeetingProvider, logoImageName: String? = nil, logoPointSize: CGFloat = 26, logoHeightMultiplier: CGFloat = 1, logoTemplate: Bool = true) -> NSView {
+        let tab = RowHitTestView()
+        tab.wantsLayer = true
+        tab.layer?.cornerRadius = 19
+        tab.layer?.backgroundColor = NSColor.clear.cgColor
         tab.translatesAutoresizingMaskIntoConstraints = false
+        meetingProviderByView[ObjectIdentifier(tab)] = provider
 
         let leadingView: NSView
         if let name = logoImageName, let logo = NSImage(named: name) {
@@ -492,9 +980,31 @@ private extension ViewController {
         }
         NSLayoutConstraint.activate(constraints)
 
+        applyTabStyle(tab, provider: provider, logoTemplate: logoTemplate)
+
+        let click = NSClickGestureRecognizer(target: self, action: #selector(meetingTabClicked(_:)))
+        tab.addGestureRecognizer(click)
+
         return tab
     }
 
+    func applyTabStyle(_ tab: NSView, provider: MeetingProvider, logoTemplate: Bool) {
+        let selected = (provider == selectedMeetingProvider)
+        tab.layer?.backgroundColor = (selected ? palette.primaryBlue : NSColor.clear).cgColor
+        guard tab.subviews.count >= 2 else { return }
+        let leading = tab.subviews[0]
+        let title = tab.subviews[1] as? NSTextField
+        let textColor = palette.textPrimary
+        title?.textColor = textColor
+        if let imageView = leading as? NSImageView {
+            if logoTemplate {
+                imageView.contentTintColor = textColor
+            }
+        } else if let iconField = leading as? NSTextField {
+            iconField.textColor = textColor
+        }
+    }
+
     func actionButton(title: String, color: NSColor, textColor: NSColor, width: CGFloat) -> NSView {
         let button = roundedContainer(cornerRadius: 9, color: color)
         button.translatesAutoresizingMaskIntoConstraints = false