From 61d287cf1257e73dc5a6200ac352ac86cd3575ca Mon Sep 17 00:00:00 2001
From: Dustin Brett <dustinbrett@gmail.com>
Date: Fri, 13 Jun 2025 22:36:26 -0700
Subject: [PATCH] Peek visual improvements

---
 components/system/Taskbar/StyledTaskbar.ts     | 15 +++++++++++++--
 .../TaskbarEntry/Peek/StyledPeekWindow.ts      |  2 +-
 .../system/Taskbar/TaskbarEntry/index.tsx      | 18 +++++++++++++++---
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/components/system/Taskbar/StyledTaskbar.ts b/components/system/Taskbar/StyledTaskbar.ts
index aab078c9..54c3a772 100644
--- a/components/system/Taskbar/StyledTaskbar.ts
+++ b/components/system/Taskbar/StyledTaskbar.ts
@@ -1,8 +1,9 @@
 import styled from "styled-components";
 import { TASKBAR_HEIGHT } from "utils/constants";
 
+const TASKBAR_Z_INDEX = 100000;
+
 const StyledTaskbar = styled.nav`
-  backdrop-filter: ${({ theme }) => `blur(${theme.sizes.taskbar.blur})`};
   background-color: ${({ theme }) => theme.colors.taskbar.background};
   bottom: 0;
   contain: size layout;
@@ -11,7 +12,17 @@ const StyledTaskbar = styled.nav`
   position: absolute;
   right: 0;
   width: 100vw;
-  z-index: 100000;
+  z-index: ${TASKBAR_Z_INDEX};
+
+  &::after {
+    backdrop-filter: ${({ theme }) => `blur(${theme.sizes.taskbar.blur})`};
+    content: "";
+    display: block;
+    height: 100%;
+    position: relative;
+    width: 100%;
+    z-index: -${TASKBAR_Z_INDEX};
+  }
 `;
 
 export default StyledTaskbar;
diff --git a/components/system/Taskbar/TaskbarEntry/Peek/StyledPeekWindow.ts b/components/system/Taskbar/TaskbarEntry/Peek/StyledPeekWindow.ts
index e501e962..4f6ee142 100644
--- a/components/system/Taskbar/TaskbarEntry/Peek/StyledPeekWindow.ts
+++ b/components/system/Taskbar/TaskbarEntry/Peek/StyledPeekWindow.ts
@@ -22,7 +22,7 @@ const StyledPeekWindow = styled(motion.div)<StyledPeekWindowProps>`
     $offsetX ? `translateX(${$offsetX}px)` : undefined};
 
   ${StyledTaskbarEntry}:hover & {
-    background-color: hsl(0 0% 25% / 85%);
+    background-color: hsl(0 0% 25% / 70%);
 
     &:active {
       background-color: ${({ theme }) => theme.colors.taskbar.activeForeground};
diff --git a/components/system/Taskbar/TaskbarEntry/index.tsx b/components/system/Taskbar/TaskbarEntry/index.tsx
index 558eb5ec..fdf13819 100644
--- a/components/system/Taskbar/TaskbarEntry/index.tsx
+++ b/components/system/Taskbar/TaskbarEntry/index.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
 import dynamic from "next/dynamic";
 import { AnimatePresence } from "motion/react";
 import StyledTaskbarEntry from "components/system/Taskbar/TaskbarEntry/StyledTaskbarEntry";
@@ -40,8 +40,20 @@ const TaskbarEntry: FC<TaskbarEntryProps> = ({ icon, id, title }) => {
     [id, linkElement]
   );
   const [isPeekVisible, setIsPeekVisible] = useState(false);
-  const hidePeek = useCallback((): void => setIsPeekVisible(false), []);
-  const showPeek = useCallback((): void => setIsPeekVisible(true), []);
+  const hidePeekTimerRef = useRef(0);
+  const hidePeek = useCallback((): void => {
+    hidePeekTimerRef.current = window.setTimeout(
+      () => setIsPeekVisible(false),
+      200
+    );
+  }, []);
+  const showPeek = useCallback((): void => {
+    if (hidePeekTimerRef.current) {
+      window.clearTimeout(hidePeekTimerRef.current);
+      hidePeekTimerRef.current = 0;
+    }
+    setIsPeekVisible(true);
+  }, []);
   const onClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
     (event): void => {
       if (event.shiftKey && !singleton) {