Background modal updates

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

@@ -37,6 +37,7 @@ function ThemesSettings() {
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
 	const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
+	const [inUseBackgrounds, setInUseBackgrounds] = useState<string[]>([]);
 	const [selectedTheme, setSelectedTheme] = useState<Theme>({
 		id: undefined,
 		name: 'default',
@@ -119,6 +120,23 @@ function ThemesSettings() {
 			setIsLoading(false);
 		}
 	}, [allThemeData, isAllThemeDataFetched, debouncedSearch]);
+
+	useEffect(() => {
+		if (allThemes) {
+			setInUseBackgrounds([
+				...new Set(
+					allThemes
+						.filter((t) => {
+							if (t.backgroundImage !== 'none') {
+								return t.backgroundImage;
+							}
+						})
+						.map((t) => t.backgroundImage),
+				),
+			]);
+		}
+	}, [allThemes]);
+
 	return (
 		<Stack w={'100%'} align='center'>
 			<ThemeModal
@@ -140,6 +158,7 @@ function ThemesSettings() {
 				backgroundModalOpened={backgroundModalOpened}
 				handleBackgroundModalClose={handleBackgroundModalClose}
 				backgroundList={backgroundList}
+				inUseBackgrounds={inUseBackgrounds}
 			/>
 			<SettingsHeader
 				setDragging={undefined}