az scroller qol improvements

src/components/Albums/component.tsx

@@ -100,7 +100,7 @@ export default function Albums({
 							borderRadius={'$5'}
 							borderWidth={'$1'}
 							borderColor={'$primary'}
-							margin={'$2'}
+							marginRight={'$2'}
 						>
 							<Text bold color={'$primary'}>
 								{album.toUpperCase()}
@@ -111,13 +111,11 @@ export default function Albums({
 					) : null
 				}
 				ListEmptyComponent={
-					albumsInfiniteQuery.isPending ? (
-						<ActivityIndicator />
-					) : (
-						<YStack justifyContent='center'>
-							<Text>No albums</Text>
-						</YStack>
-					)
+					<YStack flex={1} justify='center' alignItems='center'>
+						<Text marginVertical='auto' color={'$borderColor'}>
+							No albums
+						</Text>
+					</YStack>
 				}
 				onEndReached={() => {
 					if (albumsInfiniteQuery.hasNextPage) albumsInfiniteQuery.fetchNextPage()

src/components/Artists/component.tsx

@@ -1,5 +1,5 @@
 import React, { RefObject, useEffect, useMemo, useRef } from 'react'
-import { getToken, Separator, useTheme, XStack } from 'tamagui'
+import { Separator, useTheme, XStack, YStack } from 'tamagui'
 import { Text } from '../Global/helpers/text'
 import { RefreshControl } from 'react-native'
 import ItemRow from '../Global/components/item-row'
@@ -107,6 +107,13 @@ export default function Artists({
 							: item.Id!
 				}
 				ItemSeparatorComponent={() => <Separator />}
+				ListEmptyComponent={
+					<YStack flex={1} justify='center' alignItems='center'>
+						<Text marginVertical='auto' color={'$borderColor'}>
+							No artists
+						</Text>
+					</YStack>
+				}
 				data={artists}
 				refreshControl={
 					<RefreshControl
@@ -124,10 +131,10 @@ export default function Artists({
 							<XStack
 								padding={'$2'}
 								backgroundColor={'$background'}
-								borderRadius={'$5'}
+								borderRadius={'$4'}
 								borderWidth={'$1'}
 								borderColor={'$primary'}
-								margin={'$2'}
+								marginRight={'$2'}
 							>
 								<Text bold color={'$primary'}>
 									{artist.toUpperCase()}

src/components/Global/components/alphabetical-selector.tsx

@@ -36,6 +36,8 @@ export default function AZScroller({
 
 	const overlayOpacity = useSharedValue(0)
 
+	const gesturePositionY = useSharedValue(0)
+
 	const alphabetSelectorRef = useRef<RNView>(null)
 
 	const alphabetSelectorTopY = useRef(0)
@@ -60,6 +62,7 @@ export default function AZScroller({
 				.runOnJS(true)
 				.onBegin((e) => {
 					const relativeY = e.absoluteY - alphabetSelectorTopY.current
+					gesturePositionY.set(relativeY)
 					const index = Math.floor(relativeY / letterHeight.current)
 					if (alphabet[index]) {
 						const letter = alphabet[index]
@@ -70,6 +73,7 @@ export default function AZScroller({
 				})
 				.onUpdate((e) => {
 					const relativeY = e.absoluteY - alphabetSelectorTopY.current
+					gesturePositionY.set(relativeY)
 					const index = Math.floor(relativeY / letterHeight.current)
 					if (alphabet[index]) {
 						const letter = alphabet[index]
@@ -93,6 +97,7 @@ export default function AZScroller({
 				.runOnJS(true)
 				.onBegin((e) => {
 					const relativeY = e.absoluteY - alphabetSelectorTopY.current
+					gesturePositionY.set(relativeY)
 					const index = Math.floor(relativeY / letterHeight.current)
 					if (alphabet[index]) {
 						const letter = alphabet[index]
@@ -114,6 +119,7 @@ export default function AZScroller({
 	const animatedOverlayStyle = useAnimatedStyle(() => ({
 		opacity: overlayOpacity.value,
 		transform: [{ scale: overlayOpacity.value }],
+		top: gesturePositionY.get(),
 	}))
 
 	const handleLetterLayout = (event: LayoutChangeEvent) => {
@@ -128,10 +134,9 @@ export default function AZScroller({
 		<>
 			<GestureDetector gesture={gesture}>
 				<YStack
-					minWidth={'$3'}
-					maxWidth={'$5'}
+					minWidth={'$2'}
+					maxWidth={'$3'}
 					marginVertical={'auto'}
-					width={width / 6}
 					justifyContent='flex-start'
 					alignItems='center'
 					alignContent='center'
@@ -174,8 +179,7 @@ export default function AZScroller({
 				style={[
 					{
 						position: 'absolute',
-						top: getToken('$4'),
-						left: getToken('$3'),
+						right: getToken('$12'),
 						width: getToken('$13'),
 						height: getToken('$13'),
 						justifyContent: 'center',

src/components/Tracks/component.tsx

@@ -75,7 +75,7 @@ export default function Tracks({
 					borderRadius={'$5'}
 					borderWidth={'$1'}
 					borderColor={'$primary'}
-					margin={'$2'}
+					marginRight={'$2'}
 				>
 					<Text bold color={'$primary'}>
 						{track.toUpperCase()}