feat: add platform count

Author: arianrhodsandlot

src/controllers/get-rom-platform-count.ts

@@ -0,0 +1,16 @@
+import { and, eq } from 'drizzle-orm'
+import { getContextData } from 'waku/middleware/context'
+import { romTable } from '../databases/library/schema.ts'
+
+export async function getRomPlatformCount() {
+  const { currentUser, db } = getContextData()
+  const { library } = db
+
+  const results = await library
+    .selectDistinct({ platform: romTable.platform })
+    .from(romTable)
+    .orderBy(romTable.file_name)
+    .where(and(eq(romTable.user_id, currentUser.id), eq(romTable.status, 1)))
+
+  return results.length
+}

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-4 [grid-template-columns:repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))]'>
+      <div className='grid gap-x-4 gap-y-8 [grid-template-columns:repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))]'>
         {renderedRoms.map((rom) => (
           <GameEntry key={rom.id} rom={rom} />
         ))}

src/pages/library/page.tsx

@@ -1,10 +1,11 @@
+import { getRomPlatformCount } from '@/controllers/get-rom-platform-count.ts'
 import { getRoms } from '@/controllers/get-roms.ts'
 import AppLayout from './components/app-layout.tsx'
 import { GameList } from './components/game-list.tsx'
 
 export async function LibraryPage({ query }: { query: string }) {
   const page = Number.parseInt(new URLSearchParams(query).get('page') || '', 10) || 1
-  const { pagination, roms } = await getRoms({ page })
+  const [{ pagination, roms }, platformCount] = await Promise.all([getRoms({ page }), getRomPlatformCount()])
 
   if (page > 1 && roms.length === 0) {
     return '404'
@@ -15,11 +16,11 @@ export async function LibraryPage({ query }: { query: string }) {
       <title>Library - RetroAssembly</title>
       <div className='flex flex-col gap-5'>
         <div className='relative flex justify-between px-4 pt-4'>
-          <h1 className='text-5xl font-[Oswald_Variable] font-semibold'>Library {page}</h1>
+          <h1 className='text-5xl font-[Oswald_Variable] font-semibold'>Library</h1>
           <div className='mt-4 flex items-center gap-2 text-zinc-400'>
             <span className='icon-[mdi--bar-chart] text-black' />
             <span className='font-[DSEG7_Modern] font-bold text-rose-700'>{roms.length}</span> games for{' '}
-            <span className='font-[DSEG7_Modern] font-bold text-rose-700'>{8}</span> platforms in total
+            <span className='font-[DSEG7_Modern] font-bold text-rose-700'>{platformCount}</span> platforms in total
           </div>
         </div>
         <hr className='border-t-1 border-t-black/20' />