Library store refactor (#76)

* start of music store refactor

moving stuff into a state cache
better separate it from view logic

* added paginated list/album list

* reworked fetchAlbumList to remove ui state

refactored home screen to use new method
i broke playing songs somehow, JS thread goes into a loop

* don't reset parts manually, do it all at once

* fixed perf issue related to too many rerenders

rerenders were caused by strict equality check on object/array picks
switched artistInfo to new store
updated zustand and fixed deprecation warnings

* update typescript

and use workspace tsc version for vscode

* remove old artistInfo

* switched to new playlist w/songs

removed more unused stuff

* remove unused + (slightly) rework search

* refactor star

* use only original/large imges for covers/artist

fix view artist from context menu
add loading indicators to song list and artist views (show info we have right away)

* set starred/unstar assuming it works

and correct state on error

* reorg, remove old music slice files

* added back fix for song cover art

* sort artists by localCompare name

* update licenses

* fix now playing background grey bar

* update react-native-gesture-handler

for node-fetch security alert

* fix another gradient height grey bar issue

* update licenses again

* remove thumbnail cache

* rename to remove "Library" from methods

* Revert "remove thumbnail cache"

This reverts commit e0db4931f1.

* use ids for lists, pull state later

* Revert "use only original/large imges for covers/artist"

This reverts commit c9aea9065c.

* deep equal ListItem props for now

this needs a bigger refactor

* use immer as middleware

* refactor api client to use string method

hoping to use this for requestKey/deduping next

* use thumbnails in list items

* Revert "refactor api client to use string method"

This reverts commit 234326135b.

* rename/cleanup

* store servers by id

* get rid of settings selectors

* renames for clarity

remove unused estimateContentLength setting

* remove trackplayer selectors

* fix migration for library filter settings

* fixed shuffle order reporting wrong track/queue

* removed the other selectors

* don't actually need es6/react for our state

* fix slow artist sort on star

localeCompare is too slow for large lists

app/components/ListItem.tsx

@@ -1,8 +1,5 @@
-import { useStarred } from '@app/hooks/music'
 import { useIsPlaying } from '@app/hooks/trackplayer'
-import { AlbumListItem, Artist, ListableItem, Song } from '@app/models/music'
-import { selectMusic } from '@app/state/music'
-import { useStore } from '@app/state/store'
+import { Album, Artist, ListableItem, Song } from '@app/models/library'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
@@ -13,7 +10,8 @@ import IconMat from 'react-native-vector-icons/MaterialIcons'
 import { AlbumContextPressable, ArtistContextPressable, SongContextPressable } from './ContextMenu'
 import CoverArt from './CoverArt'
 import PressableOpacity from './PressableOpacity'
-import Star from './Star'
+import { PressableStar } from './Star'
+import equal from 'fast-deep-equal/es6/react'
 
 const TitleTextSong = React.memo<{
   contextId?: string
@@ -58,7 +56,6 @@ const ListItem: React.FC<{
   style?: StyleProp<ViewStyle>
 }> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style }) => {
   const navigation = useNavigation()
-  const starred = useStarred(item.id, item.itemType)
 
   showStar = showStar === undefined ? true : showStar
   listStyle = listStyle || 'small'
@@ -101,7 +98,7 @@ const ListItem: React.FC<{
   )
   const albumPressable = useCallback(
     ({ children }) => (
-      <AlbumContextPressable album={item as AlbumListItem} onPress={onPress} triggerWrapperStyle={styles.item}>
+      <AlbumContextPressable album={item as Album} onPress={onPress} triggerWrapperStyle={styles.item}>
         {children}
       </AlbumContextPressable>
     ),
@@ -133,13 +130,6 @@ const ListItem: React.FC<{
     PressableComponent = artistPressable
   }
 
-  const starItem = useStore(selectMusic.starItem)
-  const toggleStarred = useCallback(() => {
-    if (item.itemType !== 'playlist') {
-      starItem(item.id, item.itemType, starred)
-    }
-  }, [item.id, item.itemType, starItem, starred])
-
   let title = <></>
   if (item.itemType === 'song' && queueId !== undefined) {
     title = <TitleTextSong contextId={contextId} queueId={queueId} title={item.title} />
@@ -151,9 +141,20 @@ const ListItem: React.FC<{
   const resizeMode = 'cover'
   let coverArt = <></>
   if (item.itemType === 'artist') {
-    coverArt = <CoverArt type="artist" artistId={item.id} round={true} style={artStyle} resizeMode={resizeMode} />
+    coverArt = (
+      <CoverArt
+        type="artist"
+        artistId={item.id}
+        round={true}
+        style={artStyle}
+        resizeMode={resizeMode}
+        size="thumbnail"
+      />
+    )
   } else {
-    coverArt = <CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} />
+    coverArt = (
+      <CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} size="thumbnail" />
+    )
   }
 
   return (
@@ -178,10 +179,8 @@ const ListItem: React.FC<{
         </View>
       </PressableComponent>
       <View style={styles.controls}>
-        {showStar && (
-          <PressableOpacity onPress={toggleStarred} style={styles.controlItem}>
-            <Star size={26} starred={starred} />
-          </PressableOpacity>
+        {showStar && item.itemType !== 'playlist' && (
+          <PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} />
         )}
       </View>
     </View>
@@ -259,4 +258,4 @@ const bigStyles = StyleSheet.create({
   },
 })
 
-export default React.memo(ListItem)
+export default React.memo(ListItem, equal)