support collapsing shared playlists

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

@@ -2,7 +2,13 @@ import { useCallback, useMemo, useState } from 'react';
 import { Box, Flex, Group } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
-import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
+import {
+    RiAddBoxFill,
+    RiAddCircleFill,
+    RiArrowDownSLine,
+    RiArrowUpSLine,
+    RiPlayFill,
+} from 'react-icons/ri';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import { LibraryItem, Playlist } from '/@/renderer/api/types';
@@ -14,7 +20,7 @@ import { Play } from '/@/renderer/types';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
 import { useHideScrollbar } from '/@/renderer/hooks';
-import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
+import { useCurrentServer, useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
 
 interface SidebarPlaylistListProps {
     data: ReturnType<typeof usePlaylistList>['data'];
@@ -23,14 +29,35 @@ interface SidebarPlaylistListProps {
 const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
     const { t } = useTranslation();
 
-    if (data?.items[index] === null) {
+    if (Array.isArray(data?.items[index])) {
+        const [collapse, setCollapse] = data.items[index];
+
         return (
             <div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
                 <Box
                     fw="600"
                     sx={{ fontSize: '1.2rem' }}
                 >
-                    {t('page.sidebar.shared', { postProcess: 'titleCase' })}
+                    <Group>
+                        <Text>{t('page.sidebar.shared', { postProcess: 'titleCase' })}</Text>
+                        <Button
+                            compact
+                            tooltip={{
+                                label: t(collapse ? 'common.expand' : 'common.collapse', {
+                                    postProcess: 'titleCase',
+                                }),
+                                openDelay: 500,
+                            }}
+                            variant="default"
+                            onClick={() => setCollapse()}
+                        >
+                            {collapse ? (
+                                <RiArrowUpSLine size={20} />
+                            ) : (
+                                <RiArrowDownSLine size={20} />
+                            )}
+                        </Button>
+                    </Group>
                 </Box>
             </div>
         );
@@ -138,7 +165,8 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
 export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
     const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
     const handlePlayQueueAdd = usePlayQueueAdd();
-    const { defaultFullPlaylist } = useGeneralSettings();
+    const { defaultFullPlaylist, sidebarCollapseShared } = useGeneralSettings();
+    const { toggleSidebarCollapseShare } = useSettingsStoreActions();
     const { type, username } = useCurrentServer() || {};
 
     const [rect, setRect] = useState({
@@ -168,7 +196,7 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
             return { ...base, items: data?.items };
         }
 
-        const owned: Array<Playlist | null> = [];
+        const owned: Array<Playlist | [boolean, () => void]> = [];
         const shared: Playlist[] = [];
 
         for (const playlist of data.items) {
@@ -180,12 +208,21 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
         }
 
         if (shared.length > 0) {
-            // Use `null` as a separator between owned and shared playlists
+            owned.push([sidebarCollapseShared, toggleSidebarCollapseShare]);
-            owned.push(null);
         }
 
-        return { ...base, items: owned.concat(shared) };
+        const final = sidebarCollapseShared ? owned : owned.concat(shared);
-    }, [data?.items, defaultFullPlaylist, handlePlayPlaylist, type, username]);
+
+        return { ...base, items: final };
+    }, [
+        sidebarCollapseShared,
+        data?.items,
+        defaultFullPlaylist,
+        handlePlayPlaylist,
+        type,
+        username,
+        toggleSidebarCollapseShare,
+    ]);
 
     return (
         <Flex

src/renderer/store/settings.store.ts

@@ -209,6 +209,7 @@ export interface SettingsState {
         resume: boolean;
         showQueueDrawerButton: boolean;
         sideQueueType: SideQueueType;
+        sidebarCollapseShared: boolean;
         sidebarCollapsedNavigation: boolean;
         sidebarItems: SidebarItemType[];
         sidebarPlaylistList: boolean;
@@ -292,6 +293,7 @@ export interface SettingsSlice extends SettingsState {
         setSettings: (data: Partial<SettingsState>) => void;
         setSidebarItems: (items: SidebarItemType[]) => void;
         setTable: (type: TableType, data: DataTableProps) => void;
+        toggleSidebarCollapseShare: () => void;
     };
 }
 
@@ -335,6 +337,7 @@ const initialState: SettingsState = {
         resume: false,
         showQueueDrawerButton: false,
         sideQueueType: 'sideQueue',
+        sidebarCollapseShared: false,
         sidebarCollapsedNavigation: true,
         sidebarItems,
         sidebarPlaylistList: true,
@@ -645,6 +648,12 @@ export const useSettingsStore = create<SettingsSlice>()(
                             state.tables[type] = data;
                         });
                     },
+                    toggleSidebarCollapseShare: () => {
+                        set((state) => {
+                            state.general.sidebarCollapseShared =
+                                !state.general.sidebarCollapseShared;
+                        });
+                    },
                 },
                 ...initialState,
             })),