From 969981a58d208f430ae11e39e19da591f1e08ad2 Mon Sep 17 00:00:00 2001
From: Paul van Brenk <5273975+paulvanbrenk@users.noreply.github.com>
Date: Wed, 18 Mar 2026 16:46:07 -0400
Subject: [PATCH] feat: sort watchlist alphabetically by owner/repo

Add ORDER BY to the GET /api/watchlist query so the database returns
packages sorted by github_owner, github_repo. Also sort client-side
by display name as a fallback.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 PatchNotes.Api/Routes/WatchlistRoutes.cs   |  1 +
 patchnotes-web/src/pages/WatchlistPage.tsx | 32 ++++++++++++++--------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/PatchNotes.Api/Routes/WatchlistRoutes.cs b/PatchNotes.Api/Routes/WatchlistRoutes.cs
index 9b2e5a28..5cf621f3 100644
--- a/PatchNotes.Api/Routes/WatchlistRoutes.cs
+++ b/PatchNotes.Api/Routes/WatchlistRoutes.cs
@@ -76,6 +76,7 @@ public static WebApplication MapWatchlistRoutes(this WebApplication app)
             var packages = await db.Watchlists
                 .AsNoTracking()
                 .Where(w => w.UserId == user.Id)
+                .OrderBy(w => w.Package.GithubOwner).ThenBy(w => w.Package.GithubRepo)
                 .Select(w => new WatchlistPackageDto(
                     w.Package.Id,
                     w.Package.Name,
diff --git a/patchnotes-web/src/pages/WatchlistPage.tsx b/patchnotes-web/src/pages/WatchlistPage.tsx
index b8cfa941..3bc303c2 100644
--- a/patchnotes-web/src/pages/WatchlistPage.tsx
+++ b/patchnotes-web/src/pages/WatchlistPage.tsx
@@ -270,17 +270,27 @@ export function WatchlistPage() {
                   </p>
                 </div>
               ) : (
-                (watchlist ?? []).map((pkg) => (
-                  <WatchedPackageItem
-                    key={pkg.id}
-                    pkg={pkg}
-                    onRemove={() => handleRemove(pkg.id)}
-                    isRemoving={
-                      removeFromWatchlist.isPending &&
-                      removeFromWatchlist.variables === pkg.id
-                    }
-                  />
-                ))
+                [...(watchlist ?? [])]
+                  .sort((a, b) => {
+                    const nameA = (
+                      a.npmName ?? `${a.githubOwner}/${a.githubRepo}`
+                    ).toLowerCase()
+                    const nameB = (
+                      b.npmName ?? `${b.githubOwner}/${b.githubRepo}`
+                    ).toLowerCase()
+                    return nameA.localeCompare(nameB)
+                  })
+                  .map((pkg) => (
+                    <WatchedPackageItem
+                      key={pkg.id}
+                      pkg={pkg}
+                      onRemove={() => handleRemove(pkg.id)}
+                      isRemoving={
+                        removeFromWatchlist.isPending &&
+                        removeFromWatchlist.variables === pkg.id
+                      }
+                    />
+                  ))
               )}
             </Card>
           </div>