From 29e16a60aee542ae9c77805cd319db7811195922 Mon Sep 17 00:00:00 2001
From: Ethan Dickson <ethan@coder.com>
Date: Wed, 7 May 2025 16:18:05 +1000
Subject: [PATCH] feat: make workspace app icons smaller, neater

---
 Coder-Desktop/Coder-Desktop/Theme.swift             |  4 ++--
 .../Coder-Desktop/Views/VPN/VPNMenuItem.swift       | 10 ++++------
 .../Coder-Desktop/Views/VPN/WorkspaceAppIcon.swift  | 13 +++++--------
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/Coder-Desktop/Coder-Desktop/Theme.swift b/Coder-Desktop/Coder-Desktop/Theme.swift
index 546242c..c697f1e 100644
--- a/Coder-Desktop/Coder-Desktop/Theme.swift
+++ b/Coder-Desktop/Coder-Desktop/Theme.swift
@@ -8,8 +8,8 @@ enum Theme {
 
         static let rectCornerRadius: CGFloat = 4
 
-        static let appIconWidth: CGFloat = 30
-        static let appIconHeight: CGFloat = 30
+        static let appIconWidth: CGFloat = 17
+        static let appIconHeight: CGFloat = 17
         static let appIconSize: CGSize = .init(width: appIconWidth, height: appIconHeight)
     }
 
diff --git a/Coder-Desktop/Coder-Desktop/Views/VPN/VPNMenuItem.swift b/Coder-Desktop/Coder-Desktop/Views/VPN/VPNMenuItem.swift
index d67e34f..c10b932 100644
--- a/Coder-Desktop/Coder-Desktop/Views/VPN/VPNMenuItem.swift
+++ b/Coder-Desktop/Coder-Desktop/Views/VPN/VPNMenuItem.swift
@@ -180,20 +180,18 @@ struct MenuItemView: View {
 }
 
 struct MenuItemCollapsibleView: View {
-    private let defaultVisibleApps = 5
+    private let defaultVisibleApps = 6
     let apps: [WorkspaceApp]
 
     var body: some View {
-        HStack(spacing: 17) {
+        HStack(spacing: 16) {
             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()
-            }
+            Spacer()
         }
-        .padding(.leading, apps.count < defaultVisibleApps ? 14 : 0)
+        .padding(.leading, 32)
         .padding(.bottom, 5)
         .padding(.top, 10)
     }
diff --git a/Coder-Desktop/Coder-Desktop/Views/VPN/WorkspaceAppIcon.swift b/Coder-Desktop/Coder-Desktop/Views/VPN/WorkspaceAppIcon.swift
index 14a4bd0..8ac79c4 100644
--- a/Coder-Desktop/Coder-Desktop/Views/VPN/WorkspaceAppIcon.swift
+++ b/Coder-Desktop/Coder-Desktop/Views/VPN/WorkspaceAppIcon.swift
@@ -19,9 +19,9 @@ struct WorkspaceAppIcon: View {
                 ) { $0 }
                     placeholder: {
                         if app.icon != nil {
-                            ProgressView()
+                            ProgressView().controlSize(.small)
                         } else {
-                            Text(app.displayName).frame(
+                            Image(systemName: "questionmark").frame(
                                 width: Theme.Size.appIconWidth,
                                 height: Theme.Size.appIconHeight
                             )
@@ -30,14 +30,11 @@ struct WorkspaceAppIcon: View {
                         width: Theme.Size.appIconWidth,
                         height: Theme.Size.appIconHeight
                     )
-            }.padding(4)
+            }.padding(6)
         }
+        .background(isHovering ? Color.accentColor.opacity(0.8) : .clear)
         .clipShape(RoundedRectangle(cornerRadius: 8))
-        .overlay(
-            RoundedRectangle(cornerRadius: Theme.Size.rectCornerRadius * 2)
-                .stroke(.secondary, lineWidth: 1)
-                .opacity(isHovering && !isPressed ? 0.6 : 0.3)
-        ).onHover { hovering in isHovering = hovering }
+        .onHover { hovering in isHovering = hovering }
         .simultaneousGesture(
             DragGesture(minimumDistance: 0)
                 .onChanged { _ in