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/components/GameGrid.tsx

@@ -29,32 +29,46 @@ export function GameGrid({ games, selectedId, onSelect, runs }: GameGridProps) {
 
   const generations = useMemo(
     () => [...new Set(games.map((g) => g.generation))].sort(),
-    [games],
+    [games]
   )
 
   const regions = useMemo(
     () => [...new Set(games.map((g) => g.region))].sort(),
-    [games],
+    [games]
   )
 
   const activeRunGameIds = useMemo(() => {
     if (!runs) return new Set<number>()
-    return new Set(runs.filter((r) => r.status === 'active').map((r) => r.gameId))
+    return new Set(
+      runs.filter((r) => r.status === 'active').map((r) => r.gameId)
+    )
   }, [runs])
 
   const completedRunGameIds = useMemo(() => {
     if (!runs) return new Set<number>()
-    return new Set(runs.filter((r) => r.status === 'completed').map((r) => r.gameId))
+    return new Set(
+      runs.filter((r) => r.status === 'completed').map((r) => r.gameId)
+    )
   }, [runs])
 
   const filtered = useMemo(() => {
     let result = games
     if (filter) result = result.filter((g) => g.generation === filter)
     if (regionFilter) result = result.filter((g) => g.region === regionFilter)
-    if (hideWithActiveRun) result = result.filter((g) => !activeRunGameIds.has(g.id))
-    if (hideCompleted) result = result.filter((g) => !completedRunGameIds.has(g.id))
+    if (hideWithActiveRun)
+      result = result.filter((g) => !activeRunGameIds.has(g.id))
+    if (hideCompleted)
+      result = result.filter((g) => !completedRunGameIds.has(g.id))
     return result
-  }, [games, filter, regionFilter, hideWithActiveRun, hideCompleted, activeRunGameIds, completedRunGameIds])
+  }, [
+    games,
+    filter,
+    regionFilter,
+    hideWithActiveRun,
+    hideCompleted,
+    activeRunGameIds,
+    completedRunGameIds,
+  ])
 
   const grouped = useMemo(() => {
     const groups: Record<number, Game[]> = {}
@@ -77,7 +91,9 @@ export function GameGrid({ games, selectedId, onSelect, runs }: GameGridProps) {
     <div className="space-y-6">
       <div className="space-y-3">
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-xs font-medium text-gray-500 dark:text-gray-400 mr-1">Gen:</span>
+          <span className="text-xs font-medium text-gray-500 dark:text-gray-400 mr-1">
+            Gen:
+          </span>
           <button
             type="button"
             onClick={() => setFilter(null)}
@@ -98,7 +114,9 @@ export function GameGrid({ games, selectedId, onSelect, runs }: GameGridProps) {
         </div>
 
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-xs font-medium text-gray-500 dark:text-gray-400 mr-1">Region:</span>
+          <span className="text-xs font-medium text-gray-500 dark:text-gray-400 mr-1">
+            Region:
+          </span>
           <button
             type="button"
             onClick={() => setRegionFilter(null)}