Bug fixes and new biome lint update

2025-06-17 17:00:29 -05:00
parent 4a77340ba5
commit 7570c287c8
26 changed files with 459 additions and 500 deletions
--- a/src/pages/settings/components/Theming/ThemeExampleApp.tsx
+++ b/src/pages/settings/components/Theming/ThemeExampleApp.tsx
@@ -0,0 +1,69 @@
+import { Box, Stack, Text } from '@mantine/core';
+import { useState } from 'react';
+import { FiCheck } from 'react-icons/fi';
+import { stackClasses } from 'styles';
+import type { Theme } from 'types';
+
+function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
+	const [textDecoration, setTextDecoration] = useState<string>('none');
+
+	return (
+		<Box
+			component='a'
+			onMouseOver={() => setTextDecoration('underline')}
+			onMouseOut={() => setTextDecoration('none')}
+			className={stackClasses.appItemBox}
+		>
+			<Stack
+				style={{
+					height: '64px',
+					marginRight: '1rem',
+					marginLeft: '1rem',
+					paddingTop: '1rem',
+				}}
+			>
+				<FiCheck style={{ color: selectedTheme.primaryColor }} height={32} width={32} />
+			</Stack>
+			<Stack
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'center',
+					flex: 1,
+					overflow: 'hidden',
+					gap: 0,
+				}}
+			>
+				<Text
+					style={{
+						fontWeight: 400,
+						fontSize: '.625rem',
+						fontStyle: 'normal',
+						color: selectedTheme.primaryColor,
+						fontFamily:
+							'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
+						margin: 0,
+					}}
+				>
+					{'Example App'}
+				</Text>
+				<Text
+					style={{
+						fontWeight: 400,
+						fontSize: '.625rem',
+						fontStyle: 'italic',
+						color: selectedTheme.accentColor,
+						fontFamily:
+							'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
+						margin: 0,
+						textDecoration: textDecoration,
+					}}
+				>
+					{'https://www.example.com'}
+				</Text>
+			</Stack>
+		</Box>
+	);
+}
+
+export default ExampleApp;
--- a/src/pages/settings/components/Theming/ThemeMiniCard.tsx
+++ b/src/pages/settings/components/Theming/ThemeMiniCard.tsx
@@ -1,12 +1,7 @@
 import { Group, Text } from '@mantine/core';
 import type { Theme } from 'types';
-function ThemeMiniCard({
-	allThemes,
-	item,
-}: {
-	allThemes: Theme[];
-	item: number;
-}) {
+
+function ThemeMiniCard({ allThemes, item }: { allThemes: Theme[]; item: number }) {
 	const theme = allThemes?.find((theme: Theme) => theme.id === item);

 	return (
@@ -19,9 +14,10 @@ function ThemeMiniCard({
 			w={'175px'}
 			h={'60px'}
 			style={{
-				background: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), no-repeat center url(/backgrounds/${theme?.backgroundImage})`,
+				backgroundImage: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(/backgrounds/${theme?.backgroundImage})`,
 				backgroundSize: 'cover',
 				backgroundColor: theme?.backgroundColor,
+				backgroundPosition: 'center',
 				border: `solid ${theme?.borderColor}`,
 				borderRadius: '8px',
 			}}
--- a/src/pages/settings/components/Theming/ThemeModalContent.tsx
+++ b/src/pages/settings/components/Theming/ThemeModalContent.tsx
@@ -1,84 +1,22 @@
-import { Box, Group, Stack, Text } from '@mantine/core';
-import { useState } from 'react';
-import { FiCheck } from 'react-icons/fi';
-import { stackClasses } from 'styles';
+import { Group, Stack, Text } from '@mantine/core';
 import type { Theme } from 'types';
+import ThemeExampleApp from './ThemeExampleApp';

 export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
-	const ExampleApp = () => {
-		const [textDecoration, setTextDecoration] = useState<string>('none');
-
-		return (
-			<Box
-				component='a'
-				onMouseOver={() => setTextDecoration('underline')}
-				onMouseOut={() => setTextDecoration('none')}
-				className={stackClasses.appItemBox}
-			>
-				<Stack
-					style={{
-						height: '64px',
-						marginRight: '1rem',
-						marginLeft: '1rem',
-						paddingTop: '1rem',
-					}}
-				>
-					<FiCheck style={{ color: selectedTheme.primaryColor }} height={32} width={32} />
-				</Stack>
-				<Stack
-					style={{
-						display: 'flex',
-						flexDirection: 'column',
-						justifyContent: 'center',
-						flex: 1,
-						overflow: 'hidden',
-						gap: 0,
-					}}
-				>
-					<Text
-						style={{
-							fontWeight: 400,
-							fontSize: '.625rem',
-							fontStyle: 'normal',
-							color: selectedTheme.primaryColor,
-							fontFamily:
-								'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
-							margin: 0,
-						}}
-					>
-						{'Example App'}
-					</Text>
-					<Text
-						style={{
-							fontWeight: 400,
-							fontSize: '.625rem',
-							fontStyle: 'italic',
-							color: selectedTheme.accentColor,
-							fontFamily:
-								'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
-							margin: 0,
-							textDecoration: textDecoration,
-						}}
-					>
-						{'https://www.example.com'}
-					</Text>
-				</Stack>
-			</Box>
-		);
-	};
 	return (
 		<Stack
 			style={{
 				width: '100%',
-				background:
+				backgroundImage:
 					selectedTheme.backgroundImage !== 'none'
-						? `linear-gradient(${selectedTheme.backgroundColor}33, ${selectedTheme.backgroundColor}33), no-repeat center url(/backgrounds/${selectedTheme.backgroundImage})`
+						? `linear-gradient(${selectedTheme?.backgroundColor}33, ${selectedTheme?.backgroundColor}33), url(/backgrounds/${selectedTheme?.backgroundImage})`
 						: undefined,
 				backgroundSize: selectedTheme.backgroundImage !== 'none' ? 'cover' : undefined,
 				backgroundColor:
 					selectedTheme.backgroundImage === 'none'
 						? selectedTheme.backgroundColor
 						: undefined,
+				backgroundPosition: 'center',
 				borderRadius: '10px',
 				border: '2px solid',
 			}}
@@ -124,9 +62,9 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 					alignContent: 'center',
 				}}
 			>
-				<ExampleApp />
-				<ExampleApp />
-				<ExampleApp />
+				<ThemeExampleApp selectedTheme={selectedTheme} />
+				<ThemeExampleApp selectedTheme={selectedTheme} />
+				<ThemeExampleApp selectedTheme={selectedTheme} />
 			</Stack>
 			<Text
 				pl={'1.5rem'}
--- a/src/pages/settings/components/Theming/ThemePlaylists.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists.tsx
@@ -57,8 +57,10 @@ function ThemePlaylists() {
 	useEffect(() => {
 		if (themePlaylistData && isThemePlaylistDataFetched) {
 			setThemePlaylists(
-				themePlaylistData.filter((a: ThemePlaylist) =>
-					a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+				themePlaylistData.filter(
+					(a: ThemePlaylist) =>
+						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+						a.name.includes('Time of Day'),
 				),
 			);
 		}
@@ -95,7 +97,7 @@ function ThemePlaylists() {
 					isLoading={isLoading}
 					setIsLoading={setIsLoading}
 				/>
-				{allThemeData ? (
+				{allThemeData && (
 					<>
 						<Group mt={'6rem'} justify='center' align='center' pos={'relative'}>
 							<Text
@@ -293,8 +295,6 @@ function ThemePlaylists() {
 							)}
 						</Group>
 					</>
-				) : (
-					<></>
 				)}
 			</Stack>
 		</Stack>
--- a/src/pages/settings/components/Theming/Themes.tsx
+++ b/src/pages/settings/components/Theming/Themes.tsx
@@ -55,7 +55,6 @@ function ThemesSettings() {
 		currentThemePlaylist,
 		setCurrentThemePlaylist,
 	} = useCommonHooks();
-
 	const handleOpen = (theme: Theme) => {
 		setSelectedTheme(theme);
 		open();
@@ -267,7 +266,7 @@ function ThemesSettings() {
 									navigate(`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`);
 								} else {
 									setCurrentThemePlaylist('All');
-									setCurrentTheme('random');
+									setCurrentTheme(theme.name);
 								}
 							}}
 						>