grid and list view customizability

src/components/library/AlbumRow.tsx

@@ -15,7 +15,7 @@ import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { albumArtworkSource } from '@/library/artwork';
 import type { Album } from '@/types/library';
 
-/** Compact album list row (search results) — the grid uses AlbumGridItem. */
+/** Compact album list row for library browsing and search results. */
 export function AlbumRow({ album, onPress }: { album: Album; onPress: () => void }) {
   const styles = useStyles();
   const colors = useColors();
@@ -29,6 +29,8 @@ export function AlbumRow({ album, onPress }: { album: Album; onPress: () => void
             source={{ uri: artUri }}
             style={styles.artImage}
             contentFit="cover"
+            recyclingKey={album.identity_key}
+            transition={null}
           />
         ) : (
           <Ionicons name="disc-outline" size={20} color={colors.textTertiary} />

src/components/library/ArtistGridItem.tsx

@@ -15,7 +15,7 @@ import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { artworkUri } from '@/library/artwork';
 import type { Artist } from '@/types/library';
 
-/** 2-column grid cell: square art (2x2 album mosaic when available) + counts, matching the album grid. */
+/** Resizable grid cell: square art (2x2 album mosaic when available) + counts. */
 export function ArtistGridItem({ artist, onPress }: { artist: Artist; onPress: () => void }) {
   const styles = useStyles();
   const colors = useColors();

src/components/library/ArtistRow.tsx

@@ -19,6 +19,8 @@ export function ArtistRow({ artist, onPress }: { artist: Artist; onPress: () =>
   const styles = useStyles();
   const colors = useColors();
   const ripple = useRipple();
+  const albums = `${artist.album_count} ${artist.album_count === 1 ? 'album' : 'albums'}`;
+  const tracks = `${artist.track_count} ${artist.track_count === 1 ? 'track' : 'tracks'}`;
   return (
     <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.row} onPress={onPress} accessibilityRole="button">
       <View style={styles.art}>
@@ -27,6 +29,8 @@ export function ArtistRow({ artist, onPress }: { artist: Artist; onPress: () =>
             source={{ uri: artworkUri(artist.artwork_hash) }}
             style={styles.artImage}
             contentFit="cover"
+            recyclingKey={artist.artist}
+            transition={null}
           />
         ) : (
           <Ionicons name="person" size={20} color={colors.textTertiary} />
@@ -36,8 +40,8 @@ export function ArtistRow({ artist, onPress }: { artist: Artist; onPress: () =>
         <Text variant="body" numberOfLines={1}>
           {artist.artist}
         </Text>
-        <Text variant="label">
-          {artist.track_count} {artist.track_count === 1 ? 'track' : 'tracks'}
+        <Text variant="label" numberOfLines={1}>
+          {albums} · {tracks}
         </Text>
       </View>
       <Ionicons name="chevron-forward" size={16} color={colors.textTertiary} />