Add sidebar customization settings

src/renderer/features/settings/components/general/general-tab.tsx

@@ -1,6 +1,7 @@
 import { Divider, Stack } from '@mantine/core';
 import { ApplicationSettings } from '/@/renderer/features/settings/components/general/application-settings';
 import { ControlSettings } from '/@/renderer/features/settings/components/general/control-settings';
+import { SidebarSettings } from '/@/renderer/features/settings/components/general/sidebar-settings';
 import { ThemeSettings } from '/@/renderer/features/settings/components/general/theme-settings';
 
 export const GeneralTab = () => {
@@ -11,6 +12,8 @@ export const GeneralTab = () => {
       <ThemeSettings />
       <Divider />
       <ControlSettings />
+      <Divider />
+      <SidebarSettings />
     </Stack>
   );
 };

src/renderer/features/settings/components/general/sidebar-settings.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useState } from 'react';
+import { Group } from '@mantine/core';
+import { Reorder, useDragControls } from 'framer-motion';
+import isEqual from 'lodash/isEqual';
+import { MdDragIndicator } from 'react-icons/md';
+import { Button, Checkbox, Switch } from '/@/renderer/components';
+import { useSettingsStoreActions, useGeneralSettings } from '../../../../store/settings.store';
+import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
+
+const DragHandle = ({ dragControls }: any) => {
+  return (
+    <MdDragIndicator
+      color="white"
+      style={{ cursor: 'grab' }}
+      onPointerDown={(event) => dragControls.start(event)}
+    />
+  );
+};
+
+interface SidebarItem {
+  disabled: boolean;
+  id: string;
+}
+
+interface DraggableSidebarItemProps {
+  handleChangeDisabled: (id: string, e: boolean) => void;
+  item: SidebarItem;
+}
+
+const DraggableSidebarItem = ({ item, handleChangeDisabled }: DraggableSidebarItemProps) => {
+  const dragControls = useDragControls();
+
+  return (
+    <Reorder.Item
+      as="div"
+      dragControls={dragControls}
+      dragListener={false}
+      value={item}
+    >
+      <Group
+        noWrap
+        h="3rem"
+        style={{ boxShadow: '0 1px 3px rgba(0,0,0,.1)' }}
+      >
+        <Checkbox
+          checked={!item.disabled}
+          onChange={(e) => handleChangeDisabled(item.id, e.target.checked)}
+        />
+        <DragHandle dragControls={dragControls} />
+        {item.id}
+      </Group>
+    </Reorder.Item>
+  );
+};
+
+export const SidebarSettings = () => {
+  const { sidebarItems } = useGeneralSettings();
+  const { setSidebarItems } = useSettingsStoreActions();
+
+  const [localSidebarItems, setLocalSidebarItems] = useState(sidebarItems);
+
+  const handleSave = () => {
+    setSidebarItems(localSidebarItems);
+  };
+
+  const handleChangeDisabled = useCallback((id: string, e: boolean) => {
+    setLocalSidebarItems((items) =>
+      items.map((item) => {
+        if (item.id === id) {
+          return {
+            ...item,
+            disabled: !e,
+          };
+        }
+
+        return item;
+      }),
+    );
+  }, []);
+
+  const isSaveButtonDisabled = isEqual(sidebarItems, localSidebarItems);
+
+  return (
+    <>
+      <SettingsOptions
+        control={<Switch />}
+        description="Show playlist list in sidebar"
+        title="Sidebar playlist list"
+      />
+      <SettingsOptions
+        control={
+          <Button
+            compact
+            disabled={isSaveButtonDisabled}
+            variant="filled"
+            onClick={handleSave}
+          >
+            Save sidebar configuration
+          </Button>
+        }
+        description="Select the items and order in which they appear in the sidebar"
+        title="Sidebar configuration"
+      />
+      <Reorder.Group
+        axis="y"
+        values={localSidebarItems}
+        onReorder={setLocalSidebarItems}
+      >
+        {localSidebarItems.map((item) => (
+          <DraggableSidebarItem
+            key={item.id}
+            handleChangeDisabled={handleChangeDisabled}
+            item={item}
+          />
+        ))}
+      </Reorder.Group>
+    </>
+  );
+};

src/renderer/store/settings.store.ts

@@ -7,6 +7,7 @@ import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { shallow } from 'zustand/shallow';
+import { AppRoute } from '/@/renderer/router/routes';
 import { AppTheme } from '/@/renderer/themes/types';
 import {
   TableColumn,
@@ -18,6 +19,28 @@ import {
   Platform,
 } from '/@/renderer/types';
 
+export type SidebarItemType = {
+  disabled: boolean;
+  id: string;
+  label: string;
+  route: AppRoute;
+};
+
+export const sidebarItems = [
+  { disabled: false, id: 'Home', label: 'Home', route: AppRoute.HOME },
+  { disabled: false, id: 'Albums', label: 'Albums', route: AppRoute.LIBRARY_ALBUMS },
+  { disabled: false, id: 'Tracks', label: 'Tracks', route: AppRoute.LIBRARY_SONGS },
+  {
+    disabled: false,
+    id: 'Album Artists',
+    label: 'Album Artists',
+    route: AppRoute.LIBRARY_ALBUM_ARTISTS,
+  },
+  { disabled: false, id: 'Genres', label: 'Genres', route: AppRoute.LIBRARY_GENRES },
+  { disabled: false, id: 'Folders', label: 'Folders', route: AppRoute.LIBRARY_FOLDERS },
+  { disabled: false, id: 'Playlists', label: 'Playlists', route: AppRoute.PLAYLISTS },
+];
+
 export type PersistedTableColumn = {
   column: TableColumn;
   extraProps?: Partial<ColDef>;
@@ -72,6 +95,8 @@ export interface SettingsState {
     resume: boolean;
     showQueueDrawerButton: boolean;
     sideQueueType: SideQueueType;
+    sidebarItems: SidebarItemType[];
+    sidebarPlaylistList: boolean;
     skipButtons: {
       enabled: boolean;
       skipBackwardSeconds: number;
@@ -121,6 +146,7 @@ export interface SettingsSlice extends SettingsState {
   actions: {
     reset: () => void;
     setSettings: (data: Partial<SettingsState>) => void;
+    setSidebarItems: (items: SidebarItemType[]) => void;
   };
 }
 
@@ -132,6 +158,8 @@ const initialState: SettingsState = {
     resume: false,
     showQueueDrawerButton: false,
     sideQueueType: 'sideQueue',
+    sidebarItems,
+    sidebarPlaylistList: true,
     skipButtons: {
       enabled: false,
       skipBackwardSeconds: 5,
@@ -338,6 +366,11 @@ export const useSettingsStore = create<SettingsSlice>()(
           setSettings: (data) => {
             set({ ...get(), ...data });
           },
+          setSidebarItems: (items: SidebarItemType[]) => {
+            set((state) => {
+              state.general.sidebarItems = items;
+            });
+          },
         },
         ...initialState,
       })),
@@ -373,3 +406,12 @@ export const useHotkeySettings = () => useSettingsStore((state) => state.hotkeys
 
 export const useMpvSettings = () =>
   useSettingsStore((state) => state.playback.mpvProperties, shallow);
+
+export const useMainSettings = () =>
+  useSettingsStore(
+    (state) => ({
+      showQueueDrawerButton: state.general.showQueueDrawerButton,
+      sideQueueType: state.general.sideQueueType,
+    }),
+    shallow,
+  );