Add pre-commit hooks for linting and formatting

Set up pre-commit framework with ruff (backend) and ESLint/Prettier/tsc
(frontend) hooks to catch issues locally before CI. Auto-format all
frontend files with Prettier to comply with the new check.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/admin/AdminGames.tsx

@@ -2,7 +2,11 @@ import { useState, useMemo } from 'react'
 import { AdminTable, type Column } from '../../components/admin/AdminTable'
 import { GameFormModal } from '../../components/admin/GameFormModal'
 import { useGames } from '../../hooks/useGames'
-import { useCreateGame, useUpdateGame, useDeleteGame } from '../../hooks/useAdmin'
+import {
+  useCreateGame,
+  useUpdateGame,
+  useDeleteGame,
+} from '../../hooks/useAdmin'
 import { exportGames } from '../../api/admin'
 import { downloadJson } from '../../utils/download'
 import type { Game, CreateGameInput, UpdateGameInput } from '../../types'
@@ -20,17 +24,18 @@ export function AdminGames() {
 
   const regions = useMemo(
     () => [...new Set(games.map((g) => g.region))].sort(),
-    [games],
+    [games]
   )
   const generations = useMemo(
     () => [...new Set(games.map((g) => g.generation))].sort((a, b) => a - b),
-    [games],
+    [games]
   )
 
   const filteredGames = useMemo(() => {
     let result = games
     if (regionFilter) result = result.filter((g) => g.region === regionFilter)
-    if (genFilter) result = result.filter((g) => g.generation === Number(genFilter))
+    if (genFilter)
+      result = result.filter((g) => g.generation === Number(genFilter))
     return result
   }, [games, regionFilter, genFilter])
 
@@ -38,8 +43,16 @@ export function AdminGames() {
     { header: 'Name', accessor: (g) => g.name },
     { header: 'Slug', accessor: (g) => g.slug },
     { header: 'Region', accessor: (g) => g.region, sortKey: (g) => g.region },
-    { header: 'Gen', accessor: (g) => g.generation, sortKey: (g) => g.generation },
-    { header: 'Year', accessor: (g) => g.releaseYear ?? '-', sortKey: (g) => g.releaseYear ?? 0 },
+    {
+      header: 'Gen',
+      accessor: (g) => g.generation,
+      sortKey: (g) => g.generation,
+    },
+    {
+      header: 'Year',
+      accessor: (g) => g.releaseYear ?? '-',
+      sortKey: (g) => g.releaseYear ?? 0,
+    },
   ]
 
   return (
@@ -73,7 +86,9 @@ export function AdminGames() {
         >
           <option value="">All regions</option>
           {regions.map((r) => (
-            <option key={r} value={r}>{r}</option>
+            <option key={r} value={r}>
+              {r}
+            </option>
           ))}
         </select>
         <select
@@ -83,12 +98,17 @@ export function AdminGames() {
         >
           <option value="">All generations</option>
           {generations.map((g) => (
-            <option key={g} value={g}>Gen {g}</option>
+            <option key={g} value={g}>
+              Gen {g}
+            </option>
           ))}
         </select>
         {(regionFilter || genFilter) && (
           <button
-            onClick={() => { setRegionFilter(''); setGenFilter('') }}
+            onClick={() => {
+              setRegionFilter('')
+              setGenFilter('')
+            }}
             className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
           >
             Clear filters
@@ -126,7 +146,7 @@ export function AdminGames() {
           onSubmit={(data) =>
             updateGame.mutate(
               { id: editing.id, data: data as UpdateGameInput },
-              { onSuccess: () => setEditing(null) },
+              { onSuccess: () => setEditing(null) }
             )
           }
           onClose={() => setEditing(null)}