Prepping updates

src/App.tsx

@@ -22,7 +22,7 @@ import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import 'react-fontpicker-ts/dist/index.css';
 import '@gfazioli/mantine-border-animate/styles.css';
-
+import '@gfazioli/mantine-parallax/styles.css';
 import '@gfazioli/mantine-text-animate/styles.css';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Homepage, Settings } from 'pages';

src/components/DataTable/DataTable.tsx

@@ -23,17 +23,6 @@ export function DataTable({
 	globalFilter: string | number;
 	isRefreshing?: boolean;
 }) {
-	const [scrollParent, setScrollParent] = useState<HTMLDivElement | null>(null);
-
-	const virtualizer = useVirtualizer({
-		count: data.length,
-		getScrollElement: () => scrollParent,
-		estimateSize: () => 30,
-		overscan: 5,
-	});
-
-	const virtualItems = virtualizer.getVirtualItems();
-
 	const table = useTable({
 		features,
 		data: data,
@@ -46,6 +35,18 @@ export function DataTable({
 			globalFilter: globalFilter,
 		},
 	});
+
+	const [scrollParent, setScrollParent] = useState<HTMLDivElement | null>(null);
+
+	const virtualizer = useVirtualizer({
+		count: table.getFilteredRowModel().rows.length,
+		getScrollElement: () => scrollParent,
+		estimateSize: () => 30,
+		overscan: 5,
+	});
+
+	const virtualItems = virtualizer.getVirtualItems();
+
 	const { rows } = table.getRowModel();
 
 	return (
@@ -56,8 +57,8 @@ export function DataTable({
 			<Table
 				style={{
 					width: '100%',
-					borderSpacing: '2px 0px',
 					backgroundColor: 'var(--mantine-color-accent-0)',
+					position: 'relative',
 				}}
 			>
 				<Table.Thead
@@ -212,13 +213,14 @@ export function DataTable({
 				<Table.Tfoot
 					style={{
 						transition: 'all 1s ease',
+						position: 'sticky',
+						bottom: -16,
 					}}
 				>
 					<Table.Tr
+						h={'100%'}
 						style={{
 							backgroundColor: 'var(--mantine-color-primary-0)',
-							position: 'sticky',
-							bottom: 0,
 						}}
 					>
 						<Table.Td colSpan={5}>
@@ -240,9 +242,7 @@ export function DataTable({
 								? 'var(--mantine-color-accent-0)'
 								: 'transparent',
 							position: 'absolute',
-							bottom: isRefreshing ? 0 : -40,
-							paddingBottom: 6,
-							paddingTop: 6,
+							bottom: isRefreshing ? 0 : -32,
 							transition: 'all 1.5s ease-in-out',
 							placeContent: 'center',
 							display: 'flex',

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';