bvandeusen
3ac8cc9363
Mirrors the web equivalents at the same ~176dp width so the home Playlists row keeps visual rhythm whether the slot is filled with a real playlist or a placeholder. PlaylistPlaceholderCard variants: - building: spinner + "Building…" - failed: warning + "Couldn't generate" - seed-needed: muted icon + "Like more music" - pending: muted icon + "Coming soon" Used in the next commit's home Playlists row; otherwise unused this slice. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
65 lines
2.2 KiB
Dart
65 lines
2.2 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
|
|
import '../../models/playlist.dart';
|
|
import '../../shared/widgets/server_image.dart';
|
|
import '../../theme/theme_extension.dart';
|
|
|
|
/// Mirrors the web PlaylistCard. ~176dp wide, square cover (~144dp),
|
|
/// name + optional system-variant badge below. Tap pushes
|
|
/// /playlists/<id>.
|
|
class PlaylistCard extends StatelessWidget {
|
|
const PlaylistCard({super.key, required this.playlist});
|
|
|
|
final Playlist playlist;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final fs = Theme.of(context).extension<FabledSwordTheme>()!;
|
|
return SizedBox(
|
|
width: 176,
|
|
child: GestureDetector(
|
|
onTap: () => context.push('/playlists/${playlist.id}'),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(6),
|
|
child: Container(
|
|
width: 144,
|
|
height: 144,
|
|
color: fs.slate,
|
|
child: playlist.coverUrl.isEmpty
|
|
? Icon(Icons.queue_music, color: fs.ash, size: 56)
|
|
: ServerImage(url: playlist.coverUrl, fit: BoxFit.cover),
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
playlist.name,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(color: fs.parchment, fontSize: 14),
|
|
),
|
|
if (playlist.isSystem)
|
|
Padding(
|
|
padding: const EdgeInsets.only(top: 2),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
|
decoration: BoxDecoration(
|
|
color: fs.iron,
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
child: Text(
|
|
playlist.systemVariant!.replaceAll('_', ' '),
|
|
style: TextStyle(color: fs.accent, fontSize: 11),
|
|
),
|
|
),
|
|
),
|
|
]),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|