From aa3ed56d62458fe92edf2ee7ac394f59c8ea1323 Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Tue, 15 Apr 2025 18:53:28 -0500
Subject: [PATCH] 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             |  80 +++++----
 components/Artist/index.tsx            |   6 +-
 components/Global/components/track.tsx |   6 +-
 package.json                           | 236 ++++++++++++-------------
 4 files changed, 173 insertions(+), 155 deletions(-)

diff --git a/components/Album/index.tsx b/components/Album/index.tsx
index eb174bad..9e3837c5 100644
--- a/components/Album/index.tsx
+++ b/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,
-			}}
 		/>
 	)
 }
diff --git a/components/Artist/index.tsx b/components/Artist/index.tsx
index 09b157d0..618039fd 100644
--- a/components/Artist/index.tsx
+++ b/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}
diff --git a/components/Global/components/track.tsx b/components/Global/components/track.tsx
index 8ffb6c77..24764814 100644
--- a/components/Global/components/track.tsx
+++ b/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={() => {
diff --git a/package.json b/package.json
index 52395652..fe8f49d8 100644
--- a/package.json
+++ b/package.json
@@ -1,119 +1,119 @@
 {
-  "name": "jellify",
-  "version": "0.10.98",
-  "private": true,
-  "scripts": {
-    "init": "npm i",
-    "init:ios": "npm i && npm run pod:install",
-    "reinstall": "rm -rf ./node_modules && npm i",
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "lint": "eslint .",
-    "start": "react-native start",
-    "test": "jest",
-    "clean:ios": "cd ios && pod deintegrate",
-    "clean:android": "cd android && rm -rf app/ build/",
-    "pod:install": "cd ios && bundle install && RCT_NEW_ARCH_ENABLED=0 bundle exec pod install",
-    "pod:install-new-arch": "cd ios && bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install",
-    "fastlane:ios:build": "cd ios && bundle exec fastlane build",
-    "fastlane:ios:beta": "cd ios && bundle exec fastlane beta",
-    "fastlane:android:build": "cd android && bundle install && bundle exec fastlane build",
-    "androidBuild": "cd android && ./gradlew clean && ./gradlew assembleRelease && cd .. && echo 'find apk in android/app/build/outputs/apk/release'",
-    "prepare": "husky",
-    "format:check": "prettier --check .",
-    "format": "prettier --write .",
-    "postinstall": "patch-package"
-  },
-  "dependencies": {
-    "@jellyfin/sdk": "^0.11.0",
-    "@react-native-community/blur": "^4.4.1",
-    "@react-native-community/cli": "^15.1.3",
-    "@react-native-masked-view/masked-view": "^0.3.2",
-    "@react-navigation/bottom-tabs": "^7.2.0",
-    "@react-navigation/native": "^7.1.6",
-    "@react-navigation/native-stack": "^7.1.1",
-    "@react-navigation/stack": "^7.1.0",
-    "@tamagui/config": "^1.125.34",
-    "@tamagui/toast": "^1.125.34",
-    "@tanstack/query-sync-storage-persister": "^5.73.3",
-    "@tanstack/react-query": "^5.73.3",
-    "@tanstack/react-query-persist-client": "^5.73.3",
-    "axios": "^1.7.9",
-    "bundle": "^2.1.0",
-    "burnt": "^0.12.2",
-    "expo": "^52.0.0",
-    "expo-image": "^2.0.7",
-    "gem": "^2.4.3",
-    "invert-color": "^2.0.0",
-    "jest-expo": "^52.0.6",
-    "lodash": "^4.17.21",
-    "npm-bundle": "^3.0.3",
-    "patch-package": "^8.0.0",
-    "react": "18.3.1",
-    "react-freeze": "^1.0.4",
-    "react-native": "0.77.0",
-    "react-native-background-actions": "^4.0.1",
-    "react-native-blurhash": "^2.1.1",
-    "react-native-boost": "^0.5.5",
-    "react-native-carplay": "^2.4.1-beta.0",
-    "react-native-device-info": "^14.0.4",
-    "react-native-draggable-flatlist": "^4.0.1",
-    "react-native-file-access": "^3.1.1",
-    "react-native-gesture-handler": "^2.23.0",
-    "react-native-haptic-feedback": "^2.3.3",
-    "react-native-mmkv": "^2.12.2",
-    "react-native-reanimated": "^3.17.2",
-    "react-native-safe-area-context": "^5.2.0",
-    "react-native-screens": "^4.6.0",
-    "react-native-swipeable-item": "^2.0.9",
-    "react-native-text-ticker": "^1.14.0",
-    "react-native-track-player": "^4.1.1",
-    "react-native-url-polyfill": "^2.0.0",
-    "react-native-uuid": "^2.0.3",
-    "react-native-vector-icons": "^10.2.0",
-    "ruby": "^0.6.1",
-    "tamagui": "^1.125.34"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
-    "@babel/runtime": "^7.25.0",
-    "@react-native-community/cli-platform-android": "15.1.3",
-    "@react-native-community/cli-platform-ios": "15.1.3",
-    "@react-native/babel-preset": "0.77.0",
-    "@react-native/eslint-config": "0.77.0",
-    "@react-native/metro-config": "0.77.0",
-    "@react-native/typescript-config": "0.77.0",
-    "@types/jest": "^29.5.13",
-    "@types/lodash": "^4.17.10",
-    "@types/react": "^18.2.6",
-    "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-test-renderer": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.29.1",
-    "@typescript-eslint/parser": "^8.29.1",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-prettier": "^5.2.6",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-native": "^5.0.0",
-    "husky": "^9.1.7",
-    "jest": "^29.6.3",
-    "jscodeshift": "^0.15.2",
-    "lint-staged": "^15.5.0",
-    "prettier": "^2.8.8",
-    "react-native-cli-bump-version": "^1.5.1",
-    "react-test-renderer": "18.3.1",
-    "typescript": "5.7.3"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "prettier --write",
-      "eslint --fix"
-    ]
-  },
-  "engines": {
-    "node": ">=18"
-  }
-}
\ No newline at end of file
+	"name": "jellify",
+	"version": "0.10.98",
+	"private": true,
+	"scripts": {
+		"init": "npm i",
+		"init:ios": "npm i && npm run pod:install",
+		"reinstall": "rm -rf ./node_modules && npm i",
+		"android": "react-native run-android",
+		"ios": "react-native run-ios",
+		"lint": "eslint .",
+		"start": "react-native start",
+		"test": "jest",
+		"clean:ios": "cd ios && pod deintegrate",
+		"clean:android": "cd android && rm -rf app/ build/",
+		"pod:install": "cd ios && bundle install && RCT_NEW_ARCH_ENABLED=0 bundle exec pod install",
+		"pod:install-new-arch": "cd ios && bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install",
+		"fastlane:ios:build": "cd ios && bundle exec fastlane build",
+		"fastlane:ios:beta": "cd ios && bundle exec fastlane beta",
+		"fastlane:android:build": "cd android && bundle install && bundle exec fastlane build",
+		"androidBuild": "cd android && ./gradlew clean && ./gradlew assembleRelease && cd .. && echo 'find apk in android/app/build/outputs/apk/release'",
+		"prepare": "husky",
+		"format:check": "prettier --check .",
+		"format": "prettier --write .",
+		"postinstall": "patch-package"
+	},
+	"dependencies": {
+		"@jellyfin/sdk": "^0.11.0",
+		"@react-native-community/blur": "^4.4.1",
+		"@react-native-community/cli": "^15.1.3",
+		"@react-native-masked-view/masked-view": "^0.3.2",
+		"@react-navigation/bottom-tabs": "^7.2.0",
+		"@react-navigation/native": "^7.1.6",
+		"@react-navigation/native-stack": "^7.1.1",
+		"@react-navigation/stack": "^7.1.0",
+		"@tamagui/config": "^1.125.34",
+		"@tamagui/toast": "^1.125.34",
+		"@tanstack/query-sync-storage-persister": "^5.73.3",
+		"@tanstack/react-query": "^5.73.3",
+		"@tanstack/react-query-persist-client": "^5.73.3",
+		"axios": "^1.7.9",
+		"bundle": "^2.1.0",
+		"burnt": "^0.12.2",
+		"expo": "^52.0.0",
+		"expo-image": "^2.0.7",
+		"gem": "^2.4.3",
+		"invert-color": "^2.0.0",
+		"jest-expo": "^52.0.6",
+		"lodash": "^4.17.21",
+		"npm-bundle": "^3.0.3",
+		"patch-package": "^8.0.0",
+		"react": "18.3.1",
+		"react-freeze": "^1.0.4",
+		"react-native": "0.77.0",
+		"react-native-background-actions": "^4.0.1",
+		"react-native-blurhash": "^2.1.1",
+		"react-native-boost": "^0.5.5",
+		"react-native-carplay": "^2.4.1-beta.0",
+		"react-native-device-info": "^14.0.4",
+		"react-native-draggable-flatlist": "^4.0.1",
+		"react-native-file-access": "^3.1.1",
+		"react-native-gesture-handler": "^2.23.0",
+		"react-native-haptic-feedback": "^2.3.3",
+		"react-native-mmkv": "^2.12.2",
+		"react-native-reanimated": "^3.17.2",
+		"react-native-safe-area-context": "^5.2.0",
+		"react-native-screens": "^4.6.0",
+		"react-native-swipeable-item": "^2.0.9",
+		"react-native-text-ticker": "^1.14.0",
+		"react-native-track-player": "^4.1.1",
+		"react-native-url-polyfill": "^2.0.0",
+		"react-native-uuid": "^2.0.3",
+		"react-native-vector-icons": "^10.2.0",
+		"ruby": "^0.6.1",
+		"tamagui": "^1.125.34"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.25.2",
+		"@babel/preset-env": "^7.25.3",
+		"@babel/runtime": "^7.25.0",
+		"@react-native-community/cli-platform-android": "15.1.3",
+		"@react-native-community/cli-platform-ios": "15.1.3",
+		"@react-native/babel-preset": "0.77.0",
+		"@react-native/eslint-config": "0.77.0",
+		"@react-native/metro-config": "0.77.0",
+		"@react-native/typescript-config": "0.77.0",
+		"@types/jest": "^29.5.13",
+		"@types/lodash": "^4.17.10",
+		"@types/react": "^18.2.6",
+		"@types/react-native-vector-icons": "^6.4.18",
+		"@types/react-test-renderer": "^18.3.1",
+		"@typescript-eslint/eslint-plugin": "^8.29.1",
+		"@typescript-eslint/parser": "^8.29.1",
+		"babel-plugin-module-resolver": "^5.0.2",
+		"eslint": "^8.57.1",
+		"eslint-config-prettier": "^10.1.2",
+		"eslint-plugin-import": "^2.31.0",
+		"eslint-plugin-prettier": "^5.2.6",
+		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-native": "^5.0.0",
+		"husky": "^9.1.7",
+		"jest": "^29.6.3",
+		"jscodeshift": "^0.15.2",
+		"lint-staged": "^15.5.0",
+		"prettier": "^2.8.8",
+		"react-native-cli-bump-version": "^1.5.1",
+		"react-test-renderer": "18.3.1",
+		"typescript": "5.7.3"
+	},
+	"lint-staged": {
+		"*.{js,jsx,ts,tsx}": [
+			"prettier --write",
+			"eslint --fix"
+		]
+	},
+	"engines": {
+		"node": ">=18"
+	}
+}