restructure files onto electron-vite boilerplate

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

View file

@ -1,6 +1,8 @@
import type { ReactNode, Ref } from 'react';
import { forwardRef } from 'react';
import { motion } from 'framer-motion';
import { forwardRef } from 'react';
import styles from './animated-page.module.scss';
interface AnimatedPageProps {
@ -17,9 +19,9 @@ export const AnimatedPage = forwardRef(
({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => {
return (
<motion.main
ref={ref}
// animate="animate"
className={styles.animatedPage}
ref={ref}
// exit="exit"
// initial="initial"
// transition={{ duration: 0.3, ease: 'easeIn' }}

View file

@ -1,5 +1,6 @@
import { PaperProps } from '@mantine/core';
import styled from 'styled-components';
import { Paper } from '/@/renderer/components';
const StyledFilterBar = styled(Paper)`

View file

@ -2,7 +2,9 @@ import { Center } from '@mantine/core';
import clsx from 'clsx';
import { memo } from 'react';
import { RiAlbumFill, RiPlayListFill, RiUserVoiceFill } from 'react-icons/ri';
import styles from './item-image-placeholder.module.scss';
import styles from './item-image-placeholder.module.css';
import { LibraryItem } from '/@/renderer/api/types';
interface ItemImagePlaceholderProps {
@ -13,10 +15,10 @@ const Image = memo(function Image(props: ItemImagePlaceholderProps) {
switch (props.itemType) {
case LibraryItem.ALBUM:
return <RiAlbumFill />;
case LibraryItem.ARTIST:
return <RiUserVoiceFill />;
case LibraryItem.ALBUM_ARTIST:
return <RiUserVoiceFill />;
case LibraryItem.ARTIST:
return <RiUserVoiceFill />;
case LibraryItem.PLAYLIST:
return <RiPlayListFill />;
default:

View file

@ -1,5 +1,5 @@
interface JsonPreviewProps {
value: string | Record<string, any>;
value: Record<string, any> | string;
}
export const JsonPreview = ({ value }: JsonPreviewProps) => {

View file

@ -1,8 +1,9 @@
import { ReactNode } from 'react';
import { Box } from '@mantine/core';
import { ReactNode } from 'react';
import styled from 'styled-components';
import { Paper, PaperProps, SpinnerIcon, TextTitle } from '/@/renderer/components';
import { PlayButton as PlayBtn } from '/@/renderer/features/shared/components/play-button';
import styled from 'styled-components';
interface LibraryHeaderBarProps {
children: ReactNode;
@ -47,8 +48,8 @@ const PlayButton = ({ onClick }: PlayButtonProps) => {
<Box>
<PlayBtn
h="45px"
w="45px"
onClick={onClick}
w="45px"
/>
</Box>
);

View file

@ -1,11 +1,13 @@
import { forwardRef, ReactNode, Ref, useCallback, useState } from 'react';
import { Center, Group } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { AutoTextSize } from 'auto-text-size';
import clsx from 'clsx';
import { forwardRef, ReactNode, Ref, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import styles from './library-header.module.scss';
import styles from './library-header.module.css';
import { LibraryItem } from '/@/renderer/api/types';
import { Text } from '/@/renderer/components';
import { ItemImagePlaceholder } from '/@/renderer/features/shared/components/item-image-placeholder';
@ -15,8 +17,8 @@ interface LibraryHeaderProps {
background: string;
blur?: number;
children?: ReactNode;
imagePlaceholderUrl?: string | null;
imageUrl?: string | null;
imagePlaceholderUrl?: null | string;
imageUrl?: null | string;
item: { route: string; type: LibraryItem };
title: string;
}
@ -24,13 +26,13 @@ interface LibraryHeaderProps {
export const LibraryHeader = forwardRef(
(
{
imageUrl,
imagePlaceholderUrl,
background,
blur,
title,
item,
children,
imagePlaceholderUrl,
imageUrl,
item,
title,
}: LibraryHeaderProps,
ref: Ref<HTMLDivElement>,
) => {
@ -46,10 +48,10 @@ export const LibraryHeader = forwardRef(
switch (item.type) {
case LibraryItem.ALBUM:
return t('entity.album', { count: 1 });
case LibraryItem.ARTIST:
return t('entity.artist', { count: 1 });
case LibraryItem.ALBUM_ARTIST:
return t('entity.albumArtist', { count: 1 });
case LibraryItem.ARTIST:
return t('entity.artist', { count: 1 });
case LibraryItem.PLAYLIST:
return t('entity.playlist', { count: 1 });
case LibraryItem.SONG:
@ -66,12 +68,12 @@ export const LibraryHeader = forwardRef(
openModal({
children: (
<Center
onClick={() => closeAllModals()}
style={{
cursor: 'pointer',
height: 'calc(100vh - 80px)',
width: '100%',
}}
onClick={() => closeAllModals()}
>
<img
alt="cover"
@ -90,8 +92,8 @@ export const LibraryHeader = forwardRef(
return (
<div
ref={ref}
className={styles.libraryHeader}
ref={ref}
>
<div
className={styles.background}
@ -104,22 +106,22 @@ export const LibraryHeader = forwardRef(
/>
<div
className={styles.imageSection}
onClick={() => openImage()}
onKeyDown={(event) =>
[' ', 'Enter', 'Spacebar'].includes(event.key) && openImage()
}
role="button"
style={{ cursor: 'pointer' }}
tabIndex={0}
onClick={() => openImage()}
onKeyDown={(event) =>
['Spacebar', ' ', 'Enter'].includes(event.key) && openImage()
}
>
{imageUrl && !isImageError ? (
<img
alt="cover"
className={styles.image}
onError={onImageError}
placeholder={imagePlaceholderUrl || 'var(--placeholder-bg)'}
src={imageUrl}
style={{ height: '' }}
onError={onImageError}
/>
) : (
<ItemImagePlaceholder itemType={item.type} />

View file

@ -1,6 +1,7 @@
import { ButtonProps } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { RiSortAsc, RiSortDesc } from 'react-icons/ri';
import { SortOrder } from '/@/renderer/api/types';
import { Button, Tooltip } from '/@/renderer/components';
@ -10,7 +11,7 @@ interface OrderToggleButtonProps {
sortOrder: SortOrder;
}
export const OrderToggleButton = ({ sortOrder, onToggle, buttonProps }: OrderToggleButtonProps) => {
export const OrderToggleButton = ({ buttonProps, onToggle, sortOrder }: OrderToggleButtonProps) => {
const { t } = useTranslation();
return (
<Tooltip
@ -23,9 +24,9 @@ export const OrderToggleButton = ({ sortOrder, onToggle, buttonProps }: OrderTog
<Button
compact
fw="600"
onClick={onToggle}
size="md"
variant="subtle"
onClick={onToggle}
{...buttonProps}
>
<>

View file

@ -2,7 +2,7 @@ import styled from 'styled-components';
export const ResizeHandle = styled.div<{
$isResizing: boolean;
$placement: 'top' | 'left' | 'bottom' | 'right';
$placement: 'bottom' | 'left' | 'right' | 'top';
}>`
position: absolute;
top: ${(props) => props.$placement === 'top' && 0};

View file

@ -1,4 +1,5 @@
import { MutableRefObject, useCallback } from 'react';
import { LibraryItem } from '/@/renderer/api/types';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
@ -6,8 +7,8 @@ import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-
import { ServerListItem } from '/@/renderer/types';
interface HandleFavoriteProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
server: ServerListItem | null;
gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
server: null | ServerListItem;
}
export const useHandleFavorite = ({ gridRef, server }: HandleFavoriteProps) => {
@ -16,7 +17,7 @@ export const useHandleFavorite = ({ gridRef, server }: HandleFavoriteProps) => {
const handleFavorite = useCallback(
async (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => {
const { id, itemType, isFavorite } = options;
const { id, isFavorite, itemType } = options;
try {
if (isFavorite) {
await deleteFavoriteMutation.mutateAsync({

View file

@ -1,5 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import isElectron from 'is-electron';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
@ -11,10 +13,9 @@ import {
} from '/@/renderer/api/types';
import { MutationHookArgs } from '/@/renderer/lib/react-query';
import { getServerById, useSetAlbumListItemDataById, useSetQueueFavorite } from '/@/renderer/store';
import isElectron from 'is-electron';
import { useFavoriteEvent } from '/@/renderer/store/event.store';
const remote = isElectron() ? window.electron.remote : null;
const remote = isElectron() ? window.api.remote : null;
export const useCreateFavorite = (args: MutationHookArgs) => {
const { options } = args || {};
@ -26,7 +27,7 @@ export const useCreateFavorite = (args: MutationHookArgs) => {
return useMutation<
FavoriteResponse,
AxiosError,
Omit<FavoriteArgs, 'server' | 'apiClientProps'>,
Omit<FavoriteArgs, 'apiClientProps' | 'server'>,
null
>({
mutationFn: (args) => {

View file

@ -1,5 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import isElectron from 'is-electron';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
@ -11,10 +13,9 @@ import {
} from '/@/renderer/api/types';
import { MutationHookArgs } from '/@/renderer/lib/react-query';
import { getServerById, useSetAlbumListItemDataById, useSetQueueFavorite } from '/@/renderer/store';
import isElectron from 'is-electron';
import { useFavoriteEvent } from '/@/renderer/store/event.store';
const remote = isElectron() ? window.electron.remote : null;
const remote = isElectron() ? window.api.remote : null;
export const useDeleteFavorite = (args: MutationHookArgs) => {
const { options } = args || {};
@ -26,7 +27,7 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
return useMutation<
FavoriteResponse,
AxiosError,
Omit<FavoriteArgs, 'server' | 'apiClientProps'>,
Omit<FavoriteArgs, 'apiClientProps' | 'server'>,
null
>({
mutationFn: (args) => {

View file

@ -1,23 +1,24 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import isElectron from 'is-electron';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
Album,
AlbumArtist,
AlbumArtistDetailResponse,
AlbumDetailResponse,
AnyLibraryItems,
LibraryItem,
SetRatingArgs,
RatingResponse,
AlbumDetailResponse,
AlbumArtistDetailResponse,
SetRatingArgs,
} from '/@/renderer/api/types';
import { MutationHookArgs } from '/@/renderer/lib/react-query';
import { getServerById, useSetAlbumListItemDataById, useSetQueueRating } from '/@/renderer/store';
import isElectron from 'is-electron';
import { useRatingEvent } from '/@/renderer/store/event.store';
const remote = isElectron() ? window.electron.remote : null;
const remote = isElectron() ? window.api.remote : null;
export const useSetRating = (args: MutationHookArgs) => {
const { options } = args || {};
@ -29,8 +30,8 @@ export const useSetRating = (args: MutationHookArgs) => {
return useMutation<
RatingResponse,
AxiosError,
Omit<SetRatingArgs, 'server' | 'apiClientProps'>,
{ previous: { items: AnyLibraryItems } | undefined }
Omit<SetRatingArgs, 'apiClientProps' | 'server'>,
{ previous: undefined | { items: AnyLibraryItems } }
>({
mutationFn: (args) => {
const server = getServerById(args.serverId);

View file

@ -1,9 +1,11 @@
import { useQuery } from '@tanstack/react-query';
import { MusicFolderListQuery } from '../../../api/types';
import { QueryHookArgs } from '../../../lib/react-query';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { getServerById } from '/@/renderer/store';
import { MusicFolderListQuery } from '../../../api/types';
import { QueryHookArgs } from '../../../lib/react-query';
export const useMusicFolders = (args: QueryHookArgs<MusicFolderListQuery>) => {
const { options, serverId } = args || {};