New settings pages

2025-03-20 17:09:07 -05:00
parent cecdc84cf6
commit 321d620d3c
28 changed files with 529 additions and 228 deletions
--- a/src/pages/settings/components/Theming/Themes.tsx
+++ b/src/pages/settings/components/Theming/Themes.tsx
@@ -0,0 +1,176 @@
+import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
+import { FiChevronRight, FiPlus } from 'react-icons/fi';
+import '@mantine/core/styles/ModalBase.css';
+import '@mantine/core/styles/Modal.css';
+import { modals } from '@mantine/modals';
+import { buttonClasses, textClasses } from 'styles';
+import ThemeCard from './ThemeCard';
+import ThemeModal from './ThemeModal';
+function ThemesSettings() {
+	const { data: allThemes } = useQueryAPI({
+		endpoint: 'api/themes',
+	});
+	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
+		endpoint: 'api/backgrounds',
+	});
+	const { mutateAsync: createTheme } = useMutationAPI();
+	const { mutateAsync: deleteTheme } = useMutationAPI();
+	const [opened, { open, close }] = useDisclosure(false);
+	const [colorId, setColorId] = useState<string>('');
+	const [colorValue, setColorValue] = useState('#000000');
+	const [backgroundList, setBackgroundList] = useState<any>(['None']);
+	const [selectedTheme, setSelectedTheme] = useState<any>({});
+	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
+	const { currentTheme, setCurrentTheme, theme, setCurrentThemePlaylist } =
+		useCommonHooks();
+
+	const handleOpen = (theme: any) => {
+		setSelectedTheme(theme);
+		open();
+	};
+
+	const handleClose = () => {
+		close();
+		closePicker();
+	};
+
+	const handleSaveTheme = () => {
+		createTheme({
+			method: selectedTheme.id === undefined ? 'POST' : 'PATCH',
+			endpoint: 'api/themes',
+			body: selectedTheme,
+		});
+		close();
+	};
+
+	const openDeleteConfirmModal = (theme: any) =>
+		modals.openConfirmModal({
+			title: 'Are you sure you want to delete this theme?',
+			labels: { confirm: 'Delete', cancel: 'Cancel' },
+			confirmProps: { color: 'red' },
+			onConfirm: () =>
+				deleteTheme({ method: 'DELETE', endpoint: 'api/themes', body: theme }),
+		});
+
+	const handleDeleteTheme = (theme: any) => {
+		openDeleteConfirmModal(theme);
+		close();
+	};
+
+	useEffect(() => {
+		if (backgroundData && isBackgroundFetched) {
+			setBackgroundList(['None', ...backgroundData]);
+		}
+	}, [backgroundData, isBackgroundFetched]);
+	return (
+		<>
+			<ThemeModal
+				opened={opened}
+				handleClose={handleClose}
+				selectedTheme={selectedTheme}
+				setSelectedTheme={setSelectedTheme}
+				theme={theme}
+				setColorId={setColorId}
+				colorId={colorId}
+				setColorValue={setColorValue}
+				openPicker={openPicker}
+				backgroundList={backgroundList}
+				pickerOpen={pickerOpen}
+				colorValue={colorValue}
+				closePicker={closePicker}
+				handleSaveTheme={handleSaveTheme}
+			/>
+			<Stack h={'100%'} w={'100%'}>
+				<Group w={'100%'} justify='space-between'>
+					<Group>
+						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+							Themes
+						</Text>
+						<Button
+							mb={'-1.5em'}
+							className={buttonClasses.tableButton}
+							classNames={buttonClasses}
+							onClick={() => {
+								setSelectedTheme({
+									id: undefined,
+									name: 'default',
+									backgroundImage: 'none',
+									backgroundColor: '#EEEEEE',
+									searchColor: '#00000033',
+									primaryColor: '#222222',
+									accentColor: '#5c5c5c',
+									borderColor: '#5c5c5c',
+								});
+								open();
+							}}
+						>
+							<FiPlus />
+						</Button>
+					</Group>
+					<Switch
+						label={<Text c={theme.primaryColor}>Random Theme</Text>}
+						labelPosition='left'
+						checked={currentTheme === 'random'}
+						onChange={(e) => {
+							setCurrentTheme(e.target.checked ? 'random' : theme.name);
+							setCurrentThemePlaylist('All');
+						}}
+						color={theme.primaryColor}
+					/>
+				</Group>
+				<Group justify='center' align='center' pos={'relative'}>
+					<Overlay
+						display={currentTheme === 'random' ? 'flex' : 'none'}
+						blur={5}
+						style={{
+							borderRadius: '10px',
+							marginTop: '-15px',
+							marginBottom: '-10px',
+							boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
+						}}
+						pos={'absolute'}
+					/>
+					{allThemes?.map((cardTheme: any) => (
+						<Group key={cardTheme.name} pos={'relative'}>
+							{cardTheme.name === currentTheme && (
+								<FiChevronRight
+									style={{
+										position: 'absolute',
+										left: -14,
+										zIndex: 1,
+										fontSize: '2em',
+										fontWeight: 'bold',
+										borderRadius: '50%',
+										backgroundColor: cardTheme.borderColor,
+										color:
+											cardTheme.borderColor === cardTheme.primaryColor
+												? cardTheme.accentColor
+												: cardTheme.primaryColor,
+									}}
+								/>
+							)}
+							<Box
+								style={{
+									zIndex:
+										currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
+								}}
+							>
+								<ThemeCard
+									allThemes={allThemes}
+									cardTheme={cardTheme}
+									handleOpen={handleOpen}
+									handleDeleteTheme={handleDeleteTheme}
+									createTheme={createTheme}
+								/>
+							</Box>
+						</Group>
+					))}
+				</Group>
+			</Stack>
+		</>
+	);
+}
+export default ThemesSettings;