home screen first pass

app/screens/Home.tsx

@@ -0,0 +1,115 @@
+import CoverArt from '@app/components/CoverArt'
+import GradientScrollView from '@app/components/GradientScrollView'
+import PressableOpacity from '@app/components/PressableOpacity'
+import { albumLists } from '@app/state/music'
+import colors from '@app/styles/colors'
+import font from '@app/styles/font'
+import { useNavigation } from '@react-navigation/native'
+import { useAtomValue } from 'jotai/utils'
+import React from 'react'
+import { ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
+
+const Category: React.FC<{
+  name: string
+  stateKey: string
+}> = ({ name, stateKey }) => {
+  const navigation = useNavigation()
+
+  const state = albumLists[stateKey]
+  const list = useAtomValue(state.listAtom)
+  const updating = useAtomValue(state.updatingAtom)
+  const updateList = state.useUpdateList()
+
+  return (
+    <View style={[styles.category, { backgroundColor: updating ? 'transparent' : 'transparent' }]}>
+      <PressableOpacity onPress={updateList} style={{ alignItems: 'flex-start' }}>
+        <Text style={styles.header}>{name}</Text>
+      </PressableOpacity>
+      <ScrollView
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+        style={styles.artScroll}
+        contentContainerStyle={styles.artScrollContent}>
+        {list.map(album => (
+          <PressableOpacity
+            onPress={() => navigation.navigate('AlbumView', { id: album.id, title: album.name })}
+            unstable_pressDelay={50}
+            key={album.id}
+            style={styles.item}>
+            <CoverArt
+              PlaceholderComponent={() => <></>}
+              coverArtUri={album.coverArtThumbUri}
+              height={styles.item.width}
+              width={styles.item.width}
+            />
+            <Text style={styles.title} numberOfLines={1}>
+              {album.name}
+            </Text>
+            <Text style={styles.subtitle} numberOfLines={1}>
+              {album.artist}
+            </Text>
+          </PressableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  )
+}
+
+const Home = () => (
+  <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
+    <View style={styles.content}>
+      <Category name="Random Albums" stateKey="random" />
+      <Category name="Newest Albums" stateKey="newest" />
+      <Category name="Recent Albums" stateKey="recent" />
+      <Category name="Frequent Albums" stateKey="frequent" />
+      <Category name="Starred Albums" stateKey="starred" />
+    </View>
+  </GradientScrollView>
+)
+
+const styles = StyleSheet.create({
+  scroll: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    paddingTop: StatusBar.currentHeight,
+  },
+  content: {
+    paddingBottom: 20,
+  },
+  category: {
+    marginTop: 12,
+  },
+  header: {
+    fontFamily: font.bold,
+    fontSize: 24,
+    color: colors.text.primary,
+    paddingHorizontal: 20,
+    marginTop: 4,
+  },
+  artScroll: {
+    marginTop: 10,
+    height: 190,
+  },
+  artScrollContent: {
+    paddingLeft: 20,
+  },
+  item: {
+    marginRight: 10,
+    width: 150,
+    alignItems: 'flex-start',
+  },
+  title: {
+    fontFamily: font.semiBold,
+    fontSize: 13,
+    color: colors.text.primary,
+    marginTop: 4,
+  },
+  subtitle: {
+    fontFamily: font.regular,
+    fontSize: 12,
+    color: colors.text.secondary,
+  },
+})
+
+export default Home

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,
   },