Skip to content

Keep header text off the activity calendar #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
needs merged 1 commit into from
Aug 21, 2026
Merged

Keep header text off the activity calendar #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 18 additions & 20 deletions apps/frontend/app/clan/[clanName]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { z } from 'zod';
import { formatPlayTime } from '../../../utils/format';
import { encodeString } from '../../../utils/encoding';
import { ClanPlayerCount } from './ClanPlayerCount';
import { ActivityCalendarSection } from '../../../components/ActivityCalendarSection';
import { ActivityHeader } from '../../../components/ActivityHeader';
import { getClanActivity } from '../../../utils/activity';

export default async function Index({
Expand Down Expand Up @@ -58,26 +58,24 @@ export default async function Index({
return (
<main className="flex flex-col gap-8 py-12">
<header className="px-8 xl:px-20">
<div className="relative">
<ActivityCalendarSection
apiPath={`/api/clan/${encodeString(clanName)}/activity`}
initial={activity}
/>
<div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-col justify-center gap-2 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
<h1 className="text-2xl font-bold">{clan.name}</h1>
<div className="flex flex-row divide-x">
<span className="pr-4">
<ClanPlayerCount
activeCount={clan.activePlayerCount}
totalCount={clan._count.clanPlayerInfos}
/>
</span>
<span className="px-4">
Playtime: {formatPlayTime(clan.playTime)}
</span>
</div>
<ActivityHeader
apiPath={`/api/clan/${encodeString(clanName)}/activity`}
activity={activity}
contentClassName="flex-col justify-center gap-2"
>
<h1 className="text-2xl font-bold">{clan.name}</h1>
<div className="flex flex-row divide-x">
<span className="pr-4">
<ClanPlayerCount
activeCount={clan.activePlayerCount}
totalCount={clan._count.clanPlayerInfos}
/>
</span>
<span className="px-4">
Playtime: {formatPlayTime(clan.playTime)}
</span>
</div>
</div>
</ActivityHeader>
</header>

<LayoutTabs
Expand Down
18 changes: 8 additions & 10 deletions apps/frontend/app/gametype/[gameTypeName]/(lists)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import prisma from '../../../../utils/prisma';
import { LayoutTabs } from '../LayoutTabs';
import { paramsSchema } from '../schema';
import { encodeString } from '../../../../utils/encoding';
import { ActivityCalendarSection } from '../../../../components/ActivityCalendarSection';
import { ActivityHeader } from '../../../../components/ActivityHeader';
import { getGameTypeActivity } from '../../../../utils/activity';

export default async function Index({
Expand All @@ -30,15 +30,13 @@ export default async function Index({
return (
<div className="flex flex-col gap-4 py-8">
<header className="px-8 xl:px-20">
<div className="relative">
<ActivityCalendarSection
apiPath={`/api/gametype/${encodeString(gameTypeName)}/activity`}
initial={activity}
/>
<div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-row items-center gap-4 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
<h1 className="text-2xl font-bold">{gameTypeName}</h1>
</div>
</div>
<ActivityHeader
apiPath={`/api/gametype/${encodeString(gameTypeName)}/activity`}
activity={activity}
contentClassName="flex-row items-center gap-4"
>
<h1 className="text-2xl font-bold">{gameTypeName}</h1>
</ActivityHeader>
</header>

<LayoutTabs
Expand Down
34 changes: 16 additions & 18 deletions apps/frontend/app/gametype/[gameTypeName]/map/[mapName]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import prisma from '../../../../../utils/prisma';
import { LayoutTabs } from '../../LayoutTabs';
import { paramsSchema } from './schema';
import { encodeString } from '../../../../../utils/encoding';
import { ActivityCalendarSection } from '../../../../../components/ActivityCalendarSection';
import { ActivityHeader } from '../../../../../components/ActivityHeader';
import { getMapActivity } from '../../../../../utils/activity';

export default async function Index({
Expand Down Expand Up @@ -34,23 +34,21 @@ export default async function Index({
return (
<div className="flex flex-col gap-4 py-8">
<header className="px-8 xl:px-20">
<div className="relative">
<ActivityCalendarSection
apiPath={`/api/gametype/${encodeString(gameTypeName)}/map/${encodeString(mapName)}/activity`}
initial={activity}
/>
<div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-col justify-center gap-2 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
<h1 className="text-2xl font-bold">{mapName}</h1>
<span>
<Link
className="hover:underline"
href={{ pathname: `/gametype/${encodeString(gameTypeName)}` }}
>
{gameTypeName}
</Link>
</span>
</div>
</div>
<ActivityHeader
apiPath={`/api/gametype/${encodeString(gameTypeName)}/map/${encodeString(mapName)}/activity`}
activity={activity}
contentClassName="flex-col justify-center gap-2"
>
<h1 className="text-2xl font-bold">{mapName}</h1>
<span>
<Link
className="hover:underline"
href={{ pathname: `/gametype/${encodeString(gameTypeName)}` }}
>
{gameTypeName}
</Link>
</span>
</ActivityHeader>
</header>

<LayoutTabs
Expand Down
72 changes: 35 additions & 37 deletions apps/frontend/app/player/[playerName]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { LayoutTabs } from './LayoutTabs';
import { LastSeen } from '../../../components/LastSeen';
import { formatPlayTime } from '../../../utils/format';
import { encodeString } from '../../../utils/encoding';
import { ActivityCalendarSection } from '../../../components/ActivityCalendarSection';
import { ActivityHeader } from '../../../components/ActivityHeader';
import { getPlayerActivity } from '../../../utils/activity';

export default async function Index({
Expand Down Expand Up @@ -74,43 +74,41 @@ export default async function Index({
return (
<main className="flex flex-col gap-8 py-12">
<header className="px-8 xl:px-20">
<div className="relative">
<ActivityCalendarSection
apiPath={`/api/player/${encodeString(playerName)}/activity`}
initial={activity}
/>
<div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-row items-center gap-4 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
<Image src="/player.png" width={100} height={100} alt="Player" />
<section className="flex flex-col gap-2">
<h1 className="text-2xl font-bold">{player.name}</h1>
<div className="flex flex-row divide-x">
{player.clanName !== null && (
<span className="pr-4">
<Link
className="hover:underline"
href={{
pathname: `/clan/${encodeString(player.clanName)}`,
}}
>
{player.clanName}
</Link>
</span>
)}
<span className={player.clanName !== null ? 'px-4' : 'pr-4'}>
Playtime: {formatPlayTime(player.playTime)}
<ActivityHeader
apiPath={`/api/player/${encodeString(playerName)}/activity`}
activity={activity}
contentClassName="flex-row items-center gap-4"
>
<Image src="/player.png" width={100} height={100} alt="Player" />
<section className="flex flex-col gap-2">
<h1 className="text-2xl font-bold">{player.name}</h1>
<div className="flex flex-row divide-x">
{player.clanName !== null && (
<span className="pr-4">
<Link
className="hover:underline"
href={{
pathname: `/clan/${encodeString(player.clanName)}`,
}}
>
{player.clanName}
</Link>
</span>
<span className="px-4">
<LastSeen
gameServers={player.gameServerStateClients
.map((client) => client.gameServerState.gameServer)
.filter((gameServer) => gameServer !== null)}
lastSeenAt={player.lastSeenAt}
/>
</span>
</div>
</section>
</div>
</div>
)}
<span className={player.clanName !== null ? 'px-4' : 'pr-4'}>
Playtime: {formatPlayTime(player.playTime)}
</span>
<span className="px-4">
<LastSeen
gameServers={player.gameServerStateClients
.map((client) => client.gameServerState.gameServer)
.filter((gameServer) => gameServer !== null)}
lastSeenAt={player.lastSeenAt}
/>
</span>
</div>
</section>
</ActivityHeader>
</header>

<LayoutTabs
Expand Down
80 changes: 39 additions & 41 deletions apps/frontend/app/server/[ip]/[port]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { formatPlayTime } from '../../../../utils/format';
import { GameServer } from '@prisma/client';
import { formatDuration, intervalToDuration } from 'date-fns';
import { Metadata } from 'next';
import { ActivityCalendarSection } from '../../../../components/ActivityCalendarSection';
import { ActivityHeader } from '../../../../components/ActivityHeader';
import { getServerActivity } from '../../../../utils/activity';

export async function generateMetadata({
Expand Down Expand Up @@ -140,47 +140,45 @@ export default async function Index({
return (
<main className="flex flex-col gap-8 py-12">
<header className="px-8 xl:px-20">
<div className="relative">
<ActivityCalendarSection
apiPath={`/api/server/${encodeIp(gameServer.ip)}/${gameServer.port}/activity`}
initial={activity}
/>
<div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-col justify-center gap-2 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
<h1 className="text-2xl font-bold">
{gameServer.gameServerState.name}
</h1>
<div className="flex flex-row divide-x">
<span className="pr-4">
<Link
className="hover:underline"
href={{
pathname: `/gametype/${encodeString(
gameServer.gameServerState.map.gameTypeName
)}`,
}}
>
{gameServer.gameServerState.map.gameTypeName}
</Link>
</span>
<span className="px-4">
<Link
className="hover:underline"
href={{
pathname: `/gametype/${encodeString(
gameServer.gameServerState.map.gameTypeName
)}/map/${encodeString(gameServer.gameServerState.map.name)}`,
}}
>
{gameServer.gameServerState.map.name}
</Link>
</span>
<span className="px-4">{`${gameServer.gameServerState.numClients} / ${gameServer.gameServerState.maxClients} clients`}</span>
<span className="px-4">
Playtime: {formatPlayTime(gameServer.playTime)}
</span>
</div>
<ActivityHeader
apiPath={`/api/server/${encodeIp(gameServer.ip)}/${gameServer.port}/activity`}
activity={activity}
contentClassName="flex-col justify-center gap-2"
>
<h1 className="text-2xl font-bold">
{gameServer.gameServerState.name}
</h1>
<div className="flex flex-row divide-x">
<span className="pr-4">
<Link
className="hover:underline"
href={{
pathname: `/gametype/${encodeString(
gameServer.gameServerState.map.gameTypeName
)}`,
}}
>
{gameServer.gameServerState.map.gameTypeName}
</Link>
</span>
<span className="px-4">
<Link
className="hover:underline"
href={{
pathname: `/gametype/${encodeString(
gameServer.gameServerState.map.gameTypeName
)}/map/${encodeString(gameServer.gameServerState.map.name)}`,
}}
>
{gameServer.gameServerState.map.name}
</Link>
</span>
<span className="px-4">{`${gameServer.gameServerState.numClients} / ${gameServer.gameServerState.maxClients} clients`}</span>
<span className="px-4">
Playtime: {formatPlayTime(gameServer.playTime)}
</span>
</div>
</div>
</ActivityHeader>
</header>

<SnapshotTimeline
Expand Down
31 changes: 31 additions & 0 deletions apps/frontend/components/ActivityHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { ActivityPayload } from './ActivityCalendar';
import { ActivityCalendarSection } from './ActivityCalendarSection';

export function ActivityHeader({
apiPath,
activity,
contentClassName,
children,
}: {
apiPath: string;
activity: ActivityPayload;
contentClassName: string;
children: React.ReactNode;
}) {
return (
<div className="relative">
<div className="hidden md:block">
<ActivityCalendarSection apiPath={apiPath} initial={activity} />
</div>

<div className="flex max-w-full flex-row md:absolute md:inset-y-0 md:left-0 md:z-10">
<div
className={`flex min-w-0 bg-gradient-to-r from-white from-30% to-white/85 ${contentClassName}`}
>
{children}
</div>
<div className="hidden w-24 shrink-0 bg-gradient-to-r from-white/85 to-transparent md:block" />
</div>
</div>
);
}
Loading