mirror of
https://github.com/KRTirtho/spotube.git
synced 2026-11-04 10:13:59 +00:00
8a193658af
- Add Spotify design system (colors, typography, ThemeData, components) - Build Spotify shell (Sidebar, TopBar, BottomPlayer, ContentArea) - Redesign Home, Search, Library pages with Spotify cards/track rows - Restyle context menus, shimmer loaders, hover states - Rebrand app name to Spotify across Android/iOS/macOS/Linux/Windows - Update launcher icons and splash config to Spotify logo No backend/API/state/audio logic changed.
103 lines
3.7 KiB
Dart
103 lines
3.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
import 'package:shadcn_flutter/shadcn_flutter.dart';
|
|
import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
|
|
import 'package:skeletonizer/skeletonizer.dart';
|
|
import 'package:spotube/collections/fake.dart';
|
|
import 'package:spotube/components/fallbacks/error_box.dart';
|
|
import 'package:spotube/components/waypoint.dart';
|
|
import 'package:spotube/extensions/constrains.dart';
|
|
import 'package:spotube/extensions/context.dart';
|
|
import 'package:spotube/modules/artist/artist_card.dart';
|
|
import 'package:spotube/modules/search/loading.dart';
|
|
import 'package:spotube/pages/search/search.dart';
|
|
import 'package:spotube/provider/metadata_plugin/search/artists.dart';
|
|
import 'package:spotube/theme/spotify_colors.dart';
|
|
|
|
class SearchPageArtistsTab extends HookConsumerWidget {
|
|
const SearchPageArtistsTab({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context, ref) {
|
|
final controller = useScrollController();
|
|
|
|
final searchTerm = ref.watch(searchTermStateProvider);
|
|
final searchArtistsSnapshot =
|
|
ref.watch(metadataPluginSearchArtistsProvider(searchTerm));
|
|
final searchArtistsNotifier =
|
|
ref.read(metadataPluginSearchArtistsProvider(searchTerm).notifier);
|
|
final searchArtists = searchArtistsSnapshot.asData?.value.items ?? [];
|
|
|
|
if (searchArtistsSnapshot.hasError) {
|
|
return ErrorBox(
|
|
error: searchArtistsSnapshot.error!,
|
|
onRetry: () {
|
|
ref.invalidate(metadataPluginSearchArtistsProvider(searchTerm));
|
|
},
|
|
);
|
|
}
|
|
|
|
return SearchPlaceholder(
|
|
snapshot: searchArtistsSnapshot,
|
|
child: AnimatedSwitcher(
|
|
duration: const Duration(milliseconds: 300),
|
|
child: LayoutBuilder(builder: (context, constrains) {
|
|
if (searchArtistsSnapshot.hasValue && searchArtists.isEmpty) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
spacing: 10,
|
|
children: [
|
|
const SizedBox(height: 40),
|
|
Text(
|
|
context.l10n.nothing_found,
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
color: SpotifyColors.secondaryText,
|
|
fontSize: 16,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
return GridView.builder(
|
|
padding: const EdgeInsets.all(16),
|
|
itemCount: searchArtists.length + 1,
|
|
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
|
|
maxCrossAxisExtent: 160,
|
|
mainAxisExtent: constrains.smAndDown ? 200 : 220,
|
|
crossAxisSpacing: 12,
|
|
mainAxisSpacing: 12,
|
|
),
|
|
itemBuilder: (context, index) {
|
|
if (searchArtists.isNotEmpty && index == searchArtists.length) {
|
|
if (searchArtistsSnapshot.asData?.value.hasMore != true) {
|
|
return const SizedBox.shrink();
|
|
}
|
|
|
|
return Waypoint(
|
|
controller: controller,
|
|
isGrid: true,
|
|
onTouchEdge: searchArtistsNotifier.fetchMore,
|
|
child: const SpotifyShimmerTrack(),
|
|
);
|
|
}
|
|
|
|
return Skeletonizer(
|
|
enabled: searchArtistsSnapshot.isLoading,
|
|
child: ArtistCard(
|
|
searchArtists.elementAtOrNull(index) ?? FakeData.artist,
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}),
|
|
),
|
|
);
|
|
}
|
|
}
|