✨ User library

lib/widgets/playlist/playlist_tile.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:rhythm_box/widgets/auto_cache_image.dart';
+import 'package:spotify/spotify.dart';
+
+class PlaylistTile extends StatelessWidget {
+  final PlaylistSimple? item;
+
+  final Function? onTap;
+
+  const PlaylistTile({super.key, required this.item, this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: ClipRRect(
+        borderRadius: const BorderRadius.all(Radius.circular(8)),
+        child: (item?.images?.isNotEmpty ?? false)
+            ? AutoCacheImage(
+                item!.images!.first.url!,
+                width: 64.0,
+                height: 64.0,
+              )
+            : const SizedBox(
+                width: 64,
+                height: 64,
+                child: Center(
+                  child: Icon(Icons.image),
+                ),
+              ),
+      ),
+      title: Text(item?.name ?? 'Loading...'),
+      subtitle: Text(
+        item?.description ?? 'Please stand by...',
+        maxLines: 2,
+        overflow: TextOverflow.ellipsis,
+      ),
+      onTap: () {
+        if (onTap == null) return;
+        onTap!();
+      },
+    );
+  }
+}

lib/widgets/playlist/user_playlist_list.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:go_router/go_router.dart';
+import 'package:rhythm_box/providers/spotify.dart';
+import 'package:rhythm_box/widgets/playlist/playlist_tile.dart';
+import 'package:skeletonizer/skeletonizer.dart';
+import 'package:spotify/spotify.dart';
+
+class UserPlaylistList extends StatefulWidget {
+  const UserPlaylistList({super.key});
+
+  @override
+  State<UserPlaylistList> createState() => _UserPlaylistListState();
+}
+
+class _UserPlaylistListState extends State<UserPlaylistList> {
+  late final SpotifyProvider _spotify = Get.find();
+
+  PlaylistSimple get _userLikedPlaylist => PlaylistSimple()
+    ..name = 'Liked Music'
+    ..description = 'Your favorite music'
+    ..type = 'playlist'
+    ..collaborative = false
+    ..public = false
+    ..id = 'user-liked-tracks';
+
+  bool _isLoading = true;
+
+  List<PlaylistSimple>? _playlist;
+
+  Future<void> _pullPlaylist() async {
+    _playlist = [_userLikedPlaylist, ...await _spotify.api.playlists.me.all()];
+    setState(() => _isLoading = false);
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _pullPlaylist();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Skeletonizer(
+      enabled: _isLoading,
+      child: ListView.builder(
+        itemCount: _playlist?.length ?? 3,
+        itemBuilder: (context, idx) {
+          final item = _playlist?[idx];
+          return PlaylistTile(
+            item: item,
+            onTap: () {
+              if (item == null) return;
+              GoRouter.of(context).pushNamed(
+                'playlistView',
+                pathParameters: {'id': item.id!},
+              );
+            },
+          );
+        },
+      ),
+    );
+  }
+}