Prepping updates

package-lock.json

@@ -9,6 +9,7 @@
 			"version": "1.2.0",
 			"dependencies": {
 				"@gfazioli/mantine-border-animate": "^3.0.2",
+				"@gfazioli/mantine-parallax": "^4.0.10",
 				"@gfazioli/mantine-text-animate": "^4.0.10",
 				"@hello-pangea/dnd": "^18.0.1",
 				"@mantine/core": "^9.6.2",
@@ -185,6 +186,18 @@
 				"react-dom": "^18.x || ^19.x"
 			}
 		},
+		"node_modules/@gfazioli/mantine-parallax": {
+			"version": "4.0.10",
+			"resolved": "https://registry.npmjs.org/@gfazioli/mantine-parallax/-/mantine-parallax-4.0.10.tgz",
+			"integrity": "sha512-EeSvOe2gywHry1vXUJ/ylnAyxHEUnYeGZDeiP/D0Kv+wY76TiQ3vvllUZRFTafg6d5fcu//VTwhqiN0FOjqT/A==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@mantine/core": ">=9.0.0",
+				"@mantine/hooks": ">=9.0.0",
+				"react": "^18.x || ^19.x",
+				"react-dom": "^18.x || ^19.x"
+			}
+		},
 		"node_modules/@gfazioli/mantine-text-animate": {
 			"version": "4.0.10",
 			"resolved": "https://registry.npmjs.org/@gfazioli/mantine-text-animate/-/mantine-text-animate-4.0.10.tgz",

package.json

@@ -11,6 +11,7 @@
 	},
 	"dependencies": {
 		"@gfazioli/mantine-border-animate": "^3.0.2",
+		"@gfazioli/mantine-parallax": "^4.0.10",
 		"@gfazioli/mantine-text-animate": "^4.0.10",
 		"@hello-pangea/dnd": "^18.0.1",
 		"@mantine/core": "^9.6.2",

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,
+							bottom: isRefreshing ? 0 : -32,
-							paddingBottom: 6,
-							paddingTop: 6,
 							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
+			{management && (
-				style={{
+				<Group
-					width: '100%',
+					style={{
-					height: '100%',
+						width: '100%',
-					overflow: 'hidden',
+						height: '100%',
-					transition: 'all .2s ease',
+						overflow: 'hidden',
-					position: 'absolute',
+						transition: 'all .2s ease',
-				}}
+						position: 'absolute',
-			>
+					}}
-				<ThemeManagementPill
+				>
-					allThemes={allThemes}
+					<ThemeManagementPill
-					cardTheme={cardTheme}
+						allThemes={allThemes}
-					handleOpen={handleOpen}
+						cardTheme={cardTheme}
-					themePlaylists={themePlaylists}
+						handleOpen={handleOpen}
-					openModal={openModal}
+						themePlaylists={themePlaylists}
-					hovered={hovered && enabled}
+						openModal={openModal}
-					hoverPreview={hoverPreview}
+						hovered={hovered && enabled}
-					setHoverPreview={setHoverPreview}
+						hoverPreview={hoverPreview}
-					transition={transition}
+						setHoverPreview={setHoverPreview}
-					setTransition={setTransition}
+						transition={transition}
-				/>
+						setTransition={setTransition}
-			</Group>
+					/>
+				</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);
+					if(enabled !== false){setCurrentTheme(cardTheme.name);
-					setCurrentThemePlaylist('All');
+					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';