mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 10:23: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
|
|
@ -0,0 +1,10 @@
|
|||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 65px;
|
||||
-webkit-app-region: drag;
|
||||
|
||||
input {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +1,17 @@
|
|||
import { Grid, Group } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RiArrowLeftSLine, RiArrowRightSLine, RiMenuFill, RiSearchLine } from 'react-icons/ri';
|
||||
import { useNavigate } from 'react-router';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Button, DropdownMenu, TextInput } from '/@/renderer/components';
|
||||
import styles from './action-bar.module.css';
|
||||
|
||||
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
|
||||
import { useContainerQuery } from '/@/renderer/hooks';
|
||||
import { useCommandPalette } from '/@/renderer/store';
|
||||
|
||||
const ActionsContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70px;
|
||||
-webkit-app-region: drag;
|
||||
|
||||
input {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
`;
|
||||
import { Button } from '/@/shared/components/button/button';
|
||||
import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
|
||||
import { Grid } from '/@/shared/components/grid/grid';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Icon } from '/@/shared/components/icon/icon';
|
||||
import { TextInput } from '/@/shared/components/text-input/text-input';
|
||||
|
||||
export const ActionBar = () => {
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -27,114 +20,60 @@ export const ActionBar = () => {
|
|||
const { open } = useCommandPalette();
|
||||
|
||||
return (
|
||||
<ActionsContainer ref={cq.ref}>
|
||||
{cq.isMd ? (
|
||||
<Grid
|
||||
display="flex"
|
||||
gutter="sm"
|
||||
px="1rem"
|
||||
w="100%"
|
||||
>
|
||||
<Grid.Col span={6}>
|
||||
<TextInput
|
||||
icon={<RiSearchLine />}
|
||||
onClick={open}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
open();
|
||||
}
|
||||
}}
|
||||
placeholder={t('common.search', { postProcess: 'titleCase' })}
|
||||
readOnly
|
||||
size="md"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Group
|
||||
grow
|
||||
noWrap
|
||||
spacing="sm"
|
||||
>
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
p="0.5rem"
|
||||
size="md"
|
||||
variant="default"
|
||||
>
|
||||
<RiMenuFill size="1rem" />
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<AppMenu />
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
<Button
|
||||
onClick={() => navigate(-1)}
|
||||
p="0.5rem"
|
||||
size="md"
|
||||
variant="default"
|
||||
>
|
||||
<RiArrowLeftSLine size="1.5rem" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigate(1)}
|
||||
p="0.5rem"
|
||||
size="md"
|
||||
variant="default"
|
||||
>
|
||||
<RiArrowRightSLine size="1.5rem" />
|
||||
</Button>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
) : (
|
||||
<Group
|
||||
grow
|
||||
px="1rem"
|
||||
spacing="sm"
|
||||
w="100%"
|
||||
>
|
||||
<Button
|
||||
<div
|
||||
className={styles.container}
|
||||
ref={cq.ref}
|
||||
>
|
||||
<Grid
|
||||
display="flex"
|
||||
gutter="sm"
|
||||
px="1rem"
|
||||
w="100%"
|
||||
>
|
||||
<Grid.Col span={6}>
|
||||
<TextInput
|
||||
leftSection={<Icon icon="search" />}
|
||||
onClick={open}
|
||||
p="0.5rem"
|
||||
size="md"
|
||||
variant="default"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
open();
|
||||
}
|
||||
}}
|
||||
placeholder={t('common.search', { postProcess: 'titleCase' })}
|
||||
readOnly
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Group
|
||||
gap="sm"
|
||||
grow
|
||||
wrap="nowrap"
|
||||
>
|
||||
<RiSearchLine size="1rem" />
|
||||
</Button>
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
p="0.5rem"
|
||||
size="md"
|
||||
variant="default"
|
||||
>
|
||||
<RiMenuFill size="1rem" />
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<AppMenu />
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
<Button
|
||||
onClick={() => navigate(-1)}
|
||||
p="0.5rem"
|
||||
size="md"
|
||||
variant="default"
|
||||
>
|
||||
<RiArrowLeftSLine size="1.5rem" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigate(1)}
|
||||
p="0.5rem"
|
||||
size="md"
|
||||
variant="default"
|
||||
>
|
||||
<RiArrowRightSLine size="1.5rem" />
|
||||
</Button>
|
||||
</Group>
|
||||
)}
|
||||
</ActionsContainer>
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button p="0.5rem">
|
||||
<Icon icon="menu" />
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<AppMenu />
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
<Button
|
||||
onClick={() => navigate(-1)}
|
||||
p="0.5rem"
|
||||
>
|
||||
<Icon icon="arrowLeftS" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigate(1)}
|
||||
p="0.5rem"
|
||||
>
|
||||
<Icon icon="arrowRightS" />
|
||||
</Button>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
.button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.9rem 0.3rem;
|
||||
}
|
||||
|
|
@ -1,65 +1,22 @@
|
|||
import { createPolymorphicComponent, Flex } from '@mantine/core';
|
||||
import { forwardRef, ReactNode } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
pointer-events: ${(props) => (props.$disabled ? 'none' : 'all')};
|
||||
cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
|
||||
user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
|
||||
opacity: ${(props) => props.$disabled && 0.6};
|
||||
import styles from './collapsed-sidebar-button.module.css';
|
||||
|
||||
svg {
|
||||
fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
|
||||
}
|
||||
import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/action-icon';
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--sidebar-bg-hover);
|
||||
outline: none;
|
||||
}
|
||||
interface CollapsedSidebarButtonProps extends ActionIconProps {}
|
||||
|
||||
${(props) =>
|
||||
!props.$disabled &&
|
||||
`
|
||||
&:hover {
|
||||
background-color: var(--sidebar-bg-hover);
|
||||
|
||||
div {
|
||||
color: var(--main-fg) !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
interface CollapsedSidebarButtonProps {
|
||||
children: ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const _CollapsedSidebarButton = forwardRef<HTMLDivElement, CollapsedSidebarButtonProps>(
|
||||
export const CollapsedSidebarButton = forwardRef<HTMLButtonElement, CollapsedSidebarButtonProps>(
|
||||
({ children, ...props }: CollapsedSidebarButtonProps, ref) => {
|
||||
return (
|
||||
<Container
|
||||
align="center"
|
||||
direction="column"
|
||||
<ActionIcon
|
||||
className={styles.button}
|
||||
ref={ref}
|
||||
variant="subtle"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Container>
|
||||
</ActionIcon>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export const CollapsedSidebarButton = createPolymorphicComponent<
|
||||
'button',
|
||||
CollapsedSidebarButtonProps
|
||||
>(_CollapsedSidebarButton);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0.9rem 0.3rem;
|
||||
color: var(--theme-colors-foreground-muted);
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--theme-colors-foreground-muted);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-colors-foreground);
|
||||
|
||||
svg {
|
||||
fill: var(--theme-colors-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container.active {
|
||||
svg {
|
||||
fill: var(--theme-colors-primary-filled);
|
||||
}
|
||||
}
|
||||
|
||||
.container.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
div {
|
||||
color: var(--theme-colors-foreground) !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--theme-colors-primary-filled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.text-wrapper.active {
|
||||
color: var(--theme-colors-foreground);
|
||||
}
|
||||
|
||||
.active-tab-indicator {
|
||||
position: absolute;
|
||||
inset: 0 0 0 3px;
|
||||
width: 2px;
|
||||
height: 80%;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
background: var(--theme-colors-primary-filled);
|
||||
}
|
||||
|
|
@ -1,67 +1,12 @@
|
|||
import { createPolymorphicComponent, Flex } from '@mantine/core';
|
||||
import { motion } from 'framer-motion';
|
||||
import clsx from 'clsx';
|
||||
import { forwardRef, ReactNode } from 'react';
|
||||
import { useMatch } from 'react-router';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Text } from '/@/renderer/components';
|
||||
import styles from './collapsed-sidebar-item.module.css';
|
||||
|
||||
const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0.9rem 0.3rem;
|
||||
pointer-events: ${(props) => (props.$disabled ? 'none' : 'all')};
|
||||
cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
|
||||
user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
|
||||
border-right: var(--sidebar-border);
|
||||
opacity: ${(props) => props.$disabled && 0.6};
|
||||
|
||||
svg {
|
||||
fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--sidebar-bg-hover);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
!props.$disabled &&
|
||||
`
|
||||
&:hover {
|
||||
background-color: var(--sidebar-bg-hover);
|
||||
|
||||
div {
|
||||
color: var(--main-fg) !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const TextWrapper = styled.div`
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre-line;
|
||||
`;
|
||||
|
||||
const ActiveTabIndicator = styled(motion.div)`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 3px;
|
||||
width: 2px;
|
||||
height: 80%;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
background: var(--primary-color);
|
||||
`;
|
||||
import { Flex } from '/@/shared/components/flex/flex';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import { createPolymorphicComponent } from '/@/shared/utils/create-polymorphic-component';
|
||||
|
||||
interface CollapsedSidebarItemProps {
|
||||
activeIcon: ReactNode;
|
||||
|
|
@ -77,26 +22,32 @@ const _CollapsedSidebarItem = forwardRef<HTMLDivElement, CollapsedSidebarItemPro
|
|||
const isMatch = Boolean(match);
|
||||
|
||||
return (
|
||||
<Container
|
||||
$active={Boolean(match)}
|
||||
$disabled={disabled}
|
||||
<Flex
|
||||
align="center"
|
||||
className={clsx({
|
||||
[styles.active]: isMatch,
|
||||
[styles.container]: true,
|
||||
[styles.disabled]: disabled,
|
||||
})}
|
||||
direction="column"
|
||||
ref={ref}
|
||||
tabIndex={0}
|
||||
{...props}
|
||||
>
|
||||
{isMatch ? <ActiveTabIndicator /> : null}
|
||||
{isMatch ? <div className={styles.activeTabIndicator} /> : null}
|
||||
{isMatch ? activeIcon : icon}
|
||||
<TextWrapper>
|
||||
<Text
|
||||
$secondary={!isMatch}
|
||||
fw="600"
|
||||
size="xs"
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</TextWrapper>
|
||||
</Container>
|
||||
<Text
|
||||
className={clsx({
|
||||
[styles.active]: isMatch,
|
||||
[styles.textWrapper]: true,
|
||||
})}
|
||||
fw="600"
|
||||
isMuted={!isMatch}
|
||||
size="xs"
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</Flex>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
.sidebar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 119px);
|
||||
user-select: none;
|
||||
background: var(--theme-colors-background-alternate);
|
||||
}
|
||||
|
||||
.sidebar-container.web,
|
||||
.sidebar-container.linux {
|
||||
max-height: calc(100vh - 149px);
|
||||
}
|
||||
|
|
@ -1,30 +1,23 @@
|
|||
import { Group, UnstyledButton } from '@mantine/core';
|
||||
import { motion } from 'framer-motion';
|
||||
import clsx from 'clsx';
|
||||
import { motion } from 'motion/react';
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RiArrowLeftSLine, RiArrowRightSLine, RiMenuFill } from 'react-icons/ri';
|
||||
import { NavLink, useNavigate } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { DropdownMenu, ScrollArea } from '/@/renderer/components';
|
||||
import styles from './collapsed-sidebar.module.css';
|
||||
|
||||
import { CollapsedSidebarButton } from '/@/renderer/features/sidebar/components/collapsed-sidebar-button';
|
||||
import { CollapsedSidebarItem } from '/@/renderer/features/sidebar/components/collapsed-sidebar-item';
|
||||
import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
|
||||
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
|
||||
import { SidebarItemType, useGeneralSettings, useWindowSettings } from '/@/renderer/store';
|
||||
import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
|
||||
import { Flex } from '/@/shared/components/flex/flex';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Icon } from '/@/shared/components/icon/icon';
|
||||
import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
|
||||
import { Platform } from '/@/shared/types/types';
|
||||
|
||||
const SidebarContainer = styled(motion.div)<{ $windowBarStyle: Platform }>`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: ${(props) =>
|
||||
props.$windowBarStyle === Platform.WEB || props.$windowBarStyle === Platform.LINUX
|
||||
? 'calc(100vh - 149px)'
|
||||
: 'calc(100vh - 119px)'};
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
export const CollapsedSidebar = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -67,40 +60,50 @@ export const CollapsedSidebar = () => {
|
|||
}, [sidebarItems, translatedSidebarItemMap]);
|
||||
|
||||
return (
|
||||
<SidebarContainer $windowBarStyle={windowBarStyle}>
|
||||
<ScrollArea
|
||||
scrollbarSize={8}
|
||||
scrollHideDelay={0}
|
||||
>
|
||||
<motion.div
|
||||
className={clsx({
|
||||
[styles.linux]: windowBarStyle === Platform.LINUX,
|
||||
[styles.sidebarContainer]: true,
|
||||
[styles.web]: windowBarStyle === Platform.WEB,
|
||||
})}
|
||||
>
|
||||
<ScrollArea>
|
||||
{sidebarCollapsedNavigation && (
|
||||
<Group
|
||||
gap={0}
|
||||
grow
|
||||
spacing={0}
|
||||
style={{
|
||||
borderRight: 'var(--sidebar-border)',
|
||||
}}
|
||||
>
|
||||
<CollapsedSidebarButton
|
||||
component={UnstyledButton}
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<RiArrowLeftSLine size="22" />
|
||||
<CollapsedSidebarButton onClick={() => navigate(-1)}>
|
||||
<Icon
|
||||
icon="arrowLeftS"
|
||||
size="xl"
|
||||
/>
|
||||
</CollapsedSidebarButton>
|
||||
<CollapsedSidebarButton
|
||||
component={UnstyledButton}
|
||||
onClick={() => navigate(1)}
|
||||
>
|
||||
<RiArrowRightSLine size="22" />
|
||||
<CollapsedSidebarButton onClick={() => navigate(1)}>
|
||||
<Icon
|
||||
icon="arrowRightS"
|
||||
size="xl"
|
||||
/>
|
||||
</CollapsedSidebarButton>
|
||||
</Group>
|
||||
)}
|
||||
<DropdownMenu position="right-start">
|
||||
<DropdownMenu.Target>
|
||||
<CollapsedSidebarItem
|
||||
activeIcon={<RiMenuFill size="25" />}
|
||||
component={UnstyledButton}
|
||||
icon={<RiMenuFill size="25" />}
|
||||
activeIcon={null}
|
||||
component={Flex}
|
||||
icon={
|
||||
<Icon
|
||||
fill="muted"
|
||||
icon="menu"
|
||||
size="3xl"
|
||||
/>
|
||||
}
|
||||
label={t('common.menu', { postProcess: 'titleCase' })}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
padding: 'var(--theme-spacing-md) 0',
|
||||
}}
|
||||
/>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
|
|
@ -130,6 +133,6 @@ export const CollapsedSidebar = () => {
|
|||
/>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</SidebarContainer>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
.item {
|
||||
width: 100%;
|
||||
font-family: var(--theme-content-font-family);
|
||||
font-size: var(--theme-font-size-md);
|
||||
font-weight: 600;
|
||||
|
||||
&:focus-visible {
|
||||
border: 1px solid var(--theme-colors-primary-filled);
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: var(--theme-font-size-md);
|
||||
color: var(--theme-colors-foreground);
|
||||
border: 1px transparent solid;
|
||||
transition: color 0.2s ease-in-out;
|
||||
|
||||
&:focus-visible {
|
||||
border: 1px solid var(--theme-colors-primary-filled);
|
||||
}
|
||||
}
|
||||
|
||||
.link.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
|
@ -1,72 +1,30 @@
|
|||
import type { ReactNode } from 'react';
|
||||
import type { LinkProps } from 'react-router-dom';
|
||||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
import { Link, LinkProps } from 'react-router-dom';
|
||||
|
||||
import { createPolymorphicComponent, Flex, FlexProps } from '@mantine/core';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled, { css } from 'styled-components';
|
||||
import styles from './sidebar-item.module.css';
|
||||
|
||||
interface ListItemProps extends FlexProps {
|
||||
children: ReactNode;
|
||||
disabled?: boolean;
|
||||
to?: string;
|
||||
import { Button, ButtonProps } from '/@/shared/components/button/button';
|
||||
|
||||
interface SidebarItemProps extends ButtonProps {
|
||||
to: LinkProps['to'];
|
||||
}
|
||||
|
||||
const StyledItem = styled(Flex)`
|
||||
width: 100%;
|
||||
font-family: var(--content-font-family);
|
||||
font-weight: 600;
|
||||
|
||||
&:focus-visible {
|
||||
border: 1px solid var(--primary-color);
|
||||
}
|
||||
`;
|
||||
|
||||
const ItemStyle = css`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--sidebar-fg);
|
||||
border: 1px transparent solid;
|
||||
transition: color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: var(--sidebar-fg-hover);
|
||||
}
|
||||
`;
|
||||
|
||||
const _ItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
|
||||
pointer-events: ${(props) => props.disabled && 'none'};
|
||||
opacity: ${(props) => props.disabled && 0.6};
|
||||
|
||||
&:focus-visible {
|
||||
border: 1px solid var(--primary-color);
|
||||
}
|
||||
|
||||
${ItemStyle}
|
||||
`;
|
||||
|
||||
const ItemLink = createPolymorphicComponent<'a', ListItemProps>(_ItemLink);
|
||||
|
||||
export const SidebarItem = ({ children, to, ...props }: ListItemProps) => {
|
||||
if (to) {
|
||||
return (
|
||||
<ItemLink
|
||||
component={Link}
|
||||
to={to}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</ItemLink>
|
||||
);
|
||||
}
|
||||
export const SidebarItem = ({ children, to, ...props }: SidebarItemProps) => {
|
||||
return (
|
||||
<StyledItem
|
||||
tabIndex={0}
|
||||
<Button
|
||||
className={clsx({
|
||||
[styles.disabled]: props.disabled,
|
||||
[styles.link]: true,
|
||||
})}
|
||||
component={Link}
|
||||
to={to}
|
||||
variant="subtle"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</StyledItem>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
SidebarItem.Link = ItemLink;
|
||||
export const MemoizedSidebarItem = memo(SidebarItem);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
.list {
|
||||
padding: var(--theme-spacing-sm) var(--theme-spacing-md);
|
||||
}
|
||||
|
||||
.row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: var(--theme-spacing-xs);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
@ -1,200 +1,150 @@
|
|||
import { Box, Flex, Group } from '@mantine/core';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { closeAllModals, openModal } from '@mantine/modals';
|
||||
import { MouseEvent, useCallback, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
RiAddBoxFill,
|
||||
RiAddCircleFill,
|
||||
RiArrowDownSLine,
|
||||
RiArrowUpSLine,
|
||||
RiPlayFill,
|
||||
RiShuffleFill,
|
||||
} from 'react-icons/ri';
|
||||
import { generatePath } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||
import { FixedSizeList, ListChildComponentProps } from 'react-window';
|
||||
|
||||
import { Button, Text } from '/@/renderer/components';
|
||||
import { openContextMenu } from '/@/renderer/features/context-menu';
|
||||
import { PLAYLIST_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
|
||||
import styles from './sidebar-playlist-list.module.css';
|
||||
|
||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
import { usePlaylistList } from '/@/renderer/features/playlists';
|
||||
import { useHideScrollbar } from '/@/renderer/hooks';
|
||||
import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists';
|
||||
import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { useCurrentServer, useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
|
||||
import { LibraryItem, Playlist, PlaylistListSort, SortOrder } from '/@/shared/types/domain-types';
|
||||
import { useCurrentServer } from '/@/renderer/store';
|
||||
import { Accordion } from '/@/shared/components/accordion/accordion';
|
||||
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
|
||||
import { ButtonProps } from '/@/shared/components/button/button';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import {
|
||||
LibraryItem,
|
||||
Playlist,
|
||||
PlaylistListSort,
|
||||
ServerType,
|
||||
SortOrder,
|
||||
} from '/@/shared/types/domain-types';
|
||||
import { Play } from '/@/shared/types/types';
|
||||
|
||||
const PlaylistRow = ({ data, index, style }: ListChildComponentProps) => {
|
||||
const { t } = useTranslation();
|
||||
interface PlaylistRowButtonProps extends Omit<ButtonProps, 'onPlay'> {
|
||||
name: string;
|
||||
onPlay: (id: string, playType: Play.LAST | Play.NEXT | Play.NOW | Play.SHUFFLE) => void;
|
||||
to: string;
|
||||
}
|
||||
|
||||
if (Array.isArray(data?.items[index])) {
|
||||
const [collapse, setCollapse] = data.items[index];
|
||||
const PlaylistRowButton = ({ name, onPlay, to, ...props }: PlaylistRowButtonProps) => {
|
||||
const url = generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: to });
|
||||
|
||||
return (
|
||||
<div style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}>
|
||||
<Box
|
||||
fw="600"
|
||||
sx={{ fontSize: '1.2rem' }}
|
||||
>
|
||||
<Group>
|
||||
<Text>{t('page.sidebar.shared', { postProcess: 'titleCase' })}</Text>
|
||||
<Button
|
||||
compact
|
||||
onClick={() => setCollapse()}
|
||||
tooltip={{
|
||||
label: t(collapse ? 'common.expand' : 'common.collapse', {
|
||||
postProcess: 'titleCase',
|
||||
}),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
{collapse ? (
|
||||
<RiArrowUpSLine size={20} />
|
||||
) : (
|
||||
<RiArrowDownSLine size={20} />
|
||||
)}
|
||||
</Button>
|
||||
</Group>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const path = data?.items[index].id
|
||||
? generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: data.items[index].id })
|
||||
: undefined;
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (!data?.items?.[index].id) return;
|
||||
|
||||
openContextMenu({
|
||||
data: [data?.items?.[index]],
|
||||
dataNodes: undefined,
|
||||
menuItems: PLAYLIST_CONTEXT_MENU_ITEMS,
|
||||
type: LibraryItem.PLAYLIST,
|
||||
xPos: e.clientX + 15,
|
||||
yPos: e.clientY + 5,
|
||||
});
|
||||
}}
|
||||
style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}
|
||||
className={styles.row}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<Group
|
||||
className="sidebar-playlist-item"
|
||||
noWrap
|
||||
pos="relative"
|
||||
position="apart"
|
||||
sx={{
|
||||
'&:hover': {
|
||||
'.sidebar-playlist-controls': {
|
||||
display: 'flex',
|
||||
},
|
||||
'.sidebar-playlist-name': {
|
||||
color: 'var(--sidebar-fg-hover) !important',
|
||||
},
|
||||
},
|
||||
}}
|
||||
<SidebarItem
|
||||
to={url}
|
||||
variant="subtle"
|
||||
{...props}
|
||||
>
|
||||
<Text
|
||||
className="sidebar-playlist-name"
|
||||
component={Link}
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
sx={{
|
||||
color: 'var(--sidebar-fg) !important',
|
||||
cursor: 'default',
|
||||
width: '100%',
|
||||
}}
|
||||
to={path}
|
||||
>
|
||||
{data?.items[index].name}
|
||||
</Text>
|
||||
<Group
|
||||
className="sidebar-playlist-controls"
|
||||
display="none"
|
||||
noWrap
|
||||
pos="absolute"
|
||||
right="0"
|
||||
spacing="sm"
|
||||
>
|
||||
<Button
|
||||
compact
|
||||
onClick={() => {
|
||||
if (!data?.items?.[index].id) return;
|
||||
data.handlePlay(data?.items[index].id, Play.NOW);
|
||||
}}
|
||||
size="md"
|
||||
tooltip={{
|
||||
label: t('player.play', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiPlayFill />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
onClick={() => {
|
||||
if (!data?.items?.[index].id) return;
|
||||
data.handlePlay(data?.items[index].id, Play.SHUFFLE);
|
||||
}}
|
||||
size="md"
|
||||
tooltip={{
|
||||
label: t('player.shuffle', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiShuffleFill />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
onClick={() => {
|
||||
if (!data?.items?.[index].id) return;
|
||||
data.handlePlay(data?.items[index].id, Play.LAST);
|
||||
}}
|
||||
size="md"
|
||||
tooltip={{
|
||||
label: t('player.addLast', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiAddBoxFill />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
onClick={() => {
|
||||
if (!data?.items?.[index].id) return;
|
||||
data.handlePlay(data?.items[index].id, Play.NEXT);
|
||||
}}
|
||||
size="md"
|
||||
tooltip={{
|
||||
label: t('player.addNext', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
<RiAddCircleFill />
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
{name}
|
||||
</SidebarItem>
|
||||
{isHovered && (
|
||||
<RowControls
|
||||
id={to}
|
||||
onPlay={onPlay}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RowControls = ({
|
||||
id,
|
||||
onPlay,
|
||||
}: {
|
||||
id: string;
|
||||
onPlay: (id: string, playType: Play) => void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Group
|
||||
className={styles.controls}
|
||||
gap="xs"
|
||||
wrap="nowrap"
|
||||
>
|
||||
<ActionIcon
|
||||
icon="mediaPlay"
|
||||
iconProps={{
|
||||
size: 'md',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!id) return;
|
||||
onPlay(id, Play.NOW);
|
||||
}}
|
||||
size="xs"
|
||||
tooltip={{
|
||||
label: t('player.play', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="mediaShuffle"
|
||||
iconProps={{
|
||||
size: 'md',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!id) return;
|
||||
onPlay(id, Play.SHUFFLE);
|
||||
}}
|
||||
size="xs"
|
||||
tooltip={{
|
||||
label: t('player.shuffle', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="mediaPlayLast"
|
||||
iconProps={{
|
||||
size: 'md',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!id) return;
|
||||
onPlay(id, Play.LAST);
|
||||
}}
|
||||
size="xs"
|
||||
tooltip={{
|
||||
label: t('player.addLast', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="mediaPlayNext"
|
||||
iconProps={{
|
||||
size: 'md',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!id) return;
|
||||
onPlay(id, Play.NEXT);
|
||||
}}
|
||||
size="xs"
|
||||
tooltip={{
|
||||
label: t('player.addNext', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
export const SidebarPlaylistList = () => {
|
||||
const { hideScrollbarElementProps, isScrollbarHidden } = useHideScrollbar(0);
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
const { sidebarCollapseShared } = useGeneralSettings();
|
||||
const { toggleSidebarCollapseShare } = useSettingsStoreActions();
|
||||
const { t } = useTranslation();
|
||||
const server = useCurrentServer();
|
||||
|
||||
const playlistsQuery = usePlaylistList({
|
||||
|
|
@ -206,13 +156,6 @@ export const SidebarPlaylistList = () => {
|
|||
serverId: server?.id,
|
||||
});
|
||||
|
||||
const [rect, setRect] = useState({
|
||||
height: 0,
|
||||
width: 0,
|
||||
});
|
||||
|
||||
const [debounced] = useDebouncedValue(rect, 25);
|
||||
|
||||
const handlePlayPlaylist = useCallback(
|
||||
(id: string, playType: Play) => {
|
||||
handlePlayQueueAdd?.({
|
||||
|
|
@ -236,56 +179,164 @@ export const SidebarPlaylistList = () => {
|
|||
}
|
||||
|
||||
const owned: Array<[boolean, () => void] | Playlist> = [];
|
||||
|
||||
for (const playlist of data.items) {
|
||||
owned.push(playlist);
|
||||
}
|
||||
|
||||
return { ...base, items: owned };
|
||||
}, [data?.items, handlePlayPlaylist, server?.type, server?.username]);
|
||||
|
||||
const handleCreatePlaylistModal = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
openModal({
|
||||
children: <CreatePlaylistForm onCancel={() => closeAllModals()} />,
|
||||
size: server?.type === ServerType?.NAVIDROME ? 'lg' : 'sm',
|
||||
title: t('form.createPlaylist.title', { postProcess: 'titleCase' }),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Accordion.Item value="playlists">
|
||||
<Accordion.Control
|
||||
component="div"
|
||||
role="button"
|
||||
style={{ userSelect: 'none' }}
|
||||
>
|
||||
<Group
|
||||
justify="space-between"
|
||||
pr="var(--theme-spacing-md)"
|
||||
>
|
||||
<Text fw={600}>
|
||||
{t('page.sidebar.playlists', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
</Text>
|
||||
<Group gap="xs">
|
||||
<ActionIcon
|
||||
icon="add"
|
||||
iconProps={{
|
||||
size: 'lg',
|
||||
}}
|
||||
onClick={handleCreatePlaylistModal}
|
||||
size="xs"
|
||||
tooltip={{
|
||||
label: t('action.createPlaylist', {
|
||||
postProcess: 'sentenceCase',
|
||||
}),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
component={Link}
|
||||
icon="list"
|
||||
iconProps={{
|
||||
size: 'lg',
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
size="xs"
|
||||
to={AppRoute.PLAYLISTS}
|
||||
tooltip={{
|
||||
label: t('action.viewPlaylists', {
|
||||
postProcess: 'sentenceCase',
|
||||
}),
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
</Group>
|
||||
</Group>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{memoizedItemData?.items?.map((item, index) => (
|
||||
<PlaylistRowButton
|
||||
key={index}
|
||||
name={item.name}
|
||||
onPlay={handlePlayPlaylist}
|
||||
to={item.id}
|
||||
/>
|
||||
))}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export const SidebarSharedPlaylistList = () => {
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
const { t } = useTranslation();
|
||||
const server = useCurrentServer();
|
||||
|
||||
const playlistsQuery = usePlaylistList({
|
||||
query: {
|
||||
sortBy: PlaylistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
startIndex: 0,
|
||||
},
|
||||
serverId: server?.id,
|
||||
});
|
||||
|
||||
const handlePlayPlaylist = useCallback(
|
||||
(id: string, playType: Play) => {
|
||||
handlePlayQueueAdd?.({
|
||||
byItemType: {
|
||||
id: [id],
|
||||
type: LibraryItem.PLAYLIST,
|
||||
},
|
||||
playType,
|
||||
});
|
||||
},
|
||||
[handlePlayQueueAdd],
|
||||
);
|
||||
|
||||
const data = playlistsQuery.data;
|
||||
|
||||
const memoizedItemData = useMemo(() => {
|
||||
const base = { handlePlay: handlePlayPlaylist };
|
||||
|
||||
if (!server?.type || !server?.username || !data?.items) {
|
||||
return { ...base, items: data?.items };
|
||||
}
|
||||
|
||||
const shared: Playlist[] = [];
|
||||
|
||||
for (const playlist of data.items) {
|
||||
if (playlist.owner && playlist.owner !== server.username) {
|
||||
console.log(playlist.owner, server.username);
|
||||
shared.push(playlist);
|
||||
} else {
|
||||
owned.push(playlist);
|
||||
}
|
||||
}
|
||||
|
||||
if (shared.length > 0) {
|
||||
owned.push([sidebarCollapseShared, toggleSidebarCollapseShare]);
|
||||
}
|
||||
return { ...base, items: shared };
|
||||
}, [data?.items, handlePlayPlaylist, server?.type, server?.username]);
|
||||
|
||||
const final = sidebarCollapseShared ? owned : owned.concat(shared);
|
||||
|
||||
return { ...base, items: final };
|
||||
}, [
|
||||
data?.items,
|
||||
handlePlayPlaylist,
|
||||
server?.type,
|
||||
server?.username,
|
||||
sidebarCollapseShared,
|
||||
toggleSidebarCollapseShare,
|
||||
]);
|
||||
if (memoizedItemData?.items?.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex
|
||||
h="100%"
|
||||
{...hideScrollbarElementProps}
|
||||
>
|
||||
<AutoSizer onResize={(e) => setRect(e as { height: number; width: number })}>
|
||||
{() => (
|
||||
<FixedSizeList
|
||||
className={
|
||||
isScrollbarHidden
|
||||
? 'hide-scrollbar overlay-scrollbar'
|
||||
: 'overlay-scrollbar'
|
||||
}
|
||||
height={debounced.height}
|
||||
itemCount={memoizedItemData?.items?.length || 0}
|
||||
itemData={memoizedItemData}
|
||||
itemSize={25}
|
||||
overscanCount={20}
|
||||
width={debounced.width}
|
||||
>
|
||||
{PlaylistRow}
|
||||
</FixedSizeList>
|
||||
)}
|
||||
</AutoSizer>
|
||||
</Flex>
|
||||
<Accordion.Item value="shared-playlists">
|
||||
<Accordion.Control>
|
||||
<Text
|
||||
fw={600}
|
||||
variant="secondary"
|
||||
>
|
||||
{t('page.sidebar.shared', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
</Text>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{memoizedItemData?.items?.map((item, index) => (
|
||||
<PlaylistRowButton
|
||||
key={index}
|
||||
name={item.name}
|
||||
onPlay={handlePlayPlaylist}
|
||||
to={item.id}
|
||||
/>
|
||||
))}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
68
src/renderer/features/sidebar/components/sidebar.module.css
Normal file
68
src/renderer/features/sidebar/components/sidebar.module.css
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--mantine-spacing-xs);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 90px);
|
||||
background: var(--theme-colors-background-alternate);
|
||||
}
|
||||
|
||||
.scroll-area {
|
||||
padding: 0 var(--theme-spacing-md) var(--theme-spacing-md) var(--theme-spacing-md);
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
height: var(--sidebar-image-height);
|
||||
cursor: pointer;
|
||||
animation: fade-in 0.2s ease-in-out;
|
||||
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: var(--theme-image-fit);
|
||||
background: var(--theme-colors-foreground-muted);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.accordion-root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.accordion-control {
|
||||
height: 2.5rem;
|
||||
border-radius: var(--theme-radius-md);
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
padding: 0;
|
||||
background: var(--theme-colors-background-alternate);
|
||||
}
|
||||
|
||||
.accordion-content:last-child {
|
||||
padding-bottom: var(--theme-spacing-md);
|
||||
}
|
||||
|
|
@ -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