Updated Settings pages

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

@@ -1,10 +1,18 @@
-import { Box, Button, Group, Stack, Text } from '@mantine/core';
+import {
+	ActionIcon,
+	Box,
+	Button,
+	Group,
+	Highlight,
+	Popover,
+	Stack,
+	Text,
+} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { modals } from '@mantine/modals';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useState } from 'react';
-import { FiChevronRight, FiPlus } from 'react-icons/fi';
-import { buttonClasses, textClasses } from 'styles';
+import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
+import { actionIconClasses, buttonClasses, textClasses } from 'styles';
 import ThemePlaylistCard from './ThemePlaylistCard';
 import ThemePlaylistModal from './ThemePlaylistModal';
 
@@ -15,8 +23,7 @@ function ThemePlaylists() {
 	const { data: themePlaylists } = useQueryAPI({
 		endpoint: 'api/themePlaylists',
 	});
-	const { mutateAsync: createPlaylist } = useMutationAPI();
-	const { mutateAsync: deletePlaylist } = useMutationAPI();
+	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
 	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
@@ -31,7 +38,7 @@ function ThemePlaylists() {
 	};
 
 	const handleSavePlaylist = () => {
-		createPlaylist({
+		mutateAsync({
 			method: selectedPlaylist.id === undefined ? 'POST' : 'PATCH',
 			endpoint: 'api/themePlaylists',
 			body: selectedPlaylist,
@@ -39,24 +46,6 @@ function ThemePlaylists() {
 		close();
 	};
 
-	const openDeleteConfirmModal = (playlist: any) =>
-		modals.openConfirmModal({
-			title: 'Are you sure you want to delete this theme playlist?',
-			labels: { confirm: 'Delete', cancel: 'Cancel' },
-			confirmProps: { color: 'red' },
-			onConfirm: () =>
-				deletePlaylist({
-					method: 'DELETE',
-					endpoint: 'api/themePlaylists',
-					body: playlist,
-				}),
-		});
-
-	const handleDeletePlaylist = (playlist: any) => {
-		openDeleteConfirmModal(playlist);
-		close();
-	};
-
 	return (
 		<>
 			<ThemePlaylistModal
@@ -66,7 +55,7 @@ function ThemePlaylists() {
 				setSelectedPlaylist={setSelectedPlaylist}
 				handleSavePlaylist={handleSavePlaylist}
 				allThemes={allThemes}
-				createPlaylist={createPlaylist}
+				createPlaylist={mutateAsync}
 			/>
 			<Stack h={'100%'} w={'100%'}>
 				<Group w={'100%'} justify='space-between'>
@@ -74,6 +63,45 @@ function ThemePlaylists() {
 						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 							Theme Playlists
 						</Text>
+						<Popover withArrow withOverlay withinPortal={false}>
+							<Popover.Target>
+								<ActionIcon
+									className={actionIconClasses.settingsTooltip}
+									classNames={actionIconClasses}
+								>
+									<FiHelpCircle />
+								</ActionIcon>
+							</Popover.Target>
+							<Popover.Dropdown
+								style={{
+									color: theme.primaryColor,
+									backgroundColor: theme.backgroundColor,
+									width: '500px',
+								}}
+							>
+								<Stack>
+									<Text className={textClasses.settingsTooltip} classNames={textClasses}>
+										{'Theme playlists can be created here and applied to the homepage.'}
+									</Text>
+									<Highlight
+										highlight={['Theme', 'Themes', 'Playlist', 'Playlists']}
+										className={textClasses.settingsTooltip}
+										classNames={textClasses}
+										highlightStyles={{
+											backgroundImage:
+												'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+											fontWeight: 700,
+											WebkitBackgroundClip: 'text',
+											WebkitTextFillColor: 'transparent',
+										}}
+									>
+										{
+											'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.'
+										}
+									</Highlight>
+								</Stack>
+							</Popover.Dropdown>
+						</Popover>
 						<Button
 							className={buttonClasses.tableButton}
 							classNames={buttonClasses}
@@ -123,9 +151,7 @@ function ThemePlaylists() {
 											handleOpen={handleOpen}
 											currentThemePlaylist={currentThemePlaylist}
 											setCurrentThemePlaylist={setCurrentThemePlaylist}
-											handleDeletePlaylist={handleDeletePlaylist}
 											allThemes={allThemes}
-											createPlaylist={createPlaylist}
 										/>
 									</Box>
 								</Group>
@@ -164,11 +190,7 @@ function ThemePlaylists() {
 										<ThemePlaylistCard
 											cardPlaylist={cardPlaylist}
 											handleOpen={handleOpen}
-											currentThemePlaylist={currentThemePlaylist}
-											setCurrentThemePlaylist={setCurrentThemePlaylist}
-											handleDeletePlaylist={handleDeletePlaylist}
 											allThemes={allThemes}
-											createPlaylist={createPlaylist}
 										/>
 									</Box>
 								</Group>