feat: add workspace apps (#136)

Closes #94.

<img width="311" alt="Screenshot 2025-04-22 at 2 10 32 pm" src="https://github.com/user-attachments/assets/36e20e2e-49b4-4cbd-8bcc-e41840fdc45c" />


https://github.com/user-attachments/assets/0777d1c9-6183-487d-b24a-b2ad9639d75b



The cursor does not change to a pointing hand as it should when screen-recording, and the display name of the app is also shown on hover:
<img width="255" alt="image" src="https://github.com/user-attachments/assets/95c1f06b-b14a-457c-85a6-5a514b017def" />


As per the linked issue, this only shows the first five apps. If there's less than 5 apps, they won't be centered (I think this looks a bit better):

<img width="325" alt="image" src="https://github.com/user-attachments/assets/348c1b46-f8d5-4a32-8ba6-eb03d8125344" />



Later designs will likely include a Workspace window where all the apps can be viewed, and potentially reordered to control what is shown on the tray.

EDIT: Web apps have been filtered out of the above examples, as we don't currently have a way to determine whether they will work properly via Coder Connect.

Author: ethanndickson

Coder-Desktop/Coder-Desktop/Coder_DesktopApp.swift

@@ -1,5 +1,7 @@
 import FluidMenuBarExtra
 import NetworkExtension
+import SDWebImageSVGCoder
+import SDWebImageSwiftUI
 import SwiftUI
 import VPNLib
 
@@ -66,6 +68,9 @@ class AppDelegate: NSObject, NSApplicationDelegate {
     }
 
     func applicationDidFinishLaunching(_: Notification) {
+        // Init SVG loader
+        SDImageCodersManager.shared.addCoder(SDImageSVGCoder.shared)
+
         menuBar = .init(menuBarExtra: FluidMenuBarExtra(
             title: "Coder Desktop",
             image: "MenuBarIcon",

Coder-Desktop/Coder-Desktop/State.swift

@@ -37,7 +37,7 @@ class AppState: ObservableObject {
         }
     }
 
-    private var client: Client?
+    public var client: Client?
 
     @Published var useLiteralHeaders: Bool = UserDefaults.standard.bool(forKey: Keys.useLiteralHeaders) {
         didSet {

Coder-Desktop/Coder-Desktop/Theme.swift

@@ -7,6 +7,10 @@ enum Theme {
         static let trayInset: CGFloat = trayMargin + trayPadding
 
         static let rectCornerRadius: CGFloat = 4
+
+        static let appIconWidth: CGFloat = 30
+        static let appIconHeight: CGFloat = 30
+        static let appIconSize: CGSize = .init(width: appIconWidth, height: appIconHeight)
     }
 
     static let defaultVisibleAgents = 5

Coder-Desktop/Coder-Desktop/Views/ResponsiveLink.swift

@@ -13,13 +13,8 @@ struct ResponsiveLink: View {
             .font(.subheadline)
             .foregroundColor(isPressed ? .red : .blue)
             .underline(isHovered, color: isPressed ? .red : .blue)
-            .onHover { hovering in
+            .onHoverWithPointingHand { hovering in
                 isHovered = hovering
-                if hovering {
-                    NSCursor.pointingHand.push()
-                } else {
-                    NSCursor.pop()
-                }
             }
             .simultaneousGesture(
                 DragGesture(minimumDistance: 0)

Coder-Desktop/Coder-Desktop/Views/Util.swift

@@ -31,3 +31,16 @@ extension UUID {
         self.init(uuid: uuid)
     }
 }
+
+public extension View {
+    @inlinable nonisolated func onHoverWithPointingHand(perform action: @escaping (Bool) -> Void) -> some View {
+        onHover { hovering in
+            if hovering {
+                NSCursor.pointingHand.push()
+            } else {
+                NSCursor.pop()
+            }
+            action(hovering)
+        }
+    }
+}

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

@@ -1,3 +1,5 @@
+import CoderSDK
+import os
 import SwiftUI
 
 // Each row in the workspaces list is an agent or an offline workspace
@@ -26,6 +28,13 @@ enum VPNMenuItem: Equatable, Comparable, Identifiable {
         }
     }
 
+    var workspaceID: UUID {
+        switch self {
+        case let .agent(agent): agent.wsID
+        case let .offlineWorkspace(workspace): workspace.id
+        }
+    }
+
     static func < (lhs: VPNMenuItem, rhs: VPNMenuItem) -> Bool {
         switch (lhs, rhs) {
         case let (.agent(lhsAgent), .agent(rhsAgent)):
@@ -44,11 +53,17 @@ enum VPNMenuItem: Equatable, Comparable, Identifiable {
 struct MenuItemView: View {
     @EnvironmentObject var state: AppState
 
+    private let logger = Logger(subsystem: Bundle.main.bundleIdentifier!, category: "VPNMenu")
+
     let item: VPNMenuItem
     let baseAccessURL: URL
+
     @State private var nameIsSelected: Bool = false
     @State private var copyIsSelected: Bool = false
 
+    private let defaultVisibleApps = 5
+    @State private var apps: [WorkspaceApp] = []
+
     private var itemName: AttributedString {
         let name = switch item {
         case let .agent(agent): agent.primaryHost ?? "\(item.wsName).\(state.hostnameSuffix)"
@@ -70,37 +85,90 @@ struct MenuItemView: View {
     }
 
     var body: some View {
-        HStack(spacing: 0) {
-            Link(destination: wsURL) {
-                HStack(spacing: Theme.Size.trayPadding) {
-                    StatusDot(color: item.status.color)
-                    Text(itemName).lineLimit(1).truncationMode(.tail)
+        VStack(spacing: 0) {
+            HStack(spacing: 0) {
+                Link(destination: wsURL) {
+                    HStack(spacing: Theme.Size.trayPadding) {
+                        StatusDot(color: item.status.color)
+                        Text(itemName).lineLimit(1).truncationMode(.tail)
+                        Spacer()
+                    }.padding(.horizontal, Theme.Size.trayPadding)
+                        .frame(minHeight: 22)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .foregroundStyle(nameIsSelected ? .white : .primary)
+                        .background(nameIsSelected ? Color.accentColor.opacity(0.8) : .clear)
+                        .clipShape(.rect(cornerRadius: Theme.Size.rectCornerRadius))
+                        .onHoverWithPointingHand { hovering in
+                            nameIsSelected = hovering
+                        }
                     Spacer()
-                }.padding(.horizontal, Theme.Size.trayPadding)
-                    .frame(minHeight: 22)
-                    .frame(maxWidth: .infinity, alignment: .leading)
-                    .foregroundStyle(nameIsSelected ? .white : .primary)
-                    .background(nameIsSelected ? Color.accentColor.opacity(0.8) : .clear)
-                    .clipShape(.rect(cornerRadius: Theme.Size.rectCornerRadius))
-                    .onHover { hovering in nameIsSelected = hovering }
-                Spacer()
-            }.buttonStyle(.plain)
-            if case let .agent(agent) = item, let copyableDNS = agent.primaryHost {
-                Button {
-                    NSPasteboard.general.clearContents()
-                    NSPasteboard.general.setString(copyableDNS, 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))
-                    .onHover { hovering in copyIsSelected = hovering }
-                    .buttonStyle(.plain)
-                    .padding(.trailing, Theme.Size.trayMargin)
+                }.buttonStyle(.plain)
+                if case let .agent(agent) = item, let copyableDNS = agent.primaryHost {
+                    Button {
+                        NSPasteboard.general.clearContents()
+                        NSPasteboard.general.setString(copyableDNS, 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)
+                }
+            }
+            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()
+                    }
+                }
+                .padding(.leading, apps.count < defaultVisibleApps ? 14 : 0)
+                .padding(.bottom, 5)
+                .padding(.top, 10)
+            }
+        }
+        .task { await loadApps() }
+    }
+
+    func loadApps() async {
+        // If this menu item is an agent, and the user is logged in
+        if case let .agent(agent) = item,
+           let client = state.client,
+           let host = agent.primaryHost,
+           let baseAccessURL = state.baseAccessURL,
+           // Like the CLI, we'll re-use the existing session token to populate the URL
+           let sessionToken = state.sessionToken
+        {
+            let workspace: CoderSDK.Workspace
+            do {
+                workspace = try await retry(floor: .milliseconds(100), ceil: .seconds(10)) {
+                    do {
+                        return try await client.workspace(item.workspaceID)
+                    } catch {
+                        logger.error("Failed to load apps for workspace \(item.wsName): \(error.localizedDescription)")
+                        throw error
+                    }
+                }
+            } catch { return } // Task cancelled
+
+            if let wsAgent = workspace
+                .latest_build.resources
+                .compactMap(\.agents)
+                .flatMap(\.self)
+                .first(where: { $0.id == agent.id })
+            {
+                apps = agentToApps(logger, wsAgent, host, baseAccessURL, sessionToken)
+            } else {
+                logger.error("Could not find agent '\(agent.id)' in workspace '\(item.wsName)' resources")
             }
         }
     }