styling fixes

text press animations

settings page fixes

src/components/Album/header.tsx

@@ -12,7 +12,7 @@ import Button from '../Global/helpers/button'
 import { InstantMixButton } from '../Global/components/instant-mix-button'
 import { useAlbumDiscs } from '../../api/queries/album'
 import { formatArtistName } from '../../utils/formatting/artist-names'
-import { BUTTON_PRESS_STYLES } from '../../configs/style.config'
+import { BUTTON_PRESS_STYLES, ICON_PRESS_STYLES } from '../../configs/style.config'
 
 /**
  * Renders a header for an Album's track list
@@ -75,6 +75,7 @@ export default function AlbumTrackListHeader({ album }: { album: BaseItemDto }):
 						textAlign='center'
 						fontSize={'$6'}
 						paddingBottom={'$2'}
+						{...ICON_PRESS_STYLES}
 					>
 						{formatArtistName(album.AlbumArtists[0].Name)}
 					</Paragraph>

src/components/Global/components/Track/index.tsx

@@ -208,7 +208,7 @@ export default function Track({
 
 	return (
 		<SwipeableRow
-			disabled={isNested}
+			disabled={isNested || (isOffline && !isDownloaded)}
 			{...swipeConfig}
 			onLongPress={handleLongPress}
 			onPress={handlePress}

src/components/Global/components/icon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { getTokenValue, ThemeTokens, useTheme, YStack } from 'tamagui'
+import { getTokenValue, SizeTokens, ThemeTokens, useTheme, YStack } from 'tamagui'
 import MaterialDesignIcon from '@react-native-vector-icons/material-design-icons'
 
 const xxxsmallSize = 12
@@ -19,6 +19,7 @@ const SIZE_ENTRIES = [
 
 export default function Icon({
 	name,
+	margin,
 	onPress,
 	onPressIn,
 	xxxsmall,
@@ -33,6 +34,7 @@ export default function Icon({
 	textOutline,
 }: {
 	name: string
+	margin?: SizeTokens | undefined
 	onPress?: () => void
 	onPressIn?: () => void
 	xxxsmall?: boolean
@@ -79,6 +81,7 @@ export default function Icon({
 				textOutline === 'strong' ? { width: 0.5, height: 0.5 } : { width: 0, height: 0 }
 			}
 			shadowRadius={textOutline === 'strong' ? 1 : 0}
+			margin={margin}
 		>
 			<MaterialDesignIcon
 				color={resolvedColor}

src/components/Settings/component.tsx

@@ -3,7 +3,7 @@ import { useColorScheme } from 'react-native'
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 import { getTokenValue, useTheme, Spinner, YStack } from 'tamagui'
 import { useColorPresetSetting, useThemeSetting } from '../../stores/settings/app'
-import SettingsTabBar from './tab-bar'
+import { SafeAreaView } from 'react-native-safe-area-context'
 
 // Lazy load tab components to improve initial render
 const PreferencesTab = lazy(() => import('./components/preferences-tab'))
@@ -73,63 +73,49 @@ export default function Settings(): React.JSX.Element {
 	const themeKey = `${colorPreset}_${resolvedMode}`
 
 	return (
-		<SettingsTabsNavigator.Navigator
-			key={themeKey}
-			screenOptions={{
-				tabBarIndicatorStyle: {
-					borderColor: theme.background.val,
-					borderBottomWidth: getTokenValue('$2'),
-				},
-				tabBarActiveTintColor: theme.background.val,
-				tabBarInactiveTintColor: theme.background50.val,
-				tabBarStyle: {
-					backgroundColor: theme.primary.val,
-				},
-				tabBarLabelStyle: {
-					fontFamily: 'Figtree-Bold',
-				},
-				tabBarPressOpacity: 0.5,
-				lazy: true,
-				lazyPreloadDistance: 0, // Only load the active tab
-			}}
-			tabBar={(props) => <SettingsTabBar {...props} />}
-		>
-			<SettingsTabsNavigator.Screen
-				name='Settings'
-				component={LazyPreferencesTab}
-				options={{
-					title: 'App',
+		<SafeAreaView edges={['top']} style={{ flex: 1 }}>
+			<SettingsTabsNavigator.Navigator
+				key={themeKey}
+				screenOptions={{
+					tabBarIndicatorStyle: {
+						borderColor: theme.primary.val,
+						borderBottomWidth: getTokenValue('$2'),
+					},
+					tabBarActiveTintColor: theme.primary.val,
+					tabBarInactiveTintColor: theme.borderColor.val,
+					tabBarStyle: {
+						backgroundColor: theme.background.val,
+					},
+					tabBarLabelStyle: {
+						fontFamily: 'Figtree-Bold',
+					},
+					tabBarPressOpacity: 0.5,
+					lazy: true,
+					lazyPreloadDistance: 0, // Only load the active tab
 				}}
-			/>
-
-			<SettingsTabsNavigator.Screen
-				name='Playback'
-				component={LazyPlaybackTab}
-				options={{
-					title: 'Player',
-				}}
-			/>
-
-			<SettingsTabsNavigator.Screen name='Usage' component={LazyStorageTab} />
-
-			<SettingsTabsNavigator.Screen name='User' component={LazyAccountTab} />
-
-			<SettingsTabsNavigator.Screen name='About' component={LazyInfoTab} />
-			{/*
+			>
 				<SettingsTabsNavigator.Screen
-					name='Labs'
-					component={LabsTab}
+					name='Settings'
+					component={LazyPreferencesTab}
 					options={{
-						tabBarIcon: ({ focused, color }) => (
-							<Icon
-								name='flask'
-								color={focused ? '$primary' : '$borderColor'}
-								small
-							/>
-						),
+						title: 'App',
 					}}
 				/>
-			) */}
-		</SettingsTabsNavigator.Navigator>
+
+				<SettingsTabsNavigator.Screen
+					name='Playback'
+					component={LazyPlaybackTab}
+					options={{
+						title: 'Player',
+					}}
+				/>
+
+				<SettingsTabsNavigator.Screen name='Usage' component={LazyStorageTab} />
+
+				<SettingsTabsNavigator.Screen name='User' component={LazyAccountTab} />
+
+				<SettingsTabsNavigator.Screen name='About' component={LazyInfoTab} />
+			</SettingsTabsNavigator.Navigator>
+		</SafeAreaView>
 	)
 }

src/components/Settings/components/settings-list-group.tsx

@@ -1,14 +1,12 @@
 import { ListItem, ScrollView, Separator, YGroup } from 'tamagui'
 import { SettingsTabList } from '../types'
 import Icon from '../../Global/components/icon'
-import { ThemeTokens } from 'tamagui'
 import React from 'react'
 import { Text } from '../../Global/helpers/text'
 
 interface SettingsListGroupProps {
 	settingsList: SettingsTabList
 	footer?: React.JSX.Element
-	borderColor?: ThemeTokens
 }
 
 function SettingsListItem({ setting }: { setting: SettingsTabList[number] }) {
@@ -16,9 +14,9 @@ function SettingsListItem({ setting }: { setting: SettingsTabList[number] }) {
 		<>
 			<YGroup.Item>
 				<ListItem
-					size={'$5'}
+					size={'$4'}
 					title={setting.title}
-					icon={<Icon name={setting.iconName} color={setting.iconColor} />}
+					icon={<Icon name={setting.iconName} color={setting.iconColor} margin={'$2'} />}
 					subTitle={
 						setting.subTitle && <Text color={'$borderColor'}>{setting.subTitle}</Text>
 					}
@@ -38,20 +36,22 @@ function SettingsListItem({ setting }: { setting: SettingsTabList[number] }) {
 
 export default function SettingsListGroup({
 	settingsList,
-	borderColor,
 	footer,
 }: SettingsListGroupProps): React.JSX.Element {
 	return (
 		<ScrollView>
-			<YGroup
-				alignSelf='center'
-				borderWidth={'$1'}
-				borderColor={'$borderColor'}
-				margin={'$3'}
-			>
-				{settingsList.map((setting, index, self) => (
-					<SettingsListItem key={setting.title} setting={setting} />
-				))}
+			<YGroup>
+				{settingsList.map((setting, index, self) => {
+					return (
+						<>
+							<SettingsListItem key={setting.title} setting={setting} />
+
+							{index < self.length - 1 && (
+								<Separator borderColor={'$borderColor'} marginHorizontal={'$4'} />
+							)}
+						</>
+					)
+				})}
 			</YGroup>
 			{footer}
 		</ScrollView>

src/components/Settings/tab-bar.tsx

@@ -1,16 +0,0 @@
-import { MaterialTopTabBarProps, MaterialTopTabBar } from '@react-navigation/material-top-tabs'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Square, YStack } from 'tamagui'
-import StatusBar from '../Global/helpers/status-bar'
-
-export default function SettingsTabBar(props: MaterialTopTabBarProps): React.JSX.Element {
-	const { top } = useSafeAreaInsets()
-
-	return (
-		<YStack>
-			<Square height={top} backgroundColor={'$primary'} />
-			<StatusBar invertColors />
-			<MaterialTopTabBar {...props} />
-		</YStack>
-	)
-}