[enhancement]: support reordering homepage (#494)

* [enhancement]: support reordering homepage

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>

src/i18n/locales/en.json

@@ -37,6 +37,7 @@
         "channel_one": "channel",
         "channel_other": "channels",
         "clear": "clear",
+        "close": "close",
         "collapse": "collapse",
         "comingSoon": "coming soon…",
         "configure": "configure",
@@ -459,6 +460,8 @@
         "gaplessAudio_optionWeak": "weak (recommended)",
         "globalMediaHotkeys": "global media hotkeys",
         "globalMediaHotkeys_description": "enable or disable the usage of your system media hotkeys to control playback",
+        "homeConfiguration": "home page configuration",
+        "homeConfiguration_description": "configure what items are shown, and in what order, on the home page",
         "hotkey_browserBack": "browser back",
         "hotkey_browserForward": "browser forward",
         "hotkey_favoriteCurrentSong": "favorite $t(common.currentSong)",

src/renderer/features/home/routes/home-route.tsx

@@ -12,7 +12,12 @@ import { useAlbumList } from '/@/renderer/features/albums';
 import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query';
 import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer, useWindowSettings } from '/@/renderer/store';
+import {
+    HomeItem,
+    useCurrentServer,
+    useGeneralSettings,
+    useWindowSettings,
+} from '/@/renderer/store';
 import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel';
 import { Platform } from '/@/renderer/types';
 import { useQueryClient } from '@tanstack/react-query';
@@ -28,6 +33,7 @@ const HomeRoute = () => {
     const server = useCurrentServer();
     const itemsPerPage = 15;
     const { windowBarStyle } = useWindowSettings();
+    const { homeItems } = useGeneralSettings();
 
     const feature = useAlbumList({
         options: {
@@ -129,16 +135,15 @@ const HomeRoute = () => {
         return <Spinner container />;
     }
 
-    const carousels = [
+    const carousels = {
-        {
+        [HomeItem.RANDOM]: {
             data: random?.data?.items,
             itemType: LibraryItem.ALBUM,
             sortBy: AlbumListSort.RANDOM,
             sortOrder: SortOrder.ASC,
             title: t('page.home.explore', { postProcess: 'sentenceCase' }),
-            uniqueId: 'random',
         },
-        {
+        [HomeItem.RECENTLY_PLAYED]: {
             data: recentlyPlayed?.data?.items,
             itemType: LibraryItem.ALBUM,
             pagination: {
@@ -147,9 +152,8 @@ const HomeRoute = () => {
             sortBy: AlbumListSort.RECENTLY_PLAYED,
             sortOrder: SortOrder.DESC,
             title: t('page.home.recentlyPlayed', { postProcess: 'sentenceCase' }),
-            uniqueId: 'recentlyPlayed',
         },
-        {
+        [HomeItem.RECENTLY_ADDED]: {
             data: recentlyAdded?.data?.items,
             itemType: LibraryItem.ALBUM,
             pagination: {
@@ -158,9 +162,8 @@ const HomeRoute = () => {
             sortBy: AlbumListSort.RECENTLY_ADDED,
             sortOrder: SortOrder.DESC,
             title: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }),
-            uniqueId: 'recentlyAdded',
         },
-        {
+        [HomeItem.MOST_PLAYED]: {
             data:
                 server?.type === ServerType.JELLYFIN
                     ? mostPlayedSongs?.data?.items
@@ -175,9 +178,24 @@ const HomeRoute = () => {
                     : AlbumListSort.PLAY_COUNT,
             sortOrder: SortOrder.DESC,
             title: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }),
-            uniqueId: 'mostPlayed',
         },
-    ];
+    };
+
+    const sortedCarousel = homeItems
+        .filter((item) => {
+            if (item.disabled) {
+                return false;
+            }
+            if (server?.type === ServerType.JELLYFIN && item.id === HomeItem.RECENTLY_PLAYED) {
+                return false;
+            }
+
+            return true;
+        })
+        .map((item) => ({
+            ...carousels[item.id],
+            uniqueId: item.id,
+        }));
 
     const invalidateCarouselQuery = (carousel: {
         itemType: LibraryItem;
@@ -232,87 +250,76 @@ const HomeRoute = () => {
                     spacing="lg"
                 >
                     <FeatureCarousel data={featureItemsWithImage} />
-                    {carousels
+                    {sortedCarousel.map((carousel) => (
-                        .filter((carousel) => {
+                        <MemoizedSwiperGridCarousel
-                            if (
+                            key={`carousel-${carousel.uniqueId}`}
-                                server?.type === ServerType.JELLYFIN &&
+                            cardRows={[
-                                carousel.uniqueId === 'recentlyPlayed'
+                                {
-                            ) {
+                                    property: 'name',
-                                return null;
+                                    route: {
-                            }
+                                        route: AppRoute.LIBRARY_ALBUMS_DETAIL,
-
+                                        slugs: [
-                            return carousel;
+                                            {
-                        })
+                                                idProperty:
-                        .map((carousel) => (
+                                                    server?.type === ServerType.JELLYFIN &&
-                            <MemoizedSwiperGridCarousel
+                                                    carousel.itemType === LibraryItem.SONG
-                                key={`carousel-${carousel.uniqueId}`}
+                                                        ? 'albumId'
-                                cardRows={[
+                                                        : 'id',
-                                    {
+                                                slugProperty: 'albumId',
-                                        property: 'name',
+                                            },
-                                        route: {
+                                        ],
-                                            route: AppRoute.LIBRARY_ALBUMS_DETAIL,
-                                            slugs: [
-                                                {
-                                                    idProperty:
-                                                        server?.type === ServerType.JELLYFIN &&
-                                                        carousel.itemType === LibraryItem.SONG
-                                                            ? 'albumId'
-                                                            : 'id',
-                                                    slugProperty: 'albumId',
-                                                },
-                                            ],
-                                        },
                                     },
-                                    {
+                                },
-                                        arrayProperty: 'name',
+                                {
-                                        property: 'albumArtists',
+                                    arrayProperty: 'name',
-                                        route: {
+                                    property: 'albumArtists',
-                                            route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+                                    route: {
-                                            slugs: [
+                                        route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
-                                                {
+                                        slugs: [
-                                                    idProperty: 'id',
+                                            {
-                                                    slugProperty: 'albumArtistId',
+                                                idProperty: 'id',
-                                                },
+                                                slugProperty: 'albumArtistId',
-                                            ],
+                                            },
-                                        },
+                                        ],
                                     },
-                                ]}
+                                },
-                                data={carousel.data}
+                            ]}
-                                itemType={carousel.itemType}
+                            data={carousel.data}
-                                route={{
+                            itemType={carousel.itemType}
-                                    route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+                            route={{
-                                    slugs: [
+                                route: AppRoute.LIBRARY_ALBUMS_DETAIL,
-                                        {
+                                slugs: [
-                                            idProperty:
+                                    {
-                                                server?.type === ServerType.JELLYFIN &&
+                                        idProperty:
-                                                carousel.itemType === LibraryItem.SONG
+                                            server?.type === ServerType.JELLYFIN &&
-                                                    ? 'albumId'
+                                            carousel.itemType === LibraryItem.SONG
-                                                    : 'id',
+                                                ? 'albumId'
-                                            slugProperty: 'albumId',
+                                                : 'id',
-                                        },
+                                        slugProperty: 'albumId',
-                                    ],
+                                    },
-                                }}
+                                ],
-                                title={{
+                            }}
-                                    label: (
+                            title={{
-                                        <Group>
+                                label: (
-                                            <TextTitle
+                                    <Group>
-                                                order={2}
+                                        <TextTitle
-                                                weight={700}
+                                            order={2}
-                                            >
+                                            weight={700}
-                                                {carousel.title}
+                                        >
-                                            </TextTitle>
+                                            {carousel.title}
+                                        </TextTitle>
 
-                                            <ActionIcon
+                                        <ActionIcon
-                                                onClick={() => invalidateCarouselQuery(carousel)}
+                                            onClick={() => invalidateCarouselQuery(carousel)}
-                                            >
+                                        >
-                                                <RiRefreshLine />
+                                            <RiRefreshLine />
-                                            </ActionIcon>
+                                        </ActionIcon>
-                                        </Group>
+                                    </Group>
-                                    ),
+                                ),
-                                }}
+                            }}
-                                uniqueId={carousel.uniqueId}
+                            uniqueId={carousel.uniqueId}
-                            />
+                        />
-                        ))}
+                    ))}
                 </Stack>
             </NativeScrollArea>
         </AnimatedPage>

src/renderer/features/settings/components/general/draggable-item.tsx

@@ -0,0 +1,51 @@
+import { Group } from '@mantine/core';
+import { useDragControls, Reorder } from 'framer-motion';
+import { MdDragIndicator } from 'react-icons/md';
+import { Checkbox } from '/@/renderer/components';
+
+const DragHandle = ({ dragControls }: any) => {
+    return (
+        <MdDragIndicator
+            color="white"
+            style={{ cursor: 'grab' }}
+            onPointerDown={(event) => dragControls.start(event)}
+        />
+    );
+};
+
+interface SidebarItem {
+    disabled: boolean;
+    id: string;
+}
+
+export interface DraggableItemProps {
+    handleChangeDisabled: (id: string, e: boolean) => void;
+    item: SidebarItem;
+    value: string;
+}
+
+export const DraggableItem = ({ item, value, handleChangeDisabled }: DraggableItemProps) => {
+    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} />
+                {value}
+            </Group>
+        </Reorder.Item>
+    );
+};

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

@@ -6,6 +6,7 @@ import { ThemeSettings } from '/@/renderer/features/settings/components/general/
 import { RemoteSettings } from '/@/renderer/features/settings/components/general/remote-settings';
 import { CacheSettings } from '/@/renderer/features/settings/components/window/cache-settngs';
 import isElectron from 'is-electron';
+import { HomeSettings } from '/@/renderer/features/settings/components/general/home-settings';
 
 export const GeneralTab = () => {
     return (
@@ -16,6 +17,8 @@ export const GeneralTab = () => {
             <Divider />
             <ControlSettings />
             <Divider />
+            <HomeSettings />
+            <Divider />
             <SidebarSettings />
             {isElectron() && (
                 <>

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

@@ -0,0 +1,107 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Reorder } from 'framer-motion';
+import isEqual from 'lodash/isEqual';
+import { useTranslation } from 'react-i18next';
+import { Button } from '/@/renderer/components';
+import {
+    useSettingsStoreActions,
+    useGeneralSettings,
+    HomeItem,
+} from '../../../../store/settings.store';
+import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
+import { DraggableItem } from '/@/renderer/features/settings/components/general/draggable-item';
+
+export const HomeSettings = () => {
+    const { t } = useTranslation();
+    const { homeItems } = useGeneralSettings();
+    const { setHomeItems } = useSettingsStoreActions();
+    const [open, setOpen] = useState(false);
+
+    const translatedSidebarItemMap = useMemo(
+        () => ({
+            [HomeItem.RANDOM]: t('page.home.explore', { postProcess: 'sentenceCase' }),
+            [HomeItem.RECENTLY_PLAYED]: t('page.home.recentlyPlayed', {
+                postProcess: 'sentenceCase',
+            }),
+            [HomeItem.RECENTLY_ADDED]: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }),
+            [HomeItem.MOST_PLAYED]: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }),
+        }),
+        [t],
+    );
+
+    const [localHomeItems, setLocalHomeItems] = useState(homeItems);
+
+    const handleSave = () => {
+        setHomeItems(localHomeItems);
+    };
+
+    const handleChangeDisabled = useCallback((id: string, e: boolean) => {
+        setLocalHomeItems((items) =>
+            items.map((item) => {
+                if (item.id === id) {
+                    return {
+                        ...item,
+                        disabled: !e,
+                    };
+                }
+
+                return item;
+            }),
+        );
+    }, []);
+
+    const isSaveButtonDisabled = isEqual(homeItems, localHomeItems);
+
+    return (
+        <>
+            <SettingsOptions
+                control={
+                    <>
+                        {open && (
+                            <Button
+                                compact
+                                disabled={isSaveButtonDisabled}
+                                variant="filled"
+                                onClick={handleSave}
+                            >
+                                {t('common.save', { postProcess: 'titleCase' })}
+                            </Button>
+                        )}
+                        <Button
+                            compact
+                            variant="filled"
+                            onClick={() => setOpen(!open)}
+                        >
+                            {t(open ? 'common.close' : 'common.edit', { postProcess: 'titleCase' })}
+                        </Button>
+                    </>
+                }
+                description={t('setting.homeConfiguration', {
+                    context: 'description',
+                    postProcess: 'sentenceCase',
+                })}
+                title={t('setting.homeConfiguration', { postProcess: 'sentenceCase' })}
+            />
+            {open && (
+                <Reorder.Group
+                    axis="y"
+                    values={localHomeItems}
+                    onReorder={setLocalHomeItems}
+                >
+                    {localHomeItems.map((item) => (
+                        <DraggableItem
+                            key={item.id}
+                            handleChangeDisabled={handleChangeDisabled}
+                            item={item}
+                            value={
+                                translatedSidebarItemMap[
+                                    item.id as keyof typeof translatedSidebarItemMap
+                                ]
+                            }
+                        />
+                    ))}
+                </Reorder.Group>
+            )}
+        </>
+    );
+};

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

@@ -1,77 +1,33 @@
-import { ChangeEvent, useCallback, useState } from 'react';
+import { ChangeEvent, useCallback, useMemo, useState } from 'react';
-import { Group } from '@mantine/core';
+import { Reorder } from 'framer-motion';
-import { Reorder, useDragControls } from 'framer-motion';
 import isEqual from 'lodash/isEqual';
 import { useTranslation } from 'react-i18next';
-import { MdDragIndicator } from 'react-icons/md';
+import { Button, Switch } from '/@/renderer/components';
-import { Button, Checkbox, Switch } from '/@/renderer/components';
 import { useSettingsStoreActions, useGeneralSettings } from '../../../../store/settings.store';
 import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
-import i18n from '/@/i18n/i18n';
+import { DraggableItem } from '/@/renderer/features/settings/components/general/draggable-item';
-
-const translatedSidebarItemMap = {
-    Albums: i18n.t('page.sidebar.albums', { postProcess: 'titleCase' }),
-    Artists: i18n.t('page.sidebar.artists', { postProcess: 'titleCase' }),
-    Folders: i18n.t('page.sidebar.folders', { postProcess: 'titleCase' }),
-    Genres: i18n.t('page.sidebar.genres', { postProcess: 'titleCase' }),
-    Home: i18n.t('page.sidebar.home', { postProcess: 'titleCase' }),
-    'Now Playing': i18n.t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
-    Playlists: i18n.t('page.sidebar.playlists', { postProcess: 'titleCase' }),
-    Search: i18n.t('page.sidebar.search', { postProcess: 'titleCase' }),
-    Settings: i18n.t('page.sidebar.settings', { postProcess: 'titleCase' }),
-    Tracks: i18n.t('page.sidebar.tracks', { postProcess: 'titleCase' }),
-};
-
-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} />
-                {translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap]}
-            </Group>
-        </Reorder.Item>
-    );
-};
 
 export const SidebarSettings = () => {
     const { t } = useTranslation();
     const settings = useGeneralSettings();
     const { setSidebarItems, setSettings } = useSettingsStoreActions();
+    const [open, setOpen] = useState(false);
+
+    const translatedSidebarItemMap = useMemo(
+        () => ({
+            Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
+            Artists: t('page.sidebar.artists', { postProcess: 'titleCase' }),
+            Folders: t('page.sidebar.folders', { postProcess: 'titleCase' }),
+            Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
+            Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
+            'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
+            Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
+            Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
+            Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
+            Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
+        }),
+        [t],
+    );
 
     const [localSidebarItems, setLocalSidebarItems] = useState(settings.sidebarItems);
 
@@ -144,14 +100,25 @@ export const SidebarSettings = () => {
             />
             <SettingsOptions
                 control={
-                    <Button
+                    <>
-                        compact
+                        {open && (
-                        disabled={isSaveButtonDisabled}
+                            <Button
-                        variant="filled"
+                                compact
-                        onClick={handleSave}
+                                disabled={isSaveButtonDisabled}
-                    >
+                                variant="filled"
-                        {t('common.save', { postProcess: 'titleCase' })}
+                                onClick={handleSave}
-                    </Button>
+                            >
+                                {t('common.save', { postProcess: 'titleCase' })}
+                            </Button>
+                        )}
+                        <Button
+                            compact
+                            variant="filled"
+                            onClick={() => setOpen(!open)}
+                        >
+                            {t(open ? 'common.close' : 'common.edit', { postProcess: 'titleCase' })}
+                        </Button>
+                    </>
                 }
                 description={t('setting.sidebarCollapsedNavigation', {
                     context: 'description',
@@ -159,19 +126,26 @@ export const SidebarSettings = () => {
                 })}
                 title={t('setting.sidebarConfiguration', { postProcess: 'sentenceCase' })}
             />
-            <Reorder.Group
+            {open && (
-                axis="y"
+                <Reorder.Group
-                values={localSidebarItems}
+                    axis="y"
-                onReorder={setLocalSidebarItems}
+                    values={localSidebarItems}
-            >
+                    onReorder={setLocalSidebarItems}
-                {localSidebarItems.map((item) => (
+                >
-                    <DraggableSidebarItem
+                    {localSidebarItems.map((item) => (
-                        key={item.id}
+                        <DraggableItem
-                        handleChangeDisabled={handleChangeDisabled}
+                            key={item.id}
-                        item={item}
+                            handleChangeDisabled={handleChangeDisabled}
-                    />
+                            item={item}
-                ))}
+                            value={
-            </Reorder.Group>
+                                translatedSidebarItemMap[
+                                    item.id as keyof typeof translatedSidebarItemMap
+                                ]
+                            }
+                        />
+                    ))}
+                </Reorder.Group>
+            )}
         </>
     );
 };

src/renderer/store/settings.store.ts

@@ -92,6 +92,23 @@ export const sidebarItems = [
     },
 ];
 
+export type SortableItem<T> = {
+    disabled: boolean;
+    id: T;
+};
+
+export enum HomeItem {
+    MOST_PLAYED = 'mostPlayed',
+    RANDOM = 'random',
+    RECENTLY_ADDED = 'recentlyAdded',
+    RECENTLY_PLAYED = 'recentlyPlayed',
+}
+
+export const homeItems = Object.values(HomeItem).map((item) => ({
+    disabled: false,
+    id: item,
+}));
+
 export type PersistedTableColumn = {
     column: TableColumn;
     extraProps?: Partial<ColDef>;
@@ -174,6 +191,7 @@ export interface SettingsState {
         defaultFullPlaylist: boolean;
         externalLinks: boolean;
         followSystemTheme: boolean;
+        homeItems: SortableItem<HomeItem>[];
         language: string;
         passwordStore?: string;
         playButtonBehavior: Play;
@@ -256,6 +274,7 @@ export interface SettingsSlice extends SettingsState {
     actions: {
         reset: () => void;
         resetSampleRate: () => void;
+        setHomeItems: (item: SortableItem<HomeItem>[]) => void;
         setSettings: (data: Partial<SettingsState>) => void;
         setSidebarItems: (items: SidebarItemType[]) => void;
         setTable: (type: TableType, data: DataTableProps) => void;
@@ -289,6 +308,7 @@ const initialState: SettingsState = {
         defaultFullPlaylist: true,
         externalLinks: true,
         followSystemTheme: false,
+        homeItems,
         language: 'en',
         passwordStore: undefined,
         playButtonBehavior: Play.NOW,
@@ -580,6 +600,11 @@ export const useSettingsStore = create<SettingsSlice>()(
                             state.playback.mpvProperties.audioSampleRateHz = 0;
                         });
                     },
+                    setHomeItems: (items: SortableItem<HomeItem>[]) => {
+                        set((state) => {
+                            state.general.homeItems = items;
+                        });
+                    },
                     setSettings: (data) => {
                         set({ ...get(), ...data });
                     },