restructure files onto electron-vite boilerplate

src/renderer/features/now-playing/components/drawer-play-queue.tsx

@@ -1,12 +1,15 @@
-import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { Box, Flex } from '@mantine/core';
+import { useRef } from 'react';
+
 import { PlayQueueListControls } from './play-queue-list-controls';
+
 import { Song } from '/@/renderer/api/types';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 
 export const DrawerPlayQueue = () => {
-    const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
+    const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
 
     return (
         <Flex

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -1,43 +1,46 @@
-import type { MutableRefObject } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import type { MutableRefObject } from 'react';
+
 import { Group } from '@mantine/core';
-import { Button, Popover } from '/@/renderer/components';
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 import {
     RiArrowDownLine,
     RiArrowGoForwardLine,
     RiArrowUpLine,
-    RiShuffleLine,
     RiDeleteBinLine,
-    RiListSettingsLine,
     RiEraserLine,
+    RiListSettingsLine,
+    RiShuffleLine,
 } from 'react-icons/ri';
-import { Song } from '/@/renderer/api/types';
-import { usePlayerControls, useQueueControls } from '/@/renderer/store';
-import { PlaybackType, TableType } from '/@/renderer/types';
-import { usePlaybackType } from '/@/renderer/store/settings.store';
+
 import { usePlayerStore, useSetCurrentTime } from '../../../store/player.store';
+
+import { Song } from '/@/renderer/api/types';
+import { Button, Popover } from '/@/renderer/components';
 import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
 import { updateSong } from '/@/renderer/features/player/update-remote-song';
+import { usePlayerControls, useQueueControls } from '/@/renderer/store';
+import { usePlaybackType } from '/@/renderer/store/settings.store';
+import { PlaybackType, TableType } from '/@/renderer/types';
 import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
 
-const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
+const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 
 interface PlayQueueListOptionsProps {
-    tableRef: MutableRefObject<{ grid: AgGridReactType<Song> } | null>;
+    tableRef: MutableRefObject<null | { grid: AgGridReactType<Song> }>;
     type: TableType;
 }
 
-export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsProps) => {
+export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsProps) => {
     const { t } = useTranslation();
     const {
         clearQueue,
         moveToBottomOfQueue,
         moveToNextOfQueue,
         moveToTopOfQueue,
-        shuffleQueue,
         removeFromQueue,
+        shuffleQueue,
     } = useQueueControls();
 
     const { pause } = usePlayerControls();
@@ -136,57 +139,57 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
             <Group spacing="sm">
                 <Button
                     compact
+                    onClick={handleShuffleQueue}
                     size="md"
                     tooltip={{ label: t('player.shuffle', { postProcess: 'sentenceCase' }) }}
                     variant="default"
-                    onClick={handleShuffleQueue}
                 >
                     <RiShuffleLine size="1.1rem" />
                 </Button>
                 <Button
                     compact
+                    onClick={handleMoveToNext}
                     size="md"
                     tooltip={{ label: t('action.moveToNext', { postProcess: 'sentenceCase' }) }}
                     variant="default"
-                    onClick={handleMoveToNext}
                 >
                     <RiArrowGoForwardLine size="1.1rem" />
                 </Button>
                 <Button
                     compact
+                    onClick={handleMoveToBottom}
                     size="md"
                     tooltip={{ label: t('action.moveToBottom', { postProcess: 'sentenceCase' }) }}
                     variant="default"
-                    onClick={handleMoveToBottom}
                 >
                     <RiArrowDownLine size="1.1rem" />
                 </Button>
                 <Button
                     compact
+                    onClick={handleMoveToTop}
                     size="md"
                     tooltip={{ label: t('action.moveToTop', { postProcess: 'sentenceCase' }) }}
                     variant="default"
-                    onClick={handleMoveToTop}
                 >
                     <RiArrowUpLine size="1.1rem" />
                 </Button>
                 <Button
                     compact
+                    onClick={handleRemoveSelected}
                     size="md"
                     tooltip={{
                         label: t('action.removeFromQueue', { postProcess: 'sentenceCase' }),
                     }}
                     variant="default"
-                    onClick={handleRemoveSelected}
                 >
                     <RiEraserLine size="1.1rem" />
                 </Button>
                 <Button
                     compact
+                    onClick={handleClearQueue}
                     size="md"
                     tooltip={{ label: t('action.clearQueue', { postProcess: 'sentenceCase' }) }}
                     variant="default"
-                    onClick={handleClearQueue}
                 >
                     <RiDeleteBinLine size="1.1rem" />
                 </Button>

src/renderer/features/now-playing/components/play-queue.tsx

@@ -1,5 +1,3 @@
-import type { Ref } from 'react';
-import { useState, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import type {
     CellDoubleClickedEvent,
     RowClassRules,
@@ -7,7 +5,24 @@ import type {
     RowNode,
 } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import type { Ref } from 'react';
+
+import { useMergedRef } from '@mantine/hooks';
 import '@ag-grid-community/styles/ag-theme-alpine.css';
+import isElectron from 'is-electron';
+import debounce from 'lodash/debounce';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import { LibraryItem, QueueSong } from '/@/renderer/api/types';
+import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
+import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
+import { ErrorFallback } from '/@/renderer/features/action-required';
+import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
+import { QUEUE_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
+import { updateSong } from '/@/renderer/features/player/update-remote-song';
+import { useAppFocus } from '/@/renderer/hooks';
 import {
     useAppStoreActions,
     useCurrentSong,
@@ -24,23 +39,10 @@ import {
     useSettingsStoreActions,
     useTableSettings,
 } from '/@/renderer/store/settings.store';
-import { useMergedRef } from '@mantine/hooks';
-import isElectron from 'is-electron';
-import debounce from 'lodash/debounce';
-import { ErrorBoundary } from 'react-error-boundary';
-import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
-import { ErrorFallback } from '/@/renderer/features/action-required';
 import { PlaybackType, TableType } from '/@/renderer/types';
-import { LibraryItem, QueueSong } from '/@/renderer/api/types';
-import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
-import { QUEUE_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
-import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
-import { useAppFocus } from '/@/renderer/hooks';
-import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
-import { updateSong } from '/@/renderer/features/player/update-remote-song';
 import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
 
-const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
+const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 
 type QueueProps = {
     type: TableType;
@@ -248,10 +250,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
         <ErrorBoundary FallbackComponent={ErrorFallback}>
             <VirtualGridAutoSizerContainer>
                 <VirtualTable
-                    ref={mergedRef}
                     alwaysShowHorizontalScroll
-                    rowDragEntireRow
-                    rowDragMultiRow
                     autoFitColumns={tableConfig.autoFit}
                     columnDefs={columnDefs}
                     context={{
@@ -265,11 +264,6 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
                     }}
                     deselectOnClickOutside={type === 'fullScreen'}
                     getRowId={(data) => data.data.uniqueId}
-                    rowBuffer={50}
-                    rowClassRules={rowClassRules}
-                    rowData={queue}
-                    rowHeight={tableConfig.rowHeight || 40}
-                    suppressCellFocus={type === 'fullScreen'}
                     onCellContextMenu={onCellContextMenu}
                     onCellDoubleClicked={handleDoubleClick}
                     onColumnMoved={handleColumnChange}
@@ -278,6 +272,14 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
                     onGridReady={handleGridReady}
                     onGridSizeChanged={handleGridSizeChange}
                     onRowDragEnd={handleDragEnd}
+                    ref={mergedRef}
+                    rowBuffer={50}
+                    rowClassRules={rowClassRules}
+                    rowData={queue}
+                    rowDragEntireRow
+                    rowDragMultiRow
+                    rowHeight={tableConfig.rowHeight || 40}
+                    suppressCellFocus={type === 'fullScreen'}
                 />
             </VirtualGridAutoSizerContainer>
         </ErrorBoundary>

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -1,16 +1,19 @@
-import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { Stack } from '@mantine/core';
-import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
+import { useRef } from 'react';
+
 import { PlayQueueListControls } from './play-queue-list-controls';
+
 import { Song } from '/@/renderer/api/types';
 import { PageHeader, Paper } from '/@/renderer/components';
+import { VirtualGridContainer } from '/@/renderer/components/virtual-grid';
+import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/renderer/types';
-import { VirtualGridContainer } from '/@/renderer/components/virtual-grid';
 
 export const SidebarPlayQueue = () => {
-    const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
+    const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
     const { windowBarStyle } = useWindowSettings();
 
     const isWeb = windowBarStyle === Platform.WEB;