From 306c34a32aedd8535cc563788e5e2171ee795c40 Mon Sep 17 00:00:00 2001 From: zarzet Date: Mon, 13 Jul 2026 21:31:20 +0700 Subject: [PATCH] style(ui): unify header meta rows on the dot-separated album style Track metadata, playlist, and library folder headers dropped their pill badges for the same HeaderMetaRow/HeaderMetaItem used by the album screen. --- lib/screens/library_tracks_folder_screen.dart | 28 +--- lib/screens/playlist_screen.dart | 28 +--- lib/screens/track_metadata_cards.dart | 127 ++---------------- lib/screens/track_metadata_screen.dart | 2 + 4 files changed, 28 insertions(+), 157 deletions(-) diff --git a/lib/screens/library_tracks_folder_screen.dart b/lib/screens/library_tracks_folder_screen.dart index 0dbe4150..e7c70184 100644 --- a/lib/screens/library_tracks_folder_screen.dart +++ b/lib/screens/library_tracks_folder_screen.dart @@ -527,27 +527,13 @@ class _LibraryTracksFolderScreenState return squarePlaceholder(); }, meta: entries.isNotEmpty - ? Container( - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), - decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(20), - ), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Icon(_modeIcon(), size: 14, color: Colors.white), - const SizedBox(width: 4), - Text( - context.l10n.tracksCount(entries.length), - style: const TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 12, - ), - ), - ], - ), + ? HeaderMetaRow( + items: [ + HeaderMetaItem( + context.l10n.tracksCount(entries.length), + icon: _modeIcon(), + ), + ], ) : null, actions: entries.isNotEmpty diff --git a/lib/screens/playlist_screen.dart b/lib/screens/playlist_screen.dart index 04c5dfa3..7bc247cd 100644 --- a/lib/screens/playlist_screen.dart +++ b/lib/screens/playlist_screen.dart @@ -235,27 +235,13 @@ class _PlaylistScreenState extends ConsumerState errorWidget: (_, _, _) => playlistPlaceholder(size: 48), ) : playlistPlaceholder(size: 48), - meta: Container( - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), - decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(20), - ), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - const Icon(Icons.playlist_play, size: 14, color: Colors.white), - const SizedBox(width: 4), - Text( - context.l10n.tracksCount(_tracks.length), - style: const TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 12, - ), - ), - ], - ), + meta: HeaderMetaRow( + items: [ + HeaderMetaItem( + context.l10n.tracksCount(_tracks.length), + icon: Icons.playlist_play, + ), + ], ), actions: Row( mainAxisAlignment: MainAxisAlignment.center, diff --git a/lib/screens/track_metadata_cards.dart b/lib/screens/track_metadata_cards.dart index 96cd4db6..6573e6c4 100644 --- a/lib/screens/track_metadata_cards.dart +++ b/lib/screens/track_metadata_cards.dart @@ -219,128 +219,25 @@ extension _TrackMetadataCards on _TrackMetadataScreenState { overflow: TextOverflow.ellipsis, ), const SizedBox(height: 12), - Wrap( - alignment: WrapAlignment.center, - spacing: 8, - runSpacing: 8, - children: [ + HeaderMetaRow( + items: [ if (_displayAudioQuality != null && _displayAudioQuality!.isNotEmpty) - Container( - padding: const EdgeInsets.symmetric( - horizontal: 12, - vertical: 6, - ), - decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(20), - ), - child: Text( - _displayAudioQuality!, - style: const TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 12, - ), - ), - ), - if (duration != null) - Container( - padding: const EdgeInsets.symmetric( - horizontal: 12, - vertical: 6, - ), - decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(20), - ), - child: Text( - formatClock(duration!), - style: const TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 12, - ), - ), - ), + HeaderMetaItem(_displayAudioQuality!), + if (duration != null) HeaderMetaItem(formatClock(duration!)), if (_service != 'local') - Container( - padding: const EdgeInsets.symmetric( - horizontal: 12, - vertical: 6, - ), - decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(20), - ), - child: Text( - _service[0].toUpperCase() + _service.substring(1), - style: const TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 12, - ), - ), + HeaderMetaItem( + _service[0].toUpperCase() + _service.substring(1), ) else - Container( - padding: const EdgeInsets.symmetric( - horizontal: 12, - vertical: 6, - ), - decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(20), - ), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - const Icon( - Icons.folder, - size: 14, - color: Colors.white, - ), - const SizedBox(width: 4), - Text( - context.l10n.librarySourceLocal, - style: TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 12, - ), - ), - ], - ), + HeaderMetaItem( + context.l10n.librarySourceLocal, + icon: Icons.folder, ), if (_hasCheckedFile && !_fileExists) - Container( - padding: const EdgeInsets.symmetric( - horizontal: 12, - vertical: 6, - ), - decoration: BoxDecoration( - color: Colors.red.withValues(alpha: 0.6), - borderRadius: BorderRadius.circular(20), - ), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - const Icon( - Icons.warning_rounded, - size: 14, - color: Colors.white, - ), - const SizedBox(width: 4), - Text( - context.l10n.trackFileNotFound, - style: const TextStyle( - color: Colors.white, - fontWeight: FontWeight.w600, - fontSize: 12, - ), - ), - ], - ), + HeaderMetaItem( + context.l10n.trackFileNotFound, + icon: Icons.warning_rounded, ), ], ), diff --git a/lib/screens/track_metadata_screen.dart b/lib/screens/track_metadata_screen.dart index 327f20e4..55e03abb 100644 --- a/lib/screens/track_metadata_screen.dart +++ b/lib/screens/track_metadata_screen.dart @@ -29,6 +29,8 @@ import 'package:spotiflac_android/utils/image_cache_utils.dart'; import 'package:spotiflac_android/utils/string_utils.dart'; import 'package:spotiflac_android/utils/int_utils.dart'; import 'package:spotiflac_android/utils/nav_bar_inset.dart'; +import 'package:spotiflac_android/widgets/album_detail_header.dart' + show HeaderMetaRow, HeaderMetaItem; import 'package:spotiflac_android/widgets/audio_analysis_widget.dart'; import 'package:spotiflac_android/widgets/batch_convert_sheet.dart'; import 'package:spotiflac_android/widgets/cached_cover_image.dart';