Use virtualized list on sidebar playlists

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

@@ -1,9 +1,8 @@
 import type { ReactNode } from 'react';
-import { createPolymorphicComponent, Flex, FlexProps, Group } from '@mantine/core';
+import { createPolymorphicComponent, Flex, FlexProps } from '@mantine/core';
 import type { LinkProps } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import styled, { css } from 'styled-components';
-import { textEllipsis } from '/@/renderer/styles';
 
 interface ListItemProps extends FlexProps {
   children: ReactNode;
@@ -13,8 +12,8 @@ interface ListItemProps extends FlexProps {
 
 const StyledItem = styled(Flex)`
   width: 100%;
+  font-weight: 600;
   font-family: var(--content-font-family);
-  letter-spacing: 0.5px;
 
   &:focus-visible {
     border: 1px solid var(--primary-color);
@@ -75,60 +74,3 @@ SidebarItem.defaultProps = {
   disabled: false,
   to: undefined,
 };
-
-const _PlaylistItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
-  display: block;
-  padding: 0.3rem 0;
-  overflow: hidden;
-  color: var(--sidebar-fg);
-  cursor: default;
-  opacity: ${(props) => (props.disabled ? 0.6 : 0.8)};
-  transition: color 0.2s ease-in-out;
-  transition: opacity 0.2s ease-in-out;
-  pointer-events: ${(props) => props.disabled && 'none'};
-  ${textEllipsis}
-
-  &:hover {
-    color: var(--sidebar-fg-hover);
-    opacity: 1;
-  }
-
-  &: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"
-      >
-        <PlaylistItemLink
-          component={Link}
-          to={to}
-          {...props}
-        >
-          {children}
-        </PlaylistItemLink>
-      </Group>
-    );
-  }
-
-  return (
-    <StyledItem
-      tabIndex={0}
-      {...props}
-    >
-      {children}
-    </StyledItem>
-  );
-};

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

@@ -0,0 +1,155 @@
+import { Group } from '@mantine/core';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef } from 'react';
+import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
+import { generatePath } from 'react-router';
+import { Link } from 'react-router-dom';
+import { LibraryItem } from '/@/renderer/api/types';
+import { Button, NativeScrollArea, Text } from '/@/renderer/components';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { usePlaylistList } from '/@/renderer/features/playlists';
+import { AppRoute } from '/@/renderer/router/routes';
+import { Play } from '/@/renderer/types';
+
+interface SidebarPlaylistListProps {
+  data: ReturnType<typeof usePlaylistList>['data'];
+}
+
+export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
+  const scrollAreaRef = useRef<HTMLDivElement | null>(null);
+
+  const handlePlayQueueAdd = usePlayQueueAdd();
+
+  const handlePlayPlaylist = (id: string, play: Play) => {
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: [id],
+        type: LibraryItem.PLAYLIST,
+      },
+      play,
+    });
+  };
+
+  const rowVirtualizer = useVirtualizer({
+    count: data?.items?.length || 0,
+    estimateSize: () => 25,
+    getScrollElement: () => {
+      return scrollAreaRef.current;
+    },
+    overscan: 5,
+  });
+
+  return (
+    <NativeScrollArea
+      ref={scrollAreaRef}
+      scrollBarOffset="0px"
+      scrollHideDelay={0}
+      style={{ margin: '0.5rem 0', padding: '0 1rem' }}
+    >
+      <div
+        style={{
+          height: `${rowVirtualizer.getTotalSize()}px`,
+          position: 'relative',
+          width: '100%',
+        }}
+      >
+        {rowVirtualizer.getVirtualItems().map((virtualRow) => (
+          <div
+            key={virtualRow.index}
+            style={{
+              height: `${virtualRow.size}px`,
+              left: 0,
+              position: 'absolute',
+              top: 0,
+              transform: `translateY(${virtualRow.start}px)`,
+              width: '100%',
+            }}
+          >
+            <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="lg"
+                sx={{
+                  color: 'var(--sidebar-fg) !important',
+                  cursor: 'default',
+                  width: '100%',
+                }}
+                to={
+                  data?.items?.[virtualRow.index].id
+                    ? generatePath(AppRoute.PLAYLISTS_DETAIL, {
+                        playlistId: data?.items?.[virtualRow.index].id,
+                      })
+                    : undefined
+                }
+              >
+                {data?.items?.[virtualRow.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?.[virtualRow.index].id) return;
+                    handlePlayPlaylist(data?.items?.[virtualRow.index].id, Play.NOW);
+                  }}
+                >
+                  <RiPlayFill />
+                </Button>
+                <Button
+                  compact
+                  size="md"
+                  tooltip={{ label: 'Add to queue', openDelay: 500 }}
+                  variant="default"
+                  onClick={() => {
+                    if (!data?.items?.[virtualRow.index].id) return;
+                    handlePlayPlaylist(data?.items?.[virtualRow.index].id, Play.LAST);
+                  }}
+                >
+                  <RiAddBoxFill />
+                </Button>
+                <Button
+                  compact
+                  size="md"
+                  tooltip={{ label: 'Add to queue next', openDelay: 500 }}
+                  variant="default"
+                  onClick={() => {
+                    if (!data?.items?.[virtualRow.index].id) return;
+                    handlePlayPlaylist(data?.items?.[virtualRow.index].id, Play.NEXT);
+                  }}
+                >
+                  <RiAddCircleFill />
+                </Button>
+              </Group>
+            </Group>
+          </div>
+        ))}
+      </div>
+    </NativeScrollArea>
+  );
+};

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

@@ -1,10 +1,8 @@
 import { MouseEvent } from 'react';
-import { Stack, Grid, Accordion, Center, Group } from '@mantine/core';
+import { Stack, Grid, Accordion, Center, Group, Divider, Box } from '@mantine/core';
 import { closeAllModals, openModal } from '@mantine/modals';
 import { AnimatePresence, motion } from 'framer-motion';
-import { BsCollection } from 'react-icons/bs';
+import { Button, MotionStack, Spinner, TextInput } from '/@/renderer/components';
-import { Button, MotionStack, ScrollArea, TextInput } from '/@/renderer/components';
-import { MdOutlineFeaturedPlayList, MdFeaturedPlayList } from 'react-icons/md';
 import {
   RiAddFill,
   RiAlbumFill,
@@ -17,8 +15,8 @@ import {
   RiDiscLine,
   RiFlag2Line,
   RiFolder3Line,
-  RiHome4Fill,
+  RiHome5Fill,
-  RiHome4Line,
+  RiHome5Line,
   RiListUnordered,
   RiMusic2Fill,
   RiMusic2Line,
@@ -26,12 +24,9 @@ import {
   RiUserVoiceFill,
   RiUserVoiceLine,
 } from 'react-icons/ri';
-import { useNavigate, Link, useLocation, generatePath } from 'react-router-dom';
+import { useNavigate, Link, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
-import {
+import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item';
-  PlaylistSidebarItem,
-  SidebarItem,
-} from '/@/renderer/features/sidebar/components/sidebar-item';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
   useSidebarStore,
@@ -41,9 +36,8 @@ import {
 } from '/@/renderer/store';
 import { fadeIn } from '/@/renderer/styles';
 import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists';
-import { LibraryItem, PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
+import { PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
-import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { SidebarPlaylistList } from '/@/renderer/features/sidebar/components/sidebar-playlist-list';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 
 const SidebarContainer = styled.div`
   height: 100%;
@@ -92,25 +86,6 @@ export const Sidebar = () => {
     .replace(/height=\d+/, 'height=300');
 
   const showImage = sidebar.image;
-  const handlePlayQueueAdd = usePlayQueueAdd();
-  const playButtonBehavior = usePlayButtonBehavior();
-
-  const handlePlayPlaylist = (id: string) => {
-    handlePlayQueueAdd?.({
-      byItemType: {
-        id: [id],
-        type: LibraryItem.PLAYLIST,
-      },
-      play: playButtonBehavior,
-    });
-  };
-
-  const playlistsQuery = usePlaylistList({
-    limit: 100,
-    sortBy: PlaylistListSort.NAME,
-    sortOrder: SortOrder.ASC,
-    startIndex: 0,
-  });
 
   const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -122,6 +97,12 @@ export const Sidebar = () => {
     });
   };
 
+  const playlistsQuery = usePlaylistList({
+    sortBy: PlaylistListSort.NAME,
+    sortOrder: SortOrder.ASC,
+    startIndex: 0,
+  });
+
   return (
     <SidebarContainer>
       <Stack
@@ -175,172 +156,142 @@ export const Sidebar = () => {
             </Grid.Col>
           </ActionsContainer>
 
-          <ScrollArea
+          <Stack spacing={0}>
-            offsetScrollbars={false}
+            <SidebarItem
-            scrollbarSize={6}
+              px="1rem"
-          >
+              py="0.5rem"
-            <Stack spacing={0}>
+              to={AppRoute.HOME}
-              <SidebarItem
+            >
-                px="1rem"
+              <Group spacing="sm">
-                py="0.5rem"
+                {location.pathname === AppRoute.HOME ? (
-                to={AppRoute.HOME}
+                  <RiHome5Fill size="1.3em" />
-              >
+                ) : (
-                <Group spacing="sm">
+                  <RiHome5Line size="1.3em" />
-                  {location.pathname === AppRoute.HOME ? (
+                )}
-                    <RiHome4Fill size="1.3em" />
+                Home
-                  ) : (
+              </Group>
-                    <RiHome4Line size="1.3em" />
+            </SidebarItem>
-                  )}
+            <Accordion
-                  Home
+              multiple
-                </Group>
+              styles={{
-              </SidebarItem>
+                content: { padding: '0 1rem' },
-              <Accordion
+                control: {
-                multiple
+                  '&:hover': { background: 'none', color: 'var(--sidebar-fg-hover)' },
-                styles={{
+                  color: 'var(--sidebar-fg)',
-                  control: {
+                  padding: '1rem 1rem',
-                    '&:hover': { background: 'none', color: 'var(--sidebar-fg-hover)' },
+                  transition: 'color 0.2s ease-in-out',
-                    color: 'var(--sidebar-fg)',
+                },
-                    padding: '1rem 1rem',
+                item: { borderBottom: 'none', color: 'var(--sidebar-fg)' },
-                    transition: 'color 0.2s ease-in-out',
+                itemTitle: { color: 'var(--sidebar-fg)' },
-                  },
+                label: { fontWeight: 600 },
-                  item: { borderBottom: 'none', color: 'var(--sidebar-fg)' },
+                panel: { padding: '0 1rem' },
-                  itemTitle: { color: 'var(--sidebar-fg)' },
+              }}
-                  panel: { padding: '0 1rem' },
+              value={sidebar.expanded}
-                }}
+              onChange={(e) => setSidebar({ expanded: e })}
-                value={sidebar.expanded}
+            >
-                onChange={(e) => setSidebar({ expanded: e })}
+              <Accordion.Item value="library">
-              >
+                <Accordion.Control>
-                <Accordion.Item value="library">
+                  <Group spacing="sm">
-                  <Accordion.Control>
+                    {location.pathname.includes('/library/') ? (
+                      <RiDatabaseFill size="1.3em" />
+                    ) : (
+                      <RiDatabaseLine size="1.3em" />
+                    )}
+                    Library
+                  </Group>
+                </Accordion.Control>
+                <Accordion.Panel>
+                  <SidebarItem to={AppRoute.LIBRARY_ALBUMS}>
                     <Group spacing="sm">
-                      {location.pathname.includes('/library/') ? (
+                      {location.pathname === AppRoute.LIBRARY_ALBUMS ? (
-                        <RiDatabaseFill size="1.3em" />
+                        <RiAlbumFill size="1.1em" />
                       ) : (
-                        <RiDatabaseLine size="1.3em" />
+                        <RiAlbumLine size="1.1em" />
                       )}
-                      Library
+                      Albums
                     </Group>
-                  </Accordion.Control>
+                  </SidebarItem>
-                  <Accordion.Panel>
+                  <SidebarItem to={AppRoute.LIBRARY_SONGS}>
-                    <SidebarItem to={AppRoute.LIBRARY_ALBUMS}>
-                      <Group spacing="sm">
-                        {location.pathname === AppRoute.LIBRARY_ALBUMS ? (
-                          <RiAlbumFill size="1.1em" />
-                        ) : (
-                          <RiAlbumLine size="1.1em" />
-                        )}
-                        Albums
-                      </Group>
-                    </SidebarItem>
-                    <SidebarItem to={AppRoute.LIBRARY_SONGS}>
-                      <Group spacing="sm">
-                        {location.pathname === AppRoute.LIBRARY_SONGS ? (
-                          <RiMusic2Fill size="1.1em" />
-                        ) : (
-                          <RiMusic2Line size="1.1em" />
-                        )}
-                        Tracks
-                      </Group>
-                    </SidebarItem>
-                    <SidebarItem to={AppRoute.LIBRARY_ALBUM_ARTISTS}>
-                      <Group spacing="sm">
-                        {location.pathname === AppRoute.LIBRARY_ALBUM_ARTISTS ? (
-                          <RiUserVoiceFill size="1.1em" />
-                        ) : (
-                          <RiUserVoiceLine size="1.1em" />
-                        )}
-                        Album Artists
-                      </Group>
-                    </SidebarItem>
-                    <SidebarItem
-                      disabled
-                      to={AppRoute.LIBRARY_FOLDERS}
-                    >
-                      <Group spacing="sm">
-                        <RiFlag2Line size="1.1em" />
-                        Genres
-                      </Group>
-                    </SidebarItem>
-                    <SidebarItem
-                      disabled
-                      to={AppRoute.LIBRARY_FOLDERS}
-                    >
-                      <Group spacing="sm">
-                        <RiFolder3Line size="1.1em" />
-                        Folders
-                      </Group>
-                    </SidebarItem>
-                  </Accordion.Panel>
-                </Accordion.Item>
-                <Accordion.Item value="collections">
-                  <Accordion.Control disabled>
                     <Group spacing="sm">
-                      <BsCollection size="1.3em" />
+                      {location.pathname === AppRoute.LIBRARY_SONGS ? (
-                      Collections
+                        <RiMusic2Fill size="1.1em" />
+                      ) : (
+                        <RiMusic2Line size="1.1em" />
+                      )}
+                      Tracks
                     </Group>
-                  </Accordion.Control>
+                  </SidebarItem>
-                  <Accordion.Panel />
+                  <SidebarItem to={AppRoute.LIBRARY_ALBUM_ARTISTS}>
-                </Accordion.Item>
+                    <Group spacing="sm">
-                <Accordion.Item value="playlists">
+                      {location.pathname === AppRoute.LIBRARY_ALBUM_ARTISTS ? (
-                  <Accordion.Control>
+                        <RiUserVoiceFill size="1.1em" />
-                    <Group
+                      ) : (
-                      noWrap
+                        <RiUserVoiceLine size="1.1em" />
-                      position="apart"
+                      )}
-                    >
+                      Album Artists
-                      <Group
-                        noWrap
-                        spacing="sm"
-                      >
-                        {location.pathname.includes('/playlists/') ? (
-                          <MdFeaturedPlayList size="1.3em" />
-                        ) : (
-                          <MdOutlineFeaturedPlayList size="1.3em" />
-                        )}
-                        Playlists
-                      </Group>
-                      <Group
-                        noWrap
-                        spacing="sm"
-                      >
-                        <Button
-                          compact
-                          component="div"
-                          h="1.5rem"
-                          tooltip={{ label: 'Create playlist', openDelay: 500 }}
-                          variant="default"
-                          onClick={handleCreatePlaylistModal}
-                        >
-                          <RiAddFill size="1em" />
-                        </Button>
-                        <Button
-                          compact
-                          component={Link}
-                          h="1.5rem"
-                          to={AppRoute.PLAYLISTS}
-                          tooltip={{ label: 'Playlist list', openDelay: 500 }}
-                          variant="default"
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <RiListUnordered size="1em" />
-                        </Button>
-                      </Group>
                     </Group>
-                  </Accordion.Control>
+                  </SidebarItem>
-                  <Accordion.Panel>
+                  <SidebarItem
-                    {playlistsQuery?.data?.items?.map((playlist) => (
+                    disabled
-                      <PlaylistSidebarItem
+                    to={AppRoute.LIBRARY_FOLDERS}
-                        key={`sidebar-playlist-${playlist.id}`}
+                  >
-                        handlePlay={() => handlePlayPlaylist(playlist.id)}
+                    <Group spacing="sm">
-                        to={generatePath(AppRoute.PLAYLISTS_DETAIL, { playlistId: playlist.id })}
+                      <RiFlag2Line size="1.1em" />
-                      >
+                      Genres
-                        {playlist.name}
+                    </Group>
-                      </PlaylistSidebarItem>
+                  </SidebarItem>
-                    ))}
+                  <SidebarItem
-                  </Accordion.Panel>
+                    disabled
-                </Accordion.Item>
+                    to={AppRoute.LIBRARY_FOLDERS}
-              </Accordion>
+                  >
-            </Stack>
+                    <Group spacing="sm">
-          </ScrollArea>
+                      <RiFolder3Line size="1.1em" />
+                      Folders
+                    </Group>
+                  </SidebarItem>
+                </Accordion.Panel>
+              </Accordion.Item>
+            </Accordion>
+          </Stack>
+          <Divider my="0.5rem" />
+          <Group
+            position="apart"
+            pt="1rem"
+            px="1rem"
+          >
+            <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}