refactor: update playlist header layout and styling, refine track card typography, and update default profile image state

Author: SyntaxAdi

.gitignore

@@ -40,7 +40,8 @@ migrate_working_dir/
 /.roo/
 /.trae/
 /.windsurf/
-
+/.mcp.json
+/.opencode.json
 # Xcode
 *.xcworkspace/xcuserdata/
 *.xcodeproj/xcuserdata/
@@ -126,3 +127,5 @@ downloads/
 
 # ── Pub lock (keep for apps, remove for packages) ─
 # pubspec.lock   ← Keep committed for apps (it is committed here)
+# Added by code-review-graph
+.code-review-graph/

lib/providers/profile_provider.dart

@@ -126,12 +126,12 @@ class ProfileImageNotifier extends StateNotifier<ProfileImageState> {
     final preferences = await SharedPreferences.getInstance();
     await preferences.setString(
       _profileImageModeKey,
-      ProfileImageMode.none.name,
+      ProfileImageMode.defaultAsset.name,
     );
     await preferences.remove(_profileImagePathKey);
 
     state = const ProfileImageState(
-      mode: ProfileImageMode.none,
+      mode: ProfileImageMode.defaultAsset,
     );
   }
 

lib/screens/downloads_screen.dart

@@ -23,7 +23,19 @@ class DownloadsScreen extends ConsumerWidget {
       appBar: AppBar(
         backgroundColor: bgBase,
         elevation: 0,
-        title: Text('DOWNLOADS', style: Theme.of(context).textTheme.displayLarge),
+        title: LayoutBuilder(
+          builder: (context, constraints) {
+            final screenWidth = MediaQuery.of(context).size.width;
+            final fontSize = (screenWidth * 0.056).clamp(18.0, 24.0);
+            return Text(
+              'DOWNLOADS',
+              style: Theme.of(context).textTheme.displayLarge?.copyWith(
+                    fontSize: fontSize,
+                    letterSpacing: 1.2,
+                  ),
+            );
+          },
+        ),
       ),
       body: Column(
         children: [
@@ -40,6 +52,7 @@ class DownloadsScreen extends ConsumerWidget {
                           context,
                           ref,
                           download,
+                          _computeItemHeight(constraints.maxHeight, activeDownloads.length, completedDownloads.length),
                         ),
                       ),
                     ],
@@ -50,7 +63,7 @@ class DownloadsScreen extends ConsumerWidget {
                       ...completedDownloads.map<Widget>(
                         (download) => _CompletedDownloadTile(
                           download: download,
-                          height: _computeItemHeight(constraints.maxHeight, completedDownloads.length),
+                          height: _computeItemHeight(constraints.maxHeight, activeDownloads.length, completedDownloads.length),
                         ),
                       ),
                   ],
@@ -64,21 +77,31 @@ class DownloadsScreen extends ConsumerWidget {
     );
   }
 
-  /// Compute item height to fit ~11 items, adapting to screen size.
-  double _computeItemHeight(double availableHeight, int itemCount) {
-    // Reserve space for section header (~28px)
-    final listHeight = availableHeight - 28;
-    // Target 11 items visible, min 48px per item
-    final targetHeight = (listHeight / 11).clamp(48.0, 72.0);
+  /// Compute item height to fit ~8.5 items, making elements look "zoomed in".
+  double _computeItemHeight(double availableHeight, int activeCount, int completedCount) {
+    // Reserve space for section headers (~44px each now with padding)
+    double reservedHeight = 0;
+    if (activeCount > 0) reservedHeight += 44;
+    if (completedCount >= 0) reservedHeight += 44;
+
+    final listHeight = (availableHeight - reservedHeight).clamp(0.0, availableHeight);
+    
+    // Target 8.5 items visible for a larger, "zoomed" look
+    final targetHeight = (listHeight / 8.5).clamp(64.0, 92.0);
     return targetHeight;
   }
 
   Widget _buildSectionHeader(String title) {
     return Padding(
-      padding: const EdgeInsets.fromLTRB(16, 12, 16, 4),
+      padding: const EdgeInsets.fromLTRB(16, 20, 16, 10),
       child: Text(
         title,
-        style: const TextStyle(color: textSecondary, fontSize: 10, fontWeight: FontWeight.bold, letterSpacing: 0.12),
+        style: const TextStyle(
+          color: textSecondary,
+          fontSize: 14,
+          fontWeight: FontWeight.bold,
+          letterSpacing: 1.2,
+        ),
       ),
     );
   }
@@ -102,33 +125,35 @@ class DownloadsScreen extends ConsumerWidget {
     BuildContext context,
     WidgetRef ref,
     DownloadRecord download,
+    double height,
   ) {
     return Container(
+      height: height,
       margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
-      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      padding: const EdgeInsets.symmetric(horizontal: 16),
       color: bgCard,
       child: Row(
         children: [
-          _TrackArtwork(thumbnailUrl: download.thumbnailUrl, size: 36),
-          const SizedBox(width: 10),
+          _TrackArtwork(thumbnailUrl: download.thumbnailUrl, size: (height * 0.72).clamp(44.0, 64.0)),
+          const SizedBox(width: 14),
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisSize: MainAxisSize.min,
+              mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Text(
                   download.title,
-                  style: const TextStyle(color: textPrimary, fontSize: 12, fontWeight: FontWeight.w500),
+                  style: const TextStyle(color: textPrimary, fontSize: 15, fontWeight: FontWeight.bold),
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
                 ),
-                const SizedBox(height: 2),
+                const SizedBox(height: 4),
                 // Progress bar inline
                 Row(
                   children: [
                     Expanded(
                       child: Container(
-                        height: 2,
+                        height: 3,
                         color: bgDivider,
                         alignment: Alignment.centerLeft,
                         child: FractionallySizedBox(
@@ -137,22 +162,22 @@ class DownloadsScreen extends ConsumerWidget {
                         ),
                       ),
                     ),
-                    const SizedBox(width: 8),
+                    const SizedBox(width: 10),
                     Text(
                       '${(download.progress * 100).round()}%',
-                      style: const TextStyle(color: accentPrimary, fontSize: 9, fontWeight: FontWeight.bold),
+                      style: const TextStyle(color: accentPrimary, fontSize: 12, fontWeight: FontWeight.bold),
                     ),
                   ],
                 ),
               ],
             ),
           ),
-          const SizedBox(width: 8),
+          const SizedBox(width: 10),
           GestureDetector(
             onTap: () {
               ref.read(downloadNotifierProvider.notifier).cancelDownload(download.videoId);
             },
-            child: const Icon(Icons.close_rounded, color: accentRed, size: 18),
+            child: const Icon(Icons.close_rounded, color: accentRed, size: 24),
           ),
         ],
       ),
@@ -177,7 +202,6 @@ class DownloadsScreen extends ConsumerWidget {
 /// Completed download tile with swipe gestures and tap-to-play.
 class _CompletedDownloadTile extends ConsumerStatefulWidget {
   const _CompletedDownloadTile({
-    super.key,
     required this.download,
     required this.height,
   });
@@ -259,14 +283,14 @@ class _CompletedDownloadTileState extends ConsumerState<_CompletedDownloadTile>
   @override
   Widget build(BuildContext context) {
     final width = MediaQuery.of(context).size.width;
-    final thumbSize = (widget.height * 0.7).clamp(28.0, 48.0);
+    final thumbSize = (widget.height * 0.72).clamp(44.0, 64.0);
 
     return Stack(
       children: [
         // Background layer containing actions
         Positioned.fill(
           child: Container(
-            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 1),
+            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
             decoration: BoxDecoration(
               color: bgCard,
               borderRadius: BorderRadius.circular(2),
@@ -279,14 +303,14 @@ class _CompletedDownloadTileState extends ConsumerState<_CompletedDownloadTile>
                   width: width * _swipeLimitPercent,
                   color: accentPrimary.withValues(alpha: 0.15),
                   alignment: Alignment.center,
-                  child: const Icon(Icons.queue_music_rounded, color: accentPrimary, size: 18),
+                  child: const Icon(Icons.queue_music_rounded, color: accentPrimary, size: 24),
                 ),
                 // Right action (visible on left swipe)
                 Container(
                   width: width * _swipeLimitPercent,
                   color: accentRed.withValues(alpha: 0.15),
                   alignment: Alignment.center,
-                  child: const Icon(Icons.delete_outline_rounded, color: accentRed, size: 18),
+                  child: const Icon(Icons.delete_outline_rounded, color: accentRed, size: 24),
                 ),
               ],
             ),
@@ -310,35 +334,36 @@ class _CompletedDownloadTileState extends ConsumerState<_CompletedDownloadTile>
             offset: Offset(_dragOffset, 0),
             child: Container(
               height: widget.height,
-              margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 1),
-              padding: const EdgeInsets.symmetric(horizontal: 12),
+              margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
+              padding: const EdgeInsets.symmetric(horizontal: 16),
               color: bgCard,
               child: Row(
                 children: [
                   _TrackArtwork(thumbnailUrl: widget.download.thumbnailUrl, size: thumbSize),
-                  const SizedBox(width: 10),
+                  const SizedBox(width: 14),
                   Expanded(
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
                         Text(
                           widget.download.title,
-                          style: const TextStyle(color: textPrimary, fontSize: 12, fontWeight: FontWeight.w500),
+                          style: const TextStyle(color: textPrimary, fontSize: 15, fontWeight: FontWeight.bold),
                           maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                         ),
+                        const SizedBox(height: 2),
                         Text(
                           widget.download.artist,
-                          style: const TextStyle(color: textSecondary, fontSize: 10),
+                          style: const TextStyle(color: textSecondary, fontSize: 12),
                           maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                         ),
                       ],
                     ),
                   ),
-                  const SizedBox(width: 8),
-                  const Icon(Icons.check_circle_rounded, color: accentPrimary, size: 14),
+                  const SizedBox(width: 10),
+                  const Icon(Icons.check_circle_rounded, color: accentPrimary, size: 20),
                 ],
               ),
             ),

lib/screens/home_screen/home_collection_grid.dart

@@ -16,7 +16,9 @@ class HomeCollectionGrid extends StatelessWidget {
     final visibleItems = items.take(8).toList();
     final width = MediaQuery.of(context).size.width - 32;
     final isCompact = width < 380;
-    final bannerAspectRatio = isCompact ? 2.8 : 3.2;
+    // Current aspect ratio results in 4 rows taking space of 4 rows.
+    // To make 4 rows take space of 3 rows, we increase aspect ratio by 4/3.
+    final bannerAspectRatio = isCompact ? (2.8 * 4 / 3) : (3.2 * 4 / 3);
 
     return GridView.builder(
       shrinkWrap: true,
@@ -25,7 +27,7 @@ class HomeCollectionGrid extends StatelessWidget {
       gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: 2,
         crossAxisSpacing: 8,
-        mainAxisSpacing: 8,
+        mainAxisSpacing: 6, // Slightly reduced spacing
         childAspectRatio: bannerAspectRatio,
       ),
       itemBuilder: (context, index) {

lib/screens/home_screen/home_screen.dart

@@ -21,10 +21,14 @@ class HomeScreen extends ConsumerWidget {
     super.key,
     required this.onViewMore,
     required this.onOpenMenu,
+    required this.onDownloadsTap,
+    required this.onSettingsTap,
   });
 
   final VoidCallback onViewMore;
   final VoidCallback onOpenMenu;
+  final VoidCallback onDownloadsTap;
+  final VoidCallback onSettingsTap;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -62,6 +66,8 @@ class HomeScreen extends ConsumerWidget {
             final children = <Widget>[
               HomeTopBar(
                 onProfileTap: onOpenMenu,
+                onDownloadsTap: onDownloadsTap,
+                onSettingsTap: onSettingsTap,
                 displayName: displayName,
                 profileImage: profileImage,
               ),

lib/screens/home_screen/home_top_bar.dart

@@ -8,18 +8,22 @@ class HomeTopBar extends StatelessWidget {
   const HomeTopBar({
     super.key,
     required this.onProfileTap,
+    required this.onDownloadsTap,
+    required this.onSettingsTap,
     required this.displayName,
     required this.profileImage,
   });
 
   final VoidCallback onProfileTap;
+  final VoidCallback onDownloadsTap;
+  final VoidCallback onSettingsTap;
   final String displayName;
   final ProfileImageState profileImage;
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.fromLTRB(16, 14, 16, 2),
+      padding: const EdgeInsets.fromLTRB(16, 14, 8, 2),
       decoration: BoxDecoration(
         gradient: LinearGradient(
           begin: Alignment.topCenter,
@@ -68,8 +72,23 @@ class HomeTopBar extends StatelessWidget {
                     fontSize: 22,
                     letterSpacing: 0,
                   ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
             ),
           ),
+          const SizedBox(width: 4),
+          IconButton(
+            onPressed: onDownloadsTap,
+            icon: const Icon(Icons.download_rounded, size: 24),
+            color: textPrimary,
+            tooltip: 'Downloads',
+          ),
+          IconButton(
+            onPressed: onSettingsTap,
+            icon: const Icon(Icons.tune_rounded, size: 24),
+            color: textPrimary,
+            tooltip: 'Settings',
+          ),
         ],
       ),
     );