feat: Refactor routing and navigation structure with StatefulShellRoute

- Introduced a new function `_shellBranchIndexForPath` to determine the index of the shell branch based on the path. - Replaced `ShellRoute` with `StatefulShellRoute.indexedStack` for better state management during navigation. - Updated `AppShell` to handle navigation path changes and integrate with the new routing structure. - Organized routes into `StatefulShellBranch` for better modularity and clarity. - Enhanced admin panel functionality with improved alias management and UI updates. - Added new methods in `ReceiptImportSessionNotifier` for managing selected items and edits more efficiently. - Improved UI components in receipt import and admin panels for better performance and user experience. - Added PageStorageKeys to various ListViews to maintain scroll positions across navigation. - Documented performance goals and profiling strategies in a new PERFORMANCE.md file.
2026-05-08 12:51:38 +02:00
parent 73309cb110
commit 0873fa42bb
12 changed files with 625 additions and 285 deletions
@@ -0,0 +1,133 @@
+# Flutter Performance – Profileringsguide
+
+## Mål
+
+| Mätpunkt | Gränsvärde |
+|---|---|
+| Frame build-tid (60 Hz) | < 16 ms |
+| Frame build-tid (120 Hz) | < 8 ms |
+| Scroll jank (tappade frames) | 0 vid normal scroll |
+| Minnesfotavtryck (app) | < 200 MB |
+
+---
+
+## 1. Starta i profile-läge
+
+Kör alltid profilmätningar i **profile mode**, inte debug. Debug-läget har JIT-kompilering och extra overhead.
+
+```bash
+# Mot fysisk enhet
+flutter run --profile
+
+# Mot Chrome (web)
+flutter run -d chrome --profile
+```
+
+---
+
+## 2. Flutter DevTools – Öppna
+
+```bash
+flutter pub global activate devtools
+flutter pub global run devtools
+```
+
+Eller anslut direkt från terminalen när appen körs i profile mode – Flutter skriver ut en DevTools-URL.
+
+---
+
+## 3. Timeline – Mät frame-tider
+
+1. Öppna **Performance**-fliken i DevTools.
+2. Klicka **Record**.
+3. Utför den aktion du vill mäta (t.ex. byt vy, scrolla).
+4. Klicka **Stop**.
+5. Granska:
+   - **UI thread** (Dart-kod) – bör vara < 16 ms per frame.
+   - **Raster thread** (GPU) – bör vara < 16 ms per frame.
+   - Röda/gula staplar = jank.
+
+### Kritiska mätpunkter i appen
+
+| Scenario | Vad att leta efter |
+|---|---|
+| Byta vy (NavigationBar) | Frame-tid vid `StatefulShellRoute`-byte; bör vara < 32 ms totalt |
+| Scrolla receptlista | Inga röda frames; `GridView.builder` bör recykla element |
+| Scrolla adminpaneler | `ListView.builder` i embedded-läge; verifiera att ingen `NeverScrollableScrollPhysics` blockerar |
+| Kvittoimport – kryssa i rad | Endast den berörda raden bör rebuilda (`ConsumerWidget.select`) |
+| Kvittoimport – "Välj alla" | Batch-uppdatering via `setSelectedForAll` – en enda `state =` |
+
+---
+
+## 4. Widget Rebuild-spårning
+
+Aktivera rebuild-räknare i DevTools under **Inspector → Widget rebuild counts**.
+
+Alternativt: lägg till tillfällig räknare i en widget:
+
+```dart
+int _buildCount = 0;
+
+@override
+Widget build(BuildContext context, WidgetRef ref) {
+  debugPrint('${widget.runtimeType} build #${++_buildCount}');
+  // ...
+}
+```
+
+### Förväntade rebuild-mönster efter optimeringar
+
+- `_ReceiptImportResultRow` med index X ska bara rebuilda när `selected[X]` ändras, inte när andra rader kryssas.
+- `AppShell` ska inte rebuilda vid vy-byte (StatefulShellRoute bevarar grenar).
+- Admin-paneler ska inte rebuilda hela listan vid en alias-ändring.
+
+---
+
+## 5. Memory Profiler
+
+1. DevTools → **Memory**-fliken.
+2. Klicka **Take snapshot** före och efter en tung operation.
+3. Jämför levande objekt – leta efter läckor (ackumulerade `StreamSubscription`, `Timer`, `Notifier`).
+
+---
+
+## 6. flutter analyze + dart fix
+
+```bash
+flutter analyze
+dart fix --apply
+```
+
+Åtgärda alla varningar om `const` och onödiga rebuilds.
+
+---
+
+## 7. Identifierade optimeringar (genomförda)
+
+| Område | Åtgärd | Effekt |
+|---|---|---|
+| Admin-paneler | Tog bort `NeverScrollableScrollPhysics` + `shrinkWrap` | Scroll fungerar, O(n) layout istället för O(n²) |
+| Admin alias-lista | `ListView.builder` istället för spread | Virtualiserad lista |
+| FABs | Explicita `heroTag` på alla FABs | Eliminerar hero-animation-krasch vid vy-byte |
+| Scrollables | `PageStorageKey` på alla listvy | Scrollposition bevaras vid vy-byte |
+| Router | `StatefulShellRoute.indexedStack` | Branch-state bevaras; ingen ombyggnad vid tab-byte |
+| Kvittoimport – resultatlista | `ListView.builder` + `SizedBox` bound height | Virtualiserad; max 620 px synlig |
+| Kvittoimport – radwidget | `ConsumerWidget` med `provider.select((s) => s?.selected[index])` | Endast ändrad rad rebuildar vid checkbox-toggle |
+| Kvittoimport – batch-API | `setSelectedForAll`, `setSelectedForIndexes`, `setImportedResult` | En `state =` och en SharedPreferences-skrivning per operation |
+
+---
+
+## 8. Snabbtest – Verifiera förbättringar
+
+```bash
+# Kör i profile mode och öppna DevTools automatiskt
+flutter run --profile --devtools-server-address=http://127.0.0.1:9100
+```
+
+Kontrollchecklista:
+
+- [ ] Vy-byte NavigationBar: inga röda frames i Timeline
+- [ ] Scroll i receptlista: < 2 tappade frames per 100 frames
+- [ ] Scroll i admin-flikar: fungerar utan lock
+- [ ] Kvittoimport – checkbox-toggle: rebuild-räknare ökar bara för berörd rad
+- [ ] Kvittoimport – "Välj alla": en burst av rebuilds (en per rad), inga dubbla
@@ -24,6 +24,17 @@ import '../../features/pantry/presentation/pantry_screen.dart';
 import '../../features/import/presentation/import_screen.dart';
 import '../../features/admin/presentation/admin_screen.dart';

+int? _shellBranchIndexForPath(String path) {
+  if (path.startsWith('/recipes')) return 0;
+  if (path.startsWith('/inventory')) return 1;
+  if (path.startsWith('/matsedel')) return 2;
+  if (path.startsWith('/baslager')) return 3;
+  if (path.startsWith('/import')) return 4;
+  if (path.startsWith('/profile')) return 5;
+  if (path.startsWith('/admin')) return 6;
+  return null;
+}
+
 final appRouterProvider = Provider<GoRouter>((ref) {
  final authState = ref.watch(authStateProvider);

@@ -175,39 +186,85 @@ final appRouterProvider = Provider<GoRouter>((ref) {
        },
      ),
      // Shell routes — shared AppShell with navigation bar.
-      ShellRoute(
-        builder: (context, state, child) {
-          return AppShell(location: state.uri.path, child: child);
+      StatefulShellRoute.indexedStack(
+        builder: (context, state, navigationShell) {
+          return AppShell(
+            location: state.uri.path,
+            onNavigateToPath: (path) {
+              final index = _shellBranchIndexForPath(path);
+              if (index == null) {
+                context.go(path);
+                return;
+              }
+
+              if (index == navigationShell.currentIndex) {
+                if (state.uri.path != path) {
+                  context.go(path);
+                }
+                return;
+              }
+
+              navigationShell.goBranch(index);
            },
+            child: navigationShell,
+          );
+        },
+        branches: [
+          StatefulShellBranch(
            routes: [
              GoRoute(
                path: '/recipes',
                builder: (context, state) => const RecipesScreen(),
              ),
+            ],
+          ),
+          StatefulShellBranch(
+            routes: [
              GoRoute(
                path: '/inventory',
                builder: (context, state) => const InventoryScreen(),
              ),
+            ],
+          ),
+          StatefulShellBranch(
+            routes: [
              GoRoute(
                path: '/matsedel',
                builder: (context, state) => const MealPlanScreen(),
              ),
+            ],
+          ),
+          StatefulShellBranch(
+            routes: [
              GoRoute(
                path: '/baslager',
                builder: (context, state) => const PantryScreen(),
              ),
+            ],
+          ),
+          StatefulShellBranch(
+            routes: [
              GoRoute(
                path: '/import',
                builder: (context, state) => const ImportScreen(),
              ),
+            ],
+          ),
+          StatefulShellBranch(
+            routes: [
              GoRoute(
                path: '/profile',
                builder: (context, state) => const ProfileScreen(),
              ),
+            ],
+          ),
+          StatefulShellBranch(
+            routes: [
              GoRoute(
                path: '/admin',
                redirect: (context, state) {
-              final token = ref.read(authStateProvider).maybeWhen(data: (t) => t, orElse: () => null);
+                  final token = ref.read(authStateProvider)
+                      .maybeWhen(data: (t) => t, orElse: () => null);
                  return jwtIsAdmin(token) ? null : '/recipes';
                },
                builder: (context, state) => const AdminScreen(),
@@ -215,5 +272,7 @@ final appRouterProvider = Provider<GoRouter>((ref) {
            ],
          ),
        ],
+      ),
+    ],
  );
 });
@@ -21,11 +21,13 @@ const _adminHeaderDestination = _AppDestination(

 class AppShell extends ConsumerWidget {
  final String location;
+  final ValueChanged<String> onNavigateToPath;
  final Widget child;

  const AppShell({
    super.key,
    required this.location,
+    required this.onNavigateToPath,
    required this.child,
  });

@@ -101,7 +103,7 @@ class AppShell extends ConsumerWidget {
    void navigateTo(int index) {
      final target = dests[index].path;
      if (target != location && context.mounted) {
-        context.go(target);
+        onNavigateToPath(target);
      }
    }

@@ -178,7 +180,7 @@ class AppShell extends ConsumerWidget {
              switch (value) {
                case 'profile':
                  if (location != '/profile' && context.mounted) {
-                    context.go('/profile');
+                    onNavigateToPath('/profile');
                  }
              }
            },
@@ -166,6 +166,49 @@ class _AdminAliasesPanelState extends ConsumerState<AdminAliasesPanel> {
          alias.displayProductName.toLowerCase().contains(query);
    }).toList();

+    Widget buildAliasCard(ReceiptAlias alias) {
+      return Card(
+        child: ListTile(
+          leading: const Icon(Icons.link_outlined),
+          title: Text(alias.receiptName, style: const TextStyle(fontWeight: FontWeight.w500)),
+          subtitle: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                '→ ${alias.displayProductName}',
+                style: const TextStyle(fontWeight: FontWeight.w400),
+              ),
+              Text(
+                'Produkt-ID: ${alias.productId}',
+                style: TextStyle(
+                  fontSize: 11,
+                  color: Theme.of(context).colorScheme.outline,
+                ),
+              ),
+            ],
+          ),
+          trailing: IconButton(
+            onPressed: () => _removeAlias(alias),
+            icon: const Icon(Icons.delete_outline),
+            tooltip: 'Ta bort alias',
+            color: Theme.of(context).colorScheme.error,
+          ),
+        ),
+      );
+    }
+
+    Widget buildAliasList({EdgeInsetsGeometry padding = EdgeInsets.zero}) {
+      return ListView.builder(
+        padding: padding,
+        itemCount: filteredAliases.length,
+        itemBuilder: (context, index) {
+          final alias = filteredAliases[index];
+          return buildAliasCard(alias);
+        },
+      );
+    }
+
    final content = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
@@ -230,51 +273,37 @@ class _AdminAliasesPanelState extends ConsumerState<AdminAliasesPanel> {
          onChanged: (value) => setState(() => _search = value),
        ),
        const SizedBox(height: 12),
-        if (filteredAliases.isEmpty)
-          const Text('Inga alias hittades.')
-        else
-          ...filteredAliases.map(
-            (alias) => Card(
-              child: ListTile(
-                leading: const Icon(Icons.link_outlined),
-                title: Text(alias.receiptName, style: const TextStyle(fontWeight: FontWeight.w500)),
-                subtitle: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Text(
-                      '→ ${alias.displayProductName}',
-                      style: const TextStyle(fontWeight: FontWeight.w400),
-                    ),
-                    Text(
-                      'Produkt-ID: ${alias.productId}',
-                      style: TextStyle(
-                        fontSize: 11,
-                        color: Theme.of(context).colorScheme.outline,
-                      ),
-                    ),
-                  ],
-                ),
-                trailing: IconButton(
-                  onPressed: () => _removeAlias(alias),
-                  icon: const Icon(Icons.delete_outline),
-                  tooltip: 'Ta bort alias',
-                  color: Theme.of(context).colorScheme.error,
-                ),
-              ),
-            ),
-          ),
+        if (filteredAliases.isEmpty) const Text('Inga alias hittades.'),
      ],
    );

    if (!widget.embedded) {
+      if (filteredAliases.isEmpty) {
        return ListView(
          padding: const EdgeInsets.all(16),
          children: [content],
        );
      }
+      return ListView(
+        padding: const EdgeInsets.all(16),
+        children: [
+          content,
+          const SizedBox(height: 8),
+          ...filteredAliases.map(buildAliasCard),
+        ],
+      );
+    }

-    return content;
+    if (filteredAliases.isEmpty) return content;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        content,
+        const SizedBox(height: 8),
+        Expanded(child: buildAliasList()),
+      ],
+    );
  }
 }

@@ -93,8 +93,8 @@ class _AdminPendingProductsPanelState
    }

    final content = ListView.builder(
-      shrinkWrap: widget.embedded,
-      physics: widget.embedded ? const NeverScrollableScrollPhysics() : null,
+      shrinkWrap: false,
+      physics: null,
      itemCount: _products.length,
      itemBuilder: (context, index) {
        final product = _products[index];
@@ -148,7 +148,7 @@ class _AdminPendingProductsPanelState
          style: theme.textTheme.bodyMedium,
        ),
        const SizedBox(height: 12),
-        content,
+        Expanded(child: content),
      ],
    );
  }
@@ -738,7 +738,10 @@ class _AdminProductsPanelState extends ConsumerState<AdminProductsPanel> {
      );
    }

-    return content;
+    return ListView(
+      padding: EdgeInsets.zero,
+      children: [content],
+    );
  }
 }

@@ -328,10 +328,8 @@ class _AdminUsersPanelState extends ConsumerState<AdminUsersPanel> {
    }

    final list = ListView.builder(
-      shrinkWrap: widget.embedded,
-      physics: widget.embedded
-          ? const NeverScrollableScrollPhysics()
-          : null,
+      shrinkWrap: false,
+      physics: null,
      padding: widget.embedded
          ? EdgeInsets.zero
          : const EdgeInsets.fromLTRB(16, 8, 16, 80),
@@ -376,7 +374,7 @@ class _AdminUsersPanelState extends ConsumerState<AdminUsersPanel> {
          label: Text(context.l10n.adminNewUser),
        ),
        const SizedBox(height: 16),
-        list,
+        Expanded(child: list),
      ],
    );
  }
@@ -186,6 +186,20 @@ class ReceiptImportSessionNotifier
    unawaited(_persist());
  }

+  void setImportedResult({
+    required List<ParsedReceiptItem> items,
+    required Map<int, ItemEdit> edits,
+    required Map<int, bool> selected,
+  }) {
+    final current = state ?? const ReceiptImportSession();
+    state = current.copyWith(
+      items: items,
+      edits: edits,
+      selected: selected,
+    );
+    unawaited(_persist());
+  }
+
  void setEdit(int index, ItemEdit edit) {
    if (state == null) return;
    final edits = Map<int, ItemEdit>.from(state!.edits)..[index] = edit;
@@ -200,6 +214,25 @@ class ReceiptImportSessionNotifier
    unawaited(_persist());
  }

+  void setSelectedForIndexes(Iterable<int> indexes, bool value) {
+    if (state == null) return;
+    final selected = Map<int, bool>.from(state!.selected);
+    for (final index in indexes) {
+      selected[index] = value;
+    }
+    state = state!.copyWith(selected: selected);
+    unawaited(_persist());
+  }
+
+  void setSelectedForAll(int count, bool value) {
+    if (state == null) return;
+    final selected = <int, bool>{
+      for (var i = 0; i < count; i++) i: value,
+    };
+    state = state!.copyWith(selected: selected);
+    unawaited(_persist());
+  }
+
  Future<void> restore() async {
    final prefs = await SharedPreferences.getInstance();
    final raw = prefs.getString(_storageKey);
@@ -292,12 +292,13 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
      );
      if (!mounted) return;
      final notifier = ref.read(receiptImportSessionProvider.notifier);
-      notifier.setItems(items);
+      final nextEdits = <int, _ItemEdit>{};
+      final nextSelected = <int, bool>{};
      // Förmarkera rader som har en träff
      for (var i = 0; i < items.length; i++) {
        final it = items[i];
        final pid = it.matchedProductId ?? it.suggestedProductId;
-        notifier.setSelected(i, pid != null);
+        nextSelected[i] = pid != null;
        if (pid != null) {
          final inferred = inferPackageFields(
            rawName: it.rawName,
@@ -308,7 +309,7 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
          final resolvedCategoryId = it.categorySuggestionId ?? _categoryIdForProduct(pid);
          final resolvedCategoryPath = it.categorySuggestionPath ??
              _lookup.pathFor(resolvedCategoryId);
-          notifier.setEdit(i, _ItemEdit(
+          nextEdits[i] = _ItemEdit(
            productId: pid,
            productName: name,
            categoryId: resolvedCategoryId,
@@ -321,9 +322,14 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
            packQuantity: inferred.packQuantity,
            packUnit: inferred.packUnit,
            packageCount: inferred.packageCount,
-          ));
+          );
        }
      }
+      notifier.setImportedResult(
+        items: items,
+        edits: nextEdits,
+        selected: nextSelected,
+      );
      // Ladda inventariet för att visa befintliga poster och möjliggöra sammanslagning
      await _loadInventory();
    } catch (e) {
@@ -573,7 +579,7 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
      );
      // Avmarkera sparade rader och uppdatera inventariet
      final notifier = ref.read(receiptImportSessionProvider.notifier);
-      for (final i in toAdd) notifier.setSelected(i, false);
+      notifier.setSelectedForIndexes(toAdd, false);
      setState(() {});
      await _loadInventory();
    } catch (e) {
@@ -678,6 +684,9 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
    final selectedFileName = _pickedFile?.name ?? session?.fileName;
    final selectedFileSizeBytes =
      _pickedFile?.size ?? session?.fileBytes?.length;
+    final resultListHeight = items == null
+      ? 0.0
+      : (items.length * 128.0).clamp(220.0, 620.0).toDouble();

    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
@@ -736,32 +745,108 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
                TextButton(
                  onPressed: () => setState(() {
                    final notifier = ref.read(receiptImportSessionProvider.notifier);
-                    for (var i = 0; i < items.length; i++) {
-                      notifier.setSelected(i, _selectedCount < items.length);
-                    }
+                    notifier.setSelectedForAll(items.length, _selectedCount < items.length);
                  }),
                  child: Text(_selectedCount < items.length ? 'Välj alla' : 'Avmarkera alla'),
                ),
              ],
            ),
            const SizedBox(height: 4),
-            ...List.generate(items.length, (i) {
-              final item = items[i];
-              final edit = _edits[i];
-              final isChecked = _selected[i] ?? false;
+            SizedBox(
+              height: resultListHeight,
+              child: ListView.builder(
+                key: const PageStorageKey<String>('receipt-import-result-list'),
+                itemCount: items.length,
+                itemBuilder: (context, i) {
+                  return _ReceiptImportResultRow(
+                    index: i,
+                    item: items[i],
+                    edit: _edits[i],
+                    existingInventoryByProduct: _inventoryByProduct,
+                    pantryProductIds: _pantryProductIds,
+                    onCheckedChanged: (v) {
+                      ref.read(receiptImportSessionProvider.notifier).setSelected(i, v);
+                    },
+                    onEditRequested: () => _openEditDialog(i),
+                    onSelectExistingRequested: () => _openEditDialog(
+                      i,
+                      initialEntryMode: ImportProductEntryMode.existing,
+                    ),
+                    onCreateRequested: () => _openEditDialog(
+                      i,
+                      initialEntryMode: ImportProductEntryMode.create,
+                    ),
+                    matchedViaBadgeBuilder: _buildMatchedViaBadge,
+                  );
+                },
+              ),
+            ),
+            const SizedBox(height: 16),
+            SizedBox(
+              width: double.infinity,
+              child: FilledButton.icon(
+                onPressed: (_selectedCount > 0 && !_isSaving) ? _addSelected : null,
+                icon: _isSaving
+                    ? const SizedBox(width: 18, height: 18, child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white))
+                    : const Icon(Icons.add_shopping_cart),
+                label: Text(_selectedCount > 0 ? 'Lägg till $_selectedCount markerade' : 'Markera rader att lägga till'),
+              ),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}
+
+class _ReceiptImportResultRow extends ConsumerWidget {
+  final int index;
+  final ParsedReceiptItem item;
+  final _ItemEdit? edit;
+  final Map<int, InventoryItem> existingInventoryByProduct;
+  final Set<int> pantryProductIds;
+  final ValueChanged<bool> onCheckedChanged;
+  final VoidCallback onEditRequested;
+  final VoidCallback onSelectExistingRequested;
+  final VoidCallback onCreateRequested;
+  final Widget Function(ParsedReceiptItem item, ThemeData theme)
+      matchedViaBadgeBuilder;
+
+  const _ReceiptImportResultRow({
+    required this.index,
+    required this.item,
+    required this.edit,
+    required this.existingInventoryByProduct,
+    required this.pantryProductIds,
+    required this.onCheckedChanged,
+    required this.onEditRequested,
+    required this.onSelectExistingRequested,
+    required this.onCreateRequested,
+    required this.matchedViaBadgeBuilder,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isChecked = ref.watch(
+      receiptImportSessionProvider.select((s) => s?.selected[index] ?? false),
+    );
+    final theme = Theme.of(context);
    final hasProduct = edit?.productId != null;
    final isMatched = item.matchedProductId != null;
-              final isSuggested = item.suggestedProductId != null && item.matchedProductId == null;
+    final isSuggested =
+        item.suggestedProductId != null && item.matchedProductId == null;
    final existingInv = edit?.productId != null && edit?.destination != _Destination.pantry
-                  ? _inventoryByProduct[edit!.productId]
+        ? existingInventoryByProduct[edit!.productId]
        : null;
    final inferredForPreview = inferPackageFields(
      rawName: item.rawName,
      quantity: edit?.quantity ?? item.quantity,
      unit: edit?.unit ?? item.unit,
    );
-                final previewPackageCount = edit?.packageCount ?? inferredForPreview.packageCount;
-                final previewPackQuantity = edit?.packQuantity ?? inferredForPreview.packQuantity;
+    final previewPackageCount =
+        edit?.packageCount ?? inferredForPreview.packageCount;
+    final previewPackQuantity =
+        edit?.packQuantity ?? inferredForPreview.packQuantity;
    final previewIncomingQty = previewPackQuantity != null
        ? (previewPackQuantity * previewPackageCount)
        : (edit?.quantity ?? inferredForPreview.totalQuantity ?? item.quantity ?? 0);
@@ -779,7 +864,7 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
          );
    final canMergePreview = existingInv != null && convertedPreviewQty != null;
    final alreadyInPantry = edit?.productId != null && edit?.destination == _Destination.pantry
-                  ? _pantryProductIds.contains(edit!.productId)
+        ? pantryProductIds.contains(edit!.productId)
        : false;

    return Card(
@@ -787,10 +872,7 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
      child: ListTile(
        leading: Checkbox(
          value: isChecked,
-                    onChanged: (v) {
-                      ref.read(receiptImportSessionProvider.notifier).setSelected(i, v ?? false);
-                      setState(() {});
-                    },
+          onChanged: (v) => onCheckedChanged(v ?? false),
        ),
        title: Text(
          normalizeProductName(item.rawName),
@@ -803,8 +885,7 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
              [
                if ((edit?.quantity ?? item.quantity) != null)
                  '${edit?.quantity ?? item.quantity}',
-                          if ((edit?.unit ?? item.unit) != null)
-                            edit?.unit ?? item.unit!,
+                if ((edit?.unit ?? item.unit) != null) edit?.unit ?? item.unit!,
                if (item.price != null) '· ${item.price} kr',
              ].join(' '),
              style: theme.textTheme.bodySmall,
@@ -819,29 +900,32 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
                  Text(
                    'Produktnamn: ${normalizeProductName(edit!.productName ?? '')}',
                    style: theme.textTheme.bodySmall?.copyWith(
-                                color: isMatched ? Colors.green.shade700 : theme.colorScheme.primary,
+                      color:
+                          isMatched ? Colors.green.shade700 : theme.colorScheme.primary,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
-                            _buildMatchedViaBadge(item, theme),
-                            if (edit.categorySource != null)
+                  matchedViaBadgeBuilder(item, theme),
+                  if (edit!.categorySource != null)
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                      decoration: BoxDecoration(
-                                  color: edit.categorySource == CategorySelectionSource.ai
+                        color: edit!.categorySource == CategorySelectionSource.ai
                            ? Colors.green.shade50
                            : theme.colorScheme.surfaceContainerHighest,
                        borderRadius: BorderRadius.circular(999),
                        border: Border.all(
-                                    color: edit.categorySource == CategorySelectionSource.ai
+                          color: edit!.categorySource == CategorySelectionSource.ai
                              ? Colors.green.shade300
                              : theme.colorScheme.outlineVariant,
                        ),
                      ),
                      child: Text(
-                                  edit.categorySource == CategorySelectionSource.ai ? 'AI' : 'Manuell',
+                        edit!.categorySource == CategorySelectionSource.ai
+                            ? 'AI'
+                            : 'Manuell',
                        style: theme.textTheme.labelSmall?.copyWith(
-                                    color: edit.categorySource == CategorySelectionSource.ai
+                          color: edit!.categorySource == CategorySelectionSource.ai
                              ? Colors.green.shade800
                              : theme.colorScheme.onSurfaceVariant,
                        ),
@@ -850,11 +934,17 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
                ],
              )
            else if (isSuggested)
-                        Text('Namnförslag: ${normalizeProductName(item.suggestedProductName ?? '')}',
-                            style: theme.textTheme.bodySmall?.copyWith(color: Colors.orange.shade700))
+              Text(
+                'Namnförslag: ${normalizeProductName(item.suggestedProductName ?? '')}',
+                style: theme.textTheme.bodySmall
+                    ?.copyWith(color: Colors.orange.shade700),
+              )
            else
-                        Text('Ingen matchning ännu — tryck för att välja eller skapa produkt',
-                            style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.tertiary)),
+              Text(
+                'Ingen matchning ännu — tryck för att välja eller skapa produkt',
+                style: theme.textTheme.bodySmall
+                    ?.copyWith(color: theme.colorScheme.tertiary),
+              ),
            if (hasProduct && edit?.categoryPath != null) ...[
              const SizedBox(height: 2),
              Text(
@@ -871,10 +961,7 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
                runSpacing: 8,
                children: [
                  OutlinedButton.icon(
-                              onPressed: () => _openEditDialog(
-                                i,
-                                initialEntryMode: ImportProductEntryMode.existing,
-                              ),
+                    onPressed: onSelectExistingRequested,
                    icon: const Icon(Icons.search, size: 16),
                    label: const Text('Välj befintlig'),
                    style: OutlinedButton.styleFrom(
@@ -883,10 +970,7 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
                    ),
                  ),
                  OutlinedButton.icon(
-                              onPressed: () => _openEditDialog(
-                                i,
-                                initialEntryMode: ImportProductEntryMode.create,
-                              ),
+                    onPressed: onCreateRequested,
                    icon: const Icon(Icons.add_box_outlined, size: 16),
                    label: const Text('Ny produkt'),
                    style: OutlinedButton.styleFrom(
@@ -924,36 +1008,24 @@ class _ReceiptImportTabState extends ConsumerState<ReceiptImportTab> {
              Row(children: [
                Icon(Icons.inventory_2_outlined, size: 12, color: Colors.orange.shade700),
                const SizedBox(width: 3),
-                          Text('Finns redan i baslager',
-                              style: theme.textTheme.bodySmall?.copyWith(color: Colors.orange.shade700)),
+                Text(
+                  'Finns redan i baslager',
+                  style: theme.textTheme.bodySmall?.copyWith(color: Colors.orange.shade700),
+                ),
              ]),
            ],
          ],
        ),
        trailing: Icon(
-                    hasProduct ? Icons.check_circle : (isSuggested ? Icons.help_outline : Icons.error_outline),
+          hasProduct
+              ? Icons.check_circle
+              : (isSuggested ? Icons.help_outline : Icons.error_outline),
          color: hasProduct
              ? Colors.green
              : (isSuggested ? Colors.orange : theme.colorScheme.tertiary),
          size: 20,
        ),
-                  onTap: () => _openEditDialog(i),
-                ),
-              );
-            }),
-            const SizedBox(height: 16),
-            SizedBox(
-              width: double.infinity,
-              child: FilledButton.icon(
-                onPressed: (_selectedCount > 0 && !_isSaving) ? _addSelected : null,
-                icon: _isSaving
-                    ? const SizedBox(width: 18, height: 18, child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white))
-                    : const Icon(Icons.add_shopping_cart),
-                label: Text(_selectedCount > 0 ? 'Lägg till $_selectedCount markerade' : 'Markera rader att lägga till'),
-              ),
-            ),
-          ],
-        ],
+        onTap: onEditRequested,
      ),
    );
  }
@@ -99,6 +99,7 @@ class InventoryScreen extends ConsumerWidget {
          return Stack(
            children: [
              ListView(
+                key: const PageStorageKey<String>('inventory-empty-list'),
                padding: const EdgeInsets.only(bottom: 88),
                children: [
                  filterSection,
@@ -109,6 +110,7 @@ class InventoryScreen extends ConsumerWidget {
                right: 16,
                bottom: 16,
                child: FloatingActionButton.extended(
+                  heroTag: 'inventory_add_empty',
                  onPressed: () => context.push('/inventory/create'),
                  icon: const Icon(Icons.add),
                  label: Text(context.l10n.addAction),
@@ -120,6 +122,7 @@ class InventoryScreen extends ConsumerWidget {
        return Stack(
          children: [
            ListView.separated(
+              key: const PageStorageKey<String>('inventory-main-list'),
              padding: const EdgeInsets.only(bottom: 88),
              itemCount: visibleItems.length + 1,
              separatorBuilder: (_, __) => const Divider(height: 1),
@@ -136,12 +139,14 @@ class InventoryScreen extends ConsumerWidget {
                mainAxisSize: MainAxisSize.min,
                children: [
                  FloatingActionButton.extended(
+                    heroTag: 'inventory_add',
                    onPressed: () => context.push('/inventory/create'),
                    icon: const Icon(Icons.add),
                    label: Text(context.l10n.addAction),
                  ),
                  const SizedBox(height: 8),
                  FloatingActionButton.extended(
+                    heroTag: 'inventory_go_recipes',
                    onPressed: () => context.go('/recipes'),
                    icon: const Icon(Icons.restaurant_menu),
                    label: Text(context.l10n.inventoryRecipesAction),
@@ -325,6 +325,7 @@ class _PantryScreenState extends ConsumerState<PantryScreen> {

    final content = filteredItems.isEmpty
        ? ListView(
+            key: const PageStorageKey<String>('pantry-empty-list'),
            padding: const EdgeInsets.fromLTRB(12, 0, 12, 96),
            children: [
              filterSection,
@@ -335,6 +336,7 @@ class _PantryScreenState extends ConsumerState<PantryScreen> {
            ],
          )
        : ListView.separated(
+          key: const PageStorageKey<String>('pantry-main-list'),
            padding: const EdgeInsets.fromLTRB(12, 0, 12, 96),
            itemCount: filteredItems.length + 1,
            separatorBuilder: (_, __) => const Divider(height: 1),
@@ -384,12 +386,14 @@ class _PantryScreenState extends ConsumerState<PantryScreen> {
            mainAxisSize: MainAxisSize.min,
            children: [
              FloatingActionButton.extended(
+                heroTag: 'pantry_add',
                onPressed: () => context.push('/inventory/create?destination=pantry'),
                icon: const Icon(Icons.add),
                label: Text(context.l10n.addAction),
              ),
              const SizedBox(height: 8),
              FloatingActionButton.extended(
+                heroTag: 'pantry_go_recipes',
                onPressed: () => context.go('/recipes'),
                icon: const Icon(Icons.restaurant_menu),
                label: Text(context.l10n.inventoryRecipesAction),
@@ -38,6 +38,7 @@ class RecipesScreen extends ConsumerWidget {

            if (view.mode == RecipesViewMode.grid) {
              return GridView.builder(
+                key: PageStorageKey<String>('recipes-grid-${view.columns}'),
                padding: const EdgeInsets.only(bottom: 88),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: view.columns,
@@ -55,6 +56,7 @@ class RecipesScreen extends ConsumerWidget {
              );
            } else {
              return ListView.builder(
+                key: const PageStorageKey<String>('recipes-list'),
                padding: const EdgeInsets.only(bottom: 88),
                itemCount: recipes.length,
                itemBuilder: (context, index) {