feat: add goodcodes icons

Author: arianrhodsandlot

src/legacy/views/components/routes/library/platform/home-screen/game-entries-grid/district-icon.tsx src/pages/library/components/district-icon.tsx

@@ -4,6 +4,7 @@ import { Link } from 'waku/router/client'
 import { encodeRFC3986URIComponent } from '@/utils/misc.ts'
 import { getRomGoodcodes } from '@/utils/rom.ts'
 import { useRomCover } from '../hooks/use-rom-cover.ts'
+import { GameTitle } from './game-title.tsx'
 
 export function GameEntry({ rom, width }) {
   const goodcodes = getRomGoodcodes(rom)
@@ -39,7 +40,7 @@ export function GameEntry({ rom, width }) {
           ) : null}
         </div>
 
-        <div className='mt-2 line-clamp-2 text-center text-sm font-semibold'>{goodcodes.rom} {goodcodes.codes.languages}</div>
+        <GameTitle rom={rom} />
       </Link>
     </div>
   )

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

@@ -0,0 +1,43 @@
+import { uniq } from 'es-toolkit'
+import { getRomGoodcodes } from '@/utils/rom.ts'
+import { DistrictIcon } from './district-icon.tsx'
+
+export function GameTitle({ rom }) {
+  const goodcodes = getRomGoodcodes(rom)
+
+  const { countries, revision, version = {} } = goodcodes.codes
+  const districts: string[] = uniq(countries?.map(({ code }) => code))
+
+  return (
+    <div className='mt-2 line-clamp-2 text-center text-sm font-semibold'>
+      {districts?.map((district) => (
+        <DistrictIcon district={district} key={district} />
+      ))}
+
+      {goodcodes.rom}
+
+      {revision !== undefined && (
+        <span className='ml-2 inline-block rounded bg-gray-300 px-1'>
+          <span className='icon-[octicon--versions-16] size-4 align-middle' />
+          {revision > 1 && (
+            <span className='ml-2 h-4 align-middle font-["Noto_Mono",ui-monospace,monospace]'>{revision}</span>
+          )}
+        </span>
+      )}
+
+      {version.alpha ? (
+        <span className='ml-2 inline-block rounded bg-gray-300 px-1'>
+          <span className='icon-[mdi--alpha] size-4 align-middle' />
+        </span>
+      ) : version.beta ? (
+        <span className='ml-2 inline-block rounded bg-gray-300 px-1'>
+          <span className='icon-[mdi--beta] size-4 align-middle' />
+        </span>
+      ) : version.prototype ? (
+        <span className='ml-2 inline-block rounded bg-gray-300 px-1'>
+          <span className='icon-[mdi--flask] size-4 align-middle' />
+        </span>
+      ) : null}
+    </div>
+  )
+}