feat: replace buttons and links with radix components

Author: arianrhodsandlot

src/controllers/get-rom.ts

@@ -26,7 +26,9 @@ export async function getRom({ fileName, id, platform }: { fileName: string; id:
   }
 
   if (romId) {
-    const [r] = await getRoms({ id: romId })
-    return r
+    const {
+      roms: [rom],
+    } = await getRoms({ id: romId })
+    return rom
   }
 }

src/controllers/get-roms.ts

@@ -46,7 +46,7 @@ export type RomsPagination = GetRomsReturning['pagination']
 export async function getRoms({
   id,
   page = 1,
-  pageSize = 100,
+  pageSize = 50,
   platform,
 }: { id?: string; page?: number; pageSize?: number; platform?: string } = {}) {
   const { currentUser, db } = getContextData()

src/pages/library/components/app-layout.tsx

@@ -28,7 +28,7 @@ export default function AppLayout({
   return (
     <ServerDataContextProvider value={value}>
       <div className='flex h-screen bg-[var(--theme)]'>
-        <aside className='flex shrink-0 flex-col'>
+        <aside className='flex w-64 shrink-0 flex-col'>
           <div className='flex items-center justify-center gap-2 pb-4 pt-2 font-bold text-white'>
             <img alt='logo' height='32' src='/assets/logo/logo-192x192.png' width='32' />
             RetroAssembly

src/pages/library/components/game-list-pagination.tsx

@@ -11,8 +11,8 @@ export function GameListPagination({ pagination }: { pagination: RomsPagination
   }
 
   return (
-    <ul className='flex flex-wrap justify-center gap-2 px-10'>
-      {range(1, pages).map((page) => (
+    <ul className='mt-8 flex flex-wrap justify-center gap-2 px-10'>
+      {range(1, pages + 1).map((page) => (
         <li key={page}>
           <Button asChild size='3' variant={current === page ? 'solid' : 'soft'}>
             {current === page ? (

src/pages/library/components/game-list.tsx

@@ -17,7 +17,7 @@ export function GameList({ pagination, roms: initialRoms }: { pagination: RomsPa
 
   return (
     <div>
-      <div className='grid gap-x-4 gap-y-8 [grid-template-columns:repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))]'>
+      <div className='grid gap-x-4 gap-y-2 [grid-template-columns:repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))]'>
         {renderedRoms.map((rom) => (
           <GameEntry key={rom.id} rom={rom} />
         ))}

src/pages/library/components/sidebar-link.tsx

@@ -1,20 +1,19 @@
+'use client'
+import { Button } from '@radix-ui/themes'
 import { clsx } from 'clsx'
 import { Link } from 'waku/router/client'
 
 export function SidebarLink({ active = false, children, href }) {
   return (
-    <div className='relative'>
+    <Button asChild size='3' variant={active ? 'ghost' : 'solid'}>
       <Link
-        className={clsx(
-          'mx-2 flex items-center gap-2 rounded px-4 py-2.5 font-semibold  transition-colors  hover:text-white',
-          active ? 'cursor-default bg-rose-900 font-semibold text-white' : 'text-white/80 ',
-        )}
+        className={clsx('!mx-2 !my-0 !h-auto !px-4 !py-2.5', { '!bg-white': active })}
         scroll
         to={href}
-        unstable_pending={<div className='z-1 absolute top-0 size-full' />}
+        unstable_pending={<div className='z-1 absolute top-0 size-full bg-white' />}
       >
-        {children}
+        <div className='flex h-auto w-full justify-start gap-2 font-semibold'>{children}</div>
       </Link>
-    </div>
+    </Button>
   )
 }

src/pages/library/components/sidebar-links.tsx

@@ -31,10 +31,10 @@ export function SidebarLinks({ platform }: { platform?: string }) {
       <div className='mt-4'>
         <h3 className='px-4 text-white/60'>Platforms</h3>
 
-        <div className='mt-2 flex flex-col gap-y-1'>
+        <div className='mt-2 flex flex-col gap-y-2'>
           {platformLinks.map(({ href, icon, name, text }) => (
             <SidebarLink active={platform === name} href={href} key={text}>
-              {icon ? <img alt='icon' height='20' src={icon} width='20' /> : null}
+              {icon ? <img alt='icon' className='shrink-0' height='20' src={icon} width='20' /> : null}
               {text}
             </SidebarLink>
           ))}

src/pages/library/platform/rom/components/game-overlay/game-overlay-button.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@radix-ui/themes'
 import { noop } from 'es-toolkit'
 import type { ReactNode } from 'react'
 
@@ -7,13 +8,16 @@ export function GameOverlayButton({
   onClick = noop,
 }: { children: ReactNode; isLoading?: boolean; onClick?: any }) {
   return (
-    <button
-      className='backdrop-blur-xs flex items-center justify-center gap-2 rounded px-6 py-3 font-semibold text-white shadow-lg hover:bg-rose-700'
+    <Button
+      className='[--accent-a11:white] [--accent-a3:rgba(255,255,255,.3)] [--accent-a4:rgba(255,255,255,.3)] [--accent-a5:rgba(255,255,255,.2)]'
       disabled={isLoading}
       onClick={onClick}
+      radius='full'
+      size='4'
       type='button'
+      variant='soft'
     >
       {children}
-    </button>
+    </Button>
   )
 }

src/pages/library/platform/rom/components/game-overlay/game-overlay-buttons.tsx

@@ -47,28 +47,28 @@ export function GameOverlayButtons() {
   return (
     <>
       <GameOverlayButton onClick={handleClickResume}>
-        <span className='icon-[material-symbols--resume] size-7' />
+        <span className='icon-[material-symbols--resume] size-5' />
         Resume
       </GameOverlayButton>
 
       <GameOverlayButton onClick={handleClickSaveState}>
-        <span className='icon-[mdi--content-save] size-7' />
+        <span className='icon-[mdi--content-save] size-5' />
         Save State
       </GameOverlayButton>
 
       <div className='flex-1' />
       <GameOverlayButton onClick={handleClickRestart}>
-        <span className='icon-[mdi--restart] size-7' />
+        <span className='icon-[mdi--restart] size-5' />
         Restart
       </GameOverlayButton>
 
       <GameOverlayButton onClick={handleClickExit}>
-        <span className='icon-[mdi--exit-to-app] size-7' />
+        <span className='icon-[mdi--exit-to-app] size-5' />
         Exit
       </GameOverlayButton>
 
       <GameOverlayButton onClick={handleClickSaveExit}>
-        <span className='icon-[mdi--location-exit] size-7' />
+        <span className='icon-[mdi--location-exit] size-5' />
         Save & Exit
       </GameOverlayButton>
     </>

src/pages/library/platform/rom/components/game-overlay/game-overlay.tsx

@@ -7,7 +7,7 @@ import { useGameStates } from '../../hooks/use-game-states.ts'
 import { GameOverlayButtons } from './game-overlay-buttons.tsx'
 import { GameStates } from './game-states.tsx'
 
-export function GameOverlay() {
+export function GameOverlay({ rom }) {
   const { show, toggle } = useGameOverlay()
   const { emulator } = useEmulator()
   const { reloadStates } = useGameStates()
@@ -41,6 +41,7 @@ export function GameOverlay() {
           >
             <div className='bg-linear-to-b to-text-transparent h-32 w-full from-black' />
             <div className='w-6xl mx-auto flex flex-1 flex-col gap-8'>
+              <div className='text-5xl'>{rom.file_name}</div>
               <div className='flex gap-8'>
                 <GameOverlayButtons />
               </div>

src/pages/library/platform/rom/components/launch-button.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { Button } from '@radix-ui/themes'
 import { useKeyboardEvent } from '@react-hookz/web'
 import { clsx } from 'clsx'
 import { useEmulator } from '../hooks/use-emulator.ts'
@@ -21,23 +22,19 @@ export function LaunchButton() {
   })
 
   return (
-    <button
-      className={clsx(
-        'inline-flex h-16 w-72 items-center justify-center gap-3 rounded bg-[var(--theme)] text-xl font-bold text-white',
-        { 'opacity-50': isPreparing },
-      )}
-      disabled={isPreparing}
-      onClick={launch}
-      type='button'
-    >
-      <span
-        className={
-          isPreparing
-            ? 'icon-[mdi--loading] animate-spin'
-            : 'icon-[mdi--play] motion-preset-pulse-lg motion-duration-1000'
-        }
-      />
-      {isPreparing ? 'Loading...' : 'Press any key to start'}
+    <button className={clsx({ 'opacity-50': isPreparing })} disabled={isPreparing} onClick={launch} type='button'>
+      <Button asChild className='!h-16' radius='small' size='4' type='button'>
+        <div>
+          <span
+            className={
+              isPreparing
+                ? 'icon-[mdi--loading] animate-spin'
+                : 'icon-[mdi--play] motion-preset-pulse-lg motion-duration-1500'
+            }
+          />
+          <span className='w-[228px] text-2xl'>{isPreparing ? 'Loading...' : 'Press any key to start'}</span>
+        </div>
+      </Button>
     </button>
   )
 }

src/pages/library/platform/rom/hooks/use-game-states.ts

@@ -22,7 +22,7 @@ export function useGameStates() {
     if (thumbnail) {
       formData.append('thumbnail', thumbnail)
     }
-    formData.append('rom_id', rom.id)
+    formData.append('rom', rom.id)
     formData.append('core', core)
     formData.append('type', 'manual')
     await ky.put(url, { body: formData })

src/pages/library/platform/rom/page.tsx

@@ -70,7 +70,7 @@ export async function RomPage({ fileName, id, platform }) {
 
       <Portal>
         <Theme accentColor='red'>
-          <GameOverlay />
+          <GameOverlay rom={rom} />
         </Theme>
       </Portal>
     </AppLayout>