Adjust sidebar playlist styles

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

@@ -1,8 +1,11 @@
 import type { ReactNode } from 'react';
-import { createPolymorphicComponent, Flex, FlexProps } from '@mantine/core';
+import { createPolymorphicComponent, Flex, FlexProps, Group } from '@mantine/core';
+import { RiPlayFill } from 'react-icons/ri';
 import type { LinkProps } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import styled, { css } from 'styled-components';
+import { Button } from '/@/renderer/components';
+import { textEllipsis } from '/@/renderer/styles';
 
 interface ListItemProps extends FlexProps {
   children: ReactNode;
@@ -73,3 +76,78 @@ SidebarItem.defaultProps = {
   disabled: false,
   to: undefined,
 };
+
+const _PlaylistItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
+  display: block;
+  width: 80%;
+  padding: 0.3rem 0;
+  overflow: hidden;
+  color: var(--sidebar-fg);
+  opacity: ${(props) => props.disabled && 0.6};
+  transition: color 0.2s ease-in-out;
+  pointer-events: ${(props) => props.disabled && 'none'};
+  ${textEllipsis}
+
+  &:hover {
+    color: var(--sidebar-fg-hover);
+  }
+
+  &:focus-visible {
+    border: 1px solid var(--primary-color);
+  }
+`;
+
+const PlaylistItemLink = createPolymorphicComponent<'a', ListItemProps>(_PlaylistItemLink);
+
+export const PlaylistSidebarItem = ({
+  handlePlay,
+  to,
+  children,
+  ...props
+}: ListItemProps & { handlePlay: () => void }) => {
+  if (to) {
+    return (
+      <Group
+        noWrap
+        position="apart"
+        sx={{
+          '&:hover': {
+            button: {
+              display: 'block',
+            },
+          },
+        }}
+      >
+        <PlaylistItemLink
+          component={Link}
+          to={to}
+          {...props}
+        >
+          {children}
+        </PlaylistItemLink>
+        <Flex
+          align="center"
+          justify="flex-end"
+        >
+          <Button
+            compact
+            sx={{ display: 'none' }}
+            variant="filled"
+            onClick={handlePlay}
+          >
+            <RiPlayFill />
+          </Button>
+        </Flex>
+      </Group>
+    );
+  }
+
+  return (
+    <StyledItem
+      tabIndex={0}
+      {...props}
+    >
+      {children}
+    </StyledItem>
+  );
+};