State hotfixes

src/pages/homepage/components/SettingsButton.tsx

@@ -34,7 +34,9 @@ function SettingsButton() {
 	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
-
+	const { data: themePlaylists } = useQueryAPI({
+		endpoint: 'api/themePlaylists',
+	});
 	const { mutateAsync: wakeRequest } = useMutationAPI();
 	const [allThemeData, setAllThemeData] = useState<any>([]);
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
@@ -52,8 +54,9 @@ function SettingsButton() {
 		bookmarkFilter,
 		setBookmarkFilter,
 		isMobile,
+		currentThemePlaylist,
+		setCurrentThemePlaylist,
 	} = useCommonHooks();
-
 	const handleWakeRequest = () => {
 		wakeRequest({
 			method: 'POST',
@@ -191,6 +194,7 @@ function SettingsButton() {
 												setCurrentTheme(
 													currentTheme === 'random' ? theme.name : 'random',
 												);
+												setCurrentThemePlaylist('All');
 											}}
 										>
 											<FiShuffle />
@@ -216,6 +220,33 @@ function SettingsButton() {
 									Currently:{' '}
 								</Text>
 								{theme.name}
+								<Select
+									labelProps={{ display: 'none' }}
+									placeholder='Pick a playlist...'
+									defaultValue={currentThemePlaylist}
+									data={
+										themePlaylists
+											?.map((playlist: any) => {
+												return {
+													value: playlist.name,
+													label: playlist.name,
+												};
+											})
+											.toSorted((a: any, b: any) => a.label.localeCompare(b.label)) || []
+									}
+									w='92%'
+									classNames={{
+										input: selectClasses.menuSelectInput,
+										label: selectClasses.menuSelectLabel,
+										options: selectClasses.menuSelectOptions,
+										option: selectClasses.menuSelectOption,
+									}}
+									comboboxProps={{ withinPortal: false }}
+									onChange={(_value, option: any) =>
+										setCurrentThemePlaylist(option.value)
+									}
+									onLoad={(option: any) => setCurrentThemePlaylist(option)}
+								/>
 							</Stack>
 						</Group>
 						<Menu.Divider