refactor: improve UI and code quality

- Redesign status bar details view with header, traffic summary, colored icons
- Use monospaced font for stable number display
- Add separator before quit menu item
- Add empty state placeholder for no network activity
- Fix Swift naming conventions (Total→total, Items→items)
- Add Identifiable conformance to NetworkState
- Add stop() cleanup on app termination
- Replace WindowGroup with Settings to prevent empty window
- Add localization for new UI strings
- Compact status bar width (62pt)

Author: cnfatal

NetworkStatusBar/NetworkStatus.swift

@@ -9,11 +9,12 @@ import Foundation
 import TabularData
 
 struct NetworkStates {
-  var Total: NetworkState = NetworkState()
-  var Items: [NetworkState] = []
+  var total: NetworkState = NetworkState()
+  var items: [NetworkState] = []
 }
 
-struct NetworkState {
+struct NetworkState: Identifiable {
+  var id: String { "\(pid).\(name)" }
   var pid: Int = 0
   var name: String = ""
   var inbounds: Int = 0
@@ -64,6 +65,12 @@ open class NetworkDetails {
     process.waitUntilExit()
   }
 
+  func stop() {
+    if process.isRunning {
+      process.terminate()
+    }
+  }
+
   func update(data: Data) {
     if data.isEmpty {
       return
@@ -113,8 +120,8 @@ open class NetworkDetails {
 
     items.sort { $0.total > $1.total }
     let ret = NetworkStates(
-      Total: NetworkState(inbounds: totalin, outbounds: totalout),
-      Items: items)
+      total: NetworkState(inbounds: totalin, outbounds: totalout),
+      items: items)
 
     self.callback(ret)
   }

NetworkStatusBar/NetworkStatusBarApp.swift

@@ -11,12 +11,12 @@ import SwiftUI
 struct NetworkStatusBarApp: App {
   @NSApplicationDelegateAdaptor(AppDelegate.self) var appdelegate
   var body: some Scene {
-    WindowGroup {}
+    Settings {
+      EmptyView()
+    }
   }
 }
 
-var StatusBarWidth = CGFloat(49)
-
 class AppDelegate: NSObject, NSApplicationDelegate {
 
   var iostates: IOStates = IOStates()
@@ -26,8 +26,8 @@ class AppDelegate: NSObject, NSApplicationDelegate {
 
   func onUpdate(update: NetworkStates) {
     DispatchQueue.main.async {
-      self.iostates.total = update.Total
-      self.iostates.items = update.Items.filter({ item in
+      self.iostates.total = update.total
+      self.iostates.items = update.items.filter({ item in
         return item.total > 1024
       })
     }
@@ -38,8 +38,7 @@ class AppDelegate: NSObject, NSApplicationDelegate {
   }
 
   func applicationDidFinishLaunching(_ notification: Notification) {
-    statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength)
-    statusItem?.length = StatusBarWidth
+    statusItem = NSStatusBar.system.statusItem(withLength: 62)
 
     networkStatus.callback = onUpdate
     DispatchQueue.global(qos: .userInteractive).async {
@@ -48,7 +47,7 @@ class AppDelegate: NSObject, NSApplicationDelegate {
 
     if let button = statusItem?.button {
       let statusbarview = NSHostingView(rootView: StatusBarView(iostates: iostates))
-      statusbarview.frame = button.frame
+      statusbarview.frame = NSRect(x: 0, y: 0, width: 62, height: button.frame.height)
       button.addSubview(statusbarview)
     }
 
@@ -57,13 +56,13 @@ class AppDelegate: NSObject, NSApplicationDelegate {
       menu.items = [
         {
           let menuitem = NSMenuItem()
-          menuitem.view = NSHostingView(rootView: StatusBarDetailsView(iostates: iostates))
-          // ListTableCellView has 16dp at left and right,ListScroll has a 15dp width
-          // 16 * 2 + 15 = 47
-          // Out DetailsItem has min length 200
-          menuitem.view?.setFrameSize(NSSize(width: 247, height: 100))
+          let detailsView = StatusBarDetailsView(iostates: iostates)
+          let hostingView = NSHostingView(rootView: detailsView)
+          hostingView.setFrameSize(NSSize(width: 280, height: 320))
+          menuitem.view = hostingView
           return menuitem
         }(),
+        NSMenuItem.separator(),
         NSMenuItem(
           title: NSLocalizedString("quit", comment: "quit the application"),
           action: #selector(quit),
@@ -74,6 +73,10 @@ class AppDelegate: NSObject, NSApplicationDelegate {
     }()
   }
 
+  func applicationWillTerminate(_ notification: Notification) {
+    networkStatus.stop()
+  }
+
   @IBAction func quit(obj: Any) {
     NSApp.terminate(nil)
   }

NetworkStatusBar/StatusBarDetailsView.swift

@@ -6,53 +6,116 @@
 //
 
 import SwiftUI
-import TabularData
 
 struct StatusBarDetailsView: View {
   @ObservedObject var iostates = IOStates()
   var body: some View {
-    List(iostates.items, id: \.pid) { item in
-      StatusBarDetailsItemView(state: item)
+    VStack(alignment: .leading, spacing: 0) {
+      // Header: Total traffic summary
+      VStack(alignment: .leading, spacing: 6) {
+        Text(NSLocalizedString("network_traffic", comment: "Network Traffic"))
+          .font(.system(size: 13, weight: .semibold))
+        HStack(spacing: 16) {
+          Label {
+            Text(formatbytes(iostates.total.outbounds))
+              .font(.system(size: 11, weight: .medium, design: .monospaced))
+          } icon: {
+            Image(systemName: "arrow.up")
+              .font(.system(size: 9, weight: .semibold))
+              .foregroundColor(.orange)
+          }
+          Label {
+            Text(formatbytes(iostates.total.inbounds))
+              .font(.system(size: 11, weight: .medium, design: .monospaced))
+          } icon: {
+            Image(systemName: "arrow.down")
+              .font(.system(size: 9, weight: .semibold))
+              .foregroundColor(.cyan)
+          }
+        }
+      }
+      .padding(.horizontal, 12)
+      .padding(.vertical, 10)
+
+      Divider()
+        .padding(.horizontal, 8)
+
+      // Process list
+      if iostates.items.isEmpty {
+        Text(NSLocalizedString("no_activity", comment: "No network activity"))
+          .foregroundColor(.secondary)
+          .font(.system(size: 11))
+          .frame(maxWidth: .infinity, alignment: .center)
+          .padding(.vertical, 20)
+      } else {
+        ScrollView {
+          VStack(spacing: 0) {
+            ForEach(iostates.items) { item in
+              StatusBarDetailsItemView(state: item)
+            }
+          }
+        }
+        .frame(maxHeight: 260)
+      }
     }
-    .listStyle(.sidebar)
+    .frame(width: 280)
   }
 }
 
 struct StatusBarDetailsItemView: View {
   var state: NetworkState = NetworkState()
 
   var body: some View {
-    HStack(alignment: VerticalAlignment.center, spacing: 0) {
+    HStack {
       Text(state.name)
-        .frame(width: 140, alignment: Alignment.leading)
-      VStack(alignment: .trailing) {
-        Text(String(format: "%@ ▲", arguments: [formatbytes(state.outbounds)]))
-        Text(String(format: "%@ ▼", arguments: [formatbytes(state.inbounds)]))
+        .font(.system(size: 11))
+        .lineLimit(1)
+        .truncationMode(.tail)
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .help(state.name)
+
+      VStack(alignment: .trailing, spacing: 1) {
+        HStack(spacing: 2) {
+          Image(systemName: "arrow.up")
+            .font(.system(size: 7, weight: .medium))
+            .foregroundColor(.orange)
+          Text(formatbytes(state.outbounds))
+            .font(.system(size: 9, weight: .medium, design: .monospaced))
+        }
+        HStack(spacing: 2) {
+          Image(systemName: "arrow.down")
+            .font(.system(size: 7, weight: .medium))
+            .foregroundColor(.cyan)
+          Text(formatbytes(state.inbounds))
+            .font(.system(size: 9, weight: .medium, design: .monospaced))
+        }
       }
       .fixedSize()
-      .font(.system(size: 9, weight: .medium))
-      .frame(width: 60, alignment: Alignment.trailing)
     }
+    .padding(.horizontal, 12)
+    .padding(.vertical, 5)
   }
 }
 
 struct StatusBarMenuView_Previews: PreviewProvider {
   static let data = { () -> IOStates in
     let ret = IOStates()
+    ret.total = NetworkState(pid: 0, name: "total", inbounds: 10240, outbounds: 2048)
     ret.items = [
-      NetworkState(pid: 1, name: "process", inbounds: 512, outbounds: 512),
-      NetworkState(pid: 2, name: "process", inbounds: 64, outbounds: 1),
+      NetworkState(pid: 1, name: "Chrome", inbounds: 5120, outbounds: 1024),
+      NetworkState(pid: 2, name: "Slack", inbounds: 2048, outbounds: 512),
+      NetworkState(pid: 3, name: "Terminal", inbounds: 1024, outbounds: 256),
     ]
     return ret
   }()
   static var previews: some View {
     StatusBarDetailsView(iostates: data)
-      .frame(width: 200.0)
   }
 }
 
 struct StatusBarDetailsItemView_Previews: PreviewProvider {
   static var previews: some View {
-    StatusBarDetailsItemView(state: NetworkState(name: "process", inbounds: 1023, outbounds: 1000))
+    StatusBarDetailsItemView(state: NetworkState(pid: 1, name: "Chrome", inbounds: 10240, outbounds: 2048))
+      .frame(width: 280)
   }
 }

NetworkStatusBar/StatusBarView.swift

@@ -15,11 +15,11 @@ class IOStates: ObservableObject {
 struct StatusBarView: View {
   @ObservedObject var iostates = IOStates()
   var body: some View {
-    VStack(alignment: .trailing) {
+    VStack(alignment: .trailing, spacing: 2) {
       Text(String(format: "%@ ▲", arguments: [formatbytes(iostates.total.outbounds)]))
       Text(String(format: "%@ ▼", arguments: [formatbytes(iostates.total.inbounds)]))
     }
-    .font(.system(size: 9, weight: .medium))
+    .font(.system(size: 9, weight: .medium, design: .monospaced))
   }
 }
 

NetworkStatusBar/en.lproj/Localizable.strings

@@ -5,4 +5,6 @@
   Created by fatal cn on 2021/10/31.
 
 */
-"quit"="quit";
+"quit"="Quit";
+"network_traffic"="Network Traffic";
+"no_activity"="No network activity";

NetworkStatusBar/zh-Hans.lproj/Localizable.strings

@@ -6,3 +6,5 @@
 
 */
 "quit"="退出";
+"network_traffic"="网络流量";
+"no_activity"="暂无网络活动";