feat: make on-upgrade steps more obvious (#172)

Before:
<img width="254" alt="image" src="https://github.com/user-attachments/assets/1460ea58-c915-4c72-85c4-0655030cb99f" />


After:
<img width="260" alt="Screenshot 2025-05-29 at 4 41 05 pm" src="https://github.com/user-attachments/assets/34fe0293-ccc4-4686-9285-eb7482d7a10e" /> <img width="258" alt="Screenshot 2025-05-29 at 4 40 56 pm" src="https://github.com/user-attachments/assets/2bd640eb-5d11-4384-8a24-b705148c2b2a" />

Author: ethanndickson

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

@@ -81,30 +81,7 @@ struct VPNMenu<VPN: VPNService, FS: FileSyncDaemon>: View {
                     }.buttonStyle(.plain)
                     TrayDivider()
                 }
-                // This shows when
-                // 1. The user is logged in
-                // 2. The network extension is installed
-                // 3. The VPN is unconfigured
-                // It's accompanied by a message in the VPNState view
-                // that the user needs to reconfigure.
-                if state.hasSession, vpn.state == .failed(.networkExtensionError(.unconfigured)) {
-                    Button {
-                        state.reconfigure()
-                    } label: {
-                        ButtonRowView {
-                            Text("Reconfigure VPN")
-                        }
-                    }.buttonStyle(.plain)
-                }
-                if vpn.state == .failed(.systemExtensionError(.needsUserApproval)) {
-                    Button {
-                        openSystemExtensionSettings()
-                    } label: {
-                        ButtonRowView { Text("Approve in System Settings") }
-                    }.buttonStyle(.plain)
-                } else {
-                    AuthButton<VPN>()
-                }
+                AuthButton<VPN>()
                 Button {
                     openSettings()
                     appActivate()

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

@@ -10,17 +10,43 @@ struct VPNState<VPN: VPNService>: View {
         Group {
             switch (vpn.state, state.hasSession) {
             case (.failed(.systemExtensionError(.needsUserApproval)), _):
-                Text("Awaiting System Extension approval")
-                    .font(.body)
-                    .foregroundStyle(.secondary)
+                VStack {
+                    Text("Awaiting System Extension approval")
+                        .foregroundColor(.secondary)
+                        .multilineTextAlignment(.center)
+                        .fixedSize(horizontal: false, vertical: true)
+                        .padding(.horizontal, Theme.Size.trayInset)
+                        .padding(.vertical, Theme.Size.trayPadding)
+                        .frame(maxWidth: .infinity)
+                    Button {
+                        openSystemExtensionSettings()
+                    } label: {
+                        Text("Approve in System Settings")
+                    }
+                }
             case (_, false):
                 Text("Sign in to use Coder Desktop")
                     .font(.body)
                     .foregroundColor(.secondary)
             case (.failed(.networkExtensionError(.unconfigured)), _):
-                Text("The system VPN requires reconfiguration.")
-                    .font(.body)
-                    .foregroundStyle(.secondary)
+                VStack {
+                    Text("The system VPN requires reconfiguration")
+                        .foregroundColor(.secondary)
+                        .multilineTextAlignment(.center)
+                        .fixedSize(horizontal: false, vertical: true)
+                        .padding(.horizontal, Theme.Size.trayInset)
+                        .padding(.vertical, Theme.Size.trayPadding)
+                        .frame(maxWidth: .infinity)
+                    Button {
+                        state.reconfigure()
+                    } label: {
+                        Text("Reconfigure VPN")
+                    }
+                }.onAppear {
+                    // Show the prompt onAppear, so the user doesn't have to
+                    // open the menu bar an extra time
+                    state.reconfigure()
+                }
             case (.disabled, _):
                 Text("Enable Coder Connect to see workspaces")
                     .font(.body)