From 0e13422cd1071595c87898f464e4e0ee75557ee8 Mon Sep 17 00:00:00 2001
From: bponders12-cell <bponders12@gmail.com>
Date: Tue, 1 Sep 2026 12:10:57 -0400
Subject: [PATCH] feat(garage): show selected motorcycle photo during
 confirmation

---
 .../garage/add_motorcycle_screen.dart         | 76 ++++++++-----------
 1 file changed, 33 insertions(+), 43 deletions(-)

diff --git a/lib/features/garage/add_motorcycle_screen.dart b/lib/features/garage/add_motorcycle_screen.dart
index 66a4e74..cc4efd6 100644
--- a/lib/features/garage/add_motorcycle_screen.dart
+++ b/lib/features/garage/add_motorcycle_screen.dart
@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import '../../models/motorcycle_models.dart';
 import 'garage_providers.dart';
+import 'widgets/motorcycle_photo.dart';
 
 class AddMotorcycleScreen extends ConsumerStatefulWidget {
   const AddMotorcycleScreen({super.key});
@@ -19,10 +20,10 @@ class _AddMotorcycleScreenState extends ConsumerState<AddMotorcycleScreen> {
   MotorcycleModel? _selectedModel;
   MotorcycleVariant? _selectedVariant;
   MotorcycleSpecification? _previewSpec;
-  
+
   final TextEditingController _nicknameController = TextEditingController();
   final TextEditingController _searchController = TextEditingController();
-  
+
   bool _isLoading = false;
   List<MotorcycleYear> _years = [];
   List<MotorcycleMake> _makes = [];
@@ -89,7 +90,7 @@ class _AddMotorcycleScreenState extends ConsumerState<AddMotorcycleScreen> {
     });
     final repo = ref.read(motorcycleRepositoryProvider);
     final variants = await repo.getVariants(_selectedYear!, _selectedMake!.id, model.id);
-    
+
     if (variants.length <= 1) {
       _selectedVariant = variants.isNotEmpty ? variants.first : null;
       await _loadSpecSummary();
@@ -103,9 +104,7 @@ class _AddMotorcycleScreenState extends ConsumerState<AddMotorcycleScreen> {
   }
 
   Future<void> _selectVariant(MotorcycleVariant variant) async {
-    setState(() {
-      _selectedVariant = variant;
-    });
+    setState(() => _selectedVariant = variant);
     await _loadSpecSummary();
   }
 
@@ -171,23 +170,22 @@ class _AddMotorcycleScreenState extends ConsumerState<AddMotorcycleScreen> {
     return PopScope(
       canPop: _step == 1,
       onPopInvokedWithResult: (didPop, result) {
-        if (!didPop && _step > 1) {
-          _goBack();
-        }
+        if (!didPop && _step > 1) _goBack();
       },
       child: Scaffold(
         appBar: AppBar(
           title: Text(_getStepTitle()),
-          leading: IconButton(
-            icon: const Icon(Icons.arrow_back),
-            onPressed: _goBack,
-          ),
+          leading: IconButton(icon: const Icon(Icons.arrow_back), onPressed: _goBack),
         ),
         body: _isLoading
             ? const Center(child: CircularProgressIndicator())
             : Column(
                 children: [
-                  LinearProgressIndicator(value: _step / 5.0, backgroundColor: Colors.white10, valueColor: const AlwaysStoppedAnimation(Colors.cyanAccent)),
+                  LinearProgressIndicator(
+                    value: _step / 5.0,
+                    backgroundColor: Colors.white10,
+                    valueColor: const AlwaysStoppedAnimation(Colors.cyanAccent),
+                  ),
                   Expanded(child: _buildStepContent()),
                 ],
               ),
@@ -197,35 +195,23 @@ class _AddMotorcycleScreenState extends ConsumerState<AddMotorcycleScreen> {
 
   String _getStepTitle() {
     switch (_step) {
-      case 1:
-        return 'Select Year';
-      case 2:
-        return 'Select Manufacturer';
-      case 3:
-        return 'Select Model (${_selectedMake?.name ?? ""})';
-      case 4:
-        return 'Select Variant';
-      case 5:
-        return 'Confirm Motorcycle';
-      default:
-        return 'Add Motorcycle';
+      case 1: return 'Select Year';
+      case 2: return 'Select Manufacturer';
+      case 3: return 'Select Model (${_selectedMake?.name ?? ""})';
+      case 4: return 'Select Variant';
+      case 5: return 'Confirm Motorcycle';
+      default: return 'Add Motorcycle';
     }
   }
 
   Widget _buildStepContent() {
     switch (_step) {
-      case 1:
-        return _buildYearStep();
-      case 2:
-        return _buildMakeStep();
-      case 3:
-        return _buildModelStep();
-      case 4:
-        return _buildVariantStep();
-      case 5:
-        return _buildConfirmStep();
-      default:
-        return const SizedBox();
+      case 1: return _buildYearStep();
+      case 2: return _buildMakeStep();
+      case 3: return _buildModelStep();
+      case 4: return _buildVariantStep();
+      case 5: return _buildConfirmStep();
+      default: return const SizedBox();
     }
   }
 
@@ -256,7 +242,6 @@ class _AddMotorcycleScreenState extends ConsumerState<AddMotorcycleScreen> {
   Widget _buildMakeStep() {
     final query = _searchController.text.toLowerCase();
     final filtered = _makes.where((m) => m.name.toLowerCase().contains(query)).toList();
-
     return Column(
       children: [
         Padding(
@@ -295,7 +280,6 @@ class _AddMotorcycleScreenState extends ConsumerState<AddMotorcycleScreen> {
   Widget _buildModelStep() {
     final query = _searchController.text.toLowerCase();
     final filtered = _models.where((m) => m.name.toLowerCase().contains(query)).toList();
-
     return Column(
       children: [
         Padding(
@@ -358,7 +342,7 @@ class _AddMotorcycleScreenState extends ConsumerState<AddMotorcycleScreen> {
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
           Container(
-            padding: const EdgeInsets.all(20),
+            padding: const EdgeInsets.all(12),
             decoration: BoxDecoration(
               color: Colors.white10,
               borderRadius: BorderRadius.circular(16),
@@ -366,8 +350,14 @@ class _AddMotorcycleScreenState extends ConsumerState<AddMotorcycleScreen> {
             ),
             child: Column(
               children: [
-                const Icon(Icons.two_wheeler, size: 64, color: Colors.cyanAccent),
-                const SizedBox(height: 12),
+                MotorcyclePhoto(
+                  year: _selectedYear!,
+                  make: _selectedMake!.name,
+                  model: _selectedModel!.name,
+                  height: 220,
+                  borderRadius: BorderRadius.circular(10),
+                ),
+                const SizedBox(height: 14),
                 Text(
                   '$_selectedYear ${_selectedMake?.name} ${_selectedModel?.name}',
                   textAlign: TextAlign.center,