feat: make workspace apps collapsible

[ethanndickson]

collapsibleapps.mov

[ethanndickson]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat: make workspace apps collapsible #143 👈 (View in Graphite)
• feat: add progress messages when creating sync sessions #139
• feat: add workspace apps #136
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[Copilot]

Pull Request Overview

This PR introduces collapsible workspace apps in the VPN menu along with minor test updates and UI refinements. Key changes include updating view inspector tests, replacing deprecated hover handlers, and adding new UI components (collapsible view, icons, and animated chevron) for a better user experience.

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
Coder-Desktop/Coder-DesktopTests/AgentsTests.swift	Updated tests to use text-based view lookup instead of link-based lookup.
Coder-Desktop/Coder-Desktop/Views/VPN/WorkspaceAppIcon.swift	Replaced onHoverWithPointingHand with the standard onHover handler.
Coder-Desktop/Coder-Desktop/Views/VPN/VPNMenuItem.swift	Added a helper function to compute the primary host and refactored MenuItemView for collapsible functionality.
Coder-Desktop/Coder-Desktop/Views/VPN/Agents.swift	Updated to pass the expandedItem binding to MenuItemView for managing collapsible state.
Coder-Desktop/Coder-Desktop/VPN/MenuState.swift	Minor spelling fix in a comment.
Coder-Desktop/Coder-Desktop/Theme.swift	Introduced a new animation duration for collapsible transitions.

[deansheather]

It seems odd to me having individual collapsible chevrons for each item, but only one item can be expanded at a time. I think we should just allow all items to be expanded independently

[ethanndickson]

This is just a pattern I've seen in the past that I liked. I'm pretty sure designers do it to stop the user from cluttering up the UI, or making the page too long, which is why I've done it here too. A user doesn't really need to be able to view multiple at once, and having to go close them all yourself to tidy it up is annoying.

[deansheather]

Also the first workspace in the list should have the apps visible by default. Most people only use one workspace so it'll make the experience better

[ethanndickson]

Here's the algorithm for how and when to expand the first item, where visibleItems is sorted, and hasToggledExpansion is also updated by any user interaction.

.onChange(of: visibleItems) {
    // If no workspaces are online, we should expand the first one to come online
    if visibleItems.filter({ $0.status != .off }).isEmpty {
        hasToggledExpansion = false
        return
    }
    if hasToggledExpansion {
        return
    }
    expandedItem = visibleItems.first?.id
    hasToggledExpansion = true
}

[matifali]

Also the first workspace in the list should have the apps visible by default. Most people only use one workspace so it'll make the experience better

What would it take to put the favorite workspaces on top?

[ethanndickson]

What would it take to put the favorite workspaces on top?

We actually get the favorite bool when we fetch the workspace apps, but, with the way I've set up the UI code, getting it to reorder after that fetching is done would require juggling some code around. It'd be a separate PR for sure.