From 7903c9fbbd9026cb290a0aaa10ada4188ef9fc89 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Wed, 29 Apr 2026 01:45:04 +0800
Subject: [PATCH] Tasks 12-13: Fix release date input to type=date, add sort
 direction toggle to games page

---
 app/games/games-page-client.tsx                      | 12 +++++++++++-
 components/wizard/non-steam-edit-form.tsx            |  2 +-
 .../wizard/steps/non-steam-basic-info-step.tsx       |  3 +--
 lib/api/games-listing.ts                             | 11 ++++++++---
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/games/games-page-client.tsx b/app/games/games-page-client.tsx
index 14a4c0f..3465de5 100644
--- a/app/games/games-page-client.tsx
+++ b/app/games/games-page-client.tsx
@@ -31,6 +31,7 @@ interface DeviceOption {
 }
 
 type SortOption = "recent" | "name" | "benchmarks"
+type SortDirection = "asc" | "desc"
 
 const DECK_STATUS_CONFIG: Record<string, { label: string; className: string }> = {
   native: { label: "Native", className: "bg-green-500/10 border-green-500/20 text-green-400" },
@@ -62,6 +63,7 @@ export function GamesPageClient({
   const [selectedGenres, setSelectedGenres] = useState<string[]>([])
   const [selectedDevice, setSelectedDevice] = useState("")
   const [sort, setSort] = useState<SortOption>("recent")
+  const [sortDirection, setSortDirection] = useState<SortDirection>("desc")
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [showFilters, setShowFilters] = useState(false)
@@ -76,12 +78,13 @@ export function GamesPageClient({
       params.set("offset", String(offset))
       params.set("limit", "24")
       params.set("sort", sort)
+      params.set("order", sortDirection)
       if (search) params.set("search", search)
       if (selectedDevice) params.set("device", selectedDevice)
       if (selectedGenres.length === 1) params.set("genre", selectedGenres[0])
       return `/api/games/listing?${params.toString()}`
     },
-    [sort, search, selectedDevice, selectedGenres],
+    [sort, sortDirection, search, selectedDevice, selectedGenres],
   )
 
   // Load more function for infinite scroll
@@ -217,6 +220,13 @@ export function GamesPageClient({
                 </option>
               ))}
             </select>
+            <button
+              onClick={() => setSortDirection(prev => prev === "asc" ? "desc" : "asc")}
+              className="px-2 py-2 rounded-md text-sm bg-text/5 border border-border hover:bg-text/10 transition-colors cursor-pointer"
+              title={sortDirection === "asc" ? "Sort ascending" : "Sort descending"}
+            >
+              {sortDirection === "asc" ? "↑" : "↓"}
+            </button>
             <button
               onClick={() => setShowFilters(!showFilters)}
               className={`px-3 py-2 rounded-md text-sm transition-colors cursor-pointer border ${
diff --git a/components/wizard/non-steam-edit-form.tsx b/components/wizard/non-steam-edit-form.tsx
index 80d44cd..ecf161f 100644
--- a/components/wizard/non-steam-edit-form.tsx
+++ b/components/wizard/non-steam-edit-form.tsx
@@ -179,7 +179,7 @@ export function NonSteamEditForm({ game, platformSupport, hardwareList, isOwner,
           <div className="space-y-1.5">
             <label className="text-xs font-medium text-text/60">Release Date</label>
             <input
-              type="text"
+              type="date"
               value={releaseDate}
               onChange={e => setReleaseDate(e.target.value)}
               className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary"
diff --git a/components/wizard/steps/non-steam-basic-info-step.tsx b/components/wizard/steps/non-steam-basic-info-step.tsx
index 1039b58..ddf49d6 100644
--- a/components/wizard/steps/non-steam-basic-info-step.tsx
+++ b/components/wizard/steps/non-steam-basic-info-step.tsx
@@ -230,10 +230,9 @@ export function NonSteamBasicInfoStep({ value, onChange }: NonSteamBasicInfoStep
       <div className="space-y-1.5">
         <label className="text-xs font-medium text-text/60">Release Date</label>
         <input
-          type="text"
+          type="date"
           value={value.releaseDate}
           onChange={(e) => update("releaseDate", e.target.value)}
-          placeholder="e.g. 2017-02-24"
           className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
         />
       </div>
diff --git a/lib/api/games-listing.ts b/lib/api/games-listing.ts
index 69c81af..241f382 100644
--- a/lib/api/games-listing.ts
+++ b/lib/api/games-listing.ts
@@ -21,6 +21,7 @@ export const gamesListingRoutes = new Elysia({ prefix: "/games/listing" }).get(
     const genre = query.genre || ""
     const device = query.device || ""
     const sort = query.sort || "recent"
+    const order = query.order === "asc" ? asc : desc
 
     // Build where conditions
     const conditions = []
@@ -106,12 +107,12 @@ export const gamesListingRoutes = new Elysia({ prefix: "/games/listing" }).get(
     let orderBy
     switch (sort) {
       case "name":
-        orderBy = asc(games.title)
+        orderBy = order(games.title)
         break
       case "benchmarks":
       case "recent":
       default:
-        orderBy = desc(games.createdAt)
+        orderBy = order(games.createdAt)
         break
     }
 
@@ -195,7 +196,10 @@ export const gamesListingRoutes = new Elysia({ prefix: "/games/listing" }).get(
 
     // If sorting by benchmarks, re-sort the enriched data
     if (sort === "benchmarks") {
-      enrichedData.sort((a, b) => b.benchmarkCount - a.benchmarkCount)
+      const sortFn = query.order === "asc"
+        ? (a: any, b: any) => a.benchmarkCount - b.benchmarkCount
+        : (a: any, b: any) => b.benchmarkCount - a.benchmarkCount
+      enrichedData.sort(sortFn)
     }
 
     const [{ count: total }] = await countQuery
@@ -217,6 +221,7 @@ export const gamesListingRoutes = new Elysia({ prefix: "/games/listing" }).get(
       genre: t.Optional(t.String()),
       device: t.Optional(t.String()),
       sort: t.Optional(t.String()),
+      order: t.Optional(t.String()),
     }),
   },
 )
\ No newline at end of file