feat: v0.2.1 — redesigned status bar icon, onboarding improvements, about window

demo · claude · demo · commit 9f0c424a0f2c · 2026-04-13T15:24:50.000+04:00
- Status bar icon: white rounded-rect badge with cutout shield and colored status dot
- Gateway and server cert pin now required in onboarding (defaults empty)
- Settings save closes window and auto-triggers reconnect
- Save button disabled when config unchanged
- Added About VPN MenuBar window with version info
- Updated appcast.xml with v0.2.1 signed release

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/VPNMenuBar-0.2.1.zip b/VPNMenuBar-0.2.1.zip
diff --git a/VPNMenuBar.app/Contents/Info.plist b/VPNMenuBar.app/Contents/Info.plist
@@ -23,13 +23,13 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.2.0</string>
+	<string>0.2.1</string>
 	<key>CFBundleSupportedPlatforms</key>
 	<array>
 		<string>MacOSX</string>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>2</string>
+	<string>3</string>
 	<key>DTCompiler</key>
 	<string>com.apple.compilers.llvm.clang.1_0</string>
 	<key>DTPlatformBuild</key>
diff --git a/VPNMenuBar.app/Contents/MacOS/VPNMenuBar b/VPNMenuBar.app/Contents/MacOS/VPNMenuBar
diff --git a/VPNMenuBar/App/VPNMenuBarApp.swift b/VPNMenuBar/App/VPNMenuBarApp.swift
@@ -15,6 +15,7 @@ struct VPNMenuBarApp: App {
                 controller: coordinator.controller,
                 onOpenSettings: coordinator.openSettings,
                 onCheckDependencies: coordinator.openDependencyAlert,
+                onAbout: coordinator.openAbout,
                 updaterController: coordinator.updaterController
             )
         } label: {
@@ -58,6 +59,7 @@ final class AppCoordinator: ObservableObject {
     private var onboardingWindow: NSWindow?
     private var dependencyAlertWindow: NSWindow?
     private var settingsWindow: NSWindow?
+    private var aboutWindow: NSWindow?
     private var cancellables = Set<AnyCancellable>()
 
     init() {
@@ -181,6 +183,32 @@ final class AppCoordinator: ObservableObject {
         NSApp.activate(ignoringOtherApps: true)
     }
 
+    func openAbout() {
+        if let win = aboutWindow {
+            win.makeKeyAndOrderFront(nil)
+            NSApp.activate(ignoringOtherApps: true)
+            return
+        }
+        let hosting = NSHostingController(rootView: AboutView())
+        let win = NSWindow(contentViewController: hosting)
+        win.title = "About VPN MenuBar"
+        win.styleMask = [.titled, .closable]
+        win.center()
+        win.isReleasedWhenClosed = false
+        aboutWindow = win
+
+        NotificationCenter.default.addObserver(
+            forName: NSWindow.willCloseNotification,
+            object: win,
+            queue: .main
+        ) { [weak self] _ in
+            self?.aboutWindow = nil
+        }
+
+        win.makeKeyAndOrderFront(nil)
+        NSApp.activate(ignoringOtherApps: true)
+    }
+
     func openDependencyAlert() {
         if let win = dependencyAlertWindow {
             win.makeKeyAndOrderFront(nil)
diff --git a/VPNMenuBar/Config/VPNConfig.swift b/VPNMenuBar/Config/VPNConfig.swift
@@ -6,9 +6,9 @@ struct VPNConfig: Codable, Equatable {
     var passwordPrefix: String
     var totpSecret: String
 
-    // Advanced — defaults migrated from vpn.py / arch-aware
-    var gateway: String = "vpn.example.com"
-    var serverCertPin: String = "pin-sha256:AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
+    // Required — VPN server settings (user must fill in their own values)
+    var gateway: String = ""
+    var serverCertPin: String = ""
     var openconnectPath: String = ArchDetector.defaultPaths.openconnect
     var vpncScriptPath: String = ArchDetector.defaultPaths.vpncScript
     var skipDNSModification: Bool = true
@@ -18,5 +18,6 @@ struct VPNConfig: Codable, Equatable {
 
     var isConfigured: Bool {
         !username.isEmpty && !passwordPrefix.isEmpty && !totpSecret.isEmpty
+            && !gateway.isEmpty && !serverCertPin.isEmpty
     }
 }
diff --git a/VPNMenuBar/Info.plist b/VPNMenuBar/Info.plist
@@ -17,9 +17,9 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.1.0</string>
+	<string>0.2.1</string>
 	<key>CFBundleVersion</key>
-	<string>1</string>
+	<string>3</string>
 	<key>LSMinimumSystemVersion</key>
 	<string>13.0</string>
 	<key>LSUIElement</key>
@@ -28,5 +28,11 @@
 	<string>Personal use only</string>
 	<key>NSUserNotificationAlertStyle</key>
 	<string>alert</string>
+	<key>SUEnableAutomaticChecks</key>
+	<true/>
+	<key>SUFeedURL</key>
+	<string>https://raw.githubusercontent.com/CoderZCC/VPNMenuBar/main/appcast.xml</string>
+	<key>SUPublicEDKey</key>
+	<string>cyiD6I9dAeSGGdVG2VAADG9ecdvdLHDHBIFfnjR9zJY=</string>
 </dict>
 </plist>
diff --git a/VPNMenuBar/UI/AboutView.swift b/VPNMenuBar/UI/AboutView.swift
@@ -0,0 +1,36 @@
+import SwiftUI
+
+struct AboutView: View {
+    private let appName = Bundle.main.object(forInfoDictionaryKey: "CFBundleDisplayName") as? String
+        ?? Bundle.main.object(forInfoDictionaryKey: "CFBundleName") as? String ?? "VPN MenuBar"
+    private let version = Bundle.main.object(forInfoDictionaryKey: "CFBundleShortVersionString") as? String ?? "–"
+    private let build = Bundle.main.object(forInfoDictionaryKey: "CFBundleVersion") as? String ?? "–"
+    private let copyright = Bundle.main.object(forInfoDictionaryKey: "NSHumanReadableCopyright") as? String ?? ""
+
+    var body: some View {
+        VStack(spacing: 12) {
+            Image(nsImage: NSApp.applicationIconImage)
+                .resizable()
+                .frame(width: 64, height: 64)
+
+            Text(appName)
+                .font(.title2).bold()
+
+            Text("Version \(version) (\(build))")
+                .font(.callout)
+                .foregroundColor(.secondary)
+
+            Text(copyright)
+                .font(.caption)
+                .foregroundColor(.secondary)
+
+            Divider()
+
+            Link("GitHub Repository",
+                 destination: URL(string: "https://github.com/CoderZCC/VPNMenuBar")!)
+                .font(.callout)
+        }
+        .padding(24)
+        .frame(width: 280)
+    }
+}
diff --git a/VPNMenuBar/UI/MenuContentView.swift b/VPNMenuBar/UI/MenuContentView.swift
@@ -5,6 +5,7 @@ struct MenuContentView: View {
     @ObservedObject var controller: VPNController
     var onOpenSettings: () -> Void
     var onCheckDependencies: () -> Void
+    var onAbout: () -> Void
     let updaterController: SPUStandardUpdaterController
 
     var body: some View {
@@ -45,6 +46,8 @@ struct MenuContentView: View {
             updaterController.checkForUpdates(nil)
         }
 
+        Button("About VPN MenuBar") { onAbout() }
+
         Divider()
 
         Button("Quit") {
diff --git a/VPNMenuBar/UI/OnboardingView.swift b/VPNMenuBar/UI/OnboardingView.swift
@@ -104,14 +104,16 @@ struct OnboardingView: View {
     private var credentialsStep: some View {
         VStack(alignment: .leading, spacing: 12) {
             Text("Credentials").font(.title2).bold()
+            TextField("Gateway (e.g. vpn.company.com)", text: $config.gateway)
+            TextField("Server cert pin (pin-sha256:...)", text: $config.serverCertPin)
             TextField("Username", text: $config.username)
             RevealableSecureField(title: "Password prefix", text: $config.passwordPrefix)
             RevealableSecureField(title: "TOTP secret (Base32)", text: $config.totpSecret)
             HStack {
                 ImportSecretFromImageButton(secret: $config.totpSecret, username: $config.username)
                 Spacer()
             }
-            Text("These three fields are required. Defaults for gateway, cert pin, and paths are already filled in and can be edited later in Settings → Advanced.")
+            Text("All fields above are required. Paths can be edited later in Settings → Advanced.")
                 .font(.caption).foregroundColor(.secondary)
         }
     }
diff --git a/VPNMenuBar/UI/SettingsView.swift b/VPNMenuBar/UI/SettingsView.swift
@@ -5,14 +5,19 @@ struct SettingsView: View {
     let configStore: ConfigStore
 
     @State private var config: VPNConfig = VPNConfig(username: "", passwordPrefix: "", totpSecret: "")
+    @State private var originalConfig: VPNConfig = VPNConfig(username: "", passwordPrefix: "", totpSecret: "")
     @State private var launchAtLogin: Bool = LoginItemManager.isEnabledPreference
     @State private var showSavedAlert: Bool = false
     @State private var savedAlertTitle: String = ""
     @State private var savedAlertMessage: String = ""
 
+    private var hasChanges: Bool { config != originalConfig }
+
     var body: some View {
         Form {
             Section("Required") {
+                TextField("Gateway", text: $config.gateway)
+                TextField("Server cert pin", text: $config.serverCertPin)
                 TextField("Username", text: $config.username)
                 RevealableSecureField(title: "Password prefix", text: $config.passwordPrefix)
                 RevealableSecureField(title: "TOTP secret (Base32)", text: $config.totpSecret)
@@ -23,8 +28,6 @@ struct SettingsView: View {
             }
 
             Section("Advanced") {
-                TextField("Gateway", text: $config.gateway)
-                TextField("Server cert pin", text: $config.serverCertPin)
                 TextField("openconnect path", text: $config.openconnectPath)
                 TextField("vpnc-script path", text: $config.vpncScriptPath)
                 Toggle("Skip DNS modification (use bundled vpnc-script--no-dns)",
@@ -43,6 +46,7 @@ struct SettingsView: View {
                     Spacer()
                     Button("Save") { save() }
                         .keyboardShortcut(.defaultAction)
+                        .disabled(!hasChanges)
                 }
             }
         }
@@ -59,22 +63,25 @@ struct SettingsView: View {
     private func load() {
         if let existing = (try? configStore.load()) ?? nil {
             config = existing
+            originalConfig = existing
         }
     }
 
     private func save() {
         do {
             try configStore.save(config)
-            savedAlertTitle = "Settings Saved"
-            if controller.state.isConnected {
-                savedAlertMessage = "Configuration saved. The new values will take effect on the next connection."
-            } else {
-                savedAlertMessage = "Your configuration has been saved."
+            // Close settings window and trigger a reconnect
+            NSApp.keyWindow?.close()
+            Task {
+                if controller.state.isConnected {
+                    await controller.disconnect()
+                }
+                await controller.connect()
             }
         } catch {
             savedAlertTitle = "Save Failed"
             savedAlertMessage = "The config file may be read-only — check permissions under ~/Library/Application Support."
+            showSavedAlert = true
         }
-        showSavedAlert = true
     }
 }
diff --git a/VPNMenuBar/UI/StatusBarIconFactory.swift b/VPNMenuBar/UI/StatusBarIconFactory.swift
@@ -1,45 +1,100 @@
 import AppKit
 import SwiftUI
 
-/// Builds the status-bar icon for a given VPN state:
-/// a template SF Symbol ("lock.shield") with a small colored dot overlay.
+/// Builds the status-bar icon: white rounded-rect badge with a shield symbol
+/// and a colored status dot in the top-right corner.
 enum StatusBarIconFactory {
     static func image(for state: VPNState) -> NSImage {
-        let baseSize = NSSize(width: 22, height: 18)
-        let iconSize = NSSize(width: 16, height: 16)
-
-        let result = NSImage(size: baseSize)
-        result.lockFocus()
-        defer { result.unlockFocus() }
-
-        // 1. Base SF Symbol (lock.shield) rendered as template so it follows menu tint.
-        if let base = NSImage(systemSymbolName: "lock.shield", accessibilityDescription: "VPN") {
-            base.isTemplate = true
-            base.size = iconSize
-            base.draw(
-                in: NSRect(x: 0, y: 1, width: iconSize.width, height: iconSize.height),
-                from: .zero,
-                operation: .sourceOver,
-                fraction: state == .disconnected ? 0.55 : 1.0
-            )
+        let size = NSSize(width: 20, height: 18)
+        let scale: CGFloat = NSScreen.main?.backingScaleFactor ?? 2.0
+
+        // Draw into a CGContext so we can use .destinationOut for the cutout
+        let pxW = Int(size.width * scale)
+        let pxH = Int(size.height * scale)
+        let colorSpace = CGColorSpaceCreateDeviceRGB()
+        guard let ctx = CGContext(
+            data: nil, width: pxW, height: pxH,
+            bitsPerComponent: 8, bytesPerRow: 0,
+            space: colorSpace,
+            bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue
+        ) else { return NSImage() }
+
+        ctx.scaleBy(x: scale, y: scale)
+        let gfx = NSGraphicsContext(cgContext: ctx, flipped: false)
+        NSGraphicsContext.saveGraphicsState()
+        NSGraphicsContext.current = gfx
+
+        // 1. White rounded-rect background
+        let bgRect = NSRect(x: 0, y: 0, width: 18, height: 18)
+        let bgPath = NSBezierPath(roundedRect: bgRect, xRadius: 4, yRadius: 4)
+        NSColor.white.setFill()
+        bgPath.fill()
+
+        // 2. Punch out the shield shape (cutout / knockout)
+        //    Render SF Symbol into a separate CGImage first, then composite
+        //    with destinationOut directly on the CGContext.
+        if let symbol = NSImage(systemSymbolName: "lock.shield.fill", accessibilityDescription: nil) {
+            let config = NSImage.SymbolConfiguration(paletteColors: [.black])
+            if let tinted = symbol.withSymbolConfiguration(config) {
+                let symbolSize = NSSize(width: 12, height: 12)
+                let symPxW = Int(symbolSize.width * scale)
+                let symPxH = Int(symbolSize.height * scale)
+                if let symCtx = CGContext(
+                    data: nil, width: symPxW, height: symPxH,
+                    bitsPerComponent: 8, bytesPerRow: 0,
+                    space: colorSpace,
+                    bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue
+                ) {
+                    symCtx.scaleBy(x: scale, y: scale)
+                    let symGfx = NSGraphicsContext(cgContext: symCtx, flipped: false)
+                    NSGraphicsContext.current = symGfx
+                    tinted.draw(in: NSRect(origin: .zero, size: symbolSize))
+                    NSGraphicsContext.current = gfx
+
+                    if let symCG = symCtx.makeImage() {
+                        let originX = bgRect.midX - symbolSize.width / 2
+                        let originY = bgRect.midY - symbolSize.height / 2
+                        ctx.setBlendMode(.destinationOut)
+                        ctx.draw(symCG, in: CGRect(x: originX, y: originY,
+                                                   width: symbolSize.width, height: symbolSize.height))
+                        ctx.setBlendMode(.normal)
+                    }
+                }
+            }
         }
 
-        // 2. Colored status dot in the top-right corner.
-        let dotRect = NSRect(x: baseSize.width - 7, y: baseSize.height - 7, width: 6, height: 6)
-        let path = NSBezierPath(ovalIn: dotRect)
+        // 3. Colored status dot in top-right corner
+        let dotSize: CGFloat = 6
+        let dotRect = NSRect(x: size.width - dotSize - 1, y: size.height - dotSize - 1,
+                             width: dotSize, height: dotSize)
+        let dotPath = NSBezierPath(ovalIn: dotRect)
         dotColor(for: state).setFill()
-        path.fill()
+        dotPath.fill()
 
-        result.isTemplate = false  // dot is colored, so we can't be a pure template.
+        NSGraphicsContext.restoreGraphicsState()
+
+        guard let cgImage = ctx.makeImage() else { return NSImage() }
+        let result = NSImage(cgImage: cgImage, size: size)
+        result.isTemplate = false
+        result.accessibilityDescription = accessibilityLabel(for: state)
         return result
     }
 
     private static func dotColor(for state: VPNState) -> NSColor {
         switch state {
-        case .connected:          return NSColor.systemGreen
-        case .connecting:         return NSColor.systemOrange
-        case .failed:             return NSColor.systemRed
-        case .disconnected:       return NSColor.systemGray
+        case .connected:    return .systemGreen
+        case .connecting:   return .systemOrange
+        case .failed:       return .systemRed
+        case .disconnected: return .systemGray
+        }
+    }
+
+    private static func accessibilityLabel(for state: VPNState) -> String {
+        switch state {
+        case .connected:    return "VPN Connected"
+        case .connecting:   return "VPN Connecting"
+        case .failed:       return "VPN Failed"
+        case .disconnected: return "VPN Disconnected"
         }
     }
 }
diff --git a/appcast.xml b/appcast.xml
diff --git a/project.yml b/project.yml

Original file line number	Diff line number	Diff line change
`@@ -104,14 +104,16 @@ struct OnboardingView: View {`
`104`	`104`	`private var credentialsStep: some View {`
`105`	`105`	`VStack(alignment: .leading, spacing: 12) {`
`106`	`106`	`Text("Credentials").font(.title2).bold()`
	`107`	`+ TextField("Gateway (e.g. vpn.company.com)", text: $config.gateway)`
	`108`	`+ TextField("Server cert pin (pin-sha256:...)", text: $config.serverCertPin)`
`107`	`109`	`TextField("Username", text: $config.username)`
`108`	`110`	`RevealableSecureField(title: "Password prefix", text: $config.passwordPrefix)`
`109`	`111`	`RevealableSecureField(title: "TOTP secret (Base32)", text: $config.totpSecret)`
`110`	`112`	`HStack {`
`111`	`113`	`ImportSecretFromImageButton(secret: $config.totpSecret, username: $config.username)`
`112`	`114`	`Spacer()`
`113`	`115`	`}`
`114`		`- Text("These three fields are required. Defaults for gateway, cert pin, and paths are already filled in and can be edited later in Settings → Advanced.")`
	`116`	`+ Text("All fields above are required. Paths can be edited later in Settings → Advanced.")`
`115`	`117`	`.font(.caption).foregroundColor(.secondary)`
`116`	`118`	`}`
`117`	`119`	`}`