Fix various issues

src/renderer/components/badge/index.tsx

@@ -1,6 +1,5 @@
 import type { BadgeProps as MantineBadgeProps } from '@mantine/core';
-import { createPolymorphicComponent } from '@mantine/core';
-import { Badge as MantineBadge } from '@mantine/core';
+import { createPolymorphicComponent, Badge as MantineBadge } from '@mantine/core';
 import styled from 'styled-components';
 
 export type BadgeProps = MantineBadgeProps;

src/renderer/components/button/index.tsx

@@ -248,7 +248,7 @@ interface HoldButtonProps extends ButtonProps {
 }
 
 export const TimeoutButton = ({ timeoutProps, ...props }: HoldButtonProps) => {
-  const [_timeoutRemaining, setTimeoutRemaining] = useState(timeoutProps.duration);
+  const [, setTimeoutRemaining] = useState(timeoutProps.duration);
   const [isRunning, setIsRunning] = useState(false);
   const intervalRef = useRef(0);
 
@@ -279,12 +279,12 @@ export const TimeoutButton = ({ timeoutProps, ...props }: HoldButtonProps) => {
   }, [clear, isRunning, start]);
 
   return (
-    <_Button
+    <Button
       sx={{ color: 'var(--danger-color)' }}
       onClick={startTimeout}
       {...props}
     >
       {isRunning ? 'Cancel' : props.children}
-    </_Button>
+    </Button>
   );
 };

src/renderer/components/page-header/index.tsx

@@ -3,7 +3,8 @@ import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useShouldPadTitlebar } from '/@/renderer/hooks';
 
-const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string }>`
+const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string; position?: string }>`
+  position: ${(props) => props.position};
   z-index: 100;
   width: 100%;
   height: ${(props) => props.height || '60px'};
@@ -12,6 +13,7 @@ const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string }>
 `;
 
 const Header = styled(motion.div)<{ $padRight?: boolean }>`
+  z-index: 15;
   height: 100%;
   margin-right: ${(props) => props.$padRight && '170px'};
   padding: 1rem;
@@ -26,14 +28,41 @@ const Header = styled(motion.div)<{ $padRight?: boolean }>`
   }
 `;
 
+// const BackgroundImage = styled.div<{ background: string }>`
+//   position: absolute;
+//   top: 0;
+//   z-index: -1;
+//   width: 100%;
+//   height: 100%;
+//   background: ${(props) => props.background};
+// `;
+
+// const BackgroundImageOverlay = styled.div`
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   z-index: -1;
+//   width: 100%;
+//   height: 100%;
+//   /* background: linear-gradient(180deg, rgba(25, 26, 28, 0%), var(--main-bg)); */
+//   /* background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4='); */
+// `;
+
 interface PageHeaderProps {
   backgroundColor?: string;
   children?: React.ReactNode;
   height?: string;
+  position?: string;
   useOpacity?: boolean;
 }
 
-export const PageHeader = ({ height, backgroundColor, useOpacity, children }: PageHeaderProps) => {
+export const PageHeader = ({
+  position,
+  height,
+  backgroundColor,
+  useOpacity,
+  children,
+}: PageHeaderProps) => {
   const ref = useRef(null);
   const padRight = useShouldPadTitlebar();
 
@@ -51,8 +80,11 @@ export const PageHeader = ({ height, backgroundColor, useOpacity, children }: Pa
         transition: { duration: 1.5 },
       }}
       height={height}
+      position={position}
     >
       <Header $padRight={padRight}>{children}</Header>
+      {/* <BackgroundImage background={backgroundColor} /> */}
+      {/* <BackgroundImageOverlay /> */}
     </Container>
   );
 };

src/renderer/features/player/components/slider.tsx

@@ -91,9 +91,9 @@ const StyledTrack = styled.div<any>`
 `;
 
 const Track = (props: any, state: any) => (
-  // eslint-disable-next-line react/destructuring-assignment
   <StyledTrack
     {...props}
+    // eslint-disable-next-line react/destructuring-assignment
     index={state.index}
   />
 );

src/renderer/features/songs/index.ts

@@ -1 +0,0 @@
-export * from './routes/song-list-route';