Improvements to playlist stacks

src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx

@@ -28,6 +28,7 @@ export function ThemePlaylistStack({
 	const { setThemeName, setCurrentThemePlaylist, handleDelete, currentUser } =
 		useCommonHooks();
 	const [indexOffset, setIndexOffset] = useState(0);
+	const [movingIndex, setMovingIndex] = useState(0);
 	const missingTheme = {
 		id: undefined,
 		name: 'default',
@@ -95,7 +96,7 @@ export function ThemePlaylistStack({
 					zIndex: themeList.length - spot,
 				}}
 			>
-				<Parallax {...presentationProps}>
+				<Parallax {...(!(hover && spot === 0) ? presentationProps : { disabled: true })}>
 					<ThemeCardPreview key={theme.id} cardTheme={theme} />
 				</Parallax>
 			</Box>
@@ -110,17 +111,20 @@ export function ThemePlaylistStack({
 				) || missingTheme,
 			);
 		} else if (indexOffset > 0 && indexOffset < themeList.length) {
+			setMovingIndex(themeList.length - indexOffset);
 			setTopTheme(
 				allThemes.find(
 					(theme: Theme) => theme.id === themeList[themeList.length - indexOffset],
 				) || missingTheme,
 			);
 		} else if (indexOffset < 0 && Math.abs(indexOffset) < themeList.length) {
+			setMovingIndex(Math.abs(indexOffset));
 			setTopTheme(
 				allThemes.find((theme: Theme) => theme.id === themeList[Math.abs(indexOffset)]) ||
 					missingTheme,
 			);
 		} else if (indexOffset === 0) {
+			setMovingIndex(0);
 			setTopTheme(
 				allThemes.find((theme: Theme) => theme.id === themeList[0]) || missingTheme,
 			);
@@ -239,7 +243,7 @@ export function ThemePlaylistStack({
 										</Parallax>
 									</>
 								) : (
-									items
+									items.slice(movingIndex, movingIndex + 8)
 								)}
 							</Stack>
 						</Stack>
@@ -251,17 +255,34 @@ export function ThemePlaylistStack({
 						bottom={0}
 						style={{ zIndex: 1000 }}
 					>
-						<Text
-							style={{
-								paddingRight: '.25rem',
-								paddingLeft: '.25rem',
-								backgroundColor: 'var(--mantine-color-border-0)',
-								borderRadius: '4px',
-								color: 'var(--mantine-color-primary-0)',
-							}}
-						>
-							{cardPlaylist.name}
-						</Text>
+						<Group gap={2}>
+							<Text
+								style={{
+									paddingRight: '.25rem',
+									paddingLeft: '.25rem',
+									backgroundColor: 'var(--mantine-color-border-0)',
+									borderRadius: '16px',
+									color: 'var(--mantine-color-background-0)',
+								}}
+							>
+								{cardPlaylist.name}
+							</Text>
+							{themeList.length > 0 && (
+								<Text
+									style={{
+										paddingRight: '.25rem',
+										paddingLeft: '.25rem',
+										backgroundColor: 'var(--mantine-color-background-0)',
+										borderRadius: '16px',
+										color: 'var(--mantine-color-border-0)',
+										minWidth: '1.5rem',
+										textAlign: 'center',
+									}}
+								>
+									{themeList.length}
+								</Text>
+							)}
+						</Group>
 						<Group gap={0}>
 							{!defaultLists.includes(cardPlaylist.name) && (
 								<ActionIcon

src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx

@@ -35,6 +35,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 			}}
 			align='center'
 			gap={0}
+			miw={600}
 		>
 			<Select
 				disabled