reorg again, absolute (module) imports

app/screens/LibraryArtists.tsx

@@ -0,0 +1,69 @@
+import { useNavigation } from '@react-navigation/native'
+import { useAtomValue } from 'jotai/utils'
+import React, { useEffect } from 'react'
+import { Pressable } from 'react-native'
+import { Text } from 'react-native'
+import { Artist } from '@app/models/music'
+import { artistsAtom, artistsUpdatingAtom, useUpdateArtists } from '@app/state/music'
+import textStyles from '@app/styles/text'
+import ArtistArt from '@app/components/ArtistArt'
+import GradientFlatList from '@app/components/GradientFlatList'
+
+const ArtistItem: React.FC<{ item: Artist }> = ({ item }) => {
+  const navigation = useNavigation()
+
+  return (
+    <Pressable
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginVertical: 6,
+        marginLeft: 6,
+      }}
+      onPress={() => navigation.navigate('ArtistView', { id: item.id, title: item.name })}>
+      <ArtistArt id={item.id} width={56} height={56} />
+      <Text
+        style={{
+          ...textStyles.paragraph,
+          marginLeft: 12,
+        }}>
+        {item.name}
+      </Text>
+    </Pressable>
+  )
+}
+
+const ArtistItemLoader: React.FC<{ item: Artist }> = props => (
+  <React.Suspense fallback={<Text>Loading...</Text>}>
+    <ArtistItem {...props} />
+  </React.Suspense>
+)
+
+const ArtistsList = () => {
+  const artists = useAtomValue(artistsAtom)
+  const updating = useAtomValue(artistsUpdatingAtom)
+  const updateArtists = useUpdateArtists()
+
+  useEffect(() => {
+    if (artists.length === 0) {
+      updateArtists()
+    }
+  })
+
+  const renderItem: React.FC<{ item: Artist }> = ({ item }) => <ArtistItemLoader item={item} />
+
+  return (
+    <GradientFlatList
+      data={artists}
+      renderItem={renderItem}
+      keyExtractor={item => item.id}
+      onRefresh={updateArtists}
+      refreshing={updating}
+      overScrollMode="never"
+    />
+  )
+}
+
+const ArtistsTab = () => <ArtistsList />
+
+export default ArtistsTab