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

import { MouseEvent, useMemo } from 'react';
import { Box, Center, Divider, Group, Stack } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { AnimatePresence, motion } from 'framer-motion';
import { IconType } from 'react-icons';
import {
    RiAddFill,
    RiAlbumFill,
    RiAlbumLine,
    RiArrowDownSLine,
    RiDiscLine,
    RiFlag2Fill,
    RiFlagLine,
    RiFolder3Fill,
    RiFolder3Line,
    RiHome6Fill,
    RiHome6Line,
    RiListUnordered,
    RiMusic2Fill,
    RiMusic2Line,
    RiPlayLine,
    RiSearchFill,
    RiUserVoiceFill,
    RiUserVoiceLine,
    RiSearchLine,
    RiPlayFill,
    RiSettings2Line,
    RiSettings2Fill,
    RiPlayListLine,
    RiPlayListFill,
} from 'react-icons/ri';
import { generatePath, Link, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import {
    SidebarItemType,
    useGeneralSettings,
    useWindowSettings,
} from '../../../store/settings.store';
import { LibraryItem, PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import { Button, MotionStack, Spinner, Tooltip } from '/@/renderer/components';
import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists';
import { ActionBar } from '/@/renderer/features/sidebar/components/action-bar';
import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item';
import { SidebarPlaylistList } from '/@/renderer/features/sidebar/components/sidebar-playlist-list';
import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes';
import {
    useAppStoreActions,
    useCurrentServer,
    useCurrentSong,
    useFullScreenPlayerStore,
    useSetFullScreenPlayerStore,
    useSidebarStore,
} from '/@/renderer/store';
import { fadeIn } from '/@/renderer/styles';
import { Platform } from '/@/renderer/types';

const SidebarContainer = styled.div<{ windowBarStyle: Platform }>`
    height: 100%;
    max-height: ${(props) =>
        props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
            ? 'calc(100vh - 149px)'
            : 'calc(100vh - 179px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
    user-select: none;
`;

const ImageContainer = styled(motion.div)<{ height: string }>`
    position: relative;
    height: ${(props) => props.height};
    cursor: pointer;

    ${fadeIn};
    animation: fadein 0.2s ease-in-out;

    button {
        display: none;
    }

    &:hover button {
        display: block;
    }
`;

const SidebarImage = styled.img`
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--placeholder-bg);
`;

const sidebarItemMap = {
    [AppRoute.HOME]: {
        activeIcon: RiHome6Fill,
        icon: RiHome6Line,
    },
    [AppRoute.LIBRARY_ALBUMS]: {
        activeIcon: RiAlbumFill,
        icon: RiAlbumLine,
    },
    [AppRoute.LIBRARY_ALBUM_ARTISTS]: {
        activeIcon: RiUserVoiceFill,
        icon: RiUserVoiceLine,
    },
    [AppRoute.PLAYLISTS]: {
        activeIcon: RiPlayListFill,
        icon: RiPlayListLine,
    },
    [AppRoute.LIBRARY_SONGS]: {
        activeIcon: RiMusic2Fill,
        icon: RiMusic2Line,
    },
    [AppRoute.LIBRARY_FOLDERS]: {
        activeIcon: RiFolder3Fill,
        icon: RiFolder3Line,
    },
    [AppRoute.LIBRARY_GENRES]: {
        activeIcon: RiFlag2Fill,
        icon: RiFlagLine,
    },
    [generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: {
        activeIcon: RiSearchFill,
        icon: RiSearchLine,
    },
    [AppRoute.SETTINGS]: {
        activeIcon: RiSettings2Fill,
        icon: RiSettings2Line,
    },
    [AppRoute.NOW_PLAYING]: {
        activeIcon: RiPlayFill,
        icon: RiPlayLine,
    },
};

export const Sidebar = () => {
    const location = useLocation();
    const sidebar = useSidebarStore();
    const { setSideBar } = useAppStoreActions();
    const { windowBarStyle } = useWindowSettings();
    const { sidebarPlaylistList } = useGeneralSettings();
    const imageUrl = useCurrentSong()?.imageUrl;
    const server = useCurrentServer();

    const upsizedImageUrl = imageUrl
        ?.replace(/size=\d+/, 'size=300')
        .replace(/width=\d+/, 'width=300')
        .replace(/height=\d+/, 'height=300');

    const showImage = sidebar.image;

    const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
        e.stopPropagation();

        openModal({
            children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
            size: server?.type === ServerType?.NAVIDROME ? 'xl' : 'sm',
            title: 'Create Playlist',
        });
    };

    const playlistsQuery = usePlaylistList({
        query: {
            sortBy: PlaylistListSort.NAME,
            sortOrder: SortOrder.ASC,
            startIndex: 0,
        },
        serverId: server?.id,
    });

    const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
    const expandFullScreenPlayer = () => {
        setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
    };

    const cq = useContainerQuery({ sm: 300 });

    const { sidebarItems } = useGeneralSettings();

    const sidebarItemsWithRoute: (SidebarItemType & {
        activeIcon: IconType;
        icon: IconType;
    })[] = useMemo(() => {
        if (!sidebarItems) return [];

        const items = sidebarItems
            .filter((item) => !item.disabled)
            .map((item) => ({
                ...item,
                ...sidebarItemMap[item.route as keyof typeof sidebarItemMap],
            }));

        return items;
    }, [sidebarItems]);

    return (
        <SidebarContainer
            ref={cq.ref}
            windowBarStyle={windowBarStyle}
        >
            <ActionBar />
            <Stack
                h="100%"
                justify="space-between"
                spacing={0}
            >
                <MotionStack
                    h="100%"
                    layout="position"
                    spacing={0}
                    sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
                >
                    <Stack spacing={0}>
                        {sidebarItemsWithRoute.map((item) => (
                            <SidebarItem
                                key={`sidebar-${item.route}`}
                                to={item.route}
                            >
                                <Group spacing="sm">
                                    {location.pathname === item.route ? (
                                        <item.activeIcon size="1.1em" />
                                    ) : (
                                        <item.icon size="1.1em" />
                                    )}
                                    {item.label}
                                </Group>
                            </SidebarItem>
                        ))}
                    </Stack>
                    <Divider
                        mx="1rem"
                        my="0.5rem"
                    />
                    {sidebarPlaylistList && (
                        <>
                            <Group
                                position="apart"
                                pt="1rem"
                                px="1.5rem"
                            >
                                <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}
                    mode="popLayout"
                >
                    {showImage && (
                        <ImageContainer
                            key="sidebar-image"
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: 200 }}
                            height={sidebar.leftWidth}
                            initial={{ opacity: 0, y: 200 }}
                            role="button"
                            transition={{ duration: 0.3, ease: 'easeInOut' }}
                            onClick={expandFullScreenPlayer}
                        >
                            <Tooltip
                                label="Toggle fullscreen player"
                                openDelay={500}
                            >
                                {upsizedImageUrl ? (
                                    <SidebarImage
                                        loading="eager"
                                        src={upsizedImageUrl}
                                    />
                                ) : (
                                    <Center
                                        sx={{ background: 'var(--placeholder-bg)', height: '100%' }}
                                    >
                                        <RiDiscLine
                                            color="var(--placeholder-fg)"
                                            size={50}
                                        />
                                    </Center>
                                )}
                            </Tooltip>
                            <Button
                                compact
                                opacity={0.8}
                                radius={100}
                                size="md"
                                sx={{ cursor: 'default', position: 'absolute', right: 5, top: 5 }}
                                tooltip={{ label: 'Collapse', openDelay: 500 }}
                                variant="default"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    setSideBar({ image: false });
                                }}
                            >
                                <RiArrowDownSLine
                                    color="white"
                                    size={20}
                                />
                            </Button>
                        </ImageContainer>
                    )}
                </AnimatePresence>
            </Stack>
        </SidebarContainer>
    );
};