Prepping updates

src/pages/settings/components/Search/SearchHistory.tsx

@@ -93,7 +93,7 @@ export function SearchHistory() {
 				align='center'
 			>
 				<Stack h={'calc(100vh - 14rem)'} w={'100%'} p={'1rem'} pt={0} mt={'1rem'} gap={0}>
-					<Stack h={'inherit'} style={{ overflow: 'scroll', whiteSpace: 'none' }}>
+					<Stack style={{ overflow: 'scroll', whiteSpace: 'none' }}>
 						<DataTable
 							data={searchHistory}
 							columns={SearchHistoryColumns(

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

@@ -15,6 +15,7 @@ export function ThemeCard({
 	setSelectedTheme,
 	openThemeModal,
 	enabled = true,
+	management = true,
 }: {
 	cardTheme: Theme;
 	allThemes: Theme[];
@@ -22,7 +23,9 @@ export function ThemeCard({
 	setSelectedTheme: (theme: Theme) => void;
 	openThemeModal: () => void;
 	enabled?: boolean;
+	management?: boolean;
 }) {
+	console.log(cardTheme);
 	const { hovered, ref: hoverRef } = useHover();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { currentTheme, setCurrentTheme, setCurrentThemePlaylist, handleDelete } =
@@ -84,43 +87,45 @@ export function ThemeCard({
 			>
 				{cardTheme.name}
 			</Text>
-			<Group
-				style={{
-					width: '100%',
-					height: '100%',
-					overflow: 'hidden',
-					transition: 'all .2s ease',
-					position: 'absolute',
-				}}
-			>
-				<ThemeManagementPill
-					allThemes={allThemes}
-					cardTheme={cardTheme}
-					handleOpen={handleOpen}
-					themePlaylists={themePlaylists}
-					openModal={openModal}
-					hovered={hovered && enabled}
-					hoverPreview={hoverPreview}
-					setHoverPreview={setHoverPreview}
-					transition={transition}
-					setTransition={setTransition}
-				/>
-			</Group>
+			{management && (
+				<Group
+					style={{
+						width: '100%',
+						height: '100%',
+						overflow: 'hidden',
+						transition: 'all .2s ease',
+						position: 'absolute',
+					}}
+				>
+					<ThemeManagementPill
+						allThemes={allThemes}
+						cardTheme={cardTheme}
+						handleOpen={handleOpen}
+						themePlaylists={themePlaylists}
+						openModal={openModal}
+						hovered={hovered && enabled}
+						hoverPreview={hoverPreview}
+						setHoverPreview={setHoverPreview}
+						transition={transition}
+						setTransition={setTransition}
+					/>
+				</Group>
+			)}
 			<Button
 				w={'275px'}
 				h={'115px'}
 				disabled={currentTheme === 'random'}
 				style={{
 					backgroundImage:
-						cardTheme?.backgroundImage.toLocaleLowerCase() === 'none'
+						cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
 							? undefined
 							: `linear-gradient(${cardTheme?.backgroundColor}33, ${cardTheme?.backgroundColor}33), url(../../trigger/api/backgroundImages/thumbs/${cardTheme?.backgroundImage})`,
 					backgroundSize:
-						cardTheme?.backgroundImage.toLocaleLowerCase() === 'none'
+						cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
 							? undefined
 							: 'cover',
 					backgroundColor:
-						cardTheme?.backgroundImage.toLocaleLowerCase() === 'none'
+						cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
 							? cardTheme?.backgroundColor
 							: undefined,
 					backgroundPosition: 'center',
@@ -132,8 +137,8 @@ export function ThemeCard({
 					transition: 'all .25s ease',
 				}}
 				onClick={() => {
-					setCurrentTheme(cardTheme.name);
-					setCurrentThemePlaylist('All');
+					if(enabled !== false){setCurrentTheme(cardTheme.name);
+					setCurrentThemePlaylist('All');}
 				}}
 			>
 				{hovered && enabled && currentTheme !== 'random' && (

src/pages/settings/components/Theming/Themes/index.ts

@@ -1,3 +1,4 @@
+export { ThemeCard } from './ThemeCard';
 export { ThemeMiniCard } from './ThemeMiniCard';
 export { ThemePreviewMiddleware } from './ThemePreviewMiddleware';
 export { Themes } from './Themes';