chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: default draft room to board tab and clean up tab section (#43)

Browse source 
- Change default desktop tab from "participants" to "board"
- Extract mobileTabs/mobileColCount before JSX to eliminate IIFE pattern
- Remove redundant h-full wrapper divs from TabsContent for consistency

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Chris Parsons 2026-02-27 23:12:21 -08:00 • committed by GitHub
parent 9dc7e860cb
commit 4547a7a4e7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 34 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
app/routes/leagues/$leagueId.draft.$seasonId.tsx
View file

@ -332,7 +332,7 @@ export default function DraftRoom() {
const stored = localStorage.getItem("draftSidebarCollapsed");
return stored ? JSON.parse(stored) : false;
});
const [activeTab, setActiveTab] = useState<"participants" | "board" | "teams">("participants");
const [activeTab, setActiveTab] = useState<"participants" | "board" | "teams">("board");
const [mobileTab, setMobileTab] = useState<"available" | "queue" | "board" | "roster" | "controls">(
!userTeam && isCommissioner ? "board" : "available"
);
@ -1209,6 +1209,11 @@ export default function DraftRoom() {
}
: null;
const mobileTabs = userTeam
? [MOBILE_TABS_BASE[0], QUEUE_TAB, ...MOBILE_TABS_BASE.slice(1)]
: MOBILE_TABS_BASE;
const mobileColCount = mobileTabs.length;
return (
<div className="h-dvh bg-background flex flex-col overflow-hidden">
{/* Draft Completion Banner */}
@ -1463,9 +1468,7 @@ export default function DraftRoom() {
</div>
<TabsContent value="participants" className="flex-1 overflow-hidden m-0">
<div className="h-full">
<AvailableParticipantsSection {...availableParticipantsSectionProps} />
</div>
<AvailableParticipantsSection {...availableParticipantsSectionProps} />
</TabsContent>
<TabsContent value="board" className="flex-1 overflow-hidden m-0">
@ -1473,9 +1476,7 @@ export default function DraftRoom() {
</TabsContent>
<TabsContent value="teams" className="flex-1 overflow-hidden m-0">
<div className="h-full">
<TeamsDraftedGrid {...teamsDraftedGridProps} />
</div>
<TeamsDraftedGrid {...teamsDraftedGridProps} />
</TabsContent>
</Tabs>
</div>
@ -1484,41 +1485,32 @@ export default function DraftRoom() {
</div>
{/* Mobile Bottom Nav */}
{(() => {
// Build tabs dynamically: insert Queue tab after Available only when user has a team
const mobileTabs = userTeam
? [MOBILE_TABS_BASE[0], QUEUE_TAB, ...MOBILE_TABS_BASE.slice(1)]
: MOBILE_TABS_BASE;
const colCount = mobileTabs.length;
return (
<nav className={`md:hidden flex-shrink-0 border-t bg-card grid`} style={{ gridTemplateColumns: `repeat(${colCount}, 1fr)` }}>
{mobileTabs.map((tab) => {
const showTurnIndicator =
(tab.id === "available" || tab.id === "queue") &&
isMyTurn &&
season.status === "draft" &&
!isDraftComplete;
return (
<button
key={tab.id}
onClick={() => setMobileTab(tab.id as typeof mobileTab)}
className={`relative flex flex-col items-center justify-center py-2 gap-0.5 min-h-[56px] transition-colors ${
mobileTab === tab.id ? "text-electric" : "text-muted-foreground"
}`}
>
<div className="relative">
<tab.Icon className="h-5 w-5" />
{showTurnIndicator && (
<span className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-electric" />
)}
</div>
<span className="text-[10px] font-medium">{tab.label}</span>
</button>
);
})}
</nav>
);
})()}
<nav className={`md:hidden flex-shrink-0 border-t bg-card grid`} style={{ gridTemplateColumns: `repeat(${mobileColCount}, 1fr)` }}>
{mobileTabs.map((tab) => {
const showTurnIndicator =
(tab.id === "available" || tab.id === "queue") &&
isMyTurn &&
season.status === "draft" &&
!isDraftComplete;
return (
<button
key={tab.id}
onClick={() => setMobileTab(tab.id as typeof mobileTab)}
className={`relative flex flex-col items-center justify-center py-2 gap-0.5 min-h-[56px] transition-colors ${
mobileTab === tab.id ? "text-electric" : "text-muted-foreground"
}`}
>
<div className="relative">
<tab.Icon className="h-5 w-5" />
{showTurnIndicator && (
<span className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-electric" />
)}
</div>
<span className="text-[10px] font-medium">{tab.label}</span>
</button>
);
})}
</nav>
{/* Force Manual Pick Dialog */}
<Dialog