feat: add a setting page

src/views/components/app.tsx

@@ -18,6 +18,9 @@ export default function App() {
       <Route path={routes.rom}>
         <UniversalHomeRoute />
       </Route>
+      <Route path={routes.settings}>
+        <UniversalHomeRoute />
+      </Route>
 
       <Route path='/auth/onedrive'>
         <AuthOnedrive />

src/views/components/hooks/use-router-helpers.ts

@@ -12,6 +12,7 @@ export function useRouterHelpers() {
   const [isHomeRoute] = useRoute(routes.home)
   const [isPlatformRoute] = useRoute(routes.platform)
   const [isRomRoute] = useRoute(routes.rom)
+  const [isSettingsRoute] = useRoute(routes.settings)
 
   const wouter = { location, setLocation, router, params, useRoute }
 
@@ -86,6 +87,7 @@ export function useRouterHelpers() {
     isHomeRoute,
     isPlatformRoute,
     isRomRoute,
+    isSettingsRoute,
     linkToLibrary,
     linkToPlatform,
     linkToRom,

src/views/components/routes/library/platform/home-screen/home-screen-layout.tsx

@@ -13,7 +13,7 @@ export function HomeScreenLayout({ children }: { children: ReactNode }) {
       >
         <TopBar />
         <div className='flex-1 overflow-hidden'>
-          <div className='flex h-full items-center justify-center '>{children}</div>
+          <div className='flex h-full items-center justify-center'>{children}</div>
         </div>
       </div>
     </div>

src/views/components/routes/library/platform/home-screen/index.tsx

@@ -21,6 +21,7 @@ import { GameLaunching } from './game-launching'
 import { HomeScreenLayout } from './home-screen-layout'
 import { useCurrentPlatformName } from './hooks/use-current-platform'
 import { InputTips } from './input-tips'
+import { Settings } from './settings'
 
 function getColumnCount(width: number) {
   const idealItemWidth = innerWidth > 800 ? 200 : 150
@@ -52,7 +53,7 @@ async function getRoms(platform: string) {
 export function HomeScreen() {
   const [roms, setRoms] = useAtom(romsAtom)
   const setPlatforms = useSetAtom(platformsAtom)
-  const { params, isPlatformRoute, isRomRoute, redirectToPlatform } = useRouterHelpers()
+  const { params, isPlatformRoute, isRomRoute, isSettingsRoute, redirectToPlatform } = useRouterHelpers()
   const [measurements = { width: 0, height: 0 }, gridContainerRef] = useMeasure<HTMLDivElement>()
   const [isRetrying, setIsRetrying] = useState(false)
   const currentPlatformName = useCurrentPlatformName()
@@ -169,6 +170,14 @@ export function HomeScreen() {
     })()
   }, [params.library, currentPlatformName, isRomRoute, loadPlatformsAndRomsFromCache, loadPlatformsAndRomsFromRemote])
 
+  if (isSettingsRoute) {
+    return (
+      <HomeScreenLayout>
+        <Settings />
+      </HomeScreenLayout>
+    )
+  }
+
   const isRomsEmpty = !roms?.length
   const showLoading = romsState.status === 'loading' && peekRomsState.status !== 'loading' && isRomsEmpty
 

src/views/components/routes/library/platform/home-screen/settings/index.tsx

@@ -0,0 +1,35 @@
+export function Settings() {
+  return (
+    <div className='inset-0 h-full w-full bg-white p-20'>
+      <div className='container m-auto'>
+        <h2 className='text-3xl'>Settings</h2>
+
+        <div className='mt-10'>
+          <button className='flex w-full items-center gap-2 border p-4'>
+            <span className='icon-[mdi--palette] text-xl' />
+            <div className='flex-1 text-left'>Apparence</div>
+            <span className='icon-[mdi--chevron-right]' />
+          </button>
+
+          <button className='flex w-full items-center gap-2 border border-t-0 p-4'>
+            <span className='icon-[mdi--controller] text-xl' />
+            <div className='flex-1 text-left'>Input</div>
+            <span className='icon-[mdi--chevron-right]' />
+          </button>
+
+          <button className='flex w-full items-center gap-2 border border-t-0 p-4'>
+            <span className='icon-[mdi--monitor-shimmer] text-xl' />
+            <div className='flex-1 text-left'>Emulation</div>
+            <span className='icon-[mdi--chevron-right]' />
+          </button>
+
+          <button className='flex w-full items-center gap-2 border border-t-0 p-4'>
+            <span className='icon-[mdi--about] text-xl' />
+            <div className='flex-1 text-left'>About</div>
+            <span className='icon-[mdi--chevron-right]' />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/views/components/routes/universal-home-route/index.tsx

@@ -8,8 +8,16 @@ import { HomeScreen } from '../library/platform/home-screen'
 import { GameAddons } from '../library/rom/game-addons'
 
 export function UniversalHomeRoute() {
-  const { params, isHomeRoute, isPlatformRoute, isRomRoute, navigateToLibrary, navigateToPlatform, redirectToHome } =
-    useRouterHelpers()
+  const {
+    params,
+    isHomeRoute,
+    isPlatformRoute,
+    isRomRoute,
+    isSettingsRoute,
+    navigateToLibrary,
+    navigateToPlatform,
+    redirectToHome,
+  } = useRouterHelpers()
   const [started, setStarted] = useState(false)
 
   const [, { execute }] = useAsync(async () => {
@@ -51,7 +59,7 @@ export function UniversalHomeRoute() {
     )
   }
 
-  if (isPlatformRoute) {
+  if (isPlatformRoute || isSettingsRoute) {
     return (
       <>
         <Helmet>

src/views/lib/routes.ts

@@ -2,4 +2,5 @@ export const routes = {
   home: '/',
   platform: '/library/:library/platform/:platform?',
   rom: '/library/:library/platform/:platform/rom/:rom',
+  settings: '/library/:library/settings',
 }