Lint all files

src/renderer/layouts/default-layout/full-screen-overlay.tsx

@@ -3,11 +3,11 @@ import { FullScreenPlayer } from '/@/renderer/features/player/components/full-sc
 import { useFullScreenPlayerStore } from '/@/renderer/store';
 
 export const FullScreenOverlay = () => {
-  const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
+    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
 
-  return (
-    <AnimatePresence initial={false}>
-      {isFullScreenPlayerExpanded && <FullScreenPlayer />}
-    </AnimatePresence>
-  );
+    return (
+        <AnimatePresence initial={false}>
+            {isFullScreenPlayerExpanded && <FullScreenPlayer />}
+        </AnimatePresence>
+    );
 };

src/renderer/layouts/default-layout/left-sidebar.tsx

@@ -6,33 +6,33 @@ import { Sidebar } from '/@/renderer/features/sidebar/components/sidebar';
 import { useSidebarStore } from '/@/renderer/store';
 
 const SidebarContainer = styled.aside`
-  position: relative;
-  grid-area: sidebar;
-  background: var(--sidebar-bg);
-  border-right: var(--sidebar-border);
+    position: relative;
+    grid-area: sidebar;
+    background: var(--sidebar-bg);
+    border-right: var(--sidebar-border);
 `;
 
 interface LeftSidebarProps {
-  isResizing: boolean;
-  startResizing: (direction: 'left' | 'right') => void;
+    isResizing: boolean;
+    startResizing: (direction: 'left' | 'right') => void;
 }
 
 export const LeftSidebar = ({ isResizing, startResizing }: LeftSidebarProps) => {
-  const sidebarRef = useRef<HTMLDivElement | null>(null);
-  const { collapsed } = useSidebarStore();
+    const sidebarRef = useRef<HTMLDivElement | null>(null);
+    const { collapsed } = useSidebarStore();
 
-  return (
-    <SidebarContainer id="sidebar">
-      <ResizeHandle
-        ref={sidebarRef}
-        isResizing={isResizing}
-        placement="right"
-        onMouseDown={(e) => {
-          e.preventDefault();
-          startResizing('left');
-        }}
-      />
-      {collapsed ? <CollapsedSidebar /> : <Sidebar />}
-    </SidebarContainer>
-  );
+    return (
+        <SidebarContainer id="sidebar">
+            <ResizeHandle
+                ref={sidebarRef}
+                isResizing={isResizing}
+                placement="right"
+                onMouseDown={(e) => {
+                    e.preventDefault();
+                    startResizing('left');
+                }}
+            />
+            {collapsed ? <CollapsedSidebar /> : <Sidebar />}
+        </SidebarContainer>
+    );
 };

src/renderer/layouts/default-layout/main-content.tsx

@@ -12,113 +12,117 @@ import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
 import { Spinner } from '/@/renderer/components';
 
 const SideDrawerQueue = lazy(() =>
-  import('/@/renderer/layouts/default-layout/side-drawer-queue').then((module) => ({
-    default: module.SideDrawerQueue,
-  })),
+    import('/@/renderer/layouts/default-layout/side-drawer-queue').then((module) => ({
+        default: module.SideDrawerQueue,
+    })),
 );
 
 const MINIMUM_SIDEBAR_WIDTH = 260;
 
 const MainContentContainer = styled.div<{
-  leftSidebarWidth: string;
-  rightExpanded?: boolean;
-  rightSidebarWidth?: string;
-  shell?: boolean;
-  sidebarCollapsed?: boolean;
+    leftSidebarWidth: string;
+    rightExpanded?: boolean;
+    rightSidebarWidth?: string;
+    shell?: boolean;
+    sidebarCollapsed?: boolean;
 }>`
-  position: relative;
-  display: ${(props) => (props.shell ? 'flex' : 'grid')};
-  grid-area: main-content;
-  grid-template-areas: 'sidebar . right-sidebar';
-  grid-template-rows: 1fr;
-  grid-template-columns: ${(props) => (props.sidebarCollapsed ? '80px' : props.leftSidebarWidth)} 1fr ${(
-      props,
-    ) => props.rightExpanded && props.rightSidebarWidth};
+    position: relative;
+    display: ${(props) => (props.shell ? 'flex' : 'grid')};
+    grid-area: main-content;
+    grid-template-areas: 'sidebar . right-sidebar';
+    grid-template-rows: 1fr;
+    grid-template-columns: ${(props) => (props.sidebarCollapsed ? '80px' : props.leftSidebarWidth)} 1fr ${(
+            props,
+        ) => props.rightExpanded && props.rightSidebarWidth};
 
-  gap: 0;
-  background: var(--main-bg);
+    gap: 0;
+    background: var(--main-bg);
 `;
 
 export const MainContent = ({ shell }: { shell?: boolean }) => {
-  const location = useLocation();
-  const { collapsed, leftWidth, rightWidth, rightExpanded } = useSidebarStore();
-  const { setSideBar } = useAppStoreActions();
-  const { sideQueueType, showQueueDrawerButton } = useGeneralSettings();
-  const [isResizing, setIsResizing] = useState(false);
-  const [isResizingRight, setIsResizingRight] = useState(false);
+    const location = useLocation();
+    const { collapsed, leftWidth, rightWidth, rightExpanded } = useSidebarStore();
+    const { setSideBar } = useAppStoreActions();
+    const { sideQueueType, showQueueDrawerButton } = useGeneralSettings();
+    const [isResizing, setIsResizing] = useState(false);
+    const [isResizingRight, setIsResizingRight] = useState(false);
 
-  const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
-  const rightSidebarRef = useRef<HTMLDivElement | null>(null);
+    const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
+    const rightSidebarRef = useRef<HTMLDivElement | null>(null);
 
-  const startResizing = useCallback((position: 'left' | 'right') => {
-    if (position === 'left') return setIsResizing(true);
-    return setIsResizingRight(true);
-  }, []);
+    const startResizing = useCallback((position: 'left' | 'right') => {
+        if (position === 'left') return setIsResizing(true);
+        return setIsResizingRight(true);
+    }, []);
 
-  const stopResizing = useCallback(() => {
-    setIsResizing(false);
-    setIsResizingRight(false);
-  }, []);
+    const stopResizing = useCallback(() => {
+        setIsResizing(false);
+        setIsResizingRight(false);
+    }, []);
 
-  const resize = useCallback(
-    (mouseMoveEvent: any) => {
-      if (isResizing) {
-        const width = mouseMoveEvent.clientX;
-        const constrainedWidth = `${constrainSidebarWidth(width)}px`;
+    const resize = useCallback(
+        (mouseMoveEvent: any) => {
+            if (isResizing) {
+                const width = mouseMoveEvent.clientX;
+                const constrainedWidth = `${constrainSidebarWidth(width)}px`;
 
-        if (width < MINIMUM_SIDEBAR_WIDTH - 100) {
-          setSideBar({ collapsed: true });
-        } else {
-          setSideBar({ collapsed: false, leftWidth: constrainedWidth });
-        }
-      } else if (isResizingRight) {
-        const start = Number(rightWidth.split('px')[0]);
-        const { left } = rightSidebarRef!.current!.getBoundingClientRect();
-        const width = `${constrainRightSidebarWidth(start + left - mouseMoveEvent.clientX)}px`;
-        setSideBar({ rightWidth: width });
-      }
-    },
-    [isResizing, isResizingRight, setSideBar, rightWidth],
-  );
+                if (width < MINIMUM_SIDEBAR_WIDTH - 100) {
+                    setSideBar({ collapsed: true });
+                } else {
+                    setSideBar({ collapsed: false, leftWidth: constrainedWidth });
+                }
+            } else if (isResizingRight) {
+                const start = Number(rightWidth.split('px')[0]);
+                const { left } = rightSidebarRef!.current!.getBoundingClientRect();
+                const width = `${constrainRightSidebarWidth(
+                    start + left - mouseMoveEvent.clientX,
+                )}px`;
+                setSideBar({ rightWidth: width });
+            }
+        },
+        [isResizing, isResizingRight, setSideBar, rightWidth],
+    );
 
-  const throttledResize = useMemo(() => throttle(resize, 50), [resize]);
+    const throttledResize = useMemo(() => throttle(resize, 50), [resize]);
 
-  useEffect(() => {
-    window.addEventListener('mousemove', throttledResize);
-    window.addEventListener('mouseup', stopResizing);
-    return () => {
-      window.removeEventListener('mousemove', throttledResize);
-      window.removeEventListener('mouseup', stopResizing);
-    };
-  }, [throttledResize, stopResizing]);
+    useEffect(() => {
+        window.addEventListener('mousemove', throttledResize);
+        window.addEventListener('mouseup', stopResizing);
+        return () => {
+            window.removeEventListener('mousemove', throttledResize);
+            window.removeEventListener('mouseup', stopResizing);
+        };
+    }, [throttledResize, stopResizing]);
 
-  return (
-    <MainContentContainer
-      id="main-content"
-      leftSidebarWidth={leftWidth}
-      rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
-      rightSidebarWidth={rightWidth}
-      shell={shell}
-      sidebarCollapsed={collapsed}
-    >
-      {!shell && (
-        <>
-          <Suspense fallback={<></>}>{showQueueDrawerButton && <SideDrawerQueue />}</Suspense>
-          <FullScreenOverlay />
-          <LeftSidebar
-            isResizing={isResizing}
-            startResizing={startResizing}
-          />
-          <RightSidebar
-            ref={rightSidebarRef}
-            isResizing={isResizingRight}
-            startResizing={startResizing}
-          />
-        </>
-      )}
-      <Suspense fallback={<Spinner container />}>
-        <Outlet />
-      </Suspense>
-    </MainContentContainer>
-  );
+    return (
+        <MainContentContainer
+            id="main-content"
+            leftSidebarWidth={leftWidth}
+            rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
+            rightSidebarWidth={rightWidth}
+            shell={shell}
+            sidebarCollapsed={collapsed}
+        >
+            {!shell && (
+                <>
+                    <Suspense fallback={<></>}>
+                        {showQueueDrawerButton && <SideDrawerQueue />}
+                    </Suspense>
+                    <FullScreenOverlay />
+                    <LeftSidebar
+                        isResizing={isResizing}
+                        startResizing={startResizing}
+                    />
+                    <RightSidebar
+                        ref={rightSidebarRef}
+                        isResizing={isResizingRight}
+                        startResizing={startResizing}
+                    />
+                </>
+            )}
+            <Suspense fallback={<Spinner container />}>
+                <Outlet />
+            </Suspense>
+        </MainContentContainer>
+    );
 };

src/renderer/layouts/default-layout/player-bar.tsx

@@ -2,15 +2,15 @@ import styled from 'styled-components';
 import { Playerbar } from '/@/renderer/features/player';
 
 const PlayerbarContainer = styled.footer`
-  z-index: 200;
-  grid-area: player;
-  background: var(--playerbar-bg);
+    z-index: 200;
+    grid-area: player;
+    background: var(--playerbar-bg);
 `;
 
 export const PlayerBar = () => {
-  return (
-    <PlayerbarContainer id="player-bar">
-      <Playerbar />
-    </PlayerbarContainer>
-  );
+    return (
+        <PlayerbarContainer id="player-bar">
+            <Playerbar />
+        </PlayerbarContainer>
+    );
 };

src/renderer/layouts/default-layout/right-sidebar.tsx

@@ -9,134 +9,137 @@ import { useGeneralSettings, useSidebarStore, useWindowSettings } from '/@/rende
 import { Platform } from '/@/renderer/types';
 
 const RightSidebarContainer = styled(motion.aside)`
-  position: relative;
-  grid-area: right-sidebar;
-  height: 100%;
-  background: var(--sidebar-bg);
-  border-left: var(--sidebar-border);
+    position: relative;
+    grid-area: right-sidebar;
+    height: 100%;
+    background: var(--sidebar-bg);
+    border-left: var(--sidebar-border);
 `;
 
 const queueSidebarVariants: Variants = {
-  closed: (rightWidth) => ({
-    transition: { duration: 0.5 },
-    width: rightWidth,
-    x: 1000,
-    zIndex: 120,
-  }),
-  open: (rightWidth) => ({
-    transition: {
-      duration: 0.5,
-      ease: 'anticipate',
-    },
-    width: rightWidth,
-    x: 0,
-    zIndex: 120,
-  }),
+    closed: (rightWidth) => ({
+        transition: { duration: 0.5 },
+        width: rightWidth,
+        x: 1000,
+        zIndex: 120,
+    }),
+    open: (rightWidth) => ({
+        transition: {
+            duration: 0.5,
+            ease: 'anticipate',
+        },
+        width: rightWidth,
+        x: 0,
+        zIndex: 120,
+    }),
 };
 
 const QueueDrawer = styled(motion.div)`
-  background: var(--main-bg);
-  border: 3px solid var(--generic-border-color);
-  border-radius: 10px;
+    background: var(--main-bg);
+    border: 3px solid var(--generic-border-color);
+    border-radius: 10px;
 `;
 
 const queueDrawerVariants: Variants = {
-  closed: (windowBarStyle) => ({
-    height:
-      windowBarStyle === Platform.WINDOWS || Platform.MACOS
-        ? 'calc(100vh - 205px)'
-        : 'calc(100vh - 175px)',
-    position: 'absolute',
-    right: 0,
-    top: '75px',
-    transition: {
-      duration: 0.4,
-      ease: 'anticipate',
-    },
-    width: '450px',
-    x: '50vw',
-  }),
-  open: (windowBarStyle) => ({
-    boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
-    height:
-      windowBarStyle === Platform.WINDOWS || Platform.MACOS
-        ? 'calc(100vh - 205px)'
-        : 'calc(100vh - 175px)',
-    position: 'absolute',
-    right: '20px',
-    top: '75px',
-    transition: {
-      damping: 10,
-      delay: 0,
-      duration: 0.4,
-      ease: 'anticipate',
-      mass: 0.5,
-    },
-    width: '450px',
-    x: 0,
-    zIndex: 120,
-  }),
+    closed: (windowBarStyle) => ({
+        height:
+            windowBarStyle === Platform.WINDOWS || Platform.MACOS
+                ? 'calc(100vh - 205px)'
+                : 'calc(100vh - 175px)',
+        position: 'absolute',
+        right: 0,
+        top: '75px',
+        transition: {
+            duration: 0.4,
+            ease: 'anticipate',
+        },
+        width: '450px',
+        x: '50vw',
+    }),
+    open: (windowBarStyle) => ({
+        boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
+        height:
+            windowBarStyle === Platform.WINDOWS || Platform.MACOS
+                ? 'calc(100vh - 205px)'
+                : 'calc(100vh - 175px)',
+        position: 'absolute',
+        right: '20px',
+        top: '75px',
+        transition: {
+            damping: 10,
+            delay: 0,
+            duration: 0.4,
+            ease: 'anticipate',
+            mass: 0.5,
+        },
+        width: '450px',
+        x: 0,
+        zIndex: 120,
+    }),
 };
 
 interface RightSidebarProps {
-  isResizing: boolean;
-  startResizing: (direction: 'left' | 'right') => void;
+    isResizing: boolean;
+    startResizing: (direction: 'left' | 'right') => void;
 }
 
 export const RightSidebar = forwardRef(
-  ({ isResizing: isResizingRight, startResizing }: RightSidebarProps, ref: Ref<HTMLDivElement>) => {
-    const { windowBarStyle } = useWindowSettings();
-    const { rightWidth, rightExpanded } = useSidebarStore();
-    const { sideQueueType } = useGeneralSettings();
-    const location = useLocation();
-    const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
+    (
+        { isResizing: isResizingRight, startResizing }: RightSidebarProps,
+        ref: Ref<HTMLDivElement>,
+    ) => {
+        const { windowBarStyle } = useWindowSettings();
+        const { rightWidth, rightExpanded } = useSidebarStore();
+        const { sideQueueType } = useGeneralSettings();
+        const location = useLocation();
+        const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
 
-    return (
-      <AnimatePresence
-        key="queue-sidebar"
-        presenceAffectsLayout
-        initial={false}
-        mode="sync"
-      >
-        {showSideQueue && (
-          <>
-            {sideQueueType === 'sideQueue' ? (
-              <RightSidebarContainer
+        return (
+            <AnimatePresence
                 key="queue-sidebar"
-                animate="open"
-                custom={rightWidth}
-                exit="closed"
-                id="sidebar-queue"
-                initial="closed"
-                variants={queueSidebarVariants}
-              >
-                <ResizeHandle
-                  ref={ref}
-                  isResizing={isResizingRight}
-                  placement="left"
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    startResizing('right');
-                  }}
-                />
-                <SidebarPlayQueue />
-              </RightSidebarContainer>
-            ) : (
-              <QueueDrawer
-                key="queue-drawer"
-                animate="open"
-                custom={windowBarStyle}
-                exit="closed"
-                id="drawer-queue"
-                initial="closed"
-                variants={queueDrawerVariants}
-              >
-                <DrawerPlayQueue />
-              </QueueDrawer>
-            )}
-          </>
-        )}
-      </AnimatePresence>
-    );
-  },
+                presenceAffectsLayout
+                initial={false}
+                mode="sync"
+            >
+                {showSideQueue && (
+                    <>
+                        {sideQueueType === 'sideQueue' ? (
+                            <RightSidebarContainer
+                                key="queue-sidebar"
+                                animate="open"
+                                custom={rightWidth}
+                                exit="closed"
+                                id="sidebar-queue"
+                                initial="closed"
+                                variants={queueSidebarVariants}
+                            >
+                                <ResizeHandle
+                                    ref={ref}
+                                    isResizing={isResizingRight}
+                                    placement="left"
+                                    onMouseDown={(e) => {
+                                        e.preventDefault();
+                                        startResizing('right');
+                                    }}
+                                />
+                                <SidebarPlayQueue />
+                            </RightSidebarContainer>
+                        ) : (
+                            <QueueDrawer
+                                key="queue-drawer"
+                                animate="open"
+                                custom={windowBarStyle}
+                                exit="closed"
+                                id="drawer-queue"
+                                initial="closed"
+                                variants={queueDrawerVariants}
+                            >
+                                <DrawerPlayQueue />
+                            </QueueDrawer>
+                        )}
+                    </>
+                )}
+            </AnimatePresence>
+        );
+    },
 );

src/renderer/layouts/default-layout/side-drawer-queue.tsx

@@ -10,132 +10,132 @@ import { useAppStore, useSidebarStore } from '/@/renderer/store';
 import { Platform } from '/@/renderer/types';
 
 const QueueDrawerArea = styled(motion.div)`
-  position: absolute;
-  top: 50%;
-  right: 25px;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  width: 20px;
-  height: 30px;
-  user-select: none;
+    position: absolute;
+    top: 50%;
+    right: 25px;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    width: 20px;
+    height: 30px;
+    user-select: none;
 `;
 
 const QueueDrawer = styled(motion.div)`
-  background: var(--main-bg);
-  border: 3px solid var(--generic-border-color);
-  border-radius: 10px;
+    background: var(--main-bg);
+    border: 3px solid var(--generic-border-color);
+    border-radius: 10px;
 `;
 
 const queueDrawerVariants: Variants = {
-  closed: (windowBarStyle) => ({
-    height:
-      windowBarStyle === Platform.WINDOWS || Platform.MACOS
-        ? 'calc(100vh - 205px)'
-        : 'calc(100vh - 175px)',
-    position: 'absolute',
-    right: 0,
-    top: '75px',
-    transition: {
-      duration: 0.4,
-      ease: 'anticipate',
-    },
-    width: '450px',
-    x: '50vw',
-  }),
-  open: (windowBarStyle) => ({
-    boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
-    height:
-      windowBarStyle === Platform.WINDOWS || Platform.MACOS
-        ? 'calc(100vh - 205px)'
-        : 'calc(100vh - 175px)',
-    position: 'absolute',
-    right: '20px',
-    top: '75px',
-    transition: {
-      damping: 10,
-      delay: 0,
-      duration: 0.4,
-      ease: 'anticipate',
-      mass: 0.5,
-    },
-    width: '450px',
-    x: 0,
-    zIndex: 120,
-  }),
+    closed: (windowBarStyle) => ({
+        height:
+            windowBarStyle === Platform.WINDOWS || Platform.MACOS
+                ? 'calc(100vh - 205px)'
+                : 'calc(100vh - 175px)',
+        position: 'absolute',
+        right: 0,
+        top: '75px',
+        transition: {
+            duration: 0.4,
+            ease: 'anticipate',
+        },
+        width: '450px',
+        x: '50vw',
+    }),
+    open: (windowBarStyle) => ({
+        boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
+        height:
+            windowBarStyle === Platform.WINDOWS || Platform.MACOS
+                ? 'calc(100vh - 205px)'
+                : 'calc(100vh - 175px)',
+        position: 'absolute',
+        right: '20px',
+        top: '75px',
+        transition: {
+            damping: 10,
+            delay: 0,
+            duration: 0.4,
+            ease: 'anticipate',
+            mass: 0.5,
+        },
+        width: '450px',
+        x: 0,
+        zIndex: 120,
+    }),
 };
 
 const queueDrawerButtonVariants: Variants = {
-  hidden: {
-    opacity: 0,
-    transition: { duration: 0.2 },
-    x: 100,
-  },
-  visible: {
-    opacity: 0.5,
-    transition: { duration: 0.1, ease: 'anticipate' },
-    x: 0,
-  },
+    hidden: {
+        opacity: 0,
+        transition: { duration: 0.2 },
+        x: 100,
+    },
+    visible: {
+        opacity: 0.5,
+        transition: { duration: 0.1, ease: 'anticipate' },
+        x: 0,
+    },
 };
 
 export const SideDrawerQueue = () => {
-  const location = useLocation();
-  const [drawer, drawerHandler] = useDisclosure(false);
-  const { rightExpanded } = useSidebarStore();
+    const location = useLocation();
+    const [drawer, drawerHandler] = useDisclosure(false);
+    const { rightExpanded } = useSidebarStore();
 
-  const drawerTimeout = useTimeout(() => drawerHandler.open(), 500);
+    const drawerTimeout = useTimeout(() => drawerHandler.open(), 500);
 
-  const handleEnterDrawerButton = useCallback(() => {
-    drawerTimeout.start();
-  }, [drawerTimeout]);
+    const handleEnterDrawerButton = useCallback(() => {
+        drawerTimeout.start();
+    }, [drawerTimeout]);
 
-  const handleLeaveDrawerButton = useCallback(() => {
-    drawerTimeout.clear();
-  }, [drawerTimeout]);
+    const handleLeaveDrawerButton = useCallback(() => {
+        drawerTimeout.clear();
+    }, [drawerTimeout]);
 
-  const isQueueDrawerButtonVisible =
-    !rightExpanded && !drawer && location.pathname !== AppRoute.NOW_PLAYING;
+    const isQueueDrawerButtonVisible =
+        !rightExpanded && !drawer && location.pathname !== AppRoute.NOW_PLAYING;
 
-  return (
-    <>
-      <AnimatePresence
-        initial={false}
-        mode="wait"
-      >
-        {isQueueDrawerButtonVisible && (
-          <QueueDrawerArea
-            key="queue-drawer-button"
-            animate="visible"
-            exit="hidden"
-            initial="hidden"
-            variants={queueDrawerButtonVariants}
-            whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }}
-            onMouseEnter={handleEnterDrawerButton}
-            onMouseLeave={handleLeaveDrawerButton}
-          >
-            <TbArrowBarLeft size={12} />
-          </QueueDrawerArea>
-        )}
+    return (
+        <>
+            <AnimatePresence
+                initial={false}
+                mode="wait"
+            >
+                {isQueueDrawerButtonVisible && (
+                    <QueueDrawerArea
+                        key="queue-drawer-button"
+                        animate="visible"
+                        exit="hidden"
+                        initial="hidden"
+                        variants={queueDrawerButtonVariants}
+                        whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }}
+                        onMouseEnter={handleEnterDrawerButton}
+                        onMouseLeave={handleLeaveDrawerButton}
+                    >
+                        <TbArrowBarLeft size={12} />
+                    </QueueDrawerArea>
+                )}
 
-        {drawer && (
-          <QueueDrawer
-            key="queue-drawer"
-            animate="open"
-            exit="closed"
-            initial="closed"
-            variants={queueDrawerVariants}
-            onMouseLeave={() => {
-              // The drawer will close due to the delay when setting isReorderingQueue
-              setTimeout(() => {
-                if (useAppStore.getState().isReorderingQueue) return;
-                drawerHandler.close();
-              }, 50);
-            }}
-          >
-            <DrawerPlayQueue />
-          </QueueDrawer>
-        )}
-      </AnimatePresence>
-    </>
-  );
+                {drawer && (
+                    <QueueDrawer
+                        key="queue-drawer"
+                        animate="open"
+                        exit="closed"
+                        initial="closed"
+                        variants={queueDrawerVariants}
+                        onMouseLeave={() => {
+                            // The drawer will close due to the delay when setting isReorderingQueue
+                            setTimeout(() => {
+                                if (useAppStore.getState().isReorderingQueue) return;
+                                drawerHandler.close();
+                            }, 50);
+                        }}
+                    >
+                        <DrawerPlayQueue />
+                    </QueueDrawer>
+                )}
+            </AnimatePresence>
+        </>
+    );
 };