feishin/src/renderer/layouts/default-layout/right-sidebar.tsx

import { AnimatePresence, motion, Variants } from 'motion/react';
import { forwardRef, Ref } from 'react';
import { useLocation } from 'react-router';

import styles from './right-sidebar.module.css';

import { DrawerPlayQueue } from '/@/renderer/features/now-playing/components/drawer-play-queue';
import { SidebarPlayQueue } from '/@/renderer/features/now-playing/components/sidebar-play-queue';
import { ResizeHandle } from '/@/renderer/features/shared/components/resize-handle';
import { AppRoute } from '/@/renderer/router/routes';
import { useGeneralSettings, useSidebarStore, useWindowSettings } from '/@/renderer/store';
import { Platform } from '/@/shared/types/types';

const queueDrawerVariants: Variants = {
    closed: (windowBarStyle) => ({
        height:
            windowBarStyle === Platform.WINDOWS || Platform.MACOS
                ? 'calc(100vh - 205px)'
                : 'calc(100vh - 175px)',
        position: 'absolute',
        right: 0,
        top: '75px',
        transition: {
            duration: 0.4,
            ease: 'anticipate',
        },
        width: '450px',
        x: '50vw',
    }),
    open: (windowBarStyle) => ({
        boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
        height:
            windowBarStyle === Platform.WINDOWS || Platform.MACOS
                ? 'calc(100vh - 205px)'
                : 'calc(100vh - 175px)',
        position: 'absolute',
        right: '20px',
        top: '75px',
        transition: {
            damping: 10,
            delay: 0,
            duration: 0.4,
            ease: 'anticipate',
            mass: 0.5,
        },
        width: '450px',
        x: 0,
        zIndex: 120,
    }),
};

interface RightSidebarProps {
    isResizing: boolean;
    startResizing: (direction: 'left' | 'right', mouseEvent?: MouseEvent) => void;
}

export const RightSidebar = forwardRef(
    (
        { isResizing: isResizingRight, startResizing }: RightSidebarProps,
        ref: Ref<HTMLDivElement>,
    ) => {
        const { windowBarStyle } = useWindowSettings();
        const { rightExpanded } = useSidebarStore();
        const { sideQueueType } = useGeneralSettings();
        const location = useLocation();
        const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;

        return (
            <>
                {showSideQueue && (
                    <>
                        {sideQueueType === 'sideQueue' ? (
                            <aside
                                className={styles.rightSidebarContainer}
                                id="sidebar-queue"
                                key="queue-sidebar"
                            >
                                <ResizeHandle
                                    isResizing={isResizingRight}
                                    onMouseDown={(e) => {
                                        e.preventDefault();
                                        startResizing('right', e.nativeEvent);
                                    }}
                                    placement="left"
                                    ref={ref}
                                />
                                <SidebarPlayQueue />
                            </aside>
                        ) : (
                            <AnimatePresence initial={false} key="queue-drawer" mode="sync">
                                <motion.div
                                    animate="open"
                                    className={styles.queueDrawer}
                                    custom={windowBarStyle}
                                    exit="closed"
                                    id="drawer-queue"
                                    initial="closed"
                                    key="queue-drawer"
                                    variants={queueDrawerVariants}
                                >
                                    <DrawerPlayQueue />
                                </motion.div>
                            </AnimatePresence>
                        )}
                    </>
                )}
            </>
        );
    },
);