redid cover art (again...) and impl a ListItem

app/screens/LibraryArtists.tsx

@@ -1,25 +1,23 @@
-import ArtistArt from '@app/components/ArtistArt'
 import GradientFlatList from '@app/components/GradientFlatList'
-import PressableOpacity from '@app/components/PressableOpacity'
+import ListItem from '@app/components/ListItem'
 import { Artist } from '@app/models/music'
 import { artistsAtom, artistsUpdatingAtom, useUpdateArtists } 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, { useEffect } from 'react'
-import { StyleSheet, Text } from 'react-native'
+import { StyleSheet } from 'react-native'
 
 const ArtistItem = React.memo<{ item: Artist }>(({ item }) => {
   const navigation = useNavigation()
 
   return (
-    <PressableOpacity
-      style={styles.item}
-      onPress={() => navigation.navigate('ArtistView', { id: item.id, title: item.name })}>
-      <ArtistArt id={item.id} width={styles.art.width} height={styles.art.height} />
-      <Text style={styles.title}>{item.name}</Text>
-    </PressableOpacity>
+    <ListItem
+      item={item}
+      showArt={true}
+      showStar={false}
+      listStyle="big"
+      onPress={() => navigation.navigate('ArtistView', { id: item.id, title: item.name })}
+    />
   )
 })
 
@@ -52,23 +50,8 @@ const ArtistsList = () => {
 const styles = StyleSheet.create({
   listContent: {
     minHeight: '100%',
-  },
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    marginVertical: 6,
-    marginLeft: 10,
-  },
-  title: {
-    fontFamily: font.semiBold,
-    fontSize: 16,
-    color: colors.text.primary,
-    marginLeft: 10,
-  },
-  art: {
-    height: 70,
-    width: 70,
+    paddingHorizontal: 10,
+    paddingTop: 6,
   },
 })