settings link, uneroll team server fn

src/app/router.tsx

@@ -25,6 +25,7 @@ export function createRouter() {
       defaultPreload: 'intent',
       defaultErrorComponent: DefaultCatchBoundary,
       scrollRestoration: true,
+      defaultViewTransition: true
     }),
     queryClient,
   )

src/app/routes/_authed.tsx

@@ -1,4 +1,4 @@
-import { Outlet, redirect, createFileRoute } from "@tanstack/react-router";
+import { redirect, createFileRoute, Outlet } from "@tanstack/react-router";
 import Layout from "@/features/core/components/layout";
 import { useServerEvents } from "@/hooks/use-server-events";
 

src/app/routes/_authed/admin/preview.tsx

@@ -1,4 +1,4 @@
-import { PreviewBracketPage } from '@/features/bracket/components/bracket-page'
+import { PreviewBracket } from '@/features/bracket/components/preview'
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/_authed/admin/preview')({
@@ -6,5 +6,5 @@ export const Route = createFileRoute('/_authed/admin/preview')({
 })
 
 function RouteComponent() {
-  return <PreviewBracketPage />
+  return <PreviewBracket />
 }

src/app/routes/_authed/profile.$playerId.tsx

@@ -12,10 +12,11 @@ export const Route = createFileRoute("/_authed/profile/$playerId")({
       player
     }
   },
-  loader: ({ params }) => ({
+  loader: ({ params, context }) => ({
     header: {
       collapsed: true,
-      withBackButton: true
+      withBackButton: true,
+      settingsLink: context?.auth.user.id === params.playerId ? 'settings' : undefined
     },
     refresh: {
       toRefresh: [playerQueries.details(params.playerId).queryKey],

src/app/routes/_authed/tournaments/$tournamentId.tsx

@@ -6,8 +6,6 @@ import { Box, Button } from '@mantine/core';
 import { useSheet } from '@/hooks/use-sheet';
 import Sheet from '@/components/sheet/sheet';
 import { Tournament } from '@/features/tournaments/types';
-import { UsersIcon } from '@phosphor-icons/react';
-import ListButton from '@/components/list-button';
 import TeamList from '@/features/teams/components/team-list';
 
 export const Route = createFileRoute('/_authed/tournaments/$tournamentId')({
@@ -15,10 +13,11 @@ export const Route = createFileRoute('/_authed/tournaments/$tournamentId')({
     const { queryClient } = context;
     await queryClient.ensureQueryData(tournamentQueries.details(params.tournamentId))
   },
-  loader: ({ params }) => ({
+  loader: ({ params, context }) => ({
     header: {
       collapsed: true,
-      withBackButton: true
+      withBackButton: true,
+      settingsLink: context.auth.roles.includes("Admin") ? `/admin/tournaments/${params.tournamentId}` : undefined
     },
     refresh: {
       toRefresh: tournamentQueries.details(params.tournamentId).queryKey,
@@ -45,12 +44,6 @@ function RouteComponent() {
 
     </Box>
 
-    <ListButton
-      label='Teams'
-      onClick={() => sheet.open()}
-      Icon={UsersIcon}
-    />
-
     <Sheet
       {...sheet.props}
       title='Teams'

src/features/bracket/bracket.ts

@@ -1,412 +0,0 @@
-// Type definitions
-interface TMatchSlot {}
-
-interface Seed extends TMatchSlot {
-  seed: number;
-}
-
-interface TBD extends TMatchSlot {
-  parent: TMatchBase;
-  loser: boolean;
-  ifNecessary?: boolean;
-}
-
-interface TMatchBase {
-  lid: number; // local id
-  round: number;
-  order?: number | null;
-}
-
-interface TMatch extends TMatchBase {
-  home: Seed | TBD;
-  away: Seed | TBD;
-  reset?: boolean;
-}
-
-interface TBye extends TMatchBase {
-  home: Seed | TBD;
-}
-
-type MatchType = TMatch | TBye;
-
-// Utility functions
-function innerOuter<T>(ls: T[]): T[] {
-  if (ls.length === 2) return ls;
-  
-  const size = Math.floor(ls.length / 4);
-  
-  const innerPart = [ls.slice(size, 2 * size), ls.slice(2 * size, 3 * size)];
-  const outerPart = [ls.slice(0, size), ls.slice(3 * size)];
-  
-  const inner = (part: T[][]): T[] => [part[0].pop()!, part[1].shift()!];
-  const outer = (part: T[][]): T[] => [part[0].shift()!, part[1].pop()!];
-  
-  const quads: T[][] = Array(Math.floor(size / 2)).fill(null).map(() => []);
-  
-  const push = (part: T[][], method: (p: T[][]) => T[], arr: T[]) => {
-    if (part[0].length && part[1].length) {
-      arr.push(...method(part));
-    }
-  };
-  
-  for (let i = 0; i < Math.floor(size / 2); i++) {
-    push(outerPart, outer, quads[i]);
-    push(innerPart, inner, quads[i]);
-    push(outerPart, inner, quads[i]);
-    push(innerPart, outer, quads[i]);
-  }
-  
-  const result: T[] = [];
-  for (let i = 0; i < quads.length; i++) {
-    const curr = i % 2 === 0 ? quads.shift()! : quads.pop()!;
-    result.push(...curr);
-  }
-  
-  return result;
-}
-
-function reverseHalfShift<T>(ls: T[]): T[] {
-  const halfLength = Math.floor(ls.length / 2);
-  return [...ls.slice(-halfLength), ...ls.slice(0, -halfLength)];
-}
-
-export class BracketGenerator {
-  private _bracket: MatchType[][] = [];
-  private _losersBracket: MatchType[][] = [];
-  private _order: number = 0;
-  private _floatingLosers: TBD[] = [];
-  private _lid: number = 0;
-  private _matches: Map<number, MatchType> = new Map();
-  
-  public n: number;
-  public doubleElim: boolean;
-  private _nearestPowerOf2: number;
-  private _m: number;
-  private _byes: number;
-  
-  constructor(n: number, doubleElim: boolean = false) {
-    if (n < 8 || n > 64) {
-      throw new Error("The number of teams must be greater than or equal to 8 and less than or equal to 64");
-    }
-    
-    this.n = n;
-    this.doubleElim = doubleElim;
-    this._nearestPowerOf2 = Math.pow(2, Math.ceil(Math.log2(n)));
-    this._m = this._nearestPowerOf2;
-    this._byes = this._m - n;
-    
-    this._generateSingleElim();
-  }
-  
-  private _makeMatch(round: number, home: Seed | TBD, away: Seed | TBD, order: number): TMatch {
-    const match: TMatch = {
-      lid: this._lid,
-      round: round,
-      home: home,
-      away: away,
-      order: order
-    };
-    this._matches.set(this._lid, match);
-    this._lid += 1;
-    return match;
-  }
-  
-  private _makeBye(round: number, home: Seed | TBD): TBye {
-    const bye: TBye = {
-      lid: this._lid,
-      round: round,
-      home: home
-    };
-    this._matches.set(this._lid, bye);
-    this._lid += 1;
-    return bye;
-  }
-  
-  private _makeTBD(parent: TMatchBase, loser: boolean = false): TBD {
-    return {
-      parent: parent,
-      loser: loser
-    };
-  }
-  
-  private _makeSeed(seed: number): Seed {
-    return { seed: seed };
-  }
-  
-  private _parseQuad(quad: MatchType[]): MatchType[] {
-    // Used to generate losers bracket by iterating over the first round of the bracket, 4 matches/byes at a time
-    
-    const pop = (): TBye => this._makeBye(0, this._floatingLosers.pop()!);
-    const popAt = (i: number) => (): TBye => this._makeBye(0, this._floatingLosers.splice(i, 1)[0]);
-    const shift = (): TBye => this._makeBye(0, this._floatingLosers.shift()!);
-    const popShift = (): TMatch => this._makeMatch(0, this._floatingLosers.pop()!, this._floatingLosers.shift()!, this._orderIncrement());
-    const pairShift = (): TMatch => this._makeMatch(0, this._floatingLosers.shift()!, this._floatingLosers.shift()!, this._orderIncrement());
-    
-    // Actions to perform based on number of byes in the winners bracket quad
-    const actions: { [key: number]: (() => MatchType)[] } = {
-      0: [pop, pairShift, pop, pairShift],
-      1: [pop, shift, pop, pairShift],
-      2: [pop, shift, pop, shift],
-      3: [popAt(-2), popShift],
-      4: [pop, pop]
-    };
-    
-    // Count the number of byes in the quad
-    const b = quad.filter(m => 'home' in m && !('away' in m)).length;
-    
-    const result = actions[b].map(action => action());
-    return result;
-  }
-  
-  private _flattenRound(round: MatchType[], roundNumber: number = 0): MatchType[] {
-    // Check if all matches are byes
-    if (round.every(m => 'home' in m && !('away' in m))) {
-      const result: MatchType[] = [];
-      for (let i = 0; i < round.length; i += 2) {
-        result.push(this._makeMatch(
-          roundNumber,
-          (round[i] as TBye).home,
-          (round[i + 1] as TBye).home,
-          this._orderIncrement()
-        ));
-      }
-      return result;
-    }
-    
-    return round;
-  }
-  
-  private _startsWithBringInRound(): boolean {
-    // Start at 8, first block of size 4 returns 0
-    let start = 8;
-    const blockSizes = [4, 5, 7, 9, 15, 17]; // Sizes of blocks
-    let result = 0; // First block returns 0
-    
-    // Loop through predefined block sizes
-    for (const blockSize of blockSizes) {
-      const end = start + blockSize - 1;
-      if (start <= this.n && this.n <= end) {
-        return result === 0;
-      }
-      start = end + 1;
-      result = 1 - result; // Alternate between 0 and 1
-    }
-    
-    return false;
-  }
-  
-  private _generateStartingRounds(): void {
-    this._floatingLosers = [];
-    
-    // Generate Pairings based on seeding
-    const seeds: (Seed | null)[] = [];
-    for (let i = 1; i <= this.n; i++) {
-      seeds.push(this._makeSeed(i));
-    }
-    for (let i = 0; i < this._byes; i++) {
-      seeds.push(null);
-    }
-    
-    const pairings: [Seed | null, Seed | null][] = [];
-    const innerOuterResult = innerOuter(seeds);
-    for (let i = 0; i < innerOuterResult.length; i += 2) {
-      pairings.push([innerOuterResult[i], innerOuterResult[i + 1]]);
-    }
-    
-    // First Round
-    let round: MatchType[] = [];
-    for (const [home, away] of pairings) {
-      if (away === null) {
-        round.push(this._makeBye(0, home!));
-      } else {
-        const match = this._makeMatch(0, home!, away, this._orderIncrement());
-        round.push(match);
-        this._floatingLosers.push(this._makeTBD(match, true));
-      }
-    }
-    
-    this._bracket = [round];
-    
-    // Second Round
-    const prev = round;
-    round = [];
-    
-    const getSlot = (m: MatchType): Seed | TBD => {
-      return 'away' in m ? this._makeTBD(m) : (m as TBye).home;
-    };
-    
-    const startOrder = this._orderIncrement();
-    const orderDelta = Math.abs(this._byes - (this._m / 4));
-    const orderSplit = [startOrder + orderDelta, startOrder];
-    
-    for (let i = 0; i < prev.length; i += 2) {
-      const home = getSlot(prev[i]);
-      const away = getSlot(prev[i + 1]);
-      
-      let order: number;
-      if ('parent' in away) {
-        order = orderSplit[0];
-        orderSplit[0] += 1;
-      } else {
-        order = orderSplit[1];
-        orderSplit[1] += 1;
-      }
-      
-      const match = this._makeMatch(1, home, away, order);
-      round.push(match);
-      this._floatingLosers.push(this._makeTBD(match, true));
-    }
-    
-    this._bracket.push(round);
-    this._order = orderSplit[0] - 1;
-    
-    // Generate losers bracket if double elim
-    if (this.doubleElim) {
-      // Round one
-      this._floatingLosers = innerOuter(this._floatingLosers);
-      this._losersBracket = [];
-      let roundOne: MatchType[] = [];
-      for (let i = 0; i < prev.length; i += 4) {
-        roundOne.push(...this._parseQuad(prev.slice(i, i + 4)));
-      }
-      this._losersBracket.push(this._flattenRound(roundOne));
-      
-      // Round two
-      const roundTwo: MatchType[] = [];
-      for (let i = 0; i < roundOne.length; i += 2) {
-        roundTwo.push(this._makeMatch(
-          1,
-          getSlot(roundOne[i]),
-          getSlot(roundOne[i + 1]),
-          this._orderIncrement()
-        ));
-      }
-      
-      this._losersBracket.push(roundTwo);
-    }
-  }
-  
-  private _orderIncrement(): number {
-    this._order += 1;
-    return this._order;
-  }
-  
-  private _generateBringInRound(roundNumber: number): void {
-    console.log('generating bring in round', roundNumber);
-    const bringIns = reverseHalfShift(this._floatingLosers);
-    this._floatingLosers = [];
-    const round: MatchType[] = [];
-    
-    const prev = this._losersBracket[this._losersBracket.length - 1];
-    for (const match of prev) {
-      const bringIn = bringIns.pop()!;
-      const newMatch = this._makeMatch(
-        roundNumber,
-        bringIn,
-        this._makeTBD(match),
-        this._orderIncrement()
-      );
-      round.push(newMatch);
-    }
-    
-    this._losersBracket.push(round);
-  }
-  
-  private _generateLosersRound(roundNumber: number): void {
-    console.log('generating losers round', roundNumber);
-    const round: MatchType[] = [];
-    const prev = this._losersBracket[this._losersBracket.length - 1];
-    
-    if (prev.length < 2) return;
-    
-    for (let i = 0; i < prev.length; i += 2) {
-      const newMatch = this._makeMatch(
-        roundNumber,
-        this._makeTBD(prev[i]),
-        this._makeTBD(prev[i + 1]),
-        this._orderIncrement()
-      );
-      round.push(newMatch);
-    }
-    
-    this._losersBracket.push(round);
-  }
-  
-  private _generateSingleElim(): void {
-    this._generateStartingRounds();
-    let prev = this._bracket[this._bracket.length - 1];
-    
-    const add = (
-      round: MatchType[],
-      prevSlot: TBD | null,
-      match: MatchType
-    ): [MatchType[], TBD | null] => {
-      if (prevSlot === null) return [round, this._makeTBD(match)];
-      const newMatch = this._makeMatch(
-        this._bracket.length,
-        prevSlot,
-        this._makeTBD(match),
-        this._orderIncrement()
-      );
-      this._floatingLosers.push(this._makeTBD(newMatch, true));
-      return [[...round, newMatch], null];
-    };
-    
-    while (prev.length > 1) {
-      let round: MatchType[] = [];
-      let prevSlot: TBD | null = null;
-      for (const match of prev) {
-        [round, prevSlot] = add(round, prevSlot, match);
-      }
-      this._bracket.push(round);
-      prev = round;
-      
-      if (this.doubleElim) {
-        const r = this._losersBracket.length;
-        if (this._startsWithBringInRound()) {
-          this._generateBringInRound(r);
-          this._generateLosersRound(r + 1);
-        } else {
-          this._generateLosersRound(r);
-          this._generateBringInRound(r + 1);
-        }
-      }
-    }
-    
-    // Grand Finals and bracket reset
-    if (this.doubleElim) {
-      const winnersFinal = this._bracket[this._bracket.length - 1][this._bracket[this._bracket.length - 1].length - 1];
-      const losersFinal = this._losersBracket[this._losersBracket.length - 1][this._losersBracket[this._losersBracket.length - 1].length - 1];
-      
-      const grandFinal = this._makeMatch(
-        this._bracket.length,
-        this._makeTBD(winnersFinal),
-        this._makeTBD(losersFinal),
-        this._orderIncrement()
-      );
-      
-      const resetMatch = this._makeMatch(
-        this._bracket.length + 1,
-        this._makeTBD(grandFinal),
-        this._makeTBD(grandFinal, true),
-        this._orderIncrement()
-      );
-      resetMatch.reset = true;
-      
-      this._bracket.push([grandFinal], [resetMatch]);
-    }
-  }
-  
-  // Public getters for accessing the brackets
-  get bracket(): MatchType[][] {
-    return this._bracket;
-  }
-  
-  get losersBracket(): MatchType[][] {
-    return this._losersBracket;
-  }
-  
-  get matches(): Map<number, MatchType> {
-    return this._matches;
-  }
-}

src/features/bracket/components/bracket-page.tsx

@@ -1,146 +0,0 @@
-import { Text, Container, Flex, ScrollArea } from "@mantine/core";
-import { SeedList } from "./seed-list";
-import BracketView from "./bracket-view";
-import { MutableRefObject, RefObject, useEffect, useRef, useState } from "react";
-import { bracketQueries } from "../queries";
-import { useQuery } from "@tanstack/react-query";
-import { useDraggable } from "react-use-draggable-scroll";
-import { ref } from "process";
-import './styles.module.css';
-import { useIsMobile } from "@/hooks/use-is-mobile";
-import useAppShellHeight from "@/hooks/use-appshell-height";
-
-interface Team {
-  id: string;
-  name: string;
-}
-
-interface BracketData {
-  n: number;
-  doubleElim: boolean;
-  matches: { [key: string]: any };
-  winnersBracket: number[][];
-  losersBracket: number[][];
-}
-
-export const PreviewBracketPage: React.FC = () => {
-  const isMobile = useIsMobile();
-  const height = useAppShellHeight();
-  const refDraggable = useRef<HTMLDivElement>(null);
-  const { events } = useDraggable(refDraggable as RefObject<HTMLDivElement>, { isMounted: !!refDraggable.current });
-
-  const teamCount = 20;
-  const { data, isLoading, error } = useQuery<BracketData>(bracketQueries.preview(teamCount));
-
-  // Create teams with proper structure
-  const [teams, setTeams] = useState<Team[]>(
-    Array.from({ length: teamCount }, (_, i) => ({
-      id: `team-${i + 1}`,
-      name: `Team ${i + 1}`
-    }))
-  );
-
-  const [seededWinnersBracket, setSeededWinnersBracket] = useState<any[][]>([]);
-  const [seededLosersBracket, setSeededLosersBracket] = useState<any[][]>([]);
-
-  useEffect(() => {
-    if (!data) return;
-
-    // Map match IDs to actual match objects with team names
-    const mapBracket = (bracketIds: number[][]) => {
-      return bracketIds.map(roundIds => 
-        roundIds.map(lid => {
-          const match = data.matches[lid];
-          if (!match) return null;
-
-          const mappedMatch = { ...match };
-
-          // Map home slot - handle both uppercase and lowercase type names
-          if (match.home?.type?.toLowerCase() === 'seed') {
-            mappedMatch.home = {
-              ...match.home,
-              team: teams[match.home.seed - 1]
-            };
-          }
-
-          // Map away slot if it exists - handle both uppercase and lowercase type names
-          if (match.away?.type?.toLowerCase() === 'seed') {
-            mappedMatch.away = {
-              ...match.away,
-              team: teams[match.away.seed - 1]
-            };
-          }
-
-          return mappedMatch;
-        }).filter(m => m !== null)
-      );
-    };
-
-    setSeededWinnersBracket(mapBracket(data.winnersBracket));
-    setSeededLosersBracket(mapBracket(data.losersBracket));
-  }, [teams, data]);
-
-  const handleSeedChange = (teamIndex: number, newSeedIndex: number) => {
-    const newTeams = [...teams];
-    const movingTeam = newTeams[teamIndex];
-    
-    // Remove the team from its current position
-    newTeams.splice(teamIndex, 1);
-    
-    // Insert it at the new position
-    newTeams.splice(newSeedIndex, 0, movingTeam);
-    
-    setTeams(newTeams);
-  };
-
-  if (isLoading) return <p>Loading...</p>;
-  if (error) return <p>Error loading bracket</p>;
-  if (!data) return <p>No data available</p>;
-
-  return (
-    <Container p={0} w="100%" style={{ userSelect: "none" }}>
-      <Flex w="100%" justify="space-between" h='3rem'>
-        <Text fw={600} size="lg" mb={16}>
-          Preview Bracket ({data.n} teams, {data.doubleElim ? 'Double' : 'Single'} Elimination)
-        </Text>
-      </Flex>
-      <Flex w="100%" gap={24}>
-        <div style={{ minWidth: 250, display: 'none' }}>
-          <Text fw={600} pb={16}>
-            Seed Teams
-          </Text>
-          <SeedList teams={teams} onSeedChange={handleSeedChange} />
-        </div>
-        <ScrollArea
-          px='xs'
-          viewportRef={refDraggable}
-          viewportProps={events}
-          h={`calc(${height} - 4rem)`}
-          className="bracket-container"
-          styles={{
-            root: { overflow: "auto", flex: 1, gap: 24, display: 'flex', flexDirection: 'column' }
-          }}
-        >
-          <div>
-            <Text fw={600} size="md" mb={16}>
-              Winners Bracket
-            </Text>
-            <BracketView 
-              bracket={seededWinnersBracket} 
-              matches={data.matches}
-            />
-          </div>
-          <div>
-            <Text fw={600} size="md" mb={16}>
-              Losers Bracket
-            </Text>
-            <BracketView 
-              bracket={seededLosersBracket} 
-              matches={data.matches}
-            />
-          </div>
-        </ScrollArea>
-      </Flex>
-    </Container>
-  );
-};

src/features/bracket/components/bracket-round.tsx

@@ -0,0 +1,48 @@
+import { Flex, Text } from '@mantine/core';
+import React from 'react';
+import { MatchCard } from './match-card';
+import { Match } from '../types';
+
+interface BracketRoundProps {
+  matches: Match[];
+  roundIndex: number;
+  getParentMatchOrder: (parentLid: number) => number | string;
+  onAnnounce?: (teamOne: any, teamTwo: any) => void;
+}
+
+export const BracketRound: React.FC<BracketRoundProps> = ({
+  matches,
+  roundIndex,
+  getParentMatchOrder,
+  onAnnounce,
+}) => {
+  const isBye = (type: string) => type?.toLowerCase() === 'bye';
+
+  return (
+    <Flex direction="column" key={roundIndex} gap={24} justify="space-around">
+      {matches.map((match, matchIndex) => {
+        if (!match) return null;
+        if (isBye(match.type)) return <></>; // for spacing
+        
+        return (
+          <Flex
+            direction="row"
+            key={matchIndex}
+            align="center"
+            justify="end"
+            gap={8}
+          >
+            <Text c="dimmed" fw="bolder">
+              {match.order}
+            </Text>
+            <MatchCard
+              match={match}
+              getParentMatchOrder={getParentMatchOrder}
+              onAnnounce={onAnnounce}
+            />
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};

src/features/bracket/components/bracket-view.tsx

@@ -1,116 +1,43 @@
-import { ActionIcon, Card, Container, Flex, Text } from '@mantine/core';
-import { PlayIcon } from '@phosphor-icons/react';
+import { Flex } from '@mantine/core';
 import React from 'react';
+import { BracketMaps } from '../utils/bracket-maps';
+import { BracketRound } from './bracket-round';
+import { Match } from '../types';
 
 interface BracketViewProps {
-  bracket: any[][];
-  matches: { [key: string]: any };
+  bracket: Match[][];
+  bracketMaps: BracketMaps;
   onAnnounce?: (teamOne: any, teamTwo: any) => void;
 }
 
-const BracketView: React.FC<BracketViewProps> = ({ bracket, matches, onAnnounce }) => {
-  // Helper to check match type (handle both uppercase and lowercase)
-  const isMatchType = (type: string, expected: string) => {
-    return type?.toLowerCase() === expected.toLowerCase();
-  };
+const BracketView: React.FC<BracketViewProps> = ({
+  bracket,
+  bracketMaps,
+  onAnnounce,
+}) => {
 
-  // Helper to check slot type (handle both uppercase and lowercase)
-  const isSlotType = (type: string, expected: string) => {
-    return type?.toLowerCase() === expected.toLowerCase();
-  };
-
-  // Helper to get parent match order number
-  const getParentMatchOrder = (parentId: number): number | string => {
-    const parentMatch = matches[parentId];
-    if (parentMatch && parentMatch.order !== null && parentMatch.order !== undefined) {
+  const getParentMatchOrder = (parentLid: number): number | string => {
+    const parentMatch = bracketMaps.matchByLid.get(parentLid);
+    if (
+      parentMatch &&
+      parentMatch.order !== null &&
+      parentMatch.order !== undefined
+    ) {
       return parentMatch.order;
     }
-    // If no order (like for byes), return the parentId with a different prefix
-    return `Match ${parentId}`;
+    return `Match ${parentLid}`;
   };
 
   return (
-    <Flex direction='row' gap={24} justify='left' pos='relative' p='xl'>
+    <Flex direction="row" gap={24} justify="left" pos="relative" p="xl">
       {bracket.map((round, roundIndex) => (
-        <Flex direction='column' key={roundIndex} gap={24} justify='space-around'>
-          {round.map((match, matchIndex) => {
-            if (!match) return null;
-
-            // Handle bye matches (no away slot) - check both 'TBye' and 'bye'
-            if (isMatchType(match.type, 'bye') || isMatchType(match.type, 'tbye')) {
-              return (
-                <Flex key={matchIndex}>
-                </Flex>
-              );
-            }
-
-            // Regular matches with both home and away
-            return (
-              <Flex direction='row' key={matchIndex} align='center' justify='end' gap={8}>
-                <Text c='dimmed' fw='bolder'>{match.order}</Text>
-                <Card withBorder pos='relative' w={200} style={{ overflow: 'visible' }}>
-                  <Card.Section withBorder p={4}>
-                    {isSlotType(match.home?.type, 'seed') && (
-                      <>
-                        <Text c='dimmed' size='xs'>Seed {match.home.seed}</Text>
-                        {match.home.team && <Text size='xs'>{match.home.team.name}</Text>}
-                      </>
-                    )}
-                    {isSlotType(match.home?.type, 'tbd') && (
-                      <Text c='dimmed' size='xs'>
-                        {match.home.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.home.parentId || match.home.parent)}
-                      </Text>
-                    )}
-                    {!match.home && <Text c='dimmed' size='xs' fs='italic'>TBD</Text>}
-                  </Card.Section>
-                  <Card.Section p={4} mb={-16}>
-                    {isSlotType(match.away?.type, 'seed') && (
-                      <>
-                        <Text c='dimmed' size='xs'>Seed {match.away.seed}</Text>
-                        {match.away.team && <Text size='xs'>{match.away.team.name}</Text>}
-                      </>
-                    )}
-                    {isSlotType(match.away?.type, 'tbd') && (
-                      <Text c='dimmed' size='xs'>
-                        {match.away.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.away.parentId || match.away.parent)}
-                      </Text>
-                    )}
-                    {!match.away && <Text c='dimmed' size='xs' fs='italic'>TBD</Text>}
-                  </Card.Section>
-                  {match.reset && (
-                    <Text 
-                      pos='absolute' 
-                      top={-8} 
-                      left={8} 
-                      size='xs' 
-                      c='orange' 
-                      fw='bold'
-                    >
-                      IF NECESSARY
-                    </Text>
-                  )}
-                  {onAnnounce && match.home?.team && match.away?.team && (
-                    <ActionIcon
-                      pos='absolute'
-                      variant='filled'
-                      color='green'
-                      top={-20}
-                      right={-12}
-                      onClick={() => {
-                        onAnnounce(match.home.team, match.away.team);
-                      }}
-                      bd='none'
-                      style={{ boxShadow: 'none' }}
-                      size='xs'
-                    >
-                      <PlayIcon size={12} />
-                    </ActionIcon>
-                  )}
-                </Card>
-              </Flex>
-            );
-          })}
-        </Flex>
+        <BracketRound
+          key={roundIndex}
+          matches={round}
+          roundIndex={roundIndex}
+          getParentMatchOrder={getParentMatchOrder}
+          onAnnounce={onAnnounce}
+        />
       ))}
     </Flex>
   );

src/features/bracket/components/bracket.tsx

@@ -0,0 +1,46 @@
+import { ScrollArea, Text } from "@mantine/core";
+import BracketView from "./bracket-view";
+import { Match } from "../types";
+import useAppShellHeight from "@/hooks/use-appshell-height";
+import { BracketMaps } from "../utils/bracket-maps";
+
+interface BracketProps {
+  winners: Match[][],
+  losers?: Match[][],
+  bracketMaps: BracketMaps | null
+}
+
+const Bracket: React.FC<BracketProps> = ({ winners, losers, bracketMaps }) => {
+  const height = useAppShellHeight();
+
+  if (!bracketMaps) return <p>Bracket not available.</p>
+
+  return (
+    <ScrollArea
+      h={`calc(${height} - 4rem)`}
+      className="bracket-container"
+      style={{
+        backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
+        backgroundSize: "16px 16px",
+        backgroundPosition: "0 0, 8px 8px",
+      }}
+    >
+      <div>
+        <Text fw={600} size="md" m={16}>
+          Winners Bracket
+        </Text>
+        <BracketView bracket={winners} bracketMaps={bracketMaps} />
+      </div>
+      {
+        losers && <div>
+          <Text fw={600} size="md" m={16}>
+            Losers Bracket
+          </Text>
+          <BracketView bracket={losers} bracketMaps={bracketMaps} />
+        </div>
+      }
+    </ScrollArea>
+  );
+};
+
+export default Bracket;

src/features/bracket/components/match-card.tsx

@@ -0,0 +1,66 @@
+import { ActionIcon, Card, Text } from '@mantine/core';
+import { PlayIcon } from '@phosphor-icons/react';
+import React from 'react';
+import { MatchSlot } from './match-slot';
+import { Match } from '../types';
+
+interface MatchCardProps {
+  match: Match;
+  getParentMatchOrder: (parentLid: number) => number | string;
+  onAnnounce?: (teamOne: any, teamTwo: any) => void;
+}
+
+export const MatchCard: React.FC<MatchCardProps> = ({ 
+  match, 
+  getParentMatchOrder, 
+  onAnnounce 
+}) => {
+  return (
+    <Card
+      withBorder
+      pos="relative"
+      w={200}
+      style={{ overflow: 'visible' }}
+      data-match-lid={match.lid}
+    >
+      <Card.Section withBorder p={0}>
+        <MatchSlot slot={match.home} getParentMatchOrder={getParentMatchOrder} />
+      </Card.Section>
+      
+      <Card.Section p={0} mb={-16}>
+        <MatchSlot slot={match.away} getParentMatchOrder={getParentMatchOrder} />
+      </Card.Section>
+      
+      {match.reset && (
+        <Text
+          pos="absolute"
+          top={-20}
+          left={8}
+          size="xs"
+          c="dimmed"
+          fw="bold"
+        >
+          * If necessary
+        </Text>
+      )}
+      
+      {onAnnounce && match.home?.team && match.away?.team && (
+        <ActionIcon
+          pos="absolute"
+          variant="filled"
+          color="green"
+          top={-20}
+          right={-12}
+          onClick={() => {
+            onAnnounce(match.home.team, match.away.team);
+          }}
+          bd="none"
+          style={{ boxShadow: 'none' }}
+          size="xs"
+        >
+          <PlayIcon size={12} />
+        </ActionIcon>
+      )}
+    </Card>
+  );
+};

src/features/bracket/components/match-slot.tsx

@@ -0,0 +1,43 @@
+import { Flex, Text } from '@mantine/core';
+import React from 'react';
+import { SeedBadge } from './seed-badge';
+
+interface MatchSlotProps {
+  slot: any;
+  getParentMatchOrder: (parentLid: number) => number | string;
+}
+
+export const MatchSlot: React.FC<MatchSlotProps> = ({ slot, getParentMatchOrder }) => {
+  const renderSlotContent = () => {
+    if (slot?.seed) {
+      return slot.team ? (
+        <Text size='xs'>{slot.team.name}</Text>
+      ) : (
+        <Text size='xs' c='dimmed'>Team {slot.seed}</Text>
+      );
+    }
+    
+    if (slot?.parent_lid !== null && slot?.parent_lid !== undefined) {
+      return (
+        <Text c='dimmed' size='xs'>
+          {slot.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(slot.parent_lid)}
+        </Text>
+      );
+    }
+    
+    if (slot) {
+      return <Text c='dimmed' size='xs' fs='italic'>TBD</Text>;
+    }
+    
+    return null;
+  };
+
+  return (
+    <Flex align="stretch">
+      {slot?.seed && <SeedBadge seed={slot.seed} />}
+      <div style={{ flex: 1, padding: '4px 8px' }}>
+        {renderSlotContent()}
+      </div>
+    </Flex>
+  );
+};

src/features/bracket/components/preview.tsx

@@ -0,0 +1,119 @@
+import {
+  Text,
+  Container,
+  Flex,
+  NumberInput,
+  Group,
+  Loader,
+} from "@mantine/core";
+import { useEffect, useState } from "react";
+import { bracketQueries } from "../queries";
+import { useQuery } from "@tanstack/react-query";
+import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
+import { BracketData, Match, Team } from "../types";
+import Bracket from "./bracket";
+import "./styles.module.css";
+
+export const PreviewBracket: React.FC = () => {
+  const [teamCount, setTeamCount] = useState(20);
+  const { data, isLoading, error } = useQuery<BracketData>(
+    bracketQueries.preview(teamCount)
+  );
+
+  const [teams, setTeams] = useState<Team[]>([]);
+
+  useEffect(() => {
+    setTeams(
+      Array.from({ length: teamCount }, (_, i) => ({
+        id: `team-${i + 1}`,
+        name: `Team ${i + 1}`,
+      }))
+    );
+  }, [teamCount]);
+
+  const [seededWinnersBracket, setSeededWinnersBracket] = useState<Match[][]>(
+    []
+  );
+  const [seededLosersBracket, setSeededLosersBracket] = useState<Match[][]>([]);
+  const [bracketMaps, setBracketMaps] = useState<BracketMaps | null>(null);
+
+  useEffect(() => {
+    if (!data || teams.length === 0) return;
+
+    const maps = createBracketMaps(data);
+    setBracketMaps(maps);
+
+    const mapBracket = (bracket: Match[][]) => {
+      return bracket.map((round) =>
+        round.map((match) => {
+          const mappedMatch = { ...match };
+
+          if (match.home?.seed && match.home.seed > 0) {
+            const teamIndex = match.home.seed - 1;
+            if (teams[teamIndex]) {
+              mappedMatch.home = {
+                ...match.home,
+                team: teams[teamIndex],
+              };
+            }
+          }
+
+          if (match.away?.seed && match.away.seed > 0) {
+            const teamIndex = match.away.seed - 1;
+            if (teams[teamIndex]) {
+              mappedMatch.away = {
+                ...match.away,
+                team: teams[teamIndex],
+              };
+            }
+          }
+
+          return mappedMatch;
+        })
+      );
+    };
+
+    setSeededWinnersBracket(mapBracket(data.winners));
+    setSeededLosersBracket(mapBracket(data.losers));
+  }, [teams, data]);
+
+  if (error) return <p>Error loading bracket</p>;
+
+  return (
+    <Container p={0} w="100%" style={{ userSelect: "none" }}>
+      <Flex w="100%" justify="space-between" align="center" h="3rem">
+        <Text fw={600} size="lg">
+          Preview Bracket (Double Elimination)
+        </Text>
+        <Group gap="sm">
+          <Text size="sm" c="dimmed">
+            Teams:
+          </Text>
+          <NumberInput
+            value={teamCount}
+            onChange={(value) => setTeamCount(Number(value) || 12)}
+            min={12}
+            max={20}
+            size="sm"
+            w={80}
+            allowDecimal={false}
+            clampBehavior="strict"
+          />
+        </Group>
+      </Flex>
+      <Flex w="100%" gap={24}>
+        {isLoading ? (
+          <Flex justify="center" align="center" h="20vh" w="100%">
+            <Loader size="xl" />
+          </Flex>
+        ) : (
+          <Bracket
+            winners={seededWinnersBracket}
+            losers={seededLosersBracket}
+            bracketMaps={bracketMaps}
+          />
+        )}
+      </Flex>
+    </Container>
+  );
+};

src/features/bracket/components/seed-badge.tsx

@@ -0,0 +1,29 @@
+import { Text } from '@mantine/core';
+import React from 'react';
+
+interface SeedBadgeProps {
+  seed: number;
+}
+
+export const SeedBadge: React.FC<SeedBadgeProps> = ({ seed }) => {
+  return (
+    <Text
+      size="xs"
+      fw="bold"
+      py="4"
+      bg="var(--mantine-color-default-hover)"
+      style={{
+        width: '32px',
+        textAlign: 'center',
+        color: 'var(--mantine-color-text)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderTopLeftRadius: 'var(--mantine-radius-default)',
+        borderBottomLeftRadius: 'var(--mantine-radius-default)',
+      }}
+    >
+      {seed}
+    </Text>
+  );
+};

src/features/bracket/components/seed-list.tsx

@@ -1,5 +1,4 @@
 import { Flex, Text, Select, Card } from '@mantine/core';
-import React from 'react';
 
 interface Team {
   id: string;

src/features/bracket/components/styles.module.css

@@ -1,33 +1,7 @@
-/* Hide scrollbars but keep functionality */
 .bracket-container::-webkit-scrollbar {
     display: none;
 }
 
-.bracket-container {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
-
-/* Cursor states for draggable area */
-.bracket-container:active {
-    cursor: grabbing;
-}
-
-/* Smooth scrolling on mobile */
-.bracket-container {
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-}
-
-/* Prevent text selection while dragging */
-.bracket-container * {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-/* Optional: Add subtle shadows for depth on desktop */
 @media (min-width: 768px) {
     .bracket-container {
         box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);

src/features/bracket/queries.ts

@@ -2,7 +2,7 @@ import { queryOptions } from "@tanstack/react-query";
 import { previewBracket } from "./server";
 
 const bracketKeys = {
-  preview: (teams: number) => ['bracket-preview', teams] as const,
+  preview: (teams: number) => ['bracket', 'preview', teams] as const,
 };
 
 export const bracketQueries = {

src/features/bracket/server.ts

@@ -6,17 +6,6 @@ import brackets from './utils';
 
 const logger = new Logger("Bracket Generation")
 
-// Transform the imported JSON to match the expected format
-function transformBracketData(bracketData: any) {
-  return {
-    n: bracketData.config.teams,
-    doubleElim: bracketData.config.doubleElimination,
-    matches: bracketData.matches,
-    winnersBracket: bracketData.structure.winners,
-    losersBracket: bracketData.structure.losers
-  };
-}
-
 export const previewBracket = createServerFn()
   .validator(z.number())
   .middleware([superTokensFunctionMiddleware])
@@ -24,7 +13,5 @@ export const previewBracket = createServerFn()
     logger.info('Generating bracket', teams);
     if (!Object.keys(brackets).includes(teams.toString()))
       throw Error("Bracket not available")
-    
-    // Transform the imported data to match expected format
-    return transformBracketData(brackets[teams]);
+      return brackets[teams];
   });

src/features/bracket/types.ts

@@ -0,0 +1,19 @@
+export interface Team {
+  id: string;
+  name: string;
+}
+
+export interface Match {
+  lid: number;
+  round: number;
+  order: number | null;
+  type: string;
+  home: any;
+  away?: any;
+  reset?: boolean;
+}
+
+export interface BracketData {
+  winners: Match[][];
+  losers: Match[][];
+}

src/features/bracket/utils/bracket-maps.ts

@@ -0,0 +1,39 @@
+import { BracketData, Match } from "../types";
+
+export interface BracketMaps {
+  matchByLid: Map<number, Match>;
+  matchByOrder: Map<number, Match>;
+  allMatches: Match[];
+}
+
+export function createBracketMaps(bracketData: BracketData): BracketMaps {
+  const matchByLid = new Map<number, Match>();
+  const matchByOrder = new Map<number, Match>();
+  const allMatches: Match[] = [];
+
+  [...bracketData.winners, ...bracketData.losers].forEach(round => {
+    round.forEach(match => {
+      matchByLid.set(match.lid, match);
+      
+      if (match.order !== null && match.order !== undefined) {
+        matchByOrder.set(match.order, match);
+      }
+      
+      allMatches.push(match);
+    });
+  });
+
+  return {
+    matchByLid,
+    matchByOrder,
+    allMatches
+  };
+}
+
+export function getMatchByLid(maps: BracketMaps, lid: number): Match | undefined {
+  return maps.matchByLid.get(lid);
+}
+
+export function getMatchByOrder(maps: BracketMaps, order: number): Match | undefined {
+  return maps.matchByOrder.get(order);
+}

src/features/core/components/animated-outlet.tsx

@@ -1,31 +0,0 @@
-import { Outlet, useRouter } from '@tanstack/react-router';
-import { AnimatePresence, motion } from 'framer-motion';
-
-const AnimatedOutlet = () => {
-  const router = useRouter();
-  
-  return (
-    <AnimatePresence mode="wait">
-      <motion.div
-        key={router.state.location.pathname}
-        initial={{ x: '100%', opacity: 0 }}
-        animate={{ x: 0, opacity: 1 }}
-        exit={{ x: '-100%', opacity: 0 }}
-        transition={{
-          type: 'tween',
-          duration: 0.3,
-          ease: 'easeInOut'
-        }}
-        style={{
-          position: 'absolute',
-          width: '100%',
-          height: '100%'
-        }}
-      >
-        <Outlet />
-      </motion.div>
-    </AnimatePresence>
-  );
-}
-
-export default AnimatedOutlet;

src/features/core/components/header.tsx

@@ -2,17 +2,19 @@ import { Title, AppShell, Flex } from "@mantine/core";
 import { HeaderConfig } from "../types/header-config";
 import BackButton from "./back-button";
 import { useMemo } from "react";
+import SettingsButton from "./settings-button";
 interface HeaderProps extends HeaderConfig {
   scrollPosition: { x: number, y: number };
 }
 
-const Header = ({ withBackButton, collapsed, title, scrollPosition }: HeaderProps) => {
+const Header = ({ withBackButton, settingsLink, collapsed, title, scrollPosition }: HeaderProps) => {
   const offsetY = useMemo(() => {
     return collapsed ? scrollPosition.y : 0;
   }, [collapsed, scrollPosition.y]);
 
   return (
     <>
+      {settingsLink && <SettingsButton to={settingsLink} offsetY={offsetY} />}
       {withBackButton && <BackButton offsetY={offsetY} />}
       <AppShell.Header id='app-header' display={collapsed ? 'none' : 'block'}>
         <Flex justify='center' align='center' h='100%' px='md'>

src/features/core/components/navbar.tsx

@@ -10,8 +10,6 @@ const Navbar = () => {
   const isMobile = useIsMobile();
   const links = useLinks(user?.id, roles);
 
-  console.log('rendered')
-
   if (isMobile) return (
     <Paper component='nav' role='navigation' withBorder radius='lg' h='4rem' w='calc(100% - 2rem)' shadow='sm' pos='fixed' m='1rem' bottom='0' style={{ zIndex: 10 }}>
       <Group gap='xs' justify='space-around' h='100%' w='100%' px={{ base: 12, sm: 0 }}>

src/features/core/components/pullable.tsx

@@ -14,7 +14,7 @@ interface PullableProps extends PropsWithChildren {
 
 /**
  * Pullable is a component that allows the user to pull down to refresh the page
- * TODO: Need to figure out why it isn't disabled when onRefresh is undefined
+ * TODO: Need to make the router config nicer
  */
 const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollPositionChange }) => {
   const height = useAppShellHeight();

src/features/core/components/settings-button.tsx

@@ -0,0 +1,26 @@
+import { Box } from "@mantine/core"
+import { GearIcon } from "@phosphor-icons/react"
+import { useNavigate } from "@tanstack/react-router"
+
+interface SettingButtonProps {
+  offsetY: number;
+  to: string;
+}
+
+const SettingsButton = ({ offsetY, to }: SettingButtonProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <Box
+      style={{ cursor: 'pointer', zIndex: 1000, transform: `translateY(-${offsetY}px)` }}
+      onClick={() => navigate({ to })}
+      pos='absolute'
+      right={{ base: 0, sm: 100, md: 200, lg: 300 }}
+      m={20}
+    >
+      <GearIcon weight='bold' size={20} />
+    </Box>
+  );
+}
+
+export default SettingsButton;

src/features/core/types/header-config.ts

@@ -2,6 +2,7 @@ interface HeaderConfig {
   title?: string;
   withBackButton?: boolean;
   collapsed?: boolean;
+  settingsLink?: string;
 }
 
 export type { HeaderConfig };

src/features/players/server.ts

@@ -1,27 +1,29 @@
-import { fetchSuperTokensAuth, setUserMetadata, superTokensFunctionMiddleware, superTokensRoleFunctionMiddleware } from "@/utils/supertokens";
+import { setUserMetadata, superTokensFunctionMiddleware } from "@/utils/supertokens";
 import { createServerFn } from "@tanstack/react-start";
 import { playerInputSchema, playerUpdateSchema } from "@/features/players/types";
 import { pbAdmin } from "@/lib/pocketbase/client";
 import { z } from "zod";
 import { logger } from ".";
 
-export const fetchMe = createServerFn().handler(async () => {
-  const data = await fetchSuperTokensAuth();
-  if (!data || !data.userAuthId) return { user: undefined, roles: [], metadata: {} };
+export const fetchMe = createServerFn()
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async ({ context }) => {
+    if (!context || !context.userAuthId) return { user: undefined, roles: [], metadata: {} };
 
-  try {
-    const result = await pbAdmin.getPlayerByAuthId(data.userAuthId);
-    logger.info('Fetched player', result);
-    return {
-      user: result || undefined, 
-      roles: data.roles, 
-      metadata: data.metadata 
-    };
-  } catch (error) {
-    logger.error('Error fetching player:', error);
-    return { user: undefined, roles: data.roles, metadata: data.metadata };
-  }
-});
+    try {
+      await pbAdmin.authPromise;
+      const result = await pbAdmin.getPlayerByAuthId(context.userAuthId);
+      logger.info('Fetched player', result);
+      return {
+        user: result || undefined, 
+        roles: context.roles, 
+        metadata: context.metadata 
+      };
+    } catch (error) {
+      logger.error('Error fetching player:', error);
+      return { user: undefined, roles: context.roles, metadata: context.metadata };
+    }
+  });
 
 export const getPlayer = createServerFn()
   .validator(z.string())

src/features/teams/queries.ts

@@ -2,7 +2,7 @@ import { queryOptions } from "@tanstack/react-query";
 import { getTeam } from "./server";
 
 const teamKeys = {
-  details: (id: string) => ['teams', id] as const,
+  details: (id: string) => ['teams', 'details', id] as const,
 };
 
 export const teamQueries = {

src/features/tournaments/components/tournament-card.tsx

@@ -10,12 +10,17 @@ interface TournamentCardProps {
 
 export const TournamentCard = ({ tournament }: TournamentCardProps) => {
   const navigate = useNavigate({ from: '/tournaments/$tournamentId' })
-  const date = useMemo(() => new Date(tournament.start_time), [tournament?.start_time])
-  const year = useMemo(() => date.getFullYear(), [date])
-  const month = useMemo(() => date.getMonth(), [date])
-  const monthName = useMemo(() => new Date(date.getFullYear(), month, 1).toLocaleString('default', { month: 'long' }), [date])
-  const day = useMemo(() => date.getDate(), [date])
-  
+  const displayDate = useMemo(() => {
+    if (!tournament.start_time) return null
+    const date = new Date(tournament.start_time)
+    if (isNaN(date.getTime())) return null
+    return date.toLocaleDateString('en-US', { 
+      year: 'numeric', 
+      month: 'long', 
+      day: 'numeric' 
+    })
+  }, [tournament.start_time])
+
   return (
     <Card shadow="sm" padding="lg" radius="md" withBorder style={{ cursor: 'pointer' }} onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}>
       <Stack>
@@ -29,7 +34,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
             />
             <Stack ta='center' mx='auto' gap='0'>
               <Text size='lg' fw={800}>{tournament.name} <CaretRightIcon size={12} weight='bold' /></Text>
-              <Text c='dimmed' size='xs' fw={600}>{monthName} {day}, {year}</Text>
+              {displayDate && <Text c='dimmed' size='xs' fw={600}>{displayDate}</Text>}
               <Stack gap={4} mt={4}>
                 { /* TODO: Add medalists when data is available */}
                 <Badge variant='dot' color='gold'>Longer Team Name Goes Here</Badge>

src/features/tournaments/hooks/use-enroll-team.ts

@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { enrollTeam } from "@/features/tournaments/server";
+import toast from '@/lib/sonner';
+
+const useEnrollTeam = () => {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: (data: { tournamentId: string, teamId: string }) => {
+      return enrollTeam({ data });
+    },
+    onSuccess: (data, { tournamentId }) => {
+      if (!data) {
+        toast.error('There was an issue enrolling. Please try again later.');
+      } else {
+        queryClient.invalidateQueries({ queryKey: ['tournaments', 'detail', tournamentId] });
+        toast.success('Team enrolled successfully!');
+      }
+    },
+    onError: (error: any) => {
+      if (error.message) {
+        toast.error(error.message);
+      } else {
+        toast.error('An unexpected error occurred when trying to enroll the team. Please try again later.');
+      }
+    },
+  });
+};
+
+export default useEnrollTeam;

src/features/tournaments/hooks/use-unenroll-team.ts

@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { unenrollTeam } from "@/features/tournaments/server";
+import toast from '@/lib/sonner';
+
+const useUnenrollTeam = () => {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: (data: { tournamentId: string, teamId: string }) => {
+      return unenrollTeam({ data });
+    },
+    onSuccess: (data, { tournamentId }) => {
+      if (!data) {
+        toast.error('There was an issue unenrolling. Please try again later.');
+      } else {
+        queryClient.invalidateQueries({ queryKey: ['tournaments', 'detail', tournamentId] });
+        toast.success('Team unenrolled successfully.');
+      }
+    },
+    onError: (error: any) => {
+      if (error.message) {
+        toast.error(error.message);
+      } else {
+        toast.error('An unexpected error occurred when trying to unenroll the team. Please try again later.');
+      }
+    },
+  });
+};
+
+export default useUnenrollTeam;

src/features/tournaments/queries.ts

@@ -2,8 +2,8 @@ import { queryOptions, useQuery } from "@tanstack/react-query";
 import { getTournament, listTournaments } from "./server";
 
 const tournamentKeys = {
-  list: ['tournaments'] as const,
-  details: (id: string) => [...tournamentKeys.list, id] as const,
+  list: ['tournaments', 'list'] as const,
+  details: (id: string) => ['tournaments', 'details', id] as const
 };
 
 export const tournamentQueries = {

src/features/tournaments/server.ts

@@ -41,3 +41,49 @@ export const getTournament = createServerFn()
     const tournament = await pbAdmin.getTournament(tournamentId);
     return tournament;
   });
+
+export const enrollTeam = createServerFn()
+  .validator(z.object({
+    tournamentId: z.string(),
+    teamId: z.string()
+  }))
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async ({ data: { tournamentId, teamId }, context }) => {
+    try {
+      const userId = context.userAuthId;
+      const isAdmin = context.roles.includes("Admin"); 
+
+      const team = await pbAdmin.getTeam(teamId);
+      if (!team) { throw new Error('Team not found'); }
+
+      const isPlayerOnTeam = team.players?.some(player => player.id === userId);
+
+      if (!isPlayerOnTeam && !isAdmin) {
+        throw new Error('You do not have permission to enroll this team');
+      }
+
+      logger.info('Enrolling team in tournament', { tournamentId, teamId, userId });
+      const tournament = await pbAdmin.enrollTeam(tournamentId, teamId);
+      return tournament;
+    } catch (error) {
+      logger.error('Error enrolling team', error);
+      throw error;
+    }
+  });
+
+export const unenrollTeam = createServerFn()
+  .validator(z.object({
+    tournamentId: z.string(),
+    teamId: z.string()
+  }))
+  .middleware([superTokensAdminFunctionMiddleware])
+  .handler(async ({ data: { tournamentId, teamId }, context }) => {
+    try {
+      logger.info('Enrolling team in tournament', { tournamentId, teamId, context });
+      const tournament = await pbAdmin.unenrollTeam(tournamentId, teamId);
+      return tournament;
+    } catch (error) {
+      logger.error('Error enrolling team', error);
+      throw error;
+    }
+  });

src/hooks/use-haptic.ts

@@ -1,61 +0,0 @@
-// Sneaky way of triggering haptic feedback, without using the vibration API (not available on iOS)
-// Source: https://github.com/posaune0423/use-haptic
-
-import { useCallback, useEffect, useMemo, useRef } from "react";
-
-const detectiOS = (): boolean => {
-  if (typeof navigator === "undefined") {
-    return false;
-  }
-
-  const toMatch = [/iPhone/i, /iPad/i, /iPod/i];
-
-  return toMatch.some((toMatchItem) => {
-    return RegExp(toMatchItem).exec(navigator.userAgent);
-  });
-};
-
-const useHaptic = (
-  duration = 200,
-): { triggerHaptic: () => void } => {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const labelRef = useRef<HTMLLabelElement | null>(null);
-  const isIOS = useMemo(() => detectiOS(), []);
-
-  useEffect(() => {
-    const input = document.createElement("input");
-    input.type = "checkbox";
-    input.id = "haptic-switch";
-    input.setAttribute("switch", "");
-    input.style.display = "none";
-    document.body.appendChild(input);
-    inputRef.current = input;
-
-    const label = document.createElement("label");
-    label.htmlFor = "haptic-switch";
-    label.style.display = "none";
-    document.body.appendChild(label);
-    labelRef.current = label;
-
-    return () => {
-      document.body.removeChild(input);
-      document.body.removeChild(label);
-    };
-  }, []);
-
-  const triggerHaptic = useCallback(() => {
-    if (isIOS) {
-      labelRef.current?.click();
-    } else {
-      if (navigator?.vibrate) {
-        navigator.vibrate(duration);
-      } else {
-        labelRef.current?.click();
-      }
-    }
-  }, [isIOS]);
-
-  return { triggerHaptic };
-};
-
-export default useHaptic;

src/lib/pocketbase/client.ts

@@ -5,7 +5,7 @@ import { createTeamsService } from './services/teams';
 
 class PocketBaseAdminClient {
   private pb: PocketBase;
-  private authPromise: Promise<void>;
+  public authPromise: Promise<void>;
 
   constructor() {
     this.pb = new PocketBase(import.meta.env.VITE_POCKETBASE_URL);
@@ -44,6 +44,8 @@ interface AdminClient extends
   PocketBaseAdminClient,
   ReturnType<typeof createPlayersService>,
   ReturnType<typeof createTeamsService>,
-  ReturnType<typeof createTournamentsService> {}
+  ReturnType<typeof createTournamentsService> {
+  authPromise: Promise<void>;
+}
 
 export const pbAdmin = new PocketBaseAdminClient() as AdminClient;

src/lib/pocketbase/services/tournaments.ts

@@ -1,35 +1,19 @@
 import { logger } from "@/lib/logger";
-import type { Tournament, TournamentInput, TournamentUpdateInput } from "@/features/tournaments/types";
+import type {
+  Tournament,
+  TournamentInput,
+  TournamentUpdateInput,
+} from "@/features/tournaments/types";
 import PocketBase from "pocketbase";
 import { transformTournament } from "@/lib/pocketbase/util/transform-types";
-import { BracketGenerator } from "@/features/bracket/bracket";
 
 export function createTournamentsService(pb: PocketBase) {
   return {
     async getTournament(id: string): Promise<Tournament | null> {
       try {
-        const generator = new BracketGenerator(12, true);
-        
-        console.log("=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-")
-        console.log('Winners Bracket:');
-        generator.bracket.forEach((round, i) => {
-          console.log(`Round ${i}:`);
-          round.forEach(match => {
-            console.log('-', match);
-          });
-        });
-
-        console.log('\nLosers Bracket:');
-        generator.losersBracket.forEach((round, i) => {
-          console.log(`Round ${i}:`);
-          round.forEach(match => {
-            console.log('-', match);
-          });
-        });
-
-        logger.info('PocketBase | Getting tournament', id);
-        const result = await pb.collection('tournaments').getOne(id, {
-          expand: 'teams, teams.players'
+        logger.info("PocketBase | Getting tournament", id);
+        const result = await pb.collection("tournaments").getOne(id, {
+          expand: "teams, teams.players",
         });
         return transformTournament(result);
       } catch {
@@ -37,20 +21,51 @@ export function createTournamentsService(pb: PocketBase) {
       }
     },
     async listTournaments(): Promise<Tournament[]> {
-      const result = await pb.collection('tournaments').getFullList<Tournament>({
-        fields: 'id,name,start_time,end_time,logo_url,created',
-        sort: '-created'
-      });
+      const result = await pb
+        .collection("tournaments")
+        .getFullList<Tournament>({
+          fields: "id,name,start_time,end_time,logo_url,created",
+          sort: "-created",
+        });
 
-      console.log(result)
+      console.log(result);
       return result.map(transformTournament);
     },
     async createTournament(data: TournamentInput): Promise<Tournament> {
-      const result = await pb.collection('tournaments').create<Tournament>(data);
+      const result = await pb
+        .collection("tournaments")
+        .create<Tournament>(data);
       return transformTournament(result);
     },
-    async updateTournament(id: string, data: TournamentUpdateInput): Promise<Tournament> {
-      const result = await pb.collection('tournaments').update<Tournament>(id, data);
+    async updateTournament(
+      id: string,
+      data: TournamentUpdateInput
+    ): Promise<Tournament> {
+      const result = await pb
+        .collection("tournaments")
+        .update<Tournament>(id, data);
+      return transformTournament(result);
+    },
+    async enrollTeam(
+      tournamentId: string,
+      teamId: string
+    ): Promise<Tournament> {
+      const result = await pb.collection("tournaments").update<Tournament>(
+        tournamentId,
+        { "teams+": teamId },
+        { expand: "teams, teams.players" }
+      );
+      return transformTournament(result);
+    },
+    async unenrollTeam(
+      tournamentId: string,
+      teamId: string
+    ): Promise<Tournament> {
+      const result = await pb.collection("tournaments").update<Tournament>(
+        tournamentId,
+        { "teams-": teamId },
+        { expand: "teams, teams.players" }
+      );
       return transformTournament(result);
     },
   };

src/lib/pocketbase/util/transform-types.ts

@@ -7,9 +7,12 @@ import { Tournament } from "@/features/tournaments/types";
 
 export function transformPlayer(record: any): Player {
   const sadf: string[] = [];
-  const teams = record.expand?.teams
-    ?.sort((a: Team, b: Team) => new Date(a.created) < new Date(b.created) ? -1 : 0)
-    ?.map(transformTeam) ?? [];
+  const teams =
+    record.expand?.teams
+      ?.sort((a: Team, b: Team) =>
+        new Date(a.created) < new Date(b.created) ? -1 : 0
+      )
+      ?.map(transformTeam) ?? [];
 
   return {
     id: record.id!,
@@ -23,9 +26,12 @@ export function transformPlayer(record: any): Player {
 }
 
 export function transformTeam(record: any): Team {
-  const players = record.expand?.players
-  ?.sort((a: Player, b: Player) => new Date(a.created!) < new Date(b.created!) ? -1 : 0)
-  ?.map(transformPlayer) ?? [];
+  const players =
+    record.expand?.players
+      ?.sort((a: Player, b: Player) =>
+        new Date(a.created!) < new Date(b.created!) ? -1 : 0
+      )
+      ?.map(transformPlayer) ?? [];
 
   return {
     id: record.id,
@@ -48,9 +54,12 @@ export function transformTeam(record: any): Team {
 }
 
 export function transformTournament(record: any): Tournament {
-  const teams = record.expand?.teams
-  ?.sort((a: Team, b: Team) => new Date(a.created) < new Date(b.created) ? -1 : 0)
-  ?.map(transformTeam) ?? [];
+  const teams =
+    record.expand?.teams
+      ?.sort((a: Team, b: Team) =>
+        new Date(a.created) < new Date(b.created) ? -1 : 0
+      )
+      ?.map(transformTeam) ?? [];
 
   return {
     id: record.id,

src/utils/supertokens.ts

@@ -1,4 +1,4 @@
-import { createMiddleware, createServerFn } from "@tanstack/react-start";
+import { createMiddleware, createServerFn, ServerFnResponseType } from "@tanstack/react-start";
 import { getWebRequest } from "@tanstack/react-start/server";
 import { getSessionForSSR } from "supertokens-node/custom";
 import UserRoles from "supertokens-node/recipe/userroles";
@@ -6,17 +6,18 @@ import UserMetadata from "supertokens-node/recipe/usermetadata";
 import { getSessionForStart } from "@/lib/supertokens/recipes/start-session";
 import { Logger } from "@/lib/logger";
 import z from "zod";
+import { refreshSession } from "supertokens-node/recipe/session";
 
 const logger = new Logger('Middleware');
 
-const verifySuperTokensSession = async (request: Request) => {    
+const verifySuperTokensSession = async (request: Request, response?: ServerFnResponseType) => {    
     const session = await getSessionForStart(request, { sessionRequired: false });
     
-    if (session?.needsRefresh) {
-      logger.info("Session needs refresh");
+    if (session?.needsRefresh && response) {
+      logger.info("Session refreshing...");
+      refreshSession(request, response);
       return { context: { needsRefresh: true } };
     }
-    
     const userAuthId = session?.userId;
     
     if (!userAuthId) {
@@ -34,7 +35,7 @@ const verifySuperTokensSession = async (request: Request) => {
         metadata,
         session: {
           accessTokenPayload: session.accessTokenPayload,
-          sessionHandle: session.sessionHandle
+          sessionHandle: session.sessionHandle,
         }
       } 
     };
@@ -42,35 +43,61 @@ const verifySuperTokensSession = async (request: Request) => {
 
 export const superTokensRequestMiddleware = createMiddleware({ type: 'request' })
   .server(async ({ next, request }) => {    
-    const context = await verifySuperTokensSession(request);
-    return next(context as any);
+    const session = await verifySuperTokensSession(request);
+
+    if (!session.context.userAuthId) {
+      logger.error('Unauthenticated user in API call.', session.context)
+      throw new Error('Unauthenticated')
+    }
+
+    const context = {
+      userAuthId: session.context.userAuthId,
+      roles: session.context.roles,
+      metadata: session.context.metadata
+    }
+
+    return next({ context })
   });
 
 export const superTokensFunctionMiddleware = createMiddleware({ type: 'function' })
-  .server(async ({ next }) => {
+  .server(async ({ next, response }) => {
     const request = getWebRequest();
+    const session = await verifySuperTokensSession(request, response);
 
-    const context = await verifySuperTokensSession(request);
-    return next(context as any);
-  })
+    if (!session.context.userAuthId) {
+      logger.error('Unauthenticated user in server function.', session.context)
+      throw new Error('Unauthenticated')
+    }
 
-export const superTokensRoleFunctionMiddleware = createMiddleware({ type: 'function' })
-  .server(async ({ next, context }) => {
-    const { roles } = context as any;
-    return next(({ context: { roles } }));
+    const context = {
+      userAuthId: session.context.userAuthId,
+      roles: session.context.roles,
+      metadata: session.context.metadata
+    }
+    return next({ context });
   })
 
 export const superTokensAdminFunctionMiddleware = createMiddleware({ type: 'function' })
-  .server(async ({ next }) => {
+  .server(async ({ next, response }) => {
     const request = getWebRequest();
-    const session = await verifySuperTokensSession(request);
+    const session = await verifySuperTokensSession(request, response);
     
-    const { roles } = session?.context as any;
-    if (roles?.includes('Admin')) {
-      return next(({ context: { roles } }));
+    if (!session.context.userAuthId) {
+      logger.error('Unauthenticated user in admin function.', session.context)
+      throw new Error('Unauthenticated')
     }
 
-    logger.error('User reached admin function without admin role', next);
+    const context = {
+      userAuthId: session.context.userAuthId,
+      roles: session.context.roles,
+      metadata: session.context.metadata
+    }
+
+    if (context.roles?.includes('Admin')) {
+      return next(({ context }));
+    }
+
+    logger.error('Unauthorized user in admin function.', context);
     throw new Error('Unauthorized');
   })
 
@@ -79,23 +106,6 @@ export const fetchUserRoles = async (userAuthId: string) => {
   return response;
 }
 
-export const fetchSuperTokensAuth = createServerFn({ method: 'GET' }).handler(async () => {
-  const request = getWebRequest();
-  const session = await getSessionForSSR(request);
-  const userAuthId = session?.accessTokenPayload?.sub;
-
-  if (!userAuthId) return;
-  const { roles } = await fetchUserRoles(userAuthId);
-  const { metadata } = await UserMetadata.getUserMetadata(userAuthId);
-
-  return {
-    userAuthId,
-    hasToken: session.hasToken,
-    roles,
-    metadata
-  }
-})
-
 export const setUserMetadata = createServerFn({ method: 'POST' })
   .validator(z.object({
     first_name: z.string().min(3).max(20).regex(/^[a-zA-Z0-9\s]+$/, "First name must be 3-20 characters long and contain only letters and spaces"),