improvements in ui

lib/data/nostr/models/nostr_relay.dart

@@ -9,11 +9,18 @@ class NostrRelay {
   /// Whether the relay is enabled (should be used).
   bool isEnabled;
 
+  /// Number of consecutive connection failures.
+  int retryCount;
+
+  /// Maximum number of retry attempts before disabling.
+  static const int maxRetryAttempts = 3;
+
   /// Creates a [NostrRelay] instance.
   NostrRelay({
     required this.url,
     this.isConnected = false,
     this.isEnabled = true,
+    this.retryCount = 0,
   });
 
   /// Creates a [NostrRelay] from a URL string.
@@ -23,7 +30,7 @@ class NostrRelay {
 
   @override
   String toString() {
-    return 'NostrRelay(url: $url, connected: $isConnected, enabled: $isEnabled)';
+    return 'NostrRelay(url: $url, connected: $isConnected, enabled: $isEnabled, retryCount: $retryCount)';
   }
 
   @override

lib/data/nostr/nostr_service.dart

@@ -29,6 +29,9 @@ class NostrService {
   final Map<String, StreamController<Map<String, dynamic>>>
       _messageControllers = {};
 
+  /// Retry timers for relays that are attempting to reconnect.
+  final Map<String, Timer> _retryTimers = {};
+
   /// Creates a [NostrService] instance.
   NostrService();
 
@@ -67,6 +70,9 @@ class NostrService {
       orElse: () => throw NostrException('Relay not found: $relayUrl'),
     );
     relay.isEnabled = enabled;
+    if (enabled) {
+      relay.retryCount = 0; // Reset retry count when enabling
+    }
 
     // If disabling, also disconnect
     if (!enabled && relay.isConnected) {
@@ -156,6 +162,7 @@ class NostrService {
           // No errors occurred, connection is established
           connectionConfirmed = true;
           relay.isConnected = true;
+          relay.retryCount = 0; // Reset retry count on successful connection
           Logger.info('Connection confirmed for relay: $relayUrl (no errors after 500ms)');
         }
       });
@@ -167,6 +174,7 @@ class NostrService {
           if (!connectionConfirmed) {
             connectionConfirmed = true;
             relay.isConnected = true;
+            relay.retryCount = 0; // Reset retry count on successful connection
             Logger.info('Connection confirmed for relay: $relayUrl (first message received)');
             connectionTimer?.cancel();
           }
@@ -207,9 +215,7 @@ class NostrService {
           connectionTimer?.cancel();
           Logger.error('WebSocket error for relay: $relayUrl', error);
           relay.isConnected = false;
-          // Automatically disable relay when connection error occurs
+          _handleConnectionFailure(relayUrl, relay, controller, 'connection error');
-          relay.isEnabled = false;
-          Logger.warning('Relay $relayUrl disabled due to connection error');
           controller.addError(NostrException('Relay error: $error'));
         },
         onDone: () {
@@ -217,9 +223,7 @@ class NostrService {
           connectionTimer?.cancel();
           Logger.warning('WebSocket stream closed for relay: $relayUrl');
           relay.isConnected = false;
-          // Automatically disable relay when connection closes
+          _handleConnectionFailure(relayUrl, relay, controller, 'stream closure');
-          relay.isEnabled = false;
-          Logger.warning('Relay $relayUrl disabled due to stream closure');
           controller.close();
         },
       );
@@ -230,6 +234,101 @@ class NostrService {
     }
   }
 
+  /// Handles connection failure with retry logic.
+  /// 
+  /// [relayUrl] - The URL of the relay that failed.
+  /// [relay] - The relay object.
+  /// [controller] - The stream controller for this relay.
+  /// [reason] - Reason for the failure (for logging).
+  void _handleConnectionFailure(
+    String relayUrl,
+    NostrRelay relay,
+    StreamController<Map<String, dynamic>> controller,
+    String reason,
+  ) {
+    // Cancel any existing retry timer
+    _retryTimers[relayUrl]?.cancel();
+    _retryTimers.remove(relayUrl);
+
+    // Only retry if relay is enabled
+    if (!relay.isEnabled) {
+      Logger.info('Relay $relayUrl is disabled, skipping retry');
+      return;
+    }
+
+    relay.retryCount++;
+    Logger.warning('Relay $relayUrl failed ($reason), retry attempt ${relay.retryCount}/${NostrRelay.maxRetryAttempts}');
+
+    if (relay.retryCount >= NostrRelay.maxRetryAttempts) {
+      // Max retries reached - disable the relay
+      relay.isEnabled = false;
+      relay.retryCount = 0; // Reset for future attempts
+      Logger.warning('Relay $relayUrl disabled after ${NostrRelay.maxRetryAttempts} failed attempts');
+    } else {
+      // Schedule retry after delay (5 seconds)
+      _scheduleRetry(relayUrl, relay, controller, reason);
+    }
+  }
+
+  /// Schedules a retry attempt for a failed relay connection.
+  /// 
+  /// [relayUrl] - The URL of the relay to retry.
+  /// [relay] - The relay object.
+  /// [controller] - The stream controller for this relay.
+  /// [reason] - Reason for the retry (for logging).
+  void _scheduleRetry(
+    String relayUrl,
+    NostrRelay relay,
+    StreamController<Map<String, dynamic>> controller,
+    String reason,
+  ) {
+    Logger.info('Scheduling retry for relay $relayUrl in 5 seconds (attempt ${relay.retryCount}/${NostrRelay.maxRetryAttempts})');
+    _retryTimers[relayUrl] = Timer(const Duration(seconds: 5), () {
+        _retryTimers.remove(relayUrl);
+        if (relay.isEnabled && !relay.isConnected) {
+          Logger.info('Retrying connection to relay: $relayUrl');
+          try {
+            // Clean up old connection
+            disconnectRelay(relayUrl);
+            // Attempt to reconnect
+            connectRelay(relayUrl).then((stream) {
+              // Reset retry count on successful connection
+              relay.retryCount = 0;
+              Logger.info('Relay $relayUrl reconnected successfully');
+              // Cancel the stream subscription as we're just testing the connection
+              stream.listen(null).cancel();
+            }).catchError((e) {
+              Logger.warning('Retry failed for relay $relayUrl: $e');
+              // Handle retry failure - check if we should retry again or disable
+              if (relay.isEnabled) {
+                if (relay.retryCount >= NostrRelay.maxRetryAttempts) {
+                  relay.isEnabled = false;
+                  relay.retryCount = 0;
+                  Logger.warning('Relay $relayUrl disabled after ${NostrRelay.maxRetryAttempts} failed attempts');
+                } else {
+                  // Schedule another retry (retryCount already incremented in _handleConnectionFailure)
+                  _scheduleRetry(relayUrl, relay, controller, 'retry failure');
+                }
+              }
+            });
+          } catch (e) {
+            Logger.error('Error during retry for relay $relayUrl', e);
+            // Handle synchronous exception
+            if (relay.isEnabled) {
+              if (relay.retryCount >= NostrRelay.maxRetryAttempts) {
+                relay.isEnabled = false;
+                relay.retryCount = 0;
+                Logger.warning('Relay $relayUrl disabled after ${NostrRelay.maxRetryAttempts} failed attempts');
+              } else {
+                // Schedule another retry (retryCount already incremented in _handleConnectionFailure)
+                _scheduleRetry(relayUrl, relay, controller, 'synchronous retry failure');
+              }
+            }
+          }
+        }
+      });
+  }
+
   /// Disconnects from a relay.
   ///
   /// [relayUrl] - The URL of the relay to disconnect from.

lib/ui/add_recipe/add_recipe_screen.dart

@@ -553,9 +553,12 @@ class _AddRecipeScreenState extends State<AddRecipeScreen> {
   Future<void> _removeTag(String tag) async {
     if (_recipeService == null || _recipe == null) return;
     
+    final currentRecipe = _currentRecipe ?? widget.recipe;
+    if (currentRecipe == null) return;
+    
     try {
-      final updatedTags = List<String>.from(_recipe!.tags)..remove(tag);
+      final updatedTags = List<String>.from(currentRecipe.tags)..remove(tag);
-      final updatedRecipe = _recipe!.copyWith(tags: updatedTags);
+      final updatedRecipe = currentRecipe.copyWith(tags: updatedTags);
       await _recipeService!.updateRecipe(updatedRecipe);
       
       if (mounted) {
@@ -591,7 +594,7 @@ class _AddRecipeScreenState extends State<AddRecipeScreen> {
       }
       final existingTags = allTags.toList()..sort();
       
-      final result = await showDialog<String>(
+      final result = await showDialog<List<String>>(
         context: context,
         builder: (context) => _AddTagDialog(
           tagController: tagController,
@@ -604,8 +607,8 @@ class _AddRecipeScreenState extends State<AddRecipeScreen> {
         tagController.dispose();
       });
 
-      if (mounted && result != null && result.trim().isNotEmpty) {
+      if (mounted && result != null && result.isNotEmpty) {
-        await _addTag(result.trim());
+        await _addTags(result);
       }
     } catch (e) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
@@ -614,17 +617,22 @@ class _AddRecipeScreenState extends State<AddRecipeScreen> {
     }
   }
 
-  Future<void> _addTag(String tag) async {
+  Future<void> _addTags(List<String> tags) async {
     if (_recipeService == null || _recipe == null) return;
     
-    final trimmedTag = tag.trim();
+    final currentRecipe = _currentRecipe ?? widget.recipe;
-    if (trimmedTag.isEmpty) return;
+    if (currentRecipe == null) return;
+    
+    final trimmedTags = tags.map((tag) => tag.trim()).where((tag) => tag.isNotEmpty).toList();
+    if (trimmedTags.isEmpty) return;
     
-    if (_recipe!.tags.contains(trimmedTag)) {
+    // Filter out tags that already exist
+    final newTags = trimmedTags.where((tag) => !currentRecipe.tags.contains(tag)).toList();
+    if (newTags.isEmpty) {
       if (mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
           const SnackBar(
-            content: Text('Tag already exists'),
+            content: Text('All tags already exist'),
             duration: Duration(seconds: 1),
           ),
         );
@@ -633,8 +641,8 @@ class _AddRecipeScreenState extends State<AddRecipeScreen> {
     }
 
     try {
-      final updatedTags = List<String>.from(_recipe!.tags)..add(trimmedTag);
+      final updatedTags = List<String>.from(currentRecipe.tags)..addAll(newTags);
-      final updatedRecipe = _recipe!.copyWith(tags: updatedTags);
+      final updatedRecipe = currentRecipe.copyWith(tags: updatedTags);
       await _recipeService!.updateRecipe(updatedRecipe);
       
       if (mounted) {
@@ -643,16 +651,16 @@ class _AddRecipeScreenState extends State<AddRecipeScreen> {
           _tagsController.text = updatedTags.join(', ');
         });
         ScaffoldMessenger.of(context).showSnackBar(
-          const SnackBar(
+          SnackBar(
-            content: Text('Tag added'),
+            content: Text('${newTags.length} tag${newTags.length > 1 ? 's' : ''} added'),
-            duration: Duration(seconds: 1),
+            duration: const Duration(seconds: 1),
           ),
         );
       }
     } catch (e) {
       if (mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text('Error adding tag: $e')),
+          SnackBar(content: Text('Error adding tags: $e')),
         );
       }
     }
@@ -1781,7 +1789,7 @@ class _AddTagDialogState extends State<_AddTagDialog> with SingleTickerProviderS
   late AnimationController _animationController;
   late Animation<double> _animation;
   bool _isUserScrolling = false;
-  DateTime? _lastUserScrollTime;
+  final Set<String> _selectedTags = {};
 
   @override
   void initState() {
@@ -1846,16 +1854,47 @@ class _AddTagDialogState extends State<_AddTagDialog> with SingleTickerProviderS
       WidgetsBinding.instance.addPostFrameCallback((_) {
         if (_scrollController.hasClients) {
           _scrollController.jumpTo(0);
-          _isUserScrolling = false;
+          // Don't restart auto-scroll if user has interacted
-          _lastUserScrollTime = null;
+          if (!_isUserScrolling) {
-          _startAutoScroll();
+            _startAutoScroll();
+          }
         }
       });
     });
   }
 
   void _selectTag(String tag) {
-    Navigator.pop(context, tag);
+    // Stop auto-scroll permanently when user selects a tag
+    _isUserScrolling = true;
+    _animationController.stop();
+    
+    setState(() {
+      if (_selectedTags.contains(tag)) {
+        _selectedTags.remove(tag);
+      } else {
+        _selectedTags.add(tag);
+      }
+    });
+  }
+
+  List<String> _getTagsToAdd() {
+    final tags = <String>[];
+    
+    // Add selected tags from the list
+    tags.addAll(_selectedTags);
+    
+    // Parse comma-separated tags from text field
+    final textTags = widget.tagController.text
+        .split(',')
+        .map((tag) => tag.trim())
+        .where((tag) => tag.isNotEmpty)
+        .toList();
+    tags.addAll(textTags);
+    
+    // Remove duplicates and tags that already exist in the recipe
+    final uniqueTags = tags.toSet().where((tag) => !widget.currentTags.contains(tag)).toList();
+    
+    return uniqueTags;
   }
 
   @override
@@ -1877,16 +1916,11 @@ class _AddTagDialogState extends State<_AddTagDialog> with SingleTickerProviderS
               controller: widget.tagController,
               autofocus: true,
               decoration: InputDecoration(
-                hintText: 'Enter tag name or select from existing',
+                hintText: 'Enter tags (comma-separated) or select from existing',
                 border: const OutlineInputBorder(),
                 prefixIcon: const Icon(Icons.search),
               ),
               textCapitalization: TextCapitalization.none,
-              onSubmitted: (value) {
-                if (value.trim().isNotEmpty) {
-                  Navigator.pop(context, value.trim());
-                }
-              },
             ),
             const SizedBox(height: 16),
             // Existing tags scrollable list with fade hint
@@ -1902,26 +1936,11 @@ class _AddTagDialogState extends State<_AddTagDialog> with SingleTickerProviderS
                 height: 50,
                 child: NotificationListener<ScrollNotification>(
                   onNotification: (notification) {
-                    // Detect when user manually scrolls
+                  // Detect when user manually scrolls - stop auto-scroll permanently
-                    if (notification is ScrollStartNotification && notification.dragDetails != null) {
+                  if (notification is ScrollStartNotification && notification.dragDetails != null) {
-                      _isUserScrolling = true;
+                    _isUserScrolling = true;
-                      _lastUserScrollTime = DateTime.now();
+                    _animationController.stop();
-                      _animationController.stop();
+                  }
-                    } else if (notification is ScrollEndNotification) {
-                      // Resume auto-scroll after user stops scrolling for 3 seconds
-                      _lastUserScrollTime = DateTime.now();
-                      Future.delayed(const Duration(seconds: 3), () {
-                        if (mounted && _lastUserScrollTime != null) {
-                          final timeSinceLastScroll = DateTime.now().difference(_lastUserScrollTime!);
-                          if (timeSinceLastScroll.inSeconds >= 3) {
-                            setState(() {
-                              _isUserScrolling = false;
-                            });
-                            _startAutoScroll();
-                          }
-                        }
-                      });
-                    }
                     return false;
                   },
                   child: ListView.builder(
@@ -1931,11 +1950,34 @@ class _AddTagDialogState extends State<_AddTagDialog> with SingleTickerProviderS
                     itemBuilder: (context, index) {
                       final tag = _filteredTags[index];
                       final isAlreadyAdded = widget.currentTags.contains(tag);
+                      final isSelected = _selectedTags.contains(tag);
                       return Padding(
                         padding: const EdgeInsets.only(right: 8),
                         child: FilterChip(
-                          label: Text(tag),
+                          label: Text(
-                          selected: isAlreadyAdded,
+                            tag,
+                            style: TextStyle(
+                              color: isSelected
+                                  ? Colors.white
+                                  : (isAlreadyAdded
+                                      ? (isDark ? Colors.white : Colors.black87)
+                                      : (isDark ? Colors.white : Colors.black87)),
+                              fontWeight: isSelected 
+                                  ? FontWeight.w700 
+                                  : (isAlreadyAdded ? FontWeight.w500 : FontWeight.normal),
+                              fontSize: isSelected ? 14 : null,
+                              shadows: isSelected
+                                  ? [
+                                      Shadow(
+                                        color: Colors.black.withValues(alpha: 0.5),
+                                        offset: const Offset(0, 1),
+                                        blurRadius: 2,
+                                      ),
+                                    ]
+                                  : null,
+                            ),
+                          ),
+                          selected: isSelected,
                           onSelected: isAlreadyAdded
                               ? null
                               : (selected) {
@@ -1946,12 +1988,24 @@ class _AddTagDialogState extends State<_AddTagDialog> with SingleTickerProviderS
                           backgroundColor: isDark 
                               ? Colors.grey[800] 
                               : Colors.grey[200],
-                          disabledColor: Colors.grey[400],
+                          disabledColor: isDark 
-                          labelStyle: TextStyle(
+                              ? Colors.grey[600] 
-                            color: isAlreadyAdded
+                              : Colors.grey[100],
-                                ? Colors.white
+                          side: isSelected
-                                : (isDark ? Colors.white : Colors.black87),
+                              ? BorderSide(
-                          ),
+                                  color: Colors.white.withValues(alpha: 0.5),
+                                  width: 2.5,
+                                )
+                              : (isAlreadyAdded
+                                  ? BorderSide(
+                                      color: (isDark ? Colors.grey[500]! : Colors.grey[400]!),
+                                      width: 1,
+                                    )
+                                  : null),
+                          elevation: isSelected ? 3 : 0,
+                          padding: isSelected
+                              ? const EdgeInsets.symmetric(horizontal: 12, vertical: 8)
+                              : null,
                         ),
                       );
                     },
@@ -1975,12 +2029,16 @@ class _AddTagDialogState extends State<_AddTagDialog> with SingleTickerProviderS
         ),
         FilledButton(
           onPressed: () {
-            final text = widget.tagController.text.trim();
+            final tagsToAdd = _getTagsToAdd();
-            if (text.isNotEmpty) {
+            if (tagsToAdd.isNotEmpty) {
-              Navigator.pop(context, text);
+              Navigator.pop(context, tagsToAdd);
+            } else {
+              Navigator.pop(context);
             }
           },
-          child: const Text('Add'),
+          child: Text(_selectedTags.isEmpty && widget.tagController.text.trim().isEmpty
+              ? 'Add'
+              : 'Add (${_getTagsToAdd().length})'),
         ),
       ],
     );

lib/ui/bookmarks/bookmarks_screen.dart

@@ -23,12 +23,25 @@ class _BookmarksScreenState extends State<BookmarksScreen> {
   String? _errorMessage;
   RecipeService? _recipeService;
   bool _wasLoggedIn = false;
+  String _searchQuery = '';
+  final TextEditingController _searchController = TextEditingController();
 
   @override
   void initState() {
     super.initState();
     _checkLoginState();
     _initializeService();
+    _searchController.addListener(() {
+      setState(() {
+        _searchQuery = _searchController.text.toLowerCase();
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    super.dispose();
   }
 
   @override
@@ -123,6 +136,29 @@ class _BookmarksScreenState extends State<BookmarksScreen> {
     }
   }
 
+  List<BookmarkCategory> _getFilteredCategories() {
+    if (_searchQuery.isEmpty) {
+      return _categories;
+    }
+    return _categories.where((category) {
+      final recipes = _recipesByCategory[category.id] ?? [];
+      return category.name.toLowerCase().contains(_searchQuery) ||
+          recipes.any((recipe) =>
+              recipe.title.toLowerCase().contains(_searchQuery) ||
+              (recipe.description?.toLowerCase().contains(_searchQuery) ?? false));
+    }).toList();
+  }
+
+  List<RecipeModel> _getFilteredRecipes(String categoryId) {
+    final recipes = _recipesByCategory[categoryId] ?? [];
+    if (_searchQuery.isEmpty) {
+      return recipes;
+    }
+    return recipes.where((recipe) =>
+        recipe.title.toLowerCase().contains(_searchQuery) ||
+        (recipe.description?.toLowerCase().contains(_searchQuery) ?? false)).toList();
+  }
+
   void _viewRecipe(RecipeModel recipe) {
     Navigator.push(
       context,
@@ -158,8 +194,36 @@ class _BookmarksScreenState extends State<BookmarksScreen> {
     if (!isLoggedIn) {
       return Scaffold(
         appBar: AppBar(title: const Text('Bookmarks')),
-        body: const Center(
+        body: Center(
-          child: Text('Please log in to view bookmarks'),
+          child: Padding(
+            padding: const EdgeInsets.all(24),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Icon(
+                  Icons.bookmark_border,
+                  size: 80,
+                  color: Colors.grey.shade400,
+                ),
+                const SizedBox(height: 24),
+                Text(
+                  'Please log in to view bookmarks',
+                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                    color: Colors.grey.shade700,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  'Sign in to save and organize your favorite recipes',
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    color: Colors.grey.shade600,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+              ],
+            ),
+          ),
         ),
       );
     }
@@ -175,16 +239,41 @@ class _BookmarksScreenState extends State<BookmarksScreen> {
       return Scaffold(
         appBar: AppBar(title: const Text('Bookmarks')),
         body: Center(
-          child: Column(
+          child: Padding(
-            mainAxisAlignment: MainAxisAlignment.center,
+            padding: const EdgeInsets.all(24),
-            children: [
+            child: Column(
-              Text(_errorMessage!),
+              mainAxisAlignment: MainAxisAlignment.center,
-              const SizedBox(height: 16),
+              children: [
-              ElevatedButton(
+                Icon(
-                onPressed: _loadBookmarks,
+                  Icons.error_outline,
-                child: const Text('Retry'),
+                  size: 64,
-              ),
+                  color: Colors.red.shade300,
-            ],
+                ),
+                const SizedBox(height: 16),
+                Text(
+                  'Oops! Something went wrong',
+                  style: Theme.of(context).textTheme.titleLarge,
+                  textAlign: TextAlign.center,
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  _errorMessage!,
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    color: Colors.grey.shade600,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+                const SizedBox(height: 24),
+                ElevatedButton.icon(
+                  onPressed: _loadBookmarks,
+                  icon: const Icon(Icons.refresh),
+                  label: const Text('Retry'),
+                  style: ElevatedButton.styleFrom(
+                    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+                  ),
+                ),
+              ],
+            ),
           ),
         ),
       );
@@ -193,68 +282,287 @@ class _BookmarksScreenState extends State<BookmarksScreen> {
     if (_categories.isEmpty) {
       return Scaffold(
         appBar: AppBar(title: const Text('Bookmarks')),
-        body: const Center(
+        body: Center(
-          child: Text(
+          child: Padding(
-            'No bookmark categories yet.\nBookmark a recipe to get started!',
+            padding: const EdgeInsets.all(24),
-            textAlign: TextAlign.center,
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Icon(
+                  Icons.bookmark_add_outlined,
+                  size: 100,
+                  color: Colors.grey.shade300,
+                ),
+                const SizedBox(height: 24),
+                Text(
+                  'No bookmark categories yet',
+                  style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                    fontWeight: FontWeight.bold,
+                    color: Colors.grey.shade700,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+                const SizedBox(height: 12),
+                Text(
+                  'Bookmark a recipe to organize your favorites into categories',
+                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                    color: Colors.grey.shade600,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+              ],
+            ),
           ),
         ),
       );
     }
 
+    final filteredCategories = _getFilteredCategories();
+
     return Scaffold(
       appBar: AppBar(
         title: const Text('Bookmarks'),
-        actions: [
+        elevation: 0,
-        ],
       ),
       body: RefreshIndicator(
         onRefresh: _loadBookmarks,
-        child: ListView.builder(
+        child: CustomScrollView(
-          padding: const EdgeInsets.all(16),
+          slivers: [
-          itemCount: _categories.length,
+            // Search bar
-          itemBuilder: (context, index) {
+            SliverToBoxAdapter(
-            final category = _categories[index];
+              child: Padding(
-            final recipes = _recipesByCategory[category.id] ?? [];
+                padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
-            
+                child: TextField(
-            return Card(
+                  controller: _searchController,
-              margin: const EdgeInsets.only(bottom: 16),
+                  decoration: InputDecoration(
-              child: ExpansionTile(
+                    hintText: 'Search bookmarks...',
-                leading: category.color != null
+                    prefixIcon: const Icon(Icons.search),
-                    ? Container(
+                    suffixIcon: _searchQuery.isNotEmpty
-                        width: 32,
+                        ? IconButton(
-                        height: 32,
+                            icon: const Icon(Icons.clear),
-                        decoration: BoxDecoration(
+                            onPressed: () {
-                          color: _parseColor(category.color!),
+                              _searchController.clear();
-                          shape: BoxShape.circle,
+                            },
+                          )
+                        : null,
+                    filled: true,
+                    fillColor: Theme.of(context).brightness == Brightness.dark
+                        ? Colors.grey[800]
+                        : Colors.grey[100],
+                    border: OutlineInputBorder(
+                      borderRadius: BorderRadius.circular(12),
+                      borderSide: BorderSide.none,
+                    ),
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                  ),
+                ),
+              ),
+            ),
+            // Categories list
+            if (filteredCategories.isEmpty && _searchQuery.isNotEmpty)
+              SliverFillRemaining(
+                hasScrollBody: false,
+                child: Center(
+                  child: Padding(
+                    padding: const EdgeInsets.all(24),
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Icon(
+                          Icons.search_off,
+                          size: 64,
+                          color: Colors.grey.shade400,
+                        ),
+                        const SizedBox(height: 16),
+                        Text(
+                          'No results found',
+                          style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                            color: Colors.grey.shade700,
+                          ),
                         ),
-                      )
+                        const SizedBox(height: 8),
-                    : const Icon(Icons.bookmark),
+                        Text(
-                title: Text(
+                          'Try a different search term',
-                  category.name,
+                          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                  style: const TextStyle(fontWeight: FontWeight.bold),
+                            color: Colors.grey.shade600,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              )
+            else
+              SliverPadding(
+                padding: const EdgeInsets.all(16),
+                sliver: SliverList(
+                  delegate: SliverChildBuilderDelegate(
+                    (context, index) {
+                      final category = filteredCategories[index];
+                      final recipes = _getFilteredRecipes(category.id);
+                      
+                      return _CategoryCard(
+                        category: category,
+                        recipes: recipes,
+                        categoryColor: category.color != null
+                            ? _parseColor(category.color!)
+                            : Theme.of(context).primaryColor,
+                        onRecipeTap: _viewRecipe,
+                        onPhotoTap: _openPhotoGallery,
+                      );
+                    },
+                    childCount: filteredCategories.length,
+                  ),
                 ),
-                subtitle: Text('${recipes.length} recipe(s)'),
+              ),
-                children: recipes.isEmpty
+          ],
-                    ? [
+        ),
-                        const ListTile(
+      ),
-                          title: Text('No recipes in this category'),
+    );
-                        )
+  }
-                      ]
+}
-                    : recipes.map((recipe) {
+
+/// Modern category card widget
+class _CategoryCard extends StatefulWidget {
+  final BookmarkCategory category;
+  final List<RecipeModel> recipes;
+  final Color categoryColor;
+  final Function(RecipeModel) onRecipeTap;
+  final Function(List<String>, int) onPhotoTap;
+
+  const _CategoryCard({
+    required this.category,
+    required this.recipes,
+    required this.categoryColor,
+    required this.onRecipeTap,
+    required this.onPhotoTap,
+  });
+
+  @override
+  State<_CategoryCard> createState() => _CategoryCardState();
+}
+
+class _CategoryCardState extends State<_CategoryCard> {
+  bool _isExpanded = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      margin: const EdgeInsets.only(bottom: 16),
+      elevation: 2,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(16),
+      ),
+      child: Column(
+        children: [
+          InkWell(
+            onTap: () {
+              setState(() {
+                _isExpanded = !_isExpanded;
+              });
+            },
+            borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
+            child: Padding(
+              padding: const EdgeInsets.all(16),
+              child: Row(
+                children: [
+                  // Category icon/color indicator
+                  Container(
+                    width: 48,
+                    height: 48,
+                    decoration: BoxDecoration(
+                      color: widget.categoryColor.withOpacity(0.2),
+                      borderRadius: BorderRadius.circular(12),
+                      border: Border.all(
+                        color: widget.categoryColor,
+                        width: 2,
+                      ),
+                    ),
+                    child: Icon(
+                      Icons.bookmark,
+                      color: widget.categoryColor,
+                      size: 24,
+                    ),
+                  ),
+                  const SizedBox(width: 16),
+                  // Category info
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          widget.category.name,
+                          style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                        const SizedBox(height: 4),
+                        Row(
+                          children: [
+                            Icon(
+                              Icons.restaurant_menu,
+                              size: 16,
+                              color: Colors.grey.shade600,
+                            ),
+                            const SizedBox(width: 4),
+                            Text(
+                              '${widget.recipes.length} recipe${widget.recipes.length != 1 ? 's' : ''}',
+                              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                                color: Colors.grey.shade600,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
+                  // Expand icon
+                  Icon(
+                    _isExpanded ? Icons.expand_less : Icons.expand_more,
+                    color: Colors.grey.shade600,
+                  ),
+                ],
+              ),
+            ),
+          ),
+          // Recipes list
+          if (_isExpanded)
+            AnimatedSize(
+              duration: const Duration(milliseconds: 200),
+              child: widget.recipes.isEmpty
+                  ? Padding(
+                      padding: const EdgeInsets.all(16),
+                      child: Row(
+                        children: [
+                          Icon(
+                            Icons.info_outline,
+                            size: 20,
+                            color: Colors.grey.shade400,
+                          ),
+                          const SizedBox(width: 8),
+                          Text(
+                            'No recipes in this category',
+                            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                              color: Colors.grey.shade600,
+                            ),
+                          ),
+                        ],
+                      ),
+                    )
+                  : Column(
+                      children: widget.recipes.map((recipe) {
                         return _BookmarkRecipeItem(
                           recipe: recipe,
-                          onTap: () => _viewRecipe(recipe),
+                          onTap: () => widget.onRecipeTap(recipe),
-                          onPhotoTap: (index) => _openPhotoGallery(
+                          onPhotoTap: (index) => widget.onPhotoTap(
                             recipe.imageUrls,
                             index,
                           ),
                         );
                       }).toList(),
-              ),
+                    ),
-            );
+            ),
-          },
+        ],
-        ),
       ),
     );
   }
@@ -353,58 +661,130 @@ class _BookmarkRecipeItem extends StatelessWidget {
     );
   }
 
+  Color _getRatingColor(double rating) {
+    if (rating >= 4.5) return Colors.green;
+    if (rating >= 3.5) return Colors.orange;
+    if (rating >= 2.5) return Colors.amber;
+    return Colors.red;
+  }
+
   @override
   Widget build(BuildContext context) {
-    return ListTile(
+    return InkWell(
-      leading: recipe.imageUrls.isNotEmpty
+      onTap: onTap,
-          ? GestureDetector(
+      child: Padding(
-              onTap: () => onPhotoTap(0),
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-              child: ClipRRect(
+        child: Row(
-                borderRadius: BorderRadius.circular(8),
+          crossAxisAlignment: CrossAxisAlignment.start,
-                child: SizedBox(
+          children: [
-                  width: 60,
+            // Recipe image
-                  height: 60,
+            recipe.imageUrls.isNotEmpty
-                  child: _buildRecipeImage(recipe.imageUrls.first),
+                ? GestureDetector(
-                ),
+                    onTap: () => onPhotoTap(0),
-              ),
+                    child: ClipRRect(
-            )
+                      borderRadius: BorderRadius.circular(12),
-          : Container(
+                      child: Container(
-              width: 60,
+                        width: 80,
-              height: 60,
+                        height: 80,
-              decoration: BoxDecoration(
+                        decoration: BoxDecoration(
-                color: Colors.grey[300],
+                          color: Colors.grey.shade200,
-                borderRadius: BorderRadius.circular(8),
+                          borderRadius: BorderRadius.circular(12),
+                        ),
+                        child: _buildRecipeImage(recipe.imageUrls.first),
+                      ),
+                    ),
+                  )
+                : Container(
+                    width: 80,
+                    height: 80,
+                    decoration: BoxDecoration(
+                      color: Colors.grey.shade200,
+                      borderRadius: BorderRadius.circular(12),
+                    ),
+                    child: Icon(
+                      Icons.restaurant_menu,
+                      color: Colors.grey.shade400,
+                      size: 32,
+                    ),
+                  ),
+            const SizedBox(width: 16),
+            // Recipe info
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    recipe.title,
+                    style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                      fontWeight: FontWeight.w600,
+                    ),
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                  if (recipe.description != null && recipe.description!.isNotEmpty) ...[
+                    const SizedBox(height: 6),
+                    Text(
+                      recipe.description!,
+                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                        color: Colors.grey.shade600,
+                      ),
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                  ],
+                  const SizedBox(height: 8),
+                  Row(
+                    children: [
+                      // Rating badge
+                      Container(
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 8,
+                          vertical: 4,
+                        ),
+                        decoration: BoxDecoration(
+                          color: _getRatingColor(recipe.rating.toDouble()).withOpacity(0.15),
+                          borderRadius: BorderRadius.circular(12),
+                        ),
+                        child: Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            const Icon(
+                              Icons.star,
+                              size: 14,
+                              color: Colors.amber,
+                            ),
+                            const SizedBox(width: 4),
+                            Text(
+                              recipe.rating.toString(),
+                              style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                                fontWeight: FontWeight.bold,
+                                color: _getRatingColor(recipe.rating.toDouble()),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                      if (recipe.isFavourite) ...[
+                        const SizedBox(width: 8),
+                        Icon(
+                          Icons.favorite,
+                          size: 16,
+                          color: Colors.red.shade400,
+                        ),
+                      ],
+                    ],
+                  ),
+                ],
               ),
-              child: const Icon(Icons.restaurant_menu),
             ),
-      title: Text(
+            // Chevron icon
-        recipe.title,
+            Icon(
-        style: const TextStyle(fontWeight: FontWeight.w500),
+              Icons.chevron_right,
-      ),
+              color: Colors.grey.shade400,
-      subtitle: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          if (recipe.description != null && recipe.description!.isNotEmpty)
-            Text(
-              recipe.description!,
-              maxLines: 2,
-              overflow: TextOverflow.ellipsis,
             ),
-          const SizedBox(height: 4),
+          ],
-          Row(
+        ),
-            children: [
-              const Icon(Icons.star, size: 16, color: Colors.amber),
-              const SizedBox(width: 4),
-              Text(recipe.rating.toString()),
-              if (recipe.isFavourite) ...[
-                const SizedBox(width: 12),
-                const Icon(Icons.favorite, size: 16, color: Colors.red),
-              ],
-            ],
-          ),
-        ],
       ),
-      onTap: onTap,
     );
   }
 }

lib/ui/favourites/favourites_screen.dart

@@ -7,6 +7,7 @@ import '../../data/recipes/recipe_service.dart';
 import '../../data/recipes/models/recipe_model.dart';
 import '../add_recipe/add_recipe_screen.dart';
 import '../photo_gallery/photo_gallery_screen.dart';
+import '../navigation/material3_page_route.dart';
 
 /// Favourites screen displaying user's favorite recipes.
 class FavouritesScreen extends StatefulWidget {
@@ -165,8 +166,9 @@ class _FavouritesScreenState extends State<FavouritesScreen> {
 
   void _viewRecipe(RecipeModel recipe) async {
     await Navigator.of(context).push(
-      MaterialPageRoute(
+      Material3PageRoute(
-        builder: (context) => AddRecipeScreen(recipe: recipe, viewMode: true),
+        child: AddRecipeScreen(recipe: recipe, viewMode: true),
+        useEmphasized: true, // Use emphasized easing for more fluid feel
       ),
     );
     // Reload favourites after viewing (in case favorite was toggled)
@@ -177,8 +179,9 @@ class _FavouritesScreenState extends State<FavouritesScreen> {
 
   void _editRecipe(RecipeModel recipe) async {
     final result = await Navigator.of(context).push(
-      MaterialPageRoute(
+      Material3PageRoute(
-        builder: (context) => AddRecipeScreen(recipe: recipe),
+        child: AddRecipeScreen(recipe: recipe),
+        useEmphasized: true, // Use emphasized easing for more fluid feel
       ),
     );
     if (result == true || mounted) {

lib/ui/home/home_screen.dart

@@ -6,6 +6,7 @@ import '../../data/recipes/models/recipe_model.dart';
 import '../shared/primary_app_bar.dart';
 import '../add_recipe/add_recipe_screen.dart';
 import '../navigation/main_navigation_scaffold.dart';
+import '../navigation/material3_page_route.dart';
 import 'package:video_player/video_player.dart';
 
 /// Home screen showing recipes overview, stats, tags, and favorites.
@@ -69,29 +70,30 @@ class _HomeScreenState extends State<HomeScreen> {
       final recent = allRecipes.take(6).toList();
 
       if (mounted) {
-        setState(() {
+      setState(() {
           _allRecipes = allRecipes;
           _favoriteRecipes = favorites;
           _recentRecipes = recent;
           _tagCounts = Map.fromEntries(sortedTags);
-          _isLoading = false;
+        _isLoading = false;
-        });
+      });
       }
     } catch (e) {
       Logger.error('Failed to load home data', e);
       if (mounted) {
-        setState(() {
+      setState(() {
-          _isLoading = false;
+        _isLoading = false;
-        });
+      });
-      }
+    }
     }
   }
 
   void _navigateToRecipe(RecipeModel recipe) async {
     final result = await Navigator.push(
       context,
-      MaterialPageRoute(
+      Material3PageRoute(
-        builder: (context) => AddRecipeScreen(recipe: recipe, viewMode: true),
+        child: AddRecipeScreen(recipe: recipe, viewMode: true),
+        useEmphasized: true, // Use emphasized easing for more fluid feel
       ),
     );
     // Reload data if recipe was edited
@@ -420,7 +422,7 @@ class _HomeScreenState extends State<HomeScreen> {
                     ],
                     if (recipe.isFavourite) ...[
                       if (recipe.rating > 0) const SizedBox(width: 8),
-                      Icon(
+                          Icon(
                         Icons.favorite,
                         size: 16,
                         color: Colors.red,
@@ -443,8 +445,8 @@ class _HomeScreenState extends State<HomeScreen> {
         child: Icon(
           Icons.restaurant_menu,
           size: 48,
-          color: Colors.grey,
+                            color: Colors.grey,
-        ),
+                          ),
       ),
     );
   }
@@ -583,14 +585,14 @@ class _HomeScreenState extends State<HomeScreen> {
                     ),
                   ],
                 ),
-              ),
+                            ),
               Icon(
                 Icons.favorite,
                 color: Colors.red,
                 size: 20,
-              ),
+                          ),
-            ],
+                        ],
-          ),
+                      ),
         ),
       ),
     );
@@ -680,7 +682,7 @@ class _VideoThumbnailPreviewState extends State<_VideoThumbnailPreview> {
             ),
           ),
         ],
-      );
+                );
     }
 
     return Stack(

lib/ui/navigation/material3_page_route.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+
+/// Material Design 3 easing curves
+/// Reference: https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration
+class Material3Easing {
+  /// Standard easing curve for entering animations
+  /// Cubic(0.2, 0, 0, 1)
+  static const Curve standardEnter = Cubic(0.2, 0, 0, 1);
+
+  /// Standard easing curve for exiting animations
+  /// Cubic(0, 0, 0.2, 1)
+  static const Curve standardExit = Cubic(0, 0, 0.2, 1);
+
+  /// Emphasized easing curve for entering animations
+  /// Cubic(0.2, 0, 0, 1)
+  static const Curve emphasizedEnter = Cubic(0.2, 0, 0, 1);
+
+  /// Emphasized easing curve for exiting animations
+  /// Cubic(0.05, 0.7, 0.1, 1)
+  static const Curve emphasizedExit = Cubic(0.05, 0.7, 0.1, 1);
+}
+
+/// Material Design 3 page route with custom easing animations.
+/// 
+/// Uses Material Design 3 motion guidelines for smooth, fluid transitions.
+/// Reference: https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration
+class Material3PageRoute<T> extends PageRouteBuilder<T> {
+  final Widget child;
+  final bool useEmphasized;
+
+  Material3PageRoute({
+    required this.child,
+    this.useEmphasized = false,
+    RouteSettings? settings,
+  }) : super(
+          pageBuilder: (context, animation, secondaryAnimation) => child,
+          transitionDuration: useEmphasized
+              ? const Duration(milliseconds: 400)
+              : const Duration(milliseconds: 300),
+          reverseTransitionDuration: useEmphasized
+              ? const Duration(milliseconds: 400)
+              : const Duration(milliseconds: 300),
+          settings: settings,
+          transitionsBuilder: (context, animation, secondaryAnimation, child) {
+            // Use Material Design 3 easing curves
+            final enterCurve = useEmphasized
+                ? Material3Easing.emphasizedEnter
+                : Material3Easing.standardEnter;
+            final exitCurve = useEmphasized
+                ? Material3Easing.emphasizedExit
+                : Material3Easing.standardExit;
+
+            // Apply easing curves to animations
+            final curvedAnimation = CurvedAnimation(
+              parent: animation,
+              curve: enterCurve,
+              reverseCurve: exitCurve,
+            );
+
+            // Slide transition with fade
+            return SlideTransition(
+              position: Tween<Offset>(
+                begin: const Offset(0.0, 0.05), // Slight upward slide
+                end: Offset.zero,
+              ).animate(curvedAnimation),
+              child: FadeTransition(
+                opacity: curvedAnimation,
+                child: child,
+              ),
+            );
+          },
+        );
+}
+

lib/ui/recipes/recipes_screen.dart

@@ -9,6 +9,7 @@ import '../../data/local/models/item.dart';
 import '../add_recipe/add_recipe_screen.dart';
 import '../photo_gallery/photo_gallery_screen.dart';
 import '../navigation/main_navigation_scaffold.dart';
+import '../navigation/material3_page_route.dart';
 import 'bookmark_dialog.dart';
 import '../../data/recipes/models/bookmark_category_model.dart';
 
@@ -28,7 +29,7 @@ class RecipesScreen extends StatefulWidget {
   }
 }
 
-class _RecipesScreenState extends State<RecipesScreen> with WidgetsBindingObserver {
+class _RecipesScreenState extends State<RecipesScreen> with WidgetsBindingObserver, SingleTickerProviderStateMixin {
   List<RecipeModel> _recipes = [];
   List<RecipeModel> _filteredRecipes = [];
   bool _isLoading = false;
@@ -41,6 +42,12 @@ class _RecipesScreenState extends State<RecipesScreen> with WidgetsBindingObserv
   DateTime? _lastRefreshTime;
   Set<String> _selectedTags = {}; // Currently selected tags for filtering
   
+  // Auto-scroll animation for tag filter bar
+  ScrollController? _tagScrollController;
+  AnimationController? _tagAnimationController;
+  Animation<double>? _tagAnimation;
+  bool _isUserScrollingTags = false;
+
   @override
   void initState() {
     super.initState();
@@ -49,15 +56,53 @@ class _RecipesScreenState extends State<RecipesScreen> with WidgetsBindingObserv
     _checkLoginState();
     _loadPreferences();
     _searchController.addListener(_onSearchChanged);
+    
+    // Initialize tag scroll animation
+    _tagScrollController = ScrollController();
+    _tagAnimationController = AnimationController(
+      vsync: this,
+      duration: const Duration(seconds: 8),
+    );
+    _tagAnimation = Tween<double>(begin: 0, end: 0.3).animate(
+      CurvedAnimation(parent: _tagAnimationController!, curve: Curves.easeInOut),
+    );
+    _startTagAutoScroll();
+    _tagAnimation?.addListener(_animateTagScroll);
   }
 
   @override
   void dispose() {
     WidgetsBinding.instance.removeObserver(this);
     _searchController.dispose();
+    _tagAnimationController?.dispose();
+    _tagScrollController?.dispose();
     super.dispose();
   }
 
+  void _startTagAutoScroll() {
+    if (!_isUserScrollingTags && _tagAnimationController != null) {
+      _tagAnimationController!.repeat(reverse: true);
+    }
+  }
+
+  void _animateTagScroll() {
+    if (!_isUserScrollingTags && 
+        _tagScrollController != null && 
+        _tagScrollController!.hasClients &&
+        _tagAnimation != null) {
+      final allTags = _getFilteredTags().toList();
+      if (allTags.length > 3) {
+        final maxScroll = _tagScrollController!.position.maxScrollExtent;
+        if (maxScroll > 0) {
+          final targetScroll = _tagAnimation!.value * maxScroll;
+          if ((_tagScrollController!.offset - targetScroll).abs() > 1) {
+            _tagScrollController!.jumpTo(targetScroll);
+          }
+        }
+      }
+    }
+  }
+
   @override
   void didChangeAppLifecycleState(AppLifecycleState state) {
     super.didChangeAppLifecycleState(state);
@@ -169,6 +214,10 @@ class _RecipesScreenState extends State<RecipesScreen> with WidgetsBindingObserv
 
   /// Handles tag selection for filtering
   void _selectTag(String tag) {
+    // Stop auto-scroll permanently when user selects a tag
+    _isUserScrollingTags = true;
+    _tagAnimationController?.stop();
+    
     setState(() {
       if (_selectedTags.contains(tag)) {
         _selectedTags.remove(tag);
@@ -334,8 +383,9 @@ class _RecipesScreenState extends State<RecipesScreen> with WidgetsBindingObserv
 
   void _viewRecipe(RecipeModel recipe) async {
     await Navigator.of(context).push(
-      MaterialPageRoute(
+      Material3PageRoute(
-        builder: (context) => AddRecipeScreen(recipe: recipe, viewMode: true),
+        child: AddRecipeScreen(recipe: recipe, viewMode: true),
+        useEmphasized: true, // Use emphasized easing for more fluid feel
       ),
     );
     // Always reload recipes after viewing/editing to ensure UI is up-to-date
@@ -491,34 +541,54 @@ class _RecipesScreenState extends State<RecipesScreen> with WidgetsBindingObserv
                   ),
                 ),
               )
-            : ListView.builder(
+            : NotificationListener<ScrollNotification>(
-                scrollDirection: Axis.horizontal,
+                onNotification: (notification) {
-                padding: const EdgeInsets.symmetric(horizontal: 16),
+                  // Detect when user manually scrolls - stop auto-scroll permanently
-                itemCount: allTags.length,
+                  if (notification is ScrollStartNotification && notification.dragDetails != null) {
-                itemBuilder: (context, index) {
+                    _isUserScrollingTags = true;
-                  final tag = allTags[index];
+                    _tagAnimationController?.stop();
-                  final isSelected = _selectedTags.contains(tag);
+                  }
-                  return Padding(
+                  return false;
-                    padding: const EdgeInsets.only(right: 8),
-                    child: FilterChip(
-                      label: Text(tag),
-                      selected: isSelected,
-                      onSelected: (selected) {
-                        _selectTag(tag);
-                      },
-                      selectedColor: theme.primaryColor,
-                      checkmarkColor: Colors.white,
-                      backgroundColor: isDark 
-                          ? Colors.grey[800] 
-                          : Colors.grey[200],
-                      labelStyle: TextStyle(
-                        color: isSelected 
-                            ? Colors.white 
-                            : (isDark ? Colors.white : Colors.black87),
-                      ),
-                    ),
-                  );
                 },
+                child: ListView.builder(
+                  controller: _tagScrollController ?? ScrollController(),
+                  scrollDirection: Axis.horizontal,
+                  padding: const EdgeInsets.symmetric(horizontal: 16),
+                  itemCount: allTags.length,
+                  itemBuilder: (context, index) {
+                    final tag = allTags[index];
+                    final isSelected = _selectedTags.contains(tag);
+                    return Padding(
+                      padding: const EdgeInsets.only(right: 8),
+                      child: FilterChip(
+                        label: Text(
+                          tag,
+                          style: TextStyle(
+                            color: isSelected 
+                                ? Colors.white 
+                                : (isDark ? Colors.white : Colors.black87),
+                            fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
+                          ),
+                        ),
+                        selected: isSelected,
+                        onSelected: (selected) {
+                          _selectTag(tag);
+                        },
+                        selectedColor: theme.primaryColor,
+                        checkmarkColor: Colors.white,
+                        backgroundColor: isDark 
+                            ? Colors.grey[800] 
+                            : Colors.grey[200],
+                        side: isSelected
+                            ? BorderSide(
+                                color: theme.primaryColor.withValues(alpha: 0.8),
+                                width: 1.5,
+                              )
+                            : null,
+                      ),
+                    );
+                  },
+                ),
               ),
       ),
     );
@@ -1103,7 +1173,10 @@ class _RecipeCard extends StatelessWidget {
   Widget _buildRecipeImage(String imageUrl) {
     final mediaService = ServiceLocator.instance.mediaService;
     if (mediaService == null) {
-      return Image.network(imageUrl, fit: BoxFit.cover);
+      return _FadeInImageWidget(
+        imageUrl: imageUrl,
+        isNetwork: true,
+      );
     }
     
     // Try to extract asset ID from Immich URL (format: .../api/assets/{id}/original)
@@ -1135,41 +1208,16 @@ class _RecipeCard extends StatelessWidget {
               );
             }
 
-            return Image.memory(
+            return _FadeInImageWidget(
-              snapshot.data!,
+              imageBytes: snapshot.data!,
-              fit: BoxFit.cover,
-              width: double.infinity,
-              height: double.infinity,
             );
           },
         );
     }
     
-    return Image.network(
+    return _FadeInImageWidget(
-      imageUrl,
+      imageUrl: imageUrl,
-      fit: BoxFit.cover,
+      isNetwork: true,
-      width: double.infinity,
-      height: double.infinity,
-      errorBuilder: (context, error, stackTrace) {
-        return Container(
-          color: Colors.grey.shade200,
-          child: const Icon(Icons.image_not_supported, size: 32, color: Colors.grey),
-        );
-      },
-      loadingBuilder: (context, child, loadingProgress) {
-        if (loadingProgress == null) return child;
-        return Container(
-          color: Colors.grey.shade200,
-          child: Center(
-            child: CircularProgressIndicator(
-              value: loadingProgress.expectedTotalBytes != null
-                  ? loadingProgress.cumulativeBytesLoaded /
-                      loadingProgress.expectedTotalBytes!
-                  : null,
-            ),
-          ),
-        );
-      },
     );
   }
 
@@ -1184,6 +1232,124 @@ class _RecipeCard extends StatelessWidget {
   }
 }
 
+/// Widget that displays an image with a smooth fade-in animation.
+class _FadeInImageWidget extends StatefulWidget {
+  final String? imageUrl;
+  final Uint8List? imageBytes;
+  final bool isNetwork;
+
+  const _FadeInImageWidget({
+    this.imageUrl,
+    this.imageBytes,
+    this.isNetwork = false,
+  }) : assert(imageUrl != null || imageBytes != null, 'Either imageUrl or imageBytes must be provided');
+
+  @override
+  State<_FadeInImageWidget> createState() => _FadeInImageWidgetState();
+}
+
+class _FadeInImageWidgetState extends State<_FadeInImageWidget>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _fadeAnimation;
+  bool _imageLoaded = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(milliseconds: 500),
+      vsync: this,
+    );
+    _fadeAnimation = CurvedAnimation(
+      parent: _controller,
+      curve: Curves.easeOut,
+    );
+    // Start with opacity 0
+    _controller.value = 0.0;
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _onImageLoaded() {
+    if (!_imageLoaded && mounted) {
+      _imageLoaded = true;
+      _controller.forward();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Widget imageWidget;
+    
+    if (widget.imageBytes != null) {
+      // For memory images, use frameBuilder to detect when image is ready
+      imageWidget = Image.memory(
+        widget.imageBytes!,
+        fit: BoxFit.cover,
+        width: double.infinity,
+        height: double.infinity,
+        frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+          if ((wasSynchronouslyLoaded || frame != null) && !_imageLoaded) {
+            WidgetsBinding.instance.addPostFrameCallback((_) => _onImageLoaded());
+          }
+          return child;
+        },
+      );
+    } else if (widget.imageUrl != null) {
+      // For network images, use frameBuilder to detect when image is ready
+      imageWidget = Image.network(
+        widget.imageUrl!,
+        fit: BoxFit.cover,
+        width: double.infinity,
+        height: double.infinity,
+        errorBuilder: (context, error, stackTrace) {
+          return Container(
+            color: Colors.grey.shade200,
+            child: const Icon(Icons.image_not_supported, size: 32, color: Colors.grey),
+          );
+        },
+        loadingBuilder: (context, child, loadingProgress) {
+          if (loadingProgress == null) {
+            // Image is loaded, return child and let frameBuilder handle fade-in
+            return child;
+          }
+          return Container(
+            color: Colors.grey.shade200,
+            child: Center(
+              child: CircularProgressIndicator(
+                value: loadingProgress.expectedTotalBytes != null
+                    ? loadingProgress.cumulativeBytesLoaded /
+                        loadingProgress.expectedTotalBytes!
+                    : null,
+              ),
+            ),
+          );
+        },
+        frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+          if ((wasSynchronouslyLoaded || frame != null) && !_imageLoaded) {
+            WidgetsBinding.instance.addPostFrameCallback((_) => _onImageLoaded());
+          }
+          return child;
+        },
+      );
+    } else {
+      return Container(
+        color: Colors.grey.shade200,
+        child: const Icon(Icons.image_not_supported, size: 32, color: Colors.grey),
+      );
+    }
+
+    return FadeTransition(
+      opacity: _fadeAnimation,
+      child: imageWidget,
+    );
+  }
+}
 
 /// Widget that displays a video thumbnail preview with a few seconds of playback.
 class _VideoThumbnailPreview extends StatefulWidget {

lib/ui/relay_management/relay_management_controller.dart

@@ -56,6 +56,7 @@ class RelayManagementController extends ChangeNotifier {
       url: relay.url,
       isConnected: relay.isConnected,
       isEnabled: relay.isEnabled,
+      retryCount: relay.retryCount,
     )).toList();
     notifyListeners();
   }