chore: minor ui/ux changes (#186)

ethanndickson · web-flow · commit 99d4e4d7cb97 · 2025-06-18T18:09:48.000+10:00
These changes were in response to feedback: - Adds tooltips on hover to the copy DNS button, and the open in browser button on the main tray menu. - Includes the download URL in the error message if the client receives an unexpected HTTP code when downloading. ![](https://github.com/user-attachments/assets/69c6cffc-ae04-42b4-ac01-0e0d627d02f7) - Makes the file sync table controls a lil bigger (24px -> 28px): - Before: - ![](https://github.com/user-attachments/assets/01dabe2c-4571-4014-98b1-1d8daf603516) - After: - ![](https://github.com/user-attachments/assets/90192329-62f6-4ed2-a992-0cb9f73957a4)
diff --git a/Coder-Desktop/Coder-Desktop/Theme.swift b/Coder-Desktop/Coder-Desktop/Theme.swift
@@ -11,6 +11,8 @@ enum Theme {
         static let appIconWidth: CGFloat = 17
         static let appIconHeight: CGFloat = 17
         static let appIconSize: CGSize = .init(width: appIconWidth, height: appIconHeight)
+
+        static let tableFooterIconSize: CGFloat = 28
     }
 
     enum Animation {
diff --git a/Coder-Desktop/Coder-Desktop/Views/FileSync/FileSyncConfig.swift b/Coder-Desktop/Coder-Desktop/Views/FileSync/FileSyncConfig.swift
@@ -47,7 +47,7 @@ struct FileSyncConfig<VPN: VPNService, FS: FileSyncDaemon>: View {
                 }
             })
             .frame(minWidth: 400, minHeight: 200)
-            .padding(.bottom, 25)
+            .padding(.bottom, Theme.Size.tableFooterIconSize)
             .overlay(alignment: .bottom) {
                 tableFooter
             }
@@ -121,8 +121,8 @@ struct FileSyncConfig<VPN: VPNService, FS: FileSyncDaemon>: View {
                 Button {
                     addingNewSession = true
                 } label: {
-                    Image(systemName: "plus")
-                        .frame(width: 24, height: 24).help("Create")
+                    FooterIcon(systemName: "plus")
+                        .help("Create")
                 }.disabled(vpn.menuState.agents.isEmpty)
                 sessionControls
             }
@@ -139,21 +139,25 @@ struct FileSyncConfig<VPN: VPNService, FS: FileSyncDaemon>: View {
                     Divider()
                     Button { Task { await delete(session: selectedSession) } }
                         label: {
-                            Image(systemName: "minus").frame(width: 24, height: 24).help("Terminate")
+                            FooterIcon(systemName: "minus")
+                                .help("Terminate")
                         }
                     Divider()
                     Button { Task { await pauseResume(session: selectedSession) } }
                         label: {
                             if selectedSession.status.isResumable {
-                                Image(systemName: "play").frame(width: 24, height: 24).help("Pause")
+                                FooterIcon(systemName: "play")
+                                    .help("Resume")
                             } else {
-                                Image(systemName: "pause").frame(width: 24, height: 24).help("Resume")
+                                FooterIcon(systemName: "pause")
+                                    .help("Pause")
                             }
                         }
                     Divider()
                     Button { Task { await reset(session: selectedSession) } }
                         label: {
-                            Image(systemName: "arrow.clockwise").frame(width: 24, height: 24).help("Reset")
+                            FooterIcon(systemName: "arrow.clockwise")
+                                .help("Reset")
                         }
                 }
             }
@@ -199,6 +203,18 @@ struct FileSyncConfig<VPN: VPNService, FS: FileSyncDaemon>: View {
     }
 }
 
+struct FooterIcon: View {
+    let systemName: String
+
+    var body: some View {
+        Image(systemName: systemName)
+            .frame(
+                width: Theme.Size.tableFooterIconSize,
+                height: Theme.Size.tableFooterIconSize
+            )
+    }
+}
+
 #if DEBUG
     #Preview {
         FileSyncConfig<PreviewVPN, PreviewFileSync>()
diff --git a/Coder-Desktop/Coder-Desktop/Views/VPN/VPNMenuItem.swift b/Coder-Desktop/Coder-Desktop/Views/VPN/VPNMenuItem.swift
@@ -235,10 +235,12 @@ struct MenuItemIcons: View {
         MenuItemIconButton(systemName: "doc.on.doc", action: copyToClipboard)
             .font(.system(size: 9))
             .symbolVariant(.fill)
+            .help("Copy hostname")
         MenuItemIconButton(systemName: "globe", action: { openURL(wsURL) })
             .contentShape(Rectangle())
             .font(.system(size: 12))
             .padding(.trailing, Theme.Size.trayMargin)
+            .help("Open in browser")
     }
 }
 
diff --git a/Coder-Desktop/VPNLib/Download.swift b/Coder-Desktop/VPNLib/Download.swift
@@ -146,15 +146,15 @@ func etag(data: Data) -> String {
 }
 
 public enum DownloadError: Error {
-    case unexpectedStatusCode(Int)
+    case unexpectedStatusCode(Int, url: String)
     case invalidResponse
     case networkError(any Error, url: String)
     case fileOpError(any Error)
 
     public var description: String {
         switch self {
-        case let .unexpectedStatusCode(code):
-            "Unexpected HTTP status code: \(code)"
+        case let .unexpectedStatusCode(code, url):
+            "Unexpected HTTP status code: \(code) - \(url)"
         case let .networkError(error, url):
             "Network error: \(url) - \(error.localizedDescription)"
         case let .fileOpError(error):
@@ -232,7 +232,12 @@ extension DownloadManager: URLSessionDownloadDelegate {
         }
 
         guard httpResponse.statusCode == 200 else {
-            continuation.resume(throwing: DownloadError.unexpectedStatusCode(httpResponse.statusCode))
+            continuation.resume(
+                throwing: DownloadError.unexpectedStatusCode(
+                    httpResponse.statusCode,
+                    url: httpResponse.url?.absoluteString ?? "Unknown URL"
+                )
+            )
             return
         }
 

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,8 @@ enum Theme {`
`11`	`11`	`static let appIconWidth: CGFloat = 17`
`12`	`12`	`static let appIconHeight: CGFloat = 17`
`13`	`13`	`static let appIconSize: CGSize = .init(width: appIconWidth, height: appIconHeight)`
	`14`	`+`
	`15`	`+ static let tableFooterIconSize: CGFloat = 28`
`14`	`16`	`}`
`15`	`17`
`16`	`18`	`enum Animation {`
Original file line number	Diff line number	Diff line change
`@@ -235,10 +235,12 @@ struct MenuItemIcons: View {`
`235`	`235`	`MenuItemIconButton(systemName: "doc.on.doc", action: copyToClipboard)`
`236`	`236`	`.font(.system(size: 9))`
`237`	`237`	`.symbolVariant(.fill)`
	`238`	`+ .help("Copy hostname")`
`238`	`239`	`MenuItemIconButton(systemName: "globe", action: { openURL(wsURL) })`
`239`	`240`	`.contentShape(Rectangle())`
`240`	`241`	`.font(.system(size: 12))`
`241`	`242`	`.padding(.trailing, Theme.Size.trayMargin)`
	`243`	`+ .help("Open in browser")`
`242`	`244`	`}`
`243`	`245`	`}`
`244`	`246`