From 4bcd1e48582f528ce62b34f43acd6dde7d09933f Mon Sep 17 00:00:00 2001
From: Sean Edmunds <smedmunds226@gmail.com>
Date: Tue, 13 Oct 2026 14:05:51 -0500
Subject: [PATCH] Working preview on time of day playlist

---
 .../components/ThemePlaylistStack.tsx         | 97 +++++++++++++++++--
 1 file changed, 89 insertions(+), 8 deletions(-)

diff --git a/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx b/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
index 8b4bd7c..f18c5d8 100644
--- a/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
@@ -194,8 +194,29 @@ export function ThemePlaylistStack({
 								{cardPlaylist?.name === 'Time of Day' ? (
 									<>
 										<Parallax
-											{...presentationProps}
-											style={{ position: 'absolute', top: 16 * 1, zIndex: 3 }}
+											{...(!(
+												hover &&
+												Number(themeList[0]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											// style={{ position: 'absolute', top: 16 * 1, zIndex: 3 }}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[0]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 1
+													: 16,
+												zIndex: !(
+													hover &&
+													Number(themeList[0]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 3
+													: 4,
+											}}
 										>
 											<ThemeCardPreview
 												cardTheme={
@@ -206,8 +227,28 @@ export function ThemePlaylistStack({
 											/>
 										</Parallax>
 										<Parallax
-											{...presentationProps}
-											style={{ position: 'absolute', top: 16 * 2, zIndex: 2 }}
+											{...(!(
+												hover &&
+												Number(themeList[1]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[1]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 2
+													: 16,
+												zIndex: !(
+													hover &&
+													Number(themeList[1]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 2
+													: 4,
+											}}
 										>
 											<ThemeCardPreview
 												cardTheme={
@@ -218,8 +259,28 @@ export function ThemePlaylistStack({
 											/>
 										</Parallax>
 										<Parallax
-											{...presentationProps}
-											style={{ position: 'absolute', top: 16 * 3, zIndex: 1 }}
+											{...(!(
+												hover &&
+												Number(themeList[2]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[2]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 3
+													: 16,
+												zIndex: !(
+													hover &&
+													Number(themeList[2]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 1
+													: 4,
+											}}
 										>
 											<ThemeCardPreview
 												cardTheme={
@@ -230,8 +291,28 @@ export function ThemePlaylistStack({
 											/>
 										</Parallax>
 										<Parallax
-											{...presentationProps}
-											style={{ position: 'absolute', top: 16 * 4, zIndex: 0 }}
+											{...(!(
+												hover &&
+												Number(themeList[3]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[3]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 4
+													: 0,
+												zIndex: !(
+													hover &&
+													Number(themeList[3]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 0
+													: 4,
+											}}
 										>
 											<ThemeCardPreview
 												cardTheme={