splash screen update

README.md

@@ -1,83 +1,159 @@
-# MyApp
+# IngTrak
 
-Generic Flutter Android starter built with Flutter **3.47** (Dart **3.13**), Material 3, null safety, and [Provider](https://pub.dev/packages/provider) for state management.
+Personal finance app for **Enable Banking** (ING and other supported banks): transactions, labels, charts, budgets, look-ahead projections, and **PocketBase** cloud sync.
 
-Package name: `com.ingtrak.app`
+- **Package:** `com.ingtrak.app`
+- **Platform:** Android (Flutter)
+- **Flutter:** 3.47+ · **Dart:** 3.13+
 
 ## Features
 
-- Splash screen that fades into the main shell
+- **Bank connect** — Enable Banking via backend API + in-app WebView; optional deep link `ingtrak://connected`
-- Bottom navigation: Home, Search, Profile, Settings
+- **Home** — Balance, customizable layout: built-in sections (Transactions / Categorized / Recent) and filter widgets (stats or budget, half/full width, bar/pie/ring)
-- `ListView.builder` catalog with rounded, shadowed cards
+- **Transactions** — Search, filters, month heatmap, labels, notes, merchant / “apply to similar” rules
-- Detail screen with a matching `Hero` animation
+- **Overview** — Income/expense and label charts; save **favourite** chart filters
-- Light / dark / system theme, persisted with `shared_preferences`
+- **Look ahead** — Projected balance from recurring templates
-- Add-item form with validation
+- **Sync** — Bidirectional PocketBase sync (transactions, labels, annotations, favourites, home widgets, app prefs)
-- Mock catalog plus an `http` client aimed at JSONPlaceholder (toggle in Settings)
+- **Theme** — Light / dark / system (local)
+- **CSV** — Import ING CSV exports (Settings)
 
-## Folder structure
+## Prerequisites
+
+- [Flutter SDK](https://docs.flutter.dev/get-started/install) **3.47** or newer (Dart **3.13**)
+- Android Studio / SDK (Java **17**), emulator or device
+- Reachable **bank API** (`API_BASE_URL`) and **PocketBase** (`POCKETBASE_URL`)
+- PocketBase auth collection **`usersapp`** (create this before running migrations)
+
+```bash
+flutter doctor
+flutter doctor --android-licenses   # if prompted
+```
+
+## Quick start
+
+```bash
+cd ingtrakapp
+cp .env.example .env          # edit URLs if needed
+flutter pub get
+flutter devices
+flutter run                   # or: flutter run -d android
+```
+
+First Android build downloads Gradle and may take a few minutes.
+
+### Useful commands
+
+```bash
+flutter analyze
+flutter test
+flutter run --release
+flutter build apk
+```
+
+### Override config without editing `.env`
+
+```bash
+flutter run \
+  --dart-define=API_BASE_URL=https://your-api.example \
+  --dart-define=POCKETBASE_URL=https://your-pb.example \
+  --dart-define=POCKETBASE_USERS_COLLECTION=usersapp
+```
+
+`--dart-define` values win over `.env`.
+
+## Configuration
+
+Copy [`.env.example`](.env.example) to `.env` (both are listed as Flutter assets). No secrets belong in these files.
+
+| Variable | Purpose | Example |
+|----------|---------|---------|
+| `API_BASE_URL` | FastAPI bank / Enable Banking proxy | `https://ingtrak.satoshinakamoto.win` |
+| `POCKETBASE_URL` | PocketBase instance | `https://pb.satoshinakamoto.win` |
+| `POCKETBASE_USERS_COLLECTION` | Auth collection name | `usersapp` |
+
+Loaded in `lib/utils/app_config.dart` at startup (`flutter_dotenv`). Fallbacks: hosted API URL, PocketBase `http://127.0.0.1:8090`.
+
+### Bank redirect URIs
+
+1. **HTTP callback (Enable Banking Control Panel / backend `REDIRECT_URI`):**  
+   `{API_BASE_URL}/api/connect/callback`
+2. **Optional app deep link** (after HTML bounce; not registered with Enable Banking):  
+   `ingtrak://connected?code=…`  
+   Declared in `AndroidManifest.xml` and handled via `app_links`.
+
+## PocketBase setup
+
+Migrations live in [`pocketbase/pb_migrations/`](pocketbase/pb_migrations/). They assume collection **`usersapp`** already exists.
+
+### Collections
+
+| Migration | Collection |
+|-----------|------------|
+| `1740000000` | `labels`, `tx_meta`, `merchant_rules`, `exact_templates` |
+| `1740000001` | `transactions` |
+| `1740000002` | `recurring_templates` |
+| `1740000003` | `overview_favourites` |
+| `1740000004`–`0006` | `home_filter_widgets` (+ half width, budget fields) |
+| `1740000007` | `app_prefs` (Home section toggles + Look ahead years) |
+
+Built-in labels stay in the app; only **custom** labels sync. Rows are scoped per user (`user = @request.auth.id`).
+
+### Apply migrations (typical Linux host)
+
+```bash
+sudo cp pocketbase/pb_migrations/*.js /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
+```
+
+Adjust paths if your PocketBase install differs. After migrate, sign in on the app and run **Sync** (Account) so local data uploads.
+
+### What syncs
+
+- Bank transactions, labels, tx annotations, merchant/exact templates  
+- Recurring templates, overview favourites, home filter widgets  
+- App prefs: Home built-in section visibility, Look ahead max years  
+
+Theme mode stays **device-local**.
+
+## Project layout
 
 ```
-android-flutter-app-generic/
+ingtrakapp/
-├── android/                         # Android embedding, Gradle, manifest
+├── android/                      # Android embedding (com.ingtrak.app)
+├── assets/branding/              # App icon source + generated launcher assets
 ├── lib/
-│   ├── main.dart                    # Entry point, Provider scope, MaterialApp
+│   ├── main.dart                 # Providers, dotenv, deep links
-│   ├── models/
+│   ├── models/                   # Bank, meta, favourites, home widgets, prefs
-│   │   └── item.dart                # Item + ItemCategory
+│   ├── providers/                # Auth, bank, sync, tx_meta, preferences, theme
-│   ├── providers/
+│   ├── screens/                  # Splash, auth, Home / Overview / Look ahead, …
-│   │   ├── item_provider.dart       # Catalog ChangeNotifier
+│   ├── services/                 # Bank API, PocketBase sync, CSV, storage
-│   │   └── theme_provider.dart      # ThemeMode ChangeNotifier
+│   ├── utils/                    # Config, theme, constants, connect helpers
-│   ├── screens/
+│   └── widgets/                  # Home widgets, filters, charts, sync UI
-│   │   ├── splash_screen.dart
+├── pocketbase/pb_migrations/     # Schema migrations
-│   │   ├── main_shell.dart          # NavigationBar host
-│   │   ├── home_screen.dart
-│   │   ├── search_screen.dart
-│   │   ├── profile_screen.dart
-│   │   ├── settings_screen.dart
-│   │   ├── item_detail_screen.dart
-│   │   └── add_item_screen.dart
-│   ├── services/
-│   │   ├── storage_service.dart     # shared_preferences wrapper
-│   │   ├── item_api.dart            # http placeholder
-│   │   ├── fake_item_data.dart      # Offline sample catalog
-│   │   └── item_repository.dart     # Mock vs remote switch
-│   ├── utils/
-│   │   ├── app_theme.dart           # Material 3 light/dark themes
-│   │   ├── constants.dart
-│   │   └── helpers.dart
-│   └── widgets/
-│       ├── app_text_field.dart
-│       ├── empty_state.dart
-│       ├── item_card.dart
-│       ├── item_hero_badge.dart
-│       ├── loading_view.dart
-│       └── responsive_body.dart
 ├── test/
-│   └── widget_test.dart
+├── .env.example
 └── pubspec.yaml
 ```
 
-## Run the app
+## Launcher icon
 
-You need the [Flutter SDK](https://docs.flutter.dev/get-started/install) (3.47 or newer) and an Android emulator or device.
+Source: `assets/branding/app_icon.png`. Regenerate Android mipmaps:
 
 ```bash
-cd android-flutter-app-generic
+dart run flutter_launcher_icons
-flutter pub get
-flutter run
 ```
 
-Useful extras:
+(Configured in `pubspec.yaml`; iOS not enabled — no `ios/` folder yet.)
 
-```bash
+## First-run checklist
-flutter devices          # list emulators / devices
-flutter run -d android   # target Android explicitly
-flutter analyze          # static analysis
-flutter test             # widget + unit tests
-```
 
-On first Android run, Flutter will download a Gradle distribution and compile the app. Accept any Android licenses with `flutter doctor --android-licenses` if prompted.
+1. `.env` points at your API + PocketBase  
+2. PocketBase migrations applied; `usersapp` exists; create an account (or use Admin → Users)  
+3. Backend Enable Banking `REDIRECT_URI` matches `{API_BASE_URL}/api/connect/callback`  
+4. `flutter run` → sign in → **Settings** → connect bank (or import CSV) → **Account** → Sync  
 
-## Theme and data
+## License / privacy
 
-- Open **Settings** to switch System / Light / Dark. The choice is stored locally.
+Private project. Bank credentials and tokens are handled by your backend and Enable Banking — keep API and PocketBase access controlled.
-- Turn on **Use remote sample API** to fetch posts from `https://jsonplaceholder.typicode.com/posts` through the `http` package. If the request fails, the app falls back to the bundled mock list.

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <background android:drawable="@color/ic_launcher_background"/>
+  <foreground>
+      <inset
+          android:drawable="@drawable/ic_launcher_foreground"
+          android:inset="16%" />
+  </foreground>
+</adaptive-icon>

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#1A1C1B</color>
+</resources>

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)) {
+    final label = switch ((
-      (false, false, true) => 'Home widgets',
+      pushMeta,
-      (false, true, false) => 'Favourites',
+      pushFavourites,
-      (false, true, true) => 'Home layout',
+      pushHomeWidgets,
-      (true, false, false) => 'Annotations',
+      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,15 +566,21 @@ List<Widget> _packedHomeWidgetRows(List<HomeFilterWidget> widgets) {
       rows.add(
         Padding(
           padding: const EdgeInsets.only(bottom: 10),
+          child: IntrinsicHeight(
             child: Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
-              Expanded(child: HomeFilterWidgetCard(widgetConfig: a)),
+                Expanded(
+                  child: HomeFilterWidgetCard(widgetConfig: a),
+                ),
                 const SizedBox(width: 10),
-              Expanded(child: HomeFilterWidgetCard(widgetConfig: b)),
+                Expanded(
+                  child: HomeFilterWidgetCard(widgetConfig: b),
+                ),
               ],
             ),
           ),
+        ),
       );
       i += 2;
       continue;

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),
+        if (displayed.isEmpty) ...[
+          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,
           ),
-        if (displayed.isEmpty) ...[
+          const SizedBox(height: 16),
-          const SizedBox(height: 24),
           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)),
+    padding: WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: 6)),
-    minimumSize: WidgetStatePropertyAll(Size(0, 32)),
+    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 =
+    final compact = onPeriodModeChanged != null || onEdit != null;
-        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,31 +1395,47 @@ 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 (showFilter) ...[
+                    const SizedBox(width: 4),
+                    _filterButton(colors),
+                  ],
                   if (onEdit != null) ...[
-                    const SizedBox(width: 6),
+                    const SizedBox(width: 2),
-                    _editButton(colors),
+                    _editButton(colors, compact: true),
                   ],
                 ],
               ),
-              const SizedBox(height: 8),
+              const SizedBox(height: 4),
-            ] else if (heading != null) ...[
+              Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Expanded(
+                    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(
@@ -1375,44 +1512,16 @@ class _ChartCard extends StatelessWidget {
                       const SizedBox(width: 0),
                   ],
                 ),
-            if (metric == OverviewMetricMode.flow) ...[
+              if (hasLegend) ...[
-              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(
+                  child: legend,
-                  spacing: 12,
-                  runSpacing: 4,
-                  alignment: WrapAlignment.end,
-                  children: [
-                    for (final row in labelSpend.take(5))
-                      GestureDetector(
-                        onTap: () => onLabelTap(row.label),
-                        child: _LegendDot(
-                          color: row.label.color,
-                          label: row.label.name,
-                        ),
-                      ),
-                    if (labelSpend.length > 5)
-                      _LegendDot(
-                        color: colors.outline,
-                        label: 'Other',
-                      ),
-                  ],
-                ),
                 ),
                 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,
+          width: compact ? 6 : 8,
-          height: 8,
+          height: compact ? 6 : 8,
           decoration: BoxDecoration(color: color, shape: BoxShape.circle),
         ),
-        const SizedBox(width: 6),
+        SizedBox(width: compact ? 4 : 6),
-        Text(label, style: Theme.of(context).textTheme.labelMedium),
+        Text(
+          label,
+          style: compact
+              ? theme.textTheme.labelSmall
+              : theme.textTheme.labelMedium,
+        ),
       ],
     );
   }

lib/screens/splash_screen.dart

@@ -82,17 +82,13 @@ class _SplashScreenState extends State<SplashScreen>
                 child: Column(
                   mainAxisSize: MainAxisSize.min,
                   children: [
-                    Container(
+                    ClipRRect(
-                      width: 88,
-                      height: 88,
-                      decoration: BoxDecoration(
-                        color: colors.onPrimary.withValues(alpha: 0.16),
                       borderRadius: BorderRadius.circular(24),
-                      ),
+                      child: Image.asset(
-                      child: Icon(
+                        'assets/branding/app_icon.png',
-                        Icons.account_balance_rounded,
+                        width: 112,
-                        size: 44,
+                        height: 112,
-                        color: colors.onPrimary,
+                        filterQuality: FilterQuality.high,
                       ),
                     ),
                     const SizedBox(height: 24),

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,21 +283,43 @@ 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: [
+        _CardHeader(
+          icon: widgetConfig.icon,
+          title: widgetConfig.name,
+          subtitle: _subtitleFor(widgetConfig),
+        ),
+        if (spentOnly) ...[
+          const SizedBox(height: 32),
           Text(
-          widgetConfig.name,
+            'Spent',
-          style: theme.textTheme.titleSmall?.copyWith(
+            style: theme.textTheme.labelMedium?.copyWith(
+              color: colors.onSurfaceVariant,
+            ),
+          ),
+          const SizedBox(height: 2),
+          Text(
+            formatMoney(metrics.amountOut, currency),
+            style: theme.textTheme.titleMedium?.copyWith(
+              color: AppTheme.expense,
               fontWeight: FontWeight.w700,
+              height: 1.15,
             ),
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
           ),
-        const SizedBox(height: 8),
+        ] else ...[
+          const SizedBox(height: 14),
           Wrap(
-          spacing: 12,
+            spacing: 16,
-          runSpacing: 6,
+            runSpacing: 8,
             children: [
               if (widgetConfig.showAmountIn)
                 _Metric(
@@ -174,7 +329,7 @@ class _StatsBody extends StatelessWidget {
                 ),
               if (widgetConfig.showAmountOut)
                 _Metric(
-                label: 'Out',
+                  label: 'Spent',
                   value: formatMoney(metrics.amountOut, currency),
                   color: AppTheme.expense,
                 ),
@@ -187,6 +342,7 @@ class _StatsBody extends StatelessWidget {
             ],
           ),
         ],
+      ],
     );
   }
 }
@@ -216,71 +372,246 @@ 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';
 
-    return Column(
+    final capLine = _BudgetLegendLine(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      bulletColor: trackLabelColor.withValues(alpha: 0.75),
-      children: [
+      textColor: trackLabelColor,
-        Text(
+      fontWeight: FontWeight.w500,
-          widgetConfig.name,
+      text: budget.target <= 0
-          style: theme.textTheme.titleSmall?.copyWith(
+          ? '— cap'
+          : formatMoney(budget.target, currency),
+    );
+    final spentLine = _BudgetLegendLine(
+      bulletColor: fillColor,
+      textColor: spentLabelColor,
       fontWeight: FontWeight.w700,
-          ),
+      text: formatMoney(budget.used, currency),
-          maxLines: 1,
+    );
-          overflow: TextOverflow.ellipsis,
+
-        ),
+    final isRingOrPie = widgetConfig.chartStyle == HomeWidgetChartStyle.pie ||
-        const SizedBox(height: 4),
+        widgetConfig.chartStyle == HomeWidgetChartStyle.ring;
-        Text(
+
-          '${formatMoney(budget.monthNet, currency)} · '
+    Widget ringChart({required double size}) => SizedBox(
-          '${formatMoney(budget.used, currency)} / '
+          width: size,
-          '${budget.target <= 0 ? '—' : formatMoney(budget.target, currency)}',
+          height: size,
-          style: theme.textTheme.labelMedium?.copyWith(
-            color: over ? colors.error : colors.onSurfaceVariant,
-          ),
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-        ),
-        const SizedBox(height: 8),
-        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.pie || HomeWidgetChartStyle.ring => Row(
-              children: [
-                SizedBox(
-                  width: 52,
-                  height: 52,
           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: [
+        _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: 14),
+        switch (widgetConfig.chartStyle) {
+          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: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      capLine,
+                      const SizedBox(height: 8),
+                      spentLine,
+                    ],
+                  ),
                 ),
                 const SizedBox(width: 10),
-                Expanded(
+                ringChart(size: 68),
+              ],
+            ),
+        },
+      ],
+    );
+  }
+}
+
+/// 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(
-                    over
+                  percentLabel!,
-                        ? 'Over budget'
+                  style: theme.textTheme.labelSmall?.copyWith(
-                        : budget.target <= 0
+                    color: progress >= 0.45
-                            ? 'Set a budget cap'
+                        ? colors.onPrimary
-                            : '${(progress * 100).round()}% of cap',
+                        : colors.onSurface,
-                    style: theme.textTheme.labelMedium?.copyWith(
+                    fontWeight: FontWeight.w800,
-                      color: over ? colors.error : colors.onSurfaceVariant,
                   ),
                 ),
               ),
           ],
         ),
-        },
+      ),
+    );
+  }
+}
+
+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,
+            ),
+          ),
+        ),
       ],
     );
   }
@@ -292,52 +623,92 @@ class _BudgetChartPainter extends CustomPainter {
     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);
+      // Donut-style pizza: thick ring cutout so % stays readable.
-      final track = Paint()..color = trackColor;
+      final stroke = radius * 0.42;
-      canvas.drawCircle(center, radius, track);
+      final r = radius - stroke / 2;
-      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);
-      }
-      return;
-    }
-
-    // Ring (activity-style).
-    const stroke = 7.0;
       final trackPaint = Paint()
         ..color = trackColor
         ..style = PaintingStyle.stroke
-      ..strokeWidth = 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,
+          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,
+        );
+      }
+    }
+
+    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,43 +71,124 @@ 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) {
+    builder: (context) => _WidgetOptionsDialog(draft: draft),
-      return StatefulBuilder(
+  );
-        builder: (context, setState) {
+}
+
+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: 360,
+        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,
+                ),
+              ),
+              const SizedBox(height: 16),
               Text('Type', style: theme.textTheme.titleSmall),
               const SizedBox(height: 8),
               SegmentedButton<HomeWidgetType>(
+                showSelectedIcon: false,
                 segments: const [
                   ButtonSegment(
                     value: HomeWidgetType.stats,
@@ -129,9 +201,9 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
                     icon: Icon(Icons.savings_outlined),
                   ),
                 ],
-                      selected: {type},
+                selected: {_type},
                 onSelectionChanged: (value) {
-                        setState(() => type = value.first);
+                  setState(() => _type = value.first);
                 },
               ),
               const SizedBox(height: 16),
@@ -144,9 +216,8 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
                   for (final entry in HomeWidgetIcons.all)
                     ChoiceChip(
                       label: Icon(entry.$2, size: 18),
-                            selected: iconId == entry.$1,
+                      selected: _iconId == entry.$1,
-                            onSelected: (_) =>
+                      onSelected: (_) => setState(() => _iconId = entry.$1),
-                                setState(() => iconId = entry.$1),
                       tooltip: entry.$3,
                       visualDensity: VisualDensity.compact,
                       padding: const EdgeInsets.all(4),
@@ -157,40 +228,39 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
               SwitchListTile(
                 contentPadding: EdgeInsets.zero,
                 title: const Text('Half width'),
-                      subtitle:
+                subtitle: const Text('Share the row with another widget'),
-                          const Text('Share the row with another widget'),
+                value: _halfWidth,
-                      value: halfWidth,
+                onChanged: (value) => setState(() => _halfWidth = value),
-                      onChanged: (value) =>
-                          setState(() => halfWidth = value),
               ),
-                    if (type == HomeWidgetType.stats) ...[
+              if (_type == HomeWidgetType.stats) ...[
                 const Divider(),
                 CheckboxListTile(
                   contentPadding: EdgeInsets.zero,
                   title: const Text('Amount in'),
-                        value: showIn,
+                  value: _showIn,
                   onChanged: (value) =>
-                            setState(() => showIn = value ?? false),
+                      setState(() => _showIn = value ?? false),
                 ),
                 CheckboxListTile(
                   contentPadding: EdgeInsets.zero,
-                        title: const Text('Amount out'),
+                  title: const Text('Spent'),
-                        value: showOut,
+                  value: _showOut,
                   onChanged: (value) =>
-                            setState(() => showOut = value ?? false),
+                      setState(() => _showOut = value ?? false),
                 ),
                 CheckboxListTile(
                   contentPadding: EdgeInsets.zero,
                   title: const Text('Number of transactions'),
-                        value: showCount,
+                  value: _showCount,
                   onChanged: (value) =>
-                            setState(() => showCount = value ?? false),
+                      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,
@@ -201,15 +271,15 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
                       label: Text('Average'),
                     ),
                   ],
-                        selected: {budgetCapMode},
+                  selected: {_budgetCapMode},
                   onSelectionChanged: (value) {
-                          setState(() => budgetCapMode = value.first);
+                    setState(() => _budgetCapMode = value.first);
                   },
                 ),
                 const SizedBox(height: 12),
-                      if (budgetCapMode == HomeBudgetCapMode.fixed)
+                if (_budgetCapMode == HomeBudgetCapMode.fixed)
                   TextField(
-                          controller: amountController,
+                    controller: _amountController,
                     keyboardType: const TextInputType.numberWithOptions(
                       decimal: true,
                     ),
@@ -221,65 +291,50 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
                     ),
                   )
                 else
-                        Row(
+                  DropdownButtonFormField<int>(
-                          children: [
+                    key: ValueKey(_budgetAverageMonths),
-                            Expanded(
+                    initialValue: _budgetAverageMonths,
-                              child: Text(
+                    isExpanded: true,
-                                'Average |net| of last',
-                                style: theme.textTheme.bodyMedium,
-                              ),
-                            ),
-                            SizedBox(
-                              width: 88,
-                              child: DropdownButtonFormField<int>(
-                                initialValue: budgetAverageMonths,
                     decoration: const InputDecoration(
+                      labelText: 'Average of last N months',
                       border: OutlineInputBorder(),
                       isDense: true,
-                                  suffixText: 'mo',
                     ),
                     items: [
                       for (final n in const [1, 2, 3, 6, 12, 24])
                         DropdownMenuItem(
                           value: n,
-                                      child: Text('$n'),
+                          child: Text('$n months'),
                         ),
                     ],
                     onChanged: (value) {
                       if (value == null) return;
-                                  setState(
+                      setState(() => _budgetAverageMonths = value);
-                                    () => budgetAverageMonths = value,
-                                  );
                     },
                   ),
-                            ),
-                          ],
-                        ),
                 const SizedBox(height: 16),
                 Text('Chart', style: theme.textTheme.titleSmall),
                 const SizedBox(height: 8),
-                      SegmentedButton<HomeWidgetChartStyle>(
+                Wrap(
-                        segments: const [
+                  spacing: 8,
-                          ButtonSegment(
+                  children: [
-                            value: HomeWidgetChartStyle.bar,
+                    for (final entry in const [
-                            label: Text('Bar'),
+                      (HomeWidgetChartStyle.bar, Icons.linear_scale, 'Bar'),
-                            icon: Icon(Icons.linear_scale),
+                      (
+                        HomeWidgetChartStyle.pie,
+                        Icons.pie_chart_outline,
+                        'Pie'
                       ),
-                          ButtonSegment(
+                      (HomeWidgetChartStyle.ring, Icons.donut_large, 'Ring'),
-                            value: HomeWidgetChartStyle.pie,
+                    ])
-                            label: Text('Pie'),
+                      ChoiceChip(
-                            icon: Icon(Icons.pie_chart_outline),
+                        avatar: Icon(entry.$2, size: 18),
-                          ),
+                        label: Text(entry.$3),
-                          ButtonSegment(
+                        selected: _chartStyle == entry.$1,
-                            value: HomeWidgetChartStyle.ring,
+                        onSelected: (_) =>
-                            label: Text('Ring'),
+                            setState(() => _chartStyle = entry.$1),
-                            icon: Icon(Icons.donut_large),
                       ),
                   ],
-                        selected: {chartStyle},
-                        onSelectionChanged: (value) {
-                          setState(() => chartStyle = value.first);
-                        },
                 ),
                 const SizedBox(height: 8),
                 Text(
@@ -300,45 +355,12 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
           child: const Text('Cancel'),
         ),
         FilledButton(
-                onPressed: () {
+          onPressed: _save,
-                  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,
-                    ),
-                  );
-                },
           child: const Text('Save'),
         ),
       ],
     );
-        },
+  }
-      );
-    },
-  ).whenComplete(amountController.dispose);
 }
 
 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 (_) {}
+});

pubspec.lock

@@ -33,6 +33,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      sha256: ace891da0862b0e4cabbb064ee3fd87b2728b898949fdb366d83fe98342c9f19
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.2.0"
+  args:
+    dependency: transitive
+    description:
+      name: args
+      sha256: d0481093c50b1da8910eb0bb301626d4d8eb7284aa739614d2b394ee09e3ea04
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.7.0"
   async:
     dependency: transitive
     description:
@@ -57,6 +73,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.1"
+  checked_yaml:
+    dependency: transitive
+    description:
+      name: checked_yaml
+      sha256: "959525d3162f249993882720d52b7e0c833978df229be20702b33d48d91de70f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.4"
+  cli_util:
+    dependency: transitive
+    description:
+      name: cli_util
+      sha256: ff6785f7e9e3c38ac98b2fb035701789de90154024a75b6cb926445e83197d1c
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.4.2"
   clock:
     dependency: transitive
     description:
@@ -150,6 +182,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.0.1"
+  flutter_launcher_icons:
+    dependency: "direct dev"
+    description:
+      name: flutter_launcher_icons
+      sha256: "10f13781741a2e3972126fae08393d3c4e01fa4cd7473326b94b72cf594195e7"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.14.4"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -200,6 +240,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.1.2"
+  image:
+    dependency: transitive
+    description:
+      name: image
+      sha256: "1976370a4df3091bb0f72409c187ad1f9132a818bc6b95ca59c0bae1c75c688e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.9.2"
   json_annotation:
     dependency: transitive
     description:
@@ -328,6 +376,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.25.1"
+  posix:
+    dependency: transitive
+    description:
+      name: posix
+      sha256: bc1bad54ad2b735816e31f8d4600cfde6c7839975085ddfbca48b6c9f7c4044e
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.5.2"
   provider:
     dependency: "direct main"
     description:
@@ -525,6 +581,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.0"
+  yaml:
+    dependency: transitive
+    description:
+      name: yaml
+      sha256: f67cdd8e07d3c6329146aaef1ba043542b3134c12489f553ca9a7435d1068aea
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.4"
 sdks:
   dart: ">=3.13.2 <4.0.0"
   flutter: ">=3.44.0"

pubspec.yaml

@@ -53,6 +53,15 @@ dev_dependencies:
   # package. See that file for information about deactivating specific lint
   # rules and activating additional ones.
   flutter_lints: ^6.0.0
+  flutter_launcher_icons: ^0.14.4
+
+flutter_launcher_icons:
+  android: true
+  ios: false
+  image_path: assets/branding/app_icon.png
+  adaptive_icon_background: "#1A1C1B"
+  adaptive_icon_foreground: assets/branding/app_icon_foreground.png
+  min_sdk_android: 21
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec
@@ -68,6 +77,7 @@ flutter:
   assets:
     - .env
     - .env.example
+    - assets/branding/app_icon.png
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/to/resolution-aware-images