Make watchlist column sortable on PR tables and the top repositories list

src/components/leaderboard/TopRepositoriesTable.tsx

@@ -1118,6 +1118,7 @@ const TopRepositoriesTable: React.FC<TopRepositoriesTableProps> = ({
       header: '★',
       width: '52px',
       align: 'center',
+      sortKey: 'watch',
       cellSx: { p: 0 },
       renderCell: (repo) =>
         repo.repository ? (

src/components/miners/MinerPRsTable.tsx

@@ -30,11 +30,21 @@ import {
 import FilterButton from '../FilterButton';
 import { ClearSearchAdornment } from '../common/ClearSearchAdornment';
 import { WatchlistButton } from '../../components/common';
-import { serializePRKey } from '../../hooks/useWatchlist';
+import {
+  comparePRsByWatchlist,
+  serializePRKey,
+  useWatchlist,
+} from '../../hooks/useWatchlist';
 import TablePagination from '../common/TablePagination';
 import { tooltipSlotProps } from '../../theme';
 
-type PrSortField = 'number' | 'repository' | 'score' | 'lines' | 'date';
+type PrSortField =
+  | 'number'
+  | 'repository'
+  | 'score'
+  | 'lines'
+  | 'date'
+  | 'watch';
 type SortDir = 'asc' | 'desc';
 
 const PAGE_SIZE = 20;
@@ -54,6 +64,7 @@ const DEFAULT_SORT_DIR: Record<PrSortField, SortDir> = {
   score: 'desc',
   lines: 'desc',
   date: 'desc',
+  watch: 'desc',
 };
 
 // Mirrors the Score cell's render logic so clicking the Score header
@@ -90,6 +101,7 @@ const MinerPRsTable: React.FC<MinerPRsTableProps> = ({ githubId }) => {
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const { data: prs, isLoading } = useMinerPRs(githubId);
+  const { isWatched } = useWatchlist('prs');
   const [selectedAuthor, setSelectedAuthor] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [sortField, setSortField] = useState<PrSortField>('date');
@@ -187,11 +199,14 @@ const MinerPRsTable: React.FC<MinerPRsTableProps> = ({ githubId }) => {
           cmp = da.localeCompare(db);
           break;
         }
+        case 'watch':
+          cmp = comparePRsByWatchlist(a, b, isWatched);
+          break;
       }
       return sortDir === 'asc' ? cmp : -cmp;
     });
     return sorted;
-  }, [filteredPRs, sortField, sortDir]);
+  }, [filteredPRs, sortField, sortDir, isWatched]);
 
   const pagedPRs = useMemo(
     () => paginateItems(sortedPRs, page, PAGE_SIZE),
@@ -426,6 +441,7 @@ const MinerPRsTable: React.FC<MinerPRsTableProps> = ({ githubId }) => {
       header: '★',
       width: '8%',
       align: 'center',
+      sortKey: 'watch',
       renderCell: (pr) => (
         <WatchlistButton
           category="prs"

src/components/repositories/RepositoryPRsTable.tsx

@@ -18,7 +18,11 @@ import {
 } from '../../components/common/DataTable';
 import { WatchlistButton } from '../../components/common';
 import { ScrollAwareTooltip } from '../../components/common/ScrollAwareTooltip';
-import { serializePRKey } from '../../hooks/useWatchlist';
+import {
+  comparePRsByWatchlist,
+  serializePRKey,
+  useWatchlist,
+} from '../../hooks/useWatchlist';
 import theme, { TEXT_OPACITY, scrollbarSx } from '../../theme';
 import { filterPrs, getPrStatusCounts, type PrStatusFilter } from '../../utils';
 import { getRepositoryOwnerAvatarSrc } from '../../utils/avatar';
@@ -33,7 +37,8 @@ type PrSortField =
   | 'lines'
   | 'score'
   | 'status'
-  | 'mergedAt';
+  | 'mergedAt'
+  | 'watch';
 type SortOrder = 'asc' | 'desc';
 
 interface RepositoryPRsTableProps {
@@ -50,6 +55,7 @@ const RepositoryPRsTable: React.FC<RepositoryPRsTableProps> = ({
 }) => {
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { isWatched } = useWatchlist('prs');
   const [filter, setFilter] = useSessionStoredState<PrStatusFilter>(
     'repository:prs:statusFilter',
     state,
@@ -139,12 +145,14 @@ const RepositoryPRsTable: React.FC<RepositoryPRsTableProps> = ({
             a.mergedAt ? new Date(a.mergedAt).getTime() : 0,
             b.mergedAt ? new Date(b.mergedAt).getTime() : 0,
           );
+        case 'watch':
+          return comparePRsByWatchlist(a, b, isWatched) * dir;
         case 'score':
         default:
           return cmpNum(parseFloat(a.score || '0'), parseFloat(b.score || '0'));
       }
     });
-  }, [filteredPRs, sortField, sortOrder]);
+  }, [filteredPRs, sortField, sortOrder, isWatched]);
 
   const handleRowClick = useCallback(
     (pr: CommitLog) => {
@@ -360,6 +368,7 @@ const RepositoryPRsTable: React.FC<RepositoryPRsTableProps> = ({
       key: 'watch',
       header: '★',
       align: 'center',
+      sortKey: 'watch',
       renderCell: (pr) => (
         <WatchlistButton
           category="prs"

src/hooks/useWatchlist.ts

@@ -1,4 +1,5 @@
 import { useCallback, useSyncExternalStore } from 'react';
+import { compareByWatchlist } from '../utils/watchlistSort';
 
 // TODO(2026-Q3): drop V1_KEY read path once the rollback window closes.
 const V1_KEY = 'gittensor.watchlist.v1';
@@ -252,3 +253,17 @@ export const useWatchlistCounts = (): CountsMap =>
 // should always use this helper to avoid drift in key format.
 export const serializePRKey = (repo: string, number: number): string =>
   `${repo}#${number}`;
+
+export const comparePRsByWatchlist = <
+  T extends { repository: string; pullRequestNumber: number },
+>(
+  a: T,
+  b: T,
+  isWatched: (key: string) => boolean,
+): number =>
+  compareByWatchlist(
+    a,
+    b,
+    (pr) => serializePRKey(pr.repository, pr.pullRequestNumber),
+    isWatched,
+  );

src/pages/WatchlistPage.tsx

@@ -86,9 +86,10 @@ import {
   isOutsideScoringWindow,
 } from '../utils/ExplorerUtils';
 import {
+  comparePRsByWatchlist,
+  serializePRKey,
   useWatchlist,
   useWatchlistCounts,
-  serializePRKey,
   type WatchlistCategory,
 } from '../hooks/useWatchlist';
 import { useWatchedPRs, type WatchedPRSource } from '../hooks/useWatchedPRs';
@@ -100,7 +101,6 @@ import {
 import { filterPrs, type PrStatusFilter } from '../utils/prTable';
 import { getIssueStatusMeta } from '../utils/issueStatus';
 import { formatDate, formatTokenAmount } from '../utils/format';
-import { compareByWatchlist } from '../utils/watchlistSort';
 import { getRepositoryOwnerAvatarSrc } from '../utils/avatar';
 import theme, {
   CHART_COLORS,
@@ -3474,11 +3474,8 @@ const PRsList: React.FC<{ itemKeys: string[] }> = ({ itemKeys }) => {
         }
         case 'score':
           return cmpNum(parseFloat(a.score || '0'), parseFloat(b.score || '0'));
-        case 'watch': {
-          const key = (pr: CommitLog) =>
-            serializePRKey(pr.repository, pr.pullRequestNumber);
-          return compareByWatchlist(a, b, key, isWatched) * dir;
-        }
+        case 'watch':
+          return comparePRsByWatchlist(a, b, isWatched) * dir;
         default:
           return 0;
       }