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

22
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,14 +1485,7 @@ 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
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) => { {mobileTabs.map((tab) => {
const showTurnIndicator = const showTurnIndicator =
(tab.id === "available" || tab.id === "queue") && (tab.id === "available" || tab.id === "queue") &&
@ -1517,8 +1511,6 @@ export default function DraftRoom() {
); );
})} })}
</nav> </nav>
);
})()}
{/* Force Manual Pick Dialog */} {/* Force Manual Pick Dialog */}
<Dialog <Dialog