brackt/app/components/ui/team-name-display.tsx
Chris Parsons 063834d8e6
Display team owner names in standings views (#184)
* Show team name + username in standings, extract TeamNameDisplay component

- Add TeamNameDisplay component that renders team name (as link) with owner username below, matching the league homepage style
- Update StandingsTable to use TeamNameDisplay with owner username shown below team name
- Update league homepage standings section to use TeamNameDisplay
- Add ownerName/teamOwnerId fields to TeamStanding type
- Extend getSeasonStandings to include teamOwnerId from team relation
- Fetch and attach owner display names in the full standings page loader

https://claude.ai/code/session_01EYgGnuTBaRVdBDapJRTxDZ

* Address code review: type hygiene, explicit types, parallel fetching, style fix

- Remove teamOwnerId from TeamStanding type (was an internal server concern, not display data)
- Remove teamOwnerId from getSeasonStandings return value
- Add TeamStandingWithChange interface extending TeamStanding with sevenDayRankChange/sevenDayOldRank fields
- Annotate getSevenDayStandingsChange with explicit Promise<TeamStandingWithChange[]> return type
- Re-export TeamStandingWithChange from models/standings.ts
- Standings loader: query teams table directly for ownerIds instead of relying on teamOwnerId in standings data
- Standings loader: parallelize all independent queries (standings, teams, progressionData, seasonComplete, completionPercentage) with Promise.all
- Restore font-medium on StandingsTable team TableCell

https://claude.ai/code/session_01EYgGnuTBaRVdBDapJRTxDZ

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-03-19 20:19:28 -07:00

31 lines
785 B
TypeScript

import { Link } from "react-router";
interface TeamNameDisplayProps {
teamName: string;
ownerName?: string | null;
href?: string;
}
/**
* Displays a team name with optional owner username below it.
* If href is provided, the team name is rendered as a link.
*/
export function TeamNameDisplay({ teamName, ownerName, href }: TeamNameDisplayProps) {
return (
<div className="min-w-0">
{href ? (
<Link
to={href}
className="font-medium text-sm hover:underline truncate block"
>
{teamName}
</Link>
) : (
<p className="font-medium text-sm truncate">{teamName}</p>
)}
{ownerName && (
<p className="text-xs text-muted-foreground truncate">{ownerName}</p>
)}
</div>
);
}