feat: style tweaks

Author: arianrhodsandlot

package.json

@@ -65,7 +65,7 @@
   "devDependencies": {
     "@arianrhodsandlot/eslint-config": "0.18.4",
     "@eslint/config-inspector": "1.0.2",
-    "@iconify/json": "2.2.315",
+    "@iconify/json": "2.2.316",
     "@iconify/tailwind4": "1.0.6",
     "@tailwindcss/vite": "4.0.12",
     "@tsconfig/vite-react": "3.4.0",
@@ -79,7 +79,7 @@
     "drizzle-kit": "0.30.5",
     "eslint": "9.22.0",
     "libretrodb": "1.0.0",
-    "lint-staged": "15.4.3",
+    "lint-staged": "15.5.0",
     "miniflare": "3.20250310.0",
     "nanoid": "5.1.3",
     "react-server-dom-webpack": "19.0.0",
@@ -90,7 +90,7 @@
     "vite-plugin-cjs-interop": "2.1.6",
     "vite-tsconfig-paths": "5.1.4",
     "wrangler": "3.114.1",
-    "zx": "8.4.0"
+    "zx": "8.4.1"
   },
   "packageManager": "[email protected]",
   "pnpm": {

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { and, eq } from 'drizzle-orm'
+import { and, desc, eq } from 'drizzle-orm'
 import { getContextData } from 'waku/middleware/context'
 import { stateTable } from '../databases/library/schema.ts'
 
@@ -13,6 +13,6 @@ export async function getStates({ rom, type }: { rom: string; type?: 'auto' | 'm
     conditions.push(eq(stateTable.type, type))
   }
   const where = and(...conditions)
-  const results = await db.library.select().from(stateTable).where(where)
+  const results = await db.library.select().from(stateTable).where(where).orderBy(desc(stateTable.created_at))
   return results
 }

src/controllers/get-states.ts

@@ -28,7 +28,7 @@ export default function AppLayout({
   return (
     <ServerDataContextProvider value={value}>
       <div className='flex h-screen bg-[var(--theme)]'>
-        <aside className='flex w-64 shrink-0 flex-col'>
+        <aside className='ml-4 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
@@ -38,10 +38,10 @@ export default function AppLayout({
           </ScrollArea>
         </aside>
 
-        <div className='flex h-full flex-1'>
-          <div className='relative my-4 mr-4 flex flex-1 overflow-hidden rounded bg-zinc-50 shadow-[0_0_12px] shadow-black/10'>
-            <MainScrollArea className='z-1 relative flex-1 p-4' key={req.url.href} size='2'>
-              <main className='min-h-full'>{children}</main>
+        <div className='m-4 flex min-w-0 flex-1'>
+          <div className='relative flex flex-1 overflow-hidden rounded bg-zinc-50 shadow-[0_0_12px] shadow-black/10'>
+            <MainScrollArea className='z-1 relative flex flex-1' key={req.url.href} size='2'>
+              <main className='min-h-full w-full p-4'>{children}</main>
             </MainScrollArea>
             {append}
           </div>

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

@@ -1,22 +1,15 @@
 'use client'
+import { Skeleton } from '@radix-ui/themes'
 import clsx from 'clsx'
-import { useState } from 'react'
 import { Link } from 'waku'
-import { getPlatformGameIcon, getRomGoodcodes, getRomLibretroThumbnail } from '@/utils/rom.ts'
+import { getRomGoodcodes } from '@/utils/rom.ts'
+import { useRomCover } from '../hooks/use-rom-cover.ts'
 import { GameEntryContextMenu } from './game-entry-context-menu.tsx'
 import { GameTitle } from './game-title.tsx'
 
 export function GameEntry({ rom }) {
   const goodcodes = getRomGoodcodes(rom)
-  const [cover, setCover] = useState(() => getRomLibretroThumbnail(rom))
-
-  function handleError() {
-    const platformCover = getPlatformGameIcon(rom.platform)
-    if (cover !== platformCover) {
-      setCover(getPlatformGameIcon(rom.platform))
-    }
-  }
-
+  const { data: cover, isLoading } = useRomCover(rom)
   return (
     <GameEntryContextMenu rom={rom}>
       <div className='relative'>
@@ -35,13 +28,17 @@ export function GameEntry({ rom }) {
           }
         >
           <div className='flex aspect-square size-full items-center justify-center'>
-            <img
-              alt={goodcodes.rom}
-              className={clsx('max-w-4/5 max-h-full rounded object-contain drop-shadow-lg')}
-              loading='lazy'
-              onError={handleError}
-              src={cover}
-            />
+            {isLoading ? <Skeleton className='!size-4/5' loading /> : null}
+            {cover?.src ? (
+              <img
+                alt={goodcodes.rom}
+                className={clsx('max-w-4/5 max-h-full  rounded object-contain drop-shadow-lg', {
+                  'bg-[var(--gray-a3)]': cover.type === 'rom',
+                })}
+                loading='lazy'
+                src={cover.src}
+              />
+            ) : null}
           </div>
 
           <GameTitle rom={rom} />

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

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

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

@@ -6,12 +6,7 @@ import { Link } from 'waku/router/client'
 export function SidebarLink({ active = false, children, href }) {
   return (
     <Button asChild size='3' variant={active ? 'ghost' : 'solid'}>
-      <Link
-        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 bg-white' />}
-      >
+      <Link className={clsx('!m-0 !h-auto !px-4 !py-2.5', { '!bg-white': active })} scroll to={href}>
         <div className='flex h-auto w-full justify-start gap-2 font-semibold'>{children}</div>
       </Link>
     </Button>

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

@@ -29,12 +29,15 @@ export function SidebarLinks({ platform }: { platform?: string }) {
       </div>
 
       <div className='mt-4'>
-        <h3 className='px-4 text-white/60'>Platforms</h3>
+        <h3 className='flex items-center gap-2 px-4 text-sm text-white/50'>
+          <span className='icon-[mdi--gamepad-classic] size-5' />
+          Platforms
+        </h3>
 
         <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' className='shrink-0' height='20' src={icon} width='20' /> : null}
+              {icon ? <img alt='icon' className='size-5' src={icon} /> : null}
               {text}
             </SidebarLink>
           ))}

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

@@ -1,19 +1,38 @@
 'use client'
-import ky from 'ky'
 import useSWRImmutable from 'swr/immutable'
 import { getPlatformGameIcon, getRomLibretroThumbnail } from '@/utils/rom.ts'
 
+const validImages = new Set<string>([])
+const invalidImages = new Set<string>([])
+
+function imageLoaded(src) {
+  const img = new Image()
+  img.src = src
+  return new Promise<void>((resolve, reject) => {
+    img.addEventListener('load', () => resolve())
+    img.addEventListener('error', (error) => reject(error))
+  })
+}
+
 export function useRomCover(rom) {
   const romCover = getRomLibretroThumbnail(rom)
   const platformCover = getPlatformGameIcon(rom.platform)
 
   return useSWRImmutable([romCover, platformCover], async () => {
-    if (romCover) {
+    if (romCover && !invalidImages.has(romCover)) {
+      if (validImages.has(romCover)) {
+        return { src: romCover, type: 'rom' }
+      }
+
       try {
-        await ky.head(romCover)
+        await imageLoaded(romCover)
+        validImages.add(romCover)
         return { src: romCover, type: 'rom' }
-      } catch {}
+      } catch {
+        invalidImages.add(romCover)
+      }
     }
+    validImages.add(platformCover)
     return { src: platformCover, type: 'platform' }
   })
 }

src/pages/library/hooks/use-rom-cover.ts

@@ -9,13 +9,13 @@ export function GameOverlayButton({
 }: { children: ReactNode; isLoading?: boolean; onClick?: any }) {
   return (
     <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)]'
+      className='[--accent-a11:white] [--accent-a3:rgba(0,0,0,.3)] [--accent-a4:rgba(0,0,0,.3)] [--accent-a5:rgba(0,0,0,.2)] [--accent-a8:white] [--gray-a3:rgba(0,0,0,.2)] [--gray-a8:white]'
       disabled={isLoading}
       onClick={onClick}
       radius='full'
       size='4'
       type='button'
-      variant='soft'
+      variant='outline'
     >
       {children}
     </Button>

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

@@ -7,7 +7,7 @@ import { GameOverlayButton } from './game-overlay-button.tsx'
 export function GameOverlayButtons() {
   const { emulator, exit } = useEmulator()
   const { saveState } = useGameStates()
-  const { setIsPending, toggle } = useGameOverlay()
+  const { isPending, setIsPending, toggle } = useGameOverlay()
 
   function handleClickResume() {
     emulator?.resume()
@@ -46,28 +46,28 @@ export function GameOverlayButtons() {
 
   return (
     <>
-      <GameOverlayButton onClick={handleClickResume}>
+      <GameOverlayButton isLoading={isPending} onClick={handleClickResume}>
         <span className='icon-[material-symbols--resume] size-5' />
         Resume
       </GameOverlayButton>
 
-      <GameOverlayButton onClick={handleClickSaveState}>
+      <GameOverlayButton isLoading={isPending} onClick={handleClickSaveState}>
         <span className='icon-[mdi--content-save] size-5' />
         Save State
       </GameOverlayButton>
 
       <div className='flex-1' />
-      <GameOverlayButton onClick={handleClickRestart}>
+      <GameOverlayButton isLoading={isPending} onClick={handleClickRestart}>
         <span className='icon-[mdi--restart] size-5' />
         Restart
       </GameOverlayButton>
 
-      <GameOverlayButton onClick={handleClickExit}>
+      <GameOverlayButton isLoading={isPending} onClick={handleClickExit}>
         <span className='icon-[mdi--exit-to-app] size-5' />
         Exit
       </GameOverlayButton>
 
-      <GameOverlayButton onClick={handleClickSaveExit}>
+      <GameOverlayButton isLoading={isPending} onClick={handleClickSaveExit}>
         <span className='icon-[mdi--location-exit] size-5' />
         Save & Exit
       </GameOverlayButton>

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

@@ -1,6 +1,8 @@
 'use client'
 import { useKeyboardEvent } from '@react-hookz/web'
 import { AnimatePresence, motion } from 'motion/react'
+import { useRomCover } from '@/pages/library/hooks/use-rom-cover.ts'
+import { getRomGoodcodes } from '@/utils/rom.ts'
 import { useEmulator } from '../../hooks/use-emulator.ts'
 import { useGameOverlay } from '../../hooks/use-game-overlay.ts'
 import { useGameStates } from '../../hooks/use-game-states.ts'
@@ -12,6 +14,9 @@ export function GameOverlay({ rom }) {
   const { emulator } = useEmulator()
   const { reloadStates } = useGameStates()
 
+  const goodcodes = getRomGoodcodes(rom)
+  const { data: cover } = useRomCover(rom)
+
   useKeyboardEvent(true, (event) => {
     const isEscapeKey = event.key === 'Escape'
     const status = emulator?.getStatus()
@@ -41,7 +46,14 @@ export function GameOverlay({ rom }) {
           >
             <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 items-center gap-4'>
+                <div className='size-30 shrink-0'>
+                  {cover ? (
+                    <img alt={goodcodes.rom} className='size-30 object-contain object-center' src={cover.src} />
+                  ) : null}
+                </div>
+                <div className='text-3xl font-semibold'>{goodcodes.rom}</div>
+              </div>
               <div className='flex gap-8'>
                 <GameOverlayButtons />
               </div>

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

@@ -1,3 +1,5 @@
+import { Badge } from '@radix-ui/themes'
+import { clsx } from 'clsx'
 import ky from 'ky'
 import useSWRMutation from 'swr/mutation'
 import { humanizeDate } from '@/utils/misc.ts'
@@ -8,7 +10,7 @@ export function GameState({ state }) {
   const { setIsPending, toggle } = useGameOverlay()
   const { emulator } = useEmulator()
 
-  const { trigger: loadState } = useSWRMutation(
+  const { isMutating, trigger: loadState } = useSWRMutation(
     `/api/v1/state/${state.id}/content`,
     async (url) => {
       if (emulator) {
@@ -31,21 +33,37 @@ export function GameState({ state }) {
 
   return (
     <button
-      className='flex h-36 w-48 shrink-0 flex-col overflow-hidden rounded border-4 border-white bg-white shadow'
+      className={clsx(
+        'flex h-36 w-48 shrink-0 flex-col overflow-hidden rounded border-4 border-white bg-white shadow',
+        { 'cursor-default': isMutating },
+      )}
+      disabled={isMutating}
       key={state.id}
       onClick={handleClick}
       type='button'
     >
       <div className='relative flex-1 bg-black'>
-        <img alt={state.id} className='absolute size-full object-contain' src={`/api/v1/state/${state.id}/thumbnail`} />
+        <img
+          alt={state.id}
+          className={clsx('absolute size-full object-contain', { 'opacity-80': isMutating })}
+          src={`/api/v1/state/${state.id}/thumbnail`}
+        />
 
         {state.type === 'auto' ? (
           <div className='absolute bottom-0 right-0 rounded-tl bg-black/50 px-3 py-1 text-xs font-semibold text-white'>
             Auto Saved
           </div>
         ) : null}
       </div>
-      <div className='py-1 text-xs text-zinc-600'>Saved at {humanizeDate(state.created_at)}</div>
+      <div className='flex h-5 items-center justify-center text-xs text-zinc-600'>
+        {isMutating ? (
+          <span className='icon-[svg-spinners--180-ring] block size-3 text-[var(--theme)]' />
+        ) : (
+          <div>
+            Saved at <Badge>{humanizeDate(state.created_at)}</Badge>
+          </div>
+        )}
+      </div>
     </button>
   )
 }

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

@@ -27,9 +27,8 @@ export async function RomPage({ fileName, id, platform }) {
       serverData={{ rom }}
       sidebar={<SidebarLinks platform={rom.platform} />}
     >
+      <title>{`${goodcodes.rom} - RetroAssembly`}</title>
       <div className='flex gap-4'>
-        <title>{`${goodcodes.rom} - RetroAssembly`}</title>
-
         <div>
           <GameCover rom={rom} />
         </div>

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

@@ -29,3 +29,15 @@ button {
 button[disabled] {
   cursor: not-allowed;
 }
+
+.radix-themes {
+  --cursor-button: pointer;
+  --cursor-checkbox: pointer;
+  --cursor-disabled: default;
+  --cursor-link: pointer;
+  --cursor-menu-item: pointer;
+  --cursor-radio: pointer;
+  --cursor-slider-thumb: grab;
+  --cursor-slider-thumb-active: grabbing;
+  --cursor-switch: pointer;
+}