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