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

app/screens/LibraryPlaylists.tsx

@@ -1,36 +1,24 @@
-import CoverArt from '@app/components/CoverArt'
 import GradientFlatList from '@app/components/GradientFlatList'
-import PressableOpacity from '@app/components/PressableOpacity'
+import ListItem from '@app/components/ListItem'
 import { PlaylistListItem } from '@app/models/music'
 import { playlistsAtom, playlistsUpdatingAtom, useUpdatePlaylists } 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, View } from 'react-native'
+import { StyleSheet } from 'react-native'
 
 const PlaylistItem = React.memo<{ item: PlaylistListItem }>(({ item }) => {
   const navigation = useNavigation()
 
   return (
-    <PressableOpacity
-      style={styles.item}
-      onPress={() => navigation.navigate('PlaylistView', { id: item.id, title: item.name })}>
-      <CoverArt coverArtUri={item.coverArtThumbUri} style={styles.art} />
-      <View style={styles.text}>
-        <Text style={styles.title} numberOfLines={1}>
-          {item.name}
-        </Text>
-        {item.comment ? (
-          <Text style={styles.subtitle} numberOfLines={1}>
-            {item.comment}
-          </Text>
-        ) : (
-          <></>
-        )}
-      </View>
-    </PressableOpacity>
+    <ListItem
+      item={item}
+      showArt={true}
+      showStar={false}
+      listStyle="big"
+      subtitle={item.comment}
+      onPress={() => navigation.navigate('PlaylistView', { id: item.id, title: item.name })}
+    />
   )
 })
 
@@ -63,30 +51,8 @@ const PlaylistsList = () => {
 const styles = StyleSheet.create({
   listContent: {
     minHeight: '100%',
-  },
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    marginVertical: 6,
-    marginLeft: 10,
-  },
-  text: {
-    marginLeft: 10,
-  },
-  title: {
-    fontFamily: font.semiBold,
-    fontSize: 16,
-    color: colors.text.primary,
-  },
-  subtitle: {
-    fontFamily: font.regular,
-    fontSize: 14,
-    color: colors.text.secondary,
-  },
-  art: {
-    height: 70,
-    width: 70,
+    paddingHorizontal: 10,
+    paddingTop: 6,
   },
 })