refactor(bottom_actions_row): convert BottomActionsRow to StatefulWidget for better state management

Author: gokadzev

lib/widgets/now_playing/bottom_actions_row.dart

@@ -32,7 +32,7 @@ import 'package:musify/utilities/mediaitem.dart';
 import 'package:musify/widgets/queue_list_view.dart';
 import 'package:musify/widgets/song_bar.dart';
 
-class BottomActionsRow extends StatelessWidget {
+class BottomActionsRow extends StatefulWidget {
   const BottomActionsRow({
     super.key,
     required this.audioId,
@@ -47,16 +47,48 @@ class BottomActionsRow extends StatelessWidget {
   final bool isLargeScreen;
   final dynamic lyricsController;
 
+  @override
+  State<BottomActionsRow> createState() => _BottomActionsRowState();
+}
+
+class _BottomActionsRowState extends State<BottomActionsRow> {
+  late final ValueNotifier<bool> _songLikeStatus;
+  late final ValueNotifier<bool> _songOfflineStatus;
+
+  @override
+  void initState() {
+    super.initState();
+    _songLikeStatus = ValueNotifier<bool>(isSongAlreadyLiked(widget.audioId));
+    _songOfflineStatus = ValueNotifier<bool>(
+      isSongAlreadyOffline(widget.audioId),
+    );
+  }
+
+  @override
+  void didUpdateWidget(BottomActionsRow oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.audioId != widget.audioId) {
+      _songLikeStatus.value = isSongAlreadyLiked(widget.audioId);
+      _songOfflineStatus.value = isSongAlreadyOffline(widget.audioId);
+    }
+  }
+
+  @override
+  void dispose() {
+    _songLikeStatus.dispose();
+    _songOfflineStatus.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
-    final songLikeStatus = ValueNotifier<bool>(isSongAlreadyLiked(audioId));
-    final songOfflineStatus = ValueNotifier<bool>(
-      isSongAlreadyOffline(audioId),
-    );
+    final l10n = context.l10n!;
 
     final screenWidth = MediaQuery.sizeOf(context).width;
-    final responsiveIconSize = screenWidth < 360 ? iconSize * 0.85 : iconSize;
+    final responsiveIconSize = screenWidth < 360
+        ? widget.iconSize * 0.85
+        : widget.iconSize;
 
     return StreamBuilder<List<Map>>(
       stream: audioHandler.queueAsMapStream,
@@ -70,31 +102,30 @@ class BottomActionsRow extends StatelessWidget {
             activeIcon: FluentIcons.cloud_off_24_filled,
             colorScheme: colorScheme,
             size: responsiveIconSize,
-            statusNotifier: songOfflineStatus,
-            onPressed: audioId == null
+            statusNotifier: _songOfflineStatus,
+            onPressed: widget.audioId == null
                 ? null
-                : () => _toggleOffline(songOfflineStatus, audioId, metadata),
-            tooltip: 'Offline',
+                : () => _toggleOffline(
+                    _songOfflineStatus,
+                    widget.audioId,
+                    widget.metadata,
+                  ),
+            tooltip: l10n.makeOffline,
           ),
           _buildSleepTimerButton(context, colorScheme, responsiveIconSize),
-        ];
-
-        if (!offlineMode.value) {
-          actions.add(
+          if (!offlineMode.value)
             _buildSimpleActionButton(
               context: context,
               icon: FluentIcons.album_add_24_regular,
               colorScheme: colorScheme,
               size: responsiveIconSize,
-              onPressed: () =>
-                  showAddToPlaylistDialog(context, mediaItemToMap(metadata)),
-              tooltip: 'Add to playlist',
+              onPressed: () => showAddToPlaylistDialog(
+                context,
+                mediaItemToMap(widget.metadata),
+              ),
+              tooltip: l10n.addToPlaylist,
             ),
-          );
-        }
-
-        if (queue.isNotEmpty && !isLargeScreen) {
-          actions.add(
+          if (queue.isNotEmpty && !widget.isLargeScreen)
             _buildSimpleActionButton(
               context: context,
               icon: FluentIcons.apps_list_24_filled,
@@ -104,37 +135,33 @@ class BottomActionsRow extends StatelessWidget {
                 context,
                 const QueueWidget(isBottomSheet: true),
               ),
-              tooltip: 'Queue',
+              tooltip: l10n.queue,
+            ),
+          if (!offlineMode.value) ...[
+            _buildSimpleActionButton(
+              context: context,
+              icon: FluentIcons.text_quote_24_regular,
+              colorScheme: colorScheme,
+              size: responsiveIconSize,
+              onPressed: widget.lyricsController.flipcard,
+              tooltip: l10n.lyrics,
             ),
-          );
-        }
-
-        if (!offlineMode.value) {
-          actions.addAll([
             _buildActionButton(
               context: context,
               icon: FluentIcons.heart_24_regular,
               activeIcon: FluentIcons.heart_24_filled,
               colorScheme: colorScheme,
               size: responsiveIconSize,
-              statusNotifier: songLikeStatus,
+              statusNotifier: _songLikeStatus,
               activeColor: colorScheme.primary,
               onPressed: () {
-                updateSongLikeStatus(audioId, !songLikeStatus.value);
-                songLikeStatus.value = !songLikeStatus.value;
+                updateSongLikeStatus(widget.audioId, !_songLikeStatus.value);
+                _songLikeStatus.value = !_songLikeStatus.value;
               },
-              tooltip: 'Like',
+              tooltip: l10n.likedSongs,
             ),
-            _buildSimpleActionButton(
-              context: context,
-              icon: FluentIcons.text_quote_24_regular,
-              colorScheme: colorScheme,
-              size: responsiveIconSize,
-              onPressed: lyricsController.flipcard,
-              tooltip: 'Lyrics',
-            ),
-          ]);
-        }
+          ],
+        ];
 
         return Container(
           padding: const EdgeInsets.all(8),
@@ -228,7 +255,7 @@ class BottomActionsRow extends StatelessWidget {
                 : colorScheme.onSurfaceVariant,
           ),
           iconSize: size,
-          tooltip: 'Sleep timer',
+          tooltip: context.l10n!.sleepTimer,
           style: IconButton.styleFrom(
             backgroundColor: isActive
                 ? colorScheme.primary.withValues(alpha: 0.15)