feat: make workspace apps collapsible

Author: ethanndickson

Coder-Desktop/Coder-Desktop/Theme.swift

@@ -13,5 +13,9 @@ enum Theme {
         static let appIconSize: CGSize = .init(width: appIconWidth, height: appIconHeight)
     }
 
+    enum Animation {
+        static let collapsibleDuration = 0.2
+    }
+
     static let defaultVisibleAgents = 5
 }

Coder-Desktop/Coder-Desktop/VPN/MenuState.swift

@@ -10,12 +10,9 @@ struct Agent: Identifiable, Equatable, Comparable, Hashable {
     let wsName: String
     let wsID: UUID
 
-    // Agents are sorted by status, and then by name
+    // Agents are sorted by name
     static func < (lhs: Agent, rhs: Agent) -> Bool {
-        if lhs.status != rhs.status {
-            return lhs.status < rhs.status
-        }
-        return lhs.wsName.localizedCompare(rhs.wsName) == .orderedAscending
+        lhs.wsName.localizedCompare(rhs.wsName) == .orderedAscending
     }
 
     let primaryHost: String

Coder-Desktop/Coder-Desktop/Views/VPN/Agents.swift

@@ -4,6 +4,7 @@ struct Agents<VPN: VPNService>: View {
     @EnvironmentObject var vpn: VPN
     @EnvironmentObject var state: AppState
     @State private var viewAll = false
+    @State private var expandedItem: VPNMenuItem.ID?
     private let defaultVisibleRows = 5
 
     let inspection = Inspection<Self>()
@@ -15,7 +16,7 @@ struct Agents<VPN: VPNService>: View {
                 let items = vpn.menuState.sorted
                 let visibleItems = viewAll ? items[...] : items.prefix(defaultVisibleRows)
                 ForEach(visibleItems, id: \.id) { agent in
-                    MenuItemView(item: agent, baseAccessURL: state.baseAccessURL!)
+                    MenuItemView(item: agent, baseAccessURL: state.baseAccessURL!, expandedItem: $expandedItem)
                         .padding(.horizontal, Theme.Size.trayMargin)
                 }
                 if items.count == 0 {

Coder-Desktop/Coder-Desktop/Views/VPN/VPNMenuItem.swift

@@ -35,6 +35,13 @@ enum VPNMenuItem: Equatable, Comparable, Identifiable {
         }
     }
 
+    func primaryHost(hostnameSuffix: String) -> String {
+        switch self {
+        case let .agent(agent): agent.primaryHost
+        case .offlineWorkspace: "\(wsName).\(hostnameSuffix)"
+        }
+    }
+
     static func < (lhs: VPNMenuItem, rhs: VPNMenuItem) -> Bool {
         switch (lhs, rhs) {
         case let (.agent(lhsAgent), .agent(rhsAgent)):
@@ -52,23 +59,22 @@ enum VPNMenuItem: Equatable, Comparable, Identifiable {
 
 struct MenuItemView: View {
     @EnvironmentObject var state: AppState
+    @Environment(\.openURL) private var openURL
 
     private let logger = Logger(subsystem: Bundle.main.bundleIdentifier!, category: "VPNMenu")
 
     let item: VPNMenuItem
     let baseAccessURL: URL
+    @Binding var expandedItem: VPNMenuItem.ID?
 
     @State private var nameIsSelected: Bool = false
-    @State private var copyIsSelected: Bool = false
 
-    private let defaultVisibleApps = 5
     @State private var apps: [WorkspaceApp] = []
 
+    var hasApps: Bool { !apps.isEmpty }
+
     private var itemName: AttributedString {
-        let name = switch item {
-        case let .agent(agent): agent.primaryHost
-        case .offlineWorkspace: "\(item.wsName).\(state.hostnameSuffix)"
-        }
+        let name = item.primaryHost(hostnameSuffix: state.hostnameSuffix)
 
         var formattedName = AttributedString(name)
         formattedName.foregroundColor = .primary
@@ -79,17 +85,33 @@ struct MenuItemView: View {
         return formattedName
     }
 
+    private var isExpanded: Bool {
+        expandedItem == item.id
+    }
+
     private var wsURL: URL {
         // TODO: CoderVPN currently only supports owned workspaces
         baseAccessURL.appending(path: "@me").appending(path: item.wsName)
     }
 
+    private func toggleExpanded() {
+        if isExpanded {
+            withAnimation(.snappy(duration: Theme.Animation.collapsibleDuration)) {
+                expandedItem = nil
+            }
+        } else {
+            withAnimation(.snappy(duration: Theme.Animation.collapsibleDuration)) {
+                expandedItem = item.id
+            }
+        }
+    }
+
     var body: some View {
         VStack(spacing: 0) {
-            HStack(spacing: 0) {
-                Link(destination: wsURL) {
+            HStack(spacing: 3) {
+                Button(action: toggleExpanded) {
                     HStack(spacing: Theme.Size.trayPadding) {
-                        StatusDot(color: item.status.color)
+                        AnimatedChevron(isExpanded: isExpanded, color: .secondary)
                         Text(itemName).lineLimit(1).truncationMode(.tail)
                         Spacer()
                     }.padding(.horizontal, Theme.Size.trayPadding)
@@ -98,42 +120,24 @@ struct MenuItemView: View {
                         .foregroundStyle(nameIsSelected ? .white : .primary)
                         .background(nameIsSelected ? Color.accentColor.opacity(0.8) : .clear)
                         .clipShape(.rect(cornerRadius: Theme.Size.rectCornerRadius))
-                        .onHoverWithPointingHand { hovering in
+                        .onHover { hovering in
                             nameIsSelected = hovering
                         }
-                    Spacer()
-                }.buttonStyle(.plain)
-                if case let .agent(agent) = item {
-                    Button {
-                        NSPasteboard.general.clearContents()
-                        NSPasteboard.general.setString(agent.primaryHost, forType: .string)
-                    } label: {
-                        Image(systemName: "doc.on.doc")
-                            .symbolVariant(.fill)
-                            .padding(3)
-                            .contentShape(Rectangle())
-                    }.foregroundStyle(copyIsSelected ? .white : .primary)
-                        .imageScale(.small)
-                        .background(copyIsSelected ? Color.accentColor.opacity(0.8) : .clear)
-                        .clipShape(.rect(cornerRadius: Theme.Size.rectCornerRadius))
-                        .onHoverWithPointingHand { hovering in copyIsSelected = hovering }
-                        .buttonStyle(.plain)
-                        .padding(.trailing, Theme.Size.trayMargin)
-                }
+                }.buttonStyle(.plain).padding(.trailing, 3)
+                MenuItemIcons(item: item, wsURL: wsURL)
             }
-            if !apps.isEmpty {
-                HStack(spacing: 17) {
-                    ForEach(apps.prefix(defaultVisibleApps), id: \.id) { app in
-                        WorkspaceAppIcon(app: app)
-                            .frame(width: Theme.Size.appIconWidth, height: Theme.Size.appIconHeight)
-                    }
-                    if apps.count < defaultVisibleApps {
-                        Spacer()
+            if isExpanded {
+                if hasApps {
+                    MenuItemCollapsibleView(apps: apps)
+                } else {
+                    HStack {
+                        Text(item.status == .off ? "Workspace is offline." : "No apps available.")
+                            .font(.body)
+                            .foregroundColor(.secondary)
+                            .padding(.horizontal, Theme.Size.trayInset)
+                            .padding(.top, 7)
                     }
                 }
-                .padding(.leading, apps.count < defaultVisibleApps ? 14 : 0)
-                .padding(.bottom, 5)
-                .padding(.top, 10)
             }
         }
         .task { await loadApps() }
@@ -172,3 +176,99 @@ struct MenuItemView: View {
         }
     }
 }
+
+struct MenuItemCollapsibleView: View {
+    private let defaultVisibleApps = 5
+    let apps: [WorkspaceApp]
+
+    var body: some View {
+        HStack(spacing: 17) {
+            ForEach(apps.prefix(defaultVisibleApps), id: \.id) { app in
+                WorkspaceAppIcon(app: app)
+                    .frame(width: Theme.Size.appIconWidth, height: Theme.Size.appIconHeight)
+            }
+            if apps.count < defaultVisibleApps {
+                Spacer()
+            }
+        }
+        .padding(.leading, apps.count < defaultVisibleApps ? 14 : 0)
+        .padding(.bottom, 5)
+        .padding(.top, 10)
+    }
+}
+
+struct MenuItemIcons: View {
+    @EnvironmentObject var state: AppState
+    @Environment(\.openURL) private var openURL
+
+    let item: VPNMenuItem
+    let wsURL: URL
+
+    @State private var copyIsSelected: Bool = false
+    @State private var webIsSelected: Bool = false
+
+    func copyToClipboard() {
+        let primaryHost = item.primaryHost(hostnameSuffix: state.hostnameSuffix)
+        NSPasteboard.general.clearContents()
+        NSPasteboard.general.setString(primaryHost, forType: .string)
+    }
+
+    var body: some View {
+        StatusDot(color: item.status.color)
+            .padding(.trailing, 3)
+            .padding(.top, 1)
+        MenuItemIconButton(systemName: "doc.on.doc", action: copyToClipboard)
+            .font(.system(size: 9))
+            .symbolVariant(.fill)
+        MenuItemIconButton(systemName: "globe", action: { openURL(wsURL) })
+            .contentShape(Rectangle())
+            .font(.system(size: 12))
+            .padding(.trailing, Theme.Size.trayMargin)
+    }
+}
+
+struct MenuItemIconButton: View {
+    let systemName: String
+    @State var isSelected: Bool = false
+    let action: @MainActor () -> Void
+
+    var body: some View {
+        Button {
+            action()
+        } label: {
+            Image(systemName: systemName)
+                .padding(3)
+                .contentShape(Rectangle())
+        }.foregroundStyle(isSelected ? .white : .primary)
+            .background(isSelected ? Color.accentColor.opacity(0.8) : .clear)
+            .clipShape(.rect(cornerRadius: Theme.Size.rectCornerRadius))
+            .onHover { hovering in isSelected = hovering }
+            .buttonStyle(.plain)
+    }
+}
+
+struct AnimatedChevron: View {
+    let isExpanded: Bool
+    let color: Color
+
+    var body: some View {
+        Image(systemName: "chevron.right")
+            .font(.system(size: 12, weight: .semibold))
+            .foregroundColor(color)
+            .rotationEffect(.degrees(isExpanded ? 90 : 0))
+            .animation(.easeInOut(duration: Theme.Animation.collapsibleDuration), value: isExpanded)
+    }
+}
+
+#if DEBUG
+    #Preview {
+        let appState = AppState(persistent: false)
+        appState.login(baseAccessURL: URL(string: "http://127.0.0.1:8080")!, sessionToken: "")
+        // appState.clearSession()
+
+        return VPNMenu<PreviewVPN, PreviewFileSync>().frame(width: 256)
+            .environmentObject(PreviewVPN())
+            .environmentObject(appState)
+            .environmentObject(PreviewFileSync())
+    }
+#endif

Coder-Desktop/Coder-Desktop/Views/VPN/WorkspaceAppIcon.swift

@@ -37,7 +37,7 @@ struct WorkspaceAppIcon: View {
             RoundedRectangle(cornerRadius: Theme.Size.rectCornerRadius * 2)
                 .stroke(.secondary, lineWidth: 1)
                 .opacity(isHovering && !isPressed ? 0.6 : 0.3)
-        ).onHoverWithPointingHand { hovering in isHovering = hovering }
+        ).onHover { hovering in isHovering = hovering }
         .simultaneousGesture(
             DragGesture(minimumDistance: 0)
                 .onChanged { _ in