More typing and fixes

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

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiChevronRight } from 'react-icons/fi';
 import { switchClasses } from 'styles';
-import type { Theme } from 'types';
+import type { Theme, ThemePlaylist } from 'types';
 import SettingsHeader from '../Shared/SettingsHeader';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
@@ -19,9 +19,10 @@ function ThemesSettings() {
 	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
 		endpoint: backgroundsEndpoint,
 	});
-	const { data: themePlaylists } = useQueryAPI({
+	const { data: themePlaylistData } = useQueryAPI({
 		endpoint: 'api/themePlaylists',
 	});
+	const [themePlaylists, setThemePlaylists] = useState<ThemePlaylist[]>([]);
 	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
@@ -79,6 +80,13 @@ function ThemesSettings() {
 			setBackgroundList(['None', ...backgroundData]);
 		}
 	}, [backgroundData, isBackgroundFetched]);
+
+	useEffect(() => {
+		if (themePlaylistData) {
+			setThemePlaylists(themePlaylistData);
+		}
+	}, [themePlaylistData]);
+
 	return (
 		<Stack w={'100%'} align='center'>
 			<ThemeModal