big ol' impl of zustand for settings/family states

still need to move track player state over for non-react access to that

app/components/CoverArt.tsx

@@ -1,6 +1,5 @@
-import { artistInfoAtomFamily, useCoverArtUri } from '@app/state/music'
+import { useArtistInfo, useCoverArtUri } from '@app/hooks/music'
 import colors from '@app/styles/colors'
-import { useAtomValue } from 'jotai/utils'
 import React, { useEffect, useState } from 'react'
 import { ActivityIndicator, StyleSheet, View, ViewStyle } from 'react-native'
 import FastImage, { ImageStyle } from 'react-native-fast-image'
@@ -32,9 +31,23 @@ type CoverArtImageProps = BaseImageProps & CoverArtProp
 
 type CoverArtProps = BaseProps & CoverArtProp & Partial<ArtistIdProp>
 
-const ArtistIdImageLoaded = React.memo<ArtistIdImageProps>(
+const ArtistImageFallback: React.FC<{
+  enableLoading: () => void
+}> = ({ enableLoading }) => {
+  useEffect(() => {
+    enableLoading()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  return <></>
+}
+
+const ArtistImage = React.memo<ArtistIdImageProps>(
   ({ artistId, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading, fallbackError }) => {
-    const artistInfo = useAtomValue(artistInfoAtomFamily(artistId))
+    const artistInfo = useArtistInfo(artistId)
+
+    if (!artistInfo) {
+      return <ArtistImageFallback enableLoading={enableLoading} />
+    }
 
     const uri = imageSize === 'thumbnail' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
 
@@ -51,24 +64,6 @@ const ArtistIdImageLoaded = React.memo<ArtistIdImageProps>(
   },
 )
 
-const ArtistIdImageFallback: React.FC<{
-  enableLoading: () => void
-}> = ({ enableLoading }) => {
-  useEffect(() => {
-    enableLoading()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  return <></>
-}
-
-const ArtistIdImage = React.memo<ArtistIdImageProps>(props => {
-  return (
-    <React.Suspense fallback={<ArtistIdImageFallback enableLoading={props.enableLoading} />}>
-      <ArtistIdImageLoaded {...props} />
-    </React.Suspense>
-  )
-})
-
 const CoverArtImage = React.memo<CoverArtImageProps>(
   ({ coverArt, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading, fallbackError }) => {
     const coverArtUri = useCoverArtUri()
@@ -108,7 +103,7 @@ const CoverArt: React.FC<CoverArtProps> = ({ coverArt, artistId, resizeMode, ima
   let ImageComponent
   if (artistId) {
     ImageComponent = (
-      <ArtistIdImage
+      <ArtistImage
         artistId={artistId}
         imageSize={imageSize}
         style={style}

app/components/ListPlayerControls.tsx

@@ -3,7 +3,7 @@ import { Song } from '@app/models/music'
 import { useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
-import { StyleSheet, View, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import Icon from 'react-native-vector-icons/Ionicons'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
 
@@ -11,7 +11,7 @@ const ListPlayerControls = React.memo<{
   songs: Song[]
   typeName: string
   queueName: string
-  style?: ViewStyle
+  style?: StyleProp<ViewStyle>
 }>(({ songs, typeName, queueName, style }) => {
   const [downloaded, setDownloaded] = useState(false)
   const setQueue = useSetQueue()