diff --git a/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx b/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx
new file mode 100644
index 0000000..259db91
--- /dev/null
+++ b/apps/frontend/app/clan/[clanName]/ClanPlayerCount.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+export function ClanPlayerCount({
+ activeCount,
+ totalCount,
+}: {
+ activeCount: number;
+ totalCount: number;
+}) {
+ const searchParams = useSearchParams();
+ const past = searchParams?.get('past');
+ const showPast = past === 'true' || past === '1';
+
+ return (
+
+ {activeCount} players
+ {showPast && ({totalCount})}
+
+ );
+}
diff --git a/apps/frontend/app/clan/[clanName]/PastMembersToggle.tsx b/apps/frontend/app/clan/[clanName]/PastMembersToggle.tsx
index fe9b401..24a7337 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 (
@@ -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 ce50e6c..5528b03 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({
{clan.name}
- {`${clan.activePlayerCount} players`}
+