Lint all files

src/renderer/features/sidebar/components/action-bar.tsx

@@ -8,130 +8,130 @@ import { useContainerQuery } from '/@/renderer/hooks';
 import { useCommandPalette } from '/@/renderer/store';
 
 const ActionsContainer = styled.div`
-  display: flex;
-  align-items: center;
-  height: 70px;
-  -webkit-app-region: drag;
+    display: flex;
+    align-items: center;
+    height: 70px;
+    -webkit-app-region: drag;
 
-  input {
-    -webkit-app-region: no-drag;
-  }
+    input {
+        -webkit-app-region: no-drag;
+    }
 `;
 
 export const ActionBar = () => {
-  const cq = useContainerQuery({ md: 300 });
-  const navigate = useNavigate();
-  const { open } = useCommandPalette();
+    const cq = useContainerQuery({ md: 300 });
+    const navigate = useNavigate();
+    const { open } = useCommandPalette();
 
-  return (
-    <ActionsContainer ref={cq.ref}>
-      {cq.isMd ? (
-        <Grid
-          display="flex"
-          gutter="sm"
-          px="1rem"
-          w="100%"
-        >
-          <Grid.Col span={6}>
-            <TextInput
-              readOnly
-              icon={<RiSearchLine />}
-              placeholder="Search"
-              size="md"
-              onClick={open}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  open();
-                }
-              }}
-            />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <Group
-              grow
-              noWrap
-              spacing="sm"
-            >
-              <DropdownMenu position="bottom-start">
-                <DropdownMenu.Target>
-                  <Button
-                    p="0.5rem"
-                    size="md"
-                    variant="default"
-                  >
-                    <RiMenuFill size="1rem" />
-                  </Button>
-                </DropdownMenu.Target>
-                <DropdownMenu.Dropdown>
-                  <AppMenu />
-                </DropdownMenu.Dropdown>
-              </DropdownMenu>
-              <Button
-                p="0.5rem"
-                size="md"
-                variant="default"
-                onClick={() => navigate(-1)}
-              >
-                <RiArrowLeftSLine size="1.5rem" />
-              </Button>
-              <Button
-                p="0.5rem"
-                size="md"
-                variant="default"
-                onClick={() => navigate(1)}
-              >
-                <RiArrowRightSLine size="1.5rem" />
-              </Button>
-            </Group>
-          </Grid.Col>
-        </Grid>
-      ) : (
-        <Group
-          grow
-          px="1rem"
-          spacing="sm"
-          w="100%"
-        >
-          <Button
-            p="0.5rem"
-            size="md"
-            variant="default"
-            onClick={open}
-          >
-            <RiSearchLine size="1rem" />
-          </Button>
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                p="0.5rem"
-                size="md"
-                variant="default"
-              >
-                <RiMenuFill size="1rem" />
-              </Button>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              <AppMenu />
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-          <Button
-            p="0.5rem"
-            size="md"
-            variant="default"
-            onClick={() => navigate(-1)}
-          >
-            <RiArrowLeftSLine size="1.5rem" />
-          </Button>
-          <Button
-            p="0.5rem"
-            size="md"
-            variant="default"
-            onClick={() => navigate(1)}
-          >
-            <RiArrowRightSLine size="1.5rem" />
-          </Button>
-        </Group>
-      )}
-    </ActionsContainer>
-  );
+    return (
+        <ActionsContainer ref={cq.ref}>
+            {cq.isMd ? (
+                <Grid
+                    display="flex"
+                    gutter="sm"
+                    px="1rem"
+                    w="100%"
+                >
+                    <Grid.Col span={6}>
+                        <TextInput
+                            readOnly
+                            icon={<RiSearchLine />}
+                            placeholder="Search"
+                            size="md"
+                            onClick={open}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    open();
+                                }
+                            }}
+                        />
+                    </Grid.Col>
+                    <Grid.Col span={6}>
+                        <Group
+                            grow
+                            noWrap
+                            spacing="sm"
+                        >
+                            <DropdownMenu position="bottom-start">
+                                <DropdownMenu.Target>
+                                    <Button
+                                        p="0.5rem"
+                                        size="md"
+                                        variant="default"
+                                    >
+                                        <RiMenuFill size="1rem" />
+                                    </Button>
+                                </DropdownMenu.Target>
+                                <DropdownMenu.Dropdown>
+                                    <AppMenu />
+                                </DropdownMenu.Dropdown>
+                            </DropdownMenu>
+                            <Button
+                                p="0.5rem"
+                                size="md"
+                                variant="default"
+                                onClick={() => navigate(-1)}
+                            >
+                                <RiArrowLeftSLine size="1.5rem" />
+                            </Button>
+                            <Button
+                                p="0.5rem"
+                                size="md"
+                                variant="default"
+                                onClick={() => navigate(1)}
+                            >
+                                <RiArrowRightSLine size="1.5rem" />
+                            </Button>
+                        </Group>
+                    </Grid.Col>
+                </Grid>
+            ) : (
+                <Group
+                    grow
+                    px="1rem"
+                    spacing="sm"
+                    w="100%"
+                >
+                    <Button
+                        p="0.5rem"
+                        size="md"
+                        variant="default"
+                        onClick={open}
+                    >
+                        <RiSearchLine size="1rem" />
+                    </Button>
+                    <DropdownMenu position="bottom-start">
+                        <DropdownMenu.Target>
+                            <Button
+                                p="0.5rem"
+                                size="md"
+                                variant="default"
+                            >
+                                <RiMenuFill size="1rem" />
+                            </Button>
+                        </DropdownMenu.Target>
+                        <DropdownMenu.Dropdown>
+                            <AppMenu />
+                        </DropdownMenu.Dropdown>
+                    </DropdownMenu>
+                    <Button
+                        p="0.5rem"
+                        size="md"
+                        variant="default"
+                        onClick={() => navigate(-1)}
+                    >
+                        <RiArrowLeftSLine size="1.5rem" />
+                    </Button>
+                    <Button
+                        p="0.5rem"
+                        size="md"
+                        variant="default"
+                        onClick={() => navigate(1)}
+                    >
+                        <RiArrowRightSLine size="1.5rem" />
+                    </Button>
+                </Group>
+            )}
+        </ActionsContainer>
+    );
 };

src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx

@@ -6,27 +6,27 @@ import styled from 'styled-components';
 import { Text } from '/@/renderer/components';
 
 const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
-  position: relative;
-  width: 100%;
-  padding: 0.9rem 0.3rem;
-  border-right: var(--sidebar-border);
-  cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
-  opacity: ${(props) => props.$disabled && 0.6};
-  user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
-  pointer-events: ${(props) => (props.$disabled ? 'none' : 'all')};
+    position: relative;
+    width: 100%;
+    padding: 0.9rem 0.3rem;
+    border-right: var(--sidebar-border);
+    cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
+    opacity: ${(props) => props.$disabled && 0.6};
+    user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
+    pointer-events: ${(props) => (props.$disabled ? 'none' : 'all')};
 
-  svg {
-    fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
-  }
+    svg {
+        fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
+    }
 
-  &:focus-visible {
-    background-color: var(--sidebar-bg-hover);
-    outline: none;
-  }
+    &:focus-visible {
+        background-color: var(--sidebar-bg-hover);
+        outline: none;
+    }
 
-  ${(props) =>
-    !props.$disabled &&
-    `
+    ${(props) =>
+        !props.$disabled &&
+        `
       &:hover {
           background-color: var(--sidebar-bg-hover);
 
@@ -42,65 +42,65 @@ const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
 `;
 
 const TextWrapper = styled.div`
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-align: center;
-  text-overflow: ellipsis;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    text-overflow: ellipsis;
 `;
 
 const ActiveTabIndicator = styled(motion.div)`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 3px;
-  width: 2px;
-  height: 80%;
-  margin-top: auto;
-  margin-bottom: auto;
-  background: var(--primary-color);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 3px;
+    width: 2px;
+    height: 80%;
+    margin-top: auto;
+    margin-bottom: auto;
+    background: var(--primary-color);
 `;
 
 interface CollapsedSidebarItemProps {
-  activeIcon: React.ReactNode;
-  disabled?: boolean;
-  icon: React.ReactNode;
-  label: string;
-  route?: string;
+    activeIcon: React.ReactNode;
+    disabled?: boolean;
+    icon: React.ReactNode;
+    label: string;
+    route?: string;
 }
 
 const _CollapsedSidebarItem = forwardRef<HTMLDivElement, CollapsedSidebarItemProps>(
-  ({ route, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
-    const match = useMatch(route || '/null');
-    const isMatch = Boolean(match);
+    ({ route, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
+        const match = useMatch(route || '/null');
+        const isMatch = Boolean(match);
 
-    return (
-      <Container
-        ref={ref}
-        $active={Boolean(match)}
-        $disabled={disabled}
-        align="center"
-        direction="column"
-        {...props}
-      >
-        {isMatch ? <ActiveTabIndicator /> : null}
-        {isMatch ? activeIcon : icon}
-        <TextWrapper>
-          <Text
-            $secondary={!isMatch}
-            fw="600"
-            overflow="hidden"
-            size="xs"
-          >
-            {label}
-          </Text>
-        </TextWrapper>
-      </Container>
-    );
-  },
+        return (
+            <Container
+                ref={ref}
+                $active={Boolean(match)}
+                $disabled={disabled}
+                align="center"
+                direction="column"
+                {...props}
+            >
+                {isMatch ? <ActiveTabIndicator /> : null}
+                {isMatch ? activeIcon : icon}
+                <TextWrapper>
+                    <Text
+                        $secondary={!isMatch}
+                        fw="600"
+                        overflow="hidden"
+                        size="xs"
+                    >
+                        {label}
+                    </Text>
+                </TextWrapper>
+            </Container>
+        );
+    },
 );
 
 export const CollapsedSidebarItem = createPolymorphicComponent<'button', CollapsedSidebarItemProps>(
-  _CollapsedSidebarItem,
+    _CollapsedSidebarItem,
 );

src/renderer/features/sidebar/components/collapsed-sidebar.tsx

@@ -3,27 +3,27 @@ import { motion } from 'framer-motion';
 import { useMemo } from 'react';
 import { IconType } from 'react-icons';
 import {
-  RiUserVoiceLine,
-  RiMenuFill,
-  RiFolder3Line,
-  RiPlayListLine,
-  RiAlbumLine,
-  RiHome6Line,
-  RiMusic2Line,
-  RiHome6Fill,
-  RiAlbumFill,
-  RiMusic2Fill,
-  RiUserVoiceFill,
-  RiFlag2Fill,
-  RiFolder3Fill,
-  RiPlayListFill,
-  RiSearchLine,
-  RiSearchFill,
-  RiPlayFill,
-  RiPlayLine,
-  RiSettings2Fill,
-  RiSettings2Line,
-  RiFlag2Line,
+    RiUserVoiceLine,
+    RiMenuFill,
+    RiFolder3Line,
+    RiPlayListLine,
+    RiAlbumLine,
+    RiHome6Line,
+    RiMusic2Line,
+    RiHome6Fill,
+    RiAlbumFill,
+    RiMusic2Fill,
+    RiUserVoiceFill,
+    RiFlag2Fill,
+    RiFolder3Fill,
+    RiPlayListFill,
+    RiSearchLine,
+    RiSearchFill,
+    RiPlayFill,
+    RiPlayLine,
+    RiSettings2Fill,
+    RiSettings2Line,
+    RiFlag2Line,
 } from 'react-icons/ri';
 import { generatePath, NavLink } from 'react-router-dom';
 import styled from 'styled-components';
@@ -36,110 +36,110 @@ import { SidebarItemType, useGeneralSettings, useWindowSettings } from '/@/rende
 import { Platform } from '/@/renderer/types';
 
 const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  max-height: ${(props) =>
-    props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
-      ? 'calc(100vh - 149px)'
-      : 'calc(100vh - 119px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
-  user-select: none;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: ${(props) =>
+        props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
+            ? 'calc(100vh - 149px)'
+            : 'calc(100vh - 119px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
+    user-select: none;
 `;
 
 const sidebarItemMap = {
-  [AppRoute.HOME]: {
-    activeIcon: RiHome6Fill,
-    icon: RiHome6Line,
-  },
-  [AppRoute.LIBRARY_ALBUMS]: {
-    activeIcon: RiAlbumFill,
-    icon: RiAlbumLine,
-  },
-  [AppRoute.LIBRARY_ALBUM_ARTISTS]: {
-    activeIcon: RiUserVoiceFill,
-    icon: RiUserVoiceLine,
-  },
-  [AppRoute.PLAYLISTS]: {
-    activeIcon: RiPlayListFill,
-    icon: RiPlayListLine,
-  },
-  [AppRoute.LIBRARY_SONGS]: {
-    activeIcon: RiMusic2Fill,
-    icon: RiMusic2Line,
-  },
-  [AppRoute.LIBRARY_FOLDERS]: {
-    activeIcon: RiFolder3Fill,
-    icon: RiFolder3Line,
-  },
-  [AppRoute.LIBRARY_GENRES]: {
-    activeIcon: RiFlag2Fill,
-    icon: RiFlag2Line,
-  },
-  [generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: {
-    activeIcon: RiSearchFill,
-    icon: RiSearchLine,
-  },
-  [AppRoute.SETTINGS]: {
-    activeIcon: RiSettings2Fill,
-    icon: RiSettings2Line,
-  },
-  [AppRoute.NOW_PLAYING]: {
-    activeIcon: RiPlayFill,
-    icon: RiPlayLine,
-  },
+    [AppRoute.HOME]: {
+        activeIcon: RiHome6Fill,
+        icon: RiHome6Line,
+    },
+    [AppRoute.LIBRARY_ALBUMS]: {
+        activeIcon: RiAlbumFill,
+        icon: RiAlbumLine,
+    },
+    [AppRoute.LIBRARY_ALBUM_ARTISTS]: {
+        activeIcon: RiUserVoiceFill,
+        icon: RiUserVoiceLine,
+    },
+    [AppRoute.PLAYLISTS]: {
+        activeIcon: RiPlayListFill,
+        icon: RiPlayListLine,
+    },
+    [AppRoute.LIBRARY_SONGS]: {
+        activeIcon: RiMusic2Fill,
+        icon: RiMusic2Line,
+    },
+    [AppRoute.LIBRARY_FOLDERS]: {
+        activeIcon: RiFolder3Fill,
+        icon: RiFolder3Line,
+    },
+    [AppRoute.LIBRARY_GENRES]: {
+        activeIcon: RiFlag2Fill,
+        icon: RiFlag2Line,
+    },
+    [generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: {
+        activeIcon: RiSearchFill,
+        icon: RiSearchLine,
+    },
+    [AppRoute.SETTINGS]: {
+        activeIcon: RiSettings2Fill,
+        icon: RiSettings2Line,
+    },
+    [AppRoute.NOW_PLAYING]: {
+        activeIcon: RiPlayFill,
+        icon: RiPlayLine,
+    },
 };
 
 export const CollapsedSidebar = () => {
-  const { windowBarStyle } = useWindowSettings();
-  const { sidebarItems } = useGeneralSettings();
+    const { windowBarStyle } = useWindowSettings();
+    const { sidebarItems } = useGeneralSettings();
 
-  const sidebarItemsWithRoute: (SidebarItemType & {
-    activeIcon: IconType;
-    icon: IconType;
-  })[] = useMemo(() => {
-    if (!sidebarItems) return [];
+    const sidebarItemsWithRoute: (SidebarItemType & {
+        activeIcon: IconType;
+        icon: IconType;
+    })[] = useMemo(() => {
+        if (!sidebarItems) return [];
 
-    const items = sidebarItems
-      .filter((item) => !item.disabled)
-      .map((item) => ({
-        ...item,
-        ...sidebarItemMap[item.route as keyof typeof sidebarItemMap],
-      }));
+        const items = sidebarItems
+            .filter((item) => !item.disabled)
+            .map((item) => ({
+                ...item,
+                ...sidebarItemMap[item.route as keyof typeof sidebarItemMap],
+            }));
 
-    return items;
-  }, [sidebarItems]);
+        return items;
+    }, [sidebarItems]);
 
-  return (
-    <SidebarContainer windowBarStyle={windowBarStyle}>
-      <ScrollArea
-        scrollHideDelay={0}
-        scrollbarSize={8}
-      >
-        <DropdownMenu position="right-start">
-          <DropdownMenu.Target>
-            <CollapsedSidebarItem
-              activeIcon={<RiMenuFill size="25" />}
-              component={UnstyledButton}
-              icon={<RiMenuFill size="25" />}
-              label="Menu"
-            />
-          </DropdownMenu.Target>
-          <DropdownMenu.Dropdown>
-            <AppMenu />
-          </DropdownMenu.Dropdown>
-        </DropdownMenu>
-        {sidebarItemsWithRoute.map((item) => (
-          <CollapsedSidebarItem
-            key={item.id}
-            activeIcon={<item.activeIcon size="25" />}
-            component={NavLink}
-            icon={<item.icon size="25" />}
-            label={item.label}
-            route={item.route}
-            to={item.route}
-          />
-        ))}
-      </ScrollArea>
-    </SidebarContainer>
-  );
+    return (
+        <SidebarContainer windowBarStyle={windowBarStyle}>
+            <ScrollArea
+                scrollHideDelay={0}
+                scrollbarSize={8}
+            >
+                <DropdownMenu position="right-start">
+                    <DropdownMenu.Target>
+                        <CollapsedSidebarItem
+                            activeIcon={<RiMenuFill size="25" />}
+                            component={UnstyledButton}
+                            icon={<RiMenuFill size="25" />}
+                            label="Menu"
+                        />
+                    </DropdownMenu.Target>
+                    <DropdownMenu.Dropdown>
+                        <AppMenu />
+                    </DropdownMenu.Dropdown>
+                </DropdownMenu>
+                {sidebarItemsWithRoute.map((item) => (
+                    <CollapsedSidebarItem
+                        key={item.id}
+                        activeIcon={<item.activeIcon size="25" />}
+                        component={NavLink}
+                        icon={<item.icon size="25" />}
+                        label={item.label}
+                        route={item.route}
+                        to={item.route}
+                    />
+                ))}
+            </ScrollArea>
+        </SidebarContainer>
+    );
 };

src/renderer/features/sidebar/components/sidebar-item.tsx

@@ -5,73 +5,73 @@ import { Link } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 
 interface ListItemProps extends FlexProps {
-  children: ReactNode;
-  disabled?: boolean;
-  to?: string;
+    children: ReactNode;
+    disabled?: boolean;
+    to?: string;
 }
 
 const StyledItem = styled(Flex)`
-  width: 100%;
-  font-weight: 600;
-  font-size: 1.1rem;
-  font-family: var(--content-font-family);
+    width: 100%;
+    font-weight: 600;
+    font-size: 1.1rem;
+    font-family: var(--content-font-family);
 
-  &:focus-visible {
-    border: 1px solid var(--primary-color);
-  }
+    &:focus-visible {
+        border: 1px solid var(--primary-color);
+    }
 `;
 
 const ItemStyle = css`
-  display: flex;
-  width: 100%;
-  padding: 0.5rem 1rem;
-  color: var(--sidebar-fg);
-  border: 1px transparent solid;
-  transition: color 0.2s ease-in-out;
+    display: flex;
+    width: 100%;
+    padding: 0.5rem 1rem;
+    color: var(--sidebar-fg);
+    border: 1px transparent solid;
+    transition: color 0.2s ease-in-out;
 
-  &:hover {
-    color: var(--sidebar-fg-hover);
-  }
+    &:hover {
+        color: var(--sidebar-fg-hover);
+    }
 `;
 
 const _ItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
-  opacity: ${(props) => props.disabled && 0.6};
-  pointer-events: ${(props) => props.disabled && 'none'};
+    opacity: ${(props) => props.disabled && 0.6};
+    pointer-events: ${(props) => props.disabled && 'none'};
 
-  &:focus-visible {
-    border: 1px solid var(--primary-color);
-  }
+    &:focus-visible {
+        border: 1px solid var(--primary-color);
+    }
 
-  ${ItemStyle}
+    ${ItemStyle}
 `;
 
 const ItemLink = createPolymorphicComponent<'a', ListItemProps>(_ItemLink);
 
 export const SidebarItem = ({ to, children, ...props }: ListItemProps) => {
-  if (to) {
+    if (to) {
+        return (
+            <ItemLink
+                component={Link}
+                to={to}
+                {...props}
+            >
+                {children}
+            </ItemLink>
+        );
+    }
     return (
-      <ItemLink
-        component={Link}
-        to={to}
-        {...props}
-      >
-        {children}
-      </ItemLink>
+        <StyledItem
+            tabIndex={0}
+            {...props}
+        >
+            {children}
+        </StyledItem>
     );
-  }
-  return (
-    <StyledItem
-      tabIndex={0}
-      {...props}
-    >
-      {children}
-    </StyledItem>
-  );
 };
 
 SidebarItem.Link = ItemLink;
 
 SidebarItem.defaultProps = {
-  disabled: false,
-  to: undefined,
+    disabled: false,
+    to: undefined,
 };

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -15,149 +15,153 @@ import { FixedSizeList, ListChildComponentProps } from 'react-window';
 import { useHideScrollbar } from '/@/renderer/hooks';
 
 interface SidebarPlaylistListProps {
-  data: ReturnType<typeof usePlaylistList>['data'];
+    data: ReturnType<typeof usePlaylistList>['data'];
 }
 
 const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
-  return (
-    <div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
-      <Group
-        noWrap
-        className="sidebar-playlist-item"
-        pos="relative"
-        position="apart"
-        sx={{
-          '&:hover': {
-            '.sidebar-playlist-controls': {
-              display: 'flex',
-            },
-            '.sidebar-playlist-name': {
-              color: 'var(--sidebar-fg-hover) !important',
-            },
-          },
-        }}
-      >
-        <Text
-          className="sidebar-playlist-name"
-          component={Link}
-          overflow="hidden"
-          size="md"
-          sx={{
-            color: 'var(--sidebar-fg) !important',
-            cursor: 'default',
-            width: '100%',
-          }}
-          to={
-            data?.items[index].id
-              ? generatePath(AppRoute.PLAYLISTS_DETAIL, {
-                  playlistId: data?.items[index].id,
-                })
-              : undefined
-          }
-        >
-          {data?.items[index].name}
-        </Text>
-        <Group
-          noWrap
-          className="sidebar-playlist-controls"
-          display="none"
-          pos="absolute"
-          right="0"
-          spacing="sm"
-        >
-          <Button
-            compact
-            size="md"
-            tooltip={{ label: 'Play', openDelay: 500 }}
-            variant="default"
-            onClick={() => {
-              if (!data?.items?.[index].id) return;
-              data.handlePlay(data?.items[index].id, Play.NOW);
-            }}
-          >
-            <RiPlayFill />
-          </Button>
-          <Button
-            compact
-            size="md"
-            tooltip={{ label: 'Add to queue', openDelay: 500 }}
-            variant="default"
-            onClick={() => {
-              if (!data?.items?.[index].id) return;
-              data.handlePlay(data?.items[index].id, Play.LAST);
-            }}
-          >
-            <RiAddBoxFill />
-          </Button>
-          <Button
-            compact
-            size="md"
-            tooltip={{ label: 'Add to queue next', openDelay: 500 }}
-            variant="default"
-            onClick={() => {
-              if (!data?.items?.[index].id) return;
-              data.handlePlay(data?.items[index].id, Play.NEXT);
-            }}
-          >
-            <RiAddCircleFill />
-          </Button>
-        </Group>
-      </Group>
-    </div>
-  );
+    return (
+        <div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
+            <Group
+                noWrap
+                className="sidebar-playlist-item"
+                pos="relative"
+                position="apart"
+                sx={{
+                    '&:hover': {
+                        '.sidebar-playlist-controls': {
+                            display: 'flex',
+                        },
+                        '.sidebar-playlist-name': {
+                            color: 'var(--sidebar-fg-hover) !important',
+                        },
+                    },
+                }}
+            >
+                <Text
+                    className="sidebar-playlist-name"
+                    component={Link}
+                    overflow="hidden"
+                    size="md"
+                    sx={{
+                        color: 'var(--sidebar-fg) !important',
+                        cursor: 'default',
+                        width: '100%',
+                    }}
+                    to={
+                        data?.items[index].id
+                            ? generatePath(AppRoute.PLAYLISTS_DETAIL, {
+                                  playlistId: data?.items[index].id,
+                              })
+                            : undefined
+                    }
+                >
+                    {data?.items[index].name}
+                </Text>
+                <Group
+                    noWrap
+                    className="sidebar-playlist-controls"
+                    display="none"
+                    pos="absolute"
+                    right="0"
+                    spacing="sm"
+                >
+                    <Button
+                        compact
+                        size="md"
+                        tooltip={{ label: 'Play', openDelay: 500 }}
+                        variant="default"
+                        onClick={() => {
+                            if (!data?.items?.[index].id) return;
+                            data.handlePlay(data?.items[index].id, Play.NOW);
+                        }}
+                    >
+                        <RiPlayFill />
+                    </Button>
+                    <Button
+                        compact
+                        size="md"
+                        tooltip={{ label: 'Add to queue', openDelay: 500 }}
+                        variant="default"
+                        onClick={() => {
+                            if (!data?.items?.[index].id) return;
+                            data.handlePlay(data?.items[index].id, Play.LAST);
+                        }}
+                    >
+                        <RiAddBoxFill />
+                    </Button>
+                    <Button
+                        compact
+                        size="md"
+                        tooltip={{ label: 'Add to queue next', openDelay: 500 }}
+                        variant="default"
+                        onClick={() => {
+                            if (!data?.items?.[index].id) return;
+                            data.handlePlay(data?.items[index].id, Play.NEXT);
+                        }}
+                    >
+                        <RiAddCircleFill />
+                    </Button>
+                </Group>
+            </Group>
+        </div>
+    );
 };
 
 export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
-  const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
-  const handlePlayQueueAdd = usePlayQueueAdd();
+    const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
+    const handlePlayQueueAdd = usePlayQueueAdd();
 
-  const [rect, setRect] = useState({
-    height: 0,
-    width: 0,
-  });
+    const [rect, setRect] = useState({
+        height: 0,
+        width: 0,
+    });
 
-  const [debounced] = useDebouncedValue(rect, 25);
+    const [debounced] = useDebouncedValue(rect, 25);
 
-  const handlePlayPlaylist = useCallback(
-    (id: string, playType: Play) => {
-      handlePlayQueueAdd?.({
-        byItemType: {
-          id: [id],
-          type: LibraryItem.PLAYLIST,
+    const handlePlayPlaylist = useCallback(
+        (id: string, playType: Play) => {
+            handlePlayQueueAdd?.({
+                byItemType: {
+                    id: [id],
+                    type: LibraryItem.PLAYLIST,
+                },
+                playType,
+            });
         },
-        playType,
-      });
-    },
-    [handlePlayQueueAdd],
-  );
+        [handlePlayQueueAdd],
+    );
 
-  const memoizedItemData = useMemo(() => {
-    return {
-      handlePlay: handlePlayPlaylist,
-      items: data?.items,
-    };
-  }, [data?.items, handlePlayPlaylist]);
+    const memoizedItemData = useMemo(() => {
+        return {
+            handlePlay: handlePlayPlaylist,
+            items: data?.items,
+        };
+    }, [data?.items, handlePlayPlaylist]);
 
-  return (
-    <Flex
-      h="100%"
-      {...hideScrollbarElementProps}
-    >
-      <AutoSizer onResize={(e) => setRect(e as { height: number; width: number })}>
-        {() => (
-          <FixedSizeList
-            className={isScrollbarHidden ? 'hide-scrollbar overlay-scrollbar' : 'overlay-scrollbar'}
-            height={debounced.height}
-            itemCount={data?.items?.length || 0}
-            itemData={memoizedItemData}
-            itemSize={25}
-            overscanCount={20}
-            width={debounced.width}
-          >
-            {PlaylistRow}
-          </FixedSizeList>
-        )}
-      </AutoSizer>
-    </Flex>
-  );
+    return (
+        <Flex
+            h="100%"
+            {...hideScrollbarElementProps}
+        >
+            <AutoSizer onResize={(e) => setRect(e as { height: number; width: number })}>
+                {() => (
+                    <FixedSizeList
+                        className={
+                            isScrollbarHidden
+                                ? 'hide-scrollbar overlay-scrollbar'
+                                : 'overlay-scrollbar'
+                        }
+                        height={debounced.height}
+                        itemCount={data?.items?.length || 0}
+                        itemData={memoizedItemData}
+                        itemSize={25}
+                        overscanCount={20}
+                        width={debounced.width}
+                    >
+                        {PlaylistRow}
+                    </FixedSizeList>
+                )}
+            </AutoSizer>
+        </Flex>
+    );
 };

src/renderer/features/sidebar/components/sidebar.tsx

@@ -4,37 +4,37 @@ import { closeAllModals, openModal } from '@mantine/modals';
 import { AnimatePresence, motion } from 'framer-motion';
 import { IconType } from 'react-icons';
 import {
-  RiAddFill,
-  RiAlbumFill,
-  RiAlbumLine,
-  RiArrowDownSLine,
-  RiDiscLine,
-  RiFlag2Fill,
-  RiFlagLine,
-  RiFolder3Fill,
-  RiFolder3Line,
-  RiHome6Fill,
-  RiHome6Line,
-  RiListUnordered,
-  RiMusic2Fill,
-  RiMusic2Line,
-  RiPlayLine,
-  RiSearchFill,
-  RiUserVoiceFill,
-  RiUserVoiceLine,
-  RiSearchLine,
-  RiPlayFill,
-  RiSettings2Line,
-  RiSettings2Fill,
-  RiPlayListLine,
-  RiPlayListFill,
+    RiAddFill,
+    RiAlbumFill,
+    RiAlbumLine,
+    RiArrowDownSLine,
+    RiDiscLine,
+    RiFlag2Fill,
+    RiFlagLine,
+    RiFolder3Fill,
+    RiFolder3Line,
+    RiHome6Fill,
+    RiHome6Line,
+    RiListUnordered,
+    RiMusic2Fill,
+    RiMusic2Line,
+    RiPlayLine,
+    RiSearchFill,
+    RiUserVoiceFill,
+    RiUserVoiceLine,
+    RiSearchLine,
+    RiPlayFill,
+    RiSettings2Line,
+    RiSettings2Fill,
+    RiPlayListLine,
+    RiPlayListFill,
 } from 'react-icons/ri';
 import { generatePath, Link, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import {
-  SidebarItemType,
-  useGeneralSettings,
-  useWindowSettings,
+    SidebarItemType,
+    useGeneralSettings,
+    useWindowSettings,
 } from '../../../store/settings.store';
 import { LibraryItem, PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
 import { Button, MotionStack, Spinner, Tooltip } from '/@/renderer/components';
@@ -45,289 +45,291 @@ import { SidebarPlaylistList } from '/@/renderer/features/sidebar/components/sid
 import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
-  useAppStoreActions,
-  useCurrentServer,
-  useCurrentSong,
-  useFullScreenPlayerStore,
-  useSetFullScreenPlayerStore,
-  useSidebarStore,
+    useAppStoreActions,
+    useCurrentServer,
+    useCurrentSong,
+    useFullScreenPlayerStore,
+    useSetFullScreenPlayerStore,
+    useSidebarStore,
 } from '/@/renderer/store';
 import { fadeIn } from '/@/renderer/styles';
 import { Platform } from '/@/renderer/types';
 
 const SidebarContainer = styled.div<{ windowBarStyle: Platform }>`
-  height: 100%;
-  max-height: ${(props) =>
-    props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
-      ? 'calc(100vh - 149px)'
-      : 'calc(100vh - 179px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
-  user-select: none;
+    height: 100%;
+    max-height: ${(props) =>
+        props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
+            ? 'calc(100vh - 149px)'
+            : 'calc(100vh - 179px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
+    user-select: none;
 `;
 
 const ImageContainer = styled(motion.div)<{ height: string }>`
-  position: relative;
-  height: ${(props) => props.height};
-  cursor: pointer;
+    position: relative;
+    height: ${(props) => props.height};
+    cursor: pointer;
 
-  ${fadeIn};
-  animation: fadein 0.2s ease-in-out;
+    ${fadeIn};
+    animation: fadein 0.2s ease-in-out;
 
-  button {
-    display: none;
-  }
+    button {
+        display: none;
+    }
 
-  &:hover button {
-    display: block;
-  }
+    &:hover button {
+        display: block;
+    }
 `;
 
 const SidebarImage = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  background: var(--placeholder-bg);
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    background: var(--placeholder-bg);
 `;
 
 const sidebarItemMap = {
-  [AppRoute.HOME]: {
-    activeIcon: RiHome6Fill,
-    icon: RiHome6Line,
-  },
-  [AppRoute.LIBRARY_ALBUMS]: {
-    activeIcon: RiAlbumFill,
-    icon: RiAlbumLine,
-  },
-  [AppRoute.LIBRARY_ALBUM_ARTISTS]: {
-    activeIcon: RiUserVoiceFill,
-    icon: RiUserVoiceLine,
-  },
-  [AppRoute.PLAYLISTS]: {
-    activeIcon: RiPlayListFill,
-    icon: RiPlayListLine,
-  },
-  [AppRoute.LIBRARY_SONGS]: {
-    activeIcon: RiMusic2Fill,
-    icon: RiMusic2Line,
-  },
-  [AppRoute.LIBRARY_FOLDERS]: {
-    activeIcon: RiFolder3Fill,
-    icon: RiFolder3Line,
-  },
-  [AppRoute.LIBRARY_GENRES]: {
-    activeIcon: RiFlag2Fill,
-    icon: RiFlagLine,
-  },
-  [generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: {
-    activeIcon: RiSearchFill,
-    icon: RiSearchLine,
-  },
-  [AppRoute.SETTINGS]: {
-    activeIcon: RiSettings2Fill,
-    icon: RiSettings2Line,
-  },
-  [AppRoute.NOW_PLAYING]: {
-    activeIcon: RiPlayFill,
-    icon: RiPlayLine,
-  },
+    [AppRoute.HOME]: {
+        activeIcon: RiHome6Fill,
+        icon: RiHome6Line,
+    },
+    [AppRoute.LIBRARY_ALBUMS]: {
+        activeIcon: RiAlbumFill,
+        icon: RiAlbumLine,
+    },
+    [AppRoute.LIBRARY_ALBUM_ARTISTS]: {
+        activeIcon: RiUserVoiceFill,
+        icon: RiUserVoiceLine,
+    },
+    [AppRoute.PLAYLISTS]: {
+        activeIcon: RiPlayListFill,
+        icon: RiPlayListLine,
+    },
+    [AppRoute.LIBRARY_SONGS]: {
+        activeIcon: RiMusic2Fill,
+        icon: RiMusic2Line,
+    },
+    [AppRoute.LIBRARY_FOLDERS]: {
+        activeIcon: RiFolder3Fill,
+        icon: RiFolder3Line,
+    },
+    [AppRoute.LIBRARY_GENRES]: {
+        activeIcon: RiFlag2Fill,
+        icon: RiFlagLine,
+    },
+    [generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: {
+        activeIcon: RiSearchFill,
+        icon: RiSearchLine,
+    },
+    [AppRoute.SETTINGS]: {
+        activeIcon: RiSettings2Fill,
+        icon: RiSettings2Line,
+    },
+    [AppRoute.NOW_PLAYING]: {
+        activeIcon: RiPlayFill,
+        icon: RiPlayLine,
+    },
 };
 
 export const Sidebar = () => {
-  const location = useLocation();
-  const sidebar = useSidebarStore();
-  const { setSideBar } = useAppStoreActions();
-  const { windowBarStyle } = useWindowSettings();
-  const { sidebarPlaylistList } = useGeneralSettings();
-  const imageUrl = useCurrentSong()?.imageUrl;
-  const server = useCurrentServer();
+    const location = useLocation();
+    const sidebar = useSidebarStore();
+    const { setSideBar } = useAppStoreActions();
+    const { windowBarStyle } = useWindowSettings();
+    const { sidebarPlaylistList } = useGeneralSettings();
+    const imageUrl = useCurrentSong()?.imageUrl;
+    const server = useCurrentServer();
 
-  const upsizedImageUrl = imageUrl
-    ?.replace(/size=\d+/, 'size=300')
-    .replace(/width=\d+/, 'width=300')
-    .replace(/height=\d+/, 'height=300');
+    const upsizedImageUrl = imageUrl
+        ?.replace(/size=\d+/, 'size=300')
+        .replace(/width=\d+/, 'width=300')
+        .replace(/height=\d+/, 'height=300');
 
-  const showImage = sidebar.image;
+    const showImage = sidebar.image;
 
-  const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
+    const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
 
-    openModal({
-      children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
-      size: server?.type === ServerType?.NAVIDROME ? 'xl' : 'sm',
-      title: 'Create Playlist',
+        openModal({
+            children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
+            size: server?.type === ServerType?.NAVIDROME ? 'xl' : 'sm',
+            title: 'Create Playlist',
+        });
+    };
+
+    const playlistsQuery = usePlaylistList({
+        query: {
+            sortBy: PlaylistListSort.NAME,
+            sortOrder: SortOrder.ASC,
+            startIndex: 0,
+        },
+        serverId: server?.id,
     });
-  };
 
-  const playlistsQuery = usePlaylistList({
-    query: {
-      sortBy: PlaylistListSort.NAME,
-      sortOrder: SortOrder.ASC,
-      startIndex: 0,
-    },
-    serverId: server?.id,
-  });
+    const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
+    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
+    const expandFullScreenPlayer = () => {
+        setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
+    };
 
-  const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
-  const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
-  const expandFullScreenPlayer = () => {
-    setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
-  };
+    const cq = useContainerQuery({ sm: 300 });
 
-  const cq = useContainerQuery({ sm: 300 });
+    const { sidebarItems } = useGeneralSettings();
 
-  const { sidebarItems } = useGeneralSettings();
+    const sidebarItemsWithRoute: (SidebarItemType & {
+        activeIcon: IconType;
+        icon: IconType;
+    })[] = useMemo(() => {
+        if (!sidebarItems) return [];
 
-  const sidebarItemsWithRoute: (SidebarItemType & {
-    activeIcon: IconType;
-    icon: IconType;
-  })[] = useMemo(() => {
-    if (!sidebarItems) return [];
+        const items = sidebarItems
+            .filter((item) => !item.disabled)
+            .map((item) => ({
+                ...item,
+                ...sidebarItemMap[item.route as keyof typeof sidebarItemMap],
+            }));
 
-    const items = sidebarItems
-      .filter((item) => !item.disabled)
-      .map((item) => ({
-        ...item,
-        ...sidebarItemMap[item.route as keyof typeof sidebarItemMap],
-      }));
+        return items;
+    }, [sidebarItems]);
 
-    return items;
-  }, [sidebarItems]);
-
-  return (
-    <SidebarContainer
-      ref={cq.ref}
-      windowBarStyle={windowBarStyle}
-    >
-      <ActionBar />
-      <Stack
-        h="100%"
-        justify="space-between"
-        spacing={0}
-      >
-        <MotionStack
-          h="100%"
-          layout="position"
-          spacing={0}
-          sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
+    return (
+        <SidebarContainer
+            ref={cq.ref}
+            windowBarStyle={windowBarStyle}
         >
-          <Stack spacing={0}>
-            {sidebarItemsWithRoute.map((item) => (
-              <SidebarItem
-                key={`sidebar-${item.route}`}
-                to={item.route}
-              >
-                <Group spacing="sm">
-                  {location.pathname === item.route ? (
-                    <item.activeIcon size="1.1em" />
-                  ) : (
-                    <item.icon size="1.1em" />
-                  )}
-                  {item.label}
-                </Group>
-              </SidebarItem>
-            ))}
-          </Stack>
-          <Divider
-            mx="1rem"
-            my="0.5rem"
-          />
-          {sidebarPlaylistList && (
-            <>
-              <Group
-                position="apart"
-                pt="1rem"
-                px="1.5rem"
-              >
-                <Group>
-                  <Box
-                    fw="600"
-                    sx={{ fontSize: '1.2rem' }}
-                  >
-                    Playlists
-                  </Box>
-                  {playlistsQuery.isLoading && <Spinner />}
-                </Group>
-                <Group spacing="sm">
-                  <Button
-                    compact
-                    size="md"
-                    tooltip={{ label: 'Create playlist', openDelay: 500 }}
-                    variant="default"
-                    onClick={handleCreatePlaylistModal}
-                  >
-                    <RiAddFill size="1em" />
-                  </Button>
-                  <Button
-                    compact
-                    component={Link}
-                    size="md"
-                    to={AppRoute.PLAYLISTS}
-                    tooltip={{ label: 'Playlist list', openDelay: 500 }}
-                    variant="default"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <RiListUnordered size="1em" />
-                  </Button>
-                </Group>
-              </Group>
-              <SidebarPlaylistList data={playlistsQuery.data} />
-            </>
-          )}
-        </MotionStack>
-        <AnimatePresence
-          initial={false}
-          mode="popLayout"
-        >
-          {showImage && (
-            <ImageContainer
-              key="sidebar-image"
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 200 }}
-              height={sidebar.leftWidth}
-              initial={{ opacity: 0, y: 200 }}
-              role="button"
-              transition={{ duration: 0.3, ease: 'easeInOut' }}
-              onClick={expandFullScreenPlayer}
+            <ActionBar />
+            <Stack
+                h="100%"
+                justify="space-between"
+                spacing={0}
             >
-              <Tooltip
-                label="Toggle fullscreen player"
-                openDelay={500}
-              >
-                {upsizedImageUrl ? (
-                  <SidebarImage
-                    loading="eager"
-                    src={upsizedImageUrl}
-                  />
-                ) : (
-                  <Center sx={{ background: 'var(--placeholder-bg)', height: '100%' }}>
-                    <RiDiscLine
-                      color="var(--placeholder-fg)"
-                      size={50}
+                <MotionStack
+                    h="100%"
+                    layout="position"
+                    spacing={0}
+                    sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
+                >
+                    <Stack spacing={0}>
+                        {sidebarItemsWithRoute.map((item) => (
+                            <SidebarItem
+                                key={`sidebar-${item.route}`}
+                                to={item.route}
+                            >
+                                <Group spacing="sm">
+                                    {location.pathname === item.route ? (
+                                        <item.activeIcon size="1.1em" />
+                                    ) : (
+                                        <item.icon size="1.1em" />
+                                    )}
+                                    {item.label}
+                                </Group>
+                            </SidebarItem>
+                        ))}
+                    </Stack>
+                    <Divider
+                        mx="1rem"
+                        my="0.5rem"
                     />
-                  </Center>
-                )}
-              </Tooltip>
-              <Button
-                compact
-                opacity={0.8}
-                radius={100}
-                size="md"
-                sx={{ cursor: 'default', position: 'absolute', right: 5, top: 5 }}
-                tooltip={{ label: 'Collapse', openDelay: 500 }}
-                variant="default"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setSideBar({ image: false });
-                }}
-              >
-                <RiArrowDownSLine
-                  color="white"
-                  size={20}
-                />
-              </Button>
-            </ImageContainer>
-          )}
-        </AnimatePresence>
-      </Stack>
-    </SidebarContainer>
-  );
+                    {sidebarPlaylistList && (
+                        <>
+                            <Group
+                                position="apart"
+                                pt="1rem"
+                                px="1.5rem"
+                            >
+                                <Group>
+                                    <Box
+                                        fw="600"
+                                        sx={{ fontSize: '1.2rem' }}
+                                    >
+                                        Playlists
+                                    </Box>
+                                    {playlistsQuery.isLoading && <Spinner />}
+                                </Group>
+                                <Group spacing="sm">
+                                    <Button
+                                        compact
+                                        size="md"
+                                        tooltip={{ label: 'Create playlist', openDelay: 500 }}
+                                        variant="default"
+                                        onClick={handleCreatePlaylistModal}
+                                    >
+                                        <RiAddFill size="1em" />
+                                    </Button>
+                                    <Button
+                                        compact
+                                        component={Link}
+                                        size="md"
+                                        to={AppRoute.PLAYLISTS}
+                                        tooltip={{ label: 'Playlist list', openDelay: 500 }}
+                                        variant="default"
+                                        onClick={(e) => e.stopPropagation()}
+                                    >
+                                        <RiListUnordered size="1em" />
+                                    </Button>
+                                </Group>
+                            </Group>
+                            <SidebarPlaylistList data={playlistsQuery.data} />
+                        </>
+                    )}
+                </MotionStack>
+                <AnimatePresence
+                    initial={false}
+                    mode="popLayout"
+                >
+                    {showImage && (
+                        <ImageContainer
+                            key="sidebar-image"
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: 200 }}
+                            height={sidebar.leftWidth}
+                            initial={{ opacity: 0, y: 200 }}
+                            role="button"
+                            transition={{ duration: 0.3, ease: 'easeInOut' }}
+                            onClick={expandFullScreenPlayer}
+                        >
+                            <Tooltip
+                                label="Toggle fullscreen player"
+                                openDelay={500}
+                            >
+                                {upsizedImageUrl ? (
+                                    <SidebarImage
+                                        loading="eager"
+                                        src={upsizedImageUrl}
+                                    />
+                                ) : (
+                                    <Center
+                                        sx={{ background: 'var(--placeholder-bg)', height: '100%' }}
+                                    >
+                                        <RiDiscLine
+                                            color="var(--placeholder-fg)"
+                                            size={50}
+                                        />
+                                    </Center>
+                                )}
+                            </Tooltip>
+                            <Button
+                                compact
+                                opacity={0.8}
+                                radius={100}
+                                size="md"
+                                sx={{ cursor: 'default', position: 'absolute', right: 5, top: 5 }}
+                                tooltip={{ label: 'Collapse', openDelay: 500 }}
+                                variant="default"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    setSideBar({ image: false });
+                                }}
+                            >
+                                <RiArrowDownSLine
+                                    color="white"
+                                    size={20}
+                                />
+                            </Button>
+                        </ImageContainer>
+                    )}
+                </AnimatePresence>
+            </Stack>
+        </SidebarContainer>
+    );
 };