From 020a349c3551fb5080aaeb0471d85365c5745865 Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Sun, 29 Sep 2024 18:20:18 -0400
Subject: [PATCH 01/11] feat: migrate All Games to React.js datatable

---
 .../Requests/UserGameListRequest.php          |  48 +---
 app/Models/Emulator.php                       |   4 +
 app/Models/System.php                         |   4 +
 app/Platform/Actions/BuildGameListAction.php  |  12 +-
 .../Controllers/Api/GameListApiController.php |  49 ++++
 .../Controllers/GameListController.php        |  74 +++++
 app/Platform/Data/GameListPagePropsData.php   |  24 ++
 app/Platform/Requests/GameListRequest.php     |  54 ++++
 app/Platform/RouteServiceProvider.php         |   8 +
 .../DataTableColumnHeader.tsx                 |  16 +-
 .../components/DataTableColumnHeader/index.ts |   1 +
 .../DataTableFacetedFilter.tsx                |  19 +-
 .../DataTableFacetedFilter/index.ts           |   1 +
 .../DataTablePagination.tsx                   |  16 +-
 .../components/DataTablePagination/index.ts   |   1 +
 .../DataTableRowActions.tsx                   | 115 ++++++++
 .../components/DataTableRowActions/index.ts   |   1 +
 .../DataTableSearchInput.tsx                  |   0
 .../components}/DataTableSearchInput/index.ts |   0
 .../useSearchInputHotkey.ts                   |   0
 .../DataTableViewOptions.tsx                  |   4 +-
 .../components/DataTableViewOptions/index.ts  |   1 +
 .../hooks/useDataTablePrefetchPagination.ts}  |  13 +-
 .../hooks/useDataTablePrefetchSort.ts}        |  10 +-
 .../useGameListQuery/useGameListQuery.ts      |  13 +-
 .../AllGamesDataTable/AllGamesDataTable.tsx   | 164 +++++++++++
 .../AllGamesDataTableToolbar.tsx              | 104 +++++++
 .../buildColumnDefinitions.tsx                | 257 ++++++++++++++++++
 .../components/AllGamesDataTable/index.ts     |   1 +
 .../AllGamesMainRoot/AllGamesMainRoot.tsx     |  58 ++++
 .../components/AllGamesMainRoot/index.ts      |   1 +
 .../DataTableRowActions.tsx                   |  87 ------
 .../WantToPlayGamesDataTable.tsx              |  14 +-
 .../WantToPlayGamesDataTableToolbar.tsx       |  25 +-
 .../buildColumnDefinitions.tsx                |  96 +++++--
 ...t.tsx => WantToPlayGamesMainRoot.test.tsx} |  48 ++--
 ...esRoot.tsx => WantToPlayGamesMainRoot.tsx} |   2 +-
 .../WantToPlayGamesMainRoot/index.ts          |   2 +-
 .../game-list/utils/allGamesDefaultFilters.ts |   5 +
 .../utils/getAreNonDefaultFiltersSet.ts       |  16 ++
 resources/js/pages/game-list/index.tsx        |  25 ++
 resources/js/pages/game-list/play.tsx         |   4 +-
 resources/js/types/generated.d.ts             |   5 +
 resources/js/ziggy.d.ts                       |   2 +
 44 files changed, 1166 insertions(+), 238 deletions(-)
 create mode 100644 app/Platform/Controllers/Api/GameListApiController.php
 create mode 100644 app/Platform/Controllers/GameListController.php
 create mode 100644 app/Platform/Data/GameListPagePropsData.php
 create mode 100644 app/Platform/Requests/GameListRequest.php
 rename resources/js/{features/game-list/components/WantToPlayGamesDataTable => common/components/DataTableColumnHeader}/DataTableColumnHeader.tsx (90%)
 create mode 100644 resources/js/common/components/DataTableColumnHeader/index.ts
 rename resources/js/{features/game-list/components/WantToPlayGamesDataTable => common/components/DataTableFacetedFilter}/DataTableFacetedFilter.tsx (92%)
 create mode 100644 resources/js/common/components/DataTableFacetedFilter/index.ts
 rename resources/js/{features/game-list/components/WantToPlayGamesDataTable => common/components/DataTablePagination}/DataTablePagination.tsx (85%)
 create mode 100644 resources/js/common/components/DataTablePagination/index.ts
 create mode 100644 resources/js/common/components/DataTableRowActions/DataTableRowActions.tsx
 create mode 100644 resources/js/common/components/DataTableRowActions/index.ts
 rename resources/js/{features/game-list/components/WantToPlayGamesDataTable => common/components}/DataTableSearchInput/DataTableSearchInput.tsx (100%)
 rename resources/js/{features/game-list/components/WantToPlayGamesDataTable => common/components}/DataTableSearchInput/index.ts (100%)
 rename resources/js/{features/game-list/components/WantToPlayGamesDataTable => common/components}/DataTableSearchInput/useSearchInputHotkey.ts (100%)
 rename resources/js/{features/game-list/components/WantToPlayGamesDataTable => common/components/DataTableViewOptions}/DataTableViewOptions.tsx (92%)
 create mode 100644 resources/js/common/components/DataTableViewOptions/index.ts
 rename resources/js/{features/game-list/hooks/usePrefetchPagination.ts => common/hooks/useDataTablePrefetchPagination.ts} (70%)
 rename resources/js/{features/game-list/hooks/usePrefetchSort.ts => common/hooks/useDataTablePrefetchSort.ts} (70%)
 create mode 100644 resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
 create mode 100644 resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
 create mode 100644 resources/js/features/game-list/components/AllGamesDataTable/buildColumnDefinitions.tsx
 create mode 100644 resources/js/features/game-list/components/AllGamesDataTable/index.ts
 create mode 100644 resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.tsx
 create mode 100644 resources/js/features/game-list/components/AllGamesMainRoot/index.ts
 delete mode 100644 resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableRowActions.tsx
 rename resources/js/features/game-list/components/WantToPlayGamesMainRoot/{WantToPlayGamesRoot.test.tsx => WantToPlayGamesMainRoot.test.tsx} (97%)
 rename resources/js/features/game-list/components/WantToPlayGamesMainRoot/{WantToPlayGamesRoot.tsx => WantToPlayGamesMainRoot.tsx} (97%)
 create mode 100644 resources/js/features/game-list/utils/allGamesDefaultFilters.ts
 create mode 100644 resources/js/features/game-list/utils/getAreNonDefaultFiltersSet.ts
 create mode 100644 resources/js/pages/game-list/index.tsx

diff --git a/app/Community/Requests/UserGameListRequest.php b/app/Community/Requests/UserGameListRequest.php
index 8facdb6ac..a1b5bc1d0 100644
--- a/app/Community/Requests/UserGameListRequest.php
+++ b/app/Community/Requests/UserGameListRequest.php
@@ -4,56 +4,12 @@
 
 namespace App\Community\Requests;
 
-use Illuminate\Foundation\Http\FormRequest;
+use App\Platform\Requests\GameListRequest;
 
-class UserGameListRequest extends FormRequest
+class UserGameListRequest extends GameListRequest
 {
     public function authorize(): bool
     {
         return true;
     }
-
-    public function rules(): array
-    {
-        return [
-            'page.number' => 'integer|min:1',
-            'sort' => 'string|in:title,system,achievementsPublished,pointsTotal,retroRatio,lastUpdated,releasedAt,playersTotal,numVisibleLeaderboards,numUnresolvedTickets,progress,-title,-system,-achievementsPublished,-pointsTotal,-retroRatio,-lastUpdated,-releasedAt,-playersTotal,-numVisibleLeaderboards,-numUnresolvedTickets,-progress',
-            'filter.*' => 'string',
-        ];
-    }
-
-    public function getPage(): int
-    {
-        return (int) $this->input('page.number', 1);
-    }
-
-    public function getSort(): array
-    {
-        $sortParam = $this->input('sort', 'title');
-        $sortDirection = 'asc';
-
-        if (str_starts_with($sortParam, '-')) {
-            $sortDirection = 'desc';
-            $sortParam = ltrim($sortParam, '-');
-        }
-
-        return [
-            'field' => $sortParam,
-            'direction' => $sortDirection,
-        ];
-    }
-
-    public function getFilters(): array
-    {
-        $filters = [];
-        foreach ($this->query('filter', []) as $key => $value) {
-            $filters[$key] = explode(',', $value);
-        }
-
-        if (!isset($filters['achievementsPublished'])) {
-            $filters['achievementsPublished'] = ['has'];
-        }
-
-        return $filters;
-    }
 }
diff --git a/app/Models/Emulator.php b/app/Models/Emulator.php
index 06decb5a8..31d477a1d 100644
--- a/app/Models/Emulator.php
+++ b/app/Models/Emulator.php
@@ -50,6 +50,10 @@ class Emulator extends BaseModel implements HasMedia
         'source_url',
     ];
 
+    protected $casts = [
+        'active' => 'boolean',
+    ];
+
     public static function boot()
     {
         parent::boot();
diff --git a/app/Models/System.php b/app/Models/System.php
index 82e26a406..52e7d669b 100644
--- a/app/Models/System.php
+++ b/app/Models/System.php
@@ -78,6 +78,10 @@ protected static function newFactory(): SystemFactory
         'active',
     ];
 
+    protected $casts = [
+        'active' => 'boolean',
+    ];
+
     // == constants
 
     public const Arduboy = 71;
diff --git a/app/Platform/Actions/BuildGameListAction.php b/app/Platform/Actions/BuildGameListAction.php
index ec8e299e8..9480a4f57 100644
--- a/app/Platform/Actions/BuildGameListAction.php
+++ b/app/Platform/Actions/BuildGameListAction.php
@@ -11,6 +11,7 @@
 use App\Models\Game;
 use App\Models\Leaderboard;
 use App\Models\PlayerGame;
+use App\Models\System;
 use App\Models\Ticket;
 use App\Models\User;
 use App\Platform\Data\GameData;
@@ -156,6 +157,16 @@ private function buildBaseQuery(GameListType $listType, ?User $user = null): Bui
         }
 
         switch ($listType) {
+            case GameListType::AllGames:
+                // Exclude events, hubs, subsets, and inactive systems.
+                $query->where('GameData.ConsoleID', '!=', System::Events)
+                    ->where('GameData.ConsoleID', '!=', System::Hubs)
+                    ->where('GameData.Title', 'not like', "%[Subset -%")
+                    ->whereHas('system', function ($q) {
+                        return $q->active();
+                    });
+                break;
+
             case GameListType::UserPlay:
                 $query->whereHas('gameListEntries', function ($query) use ($user) {
                     $query->where('user_id', $user->id)
@@ -165,7 +176,6 @@ private function buildBaseQuery(GameListType $listType, ?User $user = null): Bui
 
             // TODO implement these other use cases
             case GameListType::UserDevelop:
-            case GameListType::AllGames:
             case GameListType::System:
             case GameListType::Hub:
             case GameListType::DeveloperSets:
diff --git a/app/Platform/Controllers/Api/GameListApiController.php b/app/Platform/Controllers/Api/GameListApiController.php
new file mode 100644
index 000000000..1cf8e14ba
--- /dev/null
+++ b/app/Platform/Controllers/Api/GameListApiController.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Platform\Controllers\Api;
+
+use App\Platform\Requests\GameListRequest;
+use App\Http\Controller;
+use App\Platform\Actions\BuildGameListAction;
+use App\Platform\Enums\GameListType;
+use Illuminate\Http\JsonResponse;
+
+class GameListApiController extends Controller
+{
+    public function index(GameListRequest $request): JsonResponse
+    {
+        $paginatedData = (new BuildGameListAction())->execute(
+            GameListType::AllGames,
+            user: $request->user(),
+            page: $request->getPage(),
+            filters: $request->getFilters(),
+            sort: $request->getSort(),
+        );
+
+        return response()->json($paginatedData);
+    }
+
+    public function create(): void
+    {
+    }
+
+    public function store(): void
+    {
+    }
+
+    public function show(): void
+    {
+    }
+
+    public function edit(): void
+    {
+    }
+
+    public function update(): void
+    {
+    }
+
+    public function destroy(): void
+    {
+    }
+}
\ No newline at end of file
diff --git a/app/Platform/Controllers/GameListController.php b/app/Platform/Controllers/GameListController.php
new file mode 100644
index 000000000..8ae16270d
--- /dev/null
+++ b/app/Platform/Controllers/GameListController.php
@@ -0,0 +1,74 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Platform\Controllers;
+
+use App\Data\UserPermissionsData;
+use App\Http\Controller;
+use App\Models\System;
+use App\Models\User;
+use App\Platform\Actions\BuildGameListAction;
+use App\Platform\Data\GameListPagePropsData;
+use App\Platform\Data\SystemData;
+use App\Platform\Enums\GameListType;
+use App\Platform\Requests\GameListRequest;
+use Inertia\Inertia;
+use Inertia\Response as InertiaResponse;
+
+class GameListController extends Controller
+{
+    public function index(GameListRequest $request): InertiaResponse
+    {
+        /** @var ?User $user */
+        $user = $request->user();
+
+        $paginatedData = (new BuildGameListAction())->execute(
+            GameListType::AllGames,
+            user: $user,
+            page: $request->getPage(),
+            filters: $request->getFilters(),
+            sort: $request->getSort(),
+        );
+
+        $filterableSystemOptions = System::active()
+            ->get()
+            ->map(fn ($system) => SystemData::fromSystem($system)->include('nameShort'))
+            ->values()
+            ->all();
+
+        $can = UserPermissionsData::fromUser($user)->include('develop');
+
+        $props = new GameListPagePropsData(
+            paginatedGameListEntries: $paginatedData,
+            filterableSystemOptions: $filterableSystemOptions,
+            can: $can,
+        );
+
+        return Inertia::render('game-list/index', $props);
+    }
+
+    public function create(): void
+    {
+    }
+
+    public function store(): void
+    {
+    }
+
+    public function show(): void
+    {
+    }
+
+    public function edit(): void
+    {
+    }
+
+    public function update(): void
+    {
+    }
+
+    public function destroy(): void
+    {
+    }
+}
diff --git a/app/Platform/Data/GameListPagePropsData.php b/app/Platform/Data/GameListPagePropsData.php
new file mode 100644
index 000000000..897ca0170
--- /dev/null
+++ b/app/Platform/Data/GameListPagePropsData.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Platform\Data;
+
+use App\Data\PaginatedData;
+use App\Data\UserPermissionsData;
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript('GameListPageProps<TItems = App.Platform.Data.GameListEntry>')]
+class GameListPagePropsData extends Data
+{
+    /**
+     * @param SystemData[] $filterableSystemOptions
+     */
+    public function __construct(
+        public PaginatedData $paginatedGameListEntries,
+        public array $filterableSystemOptions,
+        public UserPermissionsData $can,
+    ) {
+    }
+}
diff --git a/app/Platform/Requests/GameListRequest.php b/app/Platform/Requests/GameListRequest.php
new file mode 100644
index 000000000..7f508262f
--- /dev/null
+++ b/app/Platform/Requests/GameListRequest.php
@@ -0,0 +1,54 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Platform\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class GameListRequest extends FormRequest
+{
+    public function rules(): array
+    {
+        return [
+            'page.number' => 'integer|min:1',
+            'sort' => 'string|in:title,system,achievementsPublished,pointsTotal,retroRatio,lastUpdated,releasedAt,playersTotal,numVisibleLeaderboards,numUnresolvedTickets,progress,-title,-system,-achievementsPublished,-pointsTotal,-retroRatio,-lastUpdated,-releasedAt,-playersTotal,-numVisibleLeaderboards,-numUnresolvedTickets,-progress',
+            'filter.*' => 'string',
+        ];
+    }
+
+    public function getPage(): int
+    {
+        return (int) $this->input('page.number', 1);
+    }
+
+    public function getSort(): array
+    {
+        $sortParam = $this->input('sort', 'title');
+        $sortDirection = 'asc';
+
+        if (str_starts_with($sortParam, '-')) {
+            $sortDirection = 'desc';
+            $sortParam = ltrim($sortParam, '-');
+        }
+
+        return [
+            'field' => $sortParam,
+            'direction' => $sortDirection,
+        ];
+    }
+
+    public function getFilters(): array
+    {
+        $filters = [];
+        foreach ($this->query('filter', []) as $key => $value) {
+            $filters[$key] = explode(',', $value);
+        }
+
+        if (!isset($filters['achievementsPublished'])) {
+            $filters['achievementsPublished'] = ['has'];
+        }
+
+        return $filters;
+    }
+}
diff --git a/app/Platform/RouteServiceProvider.php b/app/Platform/RouteServiceProvider.php
index d86c3b6e4..93c92c12b 100755
--- a/app/Platform/RouteServiceProvider.php
+++ b/app/Platform/RouteServiceProvider.php
@@ -6,8 +6,10 @@
 
 use App\Models\GameHash;
 use App\Platform\Controllers\AchievementController;
+use App\Platform\Controllers\Api\GameListApiController;
 use App\Platform\Controllers\GameController;
 use App\Platform\Controllers\GameHashController;
+use App\Platform\Controllers\GameListController;
 use App\Platform\Controllers\PlayerAchievementController;
 use App\Platform\Controllers\PlayerGameController;
 use App\Platform\Controllers\ReportAchievementIssueController;
@@ -44,8 +46,14 @@ public function map(): void
     protected function mapWebRoutes(): void
     {
         Route::middleware(['web', 'csp'])->group(function () {
+            Route::group(['prefix' => 'internal-api'], function () {
+                Route::get('game-list', [GameListApiController::class, 'index'])->name('api.game-list.index');
+            });
+
             Route::middleware(['inertia'])->group(function () {
                 Route::get('game/{game}/hashes', [GameHashController::class, 'index'])->name('game.hashes.index');
+
+                Route::get('game-list', [GameListController::class, 'index'])->name('game-list.index');
             });
 
             // Route::get('achievement/{achievement}{slug?}', [AchievementController::class, 'show'])->name('achievement.show');
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableColumnHeader.tsx b/resources/js/common/components/DataTableColumnHeader/DataTableColumnHeader.tsx
similarity index 90%
rename from resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableColumnHeader.tsx
rename to resources/js/common/components/DataTableColumnHeader/DataTableColumnHeader.tsx
index 8634586d7..b0aef32a5 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableColumnHeader.tsx
+++ b/resources/js/common/components/DataTableColumnHeader/DataTableColumnHeader.tsx
@@ -2,18 +2,19 @@ import type { Column, Table } from '@tanstack/react-table';
 import type { FC, HTMLAttributes, ReactNode } from 'react';
 import type { IconType } from 'react-icons/lib';
 import { RxArrowDown, RxArrowUp, RxCaretSort, RxEyeNone } from 'react-icons/rx';
+import type { RouteName } from 'ziggy-js';
 
-import { BaseButton } from '@/common/components/+vendor/BaseButton';
+import { cn } from '@/utils/cn';
+
+import { useDataTablePrefetchSort } from '../../hooks/useDataTablePrefetchSort';
+import { BaseButton } from '../+vendor/BaseButton';
 import {
   BaseDropdownMenu,
   BaseDropdownMenuContent,
   BaseDropdownMenuItem,
   BaseDropdownMenuSeparator,
   BaseDropdownMenuTrigger,
-} from '@/common/components/+vendor/BaseDropdownMenu';
-import { cn } from '@/utils/cn';
-
-import { usePrefetchSort } from '../../hooks/usePrefetchSort';
+} from '../+vendor/BaseDropdownMenu';
 
 type SortDirection = 'asc' | 'desc';
 type SortConfig = {
@@ -48,6 +49,8 @@ interface DataTableColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLD
   table: Table<TData>;
 
   sortType?: SortConfigKind;
+  /** The controller route name where client-side calls for this datatable are made. */
+  tableApiRouteName?: RouteName;
 }
 
 export function DataTableColumnHeader<TData, TValue>({
@@ -55,8 +58,9 @@ export function DataTableColumnHeader<TData, TValue>({
   column,
   table,
   sortType = 'default',
+  tableApiRouteName = 'api.game-list.index',
 }: DataTableColumnHeaderProps<TData, TValue>): ReactNode {
-  const { prefetchSort } = usePrefetchSort(table);
+  const { prefetchSort } = useDataTablePrefetchSort(table, tableApiRouteName);
 
   if (!column.getCanSort()) {
     return <div className={cn(className)}>{column.columnDef.meta?.label}</div>;
diff --git a/resources/js/common/components/DataTableColumnHeader/index.ts b/resources/js/common/components/DataTableColumnHeader/index.ts
new file mode 100644
index 000000000..6aa469ad2
--- /dev/null
+++ b/resources/js/common/components/DataTableColumnHeader/index.ts
@@ -0,0 +1 @@
+export * from './DataTableColumnHeader';
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableFacetedFilter.tsx b/resources/js/common/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
similarity index 92%
rename from resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableFacetedFilter.tsx
rename to resources/js/common/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
index 040d2b1ac..233fa4bb7 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableFacetedFilter.tsx
+++ b/resources/js/common/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
@@ -2,8 +2,11 @@ import type { Column } from '@tanstack/react-table';
 import type { FC } from 'react';
 import { RxCheck, RxPlusCircled } from 'react-icons/rx';
 
-import { BaseBadge } from '@/common/components/+vendor/BaseBadge';
-import { BaseButton } from '@/common/components/+vendor/BaseButton';
+import { cn } from '@/utils/cn';
+
+import { buildTrackingClassNames } from '../../utils/buildTrackingClassNames';
+import { BaseBadge } from '../+vendor/BaseBadge';
+import { BaseButton } from '../+vendor/BaseButton';
 import {
   BaseCommand,
   BaseCommandEmpty,
@@ -12,15 +15,9 @@ import {
   BaseCommandItem,
   BaseCommandList,
   BaseCommandSeparator,
-} from '@/common/components/+vendor/BaseCommand';
-import {
-  BasePopover,
-  BasePopoverContent,
-  BasePopoverTrigger,
-} from '@/common/components/+vendor/BasePopover';
-import { BaseSeparator } from '@/common/components/+vendor/BaseSeparator';
-import { buildTrackingClassNames } from '@/common/utils/buildTrackingClassNames';
-import { cn } from '@/utils/cn';
+} from '../+vendor/BaseCommand';
+import { BasePopover, BasePopoverContent, BasePopoverTrigger } from '../+vendor/BasePopover';
+import { BaseSeparator } from '../+vendor/BaseSeparator';
 
 interface DataTableFacetedFilterProps<TData, TValue> {
   options: Array<{
diff --git a/resources/js/common/components/DataTableFacetedFilter/index.ts b/resources/js/common/components/DataTableFacetedFilter/index.ts
new file mode 100644
index 000000000..ff3e45f9c
--- /dev/null
+++ b/resources/js/common/components/DataTableFacetedFilter/index.ts
@@ -0,0 +1 @@
+export * from './DataTableFacetedFilter';
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTablePagination.tsx b/resources/js/common/components/DataTablePagination/DataTablePagination.tsx
similarity index 85%
rename from resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTablePagination.tsx
rename to resources/js/common/components/DataTablePagination/DataTablePagination.tsx
index 377cf63d8..16c37b2f0 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTablePagination.tsx
+++ b/resources/js/common/components/DataTablePagination/DataTablePagination.tsx
@@ -1,22 +1,26 @@
 import type { Table } from '@tanstack/react-table';
 import type { ReactNode } from 'react';
 import { LuArrowLeft, LuArrowLeftToLine, LuArrowRight, LuArrowRightToLine } from 'react-icons/lu';
+import type { RouteName } from 'ziggy-js';
 
-import { BaseButton } from '@/common/components/+vendor/BaseButton';
-import { BasePagination, BasePaginationContent } from '@/common/components/+vendor/BasePagination';
-
-import { usePrefetchPagination } from '../../hooks/usePrefetchPagination';
+import { useDataTablePrefetchPagination } from '../../hooks/useDataTablePrefetchPagination';
+import { BaseButton } from '../+vendor/BaseButton';
+import { BasePagination, BasePaginationContent } from '../+vendor/BasePagination';
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
+  tableApiRouteName?: RouteName;
 }
 
-export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>): ReactNode {
+export function DataTablePagination<TData>({
+  table,
+  tableApiRouteName = 'api.game-list.index',
+}: DataTablePaginationProps<TData>): ReactNode {
   const { pagination } = table.getState();
 
   // Given the user hovers over a pagination button, it is very likely they will
   // wind up clicking the button. Queries are cheap, so prefetch the destination page.
-  const { prefetchPagination } = usePrefetchPagination(table);
+  const { prefetchPagination } = useDataTablePrefetchPagination(table, tableApiRouteName);
 
   const handlePageChange = (newPageIndex: number, isNext: boolean) => {
     table.setPageIndex(newPageIndex);
diff --git a/resources/js/common/components/DataTablePagination/index.ts b/resources/js/common/components/DataTablePagination/index.ts
new file mode 100644
index 000000000..374ba7bfc
--- /dev/null
+++ b/resources/js/common/components/DataTablePagination/index.ts
@@ -0,0 +1 @@
+export * from './DataTablePagination';
diff --git a/resources/js/common/components/DataTableRowActions/DataTableRowActions.tsx b/resources/js/common/components/DataTableRowActions/DataTableRowActions.tsx
new file mode 100644
index 000000000..c393697ef
--- /dev/null
+++ b/resources/js/common/components/DataTableRowActions/DataTableRowActions.tsx
@@ -0,0 +1,115 @@
+import { useQueryClient } from '@tanstack/react-query';
+import type { Row } from '@tanstack/react-table';
+import { MdClose } from 'react-icons/md';
+
+import { usePageProps } from '@/common/hooks/usePageProps';
+import { cn } from '@/utils/cn';
+
+import { useAddToBacklogMutation } from '../../hooks/useAddToBacklogMutation';
+import { useRemoveFromBacklogMutation } from '../../hooks/useRemoveFromBacklogMutation';
+import { BaseButton } from '../+vendor/BaseButton';
+import { toastMessage } from '../+vendor/BaseToaster';
+import { BaseTooltip, BaseTooltipContent, BaseTooltipTrigger } from '../+vendor/BaseTooltip';
+
+/**
+ * If the table row needs to have more than one action, it should go into a menu.
+ * @see https://ui.shadcn.com/examples/tasks
+ */
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+}
+
+export function DataTableRowActions<TData>({ row }: DataTableRowActionsProps<TData>) {
+  const { auth } = usePageProps();
+
+  const queryClient = useQueryClient();
+
+  const removeFromBacklogMutation = useRemoveFromBacklogMutation();
+
+  const addToBacklogMutation = useAddToBacklogMutation();
+
+  const rowData = row.original as Partial<App.Platform.Data.GameListEntry>;
+  const gameId = rowData?.game?.id ?? 0;
+  const gameTitle = rowData?.game?.title ?? '';
+  const isInBacklog = rowData?.isInBacklog ?? false;
+
+  // TODO put this in a hook? useBacklog()?
+  const addToBacklog = (gameId: number, options?: Partial<{ isUndo: boolean }>) => {
+    toastMessage.promise(addToBacklogMutation.mutateAsync(gameId), {
+      loading: options?.isUndo ? 'Restoring...' : 'Adding...',
+      success: () => {
+        // Trigger a refetch of the current table page data and bust the entire cache.
+        queryClient.invalidateQueries({ queryKey: ['data'] });
+
+        return `${options?.isUndo ? 'Restored' : 'Added'} ${gameTitle}!`;
+      },
+      error: 'Something went wrong.',
+    });
+  };
+
+  // TODO put this in a hook? useBacklog()?
+  const removeFromBacklog = (gameId: number) => {
+    toastMessage.promise(removeFromBacklogMutation.mutateAsync(gameId), {
+      action: {
+        label: 'Undo',
+        onClick: () => addToBacklog(gameId, { isUndo: true }),
+      },
+      loading: 'Removing...',
+      success: () => {
+        // Trigger a refetch of the current table page data and bust the entire cache.
+        queryClient.invalidateQueries({ queryKey: ['data'] });
+
+        return `Removed ${gameTitle}!`;
+      },
+      error: 'Something went wrong.',
+    });
+  };
+
+  const handleToggleFromBacklogClick = () => {
+    // This should never happen.
+    if (!gameId) {
+      throw new Error('No game ID.');
+    }
+
+    if (!auth?.user) {
+      // TODO handle user unauthenticated
+      return;
+    }
+
+    if (isInBacklog) {
+      removeFromBacklog(gameId);
+    } else {
+      addToBacklog(gameId);
+    }
+  };
+
+  return (
+    <BaseTooltip>
+      <BaseTooltipTrigger asChild>
+        <div className="flex justify-end">
+          <BaseButton
+            variant="ghost"
+            className="group flex h-8 w-8 p-0 text-link"
+            onClick={handleToggleFromBacklogClick}
+          >
+            <MdClose
+              className={cn(
+                'h-4 w-4 transition',
+                isInBacklog ? 'text-red-600 light:text-red-500' : 'rotate-45',
+              )}
+            />
+
+            <span className="sr-only">
+              {isInBacklog ? 'Remove from Want To Play Games' : 'Add to Want to Play Games'}
+            </span>
+          </BaseButton>
+        </div>
+      </BaseTooltipTrigger>
+
+      <BaseTooltipContent>
+        <p>{isInBacklog ? 'Remove from Want to Play Games' : 'Add to Want to Play Games'}</p>
+      </BaseTooltipContent>
+    </BaseTooltip>
+  );
+}
diff --git a/resources/js/common/components/DataTableRowActions/index.ts b/resources/js/common/components/DataTableRowActions/index.ts
new file mode 100644
index 000000000..f54451b0c
--- /dev/null
+++ b/resources/js/common/components/DataTableRowActions/index.ts
@@ -0,0 +1 @@
+export * from './DataTableRowActions';
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableSearchInput/DataTableSearchInput.tsx b/resources/js/common/components/DataTableSearchInput/DataTableSearchInput.tsx
similarity index 100%
rename from resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableSearchInput/DataTableSearchInput.tsx
rename to resources/js/common/components/DataTableSearchInput/DataTableSearchInput.tsx
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableSearchInput/index.ts b/resources/js/common/components/DataTableSearchInput/index.ts
similarity index 100%
rename from resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableSearchInput/index.ts
rename to resources/js/common/components/DataTableSearchInput/index.ts
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableSearchInput/useSearchInputHotkey.ts b/resources/js/common/components/DataTableSearchInput/useSearchInputHotkey.ts
similarity index 100%
rename from resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableSearchInput/useSearchInputHotkey.ts
rename to resources/js/common/components/DataTableSearchInput/useSearchInputHotkey.ts
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableViewOptions.tsx b/resources/js/common/components/DataTableViewOptions/DataTableViewOptions.tsx
similarity index 92%
rename from resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableViewOptions.tsx
rename to resources/js/common/components/DataTableViewOptions/DataTableViewOptions.tsx
index 3d6ef6ad0..59069e4ce 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableViewOptions.tsx
+++ b/resources/js/common/components/DataTableViewOptions/DataTableViewOptions.tsx
@@ -1,7 +1,7 @@
 import type { Table } from '@tanstack/react-table';
 import { RxMixerHorizontal } from 'react-icons/rx';
 
-import { BaseButton } from '@/common/components/+vendor/BaseButton';
+import { BaseButton } from '../+vendor/BaseButton';
 import {
   BaseDropdownMenu,
   BaseDropdownMenuCheckboxItem,
@@ -9,7 +9,7 @@ import {
   BaseDropdownMenuLabel,
   BaseDropdownMenuSeparator,
   BaseDropdownMenuTrigger,
-} from '@/common/components/+vendor/BaseDropdownMenu';
+} from '../+vendor/BaseDropdownMenu';
 
 interface DataTableViewOptionsProps<TData> {
   table: Table<TData>;
diff --git a/resources/js/common/components/DataTableViewOptions/index.ts b/resources/js/common/components/DataTableViewOptions/index.ts
new file mode 100644
index 000000000..122358e02
--- /dev/null
+++ b/resources/js/common/components/DataTableViewOptions/index.ts
@@ -0,0 +1 @@
+export * from './DataTableViewOptions';
diff --git a/resources/js/features/game-list/hooks/usePrefetchPagination.ts b/resources/js/common/hooks/useDataTablePrefetchPagination.ts
similarity index 70%
rename from resources/js/features/game-list/hooks/usePrefetchPagination.ts
rename to resources/js/common/hooks/useDataTablePrefetchPagination.ts
index 70f9c1dba..752fd05d9 100644
--- a/resources/js/features/game-list/hooks/usePrefetchPagination.ts
+++ b/resources/js/common/hooks/useDataTablePrefetchPagination.ts
@@ -1,22 +1,27 @@
 import { useQueryClient } from '@tanstack/react-query';
 import type { Table } from '@tanstack/react-table';
 import axios from 'axios';
+import type { RouteName } from 'ziggy-js';
 
-import { buildGameListQueryFilterParams } from '@/common/utils/buildGameListQueryFilterParams';
-import { buildGameListQuerySortParam } from '@/common/utils/buildGameListQuerySortParam';
+import { buildGameListQueryFilterParams } from '../utils/buildGameListQueryFilterParams';
+import { buildGameListQuerySortParam } from '../utils/buildGameListQuerySortParam';
 
 /**
  * Given the user hovers over a pagination button, it is very likely they will
  * wind up clicking the button. Queries are cheap, so prefetch the destination page.
  */
 
-export function usePrefetchPagination<TData>(table: Table<TData>) {
+export function useDataTablePrefetchPagination<TData>(
+  table: Table<TData>,
+  tableApiRouteName: RouteName,
+) {
   const { columnFilters, pagination, sorting } = table.getState();
 
   const queryClient = useQueryClient();
 
   const prefetchPagination = (newPageIndex: number) => {
     queryClient.prefetchQuery({
+      // eslint-disable-next-line @tanstack/query/exhaustive-deps -- tableApiRouteName is not part of the key
       queryKey: [
         'data',
         { pageIndex: newPageIndex, pageSize: pagination.pageSize },
@@ -26,7 +31,7 @@ export function usePrefetchPagination<TData>(table: Table<TData>) {
       staleTime: 1 * 60 * 1000, // 1 minute
       queryFn: async () => {
         const response = await axios.get<App.Data.PaginatedData<App.Platform.Data.GameListEntry>>(
-          route('api.user-game-list.index', {
+          route(tableApiRouteName, {
             'page[number]': newPageIndex + 1,
             sort: buildGameListQuerySortParam(sorting),
             ...buildGameListQueryFilterParams(columnFilters),
diff --git a/resources/js/features/game-list/hooks/usePrefetchSort.ts b/resources/js/common/hooks/useDataTablePrefetchSort.ts
similarity index 70%
rename from resources/js/features/game-list/hooks/usePrefetchSort.ts
rename to resources/js/common/hooks/useDataTablePrefetchSort.ts
index 2e40077bf..bfb0d819c 100644
--- a/resources/js/features/game-list/hooks/usePrefetchSort.ts
+++ b/resources/js/common/hooks/useDataTablePrefetchSort.ts
@@ -1,27 +1,29 @@
 import { useQueryClient } from '@tanstack/react-query';
 import type { Table } from '@tanstack/react-table';
 import axios from 'axios';
+import type { RouteName } from 'ziggy-js';
 
-import { buildGameListQueryFilterParams } from '@/common/utils/buildGameListQueryFilterParams';
-import { buildGameListQuerySortParam } from '@/common/utils/buildGameListQuerySortParam';
+import { buildGameListQueryFilterParams } from '../utils/buildGameListQueryFilterParams';
+import { buildGameListQuerySortParam } from '../utils/buildGameListQuerySortParam';
 
 /**
  * Given the user hovers over a sort option, it is very likely they will
  * wind up clicking the option. Queries are cheap, so prefetch the destination.
  */
 
-export function usePrefetchSort<TData>(table: Table<TData>) {
+export function useDataTablePrefetchSort<TData>(table: Table<TData>, tableApiRouteName: RouteName) {
   const { columnFilters, pagination } = table.getState();
 
   const queryClient = useQueryClient();
 
   const prefetchSort = (columnId = '', direction: 'asc' | 'desc') => {
     queryClient.prefetchQuery({
+      // eslint-disable-next-line @tanstack/query/exhaustive-deps -- tableApiRouteName is not part of the key
       queryKey: ['data', pagination, [{ id: columnId, desc: direction === 'desc' }], columnFilters],
       staleTime: 1 * 60 * 1000, // 1 minute
       queryFn: async () => {
         const response = await axios.get<App.Data.PaginatedData<App.Platform.Data.GameListEntry>>(
-          route('api.user-game-list.index', {
+          route(tableApiRouteName, {
             'page[number]': pagination.pageIndex + 1,
             sort: buildGameListQuerySortParam([{ id: columnId, desc: direction === 'desc' }]),
             ...buildGameListQueryFilterParams(columnFilters),
diff --git a/resources/js/common/hooks/useGameListQuery/useGameListQuery.ts b/resources/js/common/hooks/useGameListQuery/useGameListQuery.ts
index 11c729cb5..b75e25a0e 100644
--- a/resources/js/common/hooks/useGameListQuery/useGameListQuery.ts
+++ b/resources/js/common/hooks/useGameListQuery/useGameListQuery.ts
@@ -1,6 +1,7 @@
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import type { ColumnFiltersState, PaginationState, SortingState } from '@tanstack/react-table';
 import axios from 'axios';
+import type { RouteName } from 'ziggy-js';
 
 import { buildGameListQueryFilterParams } from '../../utils/buildGameListQueryFilterParams';
 import { buildGameListQuerySortParam } from '../../utils/buildGameListQuerySortParam';
@@ -11,15 +12,23 @@ interface UseGameListQueryProps {
   pagination: PaginationState;
   sorting: SortingState;
   columnFilters: ColumnFiltersState;
+
+  apiRouteName?: RouteName;
 }
 
-export function useGameListQuery({ columnFilters, pagination, sorting }: UseGameListQueryProps) {
+export function useGameListQuery({
+  columnFilters,
+  pagination,
+  sorting,
+  apiRouteName = 'api.game-list.index',
+}: UseGameListQueryProps) {
   const dataQuery = useQuery<App.Data.PaginatedData<App.Platform.Data.GameListEntry>>({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps -- tableApiRouteName is not part of the key
     queryKey: ['data', pagination, sorting, columnFilters],
 
     queryFn: async () => {
       const response = await axios.get<App.Data.PaginatedData<App.Platform.Data.GameListEntry>>(
-        route('api.user-game-list.index', {
+        route(apiRouteName, {
           'page[number]': pagination.pageIndex + 1,
           sort: buildGameListQuerySortParam(sorting),
           ...buildGameListQueryFilterParams(columnFilters),
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
new file mode 100644
index 000000000..64581c18b
--- /dev/null
+++ b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
@@ -0,0 +1,164 @@
+import type {
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+} from '@tanstack/react-table';
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { type Dispatch, type FC, type SetStateAction, useMemo } from 'react';
+
+import {
+  BaseTable,
+  BaseTableBody,
+  BaseTableCell,
+  BaseTableHead,
+  BaseTableHeader,
+  BaseTableRow,
+} from '@/common/components/+vendor/BaseTable';
+import { DataTablePagination } from '@/common/components/DataTablePagination';
+import { useGameListQuery } from '@/common/hooks/useGameListQuery';
+import { usePageProps } from '@/common/hooks/usePageProps';
+import { cn } from '@/utils/cn';
+
+import { allGamesDefaultFilters } from '../../utils/allGamesDefaultFilters';
+import { AllGamesDataTableToolbar } from './AllGamesDataTableToolbar';
+import { buildColumnDefinitions } from './buildColumnDefinitions';
+
+// These values are all generated from `useGameListState`.
+interface AllGamesDataTableProps {
+  columnFilters: ColumnFiltersState;
+  columnVisibility: VisibilityState;
+  pagination: PaginationState;
+  setColumnFilters: Dispatch<SetStateAction<ColumnFiltersState>>;
+  setColumnVisibility: Dispatch<SetStateAction<VisibilityState>>;
+  setPagination: Dispatch<SetStateAction<PaginationState>>;
+  setSorting: Dispatch<SetStateAction<SortingState>>;
+  sorting: SortingState;
+}
+
+export const AllGamesDataTable: FC<AllGamesDataTableProps> = ({
+  columnFilters,
+  columnVisibility,
+  pagination,
+  setColumnFilters,
+  setColumnVisibility,
+  setPagination,
+  setSorting,
+  sorting,
+}) => {
+  const { can } = usePageProps<App.Community.Data.UserGameListPageProps>();
+
+  const gameListQuery = useGameListQuery({ columnFilters, pagination, sorting });
+
+  const table = useReactTable({
+    columns: useMemo(
+      () =>
+        buildColumnDefinitions({
+          canSeeOpenTicketsColumn: can.develop ?? false,
+        }),
+      [can.develop],
+    ),
+    data: gameListQuery.data?.items ?? [],
+    manualPagination: true,
+    manualSorting: true,
+    manualFiltering: true,
+    rowCount: gameListQuery.data?.total,
+    pageCount: gameListQuery.data?.lastPage,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnFiltersChange: (updateOrValue) => {
+      table.setPageIndex(0);
+
+      setColumnFilters(updateOrValue);
+    },
+    onPaginationChange: (newPaginationValue) => {
+      setPagination(newPaginationValue);
+    },
+    onSortingChange: (newSortingValue) => {
+      table.setPageIndex(0);
+
+      setSorting(newSortingValue);
+    },
+    getCoreRowModel: getCoreRowModel(),
+    state: { columnFilters, columnVisibility, pagination, sorting },
+  });
+
+  const visibleColumnCount = table.getVisibleFlatColumns().length;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <AllGamesDataTableToolbar
+        table={table}
+        unfilteredTotal={gameListQuery.data?.unfilteredTotal ?? null}
+        defaultColumnFilters={allGamesDefaultFilters}
+      />
+
+      {/* TODO reusable component */}
+      <BaseTable
+        containerClassName={cn(
+          'overflow-auto rounded-md border border-neutral-700/80 bg-embed',
+          'light:border-neutral-300 lg:overflow-visible lg:rounded-sm',
+
+          // A sticky header cannot support this many columns. We have to drop stickiness.
+          visibleColumnCount > 8 ? 'lg:!overflow-x-scroll' : '',
+          visibleColumnCount > 10 ? 'xl:!overflow-x-scroll' : '',
+        )}
+      >
+        <BaseTableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <BaseTableRow
+              key={headerGroup.id}
+              className={cn(
+                'do-not-highlight bg-embed lg:sticky lg:top-[41px] lg:z-10',
+
+                // A sticky header cannot support this many columns. We have to drop stickiness.
+                visibleColumnCount > 8 ? 'lg:!top-0' : '',
+                visibleColumnCount > 10 ? 'xl:!top-0' : '',
+              )}
+            >
+              {headerGroup.headers.map((header) => {
+                return (
+                  <BaseTableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </BaseTableHead>
+                );
+              })}
+            </BaseTableRow>
+          ))}
+        </BaseTableHeader>
+
+        <BaseTableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <BaseTableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                {row.getVisibleCells().map((cell) => (
+                  <BaseTableCell
+                    key={cell.id}
+                    className={cn(
+                      cell.column.columnDef.meta?.align === 'right' ? 'pr-6 text-right' : '',
+                      cell.column.columnDef.meta?.align === 'center' ? 'text-center' : '',
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </BaseTableCell>
+                ))}
+              </BaseTableRow>
+            ))
+          ) : (
+            <BaseTableRow>
+              <BaseTableCell
+                colSpan={table.getAllColumns().length}
+                className="h-24 bg-embed text-center"
+              >
+                No results.
+              </BaseTableCell>
+            </BaseTableRow>
+          )}
+        </BaseTableBody>
+      </BaseTable>
+
+      <DataTablePagination table={table} />
+    </div>
+  );
+};
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
new file mode 100644
index 000000000..90f1dc54d
--- /dev/null
+++ b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
@@ -0,0 +1,104 @@
+import type { ColumnFiltersState, Table } from '@tanstack/react-table';
+import { RxCross2 } from 'react-icons/rx';
+
+import { BaseButton } from '@/common/components/+vendor/BaseButton';
+import { DataTableFacetedFilter } from '@/common/components/DataTableFacetedFilter';
+import { DataTableSearchInput } from '@/common/components/DataTableSearchInput';
+import { DataTableViewOptions } from '@/common/components/DataTableViewOptions';
+import { usePageProps } from '@/common/hooks/usePageProps';
+import { formatNumber } from '@/common/utils/l10n/formatNumber';
+
+import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
+
+interface AllGamesDataTableToolbarProps<TData> {
+  table: Table<TData>;
+  unfilteredTotal: number | null;
+
+  defaultColumnFilters?: ColumnFiltersState;
+}
+
+export function AllGamesDataTableToolbar<TData>({
+  table,
+  unfilteredTotal,
+  defaultColumnFilters = [],
+}: AllGamesDataTableToolbarProps<TData>) {
+  const { filterableSystemOptions } = usePageProps<App.Platform.Data.GameListPageProps>();
+
+  const currentFilters = table.getState().columnFilters;
+  const isFiltered = getAreNonDefaultFiltersSet(currentFilters, defaultColumnFilters);
+
+  const resetFiltersToDefault = () => {
+    if (defaultColumnFilters) {
+      table.setColumnFilters(defaultColumnFilters);
+    } else {
+      table.resetColumnFilters();
+    }
+  };
+
+  return (
+    <div className="flex w-full flex-col justify-between gap-2 md:flex-row">
+      <div className="flex w-full flex-col items-center gap-2 sm:flex-1 sm:flex-row">
+        <DataTableSearchInput table={table} />
+
+        {table.getColumn('system') ? (
+          <DataTableFacetedFilter
+            className="w-full sm:w-auto"
+            column={table.getColumn('system')}
+            title="System"
+            options={filterableSystemOptions
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map((system) => ({
+                label: system.name,
+                selectedLabel: system.nameShort,
+                value: String(system.id),
+              }))}
+          />
+        ) : null}
+
+        {table.getColumn('achievementsPublished') ? (
+          <DataTableFacetedFilter
+            className="w-full sm:w-auto"
+            column={table.getColumn('achievementsPublished')}
+            title="Has achievements"
+            options={[
+              { label: 'Yes', value: 'has' },
+              { label: 'No', value: 'none' },
+              { label: 'Either', value: 'either' },
+            ]}
+            isSearchable={false}
+            isSingleSelect={true}
+          />
+        ) : null}
+
+        {isFiltered ? (
+          <BaseButton
+            variant="ghost"
+            size="sm"
+            onClick={resetFiltersToDefault}
+            className="border-dashed px-2 text-link lg:px-3"
+          >
+            Reset <RxCross2 className="ml-2 h-4 w-4" />
+          </BaseButton>
+        ) : null}
+      </div>
+
+      <div className="flex items-center justify-between gap-3 md:justify-normal">
+        <p className="text-neutral-200 light:text-neutral-900">
+          {unfilteredTotal && unfilteredTotal !== table.options.rowCount ? (
+            <>
+              {formatNumber(table.options.rowCount ?? 0)} of {formatNumber(unfilteredTotal)}{' '}
+              {unfilteredTotal === 1 ? 'game' : 'games'}
+            </>
+          ) : (
+            <>
+              {formatNumber(table.options.rowCount ?? 0)}{' '}
+              {table.options.rowCount === 1 ? 'game' : 'games'}
+            </>
+          )}
+        </p>
+
+        <DataTableViewOptions table={table} />
+      </div>
+    </div>
+  );
+}
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/buildColumnDefinitions.tsx b/resources/js/features/game-list/components/AllGamesDataTable/buildColumnDefinitions.tsx
new file mode 100644
index 000000000..dc399a46d
--- /dev/null
+++ b/resources/js/features/game-list/components/AllGamesDataTable/buildColumnDefinitions.tsx
@@ -0,0 +1,257 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import utc from 'dayjs/plugin/utc';
+
+import { DataTableColumnHeader } from '@/common/components/DataTableColumnHeader';
+import { DataTableRowActions } from '@/common/components/DataTableRowActions';
+import { GameAvatar } from '@/common/components/GameAvatar';
+import { PlayerGameProgressBar } from '@/common/components/PlayerGameProgressBar';
+import { SystemChip } from '@/common/components/SystemChip';
+import { WeightedPointsContainer } from '@/common/components/WeightedPointsContainer';
+import { formatDate } from '@/common/utils/l10n/formatDate';
+import { formatNumber } from '@/common/utils/l10n/formatNumber';
+
+dayjs.extend(utc);
+dayjs.extend(localizedFormat);
+
+export function buildColumnDefinitions(options: {
+  canSeeOpenTicketsColumn: boolean;
+  forUsername?: string;
+}): ColumnDef<App.Platform.Data.GameListEntry>[] {
+  const columnDefinitions: ColumnDef<App.Platform.Data.GameListEntry>[] = [
+    {
+      id: 'title',
+      accessorKey: 'game',
+      meta: { label: 'Title' },
+      enableHiding: false,
+      header: ({ column, table }) => <DataTableColumnHeader column={column} table={table} />,
+      cell: ({ row }) => {
+        // TODO this should be a reusable component
+
+        if (!row.original.game) {
+          return null;
+        }
+
+        return (
+          <div className="max-w-fit">
+            <div className="max-w-[400px]">
+              <GameAvatar
+                {...row.original.game}
+                size={32}
+                showHoverCardProgressForUsername={options.forUsername}
+              />
+            </div>
+          </div>
+        );
+      },
+    },
+
+    {
+      id: 'system',
+      accessorKey: 'game',
+      meta: { label: 'System' },
+      header: ({ column, table }) => <DataTableColumnHeader column={column} table={table} />,
+      cell: ({ row }) => {
+        if (!row.original.game?.system) {
+          return null;
+        }
+
+        return <SystemChip {...row.original.game.system} />;
+      },
+    },
+
+    {
+      id: 'achievementsPublished',
+      accessorKey: 'game',
+      meta: { label: 'Achievements', align: 'right' },
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+      ),
+      cell: ({ row }) => {
+        const achievementsPublished = row.original.game?.achievementsPublished ?? 0;
+
+        return (
+          <p className={achievementsPublished === 0 ? 'text-muted' : ''}>{achievementsPublished}</p>
+        );
+      },
+    },
+
+    {
+      id: 'pointsTotal',
+      accessorKey: 'game',
+      meta: { label: 'Points', align: 'right' },
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+      ),
+      cell: ({ row }) => {
+        const pointsTotal = row.original.game?.pointsTotal ?? 0;
+        const pointsWeighted = row.original.game?.pointsWeighted ?? 0;
+
+        if (pointsTotal === 0) {
+          return <p className="text-muted">{pointsTotal}</p>;
+        }
+
+        return (
+          <p className="whitespace-nowrap">
+            {formatNumber(pointsTotal)}{' '}
+            <WeightedPointsContainer>({formatNumber(pointsWeighted)})</WeightedPointsContainer>
+          </p>
+        );
+      },
+    },
+
+    {
+      id: 'retroRatio',
+      accessorKey: 'game',
+      meta: { label: 'Rarity', align: 'right' },
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+      ),
+      cell: ({ row }) => {
+        const pointsTotal = row.original.game?.pointsTotal ?? 0;
+
+        if (pointsTotal === 0) {
+          return <p className="text-muted italic">none</p>;
+        }
+
+        const pointsWeighted = row.original.game?.pointsWeighted ?? 0;
+
+        const result = pointsWeighted / pointsTotal;
+
+        return <p>&times;{(Math.round((result + Number.EPSILON) * 100) / 100).toFixed(2)}</p>;
+      },
+    },
+
+    {
+      id: 'lastUpdated',
+      accessorKey: 'game',
+      meta: { label: 'Last Updated' },
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table} sortType="date" />
+      ),
+      cell: ({ row }) => {
+        const date = row.original.game?.lastUpdated ?? new Date();
+
+        return <p>{formatDate(dayjs.utc(date), 'll')}</p>;
+      },
+    },
+
+    {
+      id: 'releasedAt',
+      accessorKey: 'game',
+      meta: { label: 'Release Date' },
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table} sortType="date" />
+      ),
+      cell: ({ row }) => {
+        const date = row.original.game?.releasedAt ?? null;
+        const granularity = row.original.game?.releasedAtGranularity ?? 'day';
+
+        if (!date) {
+          return <p className="text-muted italic">unknown</p>;
+        }
+
+        const dayjsDate = dayjs.utc(date);
+        let formattedDate;
+        if (granularity === 'day') {
+          formattedDate = formatDate(dayjsDate, 'll');
+        } else if (granularity === 'month') {
+          formattedDate = dayjsDate.format('MMM YYYY');
+        } else {
+          formattedDate = dayjsDate.format('YYYY');
+        }
+
+        return <p>{formattedDate}</p>;
+      },
+    },
+
+    {
+      id: 'playersTotal',
+      accessorKey: 'game',
+      meta: { label: 'Players', align: 'right' },
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+      ),
+      cell: ({ row }) => {
+        const playersTotal = row.original.game?.playersTotal ?? 0;
+
+        return (
+          <p className={playersTotal === 0 ? 'text-muted' : ''}>{formatNumber(playersTotal)}</p>
+        );
+      },
+    },
+
+    {
+      id: 'numVisibleLeaderboards',
+      accessorKey: 'game',
+      meta: { label: 'Leaderboards', align: 'right' },
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+      ),
+      cell: ({ row }) => {
+        const numVisibleLeaderboards = row.original.game?.numVisibleLeaderboards ?? 0;
+
+        return (
+          <p className={numVisibleLeaderboards === 0 ? 'text-muted' : ''}>
+            {formatNumber(numVisibleLeaderboards)}
+          </p>
+        );
+      },
+    },
+  ];
+
+  if (options.canSeeOpenTicketsColumn) {
+    columnDefinitions.push({
+      id: 'numUnresolvedTickets',
+      accessorKey: 'game',
+      meta: { label: 'Tickets', align: 'right' },
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+      ),
+      cell: ({ row }) => {
+        const numUnresolvedTickets = row.original.game?.numUnresolvedTickets ?? 0;
+        const gameId = row.original.game?.id ?? 0;
+
+        return (
+          <a
+            href={route('game.tickets', { game: gameId, 'filter[achievement]': 'core' })}
+            className={numUnresolvedTickets === 0 ? 'text-muted' : ''}
+          >
+            {numUnresolvedTickets}
+          </a>
+        );
+      },
+    });
+  }
+
+  columnDefinitions.push(
+    ...([
+      {
+        id: 'progress',
+        accessorKey: 'game',
+        meta: { label: 'Progress', align: 'left' },
+        header: ({ column, table }) => (
+          <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+        ),
+        cell: ({ row }) => {
+          const { game, playerGame } = row.original;
+
+          return <PlayerGameProgressBar game={game} playerGame={playerGame} />;
+        },
+      },
+
+      {
+        id: 'actions',
+        cell: ({ row }) => (
+          // Prevent spurious tooltip re-openings after a toast pops and closes.
+          <div onFocusCapture={(event) => event.stopPropagation()}>
+            <DataTableRowActions row={row} />
+          </div>
+        ),
+      },
+    ] satisfies ColumnDef<App.Platform.Data.GameListEntry>[]),
+  );
+
+  return columnDefinitions;
+}
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/index.ts b/resources/js/features/game-list/components/AllGamesDataTable/index.ts
new file mode 100644
index 000000000..ffa9a1fdf
--- /dev/null
+++ b/resources/js/features/game-list/components/AllGamesDataTable/index.ts
@@ -0,0 +1 @@
+export * from './AllGamesDataTable';
diff --git a/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.tsx b/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.tsx
new file mode 100644
index 000000000..9fb21cdae
--- /dev/null
+++ b/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.tsx
@@ -0,0 +1,58 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+import { type FC } from 'react';
+
+import { usePageProps } from '@/common/hooks/usePageProps';
+
+import { useAutoUpdatingQueryParams } from '../../hooks/useAutoUpdatingQueryParams';
+import { useGameListState } from '../../hooks/useGameListState';
+import { usePreloadedTableDataQueryClient } from '../../hooks/usePreloadedTableDataQueryClient';
+import { allGamesDefaultFilters } from '../../utils/allGamesDefaultFilters';
+import { AllGamesDataTable } from '../AllGamesDataTable';
+
+export const AllGamesMainRoot: FC = () => {
+  const { paginatedGameListEntries } = usePageProps<App.Platform.Data.GameListPageProps>();
+
+  const {
+    columnFilters,
+    columnVisibility,
+    pagination,
+    setColumnFilters,
+    setColumnVisibility,
+    setPagination,
+    setSorting,
+    sorting,
+  } = useGameListState(paginatedGameListEntries, { defaultColumnFilters: allGamesDefaultFilters });
+
+  const { queryClientWithInitialData } = usePreloadedTableDataQueryClient({
+    columnFilters,
+    pagination,
+    sorting,
+    paginatedData: paginatedGameListEntries,
+  });
+
+  useAutoUpdatingQueryParams({ columnFilters, pagination, sorting });
+
+  return (
+    <div>
+      {/* TODO reusable component */}
+      <div id="pagination-scroll-target" className="scroll-mt-16">
+        <div className="mb-3 flex w-full">
+          <h1 className="text-h3 w-full sm:!text-[2.0em]">All Games</h1>
+        </div>
+      </div>
+
+      <HydrationBoundary state={dehydrate(queryClientWithInitialData)}>
+        <AllGamesDataTable
+          columnFilters={columnFilters}
+          columnVisibility={columnVisibility}
+          pagination={pagination}
+          setColumnFilters={setColumnFilters}
+          setColumnVisibility={setColumnVisibility}
+          setPagination={setPagination}
+          setSorting={setSorting}
+          sorting={sorting}
+        />
+      </HydrationBoundary>
+    </div>
+  );
+};
diff --git a/resources/js/features/game-list/components/AllGamesMainRoot/index.ts b/resources/js/features/game-list/components/AllGamesMainRoot/index.ts
new file mode 100644
index 000000000..a7a0a7eb6
--- /dev/null
+++ b/resources/js/features/game-list/components/AllGamesMainRoot/index.ts
@@ -0,0 +1 @@
+export * from './AllGamesMainRoot';
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableRowActions.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableRowActions.tsx
deleted file mode 100644
index 5ffe97b1b..000000000
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/DataTableRowActions.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import type { Row } from '@tanstack/react-table';
-import { RxCross2 } from 'react-icons/rx';
-
-import { BaseButton } from '@/common/components/+vendor/BaseButton';
-import { toastMessage } from '@/common/components/+vendor/BaseToaster';
-import {
-  BaseTooltip,
-  BaseTooltipContent,
-  BaseTooltipTrigger,
-} from '@/common/components/+vendor/BaseTooltip';
-import { useAddToBacklogMutation } from '@/common/hooks/useAddToBacklogMutation';
-import { useRemoveFromBacklogMutation } from '@/common/hooks/useRemoveFromBacklogMutation';
-
-/**
- * If the table row needs to have more than one action, it should go into a menu.
- * @see https://ui.shadcn.com/examples/tasks
- */
-
-interface DataTableRowActionsProps<TData> {
-  row: Row<TData>;
-}
-
-export function DataTableRowActions<TData>({ row }: DataTableRowActionsProps<TData>) {
-  const queryClient = useQueryClient();
-
-  const removeFromBacklogMutation = useRemoveFromBacklogMutation();
-
-  const addToBacklogMutation = useAddToBacklogMutation();
-
-  const rowData = row.original as { game?: App.Platform.Data.Game };
-  const gameId = rowData?.game?.id ?? 0;
-  const gameTitle = rowData?.game?.title ?? '';
-
-  const handleRestoreToBacklogClick = () => {
-    toastMessage.promise(addToBacklogMutation.mutateAsync(gameId), {
-      loading: 'Removing...',
-      success: () => {
-        // Trigger a refetch of the current table page data and bust the entire cache.
-        queryClient.invalidateQueries({ queryKey: ['data'] });
-
-        return `Restored ${gameTitle}!`;
-      },
-      error: 'Something went wrong.',
-    });
-  };
-
-  const handleRemoveFromBacklogClick = () => {
-    if (gameId) {
-      toastMessage.promise(removeFromBacklogMutation.mutateAsync(gameId), {
-        action: {
-          label: 'Undo',
-          onClick: handleRestoreToBacklogClick,
-        },
-        loading: 'Removing...',
-        success: () => {
-          // Trigger a refetch of the current table page data and bust the entire cache.
-          queryClient.invalidateQueries({ queryKey: ['data'] });
-
-          return `Removed ${gameTitle}!`;
-        },
-        error: 'Something went wrong.',
-      });
-    }
-  };
-
-  return (
-    <BaseTooltip>
-      <BaseTooltipTrigger asChild>
-        <div className="flex justify-end">
-          <BaseButton
-            variant="ghost"
-            className="flex h-8 w-8 p-0 text-link"
-            onClick={handleRemoveFromBacklogClick}
-          >
-            <RxCross2 className="h-4 w-4" />
-            <span className="sr-only">Remove from backlog</span>
-          </BaseButton>
-        </div>
-      </BaseTooltipTrigger>
-
-      <BaseTooltipContent>
-        <p>Remove</p>
-      </BaseTooltipContent>
-    </BaseTooltip>
-  );
-}
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
index 4ee026846..c237ca687 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
@@ -5,8 +5,7 @@ import type {
   VisibilityState,
 } from '@tanstack/react-table';
 import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import { type Dispatch, type FC, type SetStateAction } from 'react';
-import { useMemo } from 'react';
+import { type Dispatch, type FC, type SetStateAction, useMemo } from 'react';
 
 import {
   BaseTable,
@@ -16,13 +15,13 @@ import {
   BaseTableHeader,
   BaseTableRow,
 } from '@/common/components/+vendor/BaseTable';
+import { DataTablePagination } from '@/common/components/DataTablePagination';
 import { useGameListQuery } from '@/common/hooks/useGameListQuery';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { cn } from '@/utils/cn';
 
 import { wantToPlayGamesDefaultFilters } from '../../utils/wantToPlayGamesDefaultFilters';
 import { buildColumnDefinitions } from './buildColumnDefinitions';
-import { DataTablePagination } from './DataTablePagination';
 import { WantToPlayGamesDataTableToolbar } from './WantToPlayGamesDataTableToolbar';
 
 // These values are all generated from `useGameListState`.
@@ -49,7 +48,12 @@ export const WantToPlayGamesDataTable: FC<WantToPlayGamesDataTableProps> = ({
 }) => {
   const { can } = usePageProps<App.Community.Data.UserGameListPageProps>();
 
-  const gameListQuery = useGameListQuery({ columnFilters, pagination, sorting });
+  const gameListQuery = useGameListQuery({
+    columnFilters,
+    pagination,
+    sorting,
+    apiRouteName: 'api.user-game-list.index',
+  });
 
   const table = useReactTable({
     columns: useMemo(
@@ -158,7 +162,7 @@ export const WantToPlayGamesDataTable: FC<WantToPlayGamesDataTableProps> = ({
         </BaseTableBody>
       </BaseTable>
 
-      <DataTablePagination table={table} />
+      <DataTablePagination table={table} tableApiRouteName="api.user-game-list.index" />
     </div>
   );
 };
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
index 15309be3d..c4845136f 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
@@ -2,12 +2,13 @@ import type { ColumnFiltersState, Table } from '@tanstack/react-table';
 import { RxCross2 } from 'react-icons/rx';
 
 import { BaseButton } from '@/common/components/+vendor/BaseButton';
+import { DataTableFacetedFilter } from '@/common/components/DataTableFacetedFilter';
+import { DataTableSearchInput } from '@/common/components/DataTableSearchInput';
+import { DataTableViewOptions } from '@/common/components/DataTableViewOptions';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
 
-import { DataTableFacetedFilter } from './DataTableFacetedFilter';
-import { DataTableSearchInput } from './DataTableSearchInput';
-import { DataTableViewOptions } from './DataTableViewOptions';
+import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
 
 interface WantToPlayGamesDataTableToolbarProps<TData> {
   table: Table<TData>;
@@ -24,7 +25,7 @@ export function WantToPlayGamesDataTableToolbar<TData>({
   const { filterableSystemOptions } = usePageProps<App.Community.Data.UserGameListPageProps>();
 
   const currentFilters = table.getState().columnFilters;
-  const isFiltered = getHasNonDefaultFilters(currentFilters, defaultColumnFilters);
+  const isFiltered = getAreNonDefaultFiltersSet(currentFilters, defaultColumnFilters);
 
   const resetFiltersToDefault = () => {
     if (defaultColumnFilters) {
@@ -101,19 +102,3 @@ export function WantToPlayGamesDataTableToolbar<TData>({
     </div>
   );
 }
-
-// Are there any non-default filters set? If so, we need to show the Reset button.
-function getHasNonDefaultFilters(
-  currentFilters: ColumnFiltersState,
-  defaultColumnFilters?: ColumnFiltersState,
-): boolean {
-  if (currentFilters.length !== defaultColumnFilters?.length) {
-    return true;
-  }
-
-  return currentFilters.some((filter, index) => {
-    const defaultFilter = defaultColumnFilters[index];
-
-    return filter.id !== defaultFilter.id || filter.value !== defaultFilter.value;
-  });
-}
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/buildColumnDefinitions.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/buildColumnDefinitions.tsx
index 75da7854c..06963c96f 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/buildColumnDefinitions.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/buildColumnDefinitions.tsx
@@ -2,7 +2,10 @@ import type { ColumnDef } from '@tanstack/react-table';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
+import type { RouteName } from 'ziggy-js';
 
+import { DataTableColumnHeader } from '@/common/components/DataTableColumnHeader';
+import { DataTableRowActions } from '@/common/components/DataTableRowActions';
 import { GameAvatar } from '@/common/components/GameAvatar';
 import { PlayerGameProgressBar } from '@/common/components/PlayerGameProgressBar';
 import { SystemChip } from '@/common/components/SystemChip';
@@ -10,12 +13,11 @@ import { WeightedPointsContainer } from '@/common/components/WeightedPointsConta
 import { formatDate } from '@/common/utils/l10n/formatDate';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
 
-import { DataTableColumnHeader } from './DataTableColumnHeader';
-import { DataTableRowActions } from './DataTableRowActions';
-
 dayjs.extend(utc);
 dayjs.extend(localizedFormat);
 
+const tableApiRouteName: RouteName = 'api.user-game-list.index';
+
 export function buildColumnDefinitions(options: {
   canSeeOpenTicketsColumn: boolean;
   forUsername?: string;
@@ -26,7 +28,13 @@ export function buildColumnDefinitions(options: {
       accessorKey: 'game',
       meta: { label: 'Title' },
       enableHiding: false,
-      header: ({ column, table }) => <DataTableColumnHeader column={column} table={table} />,
+      header: ({ column, table }) => (
+        <DataTableColumnHeader
+          column={column}
+          table={table}
+          tableApiRouteName={tableApiRouteName}
+        />
+      ),
       cell: ({ row }) => {
         if (!row.original.game) {
           return null;
@@ -50,7 +58,13 @@ export function buildColumnDefinitions(options: {
       id: 'system',
       accessorKey: 'game',
       meta: { label: 'System' },
-      header: ({ column, table }) => <DataTableColumnHeader column={column} table={table} />,
+      header: ({ column, table }) => (
+        <DataTableColumnHeader
+          column={column}
+          table={table}
+          tableApiRouteName={tableApiRouteName}
+        />
+      ),
       cell: ({ row }) => {
         if (!row.original.game?.system) {
           return null;
@@ -65,7 +79,12 @@ export function buildColumnDefinitions(options: {
       accessorKey: 'game',
       meta: { label: 'Achievements', align: 'right' },
       header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+        <DataTableColumnHeader
+          column={column}
+          table={table}
+          sortType="quantity"
+          tableApiRouteName={tableApiRouteName}
+        />
       ),
       cell: ({ row }) => {
         const achievementsPublished = row.original.game?.achievementsPublished ?? 0;
@@ -81,7 +100,12 @@ export function buildColumnDefinitions(options: {
       accessorKey: 'game',
       meta: { label: 'Points', align: 'right' },
       header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+        <DataTableColumnHeader
+          column={column}
+          table={table}
+          sortType="quantity"
+          tableApiRouteName={tableApiRouteName}
+        />
       ),
       cell: ({ row }) => {
         const pointsTotal = row.original.game?.pointsTotal ?? 0;
@@ -105,7 +129,12 @@ export function buildColumnDefinitions(options: {
       accessorKey: 'game',
       meta: { label: 'Rarity', align: 'right' },
       header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+        <DataTableColumnHeader
+          column={column}
+          table={table}
+          sortType="quantity"
+          tableApiRouteName={tableApiRouteName}
+        />
       ),
       cell: ({ row }) => {
         const pointsTotal = row.original.game?.pointsTotal ?? 0;
@@ -127,7 +156,12 @@ export function buildColumnDefinitions(options: {
       accessorKey: 'game',
       meta: { label: 'Last Updated' },
       header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="date" />
+        <DataTableColumnHeader
+          column={column}
+          table={table}
+          sortType="date"
+          tableApiRouteName={tableApiRouteName}
+        />
       ),
       cell: ({ row }) => {
         const date = row.original.game?.lastUpdated ?? new Date();
@@ -141,7 +175,12 @@ export function buildColumnDefinitions(options: {
       accessorKey: 'game',
       meta: { label: 'Release Date' },
       header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="date" />
+        <DataTableColumnHeader
+          column={column}
+          table={table}
+          sortType="date"
+          tableApiRouteName={tableApiRouteName}
+        />
       ),
       cell: ({ row }) => {
         const date = row.original.game?.releasedAt ?? null;
@@ -170,7 +209,12 @@ export function buildColumnDefinitions(options: {
       accessorKey: 'game',
       meta: { label: 'Players', align: 'right' },
       header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+        <DataTableColumnHeader
+          column={column}
+          table={table}
+          sortType="quantity"
+          tableApiRouteName={tableApiRouteName}
+        />
       ),
       cell: ({ row }) => {
         const playersTotal = row.original.game?.playersTotal ?? 0;
@@ -186,14 +230,19 @@ export function buildColumnDefinitions(options: {
       accessorKey: 'game',
       meta: { label: 'Leaderboards', align: 'right' },
       header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+        <DataTableColumnHeader
+          column={column}
+          table={table}
+          sortType="quantity"
+          tableApiRouteName={tableApiRouteName}
+        />
       ),
       cell: ({ row }) => {
         const numVisibleLeaderboards = row.original.game?.numVisibleLeaderboards ?? 0;
 
         return (
           <p className={numVisibleLeaderboards === 0 ? 'text-muted' : ''}>
-            {numVisibleLeaderboards}
+            {formatNumber(numVisibleLeaderboards)}
           </p>
         );
       },
@@ -206,7 +255,12 @@ export function buildColumnDefinitions(options: {
       accessorKey: 'game',
       meta: { label: 'Tickets', align: 'right' },
       header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+        <DataTableColumnHeader
+          column={column}
+          table={table}
+          sortType="quantity"
+          tableApiRouteName={tableApiRouteName}
+        />
       ),
       cell: ({ row }) => {
         const numUnresolvedTickets = row.original.game?.numUnresolvedTickets ?? 0;
@@ -231,7 +285,12 @@ export function buildColumnDefinitions(options: {
         accessorKey: 'game',
         meta: { label: 'Progress', align: 'left' },
         header: ({ column, table }) => (
-          <DataTableColumnHeader column={column} table={table} sortType="quantity" />
+          <DataTableColumnHeader
+            column={column}
+            table={table}
+            sortType="quantity"
+            tableApiRouteName={tableApiRouteName}
+          />
         ),
         cell: ({ row }) => {
           const { game, playerGame } = row.original;
@@ -242,7 +301,12 @@ export function buildColumnDefinitions(options: {
 
       {
         id: 'actions',
-        cell: ({ row }) => <DataTableRowActions row={row} />,
+        cell: ({ row }) => (
+          // Prevent spurious tooltip re-openings after a toast pops and closes.
+          <div onFocusCapture={(event) => event.stopPropagation()}>
+            <DataTableRowActions row={row} />
+          </div>
+        ),
       },
     ] satisfies ColumnDef<App.Platform.Data.GameListEntry>[]),
   );
diff --git a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesRoot.test.tsx b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx
similarity index 97%
rename from resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesRoot.test.tsx
rename to resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx
index ce953a2bd..78cece112 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesRoot.test.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx
@@ -12,16 +12,16 @@ import {
   createZiggyProps,
 } from '@/test/factories';
 
-import { WantToPlayGamesRoot } from './WantToPlayGamesRoot';
+import { WantToPlayGamesMainRoot } from './WantToPlayGamesMainRoot';
 
 // Suppress AggregateError invocations from unmocked fetch calls to the back-end.
 console.error = vi.fn();
 
-describe('Component: WantToPlayGamesRoot', () => {
+describe('Component: WantToPlayGamesMainRoot', () => {
   it('renders without crashing', () => {
     // ARRANGE
     const { container } = render<App.Community.Data.UserGameListPageProps>(
-      <WantToPlayGamesRoot />,
+      <WantToPlayGamesMainRoot />,
       {
         pageProps: {
           filterableSystemOptions: [],
@@ -38,7 +38,7 @@ describe('Component: WantToPlayGamesRoot', () => {
 
   it('displays default columns', () => {
     // ARRANGE
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
@@ -74,7 +74,7 @@ describe('Component: WantToPlayGamesRoot', () => {
       releasedAtGranularity: 'day',
     });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
@@ -114,7 +114,7 @@ describe('Component: WantToPlayGamesRoot', () => {
       releasedAtGranularity: 'day',
     });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
@@ -155,7 +155,7 @@ describe('Component: WantToPlayGamesRoot', () => {
       releasedAtGranularity: 'day',
     });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
@@ -183,7 +183,7 @@ describe('Component: WantToPlayGamesRoot', () => {
 
   it('allows users to toggle column visibility', async () => {
     // ARRANGE
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
@@ -203,7 +203,7 @@ describe('Component: WantToPlayGamesRoot', () => {
 
   it('given the user cannot develop achievements, they cannot enable an Open Tickets column', async () => {
     // ARRANGE
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
@@ -224,7 +224,7 @@ describe('Component: WantToPlayGamesRoot', () => {
 
   it('given the user can develop achievements, they can enable an Open Tickets column', async () => {
     // ARRANGE
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
@@ -261,7 +261,7 @@ describe('Component: WantToPlayGamesRoot', () => {
       numUnresolvedTickets: 2,
     });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
@@ -283,7 +283,7 @@ describe('Component: WantToPlayGamesRoot', () => {
     // ARRANGE
     const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
@@ -312,7 +312,7 @@ describe('Component: WantToPlayGamesRoot', () => {
 
   it('by default, has the achievements published filter set to "Yes"', () => {
     // ARRANGE
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
@@ -331,7 +331,7 @@ describe('Component: WantToPlayGamesRoot', () => {
     window.HTMLElement.prototype.scrollIntoView = vi.fn();
     const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [
@@ -371,7 +371,7 @@ describe('Component: WantToPlayGamesRoot', () => {
       .mockResolvedValueOnce({ data: createPaginatedData([]) })
       .mockResolvedValueOnce({ data: createPaginatedData([]) }); // the GET will be called twice
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [
@@ -404,7 +404,7 @@ describe('Component: WantToPlayGamesRoot', () => {
       data: createPaginatedData([], { total: 3, unfilteredTotal: 587 }),
     });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
@@ -430,7 +430,7 @@ describe('Component: WantToPlayGamesRoot', () => {
 
     const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
@@ -462,7 +462,7 @@ describe('Component: WantToPlayGamesRoot', () => {
     window.HTMLElement.prototype.scrollIntoView = vi.fn();
     const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
@@ -494,7 +494,7 @@ describe('Component: WantToPlayGamesRoot', () => {
     window.HTMLElement.prototype.scrollIntoView = vi.fn();
     const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
@@ -526,7 +526,7 @@ describe('Component: WantToPlayGamesRoot', () => {
     window.HTMLElement.prototype.scrollIntoView = vi.fn();
     const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
@@ -555,7 +555,7 @@ describe('Component: WantToPlayGamesRoot', () => {
 
   it('allows the user to hide a column via the column header button', async () => {
     // ARRANGE
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
@@ -575,7 +575,7 @@ describe('Component: WantToPlayGamesRoot', () => {
 
   it('always displays the number of total games', () => {
     // ARRANGE
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
@@ -594,7 +594,7 @@ describe('Component: WantToPlayGamesRoot', () => {
     window.scrollTo = vi.fn();
     const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
 
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
@@ -626,7 +626,7 @@ describe('Component: WantToPlayGamesRoot', () => {
 
   it("given the user presses the '/' hotkey, focuses the search input", async () => {
     // ARRANGE
-    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesRoot />, {
+    render<App.Community.Data.UserGameListPageProps>(<WantToPlayGamesMainRoot />, {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
diff --git a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesRoot.tsx b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.tsx
similarity index 97%
rename from resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesRoot.tsx
rename to resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.tsx
index 34be217ad..569d1dae7 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesRoot.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.tsx
@@ -10,7 +10,7 @@ import { usePreloadedTableDataQueryClient } from '../../hooks/usePreloadedTableD
 import { wantToPlayGamesDefaultFilters } from '../../utils/wantToPlayGamesDefaultFilters';
 import { WantToPlayGamesDataTable } from '../WantToPlayGamesDataTable';
 
-export const WantToPlayGamesRoot: FC = () => {
+export const WantToPlayGamesMainRoot: FC = () => {
   const { auth, paginatedGameListEntries } =
     usePageProps<App.Community.Data.UserGameListPageProps>();
 
diff --git a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/index.ts b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/index.ts
index 0aef7f801..98d13f1f9 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/index.ts
+++ b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/index.ts
@@ -1 +1 @@
-export * from './WantToPlayGamesRoot';
+export * from './WantToPlayGamesMainRoot';
diff --git a/resources/js/features/game-list/utils/allGamesDefaultFilters.ts b/resources/js/features/game-list/utils/allGamesDefaultFilters.ts
new file mode 100644
index 000000000..8b7b54278
--- /dev/null
+++ b/resources/js/features/game-list/utils/allGamesDefaultFilters.ts
@@ -0,0 +1,5 @@
+import type { ColumnFiltersState } from '@tanstack/react-table';
+
+export const allGamesDefaultFilters: ColumnFiltersState = [
+  { id: 'achievementsPublished', value: ['has'] },
+];
diff --git a/resources/js/features/game-list/utils/getAreNonDefaultFiltersSet.ts b/resources/js/features/game-list/utils/getAreNonDefaultFiltersSet.ts
new file mode 100644
index 000000000..f32253bca
--- /dev/null
+++ b/resources/js/features/game-list/utils/getAreNonDefaultFiltersSet.ts
@@ -0,0 +1,16 @@
+import type { ColumnFiltersState } from '@tanstack/react-table';
+
+export function getAreNonDefaultFiltersSet(
+  currentFilters: ColumnFiltersState,
+  defaultColumnFilters?: ColumnFiltersState,
+): boolean {
+  if (currentFilters.length !== defaultColumnFilters?.length) {
+    return true;
+  }
+
+  return currentFilters.some((filter, index) => {
+    const defaultFilter = defaultColumnFilters[index];
+
+    return filter.id !== defaultFilter.id || filter.value !== defaultFilter.value;
+  });
+}
diff --git a/resources/js/pages/game-list/index.tsx b/resources/js/pages/game-list/index.tsx
new file mode 100644
index 000000000..2fd76b1ed
--- /dev/null
+++ b/resources/js/pages/game-list/index.tsx
@@ -0,0 +1,25 @@
+import { Head } from '@inertiajs/react';
+
+import { AppLayout } from '@/common/layouts/AppLayout';
+import type { AppPage } from '@/common/models';
+import { AllGamesMainRoot } from '@/features/game-list/components/AllGamesMainRoot';
+
+const AllGames: AppPage = () => {
+  return (
+    <>
+      <Head title="All Games">
+        <meta name="description" content="TODO" />
+      </Head>
+
+      <div className="container">
+        <AppLayout.Main>
+          <AllGamesMainRoot />
+        </AppLayout.Main>
+      </div>
+    </>
+  );
+};
+
+AllGames.layout = (page) => <AppLayout withSidebar={false}>{page}</AppLayout>;
+
+export default AllGames;
diff --git a/resources/js/pages/game-list/play.tsx b/resources/js/pages/game-list/play.tsx
index 6c7a37669..cc6401a20 100644
--- a/resources/js/pages/game-list/play.tsx
+++ b/resources/js/pages/game-list/play.tsx
@@ -2,7 +2,7 @@ import { Head } from '@inertiajs/react';
 
 import { AppLayout } from '@/common/layouts/AppLayout';
 import type { AppPage } from '@/common/models';
-import { WantToPlayGamesRoot } from '@/features/game-list/components/WantToPlayGamesMainRoot';
+import { WantToPlayGamesMainRoot } from '@/features/game-list/components/WantToPlayGamesMainRoot';
 
 const WantToPlayGames: AppPage = () => {
   return (
@@ -13,7 +13,7 @@ const WantToPlayGames: AppPage = () => {
 
       <div className="container">
         <AppLayout.Main>
-          <WantToPlayGamesRoot />
+          <WantToPlayGamesMainRoot />
         </AppLayout.Main>
       </div>
     </>
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
index 5727382a6..25c6d4333 100644
--- a/resources/js/types/generated.d.ts
+++ b/resources/js/types/generated.d.ts
@@ -177,6 +177,11 @@ declare namespace App.Platform.Data {
     playerGame: App.Platform.Data.PlayerGame | null;
     isInBacklog: boolean | null;
   };
+  export type GameListPageProps<TItems = App.Platform.Data.GameListEntry> = {
+    paginatedGameListEntries: App.Data.PaginatedData<TItems>;
+    filterableSystemOptions: Array<App.Platform.Data.System>;
+    can: App.Data.UserPermissions;
+  };
   export type PlayerBadge = {
     awardType: number;
     awardData: number;
diff --git a/resources/js/ziggy.d.ts b/resources/js/ziggy.d.ts
index e3364ecee..309957428 100644
--- a/resources/js/ziggy.d.ts
+++ b/resources/js/ziggy.d.ts
@@ -243,6 +243,7 @@ declare module 'ziggy-js' {
     "claims.completed": [],
     "claims.active": [],
     "pulse": [],
+    "api.game-list.index": [],
     "game.hashes.index": [
         {
             "name": "game",
@@ -250,6 +251,7 @@ declare module 'ziggy-js' {
             "binding": "ID"
         }
     ],
+    "game-list.index": [],
     "game.random": [],
     "api.user.game.destroy": [
         {

From 2e46d95c9888343320c62d5ff8e31de9c487cbe7 Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Sun, 29 Sep 2024 20:46:38 -0400
Subject: [PATCH 02/11] feat: finalize

---
 app/Helpers/render/game.php                   |   4 +-
 ...piController.php => GameApiController.php} |   9 +-
 app/Platform/Controllers/GameController.php   |  48 +-
 .../Controllers/GameListController.php        |  74 --
 app/Platform/RouteServiceProvider.php         |   8 +-
 app/Providers/RouteServiceProvider.php        |   1 -
 .../components/+vendor/BaseBreadcrumb.tsx     |   1 +
 .../useGameListQuery/useGameListQuery.ts      |   2 +-
 .../AchievementBreadcrumbs.test.tsx           |   2 +-
 .../AchievementBreadcrumbs.tsx                |   5 +-
 .../AllGamesDataTable/AllGamesDataTable.tsx   |  82 +--
 .../AllGamesDataTableToolbar.tsx              |   6 +-
 .../buildColumnDefinitions.tsx                | 261 +------
 .../AllGamesMainRoot.test.tsx                 | 686 ++++++++++++++++++
 .../DataTableColumnHeader.tsx                 |  12 +-
 .../components/DataTableColumnHeader/index.ts |   0
 .../DataTableFacetedFilter.tsx                |  19 +-
 .../DataTableFacetedFilter/index.ts           |   0
 .../DataTablePagination.tsx                   |   7 +-
 .../components/DataTablePagination/index.ts   |   0
 .../DataTableRowActions.tsx                   |  15 +-
 .../components/DataTableRowActions/index.ts   |   0
 .../DataTableSearchInput.tsx                  |   0
 .../components/DataTableSearchInput/index.ts  |   0
 .../useSearchInputHotkey.ts                   |   0
 .../DataTableViewOptions.tsx                  |   4 +-
 .../components/DataTableViewOptions/index.ts  |   0
 .../GameListDataTable/GameListDataTable.tsx   |  87 +++
 .../components/GameListDataTable/index.ts     |   0
 .../WantToPlayGamesDataTable.tsx              |  81 +--
 .../WantToPlayGamesDataTableToolbar.tsx       |   6 +-
 .../buildColumnDefinitions.tsx                | 316 +-------
 .../WantToPlayGamesMainRoot.test.tsx          |   8 +-
 .../hooks/useDataTablePrefetchPagination.ts   |   4 +-
 .../hooks/useDataTablePrefetchSort.ts         |   4 +-
 .../buildAchievementsPublishedColumnDef.tsx   |  33 +
 .../buildLastUpdatedColumnDef.tsx             |  39 +
 .../buildNumUnresolvedTicketsColumnDef.tsx    |  41 ++
 .../buildNumVisibleLeaderboardsColumnDef.tsx  |  37 +
 .../buildPlayerGameProgressColumnDef.tsx      |  33 +
 .../buildPlayersTotalColumnDef.tsx            |  33 +
 .../buildPointsTotalColumnDef.tsx             |  44 ++
 .../buildReleasedAtColumnDef.tsx              |  54 ++
 .../buildRetroRatioColumnDef.tsx              |  39 +
 .../buildRowActionsColumnDef.tsx              |  15 +
 .../buildSystemColumnDef.tsx                  |  30 +
 .../buildTitleColumnDef.tsx                   |  43 ++
 .../GameBreadcrumbs/GameBreadcrumbs.test.tsx  |   2 +-
 .../GameBreadcrumbs/GameBreadcrumbs.tsx       |   5 +-
 resources/js/test/setup.tsx                   |  13 +-
 resources/js/ziggy.d.ts                       |   5 +-
 .../achievement/breadcrumbs.blade.php         |   2 +-
 .../components/game/breadcrumbs.blade.php     |   2 +-
 .../global-statistics.blade.php               |   2 +-
 .../views/components/head-analytics.blade.php |   8 -
 .../leaderboard/breadcrumbs.blade.php         |   2 +-
 .../views/components/menu/main.blade.php      |   2 +-
 .../Action/BuildGameListActionTest.php        |  26 +
 .../Controllers/Api/GameApiControllerTest.php |  68 ++
 .../Controllers/GameControllerTest.php        |  44 ++
 60 files changed, 1535 insertions(+), 839 deletions(-)
 rename app/Platform/Controllers/Api/{GameListApiController.php => GameApiController.php} (88%)
 delete mode 100644 app/Platform/Controllers/GameListController.php
 create mode 100644 resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.test.tsx
 rename resources/js/{common => features/game-list}/components/DataTableColumnHeader/DataTableColumnHeader.tsx (96%)
 rename resources/js/{common => features/game-list}/components/DataTableColumnHeader/index.ts (100%)
 rename resources/js/{common => features/game-list}/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx (92%)
 rename resources/js/{common => features/game-list}/components/DataTableFacetedFilter/index.ts (100%)
 rename resources/js/{common => features/game-list}/components/DataTablePagination/DataTablePagination.tsx (94%)
 rename resources/js/{common => features/game-list}/components/DataTablePagination/index.ts (100%)
 rename resources/js/{common => features/game-list}/components/DataTableRowActions/DataTableRowActions.tsx (88%)
 rename resources/js/{common => features/game-list}/components/DataTableRowActions/index.ts (100%)
 rename resources/js/{common => features/game-list}/components/DataTableSearchInput/DataTableSearchInput.tsx (100%)
 rename resources/js/{common => features/game-list}/components/DataTableSearchInput/index.ts (100%)
 rename resources/js/{common => features/game-list}/components/DataTableSearchInput/useSearchInputHotkey.ts (100%)
 rename resources/js/{common => features/game-list}/components/DataTableViewOptions/DataTableViewOptions.tsx (92%)
 rename resources/js/{common => features/game-list}/components/DataTableViewOptions/index.ts (100%)
 create mode 100644 resources/js/features/game-list/components/GameListDataTable/GameListDataTable.tsx
 create mode 100644 resources/js/features/game-list/components/GameListDataTable/index.ts
 rename resources/js/{common => features/game-list}/hooks/useDataTablePrefetchPagination.ts (88%)
 rename resources/js/{common => features/game-list}/hooks/useDataTablePrefetchSort.ts (88%)
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildAchievementsPublishedColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildLastUpdatedColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildNumUnresolvedTicketsColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildNumVisibleLeaderboardsColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildPlayerGameProgressColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildPlayersTotalColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildPointsTotalColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildReleasedAtColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildRetroRatioColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildRowActionsColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildSystemColumnDef.tsx
 create mode 100644 resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx
 create mode 100644 tests/Feature/Platform/Controllers/Api/GameApiControllerTest.php
 create mode 100644 tests/Feature/Platform/Controllers/GameControllerTest.php

diff --git a/app/Helpers/render/game.php b/app/Helpers/render/game.php
index f205aa200..6939b6561 100644
--- a/app/Helpers/render/game.php
+++ b/app/Helpers/render/game.php
@@ -121,11 +121,13 @@ function renderGameBreadcrumb(array|int $data, bool $addLinkToLastCrumb = true):
         return [$mainID, $renderedMain, $subsetID ?? null, $renderedSubset ?? null];
     };
 
+    $allGamesHref = route('game.index');
+
     $gameListHref = System::isGameSystem($consoleID)
         ? route('system.game.index', ['system' => $consoleID])
         : '/gameList.php?c=' . $consoleID;
 
-    $html = "<a href='/gameList.php'>All Games</a>"
+    $html = "<a href='" . $allGamesHref . "'>All Games</a>"
         . $nextCrumb($consoleName, $gameListHref);
 
     [$mainID, $renderedMain, $subsetID, $renderedSubset] = $getSplitData($data);
diff --git a/app/Platform/Controllers/Api/GameListApiController.php b/app/Platform/Controllers/Api/GameApiController.php
similarity index 88%
rename from app/Platform/Controllers/Api/GameListApiController.php
rename to app/Platform/Controllers/Api/GameApiController.php
index 1cf8e14ba..c0c773c8c 100644
--- a/app/Platform/Controllers/Api/GameListApiController.php
+++ b/app/Platform/Controllers/Api/GameApiController.php
@@ -2,16 +2,19 @@
 
 namespace App\Platform\Controllers\Api;
 
-use App\Platform\Requests\GameListRequest;
 use App\Http\Controller;
+use App\Models\Game;
 use App\Platform\Actions\BuildGameListAction;
 use App\Platform\Enums\GameListType;
+use App\Platform\Requests\GameListRequest;
 use Illuminate\Http\JsonResponse;
 
-class GameListApiController extends Controller
+class GameApiController extends Controller
 {
     public function index(GameListRequest $request): JsonResponse
     {
+        $this->authorize('viewAny', Game::class);
+
         $paginatedData = (new BuildGameListAction())->execute(
             GameListType::AllGames,
             user: $request->user(),
@@ -46,4 +49,4 @@ public function update(): void
     public function destroy(): void
     {
     }
-}
\ No newline at end of file
+}
diff --git a/app/Platform/Controllers/GameController.php b/app/Platform/Controllers/GameController.php
index 1a7813ff1..c79f4b749 100644
--- a/app/Platform/Controllers/GameController.php
+++ b/app/Platform/Controllers/GameController.php
@@ -4,13 +4,22 @@
 
 namespace App\Platform\Controllers;
 
+use App\Data\UserPermissionsData;
 use App\Http\Controller;
 use App\Models\Game;
 use App\Models\System;
+use App\Models\User;
+use App\Platform\Actions\BuildGameListAction;
+use App\Platform\Data\GameListPagePropsData;
+use App\Platform\Data\SystemData;
+use App\Platform\Enums\GameListType;
+use App\Platform\Requests\GameListRequest;
 use App\Platform\Requests\GameRequest;
 use Illuminate\Contracts\View\View;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response as InertiaResponse;
 
 class GameController extends Controller
 {
@@ -19,16 +28,37 @@ protected function resourceName(): string
         return 'game';
     }
 
-    public function index(): View
+    public function index(GameListRequest $request): InertiaResponse
     {
-        $this->authorize('viewAny', $this->resourceClass());
-
-        /*
-         * TODO: if slug is empty or does not match -> redirect to correctly slugged url
-         */
-
-        return view('resource.index')
-            ->with('resource', $this->resourceName());
+        /** @var ?User $user */
+        $user = $request->user();
+
+        $this->authorize('viewAny', [Game::class, $user]);
+
+        $paginatedData = (new BuildGameListAction())->execute(
+            GameListType::AllGames,
+            user: $user,
+            page: $request->getPage(),
+            filters: $request->getFilters(),
+            sort: $request->getSort(),
+        );
+
+        $filterableSystemOptions = System::active()
+            ->gameSystems()
+            ->get()
+            ->map(fn ($system) => SystemData::fromSystem($system)->include('nameShort'))
+            ->values()
+            ->all();
+
+        $can = UserPermissionsData::fromUser($user)->include('develop');
+
+        $props = new GameListPagePropsData(
+            paginatedGameListEntries: $paginatedData,
+            filterableSystemOptions: $filterableSystemOptions,
+            can: $can,
+        );
+
+        return Inertia::render('game-list/index', $props);
     }
 
     public function popular(): void
diff --git a/app/Platform/Controllers/GameListController.php b/app/Platform/Controllers/GameListController.php
deleted file mode 100644
index 8ae16270d..000000000
--- a/app/Platform/Controllers/GameListController.php
+++ /dev/null
@@ -1,74 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Platform\Controllers;
-
-use App\Data\UserPermissionsData;
-use App\Http\Controller;
-use App\Models\System;
-use App\Models\User;
-use App\Platform\Actions\BuildGameListAction;
-use App\Platform\Data\GameListPagePropsData;
-use App\Platform\Data\SystemData;
-use App\Platform\Enums\GameListType;
-use App\Platform\Requests\GameListRequest;
-use Inertia\Inertia;
-use Inertia\Response as InertiaResponse;
-
-class GameListController extends Controller
-{
-    public function index(GameListRequest $request): InertiaResponse
-    {
-        /** @var ?User $user */
-        $user = $request->user();
-
-        $paginatedData = (new BuildGameListAction())->execute(
-            GameListType::AllGames,
-            user: $user,
-            page: $request->getPage(),
-            filters: $request->getFilters(),
-            sort: $request->getSort(),
-        );
-
-        $filterableSystemOptions = System::active()
-            ->get()
-            ->map(fn ($system) => SystemData::fromSystem($system)->include('nameShort'))
-            ->values()
-            ->all();
-
-        $can = UserPermissionsData::fromUser($user)->include('develop');
-
-        $props = new GameListPagePropsData(
-            paginatedGameListEntries: $paginatedData,
-            filterableSystemOptions: $filterableSystemOptions,
-            can: $can,
-        );
-
-        return Inertia::render('game-list/index', $props);
-    }
-
-    public function create(): void
-    {
-    }
-
-    public function store(): void
-    {
-    }
-
-    public function show(): void
-    {
-    }
-
-    public function edit(): void
-    {
-    }
-
-    public function update(): void
-    {
-    }
-
-    public function destroy(): void
-    {
-    }
-}
diff --git a/app/Platform/RouteServiceProvider.php b/app/Platform/RouteServiceProvider.php
index 93c92c12b..c821fa69a 100755
--- a/app/Platform/RouteServiceProvider.php
+++ b/app/Platform/RouteServiceProvider.php
@@ -6,10 +6,9 @@
 
 use App\Models\GameHash;
 use App\Platform\Controllers\AchievementController;
-use App\Platform\Controllers\Api\GameListApiController;
+use App\Platform\Controllers\Api\GameApiController;
 use App\Platform\Controllers\GameController;
 use App\Platform\Controllers\GameHashController;
-use App\Platform\Controllers\GameListController;
 use App\Platform\Controllers\PlayerAchievementController;
 use App\Platform\Controllers\PlayerGameController;
 use App\Platform\Controllers\ReportAchievementIssueController;
@@ -47,13 +46,13 @@ protected function mapWebRoutes(): void
     {
         Route::middleware(['web', 'csp'])->group(function () {
             Route::group(['prefix' => 'internal-api'], function () {
-                Route::get('game-list', [GameListApiController::class, 'index'])->name('api.game-list.index');
+                Route::get('games', [GameApiController::class, 'index'])->name('api.game.index');
             });
 
             Route::middleware(['inertia'])->group(function () {
                 Route::get('game/{game}/hashes', [GameHashController::class, 'index'])->name('game.hashes.index');
 
-                Route::get('game-list', [GameListController::class, 'index'])->name('game-list.index');
+                Route::get('games', [GameController::class, 'index'])->name('game.index');
             });
 
             // Route::get('achievement/{achievement}{slug?}', [AchievementController::class, 'show'])->name('achievement.show');
@@ -73,7 +72,6 @@ protected function mapWebRoutes(): void
             //     ->name('system.achievement.index');
 
             // Route::get('game/{game}{slug?}', [GameController::class, 'show'])->name('game.show');
-            // Route::resource('games', GameController::class)->only('index')->names(['index' => 'game.index']);
             // Route::get('games/popular', [GameController::class, 'popular'])->name('games.popular');
             // Route::get('game/{game}/badges', [GameBadgeController::class, 'index'])->name('game.badge.index');
             // Route::get('game/{game}/assets', [GameAssetsController::class, 'index'])->name('game.asset.index');
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
index 90b9de276..479ea4175 100755
--- a/app/Providers/RouteServiceProvider.php
+++ b/app/Providers/RouteServiceProvider.php
@@ -64,7 +64,6 @@ protected function mapWebRoutes(): void
 
         Route::middleware(['web', 'csp'])->group(function () {
             Route::get('download.php', fn () => $this->handlePageRequest('download'))->name('download.index');
-            Route::get('gameList.php', fn () => $this->handlePageRequest('gameList'))->name('game.index');
             Route::get('{path}.php', fn (string $path) => $this->handlePageRequest($path))->where('path', '(.*)');
             Route::get('user/{user}', fn (string $user) => $this->handlePageRequest('userInfo', $user))->name('user.show');
             Route::get('achievement/{achievement}{slug?}', fn ($achievement) => $this->handlePageRequest('achievementInfo', $achievement))->name('achievement.show');
diff --git a/resources/js/common/components/+vendor/BaseBreadcrumb.tsx b/resources/js/common/components/+vendor/BaseBreadcrumb.tsx
index a760c7b9a..fdbfeb171 100644
--- a/resources/js/common/components/+vendor/BaseBreadcrumb.tsx
+++ b/resources/js/common/components/+vendor/BaseBreadcrumb.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-restricted-imports -- base components can import from @radix-ui */
 
+import { Link } from '@inertiajs/react';
 import { Slot } from '@radix-ui/react-slot';
 import {
   type ComponentProps,
diff --git a/resources/js/common/hooks/useGameListQuery/useGameListQuery.ts b/resources/js/common/hooks/useGameListQuery/useGameListQuery.ts
index b75e25a0e..703e272fe 100644
--- a/resources/js/common/hooks/useGameListQuery/useGameListQuery.ts
+++ b/resources/js/common/hooks/useGameListQuery/useGameListQuery.ts
@@ -20,7 +20,7 @@ export function useGameListQuery({
   columnFilters,
   pagination,
   sorting,
-  apiRouteName = 'api.game-list.index',
+  apiRouteName = 'api.game.index',
 }: UseGameListQueryProps) {
   const dataQuery = useQuery<App.Data.PaginatedData<App.Platform.Data.GameListEntry>>({
     // eslint-disable-next-line @tanstack/query/exhaustive-deps -- tableApiRouteName is not part of the key
diff --git a/resources/js/features/achievements/components/AchievementBreadcrumbs/AchievementBreadcrumbs.test.tsx b/resources/js/features/achievements/components/AchievementBreadcrumbs/AchievementBreadcrumbs.test.tsx
index 598386934..ba46ddf40 100644
--- a/resources/js/features/achievements/components/AchievementBreadcrumbs/AchievementBreadcrumbs.test.tsx
+++ b/resources/js/features/achievements/components/AchievementBreadcrumbs/AchievementBreadcrumbs.test.tsx
@@ -19,7 +19,7 @@ describe('Component: AchievementBreadcrumbs', () => {
     // ASSERT
     const allGamesLinkEl = screen.getByRole('link', { name: /all games/i });
     expect(allGamesLinkEl).toBeVisible();
-    expect(allGamesLinkEl).toHaveAttribute('href', '/gameList.php');
+    expect(allGamesLinkEl).toHaveAttribute('href', 'game.index');
   });
 
   it('given a system, has a link to the system games list', () => {
diff --git a/resources/js/features/achievements/components/AchievementBreadcrumbs/AchievementBreadcrumbs.tsx b/resources/js/features/achievements/components/AchievementBreadcrumbs/AchievementBreadcrumbs.tsx
index edfce5e67..d85f4219c 100644
--- a/resources/js/features/achievements/components/AchievementBreadcrumbs/AchievementBreadcrumbs.tsx
+++ b/resources/js/features/achievements/components/AchievementBreadcrumbs/AchievementBreadcrumbs.tsx
@@ -1,3 +1,4 @@
+import { Link } from '@inertiajs/react';
 import type { FC } from 'react';
 
 import {
@@ -34,7 +35,9 @@ export const AchievementBreadcrumbs: FC<AchievementBreadcrumbsProps> = ({
       <BaseBreadcrumb>
         <BaseBreadcrumbList>
           <BaseBreadcrumbItem>
-            <BaseBreadcrumbLink href="/gameList.php">All Games</BaseBreadcrumbLink>
+            <BaseBreadcrumbLink asChild>
+              <Link href={route('game.index')}>All Games</Link>
+            </BaseBreadcrumbLink>
           </BaseBreadcrumbItem>
 
           {system ? (
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
index 64581c18b..bc9a92928 100644
--- a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
+++ b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
@@ -4,23 +4,15 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/react-table';
-import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { type Dispatch, type FC, type SetStateAction, useMemo } from 'react';
 
-import {
-  BaseTable,
-  BaseTableBody,
-  BaseTableCell,
-  BaseTableHead,
-  BaseTableHeader,
-  BaseTableRow,
-} from '@/common/components/+vendor/BaseTable';
-import { DataTablePagination } from '@/common/components/DataTablePagination';
 import { useGameListQuery } from '@/common/hooks/useGameListQuery';
 import { usePageProps } from '@/common/hooks/usePageProps';
-import { cn } from '@/utils/cn';
+import { DataTablePagination } from '@/features/game-list/components/DataTablePagination';
 
 import { allGamesDefaultFilters } from '../../utils/allGamesDefaultFilters';
+import { GameListDataTable } from '../GameListDataTable/GameListDataTable';
 import { AllGamesDataTableToolbar } from './AllGamesDataTableToolbar';
 import { buildColumnDefinitions } from './buildColumnDefinitions';
 
@@ -82,8 +74,6 @@ export const AllGamesDataTable: FC<AllGamesDataTableProps> = ({
     state: { columnFilters, columnVisibility, pagination, sorting },
   });
 
-  const visibleColumnCount = table.getVisibleFlatColumns().length;
-
   return (
     <div className="flex flex-col gap-3">
       <AllGamesDataTableToolbar
@@ -92,71 +82,7 @@ export const AllGamesDataTable: FC<AllGamesDataTableProps> = ({
         defaultColumnFilters={allGamesDefaultFilters}
       />
 
-      {/* TODO reusable component */}
-      <BaseTable
-        containerClassName={cn(
-          'overflow-auto rounded-md border border-neutral-700/80 bg-embed',
-          'light:border-neutral-300 lg:overflow-visible lg:rounded-sm',
-
-          // A sticky header cannot support this many columns. We have to drop stickiness.
-          visibleColumnCount > 8 ? 'lg:!overflow-x-scroll' : '',
-          visibleColumnCount > 10 ? 'xl:!overflow-x-scroll' : '',
-        )}
-      >
-        <BaseTableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <BaseTableRow
-              key={headerGroup.id}
-              className={cn(
-                'do-not-highlight bg-embed lg:sticky lg:top-[41px] lg:z-10',
-
-                // A sticky header cannot support this many columns. We have to drop stickiness.
-                visibleColumnCount > 8 ? 'lg:!top-0' : '',
-                visibleColumnCount > 10 ? 'xl:!top-0' : '',
-              )}
-            >
-              {headerGroup.headers.map((header) => {
-                return (
-                  <BaseTableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(header.column.columnDef.header, header.getContext())}
-                  </BaseTableHead>
-                );
-              })}
-            </BaseTableRow>
-          ))}
-        </BaseTableHeader>
-
-        <BaseTableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <BaseTableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                {row.getVisibleCells().map((cell) => (
-                  <BaseTableCell
-                    key={cell.id}
-                    className={cn(
-                      cell.column.columnDef.meta?.align === 'right' ? 'pr-6 text-right' : '',
-                      cell.column.columnDef.meta?.align === 'center' ? 'text-center' : '',
-                    )}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </BaseTableCell>
-                ))}
-              </BaseTableRow>
-            ))
-          ) : (
-            <BaseTableRow>
-              <BaseTableCell
-                colSpan={table.getAllColumns().length}
-                className="h-24 bg-embed text-center"
-              >
-                No results.
-              </BaseTableCell>
-            </BaseTableRow>
-          )}
-        </BaseTableBody>
-      </BaseTable>
+      <GameListDataTable table={table} />
 
       <DataTablePagination table={table} />
     </div>
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
index 90f1dc54d..b88d86b70 100644
--- a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
@@ -1,10 +1,10 @@
 import type { ColumnFiltersState, Table } from '@tanstack/react-table';
 import { RxCross2 } from 'react-icons/rx';
 
+import { DataTableFacetedFilter } from '@/features/game-list/components/DataTableFacetedFilter';
+import { DataTableSearchInput } from '@/features/game-list/components/DataTableSearchInput';
+import { DataTableViewOptions } from '@/features/game-list/components/DataTableViewOptions';
 import { BaseButton } from '@/common/components/+vendor/BaseButton';
-import { DataTableFacetedFilter } from '@/common/components/DataTableFacetedFilter';
-import { DataTableSearchInput } from '@/common/components/DataTableSearchInput';
-import { DataTableViewOptions } from '@/common/components/DataTableViewOptions';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
 
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/buildColumnDefinitions.tsx b/resources/js/features/game-list/components/AllGamesDataTable/buildColumnDefinitions.tsx
index dc399a46d..497f3e6d7 100644
--- a/resources/js/features/game-list/components/AllGamesDataTable/buildColumnDefinitions.tsx
+++ b/resources/js/features/game-list/components/AllGamesDataTable/buildColumnDefinitions.tsx
@@ -1,255 +1,42 @@
 import type { ColumnDef } from '@tanstack/react-table';
-import dayjs from 'dayjs';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import utc from 'dayjs/plugin/utc';
 
-import { DataTableColumnHeader } from '@/common/components/DataTableColumnHeader';
-import { DataTableRowActions } from '@/common/components/DataTableRowActions';
-import { GameAvatar } from '@/common/components/GameAvatar';
-import { PlayerGameProgressBar } from '@/common/components/PlayerGameProgressBar';
-import { SystemChip } from '@/common/components/SystemChip';
-import { WeightedPointsContainer } from '@/common/components/WeightedPointsContainer';
-import { formatDate } from '@/common/utils/l10n/formatDate';
-import { formatNumber } from '@/common/utils/l10n/formatNumber';
-
-dayjs.extend(utc);
-dayjs.extend(localizedFormat);
+import { buildAchievementsPublishedColumnDef } from '../../utils/column-definitions/buildAchievementsPublishedColumnDef';
+import { buildLastUpdatedColumnDef } from '../../utils/column-definitions/buildLastUpdatedColumnDef';
+import { buildNumUnresolvedTicketsColumnDef } from '../../utils/column-definitions/buildNumUnresolvedTicketsColumnDef';
+import { buildNumVisibleLeaderboardsColumnDef } from '../../utils/column-definitions/buildNumVisibleLeaderboardsColumnDef';
+import { buildPlayerGameProgressColumnDef } from '../../utils/column-definitions/buildPlayerGameProgressColumnDef';
+import { buildPlayersTotalColumnDef } from '../../utils/column-definitions/buildPlayersTotalColumnDef';
+import { buildPointsTotalColumnDef } from '../../utils/column-definitions/buildPointsTotalColumnDef';
+import { buildReleasedAtColumnDef } from '../../utils/column-definitions/buildReleasedAtColumnDef';
+import { buildRetroRatioColumnDef } from '../../utils/column-definitions/buildRetroRatioColumnDef';
+import { buildRowActionsColumnDef } from '../../utils/column-definitions/buildRowActionsColumnDef';
+import { buildSystemColumnDef } from '../../utils/column-definitions/buildSystemColumnDef';
+import { buildTitleColumnDef } from '../../utils/column-definitions/buildTitleColumnDef';
 
 export function buildColumnDefinitions(options: {
   canSeeOpenTicketsColumn: boolean;
   forUsername?: string;
 }): ColumnDef<App.Platform.Data.GameListEntry>[] {
   const columnDefinitions: ColumnDef<App.Platform.Data.GameListEntry>[] = [
-    {
-      id: 'title',
-      accessorKey: 'game',
-      meta: { label: 'Title' },
-      enableHiding: false,
-      header: ({ column, table }) => <DataTableColumnHeader column={column} table={table} />,
-      cell: ({ row }) => {
-        // TODO this should be a reusable component
-
-        if (!row.original.game) {
-          return null;
-        }
-
-        return (
-          <div className="max-w-fit">
-            <div className="max-w-[400px]">
-              <GameAvatar
-                {...row.original.game}
-                size={32}
-                showHoverCardProgressForUsername={options.forUsername}
-              />
-            </div>
-          </div>
-        );
-      },
-    },
-
-    {
-      id: 'system',
-      accessorKey: 'game',
-      meta: { label: 'System' },
-      header: ({ column, table }) => <DataTableColumnHeader column={column} table={table} />,
-      cell: ({ row }) => {
-        if (!row.original.game?.system) {
-          return null;
-        }
-
-        return <SystemChip {...row.original.game.system} />;
-      },
-    },
-
-    {
-      id: 'achievementsPublished',
-      accessorKey: 'game',
-      meta: { label: 'Achievements', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
-      ),
-      cell: ({ row }) => {
-        const achievementsPublished = row.original.game?.achievementsPublished ?? 0;
-
-        return (
-          <p className={achievementsPublished === 0 ? 'text-muted' : ''}>{achievementsPublished}</p>
-        );
-      },
-    },
-
-    {
-      id: 'pointsTotal',
-      accessorKey: 'game',
-      meta: { label: 'Points', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
-      ),
-      cell: ({ row }) => {
-        const pointsTotal = row.original.game?.pointsTotal ?? 0;
-        const pointsWeighted = row.original.game?.pointsWeighted ?? 0;
-
-        if (pointsTotal === 0) {
-          return <p className="text-muted">{pointsTotal}</p>;
-        }
-
-        return (
-          <p className="whitespace-nowrap">
-            {formatNumber(pointsTotal)}{' '}
-            <WeightedPointsContainer>({formatNumber(pointsWeighted)})</WeightedPointsContainer>
-          </p>
-        );
-      },
-    },
-
-    {
-      id: 'retroRatio',
-      accessorKey: 'game',
-      meta: { label: 'Rarity', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
-      ),
-      cell: ({ row }) => {
-        const pointsTotal = row.original.game?.pointsTotal ?? 0;
-
-        if (pointsTotal === 0) {
-          return <p className="text-muted italic">none</p>;
-        }
-
-        const pointsWeighted = row.original.game?.pointsWeighted ?? 0;
-
-        const result = pointsWeighted / pointsTotal;
-
-        return <p>&times;{(Math.round((result + Number.EPSILON) * 100) / 100).toFixed(2)}</p>;
-      },
-    },
-
-    {
-      id: 'lastUpdated',
-      accessorKey: 'game',
-      meta: { label: 'Last Updated' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="date" />
-      ),
-      cell: ({ row }) => {
-        const date = row.original.game?.lastUpdated ?? new Date();
-
-        return <p>{formatDate(dayjs.utc(date), 'll')}</p>;
-      },
-    },
-
-    {
-      id: 'releasedAt',
-      accessorKey: 'game',
-      meta: { label: 'Release Date' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="date" />
-      ),
-      cell: ({ row }) => {
-        const date = row.original.game?.releasedAt ?? null;
-        const granularity = row.original.game?.releasedAtGranularity ?? 'day';
-
-        if (!date) {
-          return <p className="text-muted italic">unknown</p>;
-        }
-
-        const dayjsDate = dayjs.utc(date);
-        let formattedDate;
-        if (granularity === 'day') {
-          formattedDate = formatDate(dayjsDate, 'll');
-        } else if (granularity === 'month') {
-          formattedDate = dayjsDate.format('MMM YYYY');
-        } else {
-          formattedDate = dayjsDate.format('YYYY');
-        }
-
-        return <p>{formattedDate}</p>;
-      },
-    },
-
-    {
-      id: 'playersTotal',
-      accessorKey: 'game',
-      meta: { label: 'Players', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
-      ),
-      cell: ({ row }) => {
-        const playersTotal = row.original.game?.playersTotal ?? 0;
-
-        return (
-          <p className={playersTotal === 0 ? 'text-muted' : ''}>{formatNumber(playersTotal)}</p>
-        );
-      },
-    },
-
-    {
-      id: 'numVisibleLeaderboards',
-      accessorKey: 'game',
-      meta: { label: 'Leaderboards', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
-      ),
-      cell: ({ row }) => {
-        const numVisibleLeaderboards = row.original.game?.numVisibleLeaderboards ?? 0;
-
-        return (
-          <p className={numVisibleLeaderboards === 0 ? 'text-muted' : ''}>
-            {formatNumber(numVisibleLeaderboards)}
-          </p>
-        );
-      },
-    },
+    buildTitleColumnDef({ forUsername: options.forUsername }),
+    buildSystemColumnDef({}),
+    buildAchievementsPublishedColumnDef({}),
+    buildPointsTotalColumnDef({}),
+    buildRetroRatioColumnDef({}),
+    buildLastUpdatedColumnDef({}),
+    buildReleasedAtColumnDef({}),
+    buildPlayersTotalColumnDef({}),
+    buildNumVisibleLeaderboardsColumnDef({}),
   ];
 
   if (options.canSeeOpenTicketsColumn) {
-    columnDefinitions.push({
-      id: 'numUnresolvedTickets',
-      accessorKey: 'game',
-      meta: { label: 'Tickets', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader column={column} table={table} sortType="quantity" />
-      ),
-      cell: ({ row }) => {
-        const numUnresolvedTickets = row.original.game?.numUnresolvedTickets ?? 0;
-        const gameId = row.original.game?.id ?? 0;
-
-        return (
-          <a
-            href={route('game.tickets', { game: gameId, 'filter[achievement]': 'core' })}
-            className={numUnresolvedTickets === 0 ? 'text-muted' : ''}
-          >
-            {numUnresolvedTickets}
-          </a>
-        );
-      },
-    });
+    columnDefinitions.push(buildNumUnresolvedTicketsColumnDef({}));
   }
 
   columnDefinitions.push(
     ...([
-      {
-        id: 'progress',
-        accessorKey: 'game',
-        meta: { label: 'Progress', align: 'left' },
-        header: ({ column, table }) => (
-          <DataTableColumnHeader column={column} table={table} sortType="quantity" />
-        ),
-        cell: ({ row }) => {
-          const { game, playerGame } = row.original;
-
-          return <PlayerGameProgressBar game={game} playerGame={playerGame} />;
-        },
-      },
-
-      {
-        id: 'actions',
-        cell: ({ row }) => (
-          // Prevent spurious tooltip re-openings after a toast pops and closes.
-          <div onFocusCapture={(event) => event.stopPropagation()}>
-            <DataTableRowActions row={row} />
-          </div>
-        ),
-      },
+      buildPlayerGameProgressColumnDef({}),
+      buildRowActionsColumnDef(),
     ] satisfies ColumnDef<App.Platform.Data.GameListEntry>[]),
   );
 
diff --git a/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.test.tsx b/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.test.tsx
new file mode 100644
index 000000000..58e118bbf
--- /dev/null
+++ b/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.test.tsx
@@ -0,0 +1,686 @@
+import userEvent from '@testing-library/user-event';
+import axios from 'axios';
+
+import { createAuthenticatedUser } from '@/common/models';
+import { UserGameListType } from '@/common/utils/generatedAppConstants';
+import { render, screen, waitFor } from '@/test';
+import {
+  createGame,
+  createGameListEntry,
+  createPaginatedData,
+  createSystem,
+  createZiggyProps,
+} from '@/test/factories';
+
+import { AllGamesMainRoot } from './AllGamesMainRoot';
+
+// Suppress AggregateError invocations from unmocked fetch calls to the back-end.
+console.error = vi.fn();
+
+describe('Component: AllGamesMainRoot', () => {
+  it('renders without crashing', () => {
+    // ARRANGE
+    const { container } = render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ASSERT
+    expect(container).toBeTruthy();
+  });
+
+  it('displays default columns', () => {
+    // ARRANGE
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole('columnheader', { name: /title/i }));
+    expect(screen.getByRole('columnheader', { name: /system/i }));
+    expect(screen.getByRole('columnheader', { name: /achievements/i }));
+    expect(screen.getByRole('columnheader', { name: /points/i }));
+    expect(screen.getByRole('columnheader', { name: /rarity/i }));
+    expect(screen.getByRole('columnheader', { name: /release date/i }));
+  });
+
+  it('shows game rows', () => {
+    // ARRANGE
+    const mockSystem = createSystem({
+      nameShort: 'MD',
+      iconUrl: 'https://retroachievements.org/test.png',
+    });
+
+    const mockGame = createGame({
+      title: 'Sonic the Hedgehog',
+      system: mockSystem,
+      achievementsPublished: 42,
+      pointsTotal: 500,
+      pointsWeighted: 1000,
+      releasedAt: '2006-08-24T00:56:00+00:00',
+      releasedAtGranularity: 'day',
+    });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([
+          createGameListEntry({ game: mockGame, playerGame: null }),
+        ]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole('cell', { name: /sonic/i })).toBeVisible();
+    expect(screen.getByRole('cell', { name: /md/i })).toBeVisible();
+    expect(screen.getByRole('cell', { name: '42' })).toBeVisible();
+    expect(screen.getByRole('cell', { name: '500 (1,000)' })).toBeVisible();
+    expect(screen.getByRole('cell', { name: '×2.00' })).toBeVisible();
+    expect(screen.getByRole('cell', { name: 'Aug 24, 2006' })).toBeVisible();
+  });
+
+  it('allows users to add games to their backlog', async () => {
+    // ARRANGE
+    const postSpy = vi.spyOn(axios, 'post').mockResolvedValueOnce({ success: true });
+
+    const mockSystem = createSystem({
+      nameShort: 'MD',
+      iconUrl: 'https://retroachievements.org/test.png',
+    });
+
+    const mockGame = createGame({
+      title: 'Sonic the Hedgehog',
+      system: mockSystem,
+      achievementsPublished: 42,
+      pointsTotal: 500,
+      pointsWeighted: 1000,
+      releasedAt: '2006-08-24T00:56:00+00:00',
+      releasedAtGranularity: 'day',
+    });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([
+          createGameListEntry({ game: mockGame, isInBacklog: false }),
+        ]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole('button', { name: /add to want to play/i }));
+
+    // ASSERT
+    expect(postSpy).toHaveBeenCalledWith(['api.user-game-list.store', mockGame.id], {
+      userGameListType: UserGameListType.Play,
+    });
+  });
+
+  it('allows users to remove games from their backlog', async () => {
+    // ARRANGE
+    const deleteSpy = vi.spyOn(axios, 'delete').mockResolvedValueOnce({ success: true });
+
+    const mockSystem = createSystem({
+      nameShort: 'MD',
+      iconUrl: 'https://retroachievements.org/test.png',
+    });
+
+    const mockGame = createGame({
+      title: 'Sonic the Hedgehog',
+      system: mockSystem,
+      achievementsPublished: 42,
+      pointsTotal: 500,
+      pointsWeighted: 1000,
+      releasedAt: '2006-08-24T00:56:00+00:00',
+      releasedAtGranularity: 'day',
+    });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([
+          createGameListEntry({ game: mockGame, isInBacklog: true }),
+        ]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole('button', { name: /remove/i }));
+
+    // ASSERT
+    expect(deleteSpy).toHaveBeenCalledWith(['api.user-game-list.destroy', mockGame.id], {
+      data: { userGameListType: UserGameListType.Play },
+    });
+  });
+
+  it('allows users to undo removing games from their backlog', async () => {
+    // ARRANGE
+    window.HTMLElement.prototype.setPointerCapture = vi.fn();
+
+    const deleteSpy = vi.spyOn(axios, 'delete').mockResolvedValueOnce({ success: true });
+    const postSpy = vi.spyOn(axios, 'post').mockResolvedValueOnce({ success: true });
+
+    const mockSystem = createSystem({
+      nameShort: 'MD',
+      iconUrl: 'https://retroachievements.org/test.png',
+    });
+
+    const mockGame = createGame({
+      title: 'Sonic the Hedgehog',
+      system: mockSystem,
+      achievementsPublished: 42,
+      pointsTotal: 500,
+      pointsWeighted: 1000,
+      releasedAt: '2006-08-24T00:56:00+00:00',
+      releasedAtGranularity: 'day',
+    });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([
+          createGameListEntry({ game: mockGame, isInBacklog: true }),
+        ]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole('button', { name: /remove/i }));
+
+    const undoButtonEl = await screen.findByRole('button', { name: /undo/i });
+    await userEvent.click(undoButtonEl);
+
+    // ASSERT
+    expect(deleteSpy).toHaveBeenCalledWith(['api.user-game-list.destroy', mockGame.id], {
+      data: { userGameListType: UserGameListType.Play },
+    });
+
+    expect(postSpy).toHaveBeenCalledWith(['api.user-game-list.store', mockGame.id], {
+      userGameListType: UserGameListType.Play,
+    });
+  });
+
+  it('allows users to toggle column visibility', async () => {
+    // ARRANGE
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /points/i }));
+
+    // ASSERT
+    expect(screen.queryByRole('columnheader', { name: /points/i })).not.toBeInTheDocument();
+  });
+
+  it('given the user cannot develop achievements, they cannot enable an Open Tickets column', async () => {
+    // ARRANGE
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+
+    // ASSERT
+    expect(
+      screen.queryByRole('menuitemcheckbox', { name: /open tickets/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('given the user can develop achievements, they can enable an Open Tickets column', async () => {
+    // ARRANGE
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: true },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /tickets/i }));
+
+    // ASSERT
+    expect(screen.getByRole('columnheader', { name: /tickets/i })).toBeVisible();
+  });
+
+  it('given a game row has a non-zero amount of open tickets, the cell links to the tickets page', async () => {
+    // ARRANGE
+    const mockSystem = createSystem({
+      nameShort: 'MD',
+      iconUrl: 'https://retroachievements.org/test.png',
+    });
+
+    const mockGame = createGame({
+      id: 1,
+      title: 'Sonic the Hedgehog',
+      system: mockSystem,
+      achievementsPublished: 42,
+      pointsTotal: 500,
+      pointsWeighted: 1000,
+      releasedAt: '2006-08-24T00:56:00+00:00',
+      releasedAtGranularity: 'day',
+      numUnresolvedTickets: 2,
+    });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([createGameListEntry({ game: mockGame })]),
+        can: { develop: true },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /tickets/i }));
+
+    // ASSERT
+    expect(screen.getByRole('link', { name: '2' }));
+  });
+
+  it('allows the user to search for games on the list', async () => {
+    // ARRANGE
+    const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.type(screen.getByRole('textbox', { name: /search games/i }), 'dragon quest');
+
+    // ASSERT
+    await waitFor(() => {
+      expect(getSpy).toHaveBeenCalledWith([
+        'api.game.index',
+        {
+          'filter[achievementsPublished]': 'has',
+          'filter[title]': 'dragon quest',
+          'page[number]': 1,
+          sort: null,
+        },
+      ]);
+    });
+  });
+
+  it('by default, has the achievements published filter set to "Yes"', () => {
+    // ARRANGE
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole('button', { name: /yes/i })).toBeVisible();
+  });
+
+  it('allows the user to filter by system/console', async () => {
+    // ARRANGE
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [
+          createSystem({ id: 1, name: 'Genesis/Mega Drive', nameShort: 'MD' }),
+        ],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByTestId('filter-System'));
+    await userEvent.click(screen.getByRole('option', { name: /genesis/i }));
+
+    // ASSERT
+    const systemFilterButtonEl = screen.getByTestId('filter-System');
+    expect(systemFilterButtonEl).toHaveTextContent(/md/i);
+
+    await waitFor(() => {
+      expect(getSpy).toHaveBeenCalledWith([
+        'api.game.index',
+        {
+          'filter[achievementsPublished]': 'has',
+          'filter[system]': '1',
+          'page[number]': 1,
+          sort: null,
+        },
+      ]);
+    });
+  });
+
+  it('given a non-default filter is set, allows the user to click a button to reset their filters', async () => {
+    // ARRANGE
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    vi.spyOn(axios, 'get')
+      .mockResolvedValueOnce({ data: createPaginatedData([]) })
+      .mockResolvedValueOnce({ data: createPaginatedData([]) }); // the GET will be called twice
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [
+          createSystem({ id: 1, name: 'Genesis/Mega Drive', nameShort: 'MD' }),
+        ],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByTestId('filter-System'));
+    await userEvent.click(screen.getByRole('option', { name: /genesis/i }));
+
+    await userEvent.click(screen.getByRole('button', { name: /reset/i }));
+
+    // ASSERT
+    const defaultFilterButtonEl = screen.getByTestId('filter-Has achievements');
+    expect(defaultFilterButtonEl).toHaveTextContent(/yes/i);
+
+    const systemFilterButtonEl = screen.getByTestId('filter-System');
+    expect(systemFilterButtonEl).not.toHaveTextContent(/md/i);
+  });
+
+  it('given a filter is currently applied, shows both the filtered and unfiltered game totals', async () => {
+    // ARRANGE
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    vi.spyOn(axios, 'get').mockResolvedValueOnce({
+      data: createPaginatedData([], { total: 3, unfilteredTotal: 587 }),
+    });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByTestId('filter-System'));
+    await userEvent.click(screen.getByRole('option', { name: /genesis/i }));
+
+    // ASSERT
+    await waitFor(() => {
+      expect(screen.getByText(/3 of 587 games/i)).toBeVisible();
+    });
+  });
+
+  it('allows the user to change the "has achievements" filter, with only a single option being set', async () => {
+    // ARRANGE
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+
+    const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByTestId('filter-Has achievements'));
+    await userEvent.click(screen.getByRole('option', { name: /no/i }));
+
+    // ASSERT
+    await waitFor(() => {
+      expect(getSpy).toHaveBeenCalledWith([
+        'api.game.index',
+        {
+          'filter[achievementsPublished]': 'none',
+          'page[number]': 1,
+          sort: null,
+        },
+      ]);
+    });
+  });
+
+  it('allows the user to sort by a string column', async () => {
+    // ARRANGE
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByTestId('column-header-System'));
+    await userEvent.click(screen.getByRole('menuitem', { name: /desc/i }));
+
+    // ASSERT
+    await waitFor(() => {
+      expect(getSpy).toHaveBeenCalledWith([
+        'api.game.index',
+        {
+          'filter[achievementsPublished]': 'has',
+          'page[number]': 1,
+          sort: '-system',
+        },
+      ]);
+    });
+  });
+
+  it('allows the user to sort by a numeric column', async () => {
+    // ARRANGE
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByTestId('column-header-Achievements'));
+    await userEvent.click(screen.getByRole('menuitem', { name: /less/i }));
+
+    // ASSERT
+    await waitFor(() => {
+      expect(getSpy).toHaveBeenCalledWith([
+        'api.game.index',
+        {
+          'filter[achievementsPublished]': 'has',
+          'page[number]': 1,
+          sort: 'achievementsPublished',
+        },
+      ]);
+    });
+  });
+
+  it('allows the user to sort by a date column', async () => {
+    // ARRANGE
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByTestId('column-header-Release Date'));
+    await userEvent.click(screen.getByRole('menuitem', { name: /earliest/i }));
+
+    // ASSERT
+    await waitFor(() => {
+      expect(getSpy).toHaveBeenCalledWith([
+        'api.game.index',
+        {
+          'filter[achievementsPublished]': 'has',
+          'page[number]': 1,
+          sort: 'releasedAt',
+        },
+      ]);
+    });
+  });
+
+  it('allows the user to hide a column via the column header button', async () => {
+    // ARRANGE
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByTestId('column-header-Achievements'));
+    await userEvent.click(screen.getByRole('menuitem', { name: /hide/i }));
+
+    // ASSERT
+    expect(screen.queryByTestId('column-header-Achievements')).not.toBeInTheDocument();
+  });
+
+  it('always displays the number of total games', () => {
+    // ARRANGE
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
+        paginatedGameListEntries: createPaginatedData([], { total: 300 }),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText(/300 games/i)).toBeVisible();
+  });
+
+  it('given there are multiple pages, allows the user to advance to the next page', async () => {
+    // ARRANGE
+    window.scrollTo = vi.fn();
+    const getSpy = vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: createPaginatedData([]) });
+
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
+        paginatedGameListEntries: createPaginatedData([createGameListEntry()], {
+          total: 300,
+          currentPage: 1,
+          perPage: 1,
+        }),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole('button', { name: /next page/i }));
+
+    // ASSERT
+    await waitFor(() => {
+      expect(getSpy).toHaveBeenCalledWith([
+        'api.game.index',
+        {
+          'filter[achievementsPublished]': 'has',
+          'page[number]': 2,
+          sort: null,
+        },
+      ]);
+    });
+  });
+
+  it("given the user presses the '/' hotkey, focuses the search input", async () => {
+    // ARRANGE
+    render<App.Community.Data.UserGameListPageProps>(<AllGamesMainRoot />, {
+      pageProps: {
+        auth: { user: createAuthenticatedUser() },
+        filterableSystemOptions: [createSystem({ id: 1, name: 'Genesis/Mega Drive' })],
+        paginatedGameListEntries: createPaginatedData([]),
+        can: { develop: false },
+        ziggy: createZiggyProps(),
+      },
+    });
+
+    // ACT
+    await userEvent.keyboard('/');
+
+    // ASSERT
+    expect(screen.getByRole('textbox', { name: /search/i })).toHaveFocus();
+  });
+});
diff --git a/resources/js/common/components/DataTableColumnHeader/DataTableColumnHeader.tsx b/resources/js/features/game-list/components/DataTableColumnHeader/DataTableColumnHeader.tsx
similarity index 96%
rename from resources/js/common/components/DataTableColumnHeader/DataTableColumnHeader.tsx
rename to resources/js/features/game-list/components/DataTableColumnHeader/DataTableColumnHeader.tsx
index b0aef32a5..f527d2037 100644
--- a/resources/js/common/components/DataTableColumnHeader/DataTableColumnHeader.tsx
+++ b/resources/js/features/game-list/components/DataTableColumnHeader/DataTableColumnHeader.tsx
@@ -4,17 +4,17 @@ import type { IconType } from 'react-icons/lib';
 import { RxArrowDown, RxArrowUp, RxCaretSort, RxEyeNone } from 'react-icons/rx';
 import type { RouteName } from 'ziggy-js';
 
-import { cn } from '@/utils/cn';
-
-import { useDataTablePrefetchSort } from '../../hooks/useDataTablePrefetchSort';
-import { BaseButton } from '../+vendor/BaseButton';
+import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import {
   BaseDropdownMenu,
   BaseDropdownMenuContent,
   BaseDropdownMenuItem,
   BaseDropdownMenuSeparator,
   BaseDropdownMenuTrigger,
-} from '../+vendor/BaseDropdownMenu';
+} from '@/common/components/+vendor/BaseDropdownMenu';
+import { cn } from '@/utils/cn';
+
+import { useDataTablePrefetchSort } from '../../hooks/useDataTablePrefetchSort';
 
 type SortDirection = 'asc' | 'desc';
 type SortConfig = {
@@ -58,7 +58,7 @@ export function DataTableColumnHeader<TData, TValue>({
   column,
   table,
   sortType = 'default',
-  tableApiRouteName = 'api.game-list.index',
+  tableApiRouteName = 'api.game.index',
 }: DataTableColumnHeaderProps<TData, TValue>): ReactNode {
   const { prefetchSort } = useDataTablePrefetchSort(table, tableApiRouteName);
 
diff --git a/resources/js/common/components/DataTableColumnHeader/index.ts b/resources/js/features/game-list/components/DataTableColumnHeader/index.ts
similarity index 100%
rename from resources/js/common/components/DataTableColumnHeader/index.ts
rename to resources/js/features/game-list/components/DataTableColumnHeader/index.ts
diff --git a/resources/js/common/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx b/resources/js/features/game-list/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
similarity index 92%
rename from resources/js/common/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
rename to resources/js/features/game-list/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
index 233fa4bb7..040d2b1ac 100644
--- a/resources/js/common/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
+++ b/resources/js/features/game-list/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
@@ -2,11 +2,8 @@ import type { Column } from '@tanstack/react-table';
 import type { FC } from 'react';
 import { RxCheck, RxPlusCircled } from 'react-icons/rx';
 
-import { cn } from '@/utils/cn';
-
-import { buildTrackingClassNames } from '../../utils/buildTrackingClassNames';
-import { BaseBadge } from '../+vendor/BaseBadge';
-import { BaseButton } from '../+vendor/BaseButton';
+import { BaseBadge } from '@/common/components/+vendor/BaseBadge';
+import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import {
   BaseCommand,
   BaseCommandEmpty,
@@ -15,9 +12,15 @@ import {
   BaseCommandItem,
   BaseCommandList,
   BaseCommandSeparator,
-} from '../+vendor/BaseCommand';
-import { BasePopover, BasePopoverContent, BasePopoverTrigger } from '../+vendor/BasePopover';
-import { BaseSeparator } from '../+vendor/BaseSeparator';
+} from '@/common/components/+vendor/BaseCommand';
+import {
+  BasePopover,
+  BasePopoverContent,
+  BasePopoverTrigger,
+} from '@/common/components/+vendor/BasePopover';
+import { BaseSeparator } from '@/common/components/+vendor/BaseSeparator';
+import { buildTrackingClassNames } from '@/common/utils/buildTrackingClassNames';
+import { cn } from '@/utils/cn';
 
 interface DataTableFacetedFilterProps<TData, TValue> {
   options: Array<{
diff --git a/resources/js/common/components/DataTableFacetedFilter/index.ts b/resources/js/features/game-list/components/DataTableFacetedFilter/index.ts
similarity index 100%
rename from resources/js/common/components/DataTableFacetedFilter/index.ts
rename to resources/js/features/game-list/components/DataTableFacetedFilter/index.ts
diff --git a/resources/js/common/components/DataTablePagination/DataTablePagination.tsx b/resources/js/features/game-list/components/DataTablePagination/DataTablePagination.tsx
similarity index 94%
rename from resources/js/common/components/DataTablePagination/DataTablePagination.tsx
rename to resources/js/features/game-list/components/DataTablePagination/DataTablePagination.tsx
index 16c37b2f0..b5f5f82dd 100644
--- a/resources/js/common/components/DataTablePagination/DataTablePagination.tsx
+++ b/resources/js/features/game-list/components/DataTablePagination/DataTablePagination.tsx
@@ -3,9 +3,10 @@ import type { ReactNode } from 'react';
 import { LuArrowLeft, LuArrowLeftToLine, LuArrowRight, LuArrowRightToLine } from 'react-icons/lu';
 import type { RouteName } from 'ziggy-js';
 
+import { BaseButton } from '@/common/components/+vendor/BaseButton';
+import { BasePagination, BasePaginationContent } from '@/common/components/+vendor/BasePagination';
+
 import { useDataTablePrefetchPagination } from '../../hooks/useDataTablePrefetchPagination';
-import { BaseButton } from '../+vendor/BaseButton';
-import { BasePagination, BasePaginationContent } from '../+vendor/BasePagination';
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
@@ -14,7 +15,7 @@ interface DataTablePaginationProps<TData> {
 
 export function DataTablePagination<TData>({
   table,
-  tableApiRouteName = 'api.game-list.index',
+  tableApiRouteName = 'api.game.index',
 }: DataTablePaginationProps<TData>): ReactNode {
   const { pagination } = table.getState();
 
diff --git a/resources/js/common/components/DataTablePagination/index.ts b/resources/js/features/game-list/components/DataTablePagination/index.ts
similarity index 100%
rename from resources/js/common/components/DataTablePagination/index.ts
rename to resources/js/features/game-list/components/DataTablePagination/index.ts
diff --git a/resources/js/common/components/DataTableRowActions/DataTableRowActions.tsx b/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
similarity index 88%
rename from resources/js/common/components/DataTableRowActions/DataTableRowActions.tsx
rename to resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
index c393697ef..498f6520e 100644
--- a/resources/js/common/components/DataTableRowActions/DataTableRowActions.tsx
+++ b/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
@@ -2,15 +2,18 @@ import { useQueryClient } from '@tanstack/react-query';
 import type { Row } from '@tanstack/react-table';
 import { MdClose } from 'react-icons/md';
 
+import { BaseButton } from '@/common/components/+vendor/BaseButton';
+import { toastMessage } from '@/common/components/+vendor/BaseToaster';
+import {
+  BaseTooltip,
+  BaseTooltipContent,
+  BaseTooltipTrigger,
+} from '@/common/components/+vendor/BaseTooltip';
+import { useAddToBacklogMutation } from '@/common/hooks/useAddToBacklogMutation';
 import { usePageProps } from '@/common/hooks/usePageProps';
+import { useRemoveFromBacklogMutation } from '@/common/hooks/useRemoveFromBacklogMutation';
 import { cn } from '@/utils/cn';
 
-import { useAddToBacklogMutation } from '../../hooks/useAddToBacklogMutation';
-import { useRemoveFromBacklogMutation } from '../../hooks/useRemoveFromBacklogMutation';
-import { BaseButton } from '../+vendor/BaseButton';
-import { toastMessage } from '../+vendor/BaseToaster';
-import { BaseTooltip, BaseTooltipContent, BaseTooltipTrigger } from '../+vendor/BaseTooltip';
-
 /**
  * If the table row needs to have more than one action, it should go into a menu.
  * @see https://ui.shadcn.com/examples/tasks
diff --git a/resources/js/common/components/DataTableRowActions/index.ts b/resources/js/features/game-list/components/DataTableRowActions/index.ts
similarity index 100%
rename from resources/js/common/components/DataTableRowActions/index.ts
rename to resources/js/features/game-list/components/DataTableRowActions/index.ts
diff --git a/resources/js/common/components/DataTableSearchInput/DataTableSearchInput.tsx b/resources/js/features/game-list/components/DataTableSearchInput/DataTableSearchInput.tsx
similarity index 100%
rename from resources/js/common/components/DataTableSearchInput/DataTableSearchInput.tsx
rename to resources/js/features/game-list/components/DataTableSearchInput/DataTableSearchInput.tsx
diff --git a/resources/js/common/components/DataTableSearchInput/index.ts b/resources/js/features/game-list/components/DataTableSearchInput/index.ts
similarity index 100%
rename from resources/js/common/components/DataTableSearchInput/index.ts
rename to resources/js/features/game-list/components/DataTableSearchInput/index.ts
diff --git a/resources/js/common/components/DataTableSearchInput/useSearchInputHotkey.ts b/resources/js/features/game-list/components/DataTableSearchInput/useSearchInputHotkey.ts
similarity index 100%
rename from resources/js/common/components/DataTableSearchInput/useSearchInputHotkey.ts
rename to resources/js/features/game-list/components/DataTableSearchInput/useSearchInputHotkey.ts
diff --git a/resources/js/common/components/DataTableViewOptions/DataTableViewOptions.tsx b/resources/js/features/game-list/components/DataTableViewOptions/DataTableViewOptions.tsx
similarity index 92%
rename from resources/js/common/components/DataTableViewOptions/DataTableViewOptions.tsx
rename to resources/js/features/game-list/components/DataTableViewOptions/DataTableViewOptions.tsx
index 59069e4ce..3d6ef6ad0 100644
--- a/resources/js/common/components/DataTableViewOptions/DataTableViewOptions.tsx
+++ b/resources/js/features/game-list/components/DataTableViewOptions/DataTableViewOptions.tsx
@@ -1,7 +1,7 @@
 import type { Table } from '@tanstack/react-table';
 import { RxMixerHorizontal } from 'react-icons/rx';
 
-import { BaseButton } from '../+vendor/BaseButton';
+import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import {
   BaseDropdownMenu,
   BaseDropdownMenuCheckboxItem,
@@ -9,7 +9,7 @@ import {
   BaseDropdownMenuLabel,
   BaseDropdownMenuSeparator,
   BaseDropdownMenuTrigger,
-} from '../+vendor/BaseDropdownMenu';
+} from '@/common/components/+vendor/BaseDropdownMenu';
 
 interface DataTableViewOptionsProps<TData> {
   table: Table<TData>;
diff --git a/resources/js/common/components/DataTableViewOptions/index.ts b/resources/js/features/game-list/components/DataTableViewOptions/index.ts
similarity index 100%
rename from resources/js/common/components/DataTableViewOptions/index.ts
rename to resources/js/features/game-list/components/DataTableViewOptions/index.ts
diff --git a/resources/js/features/game-list/components/GameListDataTable/GameListDataTable.tsx b/resources/js/features/game-list/components/GameListDataTable/GameListDataTable.tsx
new file mode 100644
index 000000000..b960567f0
--- /dev/null
+++ b/resources/js/features/game-list/components/GameListDataTable/GameListDataTable.tsx
@@ -0,0 +1,87 @@
+import type { Table } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
+
+import {
+  BaseTable,
+  BaseTableBody,
+  BaseTableCell,
+  BaseTableHead,
+  BaseTableHeader,
+  BaseTableRow,
+} from '@/common/components/+vendor/BaseTable';
+import { cn } from '@/utils/cn';
+
+interface GameListDataTableProps<TData> {
+  table: Table<TData>;
+}
+
+export function GameListDataTable<TData>({ table }: GameListDataTableProps<TData>) {
+  const visibleColumnCount = table.getVisibleFlatColumns().length;
+
+  return (
+    <BaseTable
+      containerClassName={cn(
+        'overflow-auto rounded-md border border-neutral-700/80 bg-embed',
+        'light:border-neutral-300 lg:overflow-visible lg:rounded-sm',
+
+        // A sticky header cannot support this many columns. We have to drop stickiness.
+        visibleColumnCount > 8 ? 'lg:!overflow-x-scroll' : '',
+        visibleColumnCount > 10 ? 'xl:!overflow-x-scroll' : '',
+      )}
+    >
+      <BaseTableHeader>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <BaseTableRow
+            key={headerGroup.id}
+            className={cn(
+              'do-not-highlight bg-embed lg:sticky lg:top-[41px] lg:z-10',
+
+              // A sticky header cannot support this many columns. We have to drop stickiness.
+              visibleColumnCount > 8 ? 'lg:!top-0' : '',
+              visibleColumnCount > 10 ? 'xl:!top-0' : '',
+            )}
+          >
+            {headerGroup.headers.map((header) => {
+              return (
+                <BaseTableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                </BaseTableHead>
+              );
+            })}
+          </BaseTableRow>
+        ))}
+      </BaseTableHeader>
+
+      <BaseTableBody>
+        {table.getRowModel().rows?.length ? (
+          table.getRowModel().rows.map((row) => (
+            <BaseTableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+              {row.getVisibleCells().map((cell) => (
+                <BaseTableCell
+                  key={cell.id}
+                  className={cn(
+                    cell.column.columnDef.meta?.align === 'right' ? 'pr-6 text-right' : '',
+                    cell.column.columnDef.meta?.align === 'center' ? 'text-center' : '',
+                  )}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </BaseTableCell>
+              ))}
+            </BaseTableRow>
+          ))
+        ) : (
+          <BaseTableRow>
+            <BaseTableCell
+              colSpan={table.getAllColumns().length}
+              className="h-24 bg-embed text-center"
+            >
+              No results.
+            </BaseTableCell>
+          </BaseTableRow>
+        )}
+      </BaseTableBody>
+    </BaseTable>
+  );
+}
diff --git a/resources/js/features/game-list/components/GameListDataTable/index.ts b/resources/js/features/game-list/components/GameListDataTable/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
index c237ca687..8a9cdb039 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
@@ -4,23 +4,15 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/react-table';
-import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { type Dispatch, type FC, type SetStateAction, useMemo } from 'react';
 
-import {
-  BaseTable,
-  BaseTableBody,
-  BaseTableCell,
-  BaseTableHead,
-  BaseTableHeader,
-  BaseTableRow,
-} from '@/common/components/+vendor/BaseTable';
-import { DataTablePagination } from '@/common/components/DataTablePagination';
 import { useGameListQuery } from '@/common/hooks/useGameListQuery';
 import { usePageProps } from '@/common/hooks/usePageProps';
-import { cn } from '@/utils/cn';
+import { DataTablePagination } from '@/features/game-list/components/DataTablePagination';
 
 import { wantToPlayGamesDefaultFilters } from '../../utils/wantToPlayGamesDefaultFilters';
+import { GameListDataTable } from '../GameListDataTable/GameListDataTable';
 import { buildColumnDefinitions } from './buildColumnDefinitions';
 import { WantToPlayGamesDataTableToolbar } from './WantToPlayGamesDataTableToolbar';
 
@@ -87,8 +79,6 @@ export const WantToPlayGamesDataTable: FC<WantToPlayGamesDataTableProps> = ({
     state: { columnFilters, columnVisibility, pagination, sorting },
   });
 
-  const visibleColumnCount = table.getVisibleFlatColumns().length;
-
   return (
     <div className="flex flex-col gap-3">
       <WantToPlayGamesDataTableToolbar
@@ -97,70 +87,7 @@ export const WantToPlayGamesDataTable: FC<WantToPlayGamesDataTableProps> = ({
         defaultColumnFilters={wantToPlayGamesDefaultFilters}
       />
 
-      <BaseTable
-        containerClassName={cn(
-          'overflow-auto rounded-md border border-neutral-700/80 bg-embed',
-          'light:border-neutral-300 lg:overflow-visible lg:rounded-sm',
-
-          // A sticky header cannot support this many columns. We have to drop stickiness.
-          visibleColumnCount > 8 ? 'lg:!overflow-x-scroll' : '',
-          visibleColumnCount > 10 ? 'xl:!overflow-x-scroll' : '',
-        )}
-      >
-        <BaseTableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <BaseTableRow
-              key={headerGroup.id}
-              className={cn(
-                'do-not-highlight bg-embed lg:sticky lg:top-[41px] lg:z-10',
-
-                // A sticky header cannot support this many columns. We have to drop stickiness.
-                visibleColumnCount > 8 ? 'lg:!top-0' : '',
-                visibleColumnCount > 10 ? 'xl:!top-0' : '',
-              )}
-            >
-              {headerGroup.headers.map((header) => {
-                return (
-                  <BaseTableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(header.column.columnDef.header, header.getContext())}
-                  </BaseTableHead>
-                );
-              })}
-            </BaseTableRow>
-          ))}
-        </BaseTableHeader>
-
-        <BaseTableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <BaseTableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                {row.getVisibleCells().map((cell) => (
-                  <BaseTableCell
-                    key={cell.id}
-                    className={cn(
-                      cell.column.columnDef.meta?.align === 'right' ? 'pr-6 text-right' : '',
-                      cell.column.columnDef.meta?.align === 'center' ? 'text-center' : '',
-                    )}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </BaseTableCell>
-                ))}
-              </BaseTableRow>
-            ))
-          ) : (
-            <BaseTableRow>
-              <BaseTableCell
-                colSpan={table.getAllColumns().length}
-                className="h-24 bg-embed text-center"
-              >
-                No results.
-              </BaseTableCell>
-            </BaseTableRow>
-          )}
-        </BaseTableBody>
-      </BaseTable>
+      <GameListDataTable table={table} />
 
       <DataTablePagination table={table} tableApiRouteName="api.user-game-list.index" />
     </div>
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
index c4845136f..a7b42454e 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
@@ -1,10 +1,10 @@
 import type { ColumnFiltersState, Table } from '@tanstack/react-table';
 import { RxCross2 } from 'react-icons/rx';
 
+import { DataTableFacetedFilter } from '@/features/game-list/components/DataTableFacetedFilter';
+import { DataTableSearchInput } from '@/features/game-list/components/DataTableSearchInput';
+import { DataTableViewOptions } from '@/features/game-list/components/DataTableViewOptions';
 import { BaseButton } from '@/common/components/+vendor/BaseButton';
-import { DataTableFacetedFilter } from '@/common/components/DataTableFacetedFilter';
-import { DataTableSearchInput } from '@/common/components/DataTableSearchInput';
-import { DataTableViewOptions } from '@/common/components/DataTableViewOptions';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
 
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/buildColumnDefinitions.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/buildColumnDefinitions.tsx
index 06963c96f..307cc4a44 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/buildColumnDefinitions.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/buildColumnDefinitions.tsx
@@ -1,20 +1,18 @@
 import type { ColumnDef } from '@tanstack/react-table';
-import dayjs from 'dayjs';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import utc from 'dayjs/plugin/utc';
 import type { RouteName } from 'ziggy-js';
 
-import { DataTableColumnHeader } from '@/common/components/DataTableColumnHeader';
-import { DataTableRowActions } from '@/common/components/DataTableRowActions';
-import { GameAvatar } from '@/common/components/GameAvatar';
-import { PlayerGameProgressBar } from '@/common/components/PlayerGameProgressBar';
-import { SystemChip } from '@/common/components/SystemChip';
-import { WeightedPointsContainer } from '@/common/components/WeightedPointsContainer';
-import { formatDate } from '@/common/utils/l10n/formatDate';
-import { formatNumber } from '@/common/utils/l10n/formatNumber';
-
-dayjs.extend(utc);
-dayjs.extend(localizedFormat);
+import { buildAchievementsPublishedColumnDef } from '../../utils/column-definitions/buildAchievementsPublishedColumnDef';
+import { buildLastUpdatedColumnDef } from '../../utils/column-definitions/buildLastUpdatedColumnDef';
+import { buildNumUnresolvedTicketsColumnDef } from '../../utils/column-definitions/buildNumUnresolvedTicketsColumnDef';
+import { buildNumVisibleLeaderboardsColumnDef } from '../../utils/column-definitions/buildNumVisibleLeaderboardsColumnDef';
+import { buildPlayerGameProgressColumnDef } from '../../utils/column-definitions/buildPlayerGameProgressColumnDef';
+import { buildPlayersTotalColumnDef } from '../../utils/column-definitions/buildPlayersTotalColumnDef';
+import { buildPointsTotalColumnDef } from '../../utils/column-definitions/buildPointsTotalColumnDef';
+import { buildReleasedAtColumnDef } from '../../utils/column-definitions/buildReleasedAtColumnDef';
+import { buildRetroRatioColumnDef } from '../../utils/column-definitions/buildRetroRatioColumnDef';
+import { buildRowActionsColumnDef } from '../../utils/column-definitions/buildRowActionsColumnDef';
+import { buildSystemColumnDef } from '../../utils/column-definitions/buildSystemColumnDef';
+import { buildTitleColumnDef } from '../../utils/column-definitions/buildTitleColumnDef';
 
 const tableApiRouteName: RouteName = 'api.user-game-list.index';
 
@@ -23,291 +21,25 @@ export function buildColumnDefinitions(options: {
   forUsername?: string;
 }): ColumnDef<App.Platform.Data.GameListEntry>[] {
   const columnDefinitions: ColumnDef<App.Platform.Data.GameListEntry>[] = [
-    {
-      id: 'title',
-      accessorKey: 'game',
-      meta: { label: 'Title' },
-      enableHiding: false,
-      header: ({ column, table }) => (
-        <DataTableColumnHeader
-          column={column}
-          table={table}
-          tableApiRouteName={tableApiRouteName}
-        />
-      ),
-      cell: ({ row }) => {
-        if (!row.original.game) {
-          return null;
-        }
-
-        return (
-          <div className="max-w-fit">
-            <div className="max-w-[400px]">
-              <GameAvatar
-                {...row.original.game}
-                size={32}
-                showHoverCardProgressForUsername={options.forUsername}
-              />
-            </div>
-          </div>
-        );
-      },
-    },
-
-    {
-      id: 'system',
-      accessorKey: 'game',
-      meta: { label: 'System' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader
-          column={column}
-          table={table}
-          tableApiRouteName={tableApiRouteName}
-        />
-      ),
-      cell: ({ row }) => {
-        if (!row.original.game?.system) {
-          return null;
-        }
-
-        return <SystemChip {...row.original.game.system} />;
-      },
-    },
-
-    {
-      id: 'achievementsPublished',
-      accessorKey: 'game',
-      meta: { label: 'Achievements', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader
-          column={column}
-          table={table}
-          sortType="quantity"
-          tableApiRouteName={tableApiRouteName}
-        />
-      ),
-      cell: ({ row }) => {
-        const achievementsPublished = row.original.game?.achievementsPublished ?? 0;
-
-        return (
-          <p className={achievementsPublished === 0 ? 'text-muted' : ''}>{achievementsPublished}</p>
-        );
-      },
-    },
-
-    {
-      id: 'pointsTotal',
-      accessorKey: 'game',
-      meta: { label: 'Points', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader
-          column={column}
-          table={table}
-          sortType="quantity"
-          tableApiRouteName={tableApiRouteName}
-        />
-      ),
-      cell: ({ row }) => {
-        const pointsTotal = row.original.game?.pointsTotal ?? 0;
-        const pointsWeighted = row.original.game?.pointsWeighted ?? 0;
-
-        if (pointsTotal === 0) {
-          return <p className="text-muted">{pointsTotal}</p>;
-        }
-
-        return (
-          <p className="whitespace-nowrap">
-            {formatNumber(pointsTotal)}{' '}
-            <WeightedPointsContainer>({formatNumber(pointsWeighted)})</WeightedPointsContainer>
-          </p>
-        );
-      },
-    },
-
-    {
-      id: 'retroRatio',
-      accessorKey: 'game',
-      meta: { label: 'Rarity', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader
-          column={column}
-          table={table}
-          sortType="quantity"
-          tableApiRouteName={tableApiRouteName}
-        />
-      ),
-      cell: ({ row }) => {
-        const pointsTotal = row.original.game?.pointsTotal ?? 0;
-
-        if (pointsTotal === 0) {
-          return <p className="text-muted italic">none</p>;
-        }
-
-        const pointsWeighted = row.original.game?.pointsWeighted ?? 0;
-
-        const result = pointsWeighted / pointsTotal;
-
-        return <p>&times;{(Math.round((result + Number.EPSILON) * 100) / 100).toFixed(2)}</p>;
-      },
-    },
-
-    {
-      id: 'lastUpdated',
-      accessorKey: 'game',
-      meta: { label: 'Last Updated' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader
-          column={column}
-          table={table}
-          sortType="date"
-          tableApiRouteName={tableApiRouteName}
-        />
-      ),
-      cell: ({ row }) => {
-        const date = row.original.game?.lastUpdated ?? new Date();
-
-        return <p>{formatDate(dayjs.utc(date), 'll')}</p>;
-      },
-    },
-
-    {
-      id: 'releasedAt',
-      accessorKey: 'game',
-      meta: { label: 'Release Date' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader
-          column={column}
-          table={table}
-          sortType="date"
-          tableApiRouteName={tableApiRouteName}
-        />
-      ),
-      cell: ({ row }) => {
-        const date = row.original.game?.releasedAt ?? null;
-        const granularity = row.original.game?.releasedAtGranularity ?? 'day';
-
-        if (!date) {
-          return <p className="text-muted italic">unknown</p>;
-        }
-
-        const dayjsDate = dayjs.utc(date);
-        let formattedDate;
-        if (granularity === 'day') {
-          formattedDate = formatDate(dayjsDate, 'll');
-        } else if (granularity === 'month') {
-          formattedDate = dayjsDate.format('MMM YYYY');
-        } else {
-          formattedDate = dayjsDate.format('YYYY');
-        }
-
-        return <p>{formattedDate}</p>;
-      },
-    },
-
-    {
-      id: 'playersTotal',
-      accessorKey: 'game',
-      meta: { label: 'Players', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader
-          column={column}
-          table={table}
-          sortType="quantity"
-          tableApiRouteName={tableApiRouteName}
-        />
-      ),
-      cell: ({ row }) => {
-        const playersTotal = row.original.game?.playersTotal ?? 0;
-
-        return (
-          <p className={playersTotal === 0 ? 'text-muted' : ''}>{formatNumber(playersTotal)}</p>
-        );
-      },
-    },
-
-    {
-      id: 'numVisibleLeaderboards',
-      accessorKey: 'game',
-      meta: { label: 'Leaderboards', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader
-          column={column}
-          table={table}
-          sortType="quantity"
-          tableApiRouteName={tableApiRouteName}
-        />
-      ),
-      cell: ({ row }) => {
-        const numVisibleLeaderboards = row.original.game?.numVisibleLeaderboards ?? 0;
-
-        return (
-          <p className={numVisibleLeaderboards === 0 ? 'text-muted' : ''}>
-            {formatNumber(numVisibleLeaderboards)}
-          </p>
-        );
-      },
-    },
+    buildTitleColumnDef({ tableApiRouteName, forUsername: options.forUsername }),
+    buildSystemColumnDef({ tableApiRouteName }),
+    buildAchievementsPublishedColumnDef({ tableApiRouteName }),
+    buildPointsTotalColumnDef({ tableApiRouteName }),
+    buildRetroRatioColumnDef({ tableApiRouteName }),
+    buildLastUpdatedColumnDef({ tableApiRouteName }),
+    buildReleasedAtColumnDef({ tableApiRouteName }),
+    buildPlayersTotalColumnDef({ tableApiRouteName }),
+    buildNumVisibleLeaderboardsColumnDef({ tableApiRouteName }),
   ];
 
   if (options.canSeeOpenTicketsColumn) {
-    columnDefinitions.push({
-      id: 'numUnresolvedTickets',
-      accessorKey: 'game',
-      meta: { label: 'Tickets', align: 'right' },
-      header: ({ column, table }) => (
-        <DataTableColumnHeader
-          column={column}
-          table={table}
-          sortType="quantity"
-          tableApiRouteName={tableApiRouteName}
-        />
-      ),
-      cell: ({ row }) => {
-        const numUnresolvedTickets = row.original.game?.numUnresolvedTickets ?? 0;
-        const gameId = row.original.game?.id ?? 0;
-
-        return (
-          <a
-            href={route('game.tickets', { game: gameId, 'filter[achievement]': 'core' })}
-            className={numUnresolvedTickets === 0 ? 'text-muted' : ''}
-          >
-            {numUnresolvedTickets}
-          </a>
-        );
-      },
-    });
+    columnDefinitions.push(buildNumUnresolvedTicketsColumnDef({ tableApiRouteName }));
   }
 
   columnDefinitions.push(
     ...([
-      {
-        id: 'progress',
-        accessorKey: 'game',
-        meta: { label: 'Progress', align: 'left' },
-        header: ({ column, table }) => (
-          <DataTableColumnHeader
-            column={column}
-            table={table}
-            sortType="quantity"
-            tableApiRouteName={tableApiRouteName}
-          />
-        ),
-        cell: ({ row }) => {
-          const { game, playerGame } = row.original;
-
-          return <PlayerGameProgressBar game={game} playerGame={playerGame} />;
-        },
-      },
-
-      {
-        id: 'actions',
-        cell: ({ row }) => (
-          // Prevent spurious tooltip re-openings after a toast pops and closes.
-          <div onFocusCapture={(event) => event.stopPropagation()}>
-            <DataTableRowActions row={row} />
-          </div>
-        ),
-      },
+      buildPlayerGameProgressColumnDef({ tableApiRouteName }),
+      buildRowActionsColumnDef(),
     ] satisfies ColumnDef<App.Platform.Data.GameListEntry>[]),
   );
 
diff --git a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx
index 78cece112..2c69a616b 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx
@@ -118,7 +118,9 @@ describe('Component: WantToPlayGamesMainRoot', () => {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
-        paginatedGameListEntries: createPaginatedData([createGameListEntry({ game: mockGame })]),
+        paginatedGameListEntries: createPaginatedData([
+          createGameListEntry({ game: mockGame, isInBacklog: true }),
+        ]),
         can: { develop: false },
         ziggy: createZiggyProps(),
       },
@@ -159,7 +161,9 @@ describe('Component: WantToPlayGamesMainRoot', () => {
       pageProps: {
         auth: { user: createAuthenticatedUser() },
         filterableSystemOptions: [],
-        paginatedGameListEntries: createPaginatedData([createGameListEntry({ game: mockGame })]),
+        paginatedGameListEntries: createPaginatedData([
+          createGameListEntry({ game: mockGame, isInBacklog: true }),
+        ]),
         can: { develop: false },
         ziggy: createZiggyProps(),
       },
diff --git a/resources/js/common/hooks/useDataTablePrefetchPagination.ts b/resources/js/features/game-list/hooks/useDataTablePrefetchPagination.ts
similarity index 88%
rename from resources/js/common/hooks/useDataTablePrefetchPagination.ts
rename to resources/js/features/game-list/hooks/useDataTablePrefetchPagination.ts
index 752fd05d9..844c8de65 100644
--- a/resources/js/common/hooks/useDataTablePrefetchPagination.ts
+++ b/resources/js/features/game-list/hooks/useDataTablePrefetchPagination.ts
@@ -3,8 +3,8 @@ import type { Table } from '@tanstack/react-table';
 import axios from 'axios';
 import type { RouteName } from 'ziggy-js';
 
-import { buildGameListQueryFilterParams } from '../utils/buildGameListQueryFilterParams';
-import { buildGameListQuerySortParam } from '../utils/buildGameListQuerySortParam';
+import { buildGameListQueryFilterParams } from '@/common/utils/buildGameListQueryFilterParams';
+import { buildGameListQuerySortParam } from '@/common/utils/buildGameListQuerySortParam';
 
 /**
  * Given the user hovers over a pagination button, it is very likely they will
diff --git a/resources/js/common/hooks/useDataTablePrefetchSort.ts b/resources/js/features/game-list/hooks/useDataTablePrefetchSort.ts
similarity index 88%
rename from resources/js/common/hooks/useDataTablePrefetchSort.ts
rename to resources/js/features/game-list/hooks/useDataTablePrefetchSort.ts
index bfb0d819c..7880309dc 100644
--- a/resources/js/common/hooks/useDataTablePrefetchSort.ts
+++ b/resources/js/features/game-list/hooks/useDataTablePrefetchSort.ts
@@ -3,8 +3,8 @@ import type { Table } from '@tanstack/react-table';
 import axios from 'axios';
 import type { RouteName } from 'ziggy-js';
 
-import { buildGameListQueryFilterParams } from '../utils/buildGameListQueryFilterParams';
-import { buildGameListQuerySortParam } from '../utils/buildGameListQuerySortParam';
+import { buildGameListQueryFilterParams } from '@/common/utils/buildGameListQueryFilterParams';
+import { buildGameListQuerySortParam } from '@/common/utils/buildGameListQuerySortParam';
 
 /**
  * Given the user hovers over a sort option, it is very likely they will
diff --git a/resources/js/features/game-list/utils/column-definitions/buildAchievementsPublishedColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildAchievementsPublishedColumnDef.tsx
new file mode 100644
index 000000000..66fef4c8d
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildAchievementsPublishedColumnDef.tsx
@@ -0,0 +1,33 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { RouteName } from 'ziggy-js';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+interface BuildAchievementsPublishedColumnDefProps {
+  tableApiRouteName?: RouteName;
+}
+
+export function buildAchievementsPublishedColumnDef({
+  tableApiRouteName = 'api.game.index',
+}: BuildAchievementsPublishedColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'achievementsPublished',
+    accessorKey: 'game',
+    meta: { label: 'Achievements', align: 'right' },
+    header: ({ column, table }) => (
+      <DataTableColumnHeader
+        column={column}
+        table={table}
+        sortType="quantity"
+        tableApiRouteName={tableApiRouteName}
+      />
+    ),
+    cell: ({ row }) => {
+      const achievementsPublished = row.original.game?.achievementsPublished ?? 0;
+
+      return (
+        <p className={achievementsPublished === 0 ? 'text-muted' : ''}>{achievementsPublished}</p>
+      );
+    },
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildLastUpdatedColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildLastUpdatedColumnDef.tsx
new file mode 100644
index 000000000..2fd634611
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildLastUpdatedColumnDef.tsx
@@ -0,0 +1,39 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import utc from 'dayjs/plugin/utc';
+import type { RouteName } from 'ziggy-js';
+
+import { formatDate } from '@/common/utils/l10n/formatDate';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+dayjs.extend(utc);
+dayjs.extend(localizedFormat);
+
+interface BuildLastUpdatedColumnDefProps {
+  tableApiRouteName?: RouteName;
+}
+
+export function buildLastUpdatedColumnDef({
+  tableApiRouteName = 'api.game.index',
+}: BuildLastUpdatedColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'lastUpdated',
+    accessorKey: 'game',
+    meta: { label: 'Last Updated' },
+    header: ({ column, table }) => (
+      <DataTableColumnHeader
+        column={column}
+        table={table}
+        sortType="date"
+        tableApiRouteName={tableApiRouteName}
+      />
+    ),
+    cell: ({ row }) => {
+      const date = row.original.game?.lastUpdated ?? new Date();
+
+      return <p>{formatDate(dayjs.utc(date), 'll')}</p>;
+    },
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildNumUnresolvedTicketsColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildNumUnresolvedTicketsColumnDef.tsx
new file mode 100644
index 000000000..256e860bd
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildNumUnresolvedTicketsColumnDef.tsx
@@ -0,0 +1,41 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { RouteName } from 'ziggy-js';
+
+import { formatNumber } from '@/common/utils/l10n/formatNumber';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+interface BuildNumUnresolvedTicketsColumnDefProps {
+  tableApiRouteName?: RouteName;
+}
+
+export function buildNumUnresolvedTicketsColumnDef({
+  tableApiRouteName = 'api.game.index',
+}: BuildNumUnresolvedTicketsColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'numUnresolvedTickets',
+    accessorKey: 'game',
+    meta: { label: 'Tickets', align: 'right' },
+    header: ({ column, table }) => (
+      <DataTableColumnHeader
+        column={column}
+        table={table}
+        sortType="quantity"
+        tableApiRouteName={tableApiRouteName}
+      />
+    ),
+    cell: ({ row }) => {
+      const numUnresolvedTickets = row.original.game?.numUnresolvedTickets ?? 0;
+      const gameId = row.original.game?.id ?? 0;
+
+      return (
+        <a
+          href={route('game.tickets', { game: gameId, 'filter[achievement]': 'core' })}
+          className={numUnresolvedTickets === 0 ? 'text-muted' : ''}
+        >
+          {formatNumber(numUnresolvedTickets)}
+        </a>
+      );
+    },
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildNumVisibleLeaderboardsColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildNumVisibleLeaderboardsColumnDef.tsx
new file mode 100644
index 000000000..bd2f93ae7
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildNumVisibleLeaderboardsColumnDef.tsx
@@ -0,0 +1,37 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { RouteName } from 'ziggy-js';
+
+import { formatNumber } from '@/common/utils/l10n/formatNumber';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+interface BuildNumVisibleLeaderboardsColumnDefProps {
+  tableApiRouteName?: RouteName;
+}
+
+export function buildNumVisibleLeaderboardsColumnDef({
+  tableApiRouteName = 'api.game.index',
+}: BuildNumVisibleLeaderboardsColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'numVisibleLeaderboards',
+    accessorKey: 'game',
+    meta: { label: 'Leaderboards', align: 'right' },
+    header: ({ column, table }) => (
+      <DataTableColumnHeader
+        column={column}
+        table={table}
+        sortType="quantity"
+        tableApiRouteName={tableApiRouteName}
+      />
+    ),
+    cell: ({ row }) => {
+      const numVisibleLeaderboards = row.original.game?.numVisibleLeaderboards ?? 0;
+
+      return (
+        <p className={numVisibleLeaderboards === 0 ? 'text-muted' : ''}>
+          {formatNumber(numVisibleLeaderboards)}
+        </p>
+      );
+    },
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildPlayerGameProgressColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildPlayerGameProgressColumnDef.tsx
new file mode 100644
index 000000000..c69ae7cab
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildPlayerGameProgressColumnDef.tsx
@@ -0,0 +1,33 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { RouteName } from 'ziggy-js';
+
+import { PlayerGameProgressBar } from '@/common/components/PlayerGameProgressBar';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+interface BuildPlayerGameProgressColumnDefProps {
+  tableApiRouteName?: RouteName;
+}
+
+export function buildPlayerGameProgressColumnDef({
+  tableApiRouteName = 'api.game.index',
+}: BuildPlayerGameProgressColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'progress',
+    accessorKey: 'game',
+    meta: { label: 'Progress', align: 'left' },
+    header: ({ column, table }) => (
+      <DataTableColumnHeader
+        column={column}
+        table={table}
+        sortType="quantity"
+        tableApiRouteName={tableApiRouteName}
+      />
+    ),
+    cell: ({ row }) => {
+      const { game, playerGame } = row.original;
+
+      return <PlayerGameProgressBar game={game} playerGame={playerGame} />;
+    },
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildPlayersTotalColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildPlayersTotalColumnDef.tsx
new file mode 100644
index 000000000..0c913f61b
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildPlayersTotalColumnDef.tsx
@@ -0,0 +1,33 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { RouteName } from 'ziggy-js';
+
+import { formatNumber } from '@/common/utils/l10n/formatNumber';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+interface BuildPlayersTotalColumnDefProps {
+  tableApiRouteName?: RouteName;
+}
+
+export function buildPlayersTotalColumnDef({
+  tableApiRouteName = 'api.game.index',
+}: BuildPlayersTotalColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'playersTotal',
+    accessorKey: 'game',
+    meta: { label: 'Players', align: 'right' },
+    header: ({ column, table }) => (
+      <DataTableColumnHeader
+        column={column}
+        table={table}
+        sortType="quantity"
+        tableApiRouteName={tableApiRouteName}
+      />
+    ),
+    cell: ({ row }) => {
+      const playersTotal = row.original.game?.playersTotal ?? 0;
+
+      return <p className={playersTotal === 0 ? 'text-muted' : ''}>{formatNumber(playersTotal)}</p>;
+    },
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildPointsTotalColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildPointsTotalColumnDef.tsx
new file mode 100644
index 000000000..f93a76f2f
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildPointsTotalColumnDef.tsx
@@ -0,0 +1,44 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { RouteName } from 'ziggy-js';
+
+import { WeightedPointsContainer } from '@/common/components/WeightedPointsContainer';
+import { formatNumber } from '@/common/utils/l10n/formatNumber';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+interface BuildPointsTotalColumnDefProps {
+  tableApiRouteName?: RouteName;
+}
+
+export function buildPointsTotalColumnDef({
+  tableApiRouteName = 'api.game.index',
+}: BuildPointsTotalColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'pointsTotal',
+    accessorKey: 'game',
+    meta: { label: 'Points', align: 'right' },
+    header: ({ column, table }) => (
+      <DataTableColumnHeader
+        column={column}
+        table={table}
+        sortType="quantity"
+        tableApiRouteName={tableApiRouteName}
+      />
+    ),
+    cell: ({ row }) => {
+      const pointsTotal = row.original.game?.pointsTotal ?? 0;
+      const pointsWeighted = row.original.game?.pointsWeighted ?? 0;
+
+      if (pointsTotal === 0) {
+        return <p className="text-muted">{pointsTotal}</p>;
+      }
+
+      return (
+        <p className="whitespace-nowrap">
+          {formatNumber(pointsTotal)}{' '}
+          <WeightedPointsContainer>({formatNumber(pointsWeighted)})</WeightedPointsContainer>
+        </p>
+      );
+    },
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildReleasedAtColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildReleasedAtColumnDef.tsx
new file mode 100644
index 000000000..93b963795
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildReleasedAtColumnDef.tsx
@@ -0,0 +1,54 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import utc from 'dayjs/plugin/utc';
+import type { RouteName } from 'ziggy-js';
+
+import { formatDate } from '@/common/utils/l10n/formatDate';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+dayjs.extend(utc);
+dayjs.extend(localizedFormat);
+
+interface BuildReleasedAtColumnDefProps {
+  tableApiRouteName?: RouteName;
+}
+
+export function buildReleasedAtColumnDef({
+  tableApiRouteName = 'api.game.index',
+}: BuildReleasedAtColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'releasedAt',
+    accessorKey: 'game',
+    meta: { label: 'Release Date' },
+    header: ({ column, table }) => (
+      <DataTableColumnHeader
+        column={column}
+        table={table}
+        sortType="date"
+        tableApiRouteName={tableApiRouteName}
+      />
+    ),
+    cell: ({ row }) => {
+      const date = row.original.game?.releasedAt ?? null;
+      const granularity = row.original.game?.releasedAtGranularity ?? 'day';
+
+      if (!date) {
+        return <p className="text-muted italic">unknown</p>;
+      }
+
+      const dayjsDate = dayjs.utc(date);
+      let formattedDate;
+      if (granularity === 'day') {
+        formattedDate = formatDate(dayjsDate, 'll');
+      } else if (granularity === 'month') {
+        formattedDate = dayjsDate.format('MMM YYYY');
+      } else {
+        formattedDate = dayjsDate.format('YYYY');
+      }
+
+      return <p>{formattedDate}</p>;
+    },
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildRetroRatioColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildRetroRatioColumnDef.tsx
new file mode 100644
index 000000000..54f740674
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildRetroRatioColumnDef.tsx
@@ -0,0 +1,39 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { RouteName } from 'ziggy-js';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+interface BuildRetroRatioColumnDefProps {
+  tableApiRouteName?: RouteName;
+}
+
+export function buildRetroRatioColumnDef({
+  tableApiRouteName = 'api.game.index',
+}: BuildRetroRatioColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'retroRatio',
+    accessorKey: 'game',
+    meta: { label: 'Rarity', align: 'right' },
+    header: ({ column, table }) => (
+      <DataTableColumnHeader
+        column={column}
+        table={table}
+        sortType="quantity"
+        tableApiRouteName={tableApiRouteName}
+      />
+    ),
+    cell: ({ row }) => {
+      const pointsTotal = row.original.game?.pointsTotal ?? 0;
+
+      if (pointsTotal === 0) {
+        return <p className="text-muted italic">none</p>;
+      }
+
+      const pointsWeighted = row.original.game?.pointsWeighted ?? 0;
+
+      const result = pointsWeighted / pointsTotal;
+
+      return <p>&times;{(Math.round((result + Number.EPSILON) * 100) / 100).toFixed(2)}</p>;
+    },
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildRowActionsColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildRowActionsColumnDef.tsx
new file mode 100644
index 000000000..ab2d1eb01
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildRowActionsColumnDef.tsx
@@ -0,0 +1,15 @@
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { DataTableRowActions } from '../../components/DataTableRowActions';
+
+export function buildRowActionsColumnDef(): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'actions',
+    cell: ({ row }) => (
+      // Prevent spurious tooltip re-openings after a toast pops and closes.
+      <div onFocusCapture={(event) => event.stopPropagation()}>
+        <DataTableRowActions row={row} />
+      </div>
+    ),
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildSystemColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildSystemColumnDef.tsx
new file mode 100644
index 000000000..f651a733f
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildSystemColumnDef.tsx
@@ -0,0 +1,30 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { RouteName } from 'ziggy-js';
+
+import { SystemChip } from '@/common/components/SystemChip';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+interface BuildSystemColumnDefProps {
+  tableApiRouteName?: RouteName;
+}
+
+export function buildSystemColumnDef({
+  tableApiRouteName = 'api.game.index',
+}: BuildSystemColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'system',
+    accessorKey: 'game',
+    meta: { label: 'System' },
+    header: ({ column, table }) => (
+      <DataTableColumnHeader column={column} table={table} tableApiRouteName={tableApiRouteName} />
+    ),
+    cell: ({ row }) => {
+      if (!row.original.game?.system) {
+        return null;
+      }
+
+      return <SystemChip {...row.original.game.system} />;
+    },
+  };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx
new file mode 100644
index 000000000..d8e0195b8
--- /dev/null
+++ b/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx
@@ -0,0 +1,43 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { RouteName } from 'ziggy-js';
+
+import { GameAvatar } from '@/common/components/GameAvatar';
+
+import { DataTableColumnHeader } from '../../components/DataTableColumnHeader';
+
+interface BuildTitleColumnDefProps {
+  forUsername?: string;
+  tableApiRouteName?: RouteName;
+}
+
+export function buildTitleColumnDef({
+  forUsername,
+  tableApiRouteName = 'api.game.index',
+}: BuildTitleColumnDefProps): ColumnDef<App.Platform.Data.GameListEntry> {
+  return {
+    id: 'title',
+    accessorKey: 'game',
+    meta: { label: 'Title' },
+    enableHiding: false,
+    header: ({ column, table }) => (
+      <DataTableColumnHeader column={column} table={table} tableApiRouteName={tableApiRouteName} />
+    ),
+    cell: ({ row }) => {
+      if (!row.original.game) {
+        return null;
+      }
+
+      return (
+        <div className="max-w-fit">
+          <div className="max-w-[400px]">
+            <GameAvatar
+              {...row.original.game}
+              size={32}
+              showHoverCardProgressForUsername={forUsername}
+            />
+          </div>
+        </div>
+      );
+    },
+  };
+}
diff --git a/resources/js/features/games/components/GameBreadcrumbs/GameBreadcrumbs.test.tsx b/resources/js/features/games/components/GameBreadcrumbs/GameBreadcrumbs.test.tsx
index 8aac7a7fb..a599f316e 100644
--- a/resources/js/features/games/components/GameBreadcrumbs/GameBreadcrumbs.test.tsx
+++ b/resources/js/features/games/components/GameBreadcrumbs/GameBreadcrumbs.test.tsx
@@ -19,7 +19,7 @@ describe('Component: GameBreadcrumbs', () => {
     // ASSERT
     const allGamesLinkEl = screen.getByRole('link', { name: /all games/i });
     expect(allGamesLinkEl).toBeVisible();
-    expect(allGamesLinkEl).toHaveAttribute('href', '/gameList.php');
+    expect(allGamesLinkEl).toHaveAttribute('href', 'game.index');
   });
 
   it('given a system, has a link to the system games list', () => {
diff --git a/resources/js/features/games/components/GameBreadcrumbs/GameBreadcrumbs.tsx b/resources/js/features/games/components/GameBreadcrumbs/GameBreadcrumbs.tsx
index 3062571a0..bb61e6e43 100644
--- a/resources/js/features/games/components/GameBreadcrumbs/GameBreadcrumbs.tsx
+++ b/resources/js/features/games/components/GameBreadcrumbs/GameBreadcrumbs.tsx
@@ -1,3 +1,4 @@
+import { Link } from '@inertiajs/react';
 import type { FC } from 'react';
 
 import {
@@ -22,7 +23,9 @@ export const GameBreadcrumbs: FC<GameBreadcrumbsProps> = ({ currentPageLabel, ga
       <BaseBreadcrumb>
         <BaseBreadcrumbList>
           <BaseBreadcrumbItem>
-            <BaseBreadcrumbLink href="/gameList.php">All Games</BaseBreadcrumbLink>
+            <BaseBreadcrumbLink asChild>
+              <Link href={route('game.index')}>All Games</Link>
+            </BaseBreadcrumbLink>
           </BaseBreadcrumbItem>
 
           {system ? (
diff --git a/resources/js/test/setup.tsx b/resources/js/test/setup.tsx
index b32122ca8..eb7688d0b 100644
--- a/resources/js/test/setup.tsx
+++ b/resources/js/test/setup.tsx
@@ -9,10 +9,15 @@ import type { AppGlobalProps } from '@/common/models';
 
 export * from '@testing-library/react';
 
-vi.mock('@inertiajs/react', () => ({
-  __esModule: true,
-  usePage: vi.fn(),
-}));
+vi.mock('@inertiajs/react', async (importOriginal) => {
+  const original = (await importOriginal()) as any;
+
+  return {
+    ...original,
+    __esModule: true,
+    usePage: vi.fn(),
+  };
+});
 
 /*
 |--------------------------------------------------------------------------
diff --git a/resources/js/ziggy.d.ts b/resources/js/ziggy.d.ts
index 309957428..188cbd66a 100644
--- a/resources/js/ziggy.d.ts
+++ b/resources/js/ziggy.d.ts
@@ -243,7 +243,7 @@ declare module 'ziggy-js' {
     "claims.completed": [],
     "claims.active": [],
     "pulse": [],
-    "api.game-list.index": [],
+    "api.game.index": [],
     "game.hashes.index": [
         {
             "name": "game",
@@ -251,7 +251,7 @@ declare module 'ziggy-js' {
             "binding": "ID"
         }
     ],
-    "game-list.index": [],
+    "game.index": [],
     "game.random": [],
     "api.user.game.destroy": [
         {
@@ -372,7 +372,6 @@ declare module 'ziggy-js' {
     "password.confirmation": [],
     "password.confirm": [],
     "download.index": [],
-    "game.index": [],
     "user.show": [
         {
             "name": "user",
diff --git a/resources/views/components/achievement/breadcrumbs.blade.php b/resources/views/components/achievement/breadcrumbs.blade.php
index ecf7272f2..62d6a6254 100644
--- a/resources/views/components/achievement/breadcrumbs.blade.php
+++ b/resources/views/components/achievement/breadcrumbs.blade.php
@@ -9,7 +9,7 @@
 
 {{-- All Games >> Console Name >> Game Name >> Achievement Name >> Page Name --}}
 <div class="navpath">
-    <a href="/gameList.php">All Games</a>
+    <a href="{{ route('game.index') }}">All Games</a>
 
     &raquo;
 
diff --git a/resources/views/components/game/breadcrumbs.blade.php b/resources/views/components/game/breadcrumbs.blade.php
index 2eadfc562..b9cfd75f6 100644
--- a/resources/views/components/game/breadcrumbs.blade.php
+++ b/resources/views/components/game/breadcrumbs.blade.php
@@ -18,7 +18,7 @@
 
 {{-- All Games >> Console Name >> Game Name >> Page Name --}}
 <div class="navpath">
-    <a href="/gameList.php">All Games</a>
+    <a href="{{ route('game.index') }}">All Games</a>
 
     &raquo;
 
diff --git a/resources/views/components/global-statistics/global-statistics.blade.php b/resources/views/components/global-statistics/global-statistics.blade.php
index e3b218e52..b8a8e4b4c 100644
--- a/resources/views/components/global-statistics/global-statistics.blade.php
+++ b/resources/views/components/global-statistics/global-statistics.blade.php
@@ -4,7 +4,7 @@
     <div class="infobox">
         <div class="w-full">
             <div class="grid grid-cols-2 gap-px mb-2">
-                <x-global-statistics.stat-embed label="Games" :count="$numGames" href="{{ route('game.index', ['s' => 1]) }}" />
+                <x-global-statistics.stat-embed label="Games" :count="$numGames" href="{{ route('game.index') }}" />
                 <x-global-statistics.stat-embed label="Achievements" :count="$numAchievements" href="/achievementList.php" />
                 <x-global-statistics.stat-embed label="Games Mastered" :count="$numHardcoreMasteryAwards" href="/recentMastery.php?t=1&m=1" />
                 <x-global-statistics.stat-embed label="Games Beaten" :count="$numHardcoreGameBeatenAwards" href="/recentMastery.php?t=8&m=1" />
diff --git a/resources/views/components/head-analytics.blade.php b/resources/views/components/head-analytics.blade.php
index cbcbb7c8b..b96291c9b 100644
--- a/resources/views/components/head-analytics.blade.php
+++ b/resources/views/components/head-analytics.blade.php
@@ -57,14 +57,6 @@
         }
     }
 
-    // Extract the `t` parameter from gameList.php to track what kind of list users are opening.
-    if (str_ends_with($url, 'gameList.php') && isset($queryParams['t'])) {
-        $tParam = $queryParams['t'];
-        if ($tParam === 'play' || $tParam === 'develop') {
-            $props['type'] = $queryParams['t'];
-        }
-    }
-
     // Track what topic ID users are viewing at viewtopic.php.
     if (strpos($url, 'viewtopic') !== false && isset($queryParams['t'])) {
         $props['topicId'] = $queryParams['t'];
diff --git a/resources/views/components/leaderboard/breadcrumbs.blade.php b/resources/views/components/leaderboard/breadcrumbs.blade.php
index 2b35788cf..51adbcdce 100644
--- a/resources/views/components/leaderboard/breadcrumbs.blade.php
+++ b/resources/views/components/leaderboard/breadcrumbs.blade.php
@@ -9,7 +9,7 @@
 
 {{-- All Games >> Console Name >> Game Name >> Leaderboard Name >> Page Name --}}
 <div class="navpath">
-    <a href="/gameList.php">All Games</a>
+    <a href="{{ route('game.index') }}">All Games</a>
 
     &raquo;
 
diff --git a/resources/views/components/menu/main.blade.php b/resources/views/components/menu/main.blade.php
index 84120a040..d763931e4 100644
--- a/resources/views/components/menu/main.blade.php
+++ b/resources/views/components/menu/main.blade.php
@@ -75,7 +75,7 @@
         @endforeach
         <div class="dropdown-column">
             <x-dropdown-header>Miscellaneous</x-dropdown-header>
-            <x-dropdown-item :href="url('gameList.php')">All Games</x-dropdown-item>
+            <x-dropdown-item :href="route('game.index')">All Games</x-dropdown-item>
             {{--<x-dropdown-item href="popularGames.php">Most Played</x-dropdown-item>--}}
             <x-dropdown-item :href="url('gameSearch.php?p=0')">Hardest Games</x-dropdown-item>
             <x-dropdown-item :href="url('setRequestList.php')">Most Requested</x-dropdown-item>
diff --git a/tests/Feature/Platform/Action/BuildGameListActionTest.php b/tests/Feature/Platform/Action/BuildGameListActionTest.php
index 9bc518db4..5982f2e15 100644
--- a/tests/Feature/Platform/Action/BuildGameListActionTest.php
+++ b/tests/Feature/Platform/Action/BuildGameListActionTest.php
@@ -788,6 +788,32 @@ public function testItCanFilterByMultipleAwardCategories(): void
         $this->assertEquals(3, count($result->items)); // These values can differ unless we override ->total.
     }
 
+    public function testItReturnsCorrectGamesForAllGamesList(): void
+    {
+        // Arrange
+        $activeGameSystem = System::factory()->create(['ID' => 1, 'name' => 'NES/Famicom', 'name_short' => 'NES', 'active' => true]);
+        $inactiveGameSystem = System::factory()->create(['ID' => 2, 'name' => 'PlayStation 5', 'name_short' => 'PS5', 'active' => false]);
+
+        Game::factory()->create(['Title' => 'AAAAAAA', 'achievements_published' => 50, 'ConsoleID' => $activeGameSystem->id]);
+        Game::factory()->create(['Title' => 'BBBBBBB', 'achievements_published' => 50, 'ConsoleID' => $activeGameSystem->id]);
+
+        // Event, hub, inactive system, and subset games should all be excluded from the "All Games" list.
+        Game::factory()->create(['Title' => 'CCCCCCC', 'achievements_published' => 50, 'ConsoleID' => System::Events]);
+        Game::factory()->create(['Title' => 'DDDDDDD', 'achievements_published' => 50, 'ConsoleID' => System::Hubs]);
+        Game::factory()->create(['Title' => 'EEEEEEE', 'achievements_published' => 50, 'ConsoleID' => $inactiveGameSystem->id]);
+        Game::factory()->create(['Title' => 'AAAAAAA [Subset - Bonus]', 'achievements_published' => 50, 'ConsoleID' => $activeGameSystem->id]);
+
+        // Act
+        $result = (new BuildGameListAction())->execute(
+            GameListType::AllGames,
+            user: null
+        );
+
+        // Assert
+        $this->assertEquals(2, $result->total);
+        $this->assertEquals(2, count($result->items)); // These values can differ unless we override ->total.
+    }
+
     private function seedGamesForLists(): void
     {
         $systemGb = System::factory()->create(['ID' => 1, 'name' => 'Game Boy', 'name_short' => 'GB']);
diff --git a/tests/Feature/Platform/Controllers/Api/GameApiControllerTest.php b/tests/Feature/Platform/Controllers/Api/GameApiControllerTest.php
new file mode 100644
index 000000000..00618c60b
--- /dev/null
+++ b/tests/Feature/Platform/Controllers/Api/GameApiControllerTest.php
@@ -0,0 +1,68 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature\Platform\Controllers\Api;
+
+use App\Models\Game;
+use App\Models\System;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class GameApiControllerTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function testIndexReturnsCorrectJsonResponse(): void
+    {
+        // Arrange
+        $activeGameSystem = System::factory()->create(['ID' => 1, 'name' => 'NES/Famicom', 'name_short' => 'NES', 'active' => true]);
+        $inactiveGameSystem = System::factory()->create(['ID' => 2, 'name' => 'PlayStation 5', 'name_short' => 'PS5', 'active' => false]);
+
+        /** @var Game $gameOne */
+        $gameOne = Game::factory()->create(['Title' => 'AAAAAAA', 'achievements_published' => 50, 'ConsoleID' => $activeGameSystem->id]);
+        /** @var Game $gameTwo */
+        $gameTwo = Game::factory()->create(['Title' => 'BBBBBBB', 'achievements_published' => 50, 'ConsoleID' => $activeGameSystem->id]);
+
+        // Event, hub, inactive system, and subset games should all be excluded from the "All Games" list.
+        Game::factory()->create(['Title' => 'CCCCCCC', 'achievements_published' => 50, 'ConsoleID' => System::Events]);
+        Game::factory()->create(['Title' => 'DDDDDDD', 'achievements_published' => 50, 'ConsoleID' => System::Hubs]);
+        Game::factory()->create(['Title' => 'EEEEEEE', 'achievements_published' => 50, 'ConsoleID' => $inactiveGameSystem->id]);
+        Game::factory()->create(['Title' => 'AAAAAAA [Subset - Bonus]', 'achievements_published' => 50, 'ConsoleID' => $activeGameSystem->id]);
+
+        // Act
+        $response = $this->get(route('api.game.index'));
+
+        // Assert
+        $response
+            ->assertStatus(200)
+            ->assertJsonStructure([
+                'total',
+                'currentPage',
+                'lastPage',
+                'perPage',
+                'items',
+            ])
+            ->assertJsonCount(2, 'items')
+            ->assertJson([
+                'items' => [
+                    [
+                        'game' => [
+                            'title' => $gameOne->title,
+                            'system' => [
+                                'id' => $gameOne->system->id,
+                            ],
+                        ],
+                    ],
+                    [
+                        'game' => [
+                            'title' => $gameTwo->title,
+                            'system' => [
+                                'id' => $gameTwo->system->id,
+                            ],
+                        ],
+                    ],
+                ],
+            ]);
+    }
+}
diff --git a/tests/Feature/Platform/Controllers/GameControllerTest.php b/tests/Feature/Platform/Controllers/GameControllerTest.php
new file mode 100644
index 000000000..a337a6cde
--- /dev/null
+++ b/tests/Feature/Platform/Controllers/GameControllerTest.php
@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature\Platform\Controllers;
+
+use App\Models\Game;
+use App\Models\System;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Inertia\Testing\AssertableInertia as Assert;
+use Tests\TestCase;
+
+class GameControllerTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function testIndexReturnsCorrectInertiaResponse(): void
+    {
+        // Arrange
+        $activeGameSystem = System::factory()->create(['ID' => 1, 'name' => 'NES/Famicom', 'name_short' => 'NES', 'active' => true]);
+        $inactiveGameSystem = System::factory()->create(['ID' => 2, 'name' => 'PlayStation 5', 'name_short' => 'PS5', 'active' => false]);
+
+        /** @var Game $gameOne */
+        $gameOne = Game::factory()->create(['Title' => 'AAAAAAA', 'achievements_published' => 50, 'ConsoleID' => $activeGameSystem->id]);
+        Game::factory()->create(['Title' => 'BBBBBBB', 'achievements_published' => 50, 'ConsoleID' => $activeGameSystem->id]);
+
+        // Event, hub, inactive system, and subset games should all be excluded from the "All Games" list.
+        Game::factory()->create(['Title' => 'CCCCCCC', 'achievements_published' => 50, 'ConsoleID' => System::Events]);
+        Game::factory()->create(['Title' => 'DDDDDDD', 'achievements_published' => 50, 'ConsoleID' => System::Hubs]);
+        Game::factory()->create(['Title' => 'EEEEEEE', 'achievements_published' => 50, 'ConsoleID' => $inactiveGameSystem->id]);
+        Game::factory()->create(['Title' => 'AAAAAAA [Subset - Bonus]', 'achievements_published' => 50, 'ConsoleID' => $activeGameSystem->id]);
+
+        // Act
+        $response = $this->get(route('game.index'));
+
+        // Assert
+        $response->assertInertia(fn (Assert $page) => $page
+            ->where('can.develop', false)
+            ->has('paginatedGameListEntries.items', 2)
+            ->where('paginatedGameListEntries.items.0.game.title', $gameOne->title)
+            ->where('paginatedGameListEntries.items.0.game.system.id', $gameOne->system->id)
+        );
+    }
+}

From 9cf7bf8cf52f386c8927ba26a864fc79b40acbc4 Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Sun, 29 Sep 2024 20:53:56 -0400
Subject: [PATCH 03/11] chore: cleanup

---
 resources/js/common/components/+vendor/BaseBreadcrumb.tsx       | 1 -
 .../components/AllGamesDataTable/AllGamesDataTable.tsx          | 2 +-
 .../js/features/game-list/components/GameListDataTable/index.ts | 1 +
 .../WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx       | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/common/components/+vendor/BaseBreadcrumb.tsx b/resources/js/common/components/+vendor/BaseBreadcrumb.tsx
index fdbfeb171..a760c7b9a 100644
--- a/resources/js/common/components/+vendor/BaseBreadcrumb.tsx
+++ b/resources/js/common/components/+vendor/BaseBreadcrumb.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable no-restricted-imports -- base components can import from @radix-ui */
 
-import { Link } from '@inertiajs/react';
 import { Slot } from '@radix-ui/react-slot';
 import {
   type ComponentProps,
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
index bc9a92928..a4a6d7fef 100644
--- a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
+++ b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
@@ -12,7 +12,7 @@ import { usePageProps } from '@/common/hooks/usePageProps';
 import { DataTablePagination } from '@/features/game-list/components/DataTablePagination';
 
 import { allGamesDefaultFilters } from '../../utils/allGamesDefaultFilters';
-import { GameListDataTable } from '../GameListDataTable/GameListDataTable';
+import { GameListDataTable } from '../GameListDataTable';
 import { AllGamesDataTableToolbar } from './AllGamesDataTableToolbar';
 import { buildColumnDefinitions } from './buildColumnDefinitions';
 
diff --git a/resources/js/features/game-list/components/GameListDataTable/index.ts b/resources/js/features/game-list/components/GameListDataTable/index.ts
index e69de29bb..5ae7a9233 100644
--- a/resources/js/features/game-list/components/GameListDataTable/index.ts
+++ b/resources/js/features/game-list/components/GameListDataTable/index.ts
@@ -0,0 +1 @@
+export * from './GameListDataTable';
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
index 8a9cdb039..8cc0ceb46 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
@@ -12,7 +12,7 @@ import { usePageProps } from '@/common/hooks/usePageProps';
 import { DataTablePagination } from '@/features/game-list/components/DataTablePagination';
 
 import { wantToPlayGamesDefaultFilters } from '../../utils/wantToPlayGamesDefaultFilters';
-import { GameListDataTable } from '../GameListDataTable/GameListDataTable';
+import { GameListDataTable } from '../GameListDataTable';
 import { buildColumnDefinitions } from './buildColumnDefinitions';
 import { WantToPlayGamesDataTableToolbar } from './WantToPlayGamesDataTableToolbar';
 

From c255f9b115a6a685f117c225288bf30a49c47cf5 Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Sun, 29 Sep 2024 20:58:40 -0400
Subject: [PATCH 04/11] chore: more cleanup

---
 .../AllGamesMainRoot/AllGamesMainRoot.tsx     |  6 ++---
 .../DataTablePaginationScrollTarget.test.tsx  | 23 +++++++++++++++++++
 .../DataTablePaginationScrollTarget.tsx       | 15 ++++++++++++
 .../DataTablePaginationScrollTarget/index.ts  |  1 +
 .../WantToPlayGamesMainRoot.tsx               |  5 ++--
 5 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/features/game-list/components/DataTablePaginationScrollTarget/DataTablePaginationScrollTarget.test.tsx
 create mode 100644 resources/js/features/game-list/components/DataTablePaginationScrollTarget/DataTablePaginationScrollTarget.tsx
 create mode 100644 resources/js/features/game-list/components/DataTablePaginationScrollTarget/index.ts

diff --git a/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.tsx b/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.tsx
index 9fb21cdae..89ad061c2 100644
--- a/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.tsx
+++ b/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.tsx
@@ -8,6 +8,7 @@ import { useGameListState } from '../../hooks/useGameListState';
 import { usePreloadedTableDataQueryClient } from '../../hooks/usePreloadedTableDataQueryClient';
 import { allGamesDefaultFilters } from '../../utils/allGamesDefaultFilters';
 import { AllGamesDataTable } from '../AllGamesDataTable';
+import { DataTablePaginationScrollTarget } from '../DataTablePaginationScrollTarget';
 
 export const AllGamesMainRoot: FC = () => {
   const { paginatedGameListEntries } = usePageProps<App.Platform.Data.GameListPageProps>();
@@ -34,12 +35,11 @@ export const AllGamesMainRoot: FC = () => {
 
   return (
     <div>
-      {/* TODO reusable component */}
-      <div id="pagination-scroll-target" className="scroll-mt-16">
+      <DataTablePaginationScrollTarget>
         <div className="mb-3 flex w-full">
           <h1 className="text-h3 w-full sm:!text-[2.0em]">All Games</h1>
         </div>
-      </div>
+      </DataTablePaginationScrollTarget>
 
       <HydrationBoundary state={dehydrate(queryClientWithInitialData)}>
         <AllGamesDataTable
diff --git a/resources/js/features/game-list/components/DataTablePaginationScrollTarget/DataTablePaginationScrollTarget.test.tsx b/resources/js/features/game-list/components/DataTablePaginationScrollTarget/DataTablePaginationScrollTarget.test.tsx
new file mode 100644
index 000000000..c30a49a19
--- /dev/null
+++ b/resources/js/features/game-list/components/DataTablePaginationScrollTarget/DataTablePaginationScrollTarget.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from '@/test';
+
+import { DataTablePaginationScrollTarget } from './DataTablePaginationScrollTarget';
+
+describe('Component: DataTablePaginationScrollTarget', () => {
+  it('renders without crashing', () => {
+    // ARRANGE
+    const { container } = render(
+      <DataTablePaginationScrollTarget>Hello, world</DataTablePaginationScrollTarget>,
+    );
+
+    // ASSERT
+    expect(container).toBeTruthy();
+  });
+
+  it('renders children', () => {
+    // ARRANGE
+    render(<DataTablePaginationScrollTarget>Hello, world</DataTablePaginationScrollTarget>);
+
+    // ASSERT
+    expect(screen.getByText(/hello, world/i)).toBeVisible();
+  });
+});
diff --git a/resources/js/features/game-list/components/DataTablePaginationScrollTarget/DataTablePaginationScrollTarget.tsx b/resources/js/features/game-list/components/DataTablePaginationScrollTarget/DataTablePaginationScrollTarget.tsx
new file mode 100644
index 000000000..000842611
--- /dev/null
+++ b/resources/js/features/game-list/components/DataTablePaginationScrollTarget/DataTablePaginationScrollTarget.tsx
@@ -0,0 +1,15 @@
+import type { FC, ReactNode } from 'react';
+
+interface DataTablePaginationScrollTargetProps {
+  children: ReactNode;
+}
+
+export const DataTablePaginationScrollTarget: FC<DataTablePaginationScrollTargetProps> = ({
+  children,
+}) => {
+  return (
+    <div id="pagination-scroll-target" className="scroll-mt-16">
+      {children}
+    </div>
+  );
+};
diff --git a/resources/js/features/game-list/components/DataTablePaginationScrollTarget/index.ts b/resources/js/features/game-list/components/DataTablePaginationScrollTarget/index.ts
new file mode 100644
index 000000000..95c5f6c62
--- /dev/null
+++ b/resources/js/features/game-list/components/DataTablePaginationScrollTarget/index.ts
@@ -0,0 +1 @@
+export * from './DataTablePaginationScrollTarget';
diff --git a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.tsx b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.tsx
index 569d1dae7..7f5840cb5 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.tsx
@@ -8,6 +8,7 @@ import { useAutoUpdatingQueryParams } from '../../hooks/useAutoUpdatingQueryPara
 import { useGameListState } from '../../hooks/useGameListState';
 import { usePreloadedTableDataQueryClient } from '../../hooks/usePreloadedTableDataQueryClient';
 import { wantToPlayGamesDefaultFilters } from '../../utils/wantToPlayGamesDefaultFilters';
+import { DataTablePaginationScrollTarget } from '../DataTablePaginationScrollTarget';
 import { WantToPlayGamesDataTable } from '../WantToPlayGamesDataTable';
 
 export const WantToPlayGamesMainRoot: FC = () => {
@@ -42,9 +43,9 @@ export const WantToPlayGamesMainRoot: FC = () => {
 
   return (
     <div>
-      <div id="pagination-scroll-target" className="scroll-mt-16">
+      <DataTablePaginationScrollTarget>
         <UserHeading user={auth.user}>Want to Play Games</UserHeading>
-      </div>
+      </DataTablePaginationScrollTarget>
 
       <HydrationBoundary state={dehydrate(queryClientWithInitialData)}>
         <WantToPlayGamesDataTable

From 6e969de58e2aee6fb45f3a7f71e6ead2f54fe32e Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Sun, 29 Sep 2024 21:11:20 -0400
Subject: [PATCH 05/11] chore: more cleanup

---
 ...utation.ts => useAddToGameListMutation.ts} |  2 +-
 ...on.ts => useRemoveFromGameListMutation.ts} |  2 +-
 .../js/common/hooks/useWantToPlayGamesList.ts | 49 +++++++++++++++++
 .../DataTableRowActions.tsx                   | 52 +++----------------
 4 files changed, 58 insertions(+), 47 deletions(-)
 rename resources/js/common/hooks/{useAddToBacklogMutation.ts => useAddToGameListMutation.ts} (90%)
 rename resources/js/common/hooks/{useRemoveFromBacklogMutation.ts => useRemoveFromGameListMutation.ts} (89%)
 create mode 100644 resources/js/common/hooks/useWantToPlayGamesList.ts

diff --git a/resources/js/common/hooks/useAddToBacklogMutation.ts b/resources/js/common/hooks/useAddToGameListMutation.ts
similarity index 90%
rename from resources/js/common/hooks/useAddToBacklogMutation.ts
rename to resources/js/common/hooks/useAddToGameListMutation.ts
index dc6c14c81..810509c17 100644
--- a/resources/js/common/hooks/useAddToBacklogMutation.ts
+++ b/resources/js/common/hooks/useAddToGameListMutation.ts
@@ -4,7 +4,7 @@ import type { ValueOf } from 'type-fest';
 
 import { UserGameListType } from '../utils/generatedAppConstants';
 
-export function useAddToBacklogMutation() {
+export function useAddToGameListMutation() {
   return useMutation({
     mutationFn: (
       gameId: number,
diff --git a/resources/js/common/hooks/useRemoveFromBacklogMutation.ts b/resources/js/common/hooks/useRemoveFromGameListMutation.ts
similarity index 89%
rename from resources/js/common/hooks/useRemoveFromBacklogMutation.ts
rename to resources/js/common/hooks/useRemoveFromGameListMutation.ts
index 812ad7c12..2e1788250 100644
--- a/resources/js/common/hooks/useRemoveFromBacklogMutation.ts
+++ b/resources/js/common/hooks/useRemoveFromGameListMutation.ts
@@ -4,7 +4,7 @@ import type { ValueOf } from 'type-fest';
 
 import { UserGameListType } from '../utils/generatedAppConstants';
 
-export function useRemoveFromBacklogMutation() {
+export function useRemoveFromGameListMutation() {
   return useMutation({
     mutationFn: (
       gameId: number,
diff --git a/resources/js/common/hooks/useWantToPlayGamesList.ts b/resources/js/common/hooks/useWantToPlayGamesList.ts
new file mode 100644
index 000000000..c6ea6073c
--- /dev/null
+++ b/resources/js/common/hooks/useWantToPlayGamesList.ts
@@ -0,0 +1,49 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+import { toastMessage } from '@/common/components/+vendor/BaseToaster';
+import { useAddToGameListMutation } from '@/common/hooks/useAddToGameListMutation';
+import { useRemoveFromGameListMutation } from '@/common/hooks/useRemoveFromGameListMutation';
+
+export function useWantToPlayGamesList() {
+  const queryClient = useQueryClient();
+
+  const addToBacklogMutation = useAddToGameListMutation();
+
+  const removeFromBacklogMutation = useRemoveFromGameListMutation();
+
+  const addToWantToPlayGamesList = (
+    gameId: number,
+    gameTitle: string,
+    options?: Partial<{ isUndo: boolean }>,
+  ) => {
+    toastMessage.promise(addToBacklogMutation.mutateAsync(gameId), {
+      loading: options?.isUndo ? 'Restoring...' : 'Adding...',
+      success: () => {
+        // Trigger a refetch of the current table page data and bust the entire cache.
+        queryClient.invalidateQueries({ queryKey: ['data'] });
+
+        return `${options?.isUndo ? 'Restored' : 'Added'} ${gameTitle}!`;
+      },
+      error: 'Something went wrong.',
+    });
+  };
+
+  const removeFromWantToPlayGamesList = (gameId: number, gameTitle: string) => {
+    toastMessage.promise(removeFromBacklogMutation.mutateAsync(gameId), {
+      action: {
+        label: 'Undo',
+        onClick: () => addToWantToPlayGamesList(gameId, gameTitle, { isUndo: true }),
+      },
+      loading: 'Removing...',
+      success: () => {
+        // Trigger a refetch of the current table page data and bust the entire cache.
+        queryClient.invalidateQueries({ queryKey: ['data'] });
+
+        return `Removed ${gameTitle}!`;
+      },
+      error: 'Something went wrong.',
+    });
+  };
+
+  return { addToWantToPlayGamesList, removeFromWantToPlayGamesList };
+}
diff --git a/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx b/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
index 498f6520e..fd613189c 100644
--- a/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
+++ b/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
@@ -1,17 +1,14 @@
-import { useQueryClient } from '@tanstack/react-query';
 import type { Row } from '@tanstack/react-table';
 import { MdClose } from 'react-icons/md';
 
 import { BaseButton } from '@/common/components/+vendor/BaseButton';
-import { toastMessage } from '@/common/components/+vendor/BaseToaster';
 import {
   BaseTooltip,
   BaseTooltipContent,
   BaseTooltipTrigger,
 } from '@/common/components/+vendor/BaseTooltip';
-import { useAddToBacklogMutation } from '@/common/hooks/useAddToBacklogMutation';
 import { usePageProps } from '@/common/hooks/usePageProps';
-import { useRemoveFromBacklogMutation } from '@/common/hooks/useRemoveFromBacklogMutation';
+import { useWantToPlayGamesList } from '@/common/hooks/useWantToPlayGamesList';
 import { cn } from '@/utils/cn';
 
 /**
@@ -26,64 +23,29 @@ interface DataTableRowActionsProps<TData> {
 export function DataTableRowActions<TData>({ row }: DataTableRowActionsProps<TData>) {
   const { auth } = usePageProps();
 
-  const queryClient = useQueryClient();
-
-  const removeFromBacklogMutation = useRemoveFromBacklogMutation();
-
-  const addToBacklogMutation = useAddToBacklogMutation();
+  const { addToWantToPlayGamesList, removeFromWantToPlayGamesList } = useWantToPlayGamesList();
 
   const rowData = row.original as Partial<App.Platform.Data.GameListEntry>;
   const gameId = rowData?.game?.id ?? 0;
   const gameTitle = rowData?.game?.title ?? '';
   const isInBacklog = rowData?.isInBacklog ?? false;
 
-  // TODO put this in a hook? useBacklog()?
-  const addToBacklog = (gameId: number, options?: Partial<{ isUndo: boolean }>) => {
-    toastMessage.promise(addToBacklogMutation.mutateAsync(gameId), {
-      loading: options?.isUndo ? 'Restoring...' : 'Adding...',
-      success: () => {
-        // Trigger a refetch of the current table page data and bust the entire cache.
-        queryClient.invalidateQueries({ queryKey: ['data'] });
-
-        return `${options?.isUndo ? 'Restored' : 'Added'} ${gameTitle}!`;
-      },
-      error: 'Something went wrong.',
-    });
-  };
-
-  // TODO put this in a hook? useBacklog()?
-  const removeFromBacklog = (gameId: number) => {
-    toastMessage.promise(removeFromBacklogMutation.mutateAsync(gameId), {
-      action: {
-        label: 'Undo',
-        onClick: () => addToBacklog(gameId, { isUndo: true }),
-      },
-      loading: 'Removing...',
-      success: () => {
-        // Trigger a refetch of the current table page data and bust the entire cache.
-        queryClient.invalidateQueries({ queryKey: ['data'] });
-
-        return `Removed ${gameTitle}!`;
-      },
-      error: 'Something went wrong.',
-    });
-  };
-
   const handleToggleFromBacklogClick = () => {
     // This should never happen.
     if (!gameId) {
       throw new Error('No game ID.');
     }
 
-    if (!auth?.user) {
-      // TODO handle user unauthenticated
+    if (!auth?.user && typeof window !== 'undefined') {
+      window.location.href = route('login');
+
       return;
     }
 
     if (isInBacklog) {
-      removeFromBacklog(gameId);
+      removeFromWantToPlayGamesList(gameId, gameTitle);
     } else {
-      addToBacklog(gameId);
+      addToWantToPlayGamesList(gameId, gameTitle);
     }
   };
 

From e4e29410cf0441c4d1f519c7a5870babebd920e2 Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Sun, 29 Sep 2024 22:23:24 -0400
Subject: [PATCH 06/11] fix: remediate a few bugs

---
 .../js/common/hooks/useWantToPlayGamesList.ts |  4 +++-
 .../AllGamesDataTableToolbar.tsx              |  6 +++---
 .../AllGamesMainRoot.test.tsx                 |  8 ++++----
 .../DataTableRowActions.tsx                   |  5 ++++-
 .../DataTableSearchInput.tsx                  | 19 +++++++++++++++++--
 .../WantToPlayGamesMainRoot.test.tsx          |  8 ++++----
 .../game-list/hooks/useGameListState.test.ts  |  2 +-
 .../game-list/hooks/useGameListState.ts       |  2 +-
 8 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/resources/js/common/hooks/useWantToPlayGamesList.ts b/resources/js/common/hooks/useWantToPlayGamesList.ts
index c6ea6073c..c0ba7f0f2 100644
--- a/resources/js/common/hooks/useWantToPlayGamesList.ts
+++ b/resources/js/common/hooks/useWantToPlayGamesList.ts
@@ -11,6 +11,8 @@ export function useWantToPlayGamesList() {
 
   const removeFromBacklogMutation = useRemoveFromGameListMutation();
 
+  const isPending = addToBacklogMutation.isPending || removeFromBacklogMutation.isPending;
+
   const addToWantToPlayGamesList = (
     gameId: number,
     gameTitle: string,
@@ -45,5 +47,5 @@ export function useWantToPlayGamesList() {
     });
   };
 
-  return { addToWantToPlayGamesList, removeFromWantToPlayGamesList };
+  return { addToWantToPlayGamesList, isPending, removeFromWantToPlayGamesList };
 }
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
index b88d86b70..4720ae821 100644
--- a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
@@ -1,12 +1,12 @@
 import type { ColumnFiltersState, Table } from '@tanstack/react-table';
 import { RxCross2 } from 'react-icons/rx';
 
-import { DataTableFacetedFilter } from '@/features/game-list/components/DataTableFacetedFilter';
-import { DataTableSearchInput } from '@/features/game-list/components/DataTableSearchInput';
-import { DataTableViewOptions } from '@/features/game-list/components/DataTableViewOptions';
 import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
+import { DataTableFacetedFilter } from '@/features/game-list/components/DataTableFacetedFilter';
+import { DataTableSearchInput } from '@/features/game-list/components/DataTableSearchInput';
+import { DataTableViewOptions } from '@/features/game-list/components/DataTableViewOptions';
 
 import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
 
diff --git a/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.test.tsx b/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.test.tsx
index 58e118bbf..112040346 100644
--- a/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.test.tsx
+++ b/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.test.tsx
@@ -345,7 +345,7 @@ describe('Component: AllGamesMainRoot', () => {
           'filter[achievementsPublished]': 'has',
           'filter[title]': 'dragon quest',
           'page[number]': 1,
-          sort: null,
+          sort: 'title',
         },
       ]);
     });
@@ -399,7 +399,7 @@ describe('Component: AllGamesMainRoot', () => {
           'filter[achievementsPublished]': 'has',
           'filter[system]': '1',
           'page[number]': 1,
-          sort: null,
+          sort: 'title',
         },
       ]);
     });
@@ -492,7 +492,7 @@ describe('Component: AllGamesMainRoot', () => {
         {
           'filter[achievementsPublished]': 'none',
           'page[number]': 1,
-          sort: null,
+          sort: 'title',
         },
       ]);
     });
@@ -659,7 +659,7 @@ describe('Component: AllGamesMainRoot', () => {
         {
           'filter[achievementsPublished]': 'has',
           'page[number]': 2,
-          sort: null,
+          sort: 'title',
         },
       ]);
     });
diff --git a/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx b/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
index fd613189c..a21c24095 100644
--- a/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
+++ b/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
@@ -23,7 +23,8 @@ interface DataTableRowActionsProps<TData> {
 export function DataTableRowActions<TData>({ row }: DataTableRowActionsProps<TData>) {
   const { auth } = usePageProps();
 
-  const { addToWantToPlayGamesList, removeFromWantToPlayGamesList } = useWantToPlayGamesList();
+  const { addToWantToPlayGamesList, isPending, removeFromWantToPlayGamesList } =
+    useWantToPlayGamesList();
 
   const rowData = row.original as Partial<App.Platform.Data.GameListEntry>;
   const gameId = rowData?.game?.id ?? 0;
@@ -57,10 +58,12 @@ export function DataTableRowActions<TData>({ row }: DataTableRowActionsProps<TDa
             variant="ghost"
             className="group flex h-8 w-8 p-0 text-link"
             onClick={handleToggleFromBacklogClick}
+            disabled={isPending}
           >
             <MdClose
               className={cn(
                 'h-4 w-4 transition',
+                'hover:text-neutral-50 disabled:text-neutral-50 light:hover:text-neutral-900 light:disabled:text-neutral-900',
                 isInBacklog ? 'text-red-600 light:text-red-500' : 'rotate-45',
               )}
             />
diff --git a/resources/js/features/game-list/components/DataTableSearchInput/DataTableSearchInput.tsx b/resources/js/features/game-list/components/DataTableSearchInput/DataTableSearchInput.tsx
index 7f72ddcbd..f9c90d035 100644
--- a/resources/js/features/game-list/components/DataTableSearchInput/DataTableSearchInput.tsx
+++ b/resources/js/features/game-list/components/DataTableSearchInput/DataTableSearchInput.tsx
@@ -1,5 +1,5 @@
 import type { Table } from '@tanstack/react-table';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { BaseInput } from '@/common/components/+vendor/BaseInput';
@@ -23,6 +23,8 @@ export function DataTableSearchInput<TData>({ table }: DataTableSearchInputProps
 
   const { hotkeyInputRef } = useSearchInputHotkey({ key: '/' });
 
+  const isFirstRender = useRef(true);
+
   /**
    * Listen for changes with column filter state and stay in sync. Otherwise,
    * when the user presses the "Reset" button to reset all filters, our search
@@ -39,7 +41,20 @@ export function DataTableSearchInput<TData>({ table }: DataTableSearchInputProps
    */
   useDebounce(
     () => {
-      table.getColumn('title')?.setFilterValue(rawInputValue);
+      // Skip the effect on the first render. Otherwise, column filters
+      // be changed simply because the component mounted.
+      if (isFirstRender.current) {
+        isFirstRender.current = false;
+
+        return;
+      }
+
+      const currentFilterValue = (table.getColumn('title')?.getFilterValue() as string) ?? '';
+
+      // Only update the filter if the value has changed.
+      if (rawInputValue !== currentFilterValue) {
+        table.getColumn('title')?.setFilterValue(rawInputValue);
+      }
     },
     getDebounceDuration(rawInputValue),
     [rawInputValue],
diff --git a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx
index 2c69a616b..38471a428 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx
@@ -308,7 +308,7 @@ describe('Component: WantToPlayGamesMainRoot', () => {
           'filter[achievementsPublished]': 'has',
           'filter[title]': 'dragon quest',
           'page[number]': 1,
-          sort: null,
+          sort: 'title',
         },
       ]);
     });
@@ -362,7 +362,7 @@ describe('Component: WantToPlayGamesMainRoot', () => {
           'filter[achievementsPublished]': 'has',
           'filter[system]': '1',
           'page[number]': 1,
-          sort: null,
+          sort: 'title',
         },
       ]);
     });
@@ -455,7 +455,7 @@ describe('Component: WantToPlayGamesMainRoot', () => {
         {
           'filter[achievementsPublished]': 'none',
           'page[number]': 1,
-          sort: null,
+          sort: 'title',
         },
       ]);
     });
@@ -622,7 +622,7 @@ describe('Component: WantToPlayGamesMainRoot', () => {
         {
           'filter[achievementsPublished]': 'has',
           'page[number]': 2,
-          sort: null,
+          sort: 'title',
         },
       ]);
     });
diff --git a/resources/js/features/game-list/hooks/useGameListState.test.ts b/resources/js/features/game-list/hooks/useGameListState.test.ts
index f78dd4cca..1f302d347 100644
--- a/resources/js/features/game-list/hooks/useGameListState.test.ts
+++ b/resources/js/features/game-list/hooks/useGameListState.test.ts
@@ -47,7 +47,7 @@ describe('Hook: useGameListState', () => {
     // ASSERT
     const currentValue = result.current as ReturnType<typeof useGameListState>;
 
-    expect(currentValue.sorting).toEqual([]);
+    expect(currentValue.sorting).toEqual([{ id: 'title', desc: false }]);
   });
 
   it('given a sort param, correctly sets the initial sorting state', () => {
diff --git a/resources/js/features/game-list/hooks/useGameListState.ts b/resources/js/features/game-list/hooks/useGameListState.ts
index 395242414..6e4bda343 100644
--- a/resources/js/features/game-list/hooks/useGameListState.ts
+++ b/resources/js/features/game-list/hooks/useGameListState.ts
@@ -66,7 +66,7 @@ function mapQueryParamsToSorting(query: AppGlobalProps['ziggy']['query']): Sorti
 
   // `sort` is actually part of `query`'s prototype, so we have to be
   // extra explicit in how we check for the presence of the param.
-  if (typeof query.sort === 'function') {
+  if (typeof query.sort === 'function' || typeof query.sort === 'undefined') {
     sorting.push({ id: 'title', desc: false });
 
     return sorting;

From 5ab6f6fb19cf99bc63acd67e9784476aef8cd868 Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Sun, 29 Sep 2024 22:24:51 -0400
Subject: [PATCH 07/11] chore: lint

---
 .../WantToPlayGamesDataTableToolbar.tsx                     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
index a7b42454e..5efbdb5e2 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
@@ -1,12 +1,12 @@
 import type { ColumnFiltersState, Table } from '@tanstack/react-table';
 import { RxCross2 } from 'react-icons/rx';
 
-import { DataTableFacetedFilter } from '@/features/game-list/components/DataTableFacetedFilter';
-import { DataTableSearchInput } from '@/features/game-list/components/DataTableSearchInput';
-import { DataTableViewOptions } from '@/features/game-list/components/DataTableViewOptions';
 import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
+import { DataTableFacetedFilter } from '@/features/game-list/components/DataTableFacetedFilter';
+import { DataTableSearchInput } from '@/features/game-list/components/DataTableSearchInput';
+import { DataTableViewOptions } from '@/features/game-list/components/DataTableViewOptions';
 
 import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
 

From 23a29eecb0f5182d3c081069475cabb341112835 Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Tue, 1 Oct 2024 17:07:32 -0400
Subject: [PATCH 08/11] fix: address pr feedback

---
 app/Platform/Actions/BuildGameListAction.php  | 11 ++++---
 .../PlayerGameProgressBar.test.tsx            | 29 +++++++++++++++++++
 .../PlayerGameProgressBar.tsx                 | 10 +++++--
 .../DataTableRowActions.tsx                   | 13 +++++----
 4 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/app/Platform/Actions/BuildGameListAction.php b/app/Platform/Actions/BuildGameListAction.php
index 9480a4f57..46db53737 100644
--- a/app/Platform/Actions/BuildGameListAction.php
+++ b/app/Platform/Actions/BuildGameListAction.php
@@ -158,13 +158,12 @@ private function buildBaseQuery(GameListType $listType, ?User $user = null): Bui
 
         switch ($listType) {
             case GameListType::AllGames:
-                // Exclude events, hubs, subsets, and inactive systems.
-                $query->where('GameData.ConsoleID', '!=', System::Events)
-                    ->where('GameData.ConsoleID', '!=', System::Hubs)
-                    ->where('GameData.Title', 'not like', "%[Subset -%")
+                // Exclude non game systems, inactive systems, and subsets.
+                $query
                     ->whereHas('system', function ($q) {
-                        return $q->active();
-                    });
+                        return $q->gameSystems()->active();
+                    })
+                    ->where('GameData.Title', 'not like', "%[Subset -%");
                 break;
 
             case GameListType::UserPlay:
diff --git a/resources/js/common/components/PlayerGameProgressBar/PlayerGameProgressBar.test.tsx b/resources/js/common/components/PlayerGameProgressBar/PlayerGameProgressBar.test.tsx
index d9dd81c88..854e4f0e5 100644
--- a/resources/js/common/components/PlayerGameProgressBar/PlayerGameProgressBar.test.tsx
+++ b/resources/js/common/components/PlayerGameProgressBar/PlayerGameProgressBar.test.tsx
@@ -39,6 +39,16 @@ describe('Component: PlayerGameProgressBar', () => {
     expect(progressBarEl).toHaveAttribute('aria-valuenow', '0');
   });
 
+  it('given the user has no progress on the game, does not set the progress bar to a hyperlink', () => {
+    // ARRANGE
+    const game = createGame({ achievementsPublished: 33 });
+
+    render(<PlayerGameProgressBar game={game} playerGame={null} />);
+
+    // ASSERT
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+
   it('given the user has progress on the game, renders a progress bar containing progress', () => {
     // ARRANGE
     const system = createSystem({ id: 1 });
@@ -60,6 +70,25 @@ describe('Component: PlayerGameProgressBar', () => {
     expect(progressBarEl).toHaveAttribute('aria-valuenow', '8');
   });
 
+  it('given the user has progress on the game, makes the progress bar a hyperlink', () => {
+    // ARRANGE
+    const system = createSystem({ id: 1 });
+    const game = createGame({ system, achievementsPublished: 33, title: 'Dragon Quest' });
+    const playerGame = createPlayerGame({
+      achievementsUnlocked: 8,
+      achievementsUnlockedHardcore: 8,
+      achievementsUnlockedSoftcore: 0,
+      highestAward: null,
+    });
+
+    render(<PlayerGameProgressBar game={game} playerGame={playerGame} />);
+
+    // ASSERT
+    const linkEl = screen.getByRole('link', { name: /navigate to dragon quest/i });
+
+    expect(linkEl).toHaveAttribute('href', `game.show,${{ game: game.id }}`);
+  });
+
   it('given the user has a badge on the game, renders those badge details', () => {
     // ARRANGE
     const system = createSystem({ id: 1 });
diff --git a/resources/js/common/components/PlayerGameProgressBar/PlayerGameProgressBar.tsx b/resources/js/common/components/PlayerGameProgressBar/PlayerGameProgressBar.tsx
index e892e76dc..2dfe4ae6a 100644
--- a/resources/js/common/components/PlayerGameProgressBar/PlayerGameProgressBar.tsx
+++ b/resources/js/common/components/PlayerGameProgressBar/PlayerGameProgressBar.tsx
@@ -46,6 +46,8 @@ export const PlayerGameProgressBar: FC<PlayerGameProgressBarProps> = ({ game, pl
     return null;
   }
 
+  const Wrapper = achievementsUnlocked ? 'a' : 'div';
+
   return (
     <BaseTooltip open={achievementsUnlocked === 0 ? false : undefined}>
       <BaseTooltipTrigger
@@ -55,7 +57,11 @@ export const PlayerGameProgressBar: FC<PlayerGameProgressBarProps> = ({ game, pl
           !highestAward ? 'py-2' : '', // increase the hover surface area
         )}
       >
-        <div className="flex max-w-[120px] flex-col gap-0.5">
+        <Wrapper
+          className="flex max-w-[120px] flex-col gap-0.5"
+          href={achievementsUnlocked ? route('game.show', { game: game.id }) : undefined}
+          aria-label={achievementsUnlocked ? `Navigate to ${game.title}` : undefined}
+        >
           <BaseProgress
             max={achievementsPublished}
             segments={[
@@ -79,7 +85,7 @@ export const PlayerGameProgressBar: FC<PlayerGameProgressBarProps> = ({ game, pl
               </p>
             </div>
           ) : null}
-        </div>
+        </Wrapper>
       </BaseTooltipTrigger>
 
       <BaseTooltipContent asChild>
diff --git a/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx b/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
index a21c24095..444ea3876 100644
--- a/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
+++ b/resources/js/features/game-list/components/DataTableRowActions/DataTableRowActions.tsx
@@ -1,5 +1,5 @@
 import type { Row } from '@tanstack/react-table';
-import { MdClose } from 'react-icons/md';
+import { LuMinus, LuPlus } from 'react-icons/lu';
 
 import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import {
@@ -50,8 +50,10 @@ export function DataTableRowActions<TData>({ row }: DataTableRowActionsProps<TDa
     }
   };
 
+  const BacklogIcon = isInBacklog ? LuMinus : LuPlus;
+
   return (
-    <BaseTooltip>
+    <BaseTooltip delayDuration={600}>
       <BaseTooltipTrigger asChild>
         <div className="flex justify-end">
           <BaseButton
@@ -60,11 +62,10 @@ export function DataTableRowActions<TData>({ row }: DataTableRowActionsProps<TDa
             onClick={handleToggleFromBacklogClick}
             disabled={isPending}
           >
-            <MdClose
+            <BacklogIcon
               className={cn(
                 'h-4 w-4 transition',
                 'hover:text-neutral-50 disabled:text-neutral-50 light:hover:text-neutral-900 light:disabled:text-neutral-900',
-                isInBacklog ? 'text-red-600 light:text-red-500' : 'rotate-45',
               )}
             />
 
@@ -76,7 +77,9 @@ export function DataTableRowActions<TData>({ row }: DataTableRowActionsProps<TDa
       </BaseTooltipTrigger>
 
       <BaseTooltipContent>
-        <p>{isInBacklog ? 'Remove from Want to Play Games' : 'Add to Want to Play Games'}</p>
+        <p className="text-xs">
+          {isInBacklog ? 'Remove from Want to Play Games' : 'Add to Want to Play Games'}
+        </p>
       </BaseTooltipContent>
     </BaseTooltip>
   );

From 65b4b908c28da101d383cd3548475b9608420e03 Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Tue, 1 Oct 2024 17:25:24 -0400
Subject: [PATCH 09/11] chore: fix some import paths

---
 .../components/AllGamesDataTable/AllGamesDataTable.tsx    | 2 +-
 .../AllGamesDataTable/AllGamesDataTableToolbar.tsx        | 6 +++---
 .../WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx | 2 +-
 .../WantToPlayGamesDataTableToolbar.tsx                   | 6 +++---
 .../column-definitions/buildPointsTotalColumnDef.tsx      | 4 ++--
 .../components/HashesMainRoot/HashesList/HashesList.tsx   | 6 ++----
 .../games/components/HashesMainRoot/HashesMainRoot.tsx    | 6 ++----
 .../js/features/settings/hooks/useResetNavbarUserPic.ts   | 8 ++------
 8 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
index a4a6d7fef..ee78f098b 100644
--- a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
+++ b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTable.tsx
@@ -9,9 +9,9 @@ import { type Dispatch, type FC, type SetStateAction, useMemo } from 'react';
 
 import { useGameListQuery } from '@/common/hooks/useGameListQuery';
 import { usePageProps } from '@/common/hooks/usePageProps';
-import { DataTablePagination } from '@/features/game-list/components/DataTablePagination';
 
 import { allGamesDefaultFilters } from '../../utils/allGamesDefaultFilters';
+import { DataTablePagination } from '../DataTablePagination';
 import { GameListDataTable } from '../GameListDataTable';
 import { AllGamesDataTableToolbar } from './AllGamesDataTableToolbar';
 import { buildColumnDefinitions } from './buildColumnDefinitions';
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
index 4720ae821..63d8be109 100644
--- a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
@@ -4,11 +4,11 @@ import { RxCross2 } from 'react-icons/rx';
 import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
-import { DataTableFacetedFilter } from '@/features/game-list/components/DataTableFacetedFilter';
-import { DataTableSearchInput } from '@/features/game-list/components/DataTableSearchInput';
-import { DataTableViewOptions } from '@/features/game-list/components/DataTableViewOptions';
 
 import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
+import { DataTableFacetedFilter } from '../DataTableFacetedFilter';
+import { DataTableSearchInput } from '../DataTableSearchInput';
+import { DataTableViewOptions } from '../DataTableViewOptions';
 
 interface AllGamesDataTableToolbarProps<TData> {
   table: Table<TData>;
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
index 8cc0ceb46..03150a61a 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTable.tsx
@@ -9,9 +9,9 @@ import { type Dispatch, type FC, type SetStateAction, useMemo } from 'react';
 
 import { useGameListQuery } from '@/common/hooks/useGameListQuery';
 import { usePageProps } from '@/common/hooks/usePageProps';
-import { DataTablePagination } from '@/features/game-list/components/DataTablePagination';
 
 import { wantToPlayGamesDefaultFilters } from '../../utils/wantToPlayGamesDefaultFilters';
+import { DataTablePagination } from '../DataTablePagination';
 import { GameListDataTable } from '../GameListDataTable';
 import { buildColumnDefinitions } from './buildColumnDefinitions';
 import { WantToPlayGamesDataTableToolbar } from './WantToPlayGamesDataTableToolbar';
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
index 5efbdb5e2..0f55070a8 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
@@ -4,11 +4,11 @@ import { RxCross2 } from 'react-icons/rx';
 import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
-import { DataTableFacetedFilter } from '@/features/game-list/components/DataTableFacetedFilter';
-import { DataTableSearchInput } from '@/features/game-list/components/DataTableSearchInput';
-import { DataTableViewOptions } from '@/features/game-list/components/DataTableViewOptions';
 
 import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
+import { DataTableFacetedFilter } from '../DataTableFacetedFilter';
+import { DataTableSearchInput } from '../DataTableSearchInput';
+import { DataTableViewOptions } from '../DataTableViewOptions';
 
 interface WantToPlayGamesDataTableToolbarProps<TData> {
   table: Table<TData>;
diff --git a/resources/js/features/game-list/utils/column-definitions/buildPointsTotalColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildPointsTotalColumnDef.tsx
index f93a76f2f..66a3ec494 100644
--- a/resources/js/features/game-list/utils/column-definitions/buildPointsTotalColumnDef.tsx
+++ b/resources/js/features/game-list/utils/column-definitions/buildPointsTotalColumnDef.tsx
@@ -34,10 +34,10 @@ export function buildPointsTotalColumnDef({
       }
 
       return (
-        <p className="whitespace-nowrap">
+        <div className="whitespace-nowrap">
           {formatNumber(pointsTotal)}{' '}
           <WeightedPointsContainer>({formatNumber(pointsWeighted)})</WeightedPointsContainer>
-        </p>
+        </div>
       );
     },
   };
diff --git a/resources/js/features/games/components/HashesMainRoot/HashesList/HashesList.tsx b/resources/js/features/games/components/HashesMainRoot/HashesList/HashesList.tsx
index 040951bcf..be3fcf6dd 100644
--- a/resources/js/features/games/components/HashesMainRoot/HashesList/HashesList.tsx
+++ b/resources/js/features/games/components/HashesMainRoot/HashesList/HashesList.tsx
@@ -1,16 +1,14 @@
-import { usePage } from '@inertiajs/react';
 import type { FC } from 'react';
 
 import { Embed } from '@/common/components/Embed/Embed';
+import { usePageProps } from '@/common/hooks/usePageProps';
 
 import { HashesListItem } from './HashesListItem';
 
 export const hashesListContainerTestId = 'hashes-list';
 
 export const HashesList: FC = () => {
-  const {
-    props: { hashes },
-  } = usePage<App.Platform.Data.GameHashesPageProps>();
+  const { hashes } = usePageProps<App.Platform.Data.GameHashesPageProps>();
 
   if (!hashes.length) {
     return null;
diff --git a/resources/js/features/games/components/HashesMainRoot/HashesMainRoot.tsx b/resources/js/features/games/components/HashesMainRoot/HashesMainRoot.tsx
index d5a150aee..1bc46efd6 100644
--- a/resources/js/features/games/components/HashesMainRoot/HashesMainRoot.tsx
+++ b/resources/js/features/games/components/HashesMainRoot/HashesMainRoot.tsx
@@ -1,18 +1,16 @@
-import { usePage } from '@inertiajs/react';
 import type { FC } from 'react';
 import { LuSave } from 'react-icons/lu';
 
 import { baseButtonVariants } from '@/common/components/+vendor/BaseButton';
 import { Embed } from '@/common/components/Embed/Embed';
+import { usePageProps } from '@/common/hooks/usePageProps';
 
 import { GameBreadcrumbs } from '../GameBreadcrumbs';
 import { GameHeading } from '../GameHeading/GameHeading';
 import { HashesList } from './HashesList';
 
 export const HashesMainRoot: FC = () => {
-  const {
-    props: { can, game, hashes },
-  } = usePage<App.Platform.Data.GameHashesPageProps>();
+  const { can, game, hashes } = usePageProps<App.Platform.Data.GameHashesPageProps>();
 
   return (
     <div>
diff --git a/resources/js/features/settings/hooks/useResetNavbarUserPic.ts b/resources/js/features/settings/hooks/useResetNavbarUserPic.ts
index 29c084d39..c64298d86 100644
--- a/resources/js/features/settings/hooks/useResetNavbarUserPic.ts
+++ b/resources/js/features/settings/hooks/useResetNavbarUserPic.ts
@@ -1,12 +1,8 @@
-import { usePage } from '@inertiajs/react';
-
-import type { AppGlobalProps } from '@/common/models';
+import { usePageProps } from '@/common/hooks/usePageProps';
 import { asset } from '@/utils/helpers';
 
 export function useResetNavbarUserPic() {
-  const {
-    props: { auth },
-  } = usePage<AppGlobalProps>();
+  const { auth } = usePageProps();
 
   const resetNavbarUserPic = () => {
     // Using document functions to mutate the DOM is very bad.

From 8f7ada03e898088e4089e8f326269e6f46a0a738 Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Tue, 1 Oct 2024 17:50:46 -0400
Subject: [PATCH 10/11] feat: make some minor datatable ux improvements

---
 .../common/components/+vendor/BaseBadge.tsx   |  7 ++-
 .../components/+vendor/BaseCheckbox.tsx       |  2 +-
 .../common/components/+vendor/BaseCommand.tsx | 10 +++--
 .../WeightedPointsContainer.tsx               | 10 ++---
 .../AllGamesDataTableToolbar.tsx              | 24 +++++------
 .../DataTableAchievementsPublishedFilter.tsx  | 26 +++++++++++
 .../index.ts                                  |  1 +
 .../DataTableFacetedFilter.tsx                | 16 ++++---
 .../DataTableSearchInput.tsx                  |  2 +-
 .../WantToPlayGamesDataTableToolbar.tsx       | 16 ++-----
 .../hooks/useDataTablePrefetchResetFilters.ts | 43 +++++++++++++++++++
 .../buildTitleColumnDef.tsx                   |  2 +-
 12 files changed, 113 insertions(+), 46 deletions(-)
 create mode 100644 resources/js/features/game-list/components/DataTableAchievementsPublishedFilter/DataTableAchievementsPublishedFilter.tsx
 create mode 100644 resources/js/features/game-list/components/DataTableAchievementsPublishedFilter/index.ts
 create mode 100644 resources/js/features/game-list/hooks/useDataTablePrefetchResetFilters.ts

diff --git a/resources/js/common/components/+vendor/BaseBadge.tsx b/resources/js/common/components/+vendor/BaseBadge.tsx
index 1268116cb..b9139c5f9 100644
--- a/resources/js/common/components/+vendor/BaseBadge.tsx
+++ b/resources/js/common/components/+vendor/BaseBadge.tsx
@@ -4,13 +4,16 @@ import * as React from 'react';
 import { cn } from '@/utils/cn';
 
 const baseBadgeVariants = cva(
-  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  cn(
+    'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold',
+    'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  ),
   {
     variants: {
       variant: {
         default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
         secondary:
-          'border-transparent bg-neutral-800 text-secondary-foreground hover:bg-secondary/80',
+          'border-transparent bg-neutral-800 light:bg-neutral-200 text-secondary-foreground hover:bg-secondary/80',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
         outline: 'text-foreground',
diff --git a/resources/js/common/components/+vendor/BaseCheckbox.tsx b/resources/js/common/components/+vendor/BaseCheckbox.tsx
index f5ff49d1e..9ab7f055a 100644
--- a/resources/js/common/components/+vendor/BaseCheckbox.tsx
+++ b/resources/js/common/components/+vendor/BaseCheckbox.tsx
@@ -16,7 +16,7 @@ const BaseCheckbox = React.forwardRef<
       'peer h-4 w-4 shrink-0 rounded-sm border light:border-neutral-900',
       'focus-visible:outline-none focus-visible:ring-2 light:ring-offset-white light:focus-visible:ring-neutral-950',
       'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-      'border-neutral-600 light:data-[state=checked]:bg-text light:data-[state=checked]:text-neutral-50',
+      'border-neutral-600 light:data-[state=checked]:bg-text',
       'ring-offset-neutral-950 focus-visible:ring-neutral-300 data-[state=checked]:bg-neutral-700',
       'data-[state=checked]:border-neutral-50 data-[state=checked]:text-neutral-50',
       className,
diff --git a/resources/js/common/components/+vendor/BaseCommand.tsx b/resources/js/common/components/+vendor/BaseCommand.tsx
index f8fe098fb..75e7dfe1a 100644
--- a/resources/js/common/components/+vendor/BaseCommand.tsx
+++ b/resources/js/common/components/+vendor/BaseCommand.tsx
@@ -16,7 +16,7 @@ const BaseCommand = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      'text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-neutral-950',
+      'text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-neutral-950 light:bg-neutral-100',
       className,
     )}
     {...props}
@@ -85,7 +85,9 @@ const BaseCommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1',
+      '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5',
+      '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
       className,
     )}
     {...props}
@@ -112,7 +114,9 @@ const BaseCommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5',
+      'text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
       className,
     )}
     {...props}
diff --git a/resources/js/common/components/WeightedPointsContainer/WeightedPointsContainer.tsx b/resources/js/common/components/WeightedPointsContainer/WeightedPointsContainer.tsx
index bf96a91b1..46506e316 100644
--- a/resources/js/common/components/WeightedPointsContainer/WeightedPointsContainer.tsx
+++ b/resources/js/common/components/WeightedPointsContainer/WeightedPointsContainer.tsx
@@ -13,11 +13,11 @@ export const WeightedPointsContainer: FC<WeightedPointsContainerProps> = ({ chil
         <span className="TrueRatio light:text-neutral-400">{children}</span>
       </BaseTooltipTrigger>
 
-      <BaseTooltipContent>
-        <div className="flex flex-col items-center text-center text-xs">
-          <p>RetroPoints: A measurement of rarity and estimated difficulty.</p>
-          <p>Derived from points, number of achievers, and number of players.</p>
-        </div>
+      <BaseTooltipContent asChild>
+        <span className="flex flex-col items-center text-center text-xs">
+          <span>RetroPoints: A measurement of rarity and estimated difficulty.</span>
+          <span>Derived from points, number of achievers, and number of players.</span>
+        </span>
       </BaseTooltipContent>
     </BaseTooltip>
   );
diff --git a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
index 63d8be109..b816369b3 100644
--- a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
@@ -5,7 +5,9 @@ import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
 
+import { useDataTablePrefetchResetFilters } from '../../hooks/useDataTablePrefetchResetFilters';
 import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
+import { DataTableAchievementsPublishedFilter } from '../DataTableAchievementsPublishedFilter';
 import { DataTableFacetedFilter } from '../DataTableFacetedFilter';
 import { DataTableSearchInput } from '../DataTableSearchInput';
 import { DataTableViewOptions } from '../DataTableViewOptions';
@@ -24,6 +26,12 @@ export function AllGamesDataTableToolbar<TData>({
 }: AllGamesDataTableToolbarProps<TData>) {
   const { filterableSystemOptions } = usePageProps<App.Platform.Data.GameListPageProps>();
 
+  const { prefetchResetFilters } = useDataTablePrefetchResetFilters(
+    table,
+    defaultColumnFilters,
+    'api.game.index',
+  );
+
   const currentFilters = table.getState().columnFilters;
   const isFiltered = getAreNonDefaultFiltersSet(currentFilters, defaultColumnFilters);
 
@@ -56,18 +64,7 @@ export function AllGamesDataTableToolbar<TData>({
         ) : null}
 
         {table.getColumn('achievementsPublished') ? (
-          <DataTableFacetedFilter
-            className="w-full sm:w-auto"
-            column={table.getColumn('achievementsPublished')}
-            title="Has achievements"
-            options={[
-              { label: 'Yes', value: 'has' },
-              { label: 'No', value: 'none' },
-              { label: 'Either', value: 'either' },
-            ]}
-            isSearchable={false}
-            isSingleSelect={true}
-          />
+          <DataTableAchievementsPublishedFilter table={table} />
         ) : null}
 
         {isFiltered ? (
@@ -75,7 +72,8 @@ export function AllGamesDataTableToolbar<TData>({
             variant="ghost"
             size="sm"
             onClick={resetFiltersToDefault}
-            className="border-dashed px-2 text-link lg:px-3"
+            onMouseEnter={() => prefetchResetFilters()}
+            className="px-2 text-link lg:px-3"
           >
             Reset <RxCross2 className="ml-2 h-4 w-4" />
           </BaseButton>
diff --git a/resources/js/features/game-list/components/DataTableAchievementsPublishedFilter/DataTableAchievementsPublishedFilter.tsx b/resources/js/features/game-list/components/DataTableAchievementsPublishedFilter/DataTableAchievementsPublishedFilter.tsx
new file mode 100644
index 000000000..337abecba
--- /dev/null
+++ b/resources/js/features/game-list/components/DataTableAchievementsPublishedFilter/DataTableAchievementsPublishedFilter.tsx
@@ -0,0 +1,26 @@
+import type { Table } from '@tanstack/react-table';
+
+import { DataTableFacetedFilter } from '../DataTableFacetedFilter';
+
+interface DataTableAchievementsPublishedFilterProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTableAchievementsPublishedFilter<TData>({
+  table,
+}: DataTableAchievementsPublishedFilterProps<TData>) {
+  return (
+    <DataTableFacetedFilter
+      className="w-full sm:w-auto"
+      column={table.getColumn('achievementsPublished')}
+      title="Has achievements"
+      options={[
+        { label: 'Yes', value: 'has' },
+        { label: 'No', value: 'none' },
+        { label: 'Both', value: 'either' },
+      ]}
+      isSearchable={false}
+      isSingleSelect={true}
+    />
+  );
+}
diff --git a/resources/js/features/game-list/components/DataTableAchievementsPublishedFilter/index.ts b/resources/js/features/game-list/components/DataTableAchievementsPublishedFilter/index.ts
new file mode 100644
index 000000000..a21855e41
--- /dev/null
+++ b/resources/js/features/game-list/components/DataTableAchievementsPublishedFilter/index.ts
@@ -0,0 +1 @@
+export * from './DataTableAchievementsPublishedFilter';
diff --git a/resources/js/features/game-list/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx b/resources/js/features/game-list/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
index 040d2b1ac..3291b4d23 100644
--- a/resources/js/features/game-list/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
+++ b/resources/js/features/game-list/components/DataTableFacetedFilter/DataTableFacetedFilter.tsx
@@ -1,6 +1,7 @@
 import type { Column } from '@tanstack/react-table';
 import type { FC } from 'react';
-import { RxCheck, RxPlusCircled } from 'react-icons/rx';
+import { HiOutlineCheck } from 'react-icons/hi';
+import { RxPlusCircled } from 'react-icons/rx';
 
 import { BaseBadge } from '@/common/components/+vendor/BaseBadge';
 import { BaseButton } from '@/common/components/+vendor/BaseButton';
@@ -138,24 +139,25 @@ export function DataTableFacetedFilter<TData, TValue>({
                   >
                     <div
                       className={cn(
-                        'border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border',
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm',
+                        'border border-neutral-600 light:border-neutral-900',
 
                         // If it's a single select, give the appearance of a radio button.
                         isSingleSelect ? 'rounded-full' : 'rounded-sm',
 
                         isSelected
-                          ? 'bg-primary text-neutral-50 light:text-neutral-950'
+                          ? 'border-neutral-50 bg-neutral-700 text-neutral-50 light:bg-text'
                           : 'opacity-50 [&_svg]:invisible',
                       )}
                     >
-                      {isSelected ? <RxCheck className="h-4 w-4" /> : null}
+                      {isSelected ? <HiOutlineCheck className="h-4 w-4" /> : null}
                     </div>
 
                     {option.icon ? (
                       <option.icon className="text-muted-foreground mr-2 h-4 w-4" />
                     ) : null}
 
-                    <span className="lght:text-neutral-900 text-neutral-200">{option.label}</span>
+                    <span className="text-neutral-200 light:text-neutral-900">{option.label}</span>
 
                     {facets?.get(option.value) && (
                       <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
@@ -183,12 +185,12 @@ interface ClearFiltersButtonProps {
 
 const ClearFiltersButton: FC<ClearFiltersButtonProps> = ({ onClear }) => {
   return (
-    <div className="sticky bottom-0 bg-neutral-950">
+    <div className="sticky bottom-0 bg-neutral-950 light:bg-neutral-100">
       <BaseCommandSeparator />
       <BaseCommandGroup>
         <BaseCommandItem
           onSelect={onClear}
-          className="cursor-pointer justify-center text-center text-xs text-link transition hover:bg-neutral-900"
+          className="cursor-pointer justify-center text-center text-xs text-link transition hover:bg-neutral-900 light:text-neutral-900 light:hover:bg-neutral-200"
         >
           Clear filters
         </BaseCommandItem>
diff --git a/resources/js/features/game-list/components/DataTableSearchInput/DataTableSearchInput.tsx b/resources/js/features/game-list/components/DataTableSearchInput/DataTableSearchInput.tsx
index f9c90d035..bbceb71a0 100644
--- a/resources/js/features/game-list/components/DataTableSearchInput/DataTableSearchInput.tsx
+++ b/resources/js/features/game-list/components/DataTableSearchInput/DataTableSearchInput.tsx
@@ -83,7 +83,7 @@ export function DataTableSearchInput<TData>({ table }: DataTableSearchInputProps
               id="search-shortcut"
               className={cn(
                 'absolute right-2 hidden rounded-md border border-transparent bg-neutral-800/60 px-1.5 font-mono text-xs',
-                'text-neutral-400 peer-focus:opacity-0 light:bg-gray-200 light:text-gray-800',
+                'text-neutral-400 peer-focus:opacity-0 light:bg-neutral-200 light:text-neutral-800',
                 'cursor-default lg:block',
               )}
             >
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
index 0f55070a8..1acf7033e 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
@@ -6,6 +6,7 @@ import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
 
 import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
+import { DataTableAchievementsPublishedFilter } from '../DataTableAchievementsPublishedFilter';
 import { DataTableFacetedFilter } from '../DataTableFacetedFilter';
 import { DataTableSearchInput } from '../DataTableSearchInput';
 import { DataTableViewOptions } from '../DataTableViewOptions';
@@ -56,18 +57,7 @@ export function WantToPlayGamesDataTableToolbar<TData>({
         ) : null}
 
         {table.getColumn('achievementsPublished') ? (
-          <DataTableFacetedFilter
-            className="w-full sm:w-auto"
-            column={table.getColumn('achievementsPublished')}
-            title="Has achievements"
-            options={[
-              { label: 'Yes', value: 'has' },
-              { label: 'No', value: 'none' },
-              { label: 'Either', value: 'either' },
-            ]}
-            isSearchable={false}
-            isSingleSelect={true}
-          />
+          <DataTableAchievementsPublishedFilter table={table} />
         ) : null}
 
         {isFiltered ? (
@@ -75,7 +65,7 @@ export function WantToPlayGamesDataTableToolbar<TData>({
             variant="ghost"
             size="sm"
             onClick={resetFiltersToDefault}
-            className="border-dashed px-2 text-link lg:px-3"
+            className="px-2 text-link lg:px-3"
           >
             Reset <RxCross2 className="ml-2 h-4 w-4" />
           </BaseButton>
diff --git a/resources/js/features/game-list/hooks/useDataTablePrefetchResetFilters.ts b/resources/js/features/game-list/hooks/useDataTablePrefetchResetFilters.ts
new file mode 100644
index 000000000..f3cb3184c
--- /dev/null
+++ b/resources/js/features/game-list/hooks/useDataTablePrefetchResetFilters.ts
@@ -0,0 +1,43 @@
+import { useQueryClient } from '@tanstack/react-query';
+import type { ColumnFiltersState, Table } from '@tanstack/react-table';
+import axios from 'axios';
+import type { RouteName } from 'ziggy-js';
+
+import { buildGameListQueryFilterParams } from '@/common/utils/buildGameListQueryFilterParams';
+import { buildGameListQuerySortParam } from '@/common/utils/buildGameListQuerySortParam';
+
+/**
+ * Given the user hovers over the Reset button, it is very likely they will
+ * wind up clicking the button. Queries are cheap, so prefetch the destination.
+ */
+
+export function useDataTablePrefetchResetFilters<TData>(
+  table: Table<TData>,
+  defaultColumnFilters: ColumnFiltersState,
+  tableApiRouteName: RouteName,
+) {
+  const { pagination, sorting } = table.getState();
+
+  const queryClient = useQueryClient();
+
+  const prefetchResetFilters = () => {
+    queryClient.prefetchQuery({
+      // eslint-disable-next-line @tanstack/query/exhaustive-deps -- tableApiRouteName is not part of the key
+      queryKey: ['data', pagination, sorting, defaultColumnFilters],
+      staleTime: 1 * 60 * 1000, // 1 minute
+      queryFn: async () => {
+        const response = await axios.get<App.Data.PaginatedData<App.Platform.Data.GameListEntry>>(
+          route(tableApiRouteName, {
+            'page[number]': pagination.pageIndex + 1,
+            sort: buildGameListQuerySortParam(sorting),
+            ...buildGameListQueryFilterParams(defaultColumnFilters),
+          }),
+        );
+
+        return response.data;
+      },
+    });
+  };
+
+  return { prefetchResetFilters };
+}
diff --git a/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx
index d8e0195b8..b530fc7da 100644
--- a/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx
+++ b/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx
@@ -28,7 +28,7 @@ export function buildTitleColumnDef({
       }
 
       return (
-        <div className="max-w-fit">
+        <div className="min-w-[180px] max-w-fit">
           <div className="max-w-[400px]">
             <GameAvatar
               {...row.original.game}

From 73ad78e7775d0815d81972b081013aac6d8725ef Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Tue, 1 Oct 2024 18:02:01 -0400
Subject: [PATCH 11/11] refactor: extract to component

---
 .../AllGamesDataTableToolbar.tsx              | 28 +----------
 .../DataTableResetFiltersButton.tsx           | 47 +++++++++++++++++++
 .../DataTableResetFiltersButton/index.ts      |  0
 .../WantToPlayGamesDataTableToolbar.tsx       | 24 +++-------
 4 files changed, 55 insertions(+), 44 deletions(-)
 create mode 100644 resources/js/features/game-list/components/DataTableResetFiltersButton/DataTableResetFiltersButton.tsx
 create mode 100644 resources/js/features/game-list/components/DataTableResetFiltersButton/index.ts

diff --git a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
index b816369b3..6229ec94f 100644
--- a/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/AllGamesDataTable/AllGamesDataTableToolbar.tsx
@@ -1,14 +1,12 @@
 import type { ColumnFiltersState, Table } from '@tanstack/react-table';
-import { RxCross2 } from 'react-icons/rx';
 
-import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
 
-import { useDataTablePrefetchResetFilters } from '../../hooks/useDataTablePrefetchResetFilters';
 import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
 import { DataTableAchievementsPublishedFilter } from '../DataTableAchievementsPublishedFilter';
 import { DataTableFacetedFilter } from '../DataTableFacetedFilter';
+import { DataTableResetFiltersButton } from '../DataTableResetFiltersButton/DataTableResetFiltersButton';
 import { DataTableSearchInput } from '../DataTableSearchInput';
 import { DataTableViewOptions } from '../DataTableViewOptions';
 
@@ -26,23 +24,9 @@ export function AllGamesDataTableToolbar<TData>({
 }: AllGamesDataTableToolbarProps<TData>) {
   const { filterableSystemOptions } = usePageProps<App.Platform.Data.GameListPageProps>();
 
-  const { prefetchResetFilters } = useDataTablePrefetchResetFilters(
-    table,
-    defaultColumnFilters,
-    'api.game.index',
-  );
-
   const currentFilters = table.getState().columnFilters;
   const isFiltered = getAreNonDefaultFiltersSet(currentFilters, defaultColumnFilters);
 
-  const resetFiltersToDefault = () => {
-    if (defaultColumnFilters) {
-      table.setColumnFilters(defaultColumnFilters);
-    } else {
-      table.resetColumnFilters();
-    }
-  };
-
   return (
     <div className="flex w-full flex-col justify-between gap-2 md:flex-row">
       <div className="flex w-full flex-col items-center gap-2 sm:flex-1 sm:flex-row">
@@ -68,15 +52,7 @@ export function AllGamesDataTableToolbar<TData>({
         ) : null}
 
         {isFiltered ? (
-          <BaseButton
-            variant="ghost"
-            size="sm"
-            onClick={resetFiltersToDefault}
-            onMouseEnter={() => prefetchResetFilters()}
-            className="px-2 text-link lg:px-3"
-          >
-            Reset <RxCross2 className="ml-2 h-4 w-4" />
-          </BaseButton>
+          <DataTableResetFiltersButton table={table} defaultColumnFilters={defaultColumnFilters} />
         ) : null}
       </div>
 
diff --git a/resources/js/features/game-list/components/DataTableResetFiltersButton/DataTableResetFiltersButton.tsx b/resources/js/features/game-list/components/DataTableResetFiltersButton/DataTableResetFiltersButton.tsx
new file mode 100644
index 000000000..db55c756e
--- /dev/null
+++ b/resources/js/features/game-list/components/DataTableResetFiltersButton/DataTableResetFiltersButton.tsx
@@ -0,0 +1,47 @@
+import type { ColumnFiltersState, Table } from '@tanstack/react-table';
+import { RxCross2 } from 'react-icons/rx';
+import type { RouteName } from 'ziggy-js';
+
+import { BaseButton } from '@/common/components/+vendor/BaseButton';
+
+import { useDataTablePrefetchResetFilters } from '../../hooks/useDataTablePrefetchResetFilters';
+
+interface DataTableResetFiltersButtonProps<TData> {
+  table: Table<TData>;
+
+  defaultColumnFilters?: ColumnFiltersState;
+  /** The controller route name where client-side calls for this datatable are made. */
+  tableApiRouteName?: RouteName;
+}
+
+export function DataTableResetFiltersButton<TData>({
+  table,
+  defaultColumnFilters = [],
+  tableApiRouteName = 'api.game.index',
+}: DataTableResetFiltersButtonProps<TData>) {
+  const { prefetchResetFilters } = useDataTablePrefetchResetFilters(
+    table,
+    defaultColumnFilters,
+    tableApiRouteName,
+  );
+
+  const resetFiltersToDefault = () => {
+    if (defaultColumnFilters) {
+      table.setColumnFilters(defaultColumnFilters);
+    } else {
+      table.resetColumnFilters();
+    }
+  };
+
+  return (
+    <BaseButton
+      variant="ghost"
+      size="sm"
+      onClick={resetFiltersToDefault}
+      onMouseEnter={() => prefetchResetFilters()}
+      className="px-2 text-link lg:px-3"
+    >
+      Reset <RxCross2 className="ml-2 h-4 w-4" />
+    </BaseButton>
+  );
+}
diff --git a/resources/js/features/game-list/components/DataTableResetFiltersButton/index.ts b/resources/js/features/game-list/components/DataTableResetFiltersButton/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
index 1acf7033e..f0a852d32 100644
--- a/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
+++ b/resources/js/features/game-list/components/WantToPlayGamesDataTable/WantToPlayGamesDataTableToolbar.tsx
@@ -1,13 +1,12 @@
 import type { ColumnFiltersState, Table } from '@tanstack/react-table';
-import { RxCross2 } from 'react-icons/rx';
 
-import { BaseButton } from '@/common/components/+vendor/BaseButton';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { formatNumber } from '@/common/utils/l10n/formatNumber';
 
 import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
 import { DataTableAchievementsPublishedFilter } from '../DataTableAchievementsPublishedFilter';
 import { DataTableFacetedFilter } from '../DataTableFacetedFilter';
+import { DataTableResetFiltersButton } from '../DataTableResetFiltersButton/DataTableResetFiltersButton';
 import { DataTableSearchInput } from '../DataTableSearchInput';
 import { DataTableViewOptions } from '../DataTableViewOptions';
 
@@ -28,14 +27,6 @@ export function WantToPlayGamesDataTableToolbar<TData>({
   const currentFilters = table.getState().columnFilters;
   const isFiltered = getAreNonDefaultFiltersSet(currentFilters, defaultColumnFilters);
 
-  const resetFiltersToDefault = () => {
-    if (defaultColumnFilters) {
-      table.setColumnFilters(defaultColumnFilters);
-    } else {
-      table.resetColumnFilters();
-    }
-  };
-
   return (
     <div className="flex w-full flex-col justify-between gap-2 md:flex-row">
       <div className="flex w-full flex-col items-center gap-2 sm:flex-1 sm:flex-row">
@@ -61,14 +52,11 @@ export function WantToPlayGamesDataTableToolbar<TData>({
         ) : null}
 
         {isFiltered ? (
-          <BaseButton
-            variant="ghost"
-            size="sm"
-            onClick={resetFiltersToDefault}
-            className="px-2 text-link lg:px-3"
-          >
-            Reset <RxCross2 className="ml-2 h-4 w-4" />
-          </BaseButton>
+          <DataTableResetFiltersButton
+            table={table}
+            defaultColumnFilters={defaultColumnFilters}
+            tableApiRouteName="api.user-game-list.index"
+          />
         ) : null}
       </div>