mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 18:33:33 +00:00
Migrate to Mantine v8 and Design Changes (#961)
* mantine v8 migration * various design changes and improvements
This commit is contained in:
Jeff
GitHub
parent
bea55d48a8
commit
c1330d92b2
473 changed files with 12469 additions and 11607 deletions
|
|
@ -1,83 +1,40 @@
|
|||
import { Box, Center, Divider, Group, Stack } from '@mantine/core';
|
||||
import { closeAllModals, openModal } from '@mantine/modals';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { MouseEvent, useMemo } from 'react';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { CSSProperties, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RiAddFill, RiArrowDownSLine, RiDiscLine, RiListUnordered } from 'react-icons/ri';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import styles from './sidebar.module.css';
|
||||
|
||||
import { Button, MotionStack, Tooltip } from '/@/renderer/components';
|
||||
import { CreatePlaylistForm } from '/@/renderer/features/playlists';
|
||||
import { ActionBar } from '/@/renderer/features/sidebar/components/action-bar';
|
||||
import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
|
||||
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 {
|
||||
SidebarPlaylistList,
|
||||
SidebarSharedPlaylistList,
|
||||
} from '/@/renderer/features/sidebar/components/sidebar-playlist-list';
|
||||
import {
|
||||
useAppStoreActions,
|
||||
useCurrentServer,
|
||||
useCurrentSong,
|
||||
useFullScreenPlayerStore,
|
||||
useSetFullScreenPlayerStore,
|
||||
useSidebarStore,
|
||||
} from '/@/renderer/store';
|
||||
import {
|
||||
SidebarItemType,
|
||||
useGeneralSettings,
|
||||
useWindowSettings,
|
||||
} from '/@/renderer/store/settings.store';
|
||||
import { fadeIn } from '/@/renderer/styles';
|
||||
import { ServerType } from '/@/shared/types/domain-types';
|
||||
import { Platform } from '/@/shared/types/types';
|
||||
|
||||
const SidebarContainer = styled.div<{ $windowBarStyle: Platform }>`
|
||||
height: 100%;
|
||||
max-height: ${
|
||||
(props) =>
|
||||
props.$windowBarStyle === Platform.WEB || props.$windowBarStyle === Platform.LINUX
|
||||
? 'calc(100vh - 160px)' // Playerbar (90px) & ActionBar (70px)
|
||||
: 'calc(100vh - 190px)' // plus windowbar (30px) if the windowBarStyle is Windows/Mac
|
||||
// We use the height of the SidebarContainer to keep the Stack below the ActionBar at the correct height
|
||||
// ActionBar uses height: 100%; so it has the full height of its parent
|
||||
};
|
||||
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: var(--image-fit);
|
||||
background: var(--placeholder-bg);
|
||||
`;
|
||||
import { SidebarItemType, useGeneralSettings } from '/@/renderer/store/settings.store';
|
||||
import { Accordion } from '/@/shared/components/accordion/accordion';
|
||||
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Image } from '/@/shared/components/image/image';
|
||||
import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import { Tooltip } from '/@/shared/components/tooltip/tooltip';
|
||||
|
||||
export const Sidebar = () => {
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
const sidebar = useSidebarStore();
|
||||
const { setSideBar } = useAppStoreActions();
|
||||
const { windowBarStyle } = useWindowSettings();
|
||||
const { sidebarPlaylistList } = useGeneralSettings();
|
||||
const imageUrl = useCurrentSong()?.imageUrl;
|
||||
const server = useCurrentServer();
|
||||
|
||||
const translatedSidebarItemMap = useMemo(
|
||||
() => ({
|
||||
|
|
@ -101,24 +58,12 @@ export const Sidebar = () => {
|
|||
|
||||
const showImage = sidebar.image;
|
||||
|
||||
const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
openModal({
|
||||
children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
|
||||
size: server?.type === ServerType?.NAVIDROME ? 'xl' : 'sm',
|
||||
title: t('form.createPlaylist.title', { postProcess: 'titleCase' }),
|
||||
});
|
||||
};
|
||||
|
||||
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
|
||||
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
|
||||
const expandFullScreenPlayer = () => {
|
||||
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
|
||||
};
|
||||
|
||||
const cq = useContainerQuery({ sm: 300 });
|
||||
|
||||
const { sidebarItems } = useGeneralSettings();
|
||||
|
||||
const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
|
||||
|
|
@ -137,159 +82,128 @@ export const Sidebar = () => {
|
|||
}, [sidebarItems, translatedSidebarItemMap]);
|
||||
|
||||
return (
|
||||
<SidebarContainer
|
||||
$windowBarStyle={windowBarStyle}
|
||||
ref={cq.ref}
|
||||
<div
|
||||
className={styles.container}
|
||||
id="left-sidebar"
|
||||
>
|
||||
<ActionBar />
|
||||
<Stack
|
||||
h="100%"
|
||||
justify="space-between"
|
||||
spacing={0}
|
||||
<Group id="global-search-container">
|
||||
<ActionBar />
|
||||
</Group>
|
||||
<ScrollArea
|
||||
allowDragScroll
|
||||
className={styles.scrollArea}
|
||||
style={{
|
||||
maxHeight: showImage ? `calc(100vh - 90px - ${sidebar.leftWidth})` : '100%',
|
||||
}}
|
||||
>
|
||||
<MotionStack
|
||||
h="100%"
|
||||
layout="position"
|
||||
spacing={0}
|
||||
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
|
||||
<Accordion
|
||||
classNames={{
|
||||
content: styles.accordionContent,
|
||||
control: styles.accordionControl,
|
||||
item: styles.accordionItem,
|
||||
root: styles.accordionRoot,
|
||||
}}
|
||||
multiple
|
||||
>
|
||||
<Stack spacing={0}>
|
||||
{sidebarItemsWithRoute.map((item) => {
|
||||
return (
|
||||
<SidebarItem
|
||||
key={`sidebar-${item.route}`}
|
||||
to={item.route}
|
||||
>
|
||||
<Group spacing="sm">
|
||||
<SidebarIcon
|
||||
active={location.pathname === item.route}
|
||||
route={item.route}
|
||||
size="1.1em"
|
||||
/>
|
||||
{item.label}
|
||||
</Group>
|
||||
</SidebarItem>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
<Divider
|
||||
mx="1rem"
|
||||
my="0.5rem"
|
||||
/>
|
||||
<Accordion.Item value="library">
|
||||
<Accordion.Control>
|
||||
<Text
|
||||
fw={600}
|
||||
variant="secondary"
|
||||
>
|
||||
{t('page.sidebar.myLibrary', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
</Text>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{sidebarItemsWithRoute.map((item) => {
|
||||
return (
|
||||
<SidebarItem
|
||||
key={`sidebar-${item.route}`}
|
||||
to={item.route}
|
||||
>
|
||||
<Group gap="sm">
|
||||
<SidebarIcon
|
||||
active={location.pathname === item.route}
|
||||
route={item.route}
|
||||
/>
|
||||
{item.label}
|
||||
</Group>
|
||||
</SidebarItem>
|
||||
);
|
||||
})}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
{sidebarPlaylistList && (
|
||||
<>
|
||||
<Group
|
||||
position="apart"
|
||||
pt="1rem"
|
||||
px="1.5rem"
|
||||
>
|
||||
<Group>
|
||||
<Box
|
||||
fw="600"
|
||||
sx={{ fontSize: '1.2rem' }}
|
||||
>
|
||||
{t('page.sidebar.playlists', { postProcess: 'titleCase' })}
|
||||
</Box>
|
||||
</Group>
|
||||
<Group spacing="sm">
|
||||
<Button
|
||||
compact
|
||||
onClick={handleCreatePlaylistModal}
|
||||
size="md"
|
||||
tooltip={{
|
||||
label: t('action.createPlaylist', {
|
||||
postProcess: 'sentenceCase',
|
||||
}),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiAddFill size="1em" />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
component={Link}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
size="md"
|
||||
to={AppRoute.PLAYLISTS}
|
||||
tooltip={{
|
||||
label: t('action.viewPlaylists', {
|
||||
postProcess: 'sentenceCase',
|
||||
}),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiListUnordered size="1em" />
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
<SidebarPlaylistList />
|
||||
<SidebarSharedPlaylistList />
|
||||
</>
|
||||
)}
|
||||
</MotionStack>
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
mode="popLayout"
|
||||
>
|
||||
{showImage && (
|
||||
<ImageContainer
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 200 }}
|
||||
height={sidebar.leftWidth}
|
||||
initial={{ opacity: 0, y: 200 }}
|
||||
key="sidebar-image"
|
||||
onClick={expandFullScreenPlayer}
|
||||
role="button"
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
</Accordion>
|
||||
</ScrollArea>
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
mode="popLayout"
|
||||
>
|
||||
{showImage && (
|
||||
<motion.div
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={styles.imageContainer}
|
||||
exit={{ opacity: 0, y: 200 }}
|
||||
initial={{ opacity: 0, y: 200 }}
|
||||
key="sidebar-image"
|
||||
onClick={expandFullScreenPlayer}
|
||||
role="button"
|
||||
style={
|
||||
{
|
||||
'--sidebar-image-height': sidebar.leftWidth,
|
||||
} as CSSProperties
|
||||
}
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
>
|
||||
<Tooltip
|
||||
label={t('player.toggleFullscreenPlayer', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
openDelay={500}
|
||||
>
|
||||
<Tooltip
|
||||
label={t('player.toggleFullscreenPlayer', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
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
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSideBar({ image: false });
|
||||
}}
|
||||
opacity={0.8}
|
||||
radius={100}
|
||||
size="md"
|
||||
sx={{ cursor: 'default', position: 'absolute', right: 5, top: 5 }}
|
||||
tooltip={{
|
||||
label: t('common.collapse', { postProcess: 'titleCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiArrowDownSLine
|
||||
color="white"
|
||||
size={20}
|
||||
/>
|
||||
</Button>
|
||||
</ImageContainer>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Stack>
|
||||
</SidebarContainer>
|
||||
<Image
|
||||
className={styles.sidebarImage}
|
||||
includeLoader={false}
|
||||
includeUnloader={false}
|
||||
loading="eager"
|
||||
src={upsizedImageUrl || ''}
|
||||
/>
|
||||
</Tooltip>
|
||||
<ActionIcon
|
||||
icon="arrowDownS"
|
||||
iconProps={{
|
||||
size: 'lg',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSideBar({ image: false });
|
||||
}}
|
||||
opacity={0.8}
|
||||
radius="md"
|
||||
style={{
|
||||
cursor: 'default',
|
||||
position: 'absolute',
|
||||
right: 5,
|
||||
top: 5,
|
||||
}}
|
||||
tooltip={{
|
||||
label: t('common.collapse', {
|
||||
postProcess: 'titleCase',
|
||||
}),
|
||||
openDelay: 500,
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue