ok lets ship for now

lib/models/app_cloud_prefs.dart

@@ -0,0 +1,41 @@
+/// Cloud-synced app preferences (Home sections + Look ahead).
+library;
+
+import 'home_built_in_sections.dart';
+
+/// One-per-user prefs row mirrored in PocketBase `app_prefs`.
+class AppCloudPrefs {
+  const AppCloudPrefs({
+    required this.homeBuiltInSections,
+    required this.lookAheadMaxYears,
+  });
+
+  final HomeBuiltInSections homeBuiltInSections;
+  final int lookAheadMaxYears;
+
+  static const defaults = AppCloudPrefs(
+    homeBuiltInSections: HomeBuiltInSections.defaults,
+    lookAheadMaxYears: 5,
+  );
+
+  AppCloudPrefs copyWith({
+    HomeBuiltInSections? homeBuiltInSections,
+    int? lookAheadMaxYears,
+  }) {
+    return AppCloudPrefs(
+      homeBuiltInSections:
+          homeBuiltInSections ?? this.homeBuiltInSections,
+      lookAheadMaxYears: lookAheadMaxYears ?? this.lookAheadMaxYears,
+    );
+  }
+}
+
+/// Prefer local when the user has pending edits; otherwise take remote.
+AppCloudPrefs mergeAppCloudPrefs({
+  required AppCloudPrefs local,
+  required AppCloudPrefs? remote,
+  required bool preferLocal,
+}) {
+  if (preferLocal || remote == null) return local;
+  return remote;
+}

lib/providers/preferences_provider.dart

@@ -3,6 +3,7 @@ library;
 
 import 'package:flutter/foundation.dart';
 
+import '../models/app_cloud_prefs.dart';
 import '../models/home_built_in_sections.dart';
 import '../models/home_filter_widget.dart';
 import '../models/overview_favourite.dart';
@@ -28,9 +29,18 @@ class PreferencesController extends ChangeNotifier {
   /// Fired after Home widgets are persisted (for cloud push debounce).
   VoidCallback? onHomeWidgetsPersisted;
 
+  /// Fired after Home sections / Look ahead are persisted.
+  VoidCallback? onAppPrefsPersisted;
+
   /// Years ahead Look ahead can navigate (1–30, default 5).
   int get lookAheadMaxYears => _lookAheadMaxYears;
 
+  /// Snapshot used for PocketBase `app_prefs` sync.
+  AppCloudPrefs get cloudPrefs => AppCloudPrefs(
+        homeBuiltInSections: _homeBuiltInSections,
+        lookAheadMaxYears: _lookAheadMaxYears,
+      );
+
   List<OverviewFavourite> get overviewFavourites =>
       List.unmodifiable(_overviewFavourites);
 
@@ -55,7 +65,10 @@ class PreferencesController extends ChangeNotifier {
 
   HomeBuiltInSections get homeBuiltInSections => _homeBuiltInSections;
 
-  Future<void> setHomeBuiltInSections(HomeBuiltInSections sections) async {
+  Future<void> setHomeBuiltInSections(
+    HomeBuiltInSections sections, {
+    bool schedulePush = true,
+  }) async {
     if (sections.showTransactions == _homeBuiltInSections.showTransactions &&
         sections.showCategorized == _homeBuiltInSections.showCategorized &&
         sections.showRecent == _homeBuiltInSections.showRecent) {
@@ -64,6 +77,7 @@ class PreferencesController extends ChangeNotifier {
     _homeBuiltInSections = sections;
     notifyListeners();
     await _storage.saveHomeBuiltInSections(sections);
+    if (schedulePush) onAppPrefsPersisted?.call();
   }
 
   Future<void> setHomeShowTransactions(bool value) => setHomeBuiltInSections(
@@ -78,12 +92,29 @@ class PreferencesController extends ChangeNotifier {
         _homeBuiltInSections.copyWith(showRecent: value),
       );
 
-  Future<void> setLookAheadMaxYears(int years) async {
+  Future<void> setLookAheadMaxYears(
+    int years, {
+    bool schedulePush = true,
+  }) async {
     final next = years.clamp(1, 30);
     if (next == _lookAheadMaxYears) return;
     _lookAheadMaxYears = next;
     notifyListeners();
     await _storage.setLookAheadMaxYears(next);
+    if (schedulePush) onAppPrefsPersisted?.call();
+  }
+
+  Future<void> replaceCloudPrefs(
+    AppCloudPrefs prefs, {
+    bool notify = true,
+    bool schedulePush = false,
+  }) async {
+    _homeBuiltInSections = prefs.homeBuiltInSections;
+    _lookAheadMaxYears = prefs.lookAheadMaxYears.clamp(1, 30);
+    if (notify) notifyListeners();
+    await _storage.saveHomeBuiltInSections(_homeBuiltInSections);
+    await _storage.setLookAheadMaxYears(_lookAheadMaxYears);
+    if (schedulePush) onAppPrefsPersisted?.call();
   }
 
   Future<void> addOverviewFavourite(OverviewFavourite favourite) async {

lib/providers/sync_provider.dart

@@ -5,6 +5,7 @@ import 'dart:async';
 
 import 'package:flutter/foundation.dart';
 
+import '../models/app_cloud_prefs.dart';
 import '../models/home_filter_widget.dart';
 import '../models/overview_favourite.dart';
 import '../services/pb_sync_service.dart';
@@ -42,6 +43,7 @@ class SyncController extends ChangeNotifier {
     _meta.onPersisted = _scheduleMetaPush;
     _prefs.onFavouritesPersisted = _scheduleFavouritesPush;
     _prefs.onHomeWidgetsPersisted = _scheduleHomeWidgetsPush;
+    _prefs.onAppPrefsPersisted = _scheduleAppPrefsPush;
     _auth.addListener(_onAuthChanged);
     _bank.onAfterSuccessfulLoad = _onBankDataLoaded;
     if (_auth.isLoggedIn) {
@@ -61,6 +63,7 @@ class SyncController extends ChangeNotifier {
   bool _pushMetaPending = false;
   bool _pushFavouritesPending = false;
   bool _pushHomeWidgetsPending = false;
+  bool _pushAppPrefsPending = false;
   Timer? _pushDebounce;
   Timer? _progressHold;
   Timer? _uiNotifyThrottle;
@@ -194,6 +197,7 @@ class SyncController extends ChangeNotifier {
       _pushMetaPending = false;
       _pushFavouritesPending = false;
       _pushHomeWidgetsPending = false;
+      _pushAppPrefsPending = false;
       _lastError = null;
       _statusDetail = '';
       _showProgressRing = false;
@@ -206,10 +210,20 @@ class SyncController extends ChangeNotifier {
 
   /// Bank pull-to-refresh / reconnect finished — reconcile with PocketBase.
   ///
-  /// Always runs a full sync when logged in so (1) new API txs are pushed and
+  /// Runs a full sync when idle so (1) new API txs are pushed and
   /// (2) any cloud-only history the bank window lacks is pulled back.
+  ///
+  /// If a sync is already in flight (common at cold start: constructor sync
+  /// overlaps bank refresh), do **not** queue another full sync — that was
+  /// causing a back-to-back double pull of 4k+ txs.
   void _onBankDataLoaded() {
     if (!_auth.isLoggedIn) return;
+    if (_syncing) {
+      debugPrint(
+        'SyncController: bank load finished during sync — skip queued full sync',
+      );
+      return;
+    }
     unawaited(syncNow());
   }
 
@@ -246,6 +260,11 @@ class SyncController extends ChangeNotifier {
     _armPushDebounce();
   }
 
+  void _scheduleAppPrefsPush() {
+    _pushAppPrefsPending = true;
+    _armPushDebounce();
+  }
+
   void _armPushDebounce() {
     if (!_auth.isLoggedIn) return;
     if (_syncing) {
@@ -322,6 +341,20 @@ class SyncController extends ChangeNotifier {
         _prefs.homeFilterWidgets,
         remoteHomeWidgets,
       );
+      AppCloudPrefs? remoteAppPrefs;
+      try {
+        remoteAppPrefs = await service.pullAppPrefs(onStatus: _setStatus);
+      } catch (error) {
+        debugPrint('SyncController: app_prefs pull skipped ($error)');
+      }
+      // Prefer local when this device has pending prefs edits; otherwise
+      // take remote so a new install picks up cloud Home section toggles.
+      final preferLocalAppPrefs = _pushAppPrefsPending;
+      final mergedAppPrefs = mergeAppCloudPrefs(
+        local: _prefs.cloudPrefs,
+        remote: remoteAppPrefs,
+        preferLocal: preferLocalAppPrefs,
+      );
       // Apply without notifying — one rebuild after both stores are ready.
       await _meta.replaceStore(mergedMeta, notify: false);
       await _bank.applySyncedTransactions(remoteTxs, notify: false);
@@ -333,6 +366,7 @@ class SyncController extends ChangeNotifier {
         mergedHomeWidgets,
         notify: false,
       );
+      await _prefs.replaceCloudPrefs(mergedAppPrefs, notify: false);
       _meta.notifyListeners();
       _bank.notifyListeners();
       _prefs.notifyListeners();
@@ -365,6 +399,15 @@ class SyncController extends ChangeNotifier {
           'SyncController: home_filter_widgets push skipped ($error)',
         );
       }
+      try {
+        await service.pushAppPrefs(
+          mergedAppPrefs,
+          onStatus: _setStatus,
+        );
+        _pushAppPrefsPending = false;
+      } catch (error) {
+        debugPrint('SyncController: app_prefs push skipped ($error)');
+      }
       final bankSummary = await service.pushTransactions(
         _bank.transactions,
         progressStart: 0.82,
@@ -410,20 +453,31 @@ class SyncController extends ChangeNotifier {
     final pushMeta = _pushMetaPending;
     final pushFavourites = _pushFavouritesPending;
     final pushHomeWidgets = _pushHomeWidgetsPending;
+    final pushAppPrefs = _pushAppPrefsPending;
     _pushMetaPending = false;
     _pushFavouritesPending = false;
     _pushHomeWidgetsPending = false;
-    if (!pushMeta && !pushFavourites && !pushHomeWidgets) return;
+    _pushAppPrefsPending = false;
+    if (!pushMeta && !pushFavourites && !pushHomeWidgets && !pushAppPrefs) {
+      return;
+    }
 
     _progressHold?.cancel();
     _syncing = true;
     _progressSuccess = false;
 
-    final label = switch ((pushMeta, pushFavourites, pushHomeWidgets)) {
-      (false, false, true) => 'Home widgets',
-      (false, true, false) => 'Favourites',
-      (false, true, true) => 'Home layout',
-      (true, false, false) => 'Annotations',
+    final label = switch ((
+      pushMeta,
+      pushFavourites,
+      pushHomeWidgets,
+      pushAppPrefs,
+    )) {
+      (false, false, false, true) => 'App prefs',
+      (false, false, true, false) => 'Home widgets',
+      (false, false, true, true) => 'Home layout',
+      (false, true, false, false) => 'Favourites',
+      (false, true, true, _) => 'Home layout',
+      (true, false, false, false) => 'Annotations',
       _ => 'Changes',
     };
     _statusDetail = 'Pushing $label…';
@@ -436,7 +490,8 @@ class SyncController extends ChangeNotifier {
       var done = 0;
       final total = (pushMeta ? 1 : 0) +
           (pushFavourites ? 1 : 0) +
-          (pushHomeWidgets ? 1 : 0);
+          (pushHomeWidgets ? 1 : 0) +
+          (pushAppPrefs ? 1 : 0);
       void bump() {
         done++;
         _setProgress(done / total);
@@ -484,6 +539,22 @@ class SyncController extends ChangeNotifier {
         }
         bump();
       }
+      if (pushAppPrefs) {
+        _setStatus('Pushing app prefs…');
+        try {
+          await service.pushAppPrefs(
+            _prefs.cloudPrefs,
+            onStatus: _setStatus,
+          );
+          parts.add('App prefs updated');
+        } catch (error) {
+          debugPrint('SyncController: app_prefs push skipped ($error)');
+          // Re-queue so a missing collection doesn't drop the edit forever
+          // until the next manual full sync after migrate.
+          _pushAppPrefsPending = true;
+        }
+        bump();
+      }
 
       _setProgress(1.0);
       _lastSyncedAt = DateTime.now();
@@ -520,6 +591,7 @@ class SyncController extends ChangeNotifier {
     _meta.onPersisted = null;
     _prefs.onFavouritesPersisted = null;
     _prefs.onHomeWidgetsPersisted = null;
+    _prefs.onAppPrefsPersisted = null;
     super.dispose();
   }
 }

lib/screens/home_screen.dart

@@ -566,13 +566,19 @@ List<Widget> _packedHomeWidgetRows(List<HomeFilterWidget> widgets) {
       rows.add(
         Padding(
           padding: const EdgeInsets.only(bottom: 10),
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Expanded(child: HomeFilterWidgetCard(widgetConfig: a)),
-              const SizedBox(width: 10),
-              Expanded(child: HomeFilterWidgetCard(widgetConfig: b)),
-            ],
+          child: IntrinsicHeight(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Expanded(
+                  child: HomeFilterWidgetCard(widgetConfig: a),
+                ),
+                const SizedBox(width: 10),
+                Expanded(
+                  child: HomeFilterWidgetCard(widgetConfig: b),
+                ),
+              ],
+            ),
           ),
         ),
       );

lib/screens/overview_screen.dart

@@ -332,7 +332,7 @@ class _OverviewScreenState extends State<OverviewScreen> {
 
     return ListView(
       physics: const AlwaysScrollableScrollPhysics(),
-      padding: const EdgeInsets.fromLTRB(0, 8, 0, 32),
+      padding: const EdgeInsets.fromLTRB(0, 4, 0, 24),
       children: [
         if (bank.error != null) ...[
           Text(
@@ -341,7 +341,7 @@ class _OverviewScreenState extends State<OverviewScreen> {
               color: theme.colorScheme.error,
             ),
           ),
-          const SizedBox(height: 12),
+          const SizedBox(height: 8),
         ],
         Row(
           children: [
@@ -355,23 +355,33 @@ class _OverviewScreenState extends State<OverviewScreen> {
             ),
             TextButton(
               onPressed: _openFavouritesManager,
+              style: TextButton.styleFrom(
+                visualDensity: VisualDensity.compact,
+                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                padding: const EdgeInsets.symmetric(horizontal: 8),
+              ),
               child: const Text('Manage'),
             ),
             TextButton.icon(
               onPressed: () => setState(() => _showFavouritesView = false),
-              icon: const Icon(Icons.insights_outlined, size: 18),
+              style: TextButton.styleFrom(
+                visualDensity: VisualDensity.compact,
+                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                padding: const EdgeInsets.symmetric(horizontal: 8),
+              ),
+              icon: const Icon(Icons.open_in_new, size: 16),
               label: const Text('Full overview'),
             ),
           ],
         ),
-        const SizedBox(height: 4),
-        Text(
-          'All favourites with Display checked appear here. '
-          'Use Full overview to set a filter, then ★ → Save current filter.',
-          style: theme.textTheme.labelMedium,
-        ),
         if (displayed.isEmpty) ...[
-          const SizedBox(height: 24),
+          const SizedBox(height: 8),
+          Text(
+            'All favourites with Display checked appear here. '
+            'Use Full overview to set a filter, then ★ → Save current filter.',
+            style: theme.textTheme.labelMedium,
+          ),
+          const SizedBox(height: 16),
           Text(
             'No displayed favourites yet. Tap Manage to enable Display, '
             'or save a new filter from Full overview.',
@@ -380,9 +390,9 @@ class _OverviewScreenState extends State<OverviewScreen> {
             ),
           ),
         ] else ...[
-          const SizedBox(height: 12),
+          const SizedBox(height: 8),
           for (var i = 0; i < displayed.length; i++) ...[
-            if (i > 0) const SizedBox(height: 14),
+            if (i > 0) const SizedBox(height: 10),
             _favouriteChartCard(
               context: context,
               favourite: displayed[i],
@@ -1176,10 +1186,13 @@ class _ChartCard extends StatelessWidget {
   final VoidCallback? onEdit;
 
   static const _compactSegmentStyle = ButtonStyle(
-    visualDensity: VisualDensity(horizontal: -4, vertical: -3),
+    visualDensity: VisualDensity(horizontal: -4, vertical: -4),
     tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-    padding: WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: 8)),
-    minimumSize: WidgetStatePropertyAll(Size(0, 32)),
+    padding: WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: 6)),
+    minimumSize: WidgetStatePropertyAll(Size(0, 28)),
+    textStyle: WidgetStatePropertyAll(
+      TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
+    ),
   );
 
   Widget _filterButton(ColorScheme colors) {
@@ -1216,44 +1229,152 @@ class _ChartCard extends StatelessWidget {
     );
   }
 
-  Widget _editButton(ColorScheme colors) {
+  Widget _editButton(ColorScheme colors, {required bool compact}) {
     return IconButton(
       tooltip: 'Edit favourite',
       onPressed: onEdit,
       visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
-      constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+      constraints: BoxConstraints(
+        minWidth: compact ? 28 : 36,
+        minHeight: compact ? 28 : 36,
+      ),
       padding: EdgeInsets.zero,
       style: IconButton.styleFrom(
-        backgroundColor: colors.surfaceContainerHigh,
+        backgroundColor:
+            compact ? null : colors.surfaceContainerHigh,
         foregroundColor: colors.onSurfaceVariant,
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(10),
         ),
       ),
-      icon: const Icon(Icons.edit_outlined, size: 18),
+      icon: Icon(Icons.edit_outlined, size: compact ? 16 : 18),
     );
   }
 
+  Widget _legendRow(ColorScheme colors, {required bool compact}) {
+    if (metric == OverviewMetricMode.flow) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _LegendDot(
+            color: _kIncomeColor,
+            label: 'Income',
+            compact: compact,
+          ),
+          SizedBox(width: compact ? 10 : 14),
+          _LegendDot(
+            color: _kExpenseColor,
+            label: 'Expense',
+            compact: compact,
+          ),
+        ],
+      );
+    }
+    if (labelSpend.isEmpty) return const SizedBox.shrink();
+    return Wrap(
+      spacing: compact ? 8 : 12,
+      runSpacing: 2,
+      alignment: WrapAlignment.end,
+      children: [
+        for (final row in labelSpend.take(compact ? 3 : 5))
+          GestureDetector(
+            onTap: () => onLabelTap(row.label),
+            child: _LegendDot(
+              color: row.label.color,
+              label: row.label.name,
+              compact: compact,
+            ),
+          ),
+        if (labelSpend.length > (compact ? 3 : 5))
+          _LegendDot(
+            color: colors.outline,
+            label: 'Other',
+            compact: compact,
+          ),
+      ],
+    );
+  }
+
+  Widget _periodControls(ThemeData theme, {required bool compact}) {
+    final titleStyle = (compact
+            ? theme.textTheme.labelMedium
+            : theme.textTheme.titleMedium)
+        ?.copyWith(
+      fontWeight: FontWeight.w600,
+      color: compact ? theme.colorScheme.onSurfaceVariant : null,
+    );
+
+    if (period == OverviewPeriodMode.monthly) {
+      return Row(
+        children: [
+          IconButton(
+            tooltip: 'Previous year',
+            onPressed: canGoBack ? onBack : null,
+            visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
+            constraints: BoxConstraints(
+              minWidth: compact ? 28 : 32,
+              minHeight: compact ? 28 : 32,
+            ),
+            padding: EdgeInsets.zero,
+            icon: Icon(Icons.chevron_left, size: compact ? 20 : 22),
+          ),
+          Flexible(
+            child: Text(
+              periodTitle,
+              textAlign: TextAlign.left,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: titleStyle,
+            ),
+          ),
+          IconButton(
+            tooltip: 'Next year',
+            onPressed: canGoForward ? onForward : null,
+            visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
+            constraints: BoxConstraints(
+              minWidth: compact ? 28 : 32,
+              minHeight: compact ? 28 : 32,
+            ),
+            padding: EdgeInsets.zero,
+            icon: Icon(Icons.chevron_right, size: compact ? 20 : 22),
+          ),
+        ],
+      );
+    }
+
+    return Text(periodTitle, style: titleStyle);
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final colors = theme.colorScheme;
     final showFilter =
         metric == OverviewMetricMode.labels && onPickLabels != null;
-    final showFavouriteChrome =
-        onPeriodModeChanged != null || onEdit != null;
+    final compact = onPeriodModeChanged != null || onEdit != null;
+    final chartHeight = compact ? 176.0 : 220.0;
+
+    final legend = _legendRow(colors, compact: compact);
+    final hasLegend = metric == OverviewMetricMode.flow ||
+        labelSpend.isNotEmpty;
 
     return Card(
       color: colors.surfaceContainer,
       elevation: 0,
+      margin: EdgeInsets.zero,
       shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(20),
+        borderRadius: BorderRadius.circular(compact ? 16 : 20),
       ),
       child: Padding(
-        padding: const EdgeInsets.fromLTRB(14, 12, 14, 16),
+        padding: EdgeInsets.fromLTRB(
+          compact ? 12 : 14,
+          compact ? 10 : 12,
+          compact ? 10 : 14,
+          compact ? 12 : 16,
+        ),
         child: Column(
           children: [
-            if (showFavouriteChrome) ...[
+            if (compact) ...[
               Row(
                 children: [
                   if (onPeriodModeChanged != null)
@@ -1274,145 +1395,133 @@ class _ChartCard extends StatelessWidget {
                       onSelectionChanged: (selection) {
                         onPeriodModeChanged!(selection.first);
                       },
-                    )
-                  else
-                    const SizedBox.shrink(),
+                    ),
                   if (heading != null) ...[
-                    const SizedBox(width: 10),
+                    const SizedBox(width: 8),
                     Expanded(
                       child: Text(
                         heading!,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
-                        style: theme.textTheme.titleMedium?.copyWith(
+                        style: theme.textTheme.titleSmall?.copyWith(
                           fontWeight: FontWeight.w700,
                         ),
                       ),
                     ),
                   ] else
                     const Spacer(),
-                  if (onEdit != null) ...[
-                    const SizedBox(width: 6),
-                    _editButton(colors),
-                  ],
-                ],
-              ),
-              const SizedBox(height: 8),
-            ] else if (heading != null) ...[
-              Align(
-                alignment: Alignment.centerLeft,
-                child: Text(
-                  heading!,
-                  style: theme.textTheme.titleMedium?.copyWith(
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-              ),
-              const SizedBox(height: 8),
-            ],
-            if (period == OverviewPeriodMode.monthly)
-              Row(
-                children: [
-                  IconButton(
-                    tooltip: 'Previous year',
-                    onPressed: canGoBack ? onBack : null,
-                    visualDensity: const VisualDensity(
-                      horizontal: -4,
-                      vertical: -4,
-                    ),
-                    constraints: const BoxConstraints(
-                      minWidth: 32,
-                      minHeight: 32,
-                    ),
-                    padding: EdgeInsets.zero,
-                    icon: const Icon(Icons.chevron_left, size: 22),
-                  ),
-                  Expanded(
-                    child: Text(
-                      periodTitle,
-                      textAlign: TextAlign.center,
-                      style: theme.textTheme.titleMedium?.copyWith(
-                        fontWeight: FontWeight.w700,
-                      ),
-                    ),
-                  ),
-                  IconButton(
-                    tooltip: 'Next year',
-                    onPressed: canGoForward ? onForward : null,
-                    visualDensity: const VisualDensity(
-                      horizontal: -4,
-                      vertical: -4,
-                    ),
-                    constraints: const BoxConstraints(
-                      minWidth: 32,
-                      minHeight: 32,
-                    ),
-                    padding: EdgeInsets.zero,
-                    icon: const Icon(Icons.chevron_right, size: 22),
-                  ),
                   if (showFilter) ...[
-                    const SizedBox(width: 2),
+                    const SizedBox(width: 4),
                     _filterButton(colors),
                   ],
+                  if (onEdit != null) ...[
+                    const SizedBox(width: 2),
+                    _editButton(colors, compact: true),
+                  ],
                 ],
-              )
-            else
+              ),
+              const SizedBox(height: 4),
               Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
                 children: [
-                  SizedBox(width: showFilter ? 36 : 0),
                   Expanded(
-                    child: Text(
-                      periodTitle,
-                      textAlign: TextAlign.center,
-                      style: theme.textTheme.titleMedium?.copyWith(
-                        fontWeight: FontWeight.w700,
-                      ),
+                    child: _periodControls(theme, compact: true),
+                  ),
+                  if (hasLegend) ...[
+                    const SizedBox(width: 8),
+                    Flexible(child: legend),
+                  ],
+                ],
+              ),
+              const SizedBox(height: 6),
+            ] else ...[
+              if (heading != null) ...[
+                Align(
+                  alignment: Alignment.centerLeft,
+                  child: Text(
+                    heading!,
+                    style: theme.textTheme.titleMedium?.copyWith(
+                      fontWeight: FontWeight.w700,
                     ),
                   ),
-                  if (showFilter)
-                    _filterButton(colors)
-                  else
-                    const SizedBox(width: 0),
-                ],
-              ),
-            if (metric == OverviewMetricMode.flow) ...[
-              const Row(
-                mainAxisAlignment: MainAxisAlignment.end,
-                children: [
-                  _LegendDot(color: _kIncomeColor, label: 'Income'),
-                  SizedBox(width: 14),
-                  _LegendDot(color: _kExpenseColor, label: 'Expense'),
-                ],
-              ),
-              const SizedBox(height: 8),
-            ] else if (labelSpend.isNotEmpty) ...[
-              Align(
-                alignment: Alignment.centerRight,
-                child: Wrap(
-                  spacing: 12,
-                  runSpacing: 4,
-                  alignment: WrapAlignment.end,
+                ),
+                const SizedBox(height: 8),
+              ],
+              if (period == OverviewPeriodMode.monthly)
+                Row(
                   children: [
-                    for (final row in labelSpend.take(5))
-                      GestureDetector(
-                        onTap: () => onLabelTap(row.label),
-                        child: _LegendDot(
-                          color: row.label.color,
-                          label: row.label.name,
+                    IconButton(
+                      tooltip: 'Previous year',
+                      onPressed: canGoBack ? onBack : null,
+                      visualDensity: const VisualDensity(
+                        horizontal: -4,
+                        vertical: -4,
+                      ),
+                      constraints: const BoxConstraints(
+                        minWidth: 32,
+                        minHeight: 32,
+                      ),
+                      padding: EdgeInsets.zero,
+                      icon: const Icon(Icons.chevron_left, size: 22),
+                    ),
+                    Expanded(
+                      child: Text(
+                        periodTitle,
+                        textAlign: TextAlign.center,
+                        style: theme.textTheme.titleMedium?.copyWith(
+                          fontWeight: FontWeight.w700,
                         ),
                       ),
-                    if (labelSpend.length > 5)
-                      _LegendDot(
-                        color: colors.outline,
-                        label: 'Other',
+                    ),
+                    IconButton(
+                      tooltip: 'Next year',
+                      onPressed: canGoForward ? onForward : null,
+                      visualDensity: const VisualDensity(
+                        horizontal: -4,
+                        vertical: -4,
                       ),
+                      constraints: const BoxConstraints(
+                        minWidth: 32,
+                        minHeight: 32,
+                      ),
+                      padding: EdgeInsets.zero,
+                      icon: const Icon(Icons.chevron_right, size: 22),
+                    ),
+                    if (showFilter) ...[
+                      const SizedBox(width: 2),
+                      _filterButton(colors),
+                    ],
+                  ],
+                )
+              else
+                Row(
+                  children: [
+                    SizedBox(width: showFilter ? 36 : 0),
+                    Expanded(
+                      child: Text(
+                        periodTitle,
+                        textAlign: TextAlign.center,
+                        style: theme.textTheme.titleMedium?.copyWith(
+                          fontWeight: FontWeight.w700,
+                        ),
+                      ),
+                    ),
+                    if (showFilter)
+                      _filterButton(colors)
+                    else
+                      const SizedBox(width: 0),
                   ],
                 ),
-              ),
-              const SizedBox(height: 8),
+              if (hasLegend) ...[
+                Align(
+                  alignment: Alignment.centerRight,
+                  child: legend,
+                ),
+                const SizedBox(height: 8),
+              ],
             ],
             SizedBox(
-              height: 220,
+              height: chartHeight,
               child: metric == OverviewMetricMode.flow
                   ? _FlowBars(
                       months: months,
@@ -1908,23 +2017,34 @@ class _LabelMonthBars extends StatelessWidget {
 }
 
 class _LegendDot extends StatelessWidget {
-  const _LegendDot({required this.color, required this.label});
+  const _LegendDot({
+    required this.color,
+    required this.label,
+    this.compact = false,
+  });
 
   final Color color;
   final String label;
+  final bool compact;
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: [
         Container(
-          width: 8,
-          height: 8,
+          width: compact ? 6 : 8,
+          height: compact ? 6 : 8,
           decoration: BoxDecoration(color: color, shape: BoxShape.circle),
         ),
-        const SizedBox(width: 6),
-        Text(label, style: Theme.of(context).textTheme.labelMedium),
+        SizedBox(width: compact ? 4 : 6),
+        Text(
+          label,
+          style: compact
+              ? theme.textTheme.labelSmall
+              : theme.textTheme.labelMedium,
+        ),
       ],
     );
   }

lib/services/pb_sync_service.dart

@@ -7,7 +7,9 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:pocketbase/pocketbase.dart';
 
+import '../models/app_cloud_prefs.dart';
 import '../models/bank.dart';
+import '../models/home_built_in_sections.dart';
 import '../models/home_filter_widget.dart';
 import '../models/overview_favourite.dart';
 import '../models/transaction_meta.dart';
@@ -558,6 +560,43 @@ class PbSyncService {
     await _syncHomeFilterWidgets(userId, filter, widgets);
   }
 
+  /// Pull per-user app prefs (Home sections + Look ahead). Soft-fail if missing.
+  Future<AppCloudPrefs?> pullAppPrefs({
+    void Function(String message)? onStatus,
+  }) async {
+    final userId = _userId;
+    final filter = 'user="$userId"';
+    onStatus?.call('Pulling app prefs…');
+    final records = await _fullList('app_prefs', filter);
+    if (records.isEmpty) {
+      debugPrint('PbSyncService pull: app_prefs=0');
+      return null;
+    }
+    final r = records.first;
+    final prefs = AppCloudPrefs(
+      homeBuiltInSections: HomeBuiltInSections(
+        showTransactions: r.getBoolValue('home_show_transactions', true),
+        showCategorized: r.getBoolValue('home_show_categorized', true),
+        showRecent: r.getBoolValue('home_show_recent', true),
+      ),
+      lookAheadMaxYears:
+          r.getIntValue('look_ahead_max_years', 5).clamp(1, 30),
+    );
+    debugPrint('PbSyncService pull: app_prefs=1');
+    return prefs;
+  }
+
+  /// Upsert the single app_prefs row for this user.
+  Future<void> pushAppPrefs(
+    AppCloudPrefs prefs, {
+    void Function(String message)? onStatus,
+  }) async {
+    final userId = _userId;
+    final filter = 'user="$userId"';
+    onStatus?.call('Syncing app prefs…');
+    await _syncAppPrefs(userId, filter, prefs);
+  }
+
   /// Upserts local bank txs to PocketBase. Does **not** delete remote rows
   /// (partial local caches must not wipe another device).
   Future<String> pushTransactions(
@@ -832,6 +871,10 @@ class PbSyncService {
           filter =
               'user="$userId" && client_id="${key.replaceAll('"', '\\"')}"';
         }
+      case 'app_prefs':
+        if (userId != null) {
+          filter = 'user="$userId"';
+        }
       case 'transactions':
         final key = body['tx_id'];
         if (userId != null && key is String) {
@@ -1249,6 +1292,36 @@ class PbSyncService {
     await _runWriteOps('home_filter_widgets', ops);
   }
 
+  Future<void> _syncAppPrefs(
+    String userId,
+    String filter,
+    AppCloudPrefs prefs,
+  ) async {
+    final existing = await _fullList('app_prefs', filter);
+    final body = <String, dynamic>{
+      'user': userId,
+      'home_show_transactions': prefs.homeBuiltInSections.showTransactions,
+      'home_show_categorized': prefs.homeBuiltInSections.showCategorized,
+      'home_show_recent': prefs.homeBuiltInSections.showRecent,
+      'look_ahead_max_years': prefs.lookAheadMaxYears.clamp(1, 30),
+    };
+    final ops = <_BatchOp>[];
+    if (existing.isEmpty) {
+      ops.add(_BatchOp.create(body));
+    } else {
+      final remote = existing.first;
+      if (!_appPrefsUnchanged(remote, prefs)) {
+        ops.add(_BatchOp.update(remote.id, body));
+      }
+      // Enforce singleton: drop extras if any.
+      for (var i = 1; i < existing.length; i++) {
+        ops.add(_BatchOp.delete(existing[i].id));
+      }
+    }
+    debugPrint('PbSyncService app_prefs: remote=${existing.length} ops=${ops.length}');
+    await _runWriteOps('app_prefs', ops);
+  }
+
   bool _labelUnchanged(RecordModel remote, Map<String, dynamic> body) {
     return remote.getStringValue('name') == body['name'] &&
         remote.getIntValue('color') == body['color'] &&
@@ -1339,6 +1412,17 @@ class PbSyncService {
         remote.getBoolValue('show_amount_out', true) == w.showAmountOut &&
         remote.getBoolValue('show_count', true) == w.showCount;
   }
+
+  bool _appPrefsUnchanged(RecordModel remote, AppCloudPrefs prefs) {
+    final s = prefs.homeBuiltInSections;
+    return remote.getBoolValue('home_show_transactions', true) ==
+            s.showTransactions &&
+        remote.getBoolValue('home_show_categorized', true) ==
+            s.showCategorized &&
+        remote.getBoolValue('home_show_recent', true) == s.showRecent &&
+        remote.getIntValue('look_ahead_max_years', 5) ==
+            prefs.lookAheadMaxYears.clamp(1, 30);
+  }
 }
 
 RecurringTemplateSource _parseTemplateSource(String raw) {

lib/widgets/home_filter_widget_card.dart

@@ -65,28 +65,28 @@ class HomeFilterWidgetCard extends StatelessWidget {
       child: Card(
         color: colors.surfaceContainer,
         elevation: 0,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+        margin: EdgeInsets.zero,
+        clipBehavior: Clip.antiAlias,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
         child: InkWell(
-          borderRadius: BorderRadius.circular(16),
           onTap: editing ? onEdit : () => _openTransactions(context),
           child: Padding(
             padding: EdgeInsets.fromLTRB(
               14,
-              12,
+              14,
               editing ? 4 : 14,
-              12,
+              14,
             ),
             child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 if (dragHandle != null) ...[
-                  dragHandle!,
+                  Padding(
+                    padding: const EdgeInsets.only(top: 8),
+                    child: dragHandle!,
+                  ),
                   const SizedBox(width: 4),
                 ],
-                Icon(
-                  widgetConfig.icon,
-                  color: colors.primary,
-                ),
-                const SizedBox(width: 10),
                 Expanded(
                   child: widgetConfig.type == HomeWidgetType.budget
                       ? _BudgetBody(
@@ -127,6 +127,139 @@ class HomeFilterWidgetCard extends StatelessWidget {
   }
 }
 
+String _monthName(DateTime date) {
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  return months[date.month - 1];
+}
+
+String? _subtitleFor(HomeFilterWidget widget) {
+  if (widget.type == HomeWidgetType.budget) return 'MONTHLY LIMIT';
+  if (widget.monthOnly) return _monthName(DateTime.now());
+  return null;
+}
+
+class _IconBadge extends StatelessWidget {
+  const _IconBadge({required this.icon});
+
+  final IconData icon;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = Theme.of(context).colorScheme;
+    return Container(
+      width: 40,
+      height: 40,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(
+          color: colors.outlineVariant.withValues(alpha: 0.55),
+        ),
+        color: colors.surfaceContainerHigh.withValues(alpha: 0.35),
+      ),
+      child: Icon(icon, color: colors.primary, size: 20),
+    );
+  }
+}
+
+class _CardHeader extends StatelessWidget {
+  const _CardHeader({
+    required this.icon,
+    required this.title,
+    this.subtitle,
+    this.trailing,
+  });
+
+  final IconData icon;
+  final String title;
+  final String? subtitle;
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colors = theme.colorScheme;
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _IconBadge(icon: icon),
+        const SizedBox(width: 12),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                title,
+                style: theme.textTheme.titleSmall?.copyWith(
+                  fontWeight: FontWeight.w700,
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+              if (subtitle != null) ...[
+                const SizedBox(height: 2),
+                Text(
+                  subtitle!,
+                  style: theme.textTheme.labelSmall?.copyWith(
+                    color: colors.onSurfaceVariant,
+                    letterSpacing:
+                        subtitle == 'MONTHLY LIMIT' ? 0.6 : 0,
+                    fontWeight: FontWeight.w500,
+                  ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ],
+            ],
+          ),
+        ),
+        if (trailing != null) ...[
+          const SizedBox(width: 8),
+          trailing!,
+        ],
+      ],
+    );
+  }
+}
+
+class _UsedPill extends StatelessWidget {
+  const _UsedPill({required this.label});
+
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colors = theme.colorScheme;
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+      decoration: BoxDecoration(
+        color: colors.surfaceContainerHighest.withValues(alpha: 0.65),
+        borderRadius: BorderRadius.circular(999),
+      ),
+      child: Text(
+        label,
+        style: theme.textTheme.labelSmall?.copyWith(
+          color: colors.onSurfaceVariant,
+          fontWeight: FontWeight.w600,
+        ),
+      ),
+    );
+  }
+}
+
 class _StatsBody extends StatelessWidget {
   const _StatsBody({
     required this.widgetConfig,
@@ -150,42 +283,65 @@ class _StatsBody extends StatelessWidget {
       filter: widgetConfig.filter,
     );
 
+    // Prefer a single hero "Spent" figure when that's the main metric.
+    final spentOnly = widgetConfig.showAmountOut &&
+        !widgetConfig.showAmountIn &&
+        !widgetConfig.showCount;
+
+    // Avoid LayoutBuilder/Spacer/Expanded here: half-width rows use
+    // IntrinsicHeight, which cannot measure those widgets.
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Text(
-          widgetConfig.name,
-          style: theme.textTheme.titleSmall?.copyWith(
-            fontWeight: FontWeight.w700,
+        _CardHeader(
+          icon: widgetConfig.icon,
+          title: widgetConfig.name,
+          subtitle: _subtitleFor(widgetConfig),
+        ),
+        if (spentOnly) ...[
+          const SizedBox(height: 32),
+          Text(
+            'Spent',
+            style: theme.textTheme.labelMedium?.copyWith(
+              color: colors.onSurfaceVariant,
+            ),
           ),
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-        ),
-        const SizedBox(height: 8),
-        Wrap(
-          spacing: 12,
-          runSpacing: 6,
-          children: [
-            if (widgetConfig.showAmountIn)
-              _Metric(
-                label: 'In',
-                value: formatMoney(metrics.amountIn, currency),
-                color: AppTheme.accent,
-              ),
-            if (widgetConfig.showAmountOut)
-              _Metric(
-                label: 'Out',
-                value: formatMoney(metrics.amountOut, currency),
-                color: AppTheme.expense,
-              ),
-            if (widgetConfig.showCount)
-              _Metric(
-                label: 'Txs',
-                value: '${metrics.count}',
-                color: colors.primary,
-              ),
-          ],
-        ),
+          const SizedBox(height: 2),
+          Text(
+            formatMoney(metrics.amountOut, currency),
+            style: theme.textTheme.titleMedium?.copyWith(
+              color: AppTheme.expense,
+              fontWeight: FontWeight.w700,
+              height: 1.15,
+            ),
+          ),
+        ] else ...[
+          const SizedBox(height: 14),
+          Wrap(
+            spacing: 16,
+            runSpacing: 8,
+            children: [
+              if (widgetConfig.showAmountIn)
+                _Metric(
+                  label: 'In',
+                  value: formatMoney(metrics.amountIn, currency),
+                  color: AppTheme.accent,
+                ),
+              if (widgetConfig.showAmountOut)
+                _Metric(
+                  label: 'Spent',
+                  value: formatMoney(metrics.amountOut, currency),
+                  color: AppTheme.expense,
+                ),
+              if (widgetConfig.showCount)
+                _Metric(
+                  label: 'Txs',
+                  value: '${metrics.count}',
+                  color: colors.primary,
+                ),
+            ],
+          ),
+        ],
       ],
     );
   }
@@ -216,68 +372,147 @@ class _BudgetBody extends StatelessWidget {
     final progress = budget.progress.clamp(0.0, 1.0);
     final over = budget.overBudget;
     final fillColor = over ? colors.error : colors.primary;
-    final trackColor = colors.surfaceContainerHighest;
+    // Grayish unfilled track (not green-tinted).
+    final trackColor = Color.alphaBlend(
+      colors.onSurface.withValues(alpha: 0.14),
+      colors.surfaceContainerHigh,
+    );
+    final trackLabelColor = colors.onSurfaceVariant;
+    final spentLabelColor = colors.onSurface;
+    final pct = budget.target <= 0 ? 0 : (progress * 100).round();
+    final half = widgetConfig.halfWidth;
+    final isBar = widgetConfig.chartStyle == HomeWidgetChartStyle.bar;
+    final subtitle = widgetConfig.monthOnly
+        ? _monthName(DateTime.now())
+        : 'MONTHLY LIMIT';
+
+    final capLine = _BudgetLegendLine(
+      bulletColor: trackLabelColor.withValues(alpha: 0.75),
+      textColor: trackLabelColor,
+      fontWeight: FontWeight.w500,
+      text: budget.target <= 0
+          ? '— cap'
+          : formatMoney(budget.target, currency),
+    );
+    final spentLine = _BudgetLegendLine(
+      bulletColor: fillColor,
+      textColor: spentLabelColor,
+      fontWeight: FontWeight.w700,
+      text: formatMoney(budget.used, currency),
+    );
+
+    final isRingOrPie = widgetConfig.chartStyle == HomeWidgetChartStyle.pie ||
+        widgetConfig.chartStyle == HomeWidgetChartStyle.ring;
+
+    Widget ringChart({required double size}) => SizedBox(
+          width: size,
+          height: size,
+          child: CustomPaint(
+            painter: _BudgetChartPainter(
+              progress: budget.target <= 0 ? 0 : progress,
+              style: widgetConfig.chartStyle,
+              fillColor: fillColor,
+              trackColor: trackColor,
+              percentLabel: budget.target > 0 ? '$pct%' : null,
+              labelColor: colors.onSurface,
+              labelScale: 0.32,
+            ),
+          ),
+        );
+
+    // Full-width ring/pie: ring beside header+amounts so the card stays short.
+    if (isRingOrPie && !half) {
+      return Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                _CardHeader(
+                  icon: widgetConfig.icon,
+                  title: widgetConfig.name,
+                  subtitle: subtitle,
+                ),
+                const SizedBox(height: 10),
+                capLine,
+                const SizedBox(height: 6),
+                spentLine,
+              ],
+            ),
+          ),
+          const SizedBox(width: 8),
+          ringChart(size: 68),
+        ],
+      );
+    }
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Text(
-          widgetConfig.name,
-          style: theme.textTheme.titleSmall?.copyWith(
-            fontWeight: FontWeight.w700,
-          ),
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
+        _CardHeader(
+          icon: widgetConfig.icon,
+          title: widgetConfig.name,
+          subtitle: subtitle,
+          // Percent lives in the ring/pie center; pill only for full-width bars.
+          trailing: budget.target > 0 && !half && isBar
+              ? _UsedPill(label: '$pct% used')
+              : null,
         ),
-        const SizedBox(height: 4),
-        Text(
-          '${formatMoney(budget.monthNet, currency)} · '
-          '${formatMoney(budget.used, currency)} / '
-          '${budget.target <= 0 ? '—' : formatMoney(budget.target, currency)}',
-          style: theme.textTheme.labelMedium?.copyWith(
-            color: over ? colors.error : colors.onSurfaceVariant,
-          ),
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-        ),
-        const SizedBox(height: 8),
+        const SizedBox(height: 14),
         switch (widgetConfig.chartStyle) {
-          HomeWidgetChartStyle.bar => ClipRRect(
-              borderRadius: BorderRadius.circular(6),
-              child: LinearProgressIndicator(
-                value: budget.target <= 0 ? 0 : progress,
-                minHeight: 10,
-                backgroundColor: trackColor,
-                color: fillColor,
-              ),
+          HomeWidgetChartStyle.bar => Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                _BudgetBar(
+                  progress: budget.target <= 0 ? 0 : progress,
+                  fillColor: fillColor,
+                  trackColor: trackColor,
+                  // Solid rounded bar (not a slider thumb).
+                  height: 14,
+                  percentLabel: half && budget.target > 0 ? '$pct%' : null,
+                ),
+                const SizedBox(height: 10),
+                if (half)
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      capLine,
+                      const SizedBox(height: 4),
+                      spentLine,
+                    ],
+                  )
+                else
+                  Row(
+                    children: [
+                      Expanded(child: capLine),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: Align(
+                          alignment: Alignment.centerRight,
+                          child: spentLine,
+                        ),
+                      ),
+                    ],
+                  ),
+              ],
             ),
           HomeWidgetChartStyle.pie || HomeWidgetChartStyle.ring => Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
               children: [
-                SizedBox(
-                  width: 52,
-                  height: 52,
-                  child: CustomPaint(
-                    painter: _BudgetChartPainter(
-                      progress: budget.target <= 0 ? 0 : progress,
-                      style: widgetConfig.chartStyle,
-                      fillColor: fillColor,
-                      trackColor: trackColor,
-                    ),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      capLine,
+                      const SizedBox(height: 8),
+                      spentLine,
+                    ],
                   ),
                 ),
                 const SizedBox(width: 10),
-                Expanded(
-                  child: Text(
-                    over
-                        ? 'Over budget'
-                        : budget.target <= 0
-                            ? 'Set a budget cap'
-                            : '${(progress * 100).round()}% of cap',
-                    style: theme.textTheme.labelMedium?.copyWith(
-                      color: over ? colors.error : colors.onSurfaceVariant,
-                    ),
-                  ),
-                ),
+                ringChart(size: 68),
               ],
             ),
         },
@@ -286,58 +521,194 @@ class _BudgetBody extends StatelessWidget {
   }
 }
 
+/// Rounded progress bar (no slider thumb).
+class _BudgetBar extends StatelessWidget {
+  const _BudgetBar({
+    required this.progress,
+    required this.fillColor,
+    required this.trackColor,
+    required this.height,
+    this.percentLabel,
+  });
+
+  final double progress;
+  final Color fillColor;
+  final Color trackColor;
+  final double height;
+  final String? percentLabel;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colors = theme.colorScheme;
+    return SizedBox(
+      height: height,
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(999),
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            ColoredBox(color: trackColor),
+            FractionallySizedBox(
+              widthFactor: progress.clamp(0.0, 1.0),
+              alignment: Alignment.centerLeft,
+              child: ColoredBox(color: fillColor),
+            ),
+            if (percentLabel != null)
+              Center(
+                child: Text(
+                  percentLabel!,
+                  style: theme.textTheme.labelSmall?.copyWith(
+                    color: progress >= 0.45
+                        ? colors.onPrimary
+                        : colors.onSurface,
+                    fontWeight: FontWeight.w800,
+                  ),
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _BudgetLegendLine extends StatelessWidget {
+  const _BudgetLegendLine({
+    required this.bulletColor,
+    required this.textColor,
+    required this.text,
+    this.fontWeight = FontWeight.w600,
+  });
+
+  final Color bulletColor;
+  final Color textColor;
+  final String text;
+  final FontWeight fontWeight;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          width: 7,
+          height: 7,
+          decoration: BoxDecoration(
+            color: bulletColor,
+            shape: BoxShape.circle,
+          ),
+        ),
+        const SizedBox(width: 8),
+        Flexible(
+          child: Text(
+            text,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: theme.textTheme.labelMedium?.copyWith(
+              color: textColor,
+              fontWeight: fontWeight,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
 class _BudgetChartPainter extends CustomPainter {
   _BudgetChartPainter({
     required this.progress,
     required this.style,
     required this.fillColor,
     required this.trackColor,
+    this.percentLabel,
+    this.labelColor,
+    this.labelScale = 0.42,
   });
 
   final double progress;
   final HomeWidgetChartStyle style;
   final Color fillColor;
   final Color trackColor;
+  final String? percentLabel;
+  final Color? labelColor;
+  final double labelScale;
 
   @override
   void paint(Canvas canvas, Size size) {
     final center = Offset(size.width / 2, size.height / 2);
     final radius = math.min(size.width, size.height) / 2;
+    final sweep = 2 * math.pi * progress.clamp(0.0, 1.0);
 
     if (style == HomeWidgetChartStyle.pie) {
-      final rect = Rect.fromCircle(center: center, radius: radius);
-      final track = Paint()..color = trackColor;
-      canvas.drawCircle(center, radius, track);
+      // Donut-style pizza: thick ring cutout so % stays readable.
+      final stroke = radius * 0.42;
+      final r = radius - stroke / 2;
+      final trackPaint = Paint()
+        ..color = trackColor
+        ..style = PaintingStyle.stroke
+        ..strokeWidth = stroke;
+      canvas.drawCircle(center, r, trackPaint);
       if (progress > 0) {
-        final sweep = 2 * math.pi * progress.clamp(0.0, 1.0);
-        final fill = Paint()..color = fillColor;
-        canvas.drawArc(rect, -math.pi / 2, sweep, true, fill);
+        canvas.drawArc(
+          Rect.fromCircle(center: center, radius: r),
+          -math.pi / 2,
+          sweep,
+          false,
+          Paint()
+            ..color = fillColor
+            ..style = PaintingStyle.stroke
+            ..strokeWidth = stroke
+            ..strokeCap = StrokeCap.butt,
+        );
+      }
+    } else {
+      // Thick ring with rounded caps (reference mock).
+      final stroke = radius * 0.22;
+      final r = radius - stroke / 2;
+      canvas.drawCircle(
+        center,
+        r,
+        Paint()
+          ..color = trackColor
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = stroke
+          ..strokeCap = StrokeCap.round,
+      );
+      if (progress > 0) {
+        canvas.drawArc(
+          Rect.fromCircle(center: center, radius: r),
+          -math.pi / 2,
+          sweep,
+          false,
+          Paint()
+            ..color = fillColor
+            ..style = PaintingStyle.stroke
+            ..strokeWidth = stroke
+            ..strokeCap = StrokeCap.round,
+        );
       }
-      return;
     }
 
-    // Ring (activity-style).
-    const stroke = 7.0;
-    final trackPaint = Paint()
-      ..color = trackColor
-      ..style = PaintingStyle.stroke
-      ..strokeWidth = stroke
-      ..strokeCap = StrokeCap.round;
-    final fillPaint = Paint()
-      ..color = fillColor
-      ..style = PaintingStyle.stroke
-      ..strokeWidth = stroke
-      ..strokeCap = StrokeCap.round;
-    final r = radius - stroke / 2;
-    canvas.drawCircle(center, r, trackPaint);
-    if (progress > 0) {
-      final sweep = 2 * math.pi * progress.clamp(0.0, 1.0);
-      canvas.drawArc(
-        Rect.fromCircle(center: center, radius: r),
-        -math.pi / 2,
-        sweep,
-        false,
-        fillPaint,
+    final label = percentLabel;
+    if (label != null && labelColor != null) {
+      final tp = TextPainter(
+        text: TextSpan(
+          text: label,
+          style: TextStyle(
+            color: labelColor,
+            fontSize: radius * labelScale,
+            fontWeight: FontWeight.w800,
+            height: 1,
+          ),
+        ),
+        textDirection: TextDirection.ltr,
+      )..layout();
+      tp.paint(
+        canvas,
+        center - Offset(tp.width / 2, tp.height / 2),
       );
     }
   }
@@ -347,7 +718,10 @@ class _BudgetChartPainter extends CustomPainter {
     return oldDelegate.progress != progress ||
         oldDelegate.style != style ||
         oldDelegate.fillColor != fillColor ||
-        oldDelegate.trackColor != trackColor;
+        oldDelegate.trackColor != trackColor ||
+        oldDelegate.percentLabel != percentLabel ||
+        oldDelegate.labelColor != labelColor ||
+        oldDelegate.labelScale != labelScale;
   }
 }
 

lib/widgets/home_widgets_sheet.dart

@@ -10,7 +10,6 @@ import '../providers/bank_provider.dart';
 import '../providers/preferences_provider.dart';
 import '../providers/tx_meta_provider.dart';
 import '../widgets/label_filter_dialog.dart';
-import '../widgets/overview_favourites_sheet.dart' show promptFavouriteName;
 
 Future<void> showHomeWidgetsSheet(BuildContext context) {
   return showModalBottomSheet<void>(
@@ -50,22 +49,11 @@ Future<HomeFilterWidget?> composeHomeFilterWidget(
     if (filter == null || !navigator.mounted) return null;
   }
 
-  if (!navigator.mounted) return null;
-  final name = await promptFavouriteName(
-    navigator.context,
-    initial: existing?.name ?? '',
-    title: existing == null ? 'Name this widget' : 'Rename widget',
-  );
-  if (name == null || !navigator.mounted) return null;
-
-  // Let the name dialog finish popping before presenting options.
-  await WidgetsBinding.instance.endOfFrame;
   if (!navigator.mounted) return null;
 
   final draft = existing == null
-      ? HomeFilterWidget.fromFilter(name: name, filter: filter)
+      ? HomeFilterWidget.fromFilter(name: 'Filter', filter: filter)
       : existing.copyWith(
-          name: name,
           labelIds: filter.labelIds.toList(growable: false),
           flow: filter.flow,
           amountRange: filter.amountRange,
@@ -73,6 +61,9 @@ Future<HomeFilterWidget?> composeHomeFilterWidget(
           monthOnly: filter.monthOnly,
         );
 
+  // Name is edited inside Widget options (no separate rename dialog).
+  await WidgetsBinding.instance.endOfFrame;
+  if (!navigator.mounted) return null;
   return _promptWidgetMetrics(navigator.context, draft);
 }
 
@@ -80,265 +71,296 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
   BuildContext context,
   HomeFilterWidget draft,
 ) {
-  var type = draft.type;
-  var iconId = draft.iconId;
-  var chartStyle = draft.chartStyle;
-  var budgetCapMode = draft.budgetCapMode;
-  var budgetFixedAmount = draft.budgetFixedAmount;
-  var budgetAverageMonths = draft.budgetAverageMonths;
-  var showIn = draft.showAmountIn;
-  var showOut = draft.showAmountOut;
-  var showCount = draft.showCount;
-  var halfWidth = draft.halfWidth;
-  final amountController = TextEditingController(
-    text: budgetFixedAmount > 0
-        ? (budgetFixedAmount == budgetFixedAmount.roundToDouble()
-            ? budgetFixedAmount.toStringAsFixed(0)
-            : budgetFixedAmount.toStringAsFixed(2))
-        : '',
-  );
-
   return showDialog<HomeFilterWidget>(
     context: context,
     useRootNavigator: true,
-    builder: (context) {
-      return StatefulBuilder(
-        builder: (context, setState) {
-          final theme = Theme.of(context);
-          return AlertDialog(
-            title: const Text('Widget options'),
-            content: SizedBox(
-              width: 360,
-              child: SingleChildScrollView(
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  children: [
-                    Text('Type', style: theme.textTheme.titleSmall),
-                    const SizedBox(height: 8),
-                    SegmentedButton<HomeWidgetType>(
-                      segments: const [
-                        ButtonSegment(
-                          value: HomeWidgetType.stats,
-                          label: Text('Stats'),
-                          icon: Icon(Icons.analytics_outlined),
-                        ),
-                        ButtonSegment(
-                          value: HomeWidgetType.budget,
-                          label: Text('Budget'),
-                          icon: Icon(Icons.savings_outlined),
-                        ),
-                      ],
-                      selected: {type},
-                      onSelectionChanged: (value) {
-                        setState(() => type = value.first);
-                      },
-                    ),
-                    const SizedBox(height: 16),
-                    Text('Icon', style: theme.textTheme.titleSmall),
-                    const SizedBox(height: 8),
-                    Wrap(
-                      spacing: 6,
-                      runSpacing: 6,
-                      children: [
-                        for (final entry in HomeWidgetIcons.all)
-                          ChoiceChip(
-                            label: Icon(entry.$2, size: 18),
-                            selected: iconId == entry.$1,
-                            onSelected: (_) =>
-                                setState(() => iconId = entry.$1),
-                            tooltip: entry.$3,
-                            visualDensity: VisualDensity.compact,
-                            padding: const EdgeInsets.all(4),
-                          ),
-                      ],
-                    ),
-                    const SizedBox(height: 12),
-                    SwitchListTile(
-                      contentPadding: EdgeInsets.zero,
-                      title: const Text('Half width'),
-                      subtitle:
-                          const Text('Share the row with another widget'),
-                      value: halfWidth,
-                      onChanged: (value) =>
-                          setState(() => halfWidth = value),
-                    ),
-                    if (type == HomeWidgetType.stats) ...[
-                      const Divider(),
-                      CheckboxListTile(
-                        contentPadding: EdgeInsets.zero,
-                        title: const Text('Amount in'),
-                        value: showIn,
-                        onChanged: (value) =>
-                            setState(() => showIn = value ?? false),
-                      ),
-                      CheckboxListTile(
-                        contentPadding: EdgeInsets.zero,
-                        title: const Text('Amount out'),
-                        value: showOut,
-                        onChanged: (value) =>
-                            setState(() => showOut = value ?? false),
-                      ),
-                      CheckboxListTile(
-                        contentPadding: EdgeInsets.zero,
-                        title: const Text('Number of transactions'),
-                        value: showCount,
-                        onChanged: (value) =>
-                            setState(() => showCount = value ?? false),
-                      ),
-                    ] else ...[
-                      const Divider(),
-                      Text('Budget cap', style: theme.textTheme.titleSmall),
-                      const SizedBox(height: 8),
-                      SegmentedButton<HomeBudgetCapMode>(
-                        segments: const [
-                          ButtonSegment(
-                            value: HomeBudgetCapMode.fixed,
-                            label: Text('Fixed'),
-                          ),
-                          ButtonSegment(
-                            value: HomeBudgetCapMode.averageMonths,
-                            label: Text('Average'),
-                          ),
-                        ],
-                        selected: {budgetCapMode},
-                        onSelectionChanged: (value) {
-                          setState(() => budgetCapMode = value.first);
-                        },
-                      ),
-                      const SizedBox(height: 12),
-                      if (budgetCapMode == HomeBudgetCapMode.fixed)
-                        TextField(
-                          controller: amountController,
-                          keyboardType: const TextInputType.numberWithOptions(
-                            decimal: true,
-                          ),
-                          decoration: const InputDecoration(
-                            labelText: 'Budget amount',
-                            hintText: 'e.g. 500',
-                            border: OutlineInputBorder(),
-                            isDense: true,
-                          ),
-                        )
-                      else
-                        Row(
-                          children: [
-                            Expanded(
-                              child: Text(
-                                'Average |net| of last',
-                                style: theme.textTheme.bodyMedium,
-                              ),
-                            ),
-                            SizedBox(
-                              width: 88,
-                              child: DropdownButtonFormField<int>(
-                                initialValue: budgetAverageMonths,
-                                decoration: const InputDecoration(
-                                  border: OutlineInputBorder(),
-                                  isDense: true,
-                                  suffixText: 'mo',
-                                ),
-                                items: [
-                                  for (final n in const [1, 2, 3, 6, 12, 24])
-                                    DropdownMenuItem(
-                                      value: n,
-                                      child: Text('$n'),
-                                    ),
-                                ],
-                                onChanged: (value) {
-                                  if (value == null) return;
-                                  setState(
-                                    () => budgetAverageMonths = value,
-                                  );
-                                },
-                              ),
-                            ),
-                          ],
-                        ),
-                      const SizedBox(height: 16),
-                      Text('Chart', style: theme.textTheme.titleSmall),
-                      const SizedBox(height: 8),
-                      SegmentedButton<HomeWidgetChartStyle>(
-                        segments: const [
-                          ButtonSegment(
-                            value: HomeWidgetChartStyle.bar,
-                            label: Text('Bar'),
-                            icon: Icon(Icons.linear_scale),
-                          ),
-                          ButtonSegment(
-                            value: HomeWidgetChartStyle.pie,
-                            label: Text('Pie'),
-                            icon: Icon(Icons.pie_chart_outline),
-                          ),
-                          ButtonSegment(
-                            value: HomeWidgetChartStyle.ring,
-                            label: Text('Ring'),
-                            icon: Icon(Icons.donut_large),
-                          ),
-                        ],
-                        selected: {chartStyle},
-                        onSelectionChanged: (value) {
-                          setState(() => chartStyle = value.first);
-                        },
-                      ),
-                      const SizedBox(height: 8),
-                      Text(
-                        'Progress uses this month’s net (|in − out|) for the '
-                        'filter toward the cap.',
-                        style: theme.textTheme.bodySmall?.copyWith(
-                          color: theme.colorScheme.onSurfaceVariant,
-                        ),
-                      ),
-                    ],
-                  ],
+    builder: (context) => _WidgetOptionsDialog(draft: draft),
+  );
+}
+
+class _WidgetOptionsDialog extends StatefulWidget {
+  const _WidgetOptionsDialog({required this.draft});
+
+  final HomeFilterWidget draft;
+
+  @override
+  State<_WidgetOptionsDialog> createState() => _WidgetOptionsDialogState();
+}
+
+class _WidgetOptionsDialogState extends State<_WidgetOptionsDialog> {
+  late HomeWidgetType _type;
+  late String _iconId;
+  late HomeWidgetChartStyle _chartStyle;
+  late HomeBudgetCapMode _budgetCapMode;
+  late int _budgetAverageMonths;
+  late bool _showIn;
+  late bool _showOut;
+  late bool _showCount;
+  late bool _halfWidth;
+  late final TextEditingController _nameController;
+  late final TextEditingController _amountController;
+
+  @override
+  void initState() {
+    super.initState();
+    final draft = widget.draft;
+    _type = draft.type;
+    _iconId = draft.iconId;
+    _chartStyle = draft.chartStyle;
+    _budgetCapMode = draft.budgetCapMode;
+    _budgetAverageMonths = draft.budgetAverageMonths;
+    _showIn = draft.showAmountIn;
+    _showOut = draft.showAmountOut;
+    _showCount = draft.showCount;
+    _halfWidth = draft.halfWidth;
+    _nameController = TextEditingController(text: draft.name);
+    final fixed = draft.budgetFixedAmount;
+    _amountController = TextEditingController(
+      text: fixed > 0
+          ? (fixed == fixed.roundToDouble()
+              ? fixed.toStringAsFixed(0)
+              : fixed.toStringAsFixed(2))
+          : '',
+    );
+  }
+
+  @override
+  void dispose() {
+    _nameController.dispose();
+    _amountController.dispose();
+    super.dispose();
+  }
+
+  void _save() {
+    final name = _nameController.text.trim();
+    if (name.isEmpty) return;
+    if (_type == HomeWidgetType.stats && !_showIn && !_showOut && !_showCount) {
+      return;
+    }
+    var fixed = widget.draft.budgetFixedAmount;
+    if (_type == HomeWidgetType.budget &&
+        _budgetCapMode == HomeBudgetCapMode.fixed) {
+      final parsed = double.tryParse(
+        _amountController.text.trim().replaceAll(',', '.'),
+      );
+      if (parsed == null || parsed <= 0) return;
+      fixed = parsed;
+    }
+    Navigator.of(context).pop(
+      widget.draft.copyWith(
+        name: name,
+        type: _type,
+        iconId: _iconId,
+        chartStyle: _chartStyle,
+        budgetCapMode: _budgetCapMode,
+        budgetFixedAmount: fixed,
+        budgetAverageMonths: _budgetAverageMonths,
+        showAmountIn: _showIn,
+        showAmountOut: _showOut,
+        showCount: _showCount,
+        halfWidth: _halfWidth,
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return AlertDialog(
+      title: const Text('Widget options'),
+      content: SizedBox(
+        width: double.maxFinite,
+        child: SingleChildScrollView(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              TextField(
+                controller: _nameController,
+                textCapitalization: TextCapitalization.sentences,
+                decoration: const InputDecoration(
+                  labelText: 'Name',
+                  border: OutlineInputBorder(),
+                  isDense: true,
                 ),
               ),
-            ),
-            actions: [
-              TextButton(
-                onPressed: () => Navigator.of(context).pop(),
-                child: const Text('Cancel'),
-              ),
-              FilledButton(
-                onPressed: () {
-                  if (type == HomeWidgetType.stats &&
-                      !showIn &&
-                      !showOut &&
-                      !showCount) {
-                    return;
-                  }
-                  var fixed = budgetFixedAmount;
-                  if (type == HomeWidgetType.budget &&
-                      budgetCapMode == HomeBudgetCapMode.fixed) {
-                    final parsed = double.tryParse(
-                      amountController.text.trim().replaceAll(',', '.'),
-                    );
-                    if (parsed == null || parsed <= 0) return;
-                    fixed = parsed;
-                  }
-                  Navigator.of(context).pop(
-                    draft.copyWith(
-                      type: type,
-                      iconId: iconId,
-                      chartStyle: chartStyle,
-                      budgetCapMode: budgetCapMode,
-                      budgetFixedAmount: fixed,
-                      budgetAverageMonths: budgetAverageMonths,
-                      showAmountIn: showIn,
-                      showAmountOut: showOut,
-                      showCount: showCount,
-                      halfWidth: halfWidth,
-                    ),
-                  );
+              const SizedBox(height: 16),
+              Text('Type', style: theme.textTheme.titleSmall),
+              const SizedBox(height: 8),
+              SegmentedButton<HomeWidgetType>(
+                showSelectedIcon: false,
+                segments: const [
+                  ButtonSegment(
+                    value: HomeWidgetType.stats,
+                    label: Text('Stats'),
+                    icon: Icon(Icons.analytics_outlined),
+                  ),
+                  ButtonSegment(
+                    value: HomeWidgetType.budget,
+                    label: Text('Budget'),
+                    icon: Icon(Icons.savings_outlined),
+                  ),
+                ],
+                selected: {_type},
+                onSelectionChanged: (value) {
+                  setState(() => _type = value.first);
                 },
-                child: const Text('Save'),
               ),
+              const SizedBox(height: 16),
+              Text('Icon', style: theme.textTheme.titleSmall),
+              const SizedBox(height: 8),
+              Wrap(
+                spacing: 6,
+                runSpacing: 6,
+                children: [
+                  for (final entry in HomeWidgetIcons.all)
+                    ChoiceChip(
+                      label: Icon(entry.$2, size: 18),
+                      selected: _iconId == entry.$1,
+                      onSelected: (_) => setState(() => _iconId = entry.$1),
+                      tooltip: entry.$3,
+                      visualDensity: VisualDensity.compact,
+                      padding: const EdgeInsets.all(4),
+                    ),
+                ],
+              ),
+              const SizedBox(height: 12),
+              SwitchListTile(
+                contentPadding: EdgeInsets.zero,
+                title: const Text('Half width'),
+                subtitle: const Text('Share the row with another widget'),
+                value: _halfWidth,
+                onChanged: (value) => setState(() => _halfWidth = value),
+              ),
+              if (_type == HomeWidgetType.stats) ...[
+                const Divider(),
+                CheckboxListTile(
+                  contentPadding: EdgeInsets.zero,
+                  title: const Text('Amount in'),
+                  value: _showIn,
+                  onChanged: (value) =>
+                      setState(() => _showIn = value ?? false),
+                ),
+                CheckboxListTile(
+                  contentPadding: EdgeInsets.zero,
+                  title: const Text('Spent'),
+                  value: _showOut,
+                  onChanged: (value) =>
+                      setState(() => _showOut = value ?? false),
+                ),
+                CheckboxListTile(
+                  contentPadding: EdgeInsets.zero,
+                  title: const Text('Number of transactions'),
+                  value: _showCount,
+                  onChanged: (value) =>
+                      setState(() => _showCount = value ?? false),
+                ),
+              ] else ...[
+                const Divider(),
+                Text('Budget cap', style: theme.textTheme.titleSmall),
+                const SizedBox(height: 8),
+                SegmentedButton<HomeBudgetCapMode>(
+                  showSelectedIcon: false,
+                  segments: const [
+                    ButtonSegment(
+                      value: HomeBudgetCapMode.fixed,
+                      label: Text('Fixed'),
+                    ),
+                    ButtonSegment(
+                      value: HomeBudgetCapMode.averageMonths,
+                      label: Text('Average'),
+                    ),
+                  ],
+                  selected: {_budgetCapMode},
+                  onSelectionChanged: (value) {
+                    setState(() => _budgetCapMode = value.first);
+                  },
+                ),
+                const SizedBox(height: 12),
+                if (_budgetCapMode == HomeBudgetCapMode.fixed)
+                  TextField(
+                    controller: _amountController,
+                    keyboardType: const TextInputType.numberWithOptions(
+                      decimal: true,
+                    ),
+                    decoration: const InputDecoration(
+                      labelText: 'Budget amount',
+                      hintText: 'e.g. 500',
+                      border: OutlineInputBorder(),
+                      isDense: true,
+                    ),
+                  )
+                else
+                  DropdownButtonFormField<int>(
+                    key: ValueKey(_budgetAverageMonths),
+                    initialValue: _budgetAverageMonths,
+                    isExpanded: true,
+                    decoration: const InputDecoration(
+                      labelText: 'Average of last N months',
+                      border: OutlineInputBorder(),
+                      isDense: true,
+                    ),
+                    items: [
+                      for (final n in const [1, 2, 3, 6, 12, 24])
+                        DropdownMenuItem(
+                          value: n,
+                          child: Text('$n months'),
+                        ),
+                    ],
+                    onChanged: (value) {
+                      if (value == null) return;
+                      setState(() => _budgetAverageMonths = value);
+                    },
+                  ),
+                const SizedBox(height: 16),
+                Text('Chart', style: theme.textTheme.titleSmall),
+                const SizedBox(height: 8),
+                Wrap(
+                  spacing: 8,
+                  children: [
+                    for (final entry in const [
+                      (HomeWidgetChartStyle.bar, Icons.linear_scale, 'Bar'),
+                      (
+                        HomeWidgetChartStyle.pie,
+                        Icons.pie_chart_outline,
+                        'Pie'
+                      ),
+                      (HomeWidgetChartStyle.ring, Icons.donut_large, 'Ring'),
+                    ])
+                      ChoiceChip(
+                        avatar: Icon(entry.$2, size: 18),
+                        label: Text(entry.$3),
+                        selected: _chartStyle == entry.$1,
+                        onSelected: (_) =>
+                            setState(() => _chartStyle = entry.$1),
+                      ),
+                  ],
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  'Progress uses this month’s net (|in − out|) for the '
+                  'filter toward the cap.',
+                  style: theme.textTheme.bodySmall?.copyWith(
+                    color: theme.colorScheme.onSurfaceVariant,
+                  ),
+                ),
+              ],
             ],
-          );
-        },
-      );
-    },
-  ).whenComplete(amountController.dispose);
+          ),
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.of(context).pop(),
+          child: const Text('Cancel'),
+        ),
+        FilledButton(
+          onPressed: _save,
+          child: const Text('Save'),
+        ),
+      ],
+    );
+  }
 }
 
 class _HomeWidgetsSheet extends StatelessWidget {
@@ -517,7 +539,7 @@ class _HomeWidgetsSheet extends StatelessWidget {
       if (w.labelIds.isNotEmpty) '${w.labelIds.length} labels',
       if (w.query.trim().isNotEmpty) '“${w.query.trim()}”',
       if (w.type == HomeWidgetType.stats && w.showAmountIn) 'In',
-      if (w.type == HomeWidgetType.stats && w.showAmountOut) 'Out',
+      if (w.type == HomeWidgetType.stats && w.showAmountOut) 'Spent',
       if (w.type == HomeWidgetType.stats && w.showCount) 'Count',
       if (w.halfWidth) 'Half',
     ];

pocketbase/pb_migrations/1740000007_ingtrak_app_prefs.js

@@ -0,0 +1,67 @@
+/// PocketBase migration: per-user app preferences (Home sections + Look ahead).
+///
+/// Apply on the server:
+///
+///   sudo cp this_file /opt/pocketbase/pb_migrations/
+///   sudo chown pocketbase:pocketbase /opt/pocketbase/pb_migrations/*.js
+///   sudo -u pocketbase /opt/pocketbase/pocketbase migrate up
+///   sudo systemctl restart pocketbase
+///
+/// Depends on usersapp.
+migrate((app) => {
+  const users = app.findCollectionByNameOrId("usersapp");
+
+  const ownerRules = {
+    listRule: "user = @request.auth.id",
+    viewRule: "user = @request.auth.id",
+    createRule: "@request.auth.id != '' && user = @request.auth.id",
+    updateRule: "user = @request.auth.id",
+    deleteRule: "user = @request.auth.id",
+  };
+
+  const appPrefs = new Collection({
+    type: "base",
+    name: "app_prefs",
+    ...ownerRules,
+    fields: [
+      {
+        type: "relation",
+        name: "user",
+        required: true,
+        collectionId: users.id,
+        cascadeDelete: true,
+        maxSelect: 1,
+      },
+      {
+        type: "bool",
+        name: "home_show_transactions",
+        required: false,
+      },
+      {
+        type: "bool",
+        name: "home_show_categorized",
+        required: false,
+      },
+      {
+        type: "bool",
+        name: "home_show_recent",
+        required: false,
+      },
+      {
+        type: "number",
+        name: "look_ahead_max_years",
+        required: false,
+        onlyInt: true,
+      },
+    ],
+    indexes: [
+      "CREATE UNIQUE INDEX idx_app_prefs_user ON app_prefs (user)",
+    ],
+  });
+  app.save(appPrefs);
+}, (app) => {
+  try {
+    const col = app.findCollectionByNameOrId("app_prefs");
+    app.delete(col);
+  } catch (_) {}
+});