feat: make workspace app icons smaller, neater

Author: ethanndickson

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)
     }
 

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)
     }

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