Updates to rendering

src/Root.tsx

@@ -1,50 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-import {
-	type PersistedClient,
-	type Persister,
-	PersistQueryClientProvider,
-} from '@tanstack/react-query-persist-client';
-import { del, get, set } from 'idb-keyval';
-import React, { type ComponentType } from 'react';
-import { createRoot } from 'react-dom/client';
-
-const container = document.getElementById('root') as HTMLElement;
-const root = createRoot(container);
-
-const queryClient = new QueryClient({
-	defaultOptions: {
-		queries: {
-			gcTime: 1000 * 60 * 60 * 24, // 24 hours
-			staleTime: 1000 * 60 * 1, // 1 min
-		},
-	},
-});
-
-export function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
-	return {
-		persistClient: async (client: PersistedClient) => {
-			set(idbValidKey, client);
-		},
-		restoreClient: async () => {
-			return await get<PersistedClient>(idbValidKey);
-		},
-		removeClient: async () => {
-			await del(idbValidKey);
-		},
-	} as Persister;
-}
-
-function render(App: ComponentType) {
-	root.render(
-		<PersistQueryClientProvider
-			client={queryClient}
-			persistOptions={{ persister: createIDBPersister() }}
-		>
-			<React.StrictMode>
-				<App />
-			</React.StrictMode>
-		</PersistQueryClientProvider>,
-	);
-}
-
-export default render;

src/main.tsx

@@ -1,10 +1,44 @@
+import { QueryClient } from '@tanstack/react-query';
+import {
+	type PersistedClient,
+	type Persister,
+	PersistQueryClientProvider,
+} from '@tanstack/react-query-persist-client';
+import { del, get, set } from 'idb-keyval';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import App from './App';
-import render from './Root';
 
-Promise.all([render, App])
-	.then(([render, App]) => {
-		render(App);
-	})
-	.catch((error) => {
-		console.error('Error loading the app:', error);
-	});
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			gcTime: 1000 * 60 * 60 * 24, // 24 hours
+			staleTime: 1000 * 60 * 1, // 1 min
+		},
+	},
+});
+
+export function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
+	return {
+		persistClient: async (client: PersistedClient) => {
+			set(idbValidKey, client);
+		},
+		restoreClient: async () => {
+			return await get<PersistedClient>(idbValidKey);
+		},
+		removeClient: async () => {
+			await del(idbValidKey);
+		},
+	} as Persister;
+}
+
+createRoot(document.getElementById('root') as HTMLElement).render(
+	<StrictMode>
+		<PersistQueryClientProvider
+			client={queryClient}
+			persistOptions={{ persister: createIDBPersister() }}
+		>
+			<App />
+		</PersistQueryClientProvider>
+	</StrictMode>,
+);

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

@@ -43,22 +43,24 @@ export function ThemeCard({
 			pos={'relative'}
 			ref={hoverRef}
 		>
-			<DeleteItemModal
-				modalOpened={modalOpened}
-				handleClose={closeModal}
-				handleDelete={() => handleDelete(cardTheme, 'api/themes')}
-				title={'Delete Theme'}
-				body={
-					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
-						<Text>Are you sure you want to delete this theme?</Text>
-						<Text
-							className={textClasses.deleteItem}
-							classNames={textClasses}
-						>{`"${cardTheme.name}"`}</Text>
-						<Text c='red'>This action cannot be undone!</Text>
-					</Stack>
-				}
-			/>
+			{modalOpened && (
+				<DeleteItemModal
+					modalOpened={modalOpened}
+					handleClose={closeModal}
+					handleDelete={() => handleDelete(cardTheme, 'api/themes')}
+					title={'Delete Theme'}
+					body={
+						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+							<Text>Are you sure you want to delete this theme?</Text>
+							<Text
+								className={textClasses.deleteItem}
+								classNames={textClasses}
+							>{`"${cardTheme.name}"`}</Text>
+							<Text c='red'>This action cannot be undone!</Text>
+						</Stack>
+					}
+				/>
+			)}
 			<Text
 				style={{
 					position: 'absolute',

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

@@ -98,25 +98,30 @@ export function Themes() {
 			setIsLoading(false);
 		}
 	}, [debouncedSearch]);
+
 	return (
 		<Stack>
-			<ThemeModal
-				opened={themeModalOpened}
-				selectedTheme={selectedTheme}
-				setSelectedTheme={setSelectedTheme}
-				backgroundList={backgroundList}
-				isNew={isNew}
-				setIsNew={setIsNew}
-				allThemes={allThemes}
-				closeThemeModal={closeThemeModal}
-				themePlaylists={themePlaylists}
-			/>
-			<BackgroundModal
-				backgroundModalOpened={backgroundModalOpened}
-				closeModal={closeBackgroundModal}
-				backgroundList={backgroundList}
-				inUseBackgrounds={inUseBackgrounds}
-			/>
+			{themeModalOpened && (
+				<ThemeModal
+					opened={themeModalOpened}
+					selectedTheme={selectedTheme}
+					setSelectedTheme={setSelectedTheme}
+					backgroundList={backgroundList}
+					isNew={isNew}
+					setIsNew={setIsNew}
+					allThemes={allThemes}
+					closeThemeModal={closeThemeModal}
+					themePlaylists={themePlaylists}
+				/>
+			)}
+			{backgroundModalOpened && (
+				<BackgroundModal
+					backgroundModalOpened={backgroundModalOpened}
+					closeModal={closeBackgroundModal}
+					backgroundList={backgroundList}
+					inUseBackgrounds={inUseBackgrounds}
+				/>
+			)}
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={handleNewTheme}