styling changes

hide disc numbers if we only have one disc

give labels on artist page more breathing room from the bezel

adjust track display, giving artwork more spacing and the ellipses more spacing

components/Album/index.tsx

@@ -1,6 +1,6 @@
 import { HomeAlbumProps } from '../types'
 import { YStack, XStack, Separator, getToken } from 'tamagui'
-import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models'
+import { BaseItemDto, ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models'
 import { H5, Text } from '../Global/helpers/text'
 import { FlatList, SectionList } from 'react-native'
 import { RunTimeTicks } from '../Global/helpers/time-codes'
@@ -26,47 +26,66 @@ export function AlbumScreen({ route, navigation }: HomeAlbumProps): React.JSX.El
 	})
 	const { width } = useSafeAreaFrame()
 
-	const { data: tracks } = useQuery({
+	const { data: discs } = useQuery({
 		queryKey: [QueryKeys.ItemTracks, album.Id!],
 		queryFn: () => {
 			let sortBy: ItemSortBy[] = []
 
 			sortBy = [ItemSortBy.ParentIndexNumber, ItemSortBy.IndexNumber, ItemSortBy.SortName]
 
-			return getItemsApi(Client.api!)
-				.getItems({
-					parentId: album.Id!,
-					sortBy,
-				})
-				.then(({ data }) => {
-					return data.Items ? data.Items : []
-				})
+			return new Promise<{ title: string; data: BaseItemDto[] }[]>((resolve, reject) => {
+				getItemsApi(Client.api!)
+					.getItems({
+						parentId: album.Id!,
+						sortBy,
+					})
+					.then(({ data }) => {
+						const discs = data.Items
+							? Object.keys(
+									groupBy(
+										data.Items,
+										(track) => track.ParentIndexNumber?.toString() ?? '0',
+									),
+							  ).map((discNumber) => {
+									console.debug(discNumber)
+									return {
+										title: discNumber,
+										data: data.Items!.filter((track: BaseItemDto) =>
+											track.ParentIndexNumber
+												? isEqual(
+														discNumber,
+														(track.ParentIndexNumber ?? 0).toString(),
+												  )
+												: track,
+										),
+									}
+							  })
+							: [{ title: '1', data: [] }]
+
+						resolve(discs)
+					})
+					.catch((error) => {
+						reject(error)
+					})
+			})
 		},
 	})
 
 	return (
 		<SectionList
 			contentInsetAdjustmentBehavior='automatic'
-			sections={
-				tracks
-					? Object.keys(groupBy(tracks, (track) => track.ParentIndexNumber ?? 0)).map(
-							(discNumber, index) => {
-								return {
-									title: discNumber,
-									data: tracks.filter((track) =>
-										isEqual(
-											discNumber,
-											(track.ParentIndexNumber ?? 0).toString(),
-										),
-									),
-								}
-							},
-					  )
-					: [{ title: '1', data: [] }]
-			}
+			sections={discs ?? [{ title: '1', data: [] }]}
 			keyExtractor={(item, index) => item.Id! + index}
 			ItemSeparatorComponent={() => <Separator />}
-			renderSectionHeader={({ section }) => <Text bold>{`Disc ${section.title}`}</Text>}
+			renderSectionHeader={({ section }) => {
+				return discs && discs.length >= 2 ? (
+					<Text
+						marginLeft={'$4.5'}
+						backgroundColor={'$background'}
+						bold
+					>{`Disc ${section.title}`}</Text>
+				) : null
+			}}
 			ListHeaderComponent={
 				<YStack marginTop={'$2'} minHeight={getToken('$20') + getToken('$15')}>
 					<Image
@@ -110,7 +129,7 @@ export function AlbumScreen({ route, navigation }: HomeAlbumProps): React.JSX.El
 			renderItem={({ item: track, index }) => (
 				<Track
 					track={track}
-					tracklist={tracks}
+					tracklist={discs?.flatMap((disc) => disc.data)}
 					index={index}
 					navigation={navigation}
 					queue={album}
@@ -124,9 +143,6 @@ export function AlbumScreen({ route, navigation }: HomeAlbumProps): React.JSX.El
 					<RunTimeTicks>{album.RunTimeTicks}</RunTimeTicks>
 				</XStack>
 			}
-			contentContainerStyle={{
-				marginHorizontal: 4,
-			}}
 		/>
 	)
 }

components/Artist/index.tsx

@@ -76,7 +76,7 @@ export function ArtistScreen({
 				/>
 			</YStack>
 
-			<H3>Albums</H3>
+			<H3 marginLeft={'$2'}>Albums</H3>
 			<FlatList
 				contentContainerStyle={{
 					flexGrow: 1,
@@ -100,7 +100,9 @@ export function ArtistScreen({
 				)}
 				ListFooterComponent={
 					<YStack>
-						<H3>{`Similar to ${artist.Name ?? 'Unknown Artist'}`} </H3>
+						<H3 marginLeft={'$2'}>
+							{`Similar to ${artist.Name ?? 'Unknown Artist'}`}{' '}
+						</H3>
 
 						<FlatList
 							data={similarArtists}

components/Global/components/track.tsx

@@ -91,7 +91,7 @@ export default function Track({
 				<XStack
 					alignContent='center'
 					justifyContent='center'
-					flex={1}
+					flex={showArtwork ? 2 : 1}
 					marginHorizontal={'$2'}
 					minHeight={showArtwork ? '$4' : 'unset'}
 				>
@@ -132,7 +132,7 @@ export default function Track({
 					alignItems='center'
 					justifyContent='space-between'
 					alignContent='center'
-					flex={3}
+					flex={4}
 				>
 					<FavoriteIcon item={track} />
 
@@ -140,7 +140,7 @@ export default function Track({
 						<RunTimeTicks>{track.RunTimeTicks}</RunTimeTicks>
 					</YStack>
 
-					<YStack alignContent='center' justifyContent='center'>
+					<YStack alignContent='center' justifyContent='flex-start' marginRight={'$3'}>
 						<Icon
 							name={showRemove ? 'close' : 'dots-horizontal'}
 							onPress={() => {