From 4a5b39622715bfcbfc6507f84bc1f55c81d5e9ac Mon Sep 17 00:00:00 2001
From: Violet Caulfield <42452695+anultravioletaurora@users.noreply.github.com>
Date: Wed, 3 Dec 2025 22:07:12 -0600
Subject: [PATCH] Bugfix/flex track icons (#749)

* remove memoization since we're using the compiler

* remove memoization on the track and item rows

* remove memoization from artists list

* remove additional memoization

* track icon flexing
---
 src/components/Album/index.tsx                |  8 ++---
 .../Global/components/downloaded-icon.tsx     |  3 +-
 .../Global/components/favorite-icon.tsx       |  5 ++--
 src/components/Global/components/track.tsx    | 30 +++++++++++++++----
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/Album/index.tsx b/src/components/Album/index.tsx
index c607f4a8..2b96edc1 100644
--- a/src/components/Album/index.tsx
+++ b/src/components/Album/index.tsx
@@ -74,13 +74,9 @@ export function Album({ album }: { album: BaseItemDto }): React.JSX.Element {
 						justifyContent={hasMultipleSections ? 'space-between' : 'flex-end'}
 						alignItems='center'
 						backgroundColor={'$background'}
-						paddingHorizontal={'$4.5'}
+						paddingHorizontal={'$2'}
 					>
-						<Text
-							paddingVertical={'$2'}
-							paddingLeft={'$4.5'}
-							bold
-						>{`Disc ${section.title}`}</Text>
+						<Text padding={'$2'} bold>{`Disc ${section.title}`}</Text>
 						<Icon
 							name={pendingDownloads.length ? 'progress-download' : 'download'}
 							small
diff --git a/src/components/Global/components/downloaded-icon.tsx b/src/components/Global/components/downloaded-icon.tsx
index b62e5061..ecf614b8 100644
--- a/src/components/Global/components/downloaded-icon.tsx
+++ b/src/components/Global/components/downloaded-icon.tsx
@@ -1,5 +1,4 @@
 import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models'
-import { Spacer } from 'tamagui'
 import Icon from './icon'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { memo } from 'react'
@@ -13,7 +12,7 @@ function DownloadedIcon({ item }: { item: BaseItemDto }) {
 			<Icon small name='download-circle' color={'$success'} flex={1} />
 		</Animated.View>
 	) : (
-		<Spacer flex={0.5} />
+		<></>
 	)
 }
 
diff --git a/src/components/Global/components/favorite-icon.tsx b/src/components/Global/components/favorite-icon.tsx
index de60f4dd..687000fe 100644
--- a/src/components/Global/components/favorite-icon.tsx
+++ b/src/components/Global/components/favorite-icon.tsx
@@ -1,5 +1,4 @@
 import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models'
-import { Spacer } from 'tamagui'
 import Icon from './icon'
 import { memo } from 'react'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
@@ -17,10 +16,10 @@ function FavoriteIcon({ item }: { item: BaseItemDto }): React.JSX.Element {
 
 	return isFavorite ? (
 		<Animated.View entering={FadeIn} exiting={FadeOut}>
-			<Icon small name='heart' color={'$primary'} flex={1} />
+			<Icon small name='heart' color={'$primary'} />
 		</Animated.View>
 	) : (
-		<Spacer />
+		<></>
 	)
 }
 
diff --git a/src/components/Global/components/track.tsx b/src/components/Global/components/track.tsx
index 27f9d44e..ceecf0e1 100644
--- a/src/components/Global/components/track.tsx
+++ b/src/components/Global/components/track.tsx
@@ -215,18 +215,18 @@ export default function Track({
 					alignContent='center'
 					alignItems='center'
 					flex={1}
+					gap={'$1'}
 					testID={testID ?? undefined}
 					paddingVertical={'$2'}
-					justifyContent='flex-start'
-					paddingRight={'$2'}
+					paddingHorizontal={'$2'}
 					animation={'quick'}
 					pressStyle={{ opacity: 0.5 }}
 					backgroundColor={'$background'}
 				>
 					<XStack
+						flex={0}
 						alignContent='center'
 						justifyContent='center'
-						marginHorizontal={showArtwork ? '$2' : '$1'}
 						onLayout={(e) => setArtworkAreaWidth(e.nativeEvent.layout.width)}
 					>
 						{showArtwork ? (
@@ -247,7 +247,7 @@ export default function Track({
 					</XStack>
 
 					<SlidingTextArea leftGapWidth={artworkAreaWidth} hasArtwork={!!showArtwork}>
-						<YStack alignItems='flex-start' justifyContent='center' flex={1}>
+						<YStack alignItems='flex-start' justifyContent='center'>
 							<Text
 								key={`${track.Id}-name`}
 								bold
@@ -271,7 +271,13 @@ export default function Track({
 						</YStack>
 					</SlidingTextArea>
 
-					<XStack justifyContent='flex-end' alignItems='center' flexShrink={1} gap='$1'>
+					<XStack
+						justifyContent='flex-end'
+						alignItems='center'
+						flex={0}
+						flexShrink={1}
+						gap='$1'
+					>
 						<DownloadedIcon item={track} />
 						<FavoriteIcon item={track} />
 						{runtimeComponent}
@@ -313,5 +319,17 @@ function SlidingTextArea({
 		}
 		return { transform: [{ translateX: offset }] }
 	})
-	return <Animated.View style={[{ flex: 1 }, style]}>{children}</Animated.View>
+	return (
+		<Animated.View
+			style={[
+				{
+					flex: 1,
+					flexGrow: 1,
+				},
+				style,
+			]}
+		>
+			{children}
+		</Animated.View>
+	)
 }