feat(flutter): home screen on per-item rendering (Slice C)
End-to-end pilot of the per-item architecture. Home now reads from the new homeIndexProvider (drift-first over CachedHomeIndex with /api/home/index discovery + SWR), then each tile is a small ConsumerWidget watching its own albumTileProvider/artistTileProvider/ trackTileProvider. Tiles render a matched-dimension skeleton while their entity is still hydrating, and swap in the real card once drift emits the populated row. Track hydration is wired up — /api/tracks/:id already existed so the queue's case 'track' just calls api.getTrack(id) and persists. The visible behavior: * Cold visit: small /api/home/index round-trip (IDs only, ~10× smaller than /api/home), then sections appear shaped with skeleton tiles; each tile materializes as the hydration queue drains. No more "30s blank → everything pops in at once." * Warm visit: drift index emits instantly, drift entity rows emit instantly, no network. Page paints fully in the first frame. * Mid-state: scrolling through a partially-hydrated section sees real cards next to skeleton cards. Layout doesn't shift because skeletons match real-card dimensions exactly. CachedHomeSnapshot (and the legacy homeProvider) stay in place but unconsumed by Flutter — left in for now so revert is cheap if the new path needs reworking. Cleanup follow-up in a later slice. Old /api/home endpoint untouched, so the web client keeps working unchanged.
This commit is contained in:
@@ -17,6 +17,7 @@ import '../cache/db.dart';
|
||||
import '../models/album.dart';
|
||||
import '../models/artist.dart';
|
||||
import '../models/home_data.dart';
|
||||
import '../models/home_index.dart';
|
||||
import '../models/track.dart';
|
||||
|
||||
/// Shared authenticated dio. This is the ONLY place tokenResolver is wired
|
||||
@@ -94,6 +95,95 @@ final homeProvider = StreamProvider<HomeData>((ref) {
|
||||
);
|
||||
});
|
||||
|
||||
/// Drift-first per-item home index. Reads from cached_home_index
|
||||
/// (populated by /api/home/index discovery) and yields a HomeIndex
|
||||
/// the screen consumes to lay out section→tile slots. Each tile is
|
||||
/// rendered by a per-entity tile provider that hydrates itself.
|
||||
///
|
||||
/// Section keys mirror the server's response shape so the encode /
|
||||
/// decode round-trip is straightforward — the table stores
|
||||
/// (section, position, entityType, entityId), and toResult reassembles
|
||||
/// the parallel ID lists.
|
||||
final homeIndexProvider = StreamProvider<HomeIndex>((ref) {
|
||||
final db = ref.watch(appDbProvider);
|
||||
final query = (db.select(db.cachedHomeIndex)
|
||||
..orderBy([
|
||||
(t) => drift.OrderingTerm.asc(t.section),
|
||||
(t) => drift.OrderingTerm.asc(t.position),
|
||||
]))
|
||||
.watch();
|
||||
return cacheFirst<CachedHomeIndexData, HomeIndex>(
|
||||
driftStream: query,
|
||||
fetchAndPopulate: () async {
|
||||
final api = await ref.read(libraryApiProvider.future);
|
||||
final fresh = await api.getHomeIndex();
|
||||
// Full replace in a transaction so the watch() sees exactly one
|
||||
// post-fetch emission with the merged state. Section ordering is
|
||||
// re-asserted on read (orderBy above) so the write order doesn't
|
||||
// matter — letting us batch flat instead of section-by-section.
|
||||
await db.transaction(() async {
|
||||
await db.delete(db.cachedHomeIndex).go();
|
||||
await db.batch((b) {
|
||||
void rows(String section, String entityType, List<String> ids) {
|
||||
for (var i = 0; i < ids.length; i++) {
|
||||
b.insert(
|
||||
db.cachedHomeIndex,
|
||||
CachedHomeIndexCompanion.insert(
|
||||
section: section,
|
||||
position: i,
|
||||
entityType: entityType,
|
||||
entityId: ids[i],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
rows('recently_added_albums', 'album', fresh.recentlyAddedAlbums);
|
||||
rows('rediscover_albums', 'album', fresh.rediscoverAlbums);
|
||||
rows('rediscover_artists', 'artist', fresh.rediscoverArtists);
|
||||
rows('most_played_tracks', 'track', fresh.mostPlayedTracks);
|
||||
rows('last_played_artists', 'artist', fresh.lastPlayedArtists);
|
||||
});
|
||||
});
|
||||
},
|
||||
toResult: (rows) {
|
||||
final recentlyAddedAlbums = <String>[];
|
||||
final rediscoverAlbums = <String>[];
|
||||
final rediscoverArtists = <String>[];
|
||||
final mostPlayedTracks = <String>[];
|
||||
final lastPlayedArtists = <String>[];
|
||||
for (final r in rows) {
|
||||
switch (r.section) {
|
||||
case 'recently_added_albums':
|
||||
recentlyAddedAlbums.add(r.entityId);
|
||||
case 'rediscover_albums':
|
||||
rediscoverAlbums.add(r.entityId);
|
||||
case 'rediscover_artists':
|
||||
rediscoverArtists.add(r.entityId);
|
||||
case 'most_played_tracks':
|
||||
mostPlayedTracks.add(r.entityId);
|
||||
case 'last_played_artists':
|
||||
lastPlayedArtists.add(r.entityId);
|
||||
}
|
||||
}
|
||||
return HomeIndex(
|
||||
recentlyAddedAlbums: recentlyAddedAlbums,
|
||||
rediscoverAlbums: rediscoverAlbums,
|
||||
rediscoverArtists: rediscoverArtists,
|
||||
mostPlayedTracks: mostPlayedTracks,
|
||||
lastPlayedArtists: lastPlayedArtists,
|
||||
);
|
||||
},
|
||||
isOnline: () async => (await ref
|
||||
.read(connectivityProvider.future)
|
||||
.timeout(const Duration(seconds: 3), onTimeout: () => true)),
|
||||
// SWR: cached layout shows instantly; fresh /api/home/index lands
|
||||
// in the background and tiles re-resolve as the table mutates.
|
||||
alwaysRefresh: true,
|
||||
tag: 'homeIndex',
|
||||
);
|
||||
});
|
||||
|
||||
/// Encodes HomeData back to the wire-format JSON shape /api/home
|
||||
/// emits, so HomeData.fromJson can round-trip through the drift cache.
|
||||
String _encodeHomeData(HomeData h) => jsonEncode({
|
||||
|
||||
Reference in New Issue
Block a user