home screen first pass

app/screens/LibraryAlbums.tsx

@@ -1,7 +1,7 @@
 import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native'
 import { Album } from '@app/models/music'
 import { albumsAtom, albumsUpdatingAtom, useUpdateAlbums } from '@app/state/music'
 import font from '@app/styles/font'
@@ -12,15 +12,19 @@ import colors from '@app/styles/colors'
 const AlbumItem: React.FC<{
   id: string
   name: string
+  size: number
+  height: number
   artist?: string
-}> = ({ id, name, artist }) => {
+}> = ({ id, name, artist, size, height }) => {
   const navigation = useNavigation()
 
   return (
-    <Pressable style={styles.item} onPress={() => navigation.navigate('AlbumView', { id, title: name })}>
-      <AlbumArt id={id} height={styles.art.height} width={styles.art.height} />
+    <Pressable
+      style={[styles.item, { maxWidth: size, height }]}
+      onPress={() => navigation.navigate('AlbumView', { id, title: name })}>
+      <AlbumArt id={id} height={size} width={size} />
       <View style={styles.itemDetails}>
-        <Text style={styles.title} numberOfLines={2}>
+        <Text style={styles.title} numberOfLines={1}>
           {name}
         </Text>
         <Text style={styles.subtitle} numberOfLines={1}>
@@ -32,16 +36,28 @@ const AlbumItem: React.FC<{
 }
 const MemoAlbumItem = React.memo(AlbumItem)
 
-const AlbumListRenderItem: React.FC<{ item: Album }> = ({ item }) => (
-  <MemoAlbumItem id={item.id} name={item.name} artist={item.artist} />
+const AlbumListRenderItem: React.FC<{
+  item: { album: Album; size: number; height: number }
+}> = ({ item }) => (
+  <MemoAlbumItem
+    id={item.album.id}
+    name={item.album.name}
+    artist={item.album.artist}
+    size={item.size}
+    height={item.height}
+  />
 )
 
 const AlbumsList = () => {
   const albums = useAtomValue(albumsAtom)
   const updating = useAtomValue(albumsUpdatingAtom)
   const updateAlbums = useUpdateAlbums()
+  const layout = useWindowDimensions()
 
-  const albumsList = Object.values(albums)
+  const size = layout.width / 3 - styles.item.marginHorizontal * 2
+  const height = size + 44
+
+  const albumsList = Object.values(albums).map(album => ({ album, size, height }))
 
   useEffect(() => {
     if (albumsList.length === 0) {
@@ -54,12 +70,17 @@ const AlbumsList = () => {
       <GradientFlatList
         data={albumsList}
         renderItem={AlbumListRenderItem}
-        keyExtractor={item => item.id}
+        keyExtractor={item => item.album.id}
         numColumns={3}
         removeClippedSubviews={true}
         refreshing={updating}
         onRefresh={updateAlbums}
         overScrollMode="never"
+        getItemLayout={(_data, index) => ({
+          length: height,
+          offset: height * Math.floor(index / 3),
+          index,
+        })}
       />
     </View>
   )
@@ -77,24 +98,27 @@ const styles = StyleSheet.create({
   },
   item: {
     alignItems: 'center',
-    marginVertical: 8,
+    marginVertical: 4,
+    marginHorizontal: 2,
     flex: 1 / 3,
+    // backgroundColor: 'green',
   },
   art: {
-    height: 125,
+    // height: 125,
   },
   itemDetails: {
     flex: 1,
-    width: 125,
+    width: '100%',
+    // width: 125,
   },
   title: {
-    fontSize: 13,
+    fontSize: 12,
     fontFamily: font.semiBold,
     color: colors.text.primary,
     marginTop: 4,
   },
   subtitle: {
-    fontSize: 12,
+    fontSize: 11,
     fontFamily: font.regular,
     color: colors.text.secondary,
   },