restructure files onto electron-vite boilerplate

src/renderer/features/action-required/components/action-required-container.tsx

@@ -1,14 +1,15 @@
-import { Stack, Group } from '@mantine/core';
-import { RiAlertFill } from 'react-icons/ri';
-import { Text } from '/@/renderer/components';
+import { Group, Stack } from '@mantine/core';
 import { ReactNode } from 'react';
+import { RiAlertFill } from 'react-icons/ri';
+
+import { Text } from '/@/renderer/components';
 
 interface ActionRequiredContainerProps {
     children: ReactNode;
     title: string;
 }
 
-export const ActionRequiredContainer = ({ title, children }: ActionRequiredContainerProps) => (
+export const ActionRequiredContainer = ({ children, title }: ActionRequiredContainerProps) => (
     <Stack sx={{ cursor: 'default', maxWidth: '700px' }}>
         <Group>
             <RiAlertFill

src/renderer/features/action-required/components/error-fallback.tsx

@@ -1,8 +1,10 @@
-import { Box, Center, Group, Stack } from '@mantine/core';
 import type { FallbackProps } from 'react-error-boundary';
+
+import { Box, Center, Group, Stack } from '@mantine/core';
 import { RiErrorWarningLine } from 'react-icons/ri';
 import { useRouteError } from 'react-router';
 import styled from 'styled-components';
+
 import { Button, Text } from '/@/renderer/components';
 
 const Container = styled(Box)`
@@ -25,8 +27,8 @@ export const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
                     </Group>
                     <Text>{error?.message}</Text>
                     <Button
-                        variant="filled"
                         onClick={resetErrorBoundary}
+                        variant="filled"
                     >
                         Reload
                     </Button>

src/renderer/features/action-required/components/mpv-required.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from 'react';
 import isElectron from 'is-electron';
-import { FileInput, Text, Button, Checkbox } from '/@/renderer/components';
-import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store';
-import { PlaybackType } from '/@/renderer/types';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const localSettings = isElectron() ? window.electron.localSettings : null;
+import { Button, Checkbox, FileInput, Text } from '/@/renderer/components';
+import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store';
+import { PlaybackType } from '/@/renderer/types';
+
+const localSettings = isElectron() ? window.api.localSettings : null;
 
 export const MpvRequired = () => {
     const [mpvPath, setMpvPath] = useState('');
@@ -48,8 +49,8 @@ export const MpvRequired = () => {
             </Text>
             <FileInput
                 disabled={disabled}
-                placeholder={mpvPath}
                 onChange={handleSetMpvPath}
+                placeholder={mpvPath}
             />
             <Text>{t('setting.disable_mpv', { context: 'description' })}</Text>
             <Checkbox

src/renderer/features/action-required/components/route-error-boundary.tsx

@@ -1,6 +1,7 @@
-import { Center, Stack, Group, Divider, Box } from '@mantine/core';
+import { Box, Center, Divider, Group, Stack } from '@mantine/core';
 import { RiArrowLeftSLine, RiErrorWarningLine, RiHome4Line, RiMenuFill } from 'react-icons/ri';
 import { useNavigate, useRouteError } from 'react-router';
+
 import { Button, DropdownMenu, Text } from '/@/renderer/components';
 import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
 import { AppRoute } from '/@/renderer/router/routes';
@@ -28,9 +29,9 @@ const RouteErrorBoundary = () => {
                 <Stack sx={{ maxWidth: '50%' }}>
                     <Group>
                         <Button
+                            onClick={handleReturn}
                             px={10}
                             variant="subtle"
-                            onClick={handleReturn}
                         >
                             <RiArrowLeftSLine size={20} />
                         </Button>
@@ -48,10 +49,10 @@ const RouteErrorBoundary = () => {
                     >
                         <Button
                             leftIcon={<RiHome4Line />}
+                            onClick={handleHome}
                             size="md"
                             sx={{ flex: 0.5 }}
                             variant="default"
-                            onClick={handleHome}
                         >
                             Go home
                         </Button>
@@ -73,9 +74,9 @@ const RouteErrorBoundary = () => {
                     </Group>
                     <Group grow>
                         <Button
+                            onClick={handleReload}
                             size="md"
                             variant="filled"
-                            onClick={handleReload}
                         >
                             Reload
                         </Button>

src/renderer/features/action-required/components/server-required.tsx

@@ -1,4 +1,5 @@
 import { RiMenuFill } from 'react-icons/ri';
+
 import { Button, DropdownMenu, Text } from '/@/renderer/components';
 import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';