Improved json auto save & budget mobile UI

lib/pages/budgets/widgets/budget_maker.dart

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:intl/intl.dart';
 import 'package:tunas/domains/budget/budget_bloc.dart';
 import 'package:tunas/domains/category/category_bloc.dart';
+import 'package:tunas/pages/budgets/widgets/budget_line.dart';
 import 'package:tunas/pages/common/titled_container.dart';
 import 'package:tunas/repositories/metadata/models/budget.dart';
 
@@ -10,7 +11,6 @@ class BudgetMaker extends StatelessWidget {
   const BudgetMaker({super.key});
 
   List<Widget> _computeBudgetLines(BuildContext context, List<Budget> budgets, double initialBudget, double remainingBudget) {
-    final categoryState = context.watch<CategoryBloc>().state;
     List<Widget> list = [];
 
     list.add(
@@ -38,50 +38,7 @@ class BudgetMaker extends StatelessWidget {
       ))
     );
 
-    list.addAll(budgets.map((budget) => Row(
-        children: [
-          Expanded(
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                Expanded(
-                  child: DropdownButtonFormField<String>(
-                    value: budget.label,
-                    onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetLabel(budget, value!)),
-                    items: categoryState.categories.map((e) => DropdownMenuItem(value: e.label, child: Text(e.label))).toList(),
-                  ),
-                ),
-                const SizedBox(width: 20),
-                Text(
-                  NumberFormat('####000 €', 'fr_FR').format(budget.value),
-                  style: const TextStyle(
-                    fontFamily: 'NovaMono',
-                    fontWeight: FontWeight.bold,
-                    fontSize: 15,
-                  )
-                ),
-              ],
-            )
-          ),
-          Expanded(
-            child: SliderTheme(
-              data: const SliderThemeData(),
-              child: Slider(
-                min: 0,
-                max: initialBudget,
-                label: budget.value.round().toString(),
-                value: budget.value,
-                secondaryTrackValue: remainingBudget + budget.value,
-                onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetValue(budget, value.round().toDouble())),
-              ),
-            )
-          ),
-          IconButton(
-            onPressed: () => context.read<BudgetBloc>().add(BudgetRemove(budget)),
-            icon: const Icon(Icons.delete),
-          ),
-        ],
-    )).toList());
+    list.addAll(budgets.map((budget) => BudgetLine(budget: budget)).toList());
 
     list.add(
       Container(
@@ -99,9 +56,10 @@ class BudgetMaker extends StatelessWidget {
 
     list.add(
       Row(
+        mainAxisAlignment: MainAxisAlignment.end,
         children: [
           Text(
-            '   Remaining ${NumberFormat('#####00 €', 'fr_FR').format(remainingBudget)} out of ${NumberFormat('#####00 €', 'fr_FR').format(initialBudget)}',
+            '${NumberFormat('#####00 €', 'fr_FR').format(remainingBudget)} remaining  ',
             style: const TextStyle(
               fontFamily: 'NovaMono',
               fontWeight: FontWeight.bold,