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,5 +1,6 @@
import { Outlet } from 'react-router-dom';
import styled from 'styled-components';
import { Titlebar } from '/@/renderer/features/titlebar/components/titlebar';
const WindowsTitlebarContainer = styled.div`

View file

@ -1,20 +1,21 @@
import { lazy } from 'react';
import { HotkeyItem, useHotkeys } from '@mantine/hooks';
import isElectron from 'is-electron';
import { lazy } from 'react';
import { useNavigate } from 'react-router';
import styled from 'styled-components';
import {
useWindowSettings,
useSettingsStore,
useHotkeySettings,
useGeneralSettings,
useSettingsStoreActions,
} from '/@/renderer/store/settings.store';
import { Platform, PlaybackType } from '/@/renderer/types';
import { CommandPalette } from '/@/renderer/features/search/components/command-palette';
import { MainContent } from '/@/renderer/layouts/default-layout/main-content';
import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
import { HotkeyItem, useHotkeys } from '@mantine/hooks';
import { CommandPalette } from '/@/renderer/features/search/components/command-palette';
import { useCommandPalette } from '/@/renderer/store';
import {
useGeneralSettings,
useHotkeySettings,
useSettingsStore,
useSettingsStoreActions,
useWindowSettings,
} from '/@/renderer/store/settings.store';
import { Platform, PlaybackType } from '/@/renderer/types';
if (!isElectron()) {
useSettingsStore.getState().actions.setSettings({
@ -56,7 +57,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
const { opened, ...handlers } = useCommandPalette();
const { bindings } = useHotkeySettings();
const navigate = useNavigate();
const localSettings = isElectron() ? window.electron.localSettings : null;
const localSettings = isElectron() ? window.api.localSettings : null;
const settings = useGeneralSettings();
const { setSettings } = useSettingsStoreActions();

View file

@ -1,4 +1,5 @@
import { AnimatePresence } from 'framer-motion';
import { FullScreenPlayer } from '/@/renderer/features/player/components/full-screen-player';
import { useFullScreenPlayerStore } from '/@/renderer/store';

View file

@ -1,5 +1,6 @@
import { useRef } from 'react';
import styled from 'styled-components';
import { ResizeHandle } from '/@/renderer/features/shared';
import { CollapsedSidebar } from '/@/renderer/features/sidebar/components/collapsed-sidebar';
import { Sidebar } from '/@/renderer/features/sidebar/components/sidebar';
@ -24,13 +25,13 @@ export const LeftSidebar = ({ isResizing, startResizing }: LeftSidebarProps) =>
return (
<SidebarContainer id="sidebar">
<ResizeHandle
ref={sidebarRef}
$isResizing={isResizing}
$placement="right"
onMouseDown={(e) => {
e.preventDefault();
startResizing('left');
}}
ref={sidebarRef}
/>
{collapsed ? <CollapsedSidebar /> : <Sidebar />}
</SidebarContainer>

View file

@ -1,15 +1,16 @@
import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { throttle } from 'lodash';
import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Outlet, useLocation } from 'react-router';
import styled from 'styled-components';
import { Spinner } from '/@/renderer/components';
import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
import { AppRoute } from '/@/renderer/router/routes';
import { useAppStoreActions, useSidebarStore } from '/@/renderer/store';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
import { constrainSidebarWidth, constrainRightSidebarWidth } from '/@/renderer/utils';
import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
import { Spinner } from '/@/renderer/components';
import { constrainRightSidebarWidth, constrainSidebarWidth } from '/@/renderer/utils';
const SideDrawerQueue = lazy(() =>
import('/@/renderer/layouts/default-layout/side-drawer-queue').then((module) => ({
@ -41,9 +42,9 @@ const MainContentContainer = styled.div<{
export const MainContent = ({ shell }: { shell?: boolean }) => {
const location = useLocation();
const { collapsed, leftWidth, rightWidth, rightExpanded } = useSidebarStore();
const { collapsed, leftWidth, rightExpanded, rightWidth } = useSidebarStore();
const { setSideBar } = useAppStoreActions();
const { sideQueueType, showQueueDrawerButton } = useGeneralSettings();
const { showQueueDrawerButton, sideQueueType } = useGeneralSettings();
const [isResizing, setIsResizing] = useState(false);
const [isResizingRight, setIsResizingRight] = useState(false);
@ -114,8 +115,8 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
startResizing={startResizing}
/>
<RightSidebar
ref={rightSidebarRef}
isResizing={isResizingRight}
ref={rightSidebarRef}
startResizing={startResizing}
/>
</>

View file

@ -1,4 +1,5 @@
import styled from 'styled-components';
import { Playerbar } from '/@/renderer/features/player';
import { useGeneralSettings } from '/@/renderer/store/settings.store';

View file

@ -2,7 +2,8 @@ import { AnimatePresence, motion, Variants } from 'framer-motion';
import { forwardRef, Ref } from 'react';
import { useLocation } from 'react-router';
import styled from 'styled-components';
import { SidebarPlayQueue, DrawerPlayQueue } from '/@/renderer/features/now-playing';
import { DrawerPlayQueue, SidebarPlayQueue } from '/@/renderer/features/now-playing';
import { ResizeHandle } from '/@/renderer/features/shared';
import { AppRoute } from '/@/renderer/router/routes';
import { useGeneralSettings, useSidebarStore, useWindowSettings } from '/@/renderer/store';
@ -93,49 +94,49 @@ export const RightSidebar = forwardRef(
ref: Ref<HTMLDivElement>,
) => {
const { windowBarStyle } = useWindowSettings();
const { rightWidth, rightExpanded } = useSidebarStore();
const { rightExpanded, rightWidth } = useSidebarStore();
const { sideQueueType } = useGeneralSettings();
const location = useLocation();
const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
return (
<AnimatePresence
key="queue-sidebar"
presenceAffectsLayout
initial={false}
key="queue-sidebar"
mode="sync"
presenceAffectsLayout
>
{showSideQueue && (
<>
{sideQueueType === 'sideQueue' ? (
<RightSidebarContainer
key="queue-sidebar"
animate="open"
custom={rightWidth}
exit="closed"
id="sidebar-queue"
initial="closed"
key="queue-sidebar"
variants={queueSidebarVariants}
>
<ResizeHandle
ref={ref}
$isResizing={isResizingRight}
$placement="left"
onMouseDown={(e) => {
e.preventDefault();
startResizing('right');
}}
ref={ref}
/>
<SidebarPlayQueue />
</RightSidebarContainer>
) : (
<QueueDrawer
key="queue-drawer"
animate="open"
custom={windowBarStyle}
exit="closed"
id="drawer-queue"
initial="closed"
key="queue-drawer"
variants={queueDrawerVariants}
>
<DrawerPlayQueue />

View file

@ -4,6 +4,7 @@ import { useCallback } from 'react';
import { TbArrowBarLeft } from 'react-icons/tb';
import { useLocation } from 'react-router';
import styled from 'styled-components';
import { DrawerPlayQueue } from '/@/renderer/features/now-playing';
import { AppRoute } from '/@/renderer/router/routes';
import { useAppStore, useSidebarStore } from '/@/renderer/store';
@ -104,14 +105,14 @@ export const SideDrawerQueue = () => {
>
{isQueueDrawerButtonVisible && (
<QueueDrawerArea
key="queue-drawer-button"
animate="visible"
exit="hidden"
initial="hidden"
variants={queueDrawerButtonVariants}
whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }}
key="queue-drawer-button"
onMouseEnter={handleEnterDrawerButton}
onMouseLeave={handleLeaveDrawerButton}
variants={queueDrawerButtonVariants}
whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }}
>
<TbArrowBarLeft size={12} />
</QueueDrawerArea>
@ -119,11 +120,10 @@ export const SideDrawerQueue = () => {
{drawer && (
<QueueDrawer
key="queue-drawer"
animate="open"
exit="closed"
initial="closed"
variants={queueDrawerVariants}
key="queue-drawer"
onMouseLeave={() => {
// The drawer will close due to the delay when setting isReorderingQueue
setTimeout(() => {
@ -131,6 +131,7 @@ export const SideDrawerQueue = () => {
drawerHandler.close();
}, 50);
}}
variants={queueDrawerVariants}
>
<DrawerPlayQueue />
</QueueDrawer>

View file

@ -1,19 +1,21 @@
import { useCallback, useState } from 'react';
import isElectron from 'is-electron';
import { useCallback, useState } from 'react';
import { RiCheckboxBlankLine, RiCloseLine, RiSubtractLine } from 'react-icons/ri';
import styled from 'styled-components';
import { useCurrentStatus, useQueueStatus } from '/@/renderer/store';
import { useWindowSettings } from '/@/renderer/store/settings.store';
import { Platform, PlayerStatus } from '/@/renderer/types';
import appIcon from '../../../assets/icons/32x32.png';
import macCloseHover from './assets/close-mac-hover.png';
import macClose from './assets/close-mac.png';
import macMaxHover from './assets/max-mac-hover.png';
import macMax from './assets/max-mac.png';
import macMinHover from './assets/min-mac-hover.png';
import macMin from './assets/min-mac.png';
import appIcon from '../../../assets/icons/32x32.png';
const localSettings = isElectron() ? window.electron.localSettings : null;
import { useCurrentStatus, useQueueStatus } from '/@/renderer/store';
import { useWindowSettings } from '/@/renderer/store/settings.store';
import { Platform, PlayerStatus } from '/@/renderer/types';
const localSettings = isElectron() ? window.api.localSettings : null;
const WindowsContainer = styled.div`
display: flex;
@ -61,7 +63,7 @@ const PlayerStatusContainer = styled.div`
white-space: nowrap;
`;
const browser = isElectron() ? window.electron.browser : null;
const browser = isElectron() ? window.api.browser : null;
const close = () => browser?.exit();
const minimize = () => browser?.minimize();
const maximize = () => browser?.maximize();
@ -92,21 +94,21 @@ const WindowsControls = ({ controls, title }: WindowBarControlsProps) => {
</PlayerStatusContainer>
<WindowsButtonGroup>
<WindowsButton
role="button"
onClick={handleMinimize}
role="button"
>
<RiSubtractLine size={19} />
</WindowsButton>
<WindowsButton
role="button"
onClick={handleMaximize}
role="button"
>
<RiCheckboxBlankLine size={13} />
</WindowsButton>
<WindowsButton
$exit
role="button"
onClick={handleClose}
role="button"
>
<RiCloseLine size={19} />
</WindowsButton>