Refactoring theme files

src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCard.tsx

@@ -8,7 +8,9 @@ import {
 import { DeleteItemModal } from 'components';
 import { useCommonHooks } from 'hooks';
 import type { Theme, ThemePlaylist } from 'types';
-import { MiniAppItem, MiniGroupItem, ThemeManagementPill } from '.';
+import { MiniAppItem } from './components/MiniAppItem';
+import { MiniGroupItem } from './components/MiniGroupItem';
+import { ThemeManagementPill } from './components/ThemeManagementPill';
 
 export function ThemeCard({
 	cardTheme,

src/pages/settings/components/Theming/Themes/ThemeCard/index.ts

@@ -0,0 +1 @@
+export { ThemeCard } from './ThemeCard';

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

@@ -4,8 +4,8 @@ import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, textInputClasses } from 'styles';
 import type { Theme } from 'types';
-import { NewThemeStarter } from './NewThemeStarter';
-import { ThemeEditor } from './ThemeEditor';
+import { NewThemeStarter } from './components/NewThemeStarter';
+import { ThemeEditor } from './components/ThemeEditor';
 
 export function ThemeModal({
 	opened,

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

@@ -4,9 +4,9 @@ import { useState } from 'react';
 import { FaArrowRight } from 'react-icons/fa';
 import { textClasses } from 'styles';
 import type { Theme } from 'types';
-import { ThemeCard } from '../ThemeCard';
-import { ThemeMiniCard } from '../ThemeMiniCard';
-import { ThemePreviewMiddleware } from '../ThemePreviewMiddleware';
+import { ThemeCard } from '../../ThemeCard';
+import { ThemeMiniCard } from '../../ThemeMiniCard';
+import { ThemePreviewMiddleware } from '../../ThemePreviewMiddleware';
 
 export function NewThemeStarter({
 	allThemes,

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

@@ -20,7 +20,7 @@ import { FaShuffle } from 'react-icons/fa6';
 import { FiImage, FiSave, FiShuffle, FiX } from 'react-icons/fi';
 import { scrollAreaClasses, textClasses, textInputClasses } from 'styles';
 import { BackgroundProperties, type Theme } from 'types';
-import { ThemeModalContent } from '../ThemeModalContent';
+import { ThemeModalContent } from './ThemeModalContent';
 
 export function ThemeEditor({
 	backgroundList,

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

@@ -1,7 +1,7 @@
-import { Select, Stack, Text } from '@mantine/core';
+import { Group, Select, Stack, Text } from '@mantine/core';
+import { AppItem } from 'components';
 import { selectClasses } from 'styles';
 import type { Theme } from 'types';
-import { ThemeExampleApp } from './ThemeExampleApp';
 
 export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 	return (
@@ -73,7 +73,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 						gap: '.25rem',
 						backgroundSize: 'cover',
 						borderBottom: '0px solid',
-						display: 'grid',
+						display: 'flex',
 						gridColumnGap: '5px',
 						gridRowGap: '5px',
 						gridTemplateColumns: '1fr 1fr 1fr',
@@ -83,10 +83,46 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 						justifyContent: 'center',
 						alignContent: 'center',
 					}}
+					w={'100%'}
 				>
-					<ThemeExampleApp selectedTheme={selectedTheme} />
-					<ThemeExampleApp selectedTheme={selectedTheme} />
-					<ThemeExampleApp selectedTheme={selectedTheme} />
+					<Group
+						style={{
+							'--mantine-color-primary-0': selectedTheme?.primaryColor,
+							'--mantine-color-accent-0': selectedTheme?.accentColor,
+							'--mantine-color-background-0': selectedTheme?.backgroundColor,
+							'--mantine-color-border-0': selectedTheme?.borderColor,
+							'--mantine-color-search-0': selectedTheme?.searchColor,
+							display: 'grid',
+							gridTemplateColumns: '1fr 1fr 1fr',
+						}}
+						w={'100%'}
+						display={'grid'}
+					>
+						<AppItem
+							url='https://google.com'
+							icon='FaGoogle'
+							name='Google'
+							enabled={1}
+							scale={1}
+							linksActive={false}
+						/>
+						<AppItem
+							url='https://google.com'
+							icon='FaGoogle'
+							name='Google'
+							enabled={1}
+							scale={1}
+							linksActive={false}
+						/>
+						<AppItem
+							url='https://google.com'
+							icon='FaGoogle'
+							name='Google'
+							enabled={1}
+							scale={1}
+							linksActive={false}
+						/>
+					</Group>
 				</Stack>
 			</Stack>
 			<Stack gap={0} w={'100%'}>

src/pages/settings/components/Theming/Themes/ThemeModal/index.ts

@@ -0,0 +1 @@
+export { ThemeModal } from './ThemeModal';

src/pages/settings/components/Theming/Themes/ThemePreviewMiddleware.tsx

@@ -2,7 +2,7 @@ import { Group, Overlay, Popover } from '@mantine/core';
 import { useLongPress } from '@mantine/hooks';
 import { useState } from 'react';
 import { ThemeMiniCard } from './ThemeMiniCard';
-import { ThemeModalContent } from './ThemeModalContent';
+import { ThemeModalContent } from './ThemeModal/components/ThemeModalContent';
 
 export function ThemePreviewMiddleware({
 	newThemeList,

src/pages/settings/components/Theming/Themes/ThemeSelect.tsx

@@ -1,126 +0,0 @@
-import {
-	type ComboboxItem,
-	type ComboboxLikeRenderOptionInput,
-	Group,
-	Select,
-	Text,
-} from '@mantine/core';
-import type { Theme, ThemePlaylist } from 'types';
-
-export function ThemeSelect({
-	allThemes,
-	createPlaylist,
-	themeList,
-	selectedPlaylist,
-	index,
-	timeIndex,
-}: {
-	allThemes: Theme[];
-	createPlaylist: (arg0: object) => void;
-	themeList: Array<string>;
-	selectedPlaylist: ThemePlaylist;
-	index: number;
-	timeIndex: string;
-}) {
-	const theme: Theme | undefined = allThemes.find(
-		(theme: Theme) => `${theme.id}` === themeList[index],
-	);
-	return (
-		<Group>
-			<Text w={'100px'}>{timeIndex}</Text>
-			<Select
-				labelProps={{ display: 'none' }}
-				placeholder='Select Theme'
-				defaultValue={themeList[index]}
-				data={allThemes?.map((theme: Theme) => {
-					return {
-						value: `${theme.id}`,
-						label: theme.name,
-					};
-				})}
-				onChange={(data) => {
-					const newThemeList = themeList;
-					newThemeList[index] = data as string;
-					createPlaylist({
-						method: 'PATCH',
-						endpoint: 'api/themePlaylists',
-						body: {
-							id: selectedPlaylist?.id,
-							name: selectedPlaylist?.name,
-							themeList: JSON.stringify(newThemeList),
-						},
-					});
-				}}
-				styles={{
-					option: {
-						padding: '.25rem',
-					},
-					input: {
-						textAlign: 'center',
-						height: '60px',
-						color: theme?.primaryColor,
-						backgroundImage:
-							theme?.backgroundImage.toLocaleLowerCase() !== 'none'
-								? `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${theme?.backgroundImage})`
-								: undefined,
-						backgroundSize:
-							theme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
-						backgroundColor:
-							theme?.backgroundImage.toLocaleLowerCase() === 'none'
-								? theme?.backgroundColor
-								: undefined,
-						backgroundPosition: 'center',
-						border: `solid ${theme?.borderColor}`,
-						borderRadius: '8px',
-					},
-				}}
-				renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
-					const theme = allThemes?.find(
-						(theme: Theme) => `${theme.id}` === item.option.value,
-					);
-					return (
-						<Group
-							gap={0}
-							align='center'
-							justify='center'
-							w={'100%'}
-							h={'60px'}
-							style={{
-								backgroundImage:
-									theme?.backgroundImage.toLocaleLowerCase() !== 'none'
-										? `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/thumbs/${theme?.backgroundImage})`
-										: undefined,
-								backgroundSize:
-									theme?.backgroundImage.toLocaleLowerCase() !== 'none'
-										? 'cover'
-										: undefined,
-								backgroundColor:
-									theme?.backgroundImage.toLocaleLowerCase() === 'none'
-										? theme?.backgroundColor
-										: undefined,
-								backgroundPosition: 'center',
-								border: `solid ${theme?.borderColor}`,
-								borderRadius: '8px',
-							}}
-						>
-							<Text
-								bg={theme?.backgroundColor}
-								c={theme?.primaryColor}
-								size='md'
-								style={{
-									padding: '.25rem',
-									borderRadius: '8px',
-								}}
-							>
-								{
-									allThemes.find((theme: Theme) => `${theme.id}` === item.option.value)
-										?.name
-								}
-							</Text>
-						</Group>
-					);
-				}}
-			/>
-		</Group>
-	);
-}

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

@@ -20,7 +20,7 @@ import { switchClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import { BackgroundModal } from '../Backgrounds';
 import { ThemeCard } from './ThemeCard';
-import { ThemeModal } from './ThemeModal/ThemeModal';
+import { ThemeModal } from './ThemeModal';
 
 export function Themes() {
 	const backgroundsEndpoint = 'api/backgrounds';

src/pages/settings/components/Theming/Themes/TimeOfDay.tsx

@@ -1,52 +0,0 @@
-import { Stack } from '@mantine/core';
-import type { Theme, ThemePlaylist } from 'types';
-import { ThemeSelect } from './ThemeSelect';
-
-export function TimeOfDay({
-	createPlaylist,
-	themeList,
-	allThemes,
-	selectedPlaylist,
-}: {
-	createPlaylist: () => void;
-	themeList: Array<string>;
-	allThemes: Theme[];
-	selectedPlaylist: ThemePlaylist;
-}) {
-	return (
-		<Stack>
-			<ThemeSelect
-				allThemes={allThemes}
-				createPlaylist={createPlaylist}
-				themeList={themeList}
-				selectedPlaylist={selectedPlaylist}
-				index={0}
-				timeIndex='00:00 - 05:59'
-			/>
-			<ThemeSelect
-				allThemes={allThemes}
-				createPlaylist={createPlaylist}
-				themeList={themeList}
-				selectedPlaylist={selectedPlaylist}
-				index={1}
-				timeIndex='06:00 - 11:59'
-			/>
-			<ThemeSelect
-				allThemes={allThemes}
-				createPlaylist={createPlaylist}
-				themeList={themeList}
-				selectedPlaylist={selectedPlaylist}
-				index={2}
-				timeIndex='12:00 - 17:59'
-			/>
-			<ThemeSelect
-				allThemes={allThemes}
-				createPlaylist={createPlaylist}
-				themeList={themeList}
-				selectedPlaylist={selectedPlaylist}
-				index={3}
-				timeIndex='18:00 - 23:59'
-			/>
-		</Stack>
-	);
-}

src/pages/settings/components/Theming/Themes/index.ts

@@ -1,12 +1,3 @@
-export { MiniAppItem } from './MiniAppItem';
-export { MiniGroupItem } from './MiniGroupItem';
-export { ThemeCard } from './ThemeCard';
-export { ThemeExampleApp } from './ThemeExampleApp';
-export { ThemeManagementPill } from './ThemeManagementPill';
 export { ThemeMiniCard } from './ThemeMiniCard';
-export { ThemeModal } from './ThemeModal/ThemeModal';
-export { ThemeModalContent } from './ThemeModalContent';
 export { ThemePreviewMiddleware } from './ThemePreviewMiddleware';
-export { ThemeSelect } from './ThemeSelect';
 export { Themes } from './Themes';
-export { TimeOfDay } from './TimeOfDay';