Updates to search component

src/pages/homepage/components/Search/Search.tsx

@@ -1,5 +1,13 @@
-import { Group, type OptionsFilter, Overlay, Select, Stack, Text } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import {
+	Card,
+	Group,
+	type OptionsFilter,
+	Overlay,
+	Select,
+	Stack,
+	Text,
+} from '@mantine/core';
+import { useDisclosure, useElementSize } from '@mantine/hooks';
 import { HelpModal, WeatherModal } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
@@ -9,6 +17,7 @@ import * as vsc from 'react-icons/vsc';
 import { selectClasses } from 'styles';
 import type {
 	Application,
+	Bookmark,
 	CurrentWeather,
 	ExtendedForecast,
 	Provider,
@@ -29,6 +38,7 @@ export default function Search({
 	closeWeatherModal: () => void;
 	openWeatherModal: () => void;
 }) {
+	const { ref, height } = useElementSize();
 	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
 		endpoint: 'api/providers',
@@ -37,11 +47,15 @@ export default function Search({
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
+	const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
+		endpoint: 'api/bookmarks',
+	});
 	const { data: defaultProviderData, isFetched: defaultProviderDataIsFetched } =
 		useQueryAPI({
 			endpoint: 'api/providers/default',
 		});
 	const [applications, setApplications] = useState<Application[]>([]);
+	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const searchEndpoint = 'api/searchHistory';
 	const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
 		endpoint: searchEndpoint,
@@ -52,7 +66,7 @@ export default function Search({
 	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
 		useDisclosure(false);
 	const [dropdownOpened, { open: openDropdown, close: closeDropdown }] = useDisclosure();
-	const [listIndex, setListIndex] = useState(0);
+	const [listIndex, setListIndex] = useState(-1);
 	const {
 		isMobile,
 		urlPattern,
@@ -73,9 +87,12 @@ export default function Search({
 	} = useCommonHooks();
 	const [placeholderValue, setPlaceholderValue] = useState<string>('');
 	const [value, setValue] = useState(0);
+	const [historyMult, setHistoryMult] = useState(1);
 
 	const handleResetSearch = () => {
 		setSearchValue('');
+		setListIndex(-1);
+		setHistoryMult(1);
 		setProviderLabel(defaultProviderLabel);
 		setProviderURL(defaultProviderURL);
 	};
@@ -137,7 +154,7 @@ export default function Search({
 				if (/^(https?:\/\/).*/i.test(item.target.value))
 					window.location = item.target.value;
 				else open(`https://${item.target.value}`, '_self');
-			} else {
+			} else if (item.target.value !== '') {
 				mutateAsync({
 					method: 'POST',
 					endpoint: searchEndpoint,
@@ -145,13 +162,15 @@ export default function Search({
 				}).then(() => {
 					open(`${providerURL}${subtext}`, '_self');
 				});
+			} else {
+				open(`${providerURL}${subtext}`, '_self');
 			}
 		}
 	};
 
 	const handleKeyUp = (item: any) => {
 		if (item.code === 'Escape') {
-			setListIndex(0);
+			setListIndex(-1);
 			handleResetSearch();
 			setPlaceholderValue('');
 			if (dropdownOpened) {
@@ -277,17 +296,28 @@ export default function Search({
 					};
 				});
 		}
-		return options
-			.filter((option: any) => {
-				return splittedSearch.every((searchWord) =>
-					option.value
-						.toLowerCase()
-						.trim()
-						.split(' ')
-						.some((word: string) => word.includes(searchWord)),
-				);
-			})
-			.slice(0, 10);
+		return [
+			...options
+				.filter((option: any) => {
+					return splittedSearch.every((searchWord) =>
+						option.value
+							.toLowerCase()
+							.trim()
+							.split(' ')
+							.some((word: string) => word.includes(searchWord)),
+					);
+				})
+				.slice(0, 10 * historyMult),
+			{
+				label: 'Load more history...',
+				value: 'load',
+				id: 0,
+				dateTimeStamp: '',
+				prefix: '',
+				provider: '',
+				searchTerm: '',
+			},
+		];
 	};
 
 	useEffect(() => {
@@ -302,11 +332,23 @@ export default function Search({
 		}
 	}, [applicationData, isApplicationDataFetching]);
 
+	useEffect(() => {
+		if (bookmarkData && bookmarksIsFetched) {
+			setBookmarks(
+				bookmarkData.filter(
+					(bookmark: Bookmark) =>
+						bookmark.enabled === 1 &&
+						bookmark.name.toLowerCase().includes(searchValue.toLowerCase()),
+				),
+			);
+		}
+	}, [bookmarksIsFetched, bookmarkData, searchValue]);
+
 	useEffect(() => {
 		if (historyData && historyDataIsFetched) {
 			setSearchHistory(historyData);
 			if (filteredHistory.length === 0) {
-				setFilteredHistory(historyData.slice(0, 10));
+				setFilteredHistory(historyData.slice(0, 10 * historyMult));
 			}
 		}
 	}, [historyData, historyDataIsFetched]);
@@ -323,15 +365,13 @@ export default function Search({
 
 	useEffect(() => {
 		const splittedSearch = searchValue.toLowerCase().trim().split(' ');
-		const filtered = searchHistory
-			.filter((item: SearchHistoryItem) => {
-				const option = `${item.prefix} ${item.searchTerm}`;
-				const words = option.toLowerCase().trim().split(' ');
-				return splittedSearch.every((searchWord) =>
-					words.some((word: string) => word.includes(searchWord)),
-				);
-			})
-			.slice(0, 10);
+		const filtered = searchHistory.filter((item: SearchHistoryItem) => {
+			const option = `${item.prefix} ${item.searchTerm}`;
+			const words = option.toLowerCase().trim().split(' ');
+			return splittedSearch.every((searchWord) =>
+				words.some((word: string) => word.includes(searchWord)),
+			);
+		});
 		setFilteredHistory(filtered);
 	}, [searchValue]);
 
@@ -344,7 +384,6 @@ export default function Search({
 			setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
 		}
 	}, [defaultProviderData, defaultProviderDataIsFetched]);
-
 	return (
 		<>
 			{dropdownOpened && <Overlay blur={5} />}
@@ -358,8 +397,12 @@ export default function Search({
 					display: 'inline-block',
 					gap: 0,
 				}}
+				align='center'
+				justify='center'
+				w={'100%'}
 			>
 				<Select
+					ref={ref}
 					classNames={selectClasses}
 					data={searchHistory.map((item: SearchHistoryItem) => ({
 						label: `${item.provider}`,
@@ -387,15 +430,47 @@ export default function Search({
 					searchable
 					autoFocus={!isMobile}
 					leftSection={providerLabel}
-					rightSection={<div />}
+					rightSection={searchValue === '' ? <div /> : undefined}
+					clearable
+					onClear={handleResetSearch}
+					clearButtonProps={{
+						'aria-label': 'Clear search',
+						style: { color: 'var(--mantine-color-accent-0)', marginRight: '.5rem' },
+					}}
+					scrollAreaProps={{ viewportRef: ref }}
 					renderOption={(item: any) => {
 						const Icon = allIcons[item.option.icon];
 						return !searchValue.startsWith('!') ? (
-							<SearchSelectItem
-								item={item}
-								handleSearchHistoryItem={handleSearchHistoryItem}
-								searchEndpoint={searchEndpoint}
-							/>
+							item.option.value === 'load' ? (
+								<Group
+									pos={'relative'}
+									m={0}
+									p={0}
+									gap={0}
+									w={'100%'}
+									h={'2rem'}
+									onClick={(e) => {
+										e.preventDefault();
+										e.stopPropagation();
+										setHistoryMult((prev: number) => prev + 1);
+									}}
+								>
+									<Text
+										w={'100%'}
+										c={'var(--mantine-color-accent-0)'}
+										style={{ textAlign: 'center' }}
+									>
+										{item.option.label}
+									</Text>
+								</Group>
+							) : (
+								<SearchSelectItem
+									item={item}
+									handleSearchHistoryItem={handleSearchHistoryItem}
+									searchEndpoint={searchEndpoint}
+									setSearchValue={setSearchValue}
+								/>
+							)
 						) : (
 							<Group
 								pos={'relative'}
@@ -430,7 +505,7 @@ export default function Search({
 					}}
 					onBlur={() => {
 						setPlaceholderValue('');
-						setListIndex(0);
+						setListIndex(-1);
 						closeDropdown();
 					}}
 					onFocus={() => {
@@ -443,9 +518,80 @@ export default function Search({
 							e.preventDefault();
 						}
 					}}
+					onDoubleClick={() => {
+						dropdownOpened ? closeDropdown() : openDropdown();
+					}}
 					onInput={onInput}
 					onKeyUp={handleKeyUp}
 				/>
+				{dropdownOpened && (
+					<Group w={'100%'} justify='center'>
+						<Card
+							w={'100%'}
+							mt={`calc(${height}px + 1.5rem)`}
+							pos={'relative'}
+							style={{
+								zIndex: 1000,
+								opacity: searchValue && dropdownOpened && bookmarks.length > 0 ? 1 : 0,
+								background: 'transparent',
+							}}
+						>
+							<Stack gap={8}>
+								<Group
+									w={'100%'}
+									p={'1rem'}
+									style={{
+										backgroundColor: 'var(--mantine-color-search-0)',
+										backdropFilter: 'blur(15px) brightness(1.75)',
+										borderRadius: '10px',
+									}}
+								>
+									<Text c={'var(--mantine-color-primary-0)'} fz={'1.5rem'}>
+										Recommended items:
+									</Text>
+								</Group>
+								<Group
+									w={'50%'}
+									p={'1rem'}
+									justify='center'
+									style={{
+										backgroundColor: 'var(--mantine-color-search-0)',
+										backdropFilter: 'blur(15px) brightness(1.75)',
+										borderRadius: '10px',
+									}}
+								>
+									<Stack>
+										<Text
+											c={'var(--mantine-color-primary-0)'}
+											fz={'1.25rem'}
+											style={{ fontWeight: 'bold', textDecoration: 'underline' }}
+										>
+											Bookmarks
+										</Text>
+										{bookmarks
+											.map((bookmark: Bookmark) => (
+												<Text
+													key={bookmark.name}
+													component='a'
+													href={bookmark.url}
+													c={'var(--mantine-color-primary-0)'}
+													style={{
+														backgroundColor: 'var(--mantine-color-search-0)',
+														padding: '.5rem',
+														borderRadius: '10px',
+													}}
+												>
+													{bookmark.name}
+												</Text>
+											))
+											.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
+											.slice(0, 5)}
+									</Stack>
+								</Group>
+							</Stack>
+						</Card>
+					</Group>
+				)}
 				<HelpModal
 					handleResetSearch={handleResetSearch}
 					applicationData={applications}

src/pages/homepage/components/Search/SearchSelectItem.tsx

@@ -1,11 +1,16 @@
 import { ActionIcon, Group, Text } from '@mantine/core';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
-import { FiEdit, FiTrash } from 'react-icons/fi';
+import { FiArrowUpRight, FiTrash } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';
 
-function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any) {
-	const { isMobile, theme, setSearchValue } = useCommonHooks();
+function SearchSelectItem({
+	item,
+	handleSearchHistoryItem,
+	searchEndpoint,
+	setSearchValue,
+}: any) {
+	const { isMobile, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [showFillButton, setShowFillButton] = useState(false);
 	const m = new Date(item.option.dateTimeStamp);
@@ -17,11 +22,11 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
 	const dateString = isMobile
 		? `${month}/${day}/${year}`
 		: `${month}/${day}/${year} ${hours}:${minutes}`;
+
 	return (
 		<Group
 			w={'100%'}
 			display={'flex'}
-			justify={'space-between'}
 			gap={0}
 			onClick={() => {
 				handleSearchHistoryItem(item);
@@ -33,7 +38,7 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
 				setShowFillButton(false);
 			}}
 		>
-			<Group m={0} p={0} miw={'160px'}>
+			<Group m={0} p={0} w={'160px'}>
 				<Text
 					style={{
 						backgroundColor: `${theme.primaryColor}33`,
@@ -44,25 +49,13 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
 				>
 					{item.option.provider}
 				</Text>
-				{showFillButton && (
-					<ActionIcon
-						className={actionIconClasses.selectOptionActions}
-						classNames={actionIconClasses}
-						onClick={(e) => {
-							e.stopPropagation();
-							setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
-						}}
-					>
-						<FiEdit />
-					</ActionIcon>
-				)}
 			</Group>
 			<Group
 				m={0}
 				p={0}
 				gap={0}
 				justify='space-between'
-				w={'65%'}
+				w={'calc(100% - 160px)'}
 				style={{
 					whiteSpace: 'nowrap',
 					overflow: 'hidden',
@@ -90,8 +83,19 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
 					{dateString}
 				</Text>
 			</Group>
-			<Group m={0} p={0} right={'1rem'} w={'24px'}>
-				{showFillButton && (
+			{showFillButton && (
+				<Group m={0} p={0} gap={0} right={'8rem'} w={'fit-content'} pos={'absolute'}>
+					<ActionIcon
+						className={actionIconClasses.selectOptionActions}
+						classNames={actionIconClasses}
+						onClick={(e) => {
+							e.stopPropagation();
+							setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
+						}}
+					>
+						<FiArrowUpRight />
+					</ActionIcon>
+
 					<ActionIcon
 						className={actionIconClasses.selectOptionActions}
 						classNames={actionIconClasses}
@@ -106,8 +110,8 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
 					>
 						<FiTrash />
 					</ActionIcon>
-				)}
-			</Group>
+				</Group>
+			)}
 		</Group>
 	);
 }

src/pages/homepage/components/SettingsButton/ThemingCard.tsx

@@ -1,3 +1,4 @@
+import { useTextTicker } from '@gfazioli/mantine-text-animate';
 import {
 	ActionIcon,
 	type ComboboxItem,
@@ -12,7 +13,7 @@ import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiShuffle } from 'react-icons/fi';
-import { actionIconClasses, selectClasses, stackClasses } from 'styles';
+import { actionIconClasses, selectClasses, stackClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 
 function ThemingCard() {
@@ -38,43 +39,46 @@ function ThemingCard() {
 		currentThemePlaylist,
 		setCurrentThemePlaylist,
 	} = useCommonHooks();
+
+	const [current, setCurrent] = useState<string>(theme.name);
+
+	const { text, isAnimating, start, stop } = useTextTicker({
+		initialText: 'target',
+		value: theme.name,
+		delay: 0,
+		speed: 1,
+		easing: 'ease-in-out',
+		animate: current !== theme.name,
+	});
+
+	useEffect(() => {
+		if (theme.name !== current) {
+			start();
+		} else {
+			setCurrent(theme.name);
+			stop();
+		}
+	}, [theme]);
+
 	return (
 		<Stack
 			gap={0}
+			justify='space-between'
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
+			pos={'relative'}
 			style={{ aspectRatio: isMobile ? undefined : '1/1' }}
 		>
-			<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
-			<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
-				<Tooltip
-					label='Shuffle Themes'
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
-					withArrow
-				>
-					<ActionIcon
-						className={actionIconClasses.menuActions}
-						classNames={actionIconClasses}
-						disabled={currentThemePlaylist === 'Time of Day'}
-						style={{
-							backgroundColor:
-								currentTheme === 'random'
-									? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
-									: 'transparent',
-							color:
-								currentTheme === 'random'
-									? 'var(--mantine-color-accent-0)'
-									: 'var(--mantine-color-primary-0)',
-						}}
-						onClick={() => {
-							setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
-							setCurrentThemePlaylist('All');
-						}}
-					>
-						<FiShuffle />
-					</ActionIcon>
-				</Tooltip>
+			<Menu.Label pb={'2rem'}>Themes</Menu.Label>
+			<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} h={'100%'} gap={0}>
+				<Stack gap={0}>
+					<Text className={textClasses.currentTheme} classNames={textClasses}>
+						Current theme:
+					</Text>
+					<Text className={textClasses.themeName} classNames={textClasses}>
+						{text}
+					</Text>
+				</Stack>
 				<Tooltip
 					label='Random Theme'
 					c={'var(--mantine-color-primary-0)'}
@@ -84,11 +88,29 @@ function ThemingCard() {
 					<ActionIcon
 						className={actionIconClasses.menuActions}
 						classNames={actionIconClasses}
+						h={40}
 						style={{
 							backgroundColor: 'transparent',
 							color: 'var(--mantine-color-primary-0)',
+							borderTopRightRadius: 0,
+							borderTopLeftRadius: 0,
+							borderBottomLeftRadius: '10px',
+							borderBottomRightRadius: '10px',
+							position: 'absolute',
+							right: 0,
 						}}
-						disabled={currentThemePlaylist === 'Time of Day'}
+						styles={{
+							icon: {
+								width: 'fit-content',
+								height: 'fit-content',
+								position: 'absolute',
+								padding: 8,
+								right: 2,
+								bottom: 2,
+								borderRadius: '50%',
+							},
+						}}
+						disabled={currentThemePlaylist === 'Time of Day' || isAnimating}
 						onClick={() => {
 							const themeList = JSON.parse(
 								themePlaylistData?.find(
@@ -119,81 +141,139 @@ function ThemingCard() {
 							}
 						}}
 					>
-						<FaDice />
+						<FaDice size={20} />
 					</ActionIcon>
 				</Tooltip>
 			</Group>
-			<Text fw={'bold'} fz={'1.125rem'}>
-				Currently:{' '}
-			</Text>
-			{theme.name}
-			<Text fw={'bold'} fz={'1.125rem'}>
-				Playlist:{' '}
-			</Text>
-			<Select
-				labelProps={{ display: 'none' }}
-				placeholder='Pick a playlist...'
-				value={currentThemePlaylist}
-				data={[
-					{ value: 'All', label: 'All' },
-					{
-						value: 'Backgrounds',
-						label: 'Backgrounds',
-						disabled:
-							allThemes.filter(
-								(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
-							).length === 0,
-					},
-					{
-						value: 'No Backgrounds',
-						label: 'No Backgrounds',
-						disabled:
-							allThemes.filter((a: any) =>
-								a.backgroundImage.toLowerCase().includes('none'),
-							).length === 0,
-					},
-					...(themePlaylistData
-						?.map((playlist: ThemePlaylist) => {
-							return {
-								value: playlist.name,
-								label: playlist.name,
-								disabled: JSON.parse(playlist.themeList).length === 0,
-							};
-						})
-						.toSorted((a: ComboboxItem, b: ComboboxItem) =>
-							a.label.localeCompare(b.label),
-						) ?? []),
-				]}
-				w='92%'
-				classNames={{
-					root: selectClasses.menuSelectRoot,
-					input: selectClasses.menuSelectInput,
-					label: selectClasses.menuSelectLabel,
-					options: selectClasses.menuSelectOptions,
-					option: selectClasses.menuSelectOption,
-				}}
-				comboboxProps={{
-					withinPortal: false,
-					position: 'top',
-				}}
-				onChange={(_value, option: ComboboxItem) => {
-					setCurrentThemePlaylist(option.value);
-					if (option.value !== 'Time of Day') {
-						setThemeName('random');
-					} else {
-						const themeList = JSON.parse(
-							themePlaylistData.find((t: ThemePlaylist) => t.name === 'Time of Day')
-								.themeList,
-						);
-						setThemeName(
-							allThemeData.find(
-								(t: Theme) =>
-									t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
-							).name,
-						);
+			<Group justify='space-between' pos={'relative'} gap={0}>
+				<Select
+					label='Current Playlist:'
+					placeholder='Pick a playlist...'
+					mb={'.25rem'}
+					ml={'.25rem'}
+					value={currentThemePlaylist}
+					data={[
+						{ value: 'All', label: 'All' },
+						{
+							value: 'Backgrounds',
+							label: 'Backgrounds',
+							disabled:
+								allThemes.filter(
+									(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
+								).length === 0,
+						},
+						{
+							value: 'No Backgrounds',
+							label: 'No Backgrounds',
+							disabled:
+								allThemes.filter((a: any) =>
+									a.backgroundImage.toLowerCase().includes('none'),
+								).length === 0,
+						},
+						...(themePlaylistData
+							?.map((playlist: ThemePlaylist) => {
+								return {
+									value: playlist.name,
+									label: playlist.name,
+									disabled: JSON.parse(playlist.themeList).length === 0,
+								};
+							})
+							.toSorted((a: ComboboxItem, b: ComboboxItem) =>
+								a.label.localeCompare(b.label),
+							) ?? []),
+					]}
+					classNames={{
+						wrapper: selectClasses.menuSelectWrapper,
+						root: selectClasses.menuSelectRoot,
+						input: selectClasses.menuSelectInput,
+						label: selectClasses.menuSelectLabel,
+						options: selectClasses.menuSelectOptions,
+						option: selectClasses.menuSelectOption,
+					}}
+					labelProps={{ top: 8, left: 12 }}
+					comboboxProps={{
+						withinPortal: false,
+						position: 'top',
+						width: '100%',
+					}}
+					w={'70%'}
+					style={{
+						zIndex: 2,
+					}}
+					styles={
+						theme.textShadowsEnabled
+							? {
+									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+								}
+							: undefined
 					}
-				}}
-			/>
+					onChange={(_value, option: ComboboxItem) => {
+						setCurrentThemePlaylist(option.value);
+						if (option.value !== 'Time of Day') {
+							setThemeName('random');
+						} else {
+							const themeList = JSON.parse(
+								themePlaylistData.find((t: ThemePlaylist) => t.name === 'Time of Day')
+									.themeList,
+							);
+							setThemeName(
+								allThemeData.find(
+									(t: Theme) =>
+										t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
+								).name,
+							);
+						}
+					}}
+				/>
+				<Tooltip
+					label='Shuffle Playlist'
+					c={'var(--mantine-color-primary-0)'}
+					bg={'var(--mantine-color-background-0)'}
+					withArrow
+				>
+					<ActionIcon
+						className={actionIconClasses.menuActions}
+						classNames={actionIconClasses}
+						disabled={currentThemePlaylist === 'Time of Day' || isAnimating}
+						h={40}
+						style={{
+							backgroundColor: 'transparent',
+							color:
+								currentTheme === 'random'
+									? 'var(--mantine-color-accent-0)'
+									: 'var(--mantine-color-primary-0)',
+							borderTopRightRadius: 0,
+							borderTopLeftRadius: 0,
+							borderBottomLeftRadius: '10px',
+							borderBottomRightRadius: '10px',
+							position: 'absolute',
+							right: 0,
+							bottom: 0,
+						}}
+						styles={{
+							icon: {
+								backgroundColor:
+									currentTheme === 'random'
+										? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
+										: 'transparent',
+								width: 'fit-content',
+								height: 'fit-content',
+								position: 'absolute',
+								padding: 8,
+								right: 2,
+								bottom: 2,
+								borderRadius: '50%',
+							},
+						}}
+						onClick={() => {
+							setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
+							setCurrentThemePlaylist('All');
+						}}
+					>
+						<FiShuffle size={20} />
+					</ActionIcon>
+				</Tooltip>
+			</Group>
 		</Stack>
 	);
 }