rules, bracket page

src/app/routeTree.gen.ts

@@ -26,6 +26,7 @@ import { Route as AuthedTeamsTeamIdRouteImport } from './routes/_authed/teams.$t
 import { Route as AuthedProfilePlayerIdRouteImport } from './routes/_authed/profile.$playerId'
 import { Route as AuthedAdminPreviewRouteImport } from './routes/_authed/admin/preview'
 import { Route as AuthedAdminTournamentsIndexRouteImport } from './routes/_authed/admin/tournaments/index'
+import { Route as AuthedTournamentsIdBracketRouteImport } from './routes/_authed/tournaments/$id.bracket'
 import { Route as AuthedAdminTournamentsIdRouteImport } from './routes/_authed/admin/tournaments/$id'
 import { Route as AuthedAdminTournamentsRunIdRouteImport } from './routes/_authed/admin/tournaments/run.$id'
 import { ServerRoute as ApiTournamentsUploadLogoServerRouteImport } from './routes/api/tournaments/upload-logo'
@@ -118,6 +119,12 @@ const AuthedAdminTournamentsIndexRoute =
     path: '/tournaments/',
     getParentRoute: () => AuthedAdminRoute,
   } as any)
+const AuthedTournamentsIdBracketRoute =
+  AuthedTournamentsIdBracketRouteImport.update({
+    id: '/tournaments/$id/bracket',
+    path: '/tournaments/$id/bracket',
+    getParentRoute: () => AuthedRoute,
+  } as any)
 const AuthedAdminTournamentsIdRoute =
   AuthedAdminTournamentsIdRouteImport.update({
     id: '/tournaments/$id',
@@ -206,6 +213,7 @@ export interface FileRoutesByFullPath {
   '/admin/': typeof AuthedAdminIndexRoute
   '/tournaments': typeof AuthedTournamentsIndexRoute
   '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute
+  '/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
   '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute
   '/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
 }
@@ -223,6 +231,7 @@ export interface FileRoutesByTo {
   '/admin': typeof AuthedAdminIndexRoute
   '/tournaments': typeof AuthedTournamentsIndexRoute
   '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute
+  '/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
   '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute
   '/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
 }
@@ -243,6 +252,7 @@ export interface FileRoutesById {
   '/_authed/admin/': typeof AuthedAdminIndexRoute
   '/_authed/tournaments/': typeof AuthedTournamentsIndexRoute
   '/_authed/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute
+  '/_authed/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
   '/_authed/admin/tournaments/': typeof AuthedAdminTournamentsIndexRoute
   '/_authed/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
 }
@@ -263,6 +273,7 @@ export interface FileRouteTypes {
     | '/admin/'
     | '/tournaments'
     | '/admin/tournaments/$id'
+    | '/tournaments/$id/bracket'
     | '/admin/tournaments'
     | '/admin/tournaments/run/$id'
   fileRoutesByTo: FileRoutesByTo
@@ -280,6 +291,7 @@ export interface FileRouteTypes {
     | '/admin'
     | '/tournaments'
     | '/admin/tournaments/$id'
+    | '/tournaments/$id/bracket'
     | '/admin/tournaments'
     | '/admin/tournaments/run/$id'
   id:
@@ -299,6 +311,7 @@ export interface FileRouteTypes {
     | '/_authed/admin/'
     | '/_authed/tournaments/'
     | '/_authed/admin/tournaments/$id'
+    | '/_authed/tournaments/$id/bracket'
     | '/_authed/admin/tournaments/'
     | '/_authed/admin/tournaments/run/$id'
   fileRoutesById: FileRoutesById
@@ -512,6 +525,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedAdminTournamentsIndexRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
+    '/_authed/tournaments/$id/bracket': {
+      id: '/_authed/tournaments/$id/bracket'
+      path: '/tournaments/$id/bracket'
+      fullPath: '/tournaments/$id/bracket'
+      preLoaderRoute: typeof AuthedTournamentsIdBracketRouteImport
+      parentRoute: typeof AuthedRoute
+    }
     '/_authed/admin/tournaments/$id': {
       id: '/_authed/admin/tournaments/$id'
       path: '/tournaments/$id'
@@ -639,6 +659,7 @@ interface AuthedRouteChildren {
   AuthedTeamsTeamIdRoute: typeof AuthedTeamsTeamIdRoute
   AuthedTournamentsTournamentIdRoute: typeof AuthedTournamentsTournamentIdRoute
   AuthedTournamentsIndexRoute: typeof AuthedTournamentsIndexRoute
+  AuthedTournamentsIdBracketRoute: typeof AuthedTournamentsIdBracketRoute
 }
 
 const AuthedRouteChildren: AuthedRouteChildren = {
@@ -650,6 +671,7 @@ const AuthedRouteChildren: AuthedRouteChildren = {
   AuthedTeamsTeamIdRoute: AuthedTeamsTeamIdRoute,
   AuthedTournamentsTournamentIdRoute: AuthedTournamentsTournamentIdRoute,
   AuthedTournamentsIndexRoute: AuthedTournamentsIndexRoute,
+  AuthedTournamentsIdBracketRoute: AuthedTournamentsIdBracketRoute,
 }
 
 const AuthedRouteWithChildren =

src/app/routes/_authed/index.tsx

@@ -22,7 +22,7 @@ export const Route = createFileRoute("/_authed/")({
 function Home() {
   const { data: tournament } = useCurrentTournament();
 
-  if (!tournament.matches || tournament.matches.length === 0) {
+  if (!tournament.matches || tournament.matches.length !== 0) {
     return <UpcomingTournament tournament={tournament} />;
   }
 

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

@@ -1,7 +1,10 @@
 import Profile from "@/features/players/components/profile";
+import HeaderSkeleton from "@/features/players/components/profile/header-skeleton";
+import ProfileSkeleton from "@/features/players/components/profile/skeleton";
 import { playerKeys, playerQueries } from "@/features/players/queries";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
 import { createFileRoute } from "@tanstack/react-router";
+import { Suspense } from "react";
 import { z } from "zod";
 
 const searchSchema = z.object({
@@ -35,6 +38,8 @@ export const Route = createFileRoute("/_authed/profile/$playerId")({
   }),
   component: () => {
     const { playerId } = Route.useParams();
-    return <Profile id={playerId} />;
+    return <Suspense fallback={<ProfileSkeleton />}>
+       <Profile id={playerId} />
+    </Suspense>;
   },
 });

src/app/routes/_authed/tournaments/$id.bracket.tsx

@@ -0,0 +1,82 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import {
+  tournamentQueries,
+  useTournament,
+} from "@/features/tournaments/queries";
+import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import SeedTournament from "@/features/tournaments/components/seed-tournament";
+import { Container } from "@mantine/core";
+import { useMemo } from "react";
+import { BracketData } from "@/features/bracket/types";
+import { Match } from "@/features/matches/types";
+import BracketView from "@/features/bracket/components/bracket-view";
+import { SpotifyControlsBar } from "@/features/spotify/components";
+
+export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
+  beforeLoad: async ({ context, params }) => {
+    const { queryClient } = context;
+    const tournament = await ensureServerQueryData(
+      queryClient,
+      tournamentQueries.details(params.id)
+    );
+    if (!tournament) throw redirect({ to: "/admin/tournaments" });
+    return {
+      tournament,
+    };
+  },
+  loader: ({ context }) => ({
+    fullWidth: true,
+    withPadding: false,
+    showSpotifyPanel: true,
+    header: {
+      withBackButton: true,
+      title: `${context.tournament.name}`,
+    },
+  }),
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { id } = Route.useParams();
+  const { data: tournament } = useTournament(id);
+
+  const bracket: BracketData = useMemo(() => {
+    if (!tournament.matches || tournament.matches.length === 0) {
+      return { winners: [], losers: [] };
+    }
+
+    const winnersMap = new Map<number, Match[]>();
+    const losersMap = new Map<number, Match[]>();
+
+    tournament.matches
+      .sort((a, b) => a.lid - b.lid)
+      .forEach((match) => {
+        if (!match.is_losers_bracket) {
+          if (!winnersMap.has(match.round)) {
+            winnersMap.set(match.round, []);
+          }
+          winnersMap.get(match.round)!.push(match);
+        } else {
+          if (!losersMap.has(match.round)) {
+            losersMap.set(match.round, []);
+          }
+          losersMap.get(match.round)!.push(match);
+        }
+      });
+
+    const winners = Array.from(winnersMap.entries())
+      .sort(([a], [b]) => a - b)
+      .map(([, matches]) => matches);
+
+    const losers = Array.from(losersMap.entries())
+      .sort(([a], [b]) => a - b)
+      .map(([, matches]) => matches);
+    return { winners, losers };
+  }, [tournament.matches]);
+
+  return (
+    <Container size="md" px={0}>
+      <BracketView bracket={bracket} />
+    </Container>
+  );
+}

src/app/routes/api/spotify/callback.ts

@@ -7,7 +7,6 @@ const SPOTIFY_REDIRECT_URI = import.meta.env.VITE_SPOTIFY_REDIRECT_URI!
 
 export const ServerRoute = createServerFileRoute('/api/spotify/callback').methods({
   GET: async ({ request }: { request: Request }) => {
-    // Helper function to get return path from state parameter
     const getReturnPath = (state: string | null): string => {
       if (!state) return '/';
       try {
@@ -26,7 +25,6 @@ export const ServerRoute = createServerFileRoute('/api/spotify/callback').method
 
       const returnPath = getReturnPath(state);
 
-      // Check for OAuth errors
       if (error) {
         console.error('Spotify OAuth error:', error)
         return new Response(null, {
@@ -54,7 +52,6 @@ export const ServerRoute = createServerFileRoute('/api/spotify/callback').method
         has_state: !!state,
       })
 
-      // Exchange code for tokens
       const tokenResponse = await fetch('https://accounts.spotify.com/api/token', {
         method: 'POST',
         headers: {
@@ -77,7 +74,6 @@ export const ServerRoute = createServerFileRoute('/api/spotify/callback').method
           redirect_uri: SPOTIFY_REDIRECT_URI,
         })
         
-        // Return more detailed error info
         const errorParam = encodeURIComponent(`${tokenResponse.status}: ${errorText}`)
         return new Response(null, {
           status: 302,
@@ -97,7 +93,6 @@ export const ServerRoute = createServerFileRoute('/api/spotify/callback').method
 
       console.log('Decoded return path:', returnPath);
 
-      // Create response with redirect to original path
       const response = new Response(null, {
         status: 302,
         headers: {
@@ -105,14 +100,12 @@ export const ServerRoute = createServerFileRoute('/api/spotify/callback').method
         },
       })
 
-      // Set secure cookies for tokens
       const isSecure = process.env.NODE_ENV === 'production'
       const cookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${tokens.expires_in}`
 
       response.headers.append('Set-Cookie', `spotify_access_token=${tokens.access_token}; ${cookieOptions}`)
       
       if (tokens.refresh_token) {
-        // Refresh token doesn't expire, set longer max age
         const refreshCookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${60 * 60 * 24 * 30}` // 30 days
         response.headers.append('Set-Cookie', `spotify_refresh_token=${tokens.refresh_token}; ${refreshCookieOptions}`)
       }
@@ -120,7 +113,6 @@ export const ServerRoute = createServerFileRoute('/api/spotify/callback').method
       return response
     } catch (error) {
       console.error('Spotify callback error:', error)
-      // Try to get return path from query params if available, otherwise use default
       const url = new URL(request.url);
       const state = url.searchParams.get('state');
       const returnPath = getReturnPath(state);