antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 02:13:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

restructure files onto electron-vite boilerplate

Browse source
This commit is contained in:
jeffvli 2025-05-18 14:03:18 -07:00
parent 91ce2cd8a1
commit 1cf587bc8f
457 changed files with 9927 additions and 11705 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/renderer/features/sidebar/components/action-bar.tsx
View file

@ -1,8 +1,9 @@
import { Grid, Group } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { RiSearchLine, RiMenuFill, RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
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 { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
import { useContainerQuery } from '/@/renderer/hooks';
@ -36,16 +37,16 @@ export const ActionBar = () => {
>
<Grid.Col span={6}>
<TextInput
readOnly
icon={<RiSearchLine />}
placeholder={t('common.search', { postProcess: 'titleCase' })}
size="md"
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}>
@ -69,18 +70,18 @@ export const ActionBar = () => {
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
onClick={() => navigate(-1)}
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(-1)}
>
<RiArrowLeftSLine size="1.5rem" />
</Button>
<Button
onClick={() => navigate(1)}
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(1)}
>
<RiArrowRightSLine size="1.5rem" />
</Button>
@ -95,10 +96,10 @@ export const ActionBar = () => {
w="100%"
>
<Button
onClick={open}
p="0.5rem"
size="md"
variant="default"
onClick={open}
>
<RiSearchLine size="1rem" />
</Button>
@ -117,18 +118,18 @@ export const ActionBar = () => {
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
onClick={() => navigate(-1)}
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(-1)}
>
<RiArrowLeftSLine size="1.5rem" />
</Button>
<Button
onClick={() => navigate(1)}
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(1)}
>
<RiArrowRightSLine size="1.5rem" />
</Button>

4
src/renderer/features/sidebar/components/collapsed-sidebar-button.tsx
View file

@ -1,5 +1,5 @@
import { forwardRef, ReactNode } from 'react';
import { createPolymorphicComponent, Flex } from '@mantine/core';
import { forwardRef, ReactNode } from 'react';
import styled from 'styled-components';
const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
@ -48,9 +48,9 @@ const _CollapsedSidebarButton = forwardRef<HTMLDivElement, CollapsedSidebarButto
({ children, ...props }: CollapsedSidebarButtonProps, ref) => {
return (
<Container
ref={ref}
align="center"
direction="column"
ref={ref}
{...props}
>
{children}

5
src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx
View file

@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
import { forwardRef, ReactNode } from 'react';
import { useMatch } from 'react-router';
import styled from 'styled-components';
import { Text } from '/@/renderer/components';
const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
@ -71,17 +72,17 @@ interface CollapsedSidebarItemProps {
}
const _CollapsedSidebarItem = forwardRef<HTMLDivElement, CollapsedSidebarItemProps>(
({ route, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
({ activeIcon, disabled, icon, label, route, ...props }: CollapsedSidebarItemProps, ref) => {
const match = useMatch(route || '/null');
const isMatch = Boolean(match);
return (
<Container
ref={ref}
$active={Boolean(match)}
$disabled={disabled}
align="center"
direction="column"
ref={ref}
{...props}
>
{isMatch ? <ActiveTabIndicator /> : null}

9
src/renderer/features/sidebar/components/collapsed-sidebar.tsx
View file

@ -1,10 +1,11 @@
import { useMemo } from 'react';
import { Group, UnstyledButton } from '@mantine/core';
import { motion } from 'framer-motion';
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 { CollapsedSidebarButton } from '/@/renderer/features/sidebar/components/collapsed-sidebar-button';
import { CollapsedSidebarItem } from '/@/renderer/features/sidebar/components/collapsed-sidebar-item';
@ -28,7 +29,7 @@ export const CollapsedSidebar = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const { windowBarStyle } = useWindowSettings();
const { sidebarItems, sidebarCollapsedNavigation } = useGeneralSettings();
const { sidebarCollapsedNavigation, sidebarItems } = useGeneralSettings();
const translatedSidebarItemMap = useMemo(
() => ({
@ -68,8 +69,8 @@ export const CollapsedSidebar = () => {
return (
<SidebarContainer $windowBarStyle={windowBarStyle}>
<ScrollArea
scrollHideDelay={0}
scrollbarSize={8}
scrollHideDelay={0}
>
{sidebarCollapsedNavigation && (
<Group
@ -108,7 +109,6 @@ export const CollapsedSidebar = () => {
</DropdownMenu>
{sidebarItemsWithRoute.map((item) => (
<CollapsedSidebarItem
key={item.id}
activeIcon={
<SidebarIcon
active
@ -123,6 +123,7 @@ export const CollapsedSidebar = () => {
size="25"
/>
}
key={item.id}
label={item.label}
route={item.route}
to={item.route}

33
src/renderer/features/sidebar/components/sidebar-icon.tsx
View file

@ -20,9 +20,10 @@ import {
RiUserVoiceFill,
RiUserVoiceLine,
} from 'react-icons/ri';
import { AppRoute } from '/@/renderer/router/routes';
import { generatePath } from 'react-router';
import { LibraryItem } from '/@/renderer/api/types';
import { AppRoute } from '/@/renderer/router/routes';
interface SidebarIconProps {
active?: boolean;
@ -35,36 +36,36 @@ export const SidebarIcon = ({ active, route, size }: SidebarIconProps) => {
case AppRoute.HOME:
if (active) return <RiHome6Fill size={size} />;
return <RiHome6Line size={size} />;
case AppRoute.LIBRARY_ALBUMS:
if (active) return <RiAlbumFill size={size} />;
return <RiAlbumLine size={size} />;
case AppRoute.LIBRARY_ALBUM_ARTISTS:
if (active) return <RiUserVoiceFill size={size} />;
return <RiUserVoiceLine size={size} />;
case AppRoute.LIBRARY_ALBUMS:
if (active) return <RiAlbumFill size={size} />;
return <RiAlbumLine size={size} />;
case AppRoute.LIBRARY_ARTISTS:
if (active) return <RiUserVoiceFill size={size} />;
return <RiUserVoiceLine size={size} />;
case AppRoute.PLAYLISTS:
if (active) return <RiPlayListFill size={size} />;
return <RiPlayListLine size={size} />;
case AppRoute.LIBRARY_SONGS:
if (active) return <RiMusic2Fill size={size} />;
return <RiMusic2Line size={size} />;
case AppRoute.LIBRARY_FOLDERS:
if (active) return <RiFolder3Fill size={size} />;
return <RiFolder3Line size={size} />;
case AppRoute.LIBRARY_GENRES:
if (active) return <RiFlag2Fill size={size} />;
return <RiFlag2Line size={size} />;
case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }):
if (active) return <RiSearchFill size={size} />;
return <RiSearchLine size={size} />;
case AppRoute.SETTINGS:
if (active) return <RiSettings2Fill size={size} />;
return <RiSettings2Line size={size} />;
case AppRoute.LIBRARY_SONGS:
if (active) return <RiMusic2Fill size={size} />;
return <RiMusic2Line size={size} />;
case AppRoute.NOW_PLAYING:
if (active) return <RiPlayFill size={size} />;
return <RiPlayLine size={size} />;
case AppRoute.PLAYLISTS:
if (active) return <RiPlayListFill size={size} />;
return <RiPlayListLine size={size} />;
case AppRoute.SETTINGS:
if (active) return <RiSettings2Fill size={size} />;
return <RiSettings2Line size={size} />;
case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }):
if (active) return <RiSearchFill size={size} />;
return <RiSearchLine size={size} />;
default:
return <RiHome6Line size={size} />;
}

5
src/renderer/features/sidebar/components/sidebar-item.tsx
View file

@ -1,6 +1,7 @@
import type { ReactNode } from 'react';
import { createPolymorphicComponent, Flex, FlexProps } from '@mantine/core';
import type { LinkProps } from 'react-router-dom';
import { createPolymorphicComponent, Flex, FlexProps } from '@mantine/core';
import { Link } from 'react-router-dom';
import styled, { css } from 'styled-components';
@ -46,7 +47,7 @@ const _ItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
const ItemLink = createPolymorphicComponent<'a', ListItemProps>(_ItemLink);
export const SidebarItem = ({ to, children, ...props }: ListItemProps) => {
export const SidebarItem = ({ children, to, ...props }: ListItemProps) => {
if (to) {
return (
<ItemLink

57
src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
View file

@ -1,6 +1,6 @@
import { useCallback, useMemo, useState } from 'react';
import { Box, Flex, Group } from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
RiAddBoxFill,
@ -11,20 +11,21 @@ import {
} from 'react-icons/ri';
import { generatePath } from 'react-router';
import { Link } from 'react-router-dom';
import { LibraryItem, Playlist, PlaylistListSort, SortOrder } from '/@/renderer/api/types';
import { Button, Text } from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { usePlaylistList } from '/@/renderer/features/playlists';
import { AppRoute } from '/@/renderer/router/routes';
import { Play } from '/@/renderer/types';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeList, ListChildComponentProps } from 'react-window';
import { useHideScrollbar } from '/@/renderer/hooks';
import { useCurrentServer, useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
import { LibraryItem, Playlist, PlaylistListSort, SortOrder } from '/@/renderer/api/types';
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 { usePlayQueueAdd } from '/@/renderer/features/player';
import { usePlaylistList } from '/@/renderer/features/playlists';
import { useHideScrollbar } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
import { Play } from '/@/renderer/types';
const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
const PlaylistRow = ({ data, index, style }: ListChildComponentProps) => {
const { t } = useTranslation();
if (Array.isArray(data?.items[index])) {
@ -40,6 +41,7 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
<Text>{t('page.sidebar.shared', { postProcess: 'titleCase' })}</Text>
<Button
compact
onClick={() => setCollapse()}
tooltip={{
label: t(collapse ? 'common.expand' : 'common.collapse', {
postProcess: 'titleCase',
@ -47,7 +49,6 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
openDelay: 500,
}}
variant="default"
onClick={() => setCollapse()}
>
{collapse ? (
<RiArrowUpSLine size={20} />
@ -67,7 +68,6 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
return (
<div
style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();
@ -83,10 +83,11 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
yPos: e.clientY + 5,
});
}}
style={{ margin: '0.5rem 0', padding: '0 1.5rem', ...style }}
>
<Group
noWrap
className="sidebar-playlist-item"
noWrap
pos="relative"
position="apart"
sx={{
@ -115,55 +116,55 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
{data?.items[index].name}
</Text>
<Group
noWrap
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"
onClick={() => {
if (!data?.items?.[index].id) return;
data.handlePlay(data?.items[index].id, Play.NOW);
}}
>
<RiPlayFill />
</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"
onClick={() => {
if (!data?.items?.[index].id) return;
data.handlePlay(data?.items[index].id, Play.LAST);
}}
>
<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"
onClick={() => {
if (!data?.items?.[index].id) return;
data.handlePlay(data?.items[index].id, Play.NEXT);
}}
>
<RiAddCircleFill />
</Button>
@ -174,7 +175,7 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
};
export const SidebarPlaylistList = () => {
const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
const { hideScrollbarElementProps, isScrollbarHidden } = useHideScrollbar(0);
const handlePlayQueueAdd = usePlayQueueAdd();
const { sidebarCollapseShared } = useGeneralSettings();
const { toggleSidebarCollapseShare } = useSettingsStoreActions();
@ -218,7 +219,7 @@ export const SidebarPlaylistList = () => {
return { ...base, items: data?.items };
}
const owned: Array<Playlist | [boolean, () => void]> = [];
const owned: Array<[boolean, () => void] | Playlist> = [];
const shared: Playlist[] = [];
for (const playlist of data.items) {

22
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -1,16 +1,18 @@
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 { MouseEvent, 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 {
SidebarItemType,
useGeneralSettings,
useWindowSettings,
} from '../../../store/settings.store';
import { ServerType } from '/@/renderer/api/types';
import { Button, MotionStack, Tooltip } from '/@/renderer/components';
import { CreatePlaylistForm } from '/@/renderer/features/playlists';
@ -137,8 +139,8 @@ export const Sidebar = () => {
return (
<SidebarContainer
ref={cq.ref}
$windowBarStyle={windowBarStyle}
ref={cq.ref}
>
<ActionBar />
<Stack
@ -193,6 +195,7 @@ export const Sidebar = () => {
<Group spacing="sm">
<Button
compact
onClick={handleCreatePlaylistModal}
size="md"
tooltip={{
label: t('action.createPlaylist', {
@ -201,13 +204,13 @@ export const Sidebar = () => {
openDelay: 500,
}}
variant="default"
onClick={handleCreatePlaylistModal}
>
<RiAddFill size="1em" />
</Button>
<Button
compact
component={Link}
onClick={(e) => e.stopPropagation()}
size="md"
to={AppRoute.PLAYLISTS}
tooltip={{
@ -217,7 +220,6 @@ export const Sidebar = () => {
openDelay: 500,
}}
variant="default"
onClick={(e) => e.stopPropagation()}
>
<RiListUnordered size="1em" />
</Button>
@ -233,14 +235,14 @@ export const Sidebar = () => {
>
{showImage && (
<ImageContainer
key="sidebar-image"
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' }}
onClick={expandFullScreenPlayer}
>
<Tooltip
label={t('player.toggleFullscreenPlayer', {
@ -266,6 +268,10 @@ export const Sidebar = () => {
</Tooltip>
<Button
compact
onClick={(e) => {
e.stopPropagation();
setSideBar({ image: false });
}}
opacity={0.8}
radius={100}
size="md"
@ -275,10 +281,6 @@ export const Sidebar = () => {
openDelay: 500,
}}
variant="default"
onClick={(e) => {
e.stopPropagation();
setSideBar({ image: false });
}}
>
<RiArrowDownSLine
color="white"