From e677e7897ec15e6633e42da3b9255e84b7c53c1e Mon Sep 17 00:00:00 2001
From: alexis <alexis@ynab-lite.dev>
Date: Sat, 11 Jul 2026 22:34:07 +0200
Subject: [PATCH] budget tab: use M3 ListTile for group headers and category
 rows

---
 lib/screens/budget_screen.dart | 71 +++++++++++++++-------------------
 1 file changed, 31 insertions(+), 40 deletions(-)

diff --git a/lib/screens/budget_screen.dart b/lib/screens/budget_screen.dart
index c69e770..daa7fcf 100644
--- a/lib/screens/budget_screen.dart
+++ b/lib/screens/budget_screen.dart
@@ -57,34 +57,26 @@ class _CategoryGroupTile extends ConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        InkWell(
-          onTap: () => ref.read(_expandedGroupProvider(group.id).notifier).toggle(),
-          borderRadius: BorderRadius.circular(8),
-          child: Padding(
-            padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 4),
-            child: Row(
-              children: [
-                Icon(
-                  expanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
-                  size: 18,
-                  color: Theme.of(context).colorScheme.onSurfaceVariant,
-                ),
-                const SizedBox(width: 8),
-                Text(group.name,
-                    style: Theme.of(context)
-                        .textTheme
-                        .titleSmall
-                        ?.copyWith(fontWeight: FontWeight.w600)),
-                const Spacer(),
-                Text(
-                  formatCurrency(
-                    cats.fold(0.0, (s, c) => s + ref.watch(categoryRemainingProvider(c.id))),
-                  ),
-                  style: Theme.of(context).textTheme.bodySmall,
-                ),
-              ],
-            ),
+        ListTile(
+          dense: true,
+          contentPadding: EdgeInsets.zero,
+          leading: Icon(
+            expanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
+            size: 18,
+            color: Theme.of(context).colorScheme.onSurfaceVariant,
           ),
+          title: Text(group.name,
+              style: Theme.of(context)
+                  .textTheme
+                  .titleSmall
+                  ?.copyWith(fontWeight: FontWeight.w600)),
+          trailing: Text(
+            formatCurrency(
+              cats.fold(0.0, (s, c) => s + ref.watch(categoryRemainingProvider(c.id))),
+            ),
+            style: Theme.of(context).textTheme.bodySmall,
+          ),
+          onTap: () => ref.read(_expandedGroupProvider(group.id).notifier).toggle(),
         ),
         if (expanded)
           ...cats.map((c) => _CategoryRow(categoryId: c.id)),
@@ -165,20 +157,19 @@ class _CategoryRow extends ConsumerWidget {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              Row(
-                children: [
-                  Expanded(
-                    child: Text(category.name, style: Theme.of(context).textTheme.bodyMedium),
-                  ),
-                  Text(
-                    formatCurrency(remaining),
-                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                          fontWeight: FontWeight.w600,
-                          color: remaining >= 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error,
-                        ),
-                  ),
-                ],
+            ListTile(
+              dense: true,
+              contentPadding: EdgeInsets.zero,
+              visualDensity: VisualDensity.compact,
+              title: Text(category.name, style: Theme.of(context).textTheme.bodyMedium),
+              trailing: Text(
+                formatCurrency(remaining),
+                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                      fontWeight: FontWeight.w600,
+                      color: remaining >= 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error,
+                    ),
               ),
+            ),
               const SizedBox(height: 4),
               ClipRRect(
                 borderRadius: BorderRadius.circular(4),