More typing and fixes

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

@@ -18,9 +18,16 @@ function ThemePlaylists() {
 	const { data: themePlaylists } = useQueryAPI({
 		endpoint: themePlaylistsEndpoint,
 	});
+	const defaultPlaylist = {
+		id: undefined,
+		default: 0,
+		name: 'New Playlist',
+		themeList: '[]',
+	};
 	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
-	const [selectedPlaylist, setSelectedPlaylist] = useState<ThemePlaylist | undefined>();
+	const [selectedPlaylist, setSelectedPlaylist] =
+		useState<ThemePlaylist>(defaultPlaylist);
 	const { currentThemePlaylist, theme, isMobile } = useCommonHooks();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -31,7 +38,7 @@ function ThemePlaylists() {
 	};
 
 	const handleClose = () => {
-		setSelectedPlaylist(undefined);
+		setSelectedPlaylist(defaultPlaylist);
 		close();
 	};
 
@@ -50,6 +57,7 @@ function ThemePlaylists() {
 				opened={opened}
 				handleClose={handleClose}
 				selectedPlaylist={selectedPlaylist}
+				defaultPlaylist={defaultPlaylist}
 				setSelectedPlaylist={setSelectedPlaylist}
 				handleSavePlaylist={handleSavePlaylist}
 				allThemes={allThemes}