feat(bar-app): tune density and add spend chart style toggle

Narrow the dropdown (380 to 360) and give it more vertical room (620 to 700).
Tighten the subscription cards (less spacing/padding) since they carry only a
few window rows. Make the spend chart taller (18 to 30) and let the user pick
its style in Settings: chunk bars (default) or a line graph with a subtle area
fill. Persist the choice in UserDefaults.

macos-bar/Sources/CCSBarApp/BarPreferencesView.swift

@@ -51,10 +51,9 @@ struct BarPreferencesView: View {
     .padding(.vertical, 10)
   }
 
-  /// Theme picker — placed first because it affects the whole dropdown, so it is
-  /// the most prominent setting. Bound directly to `$viewModel.appearance` (NOT
-  /// the alert-pref draft): appearance is global chrome, its `didSet` persists,
-  /// and @Published drives the live re-render — no writeThrough() needed.
+  /// Theme + chart style. Appearance affects the whole dropdown; chart style is
+  /// scoped to the spend sparkline. Both are bound directly to viewModel properties
+  /// whose `didSet` persist — no writeThrough() needed here.
   private var appearanceSection: some View {
     Section("Appearance") {
       Picker("Menu bar theme", selection: $viewModel.appearance) {
@@ -63,6 +62,13 @@ struct BarPreferencesView: View {
         Text("Dark").tag(BarAppearance.dark)
       }
       .pickerStyle(.segmented)
+      // Changing this live-updates the spend chart in the open dropdown because
+      // viewModel.spendChartStyle is @Published and SpendChartStyleStore persists it.
+      Picker("Spend graph", selection: $viewModel.spendChartStyle) {
+        Text("Bars").tag(SpendChartStyle.bars)
+        Text("Line").tag(SpendChartStyle.line)
+      }
+      .pickerStyle(.segmented)
     }
   }