From f8b1f720a139333d74475221da36ca3f27c98656 Mon Sep 17 00:00:00 2001
From: m09l6d0ur13ii <m09l6d0ur13ii@gmail.com>
Date: Thu, 2 Jul 2026 18:26:17 +0500
Subject: [PATCH 1/2] fix pagination state and past members styling

---
 .../app/clan/[clanName]/ClanPlayerCount.tsx   | 21 +++++++++++++++++
 .../app/clan/[clanName]/PastMembersToggle.tsx | 12 ++++++++--
 apps/frontend/app/clan/[clanName]/layout.tsx  |  9 +++++++-
 apps/frontend/app/clan/[clanName]/page.tsx    | 23 +++++++++++++++++--
 apps/frontend/components/LastSeen.tsx         |  6 +++--
 apps/frontend/components/Pagination.tsx       | 23 +++++++++++--------
 apps/frontend/components/PlayerList.tsx       | 18 +++++++++++----
 7 files changed, 90 insertions(+), 22 deletions(-)
 create mode 100644 apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx

diff --git a/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx b/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx
new file mode 100644
index 00000000..7352232d
--- /dev/null
+++ b/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+export function ClanPlayerCount({
+  activeCount,
+  totalCount,
+}: {
+  activeCount: number;
+  totalCount: number;
+}) {
+  const searchParams = useSearchParams();
+  const showPast = searchParams?.has('past') ?? false;
+
+  return (
+    <span className="pr-4">
+      {activeCount} players
+      {showPast && <span className="text-gray-400 ml-1">({totalCount})</span>}
+    </span>
+  );
+}
diff --git a/apps/frontend/app/clan/[clanName]/PastMembersToggle.tsx b/apps/frontend/app/clan/[clanName]/PastMembersToggle.tsx
index fe9b4013..24a73375 100644
--- a/apps/frontend/app/clan/[clanName]/PastMembersToggle.tsx
+++ b/apps/frontend/app/clan/[clanName]/PastMembersToggle.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export function PastMembersToggle({ clanName, showPastMembers }: { clanName: string, showPastMembers: boolean }) {
   const router = useRouter();
+  const searchParams = useSearchParams();
 
   return (
     <div className="flex justify-end px-8 mb-2">
@@ -12,7 +13,14 @@ export function PastMembersToggle({ clanName, showPastMembers }: { clanName: str
           type="checkbox" 
           checked={showPastMembers} 
           onChange={(e) => {
-            const url = `/clan/${encodeURIComponent(clanName)}${e.target.checked ? '?past=true' : ''}`;
+            const params = new URLSearchParams(searchParams.toString());
+            if (e.target.checked) {
+              params.set('past', 'true');
+            } else {
+              params.delete('past');
+            }
+            const queryString = params.toString();
+            const url = `/clan/${encodeURIComponent(clanName)}${queryString ? `?${queryString}` : ''}`;
             router.replace(url, { scroll: false });
           }}
           className="cursor-pointer"
diff --git a/apps/frontend/app/clan/[clanName]/layout.tsx b/apps/frontend/app/clan/[clanName]/layout.tsx
index ce50e6ca..5528b038 100644
--- a/apps/frontend/app/clan/[clanName]/layout.tsx
+++ b/apps/frontend/app/clan/[clanName]/layout.tsx
@@ -4,6 +4,7 @@ import { LayoutTabs } from './LayoutTabs';
 import { paramsSchema } from './schema';
 import { z } from 'zod';
 import { formatPlayTime } from '../../../utils/format';
+import { ClanPlayerCount } from './ClanPlayerCount';
 
 export default async function Index({
   params,
@@ -19,6 +20,9 @@ export default async function Index({
       name: true,
       playTime: true,
       activePlayerCount: true,
+      _count: {
+        select: { clanPlayerInfos: true },
+      },
     },
     where: {
       name: clanName,
@@ -51,7 +55,10 @@ export default async function Index({
       <header className="flex flex-row px-20 gap-4 items-center">
         <section className="flex flex-col gap-2 grow">
           <h1 className="text-2xl font-bold">{clan.name}</h1>
-          <span className="pr-4">{`${clan.activePlayerCount} players`}</span>
+          <ClanPlayerCount 
+            activeCount={clan.activePlayerCount} 
+            totalCount={clan._count.clanPlayerInfos} 
+          />
         </section>
         <aside className="flex flex-col gap-2 text-right">
           <p>
diff --git a/apps/frontend/app/clan/[clanName]/page.tsx b/apps/frontend/app/clan/[clanName]/page.tsx
index 215e272d..e31be7ed 100644
--- a/apps/frontend/app/clan/[clanName]/page.tsx
+++ b/apps/frontend/app/clan/[clanName]/page.tsx
@@ -1,6 +1,6 @@
 import { paramsSchema } from './schema';
 import { z } from 'zod';
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import prisma from '../../../utils/prisma';
 import { PlayerList } from '../../../components/PlayerList';
 import { searchParamPageSchema } from '../../../utils/page';
@@ -90,11 +90,30 @@ export default async function Index({
     return notFound();
   }
 
+  const playerCount = showPastMembers ? clan._count.clanPlayerInfos : clan.activePlayerCount;
+  const maxPage = Math.ceil(playerCount / 100) || 1;
+
+  if (page > maxPage) {
+    // Generate new URL with the max possible page
+    const params = new URLSearchParams();
+    for (const [key, value] of Object.entries(searchParams)) {
+      if (value !== undefined) {
+        if (Array.isArray(value)) {
+          value.forEach((v) => params.append(key, v));
+        } else {
+          params.set(key, value);
+        }
+      }
+    }
+    params.set('page', maxPage.toString());
+    return redirect(`/clan/${encodeURIComponent(clanName)}?${params.toString()}`);
+  }
+
   return (
     <div className="flex flex-col gap-4">
       <PastMembersToggle clanName={clanName} showPastMembers={showPastMembers} />
       <PlayerList
-        playerCount={showPastMembers ? clan._count.clanPlayerInfos : clan.activePlayerCount}
+        playerCount={playerCount}
         rankMethod={null}
         showLastSeen={true}
         players={clan.clanPlayerInfos.map((playerInfo, index) => ({
diff --git a/apps/frontend/components/LastSeen.tsx b/apps/frontend/components/LastSeen.tsx
index 21b2d745..caaa7235 100644
--- a/apps/frontend/components/LastSeen.tsx
+++ b/apps/frontend/components/LastSeen.tsx
@@ -7,12 +7,14 @@ import { encodeIp } from '../utils/encoding';
 export function LastSeen({
   lastSeenAt,
   gameServers,
+  className: propClassName,
 }: {
   lastSeenAt: Date;
   gameServers: {
     ip: string;
     port: number;
   }[];
+  className?: string;
 }) {
   if (gameServers.length > 0) {
     return (
@@ -21,7 +23,7 @@ export function LastSeen({
         href={{
           pathname: `/server/${encodeIp(gameServers[0].ip)}/${gameServers[0].port}`,
         }}
-        className="text-[#43a700] font-bold hover:underline"
+        className={twMerge("text-[#43a700] font-bold hover:underline", className)}
       >
         Online
       </Link>
@@ -45,7 +47,7 @@ export function LastSeen({
     }
 
     return (
-      <span className={twMerge('truncate', className)}>
+      <span className={twMerge('truncate', className, propClassName)}>
         {formatDurationShort(
           intervalToDuration({ start: lastSeenAt, end: new Date() })
         )}
diff --git a/apps/frontend/components/Pagination.tsx b/apps/frontend/components/Pagination.tsx
index 6f9a90b0..791f95e6 100644
--- a/apps/frontend/components/Pagination.tsx
+++ b/apps/frontend/components/Pagination.tsx
@@ -61,13 +61,23 @@ export function Pagination({ pageCount }: { pageCount: number }) {
     }
   }
 
+  const getQuery = (targetPage: number) => {
+    const q = { ...searchParams };
+    if (targetPage === 1) {
+      delete q.page;
+    } else {
+      q.page = String(targetPage);
+    }
+    return q;
+  };
+
   return (
     <div className="flex flex-row justify-between border rounded-md overflow-hidden text-sm divide-x">
       <Button
         label="Previous"
         href={{
           pathname,
-          query: currentPage === 2 ? {} : { page: currentPage - 1 },
+          query: getQuery(currentPage - 1),
         }}
         disabled={currentPage === 1}
       />
@@ -86,12 +96,7 @@ export function Pagination({ pageCount }: { pageCount: number }) {
                   prefetch={false}
                   href={{
                     pathname,
-                    query:
-                      page === 1
-                        ? {}
-                        : {
-                            page,
-                          },
+                    query: getQuery(page),
                   }}
                   className={twMerge(
                     'px-2',
@@ -111,9 +116,7 @@ export function Pagination({ pageCount }: { pageCount: number }) {
         label="Next"
         href={{
           pathname,
-          query: {
-            page: currentPage + 1,
-          },
+          query: getQuery(currentPage + 1),
         }}
         disabled={currentPage === pageCount}
       />
diff --git a/apps/frontend/components/PlayerList.tsx b/apps/frontend/components/PlayerList.tsx
index 8492901e..e48df081 100644
--- a/apps/frontend/components/PlayerList.tsx
+++ b/apps/frontend/components/PlayerList.tsx
@@ -73,18 +73,22 @@ export function PlayerList({
         playerCount === undefined ? undefined : Math.ceil(playerCount / 100)
       }
     >
-      {players.map((player) => (
+      {players.map((player) => {
+        const rowClassName = player.isActiveClan === false ? 'text-gray-400' : '';
+        
+        return (
         <Fragment key={player.name}>
-          <ListCell alignRight label={formatInteger(player.rank)} />
+          <ListCell alignRight label={formatInteger(player.rank)} className={rowClassName} />
           <ListCell
             label={player.isActiveClan === false ? `${player.name} (Past)` : player.name}
-            className={player.isActiveClan === false ? 'text-gray-400' : ''}
+            className={rowClassName}
             href={{
               pathname: `/player/${encodeString(player.name)}`,
             }}
           />
           <ListCell
             label={player.clan ?? ''}
+            className={rowClassName}
             href={
               player.clan === undefined
                 ? undefined
@@ -96,6 +100,7 @@ export function PlayerList({
           {rankMethod === RankMethod.ELO && (
             <ListCell
               alignRight
+              className={rowClassName}
               label={
                 player.rating === undefined ? '' : formatInteger(player.rating)
               }
@@ -104,6 +109,7 @@ export function PlayerList({
           {rankMethod === RankMethod.TIME && (
             <ListCell
               alignRight
+              className={rowClassName}
               label={
                 player.rating === undefined
                   ? ''
@@ -111,15 +117,17 @@ export function PlayerList({
               }
             />
           )}
-          <ListCell alignRight label={formatPlayTime(player.playTime)} />
+          <ListCell alignRight label={formatPlayTime(player.playTime)} className={rowClassName} />
           {showLastSeen && (
             <LastSeen
               lastSeenAt={player.lastSeenAt}
               gameServers={player.gameServers}
+              className={rowClassName}
             />
           )}
         </Fragment>
-      ))}
+        );
+      })}
     </List>
   );
 }

From 4fb84a6f8302880e198db0a926f0a0f18f320e59 Mon Sep 17 00:00:00 2001
From: needs <624097+needs@users.noreply.github.com>
Date: Thu, 2 Jul 2026 18:19:47 +0200
Subject: [PATCH 2/2] Fix LastSeen build error and past-count consistency

- LastSeen: reference propClassName instead of undefined className in the
  Online branch (fixes build error, applies gray styling to online past members)
- ClanPlayerCount: parse past param the same way as the server/toggle
  (past === 'true' || '1') so the header total stays consistent

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx | 3 ++-
 apps/frontend/components/LastSeen.tsx                 | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx b/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx
index 7352232d..259db91c 100644
--- a/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx
+++ b/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx
@@ -10,7 +10,8 @@ export function ClanPlayerCount({
   totalCount: number;
 }) {
   const searchParams = useSearchParams();
-  const showPast = searchParams?.has('past') ?? false;
+  const past = searchParams?.get('past');
+  const showPast = past === 'true' || past === '1';
 
   return (
     <span className="pr-4">
diff --git a/apps/frontend/components/LastSeen.tsx b/apps/frontend/components/LastSeen.tsx
index caaa7235..2e7720c8 100644
--- a/apps/frontend/components/LastSeen.tsx
+++ b/apps/frontend/components/LastSeen.tsx
@@ -23,7 +23,7 @@ export function LastSeen({
         href={{
           pathname: `/server/${encodeIp(gameServers[0].ip)}/${gameServers[0].port}`,
         }}
-        className={twMerge("text-[#43a700] font-bold hover:underline", className)}
+        className={twMerge("text-[#43a700] font-bold hover:underline", propClassName)}
       >
         Online
       </Link>