fix refresh issue

.gitignore

@@ -19,4 +19,5 @@ yarn.lock
 /playwright/.cache/
 /scripts/
 /pb_data/
-/.tanstack/
+/.tanstack/
+/dist/

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite dev --host 0.0.0.0",
     "build": "vite build && tsc --noEmit",
-    "start": "node .output/server/index.mjs"
+    "start": "vite start --host 0.0.0.0"
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
@@ -21,10 +21,11 @@
     "@svgmoji/noto": "^3.2.0",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
-    "@tanstack/react-router": "1.130.12",
+    "@tanstack/react-router": "^1.130.12",
-    "@tanstack/react-router-devtools": "1.130.13",
+    "@tanstack/react-router-devtools": "^1.130.13",
-    "@tanstack/react-router-with-query": "1.130.12",
+    "@tanstack/react-router-with-query": "^1.130.12",
-    "@tanstack/react-start": "1.130.15",
+    "@tanstack/react-start": "^1.132.2",
+    "@tanstack/react-virtual": "^3.13.12",
     "@tiptap/pm": "^3.4.3",
     "@tiptap/react": "^3.4.3",
     "@tiptap/starter-kit": "^3.4.3",
@@ -51,6 +52,8 @@
     "zustand": "^5.0.7"
   },
   "devDependencies": {
+    "@tanstack/react-router-ssr-query": "^1.132.2",
+    "@tanstack/router-plugin": "^1.132.2",
     "@types/node": "^22.5.4",
     "@types/pg": "^8.15.5",
     "@types/react": "^19.0.8",
@@ -63,7 +66,7 @@
     "postcss-simple-vars": "^7.0.1",
     "tsx": "^4.20.3",
     "typescript": "^5.7.2",
-    "vite": "^6.3.5",
+    "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

src/app/routeTree.gen.ts

@@ -8,8 +8,6 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
-import { createServerRootRoute } from '@tanstack/react-start/server'
-
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as RefreshSessionRouteImport } from './routes/refresh-session'
 import { Route as LogoutRouteImport } from './routes/logout'
@@ -21,6 +19,16 @@ import { Route as AuthedSettingsRouteImport } from './routes/_authed/settings'
 import { Route as AuthedAdminRouteImport } from './routes/_authed/admin'
 import { Route as AuthedTournamentsIndexRouteImport } from './routes/_authed/tournaments/index'
 import { Route as AuthedAdminIndexRouteImport } from './routes/_authed/admin/index'
+import { Route as ApiTournamentsUploadLogoRouteImport } from './routes/api/tournaments/upload-logo'
+import { Route as ApiTeamsUploadLogoRouteImport } from './routes/api/teams/upload-logo'
+import { Route as ApiSpotifyTokenRouteImport } from './routes/api/spotify/token'
+import { Route as ApiSpotifySearchRouteImport } from './routes/api/spotify/search'
+import { Route as ApiSpotifyResumeRouteImport } from './routes/api/spotify/resume'
+import { Route as ApiSpotifyPlaybackRouteImport } from './routes/api/spotify/playback'
+import { Route as ApiSpotifyCaptureRouteImport } from './routes/api/spotify/capture'
+import { Route as ApiSpotifyCallbackRouteImport } from './routes/api/spotify/callback'
+import { Route as ApiEventsSplatRouteImport } from './routes/api/events.$'
+import { Route as ApiAuthSplatRouteImport } from './routes/api/auth.$'
 import { Route as AuthedTournamentsTournamentIdRouteImport } from './routes/_authed/tournaments/$tournamentId'
 import { Route as AuthedTeamsTeamIdRouteImport } from './routes/_authed/teams.$teamId'
 import { Route as AuthedProfilePlayerIdRouteImport } from './routes/_authed/profile.$playerId'
@@ -28,21 +36,9 @@ import { Route as AuthedAdminPreviewRouteImport } from './routes/_authed/admin/p
 import { Route as AuthedAdminTournamentsIndexRouteImport } from './routes/_authed/admin/tournaments/index'
 import { Route as AuthedTournamentsIdBracketRouteImport } from './routes/_authed/tournaments/$id.bracket'
 import { Route as AuthedAdminTournamentsIdIndexRouteImport } from './routes/_authed/admin/tournaments/$id/index'
+import { Route as ApiFilesCollectionRecordIdFileRouteImport } from './routes/api/files/$collection/$recordId/$file'
 import { Route as AuthedAdminTournamentsRunIdRouteImport } from './routes/_authed/admin/tournaments/run.$id'
 import { Route as AuthedAdminTournamentsIdTeamsRouteImport } from './routes/_authed/admin/tournaments/$id/teams'
-import { ServerRoute as ApiTournamentsUploadLogoServerRouteImport } from './routes/api/tournaments/upload-logo'
-import { ServerRoute as ApiTeamsUploadLogoServerRouteImport } from './routes/api/teams/upload-logo'
-import { ServerRoute as ApiSpotifyTokenServerRouteImport } from './routes/api/spotify/token'
-import { ServerRoute as ApiSpotifySearchServerRouteImport } from './routes/api/spotify/search'
-import { ServerRoute as ApiSpotifyResumeServerRouteImport } from './routes/api/spotify/resume'
-import { ServerRoute as ApiSpotifyPlaybackServerRouteImport } from './routes/api/spotify/playback'
-import { ServerRoute as ApiSpotifyCaptureServerRouteImport } from './routes/api/spotify/capture'
-import { ServerRoute as ApiSpotifyCallbackServerRouteImport } from './routes/api/spotify/callback'
-import { ServerRoute as ApiEventsSplatServerRouteImport } from './routes/api/events.$'
-import { ServerRoute as ApiAuthSplatServerRouteImport } from './routes/api/auth.$'
-import { ServerRoute as ApiFilesCollectionRecordIdFileServerRouteImport } from './routes/api/files/$collection/$recordId/$file'
-
-const rootServerRouteImport = createServerRootRoute()
 
 const RefreshSessionRoute = RefreshSessionRouteImport.update({
   id: '/refresh-session',
@@ -93,6 +89,57 @@ const AuthedAdminIndexRoute = AuthedAdminIndexRouteImport.update({
   path: '/',
   getParentRoute: () => AuthedAdminRoute,
 } as any)
+const ApiTournamentsUploadLogoRoute =
+  ApiTournamentsUploadLogoRouteImport.update({
+    id: '/api/tournaments/upload-logo',
+    path: '/api/tournaments/upload-logo',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiTeamsUploadLogoRoute = ApiTeamsUploadLogoRouteImport.update({
+  id: '/api/teams/upload-logo',
+  path: '/api/teams/upload-logo',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiSpotifyTokenRoute = ApiSpotifyTokenRouteImport.update({
+  id: '/api/spotify/token',
+  path: '/api/spotify/token',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiSpotifySearchRoute = ApiSpotifySearchRouteImport.update({
+  id: '/api/spotify/search',
+  path: '/api/spotify/search',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiSpotifyResumeRoute = ApiSpotifyResumeRouteImport.update({
+  id: '/api/spotify/resume',
+  path: '/api/spotify/resume',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiSpotifyPlaybackRoute = ApiSpotifyPlaybackRouteImport.update({
+  id: '/api/spotify/playback',
+  path: '/api/spotify/playback',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiSpotifyCaptureRoute = ApiSpotifyCaptureRouteImport.update({
+  id: '/api/spotify/capture',
+  path: '/api/spotify/capture',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiSpotifyCallbackRoute = ApiSpotifyCallbackRouteImport.update({
+  id: '/api/spotify/callback',
+  path: '/api/spotify/callback',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiEventsSplatRoute = ApiEventsSplatRouteImport.update({
+  id: '/api/events/$',
+  path: '/api/events/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiAuthSplatRoute = ApiAuthSplatRouteImport.update({
+  id: '/api/auth/$',
+  path: '/api/auth/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AuthedTournamentsTournamentIdRoute =
   AuthedTournamentsTournamentIdRouteImport.update({
     id: '/tournaments/$tournamentId',
@@ -132,6 +179,12 @@ const AuthedAdminTournamentsIdIndexRoute =
     path: '/tournaments/$id/',
     getParentRoute: () => AuthedAdminRoute,
   } as any)
+const ApiFilesCollectionRecordIdFileRoute =
+  ApiFilesCollectionRecordIdFileRouteImport.update({
+    id: '/api/files/$collection/$recordId/$file',
+    path: '/api/files/$collection/$recordId/$file',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const AuthedAdminTournamentsRunIdRoute =
   AuthedAdminTournamentsRunIdRouteImport.update({
     id: '/tournaments/run/$id',
@@ -144,66 +197,6 @@ const AuthedAdminTournamentsIdTeamsRoute =
     path: '/tournaments/$id/teams',
     getParentRoute: () => AuthedAdminRoute,
   } as any)
-const ApiTournamentsUploadLogoServerRoute =
-  ApiTournamentsUploadLogoServerRouteImport.update({
-    id: '/api/tournaments/upload-logo',
-    path: '/api/tournaments/upload-logo',
-    getParentRoute: () => rootServerRouteImport,
-  } as any)
-const ApiTeamsUploadLogoServerRoute =
-  ApiTeamsUploadLogoServerRouteImport.update({
-    id: '/api/teams/upload-logo',
-    path: '/api/teams/upload-logo',
-    getParentRoute: () => rootServerRouteImport,
-  } as any)
-const ApiSpotifyTokenServerRoute = ApiSpotifyTokenServerRouteImport.update({
-  id: '/api/spotify/token',
-  path: '/api/spotify/token',
-  getParentRoute: () => rootServerRouteImport,
-} as any)
-const ApiSpotifySearchServerRoute = ApiSpotifySearchServerRouteImport.update({
-  id: '/api/spotify/search',
-  path: '/api/spotify/search',
-  getParentRoute: () => rootServerRouteImport,
-} as any)
-const ApiSpotifyResumeServerRoute = ApiSpotifyResumeServerRouteImport.update({
-  id: '/api/spotify/resume',
-  path: '/api/spotify/resume',
-  getParentRoute: () => rootServerRouteImport,
-} as any)
-const ApiSpotifyPlaybackServerRoute =
-  ApiSpotifyPlaybackServerRouteImport.update({
-    id: '/api/spotify/playback',
-    path: '/api/spotify/playback',
-    getParentRoute: () => rootServerRouteImport,
-  } as any)
-const ApiSpotifyCaptureServerRoute = ApiSpotifyCaptureServerRouteImport.update({
-  id: '/api/spotify/capture',
-  path: '/api/spotify/capture',
-  getParentRoute: () => rootServerRouteImport,
-} as any)
-const ApiSpotifyCallbackServerRoute =
-  ApiSpotifyCallbackServerRouteImport.update({
-    id: '/api/spotify/callback',
-    path: '/api/spotify/callback',
-    getParentRoute: () => rootServerRouteImport,
-  } as any)
-const ApiEventsSplatServerRoute = ApiEventsSplatServerRouteImport.update({
-  id: '/api/events/$',
-  path: '/api/events/$',
-  getParentRoute: () => rootServerRouteImport,
-} as any)
-const ApiAuthSplatServerRoute = ApiAuthSplatServerRouteImport.update({
-  id: '/api/auth/$',
-  path: '/api/auth/$',
-  getParentRoute: () => rootServerRouteImport,
-} as any)
-const ApiFilesCollectionRecordIdFileServerRoute =
-  ApiFilesCollectionRecordIdFileServerRouteImport.update({
-    id: '/api/files/$collection/$recordId/$file',
-    path: '/api/files/$collection/$recordId/$file',
-    getParentRoute: () => rootServerRouteImport,
-  } as any)
 
 export interface FileRoutesByFullPath {
   '/login': typeof LoginRoute
@@ -217,12 +210,23 @@ export interface FileRoutesByFullPath {
   '/profile/$playerId': typeof AuthedProfilePlayerIdRoute
   '/teams/$teamId': typeof AuthedTeamsTeamIdRoute
   '/tournaments/$tournamentId': typeof AuthedTournamentsTournamentIdRoute
+  '/api/auth/$': typeof ApiAuthSplatRoute
+  '/api/events/$': typeof ApiEventsSplatRoute
+  '/api/spotify/callback': typeof ApiSpotifyCallbackRoute
+  '/api/spotify/capture': typeof ApiSpotifyCaptureRoute
+  '/api/spotify/playback': typeof ApiSpotifyPlaybackRoute
+  '/api/spotify/resume': typeof ApiSpotifyResumeRoute
+  '/api/spotify/search': typeof ApiSpotifySearchRoute
+  '/api/spotify/token': typeof ApiSpotifyTokenRoute
+  '/api/teams/upload-logo': typeof ApiTeamsUploadLogoRoute
+  '/api/tournaments/upload-logo': typeof ApiTournamentsUploadLogoRoute
   '/admin/': typeof AuthedAdminIndexRoute
   '/tournaments': typeof AuthedTournamentsIndexRoute
   '/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
   '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute
   '/admin/tournaments/$id/teams': typeof AuthedAdminTournamentsIdTeamsRoute
   '/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
+  '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileRoute
   '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdIndexRoute
 }
 export interface FileRoutesByTo {
@@ -236,12 +240,23 @@ export interface FileRoutesByTo {
   '/profile/$playerId': typeof AuthedProfilePlayerIdRoute
   '/teams/$teamId': typeof AuthedTeamsTeamIdRoute
   '/tournaments/$tournamentId': typeof AuthedTournamentsTournamentIdRoute
+  '/api/auth/$': typeof ApiAuthSplatRoute
+  '/api/events/$': typeof ApiEventsSplatRoute
+  '/api/spotify/callback': typeof ApiSpotifyCallbackRoute
+  '/api/spotify/capture': typeof ApiSpotifyCaptureRoute
+  '/api/spotify/playback': typeof ApiSpotifyPlaybackRoute
+  '/api/spotify/resume': typeof ApiSpotifyResumeRoute
+  '/api/spotify/search': typeof ApiSpotifySearchRoute
+  '/api/spotify/token': typeof ApiSpotifyTokenRoute
+  '/api/teams/upload-logo': typeof ApiTeamsUploadLogoRoute
+  '/api/tournaments/upload-logo': typeof ApiTournamentsUploadLogoRoute
   '/admin': typeof AuthedAdminIndexRoute
   '/tournaments': typeof AuthedTournamentsIndexRoute
   '/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
   '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute
   '/admin/tournaments/$id/teams': typeof AuthedAdminTournamentsIdTeamsRoute
   '/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
+  '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileRoute
   '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdIndexRoute
 }
 export interface FileRoutesById {
@@ -258,12 +273,23 @@ export interface FileRoutesById {
   '/_authed/profile/$playerId': typeof AuthedProfilePlayerIdRoute
   '/_authed/teams/$teamId': typeof AuthedTeamsTeamIdRoute
   '/_authed/tournaments/$tournamentId': typeof AuthedTournamentsTournamentIdRoute
+  '/api/auth/$': typeof ApiAuthSplatRoute
+  '/api/events/$': typeof ApiEventsSplatRoute
+  '/api/spotify/callback': typeof ApiSpotifyCallbackRoute
+  '/api/spotify/capture': typeof ApiSpotifyCaptureRoute
+  '/api/spotify/playback': typeof ApiSpotifyPlaybackRoute
+  '/api/spotify/resume': typeof ApiSpotifyResumeRoute
+  '/api/spotify/search': typeof ApiSpotifySearchRoute
+  '/api/spotify/token': typeof ApiSpotifyTokenRoute
+  '/api/teams/upload-logo': typeof ApiTeamsUploadLogoRoute
+  '/api/tournaments/upload-logo': typeof ApiTournamentsUploadLogoRoute
   '/_authed/admin/': typeof AuthedAdminIndexRoute
   '/_authed/tournaments/': typeof AuthedTournamentsIndexRoute
   '/_authed/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
   '/_authed/admin/tournaments/': typeof AuthedAdminTournamentsIndexRoute
   '/_authed/admin/tournaments/$id/teams': typeof AuthedAdminTournamentsIdTeamsRoute
   '/_authed/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
+  '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileRoute
   '/_authed/admin/tournaments/$id/': typeof AuthedAdminTournamentsIdIndexRoute
 }
 export interface FileRouteTypes {
@@ -280,12 +306,23 @@ export interface FileRouteTypes {
     | '/profile/$playerId'
     | '/teams/$teamId'
     | '/tournaments/$tournamentId'
+    | '/api/auth/$'
+    | '/api/events/$'
+    | '/api/spotify/callback'
+    | '/api/spotify/capture'
+    | '/api/spotify/playback'
+    | '/api/spotify/resume'
+    | '/api/spotify/search'
+    | '/api/spotify/token'
+    | '/api/teams/upload-logo'
+    | '/api/tournaments/upload-logo'
     | '/admin/'
     | '/tournaments'
     | '/tournaments/$id/bracket'
     | '/admin/tournaments'
     | '/admin/tournaments/$id/teams'
     | '/admin/tournaments/run/$id'
+    | '/api/files/$collection/$recordId/$file'
     | '/admin/tournaments/$id'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -299,12 +336,23 @@ export interface FileRouteTypes {
     | '/profile/$playerId'
     | '/teams/$teamId'
     | '/tournaments/$tournamentId'
+    | '/api/auth/$'
+    | '/api/events/$'
+    | '/api/spotify/callback'
+    | '/api/spotify/capture'
+    | '/api/spotify/playback'
+    | '/api/spotify/resume'
+    | '/api/spotify/search'
+    | '/api/spotify/token'
+    | '/api/teams/upload-logo'
+    | '/api/tournaments/upload-logo'
     | '/admin'
     | '/tournaments'
     | '/tournaments/$id/bracket'
     | '/admin/tournaments'
     | '/admin/tournaments/$id/teams'
     | '/admin/tournaments/run/$id'
+    | '/api/files/$collection/$recordId/$file'
     | '/admin/tournaments/$id'
   id:
     | '__root__'
@@ -320,12 +368,23 @@ export interface FileRouteTypes {
     | '/_authed/profile/$playerId'
     | '/_authed/teams/$teamId'
     | '/_authed/tournaments/$tournamentId'
+    | '/api/auth/$'
+    | '/api/events/$'
+    | '/api/spotify/callback'
+    | '/api/spotify/capture'
+    | '/api/spotify/playback'
+    | '/api/spotify/resume'
+    | '/api/spotify/search'
+    | '/api/spotify/token'
+    | '/api/teams/upload-logo'
+    | '/api/tournaments/upload-logo'
     | '/_authed/admin/'
     | '/_authed/tournaments/'
     | '/_authed/tournaments/$id/bracket'
     | '/_authed/admin/tournaments/'
     | '/_authed/admin/tournaments/$id/teams'
     | '/_authed/admin/tournaments/run/$id'
+    | '/api/files/$collection/$recordId/$file'
     | '/_authed/admin/tournaments/$id/'
   fileRoutesById: FileRoutesById
 }
@@ -334,101 +393,17 @@ export interface RootRouteChildren {
   LoginRoute: typeof LoginRoute
   LogoutRoute: typeof LogoutRoute
   RefreshSessionRoute: typeof RefreshSessionRoute
-}
+  ApiAuthSplatRoute: typeof ApiAuthSplatRoute
-export interface FileServerRoutesByFullPath {
+  ApiEventsSplatRoute: typeof ApiEventsSplatRoute
-  '/api/auth/$': typeof ApiAuthSplatServerRoute
+  ApiSpotifyCallbackRoute: typeof ApiSpotifyCallbackRoute
-  '/api/events/$': typeof ApiEventsSplatServerRoute
+  ApiSpotifyCaptureRoute: typeof ApiSpotifyCaptureRoute
-  '/api/spotify/callback': typeof ApiSpotifyCallbackServerRoute
+  ApiSpotifyPlaybackRoute: typeof ApiSpotifyPlaybackRoute
-  '/api/spotify/capture': typeof ApiSpotifyCaptureServerRoute
+  ApiSpotifyResumeRoute: typeof ApiSpotifyResumeRoute
-  '/api/spotify/playback': typeof ApiSpotifyPlaybackServerRoute
+  ApiSpotifySearchRoute: typeof ApiSpotifySearchRoute
-  '/api/spotify/resume': typeof ApiSpotifyResumeServerRoute
+  ApiSpotifyTokenRoute: typeof ApiSpotifyTokenRoute
-  '/api/spotify/search': typeof ApiSpotifySearchServerRoute
+  ApiTeamsUploadLogoRoute: typeof ApiTeamsUploadLogoRoute
-  '/api/spotify/token': typeof ApiSpotifyTokenServerRoute
+  ApiTournamentsUploadLogoRoute: typeof ApiTournamentsUploadLogoRoute
-  '/api/teams/upload-logo': typeof ApiTeamsUploadLogoServerRoute
+  ApiFilesCollectionRecordIdFileRoute: typeof ApiFilesCollectionRecordIdFileRoute
-  '/api/tournaments/upload-logo': typeof ApiTournamentsUploadLogoServerRoute
-  '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileServerRoute
-}
-export interface FileServerRoutesByTo {
-  '/api/auth/$': typeof ApiAuthSplatServerRoute
-  '/api/events/$': typeof ApiEventsSplatServerRoute
-  '/api/spotify/callback': typeof ApiSpotifyCallbackServerRoute
-  '/api/spotify/capture': typeof ApiSpotifyCaptureServerRoute
-  '/api/spotify/playback': typeof ApiSpotifyPlaybackServerRoute
-  '/api/spotify/resume': typeof ApiSpotifyResumeServerRoute
-  '/api/spotify/search': typeof ApiSpotifySearchServerRoute
-  '/api/spotify/token': typeof ApiSpotifyTokenServerRoute
-  '/api/teams/upload-logo': typeof ApiTeamsUploadLogoServerRoute
-  '/api/tournaments/upload-logo': typeof ApiTournamentsUploadLogoServerRoute
-  '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileServerRoute
-}
-export interface FileServerRoutesById {
-  __root__: typeof rootServerRouteImport
-  '/api/auth/$': typeof ApiAuthSplatServerRoute
-  '/api/events/$': typeof ApiEventsSplatServerRoute
-  '/api/spotify/callback': typeof ApiSpotifyCallbackServerRoute
-  '/api/spotify/capture': typeof ApiSpotifyCaptureServerRoute
-  '/api/spotify/playback': typeof ApiSpotifyPlaybackServerRoute
-  '/api/spotify/resume': typeof ApiSpotifyResumeServerRoute
-  '/api/spotify/search': typeof ApiSpotifySearchServerRoute
-  '/api/spotify/token': typeof ApiSpotifyTokenServerRoute
-  '/api/teams/upload-logo': typeof ApiTeamsUploadLogoServerRoute
-  '/api/tournaments/upload-logo': typeof ApiTournamentsUploadLogoServerRoute
-  '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileServerRoute
-}
-export interface FileServerRouteTypes {
-  fileServerRoutesByFullPath: FileServerRoutesByFullPath
-  fullPaths:
-    | '/api/auth/$'
-    | '/api/events/$'
-    | '/api/spotify/callback'
-    | '/api/spotify/capture'
-    | '/api/spotify/playback'
-    | '/api/spotify/resume'
-    | '/api/spotify/search'
-    | '/api/spotify/token'
-    | '/api/teams/upload-logo'
-    | '/api/tournaments/upload-logo'
-    | '/api/files/$collection/$recordId/$file'
-  fileServerRoutesByTo: FileServerRoutesByTo
-  to:
-    | '/api/auth/$'
-    | '/api/events/$'
-    | '/api/spotify/callback'
-    | '/api/spotify/capture'
-    | '/api/spotify/playback'
-    | '/api/spotify/resume'
-    | '/api/spotify/search'
-    | '/api/spotify/token'
-    | '/api/teams/upload-logo'
-    | '/api/tournaments/upload-logo'
-    | '/api/files/$collection/$recordId/$file'
-  id:
-    | '__root__'
-    | '/api/auth/$'
-    | '/api/events/$'
-    | '/api/spotify/callback'
-    | '/api/spotify/capture'
-    | '/api/spotify/playback'
-    | '/api/spotify/resume'
-    | '/api/spotify/search'
-    | '/api/spotify/token'
-    | '/api/teams/upload-logo'
-    | '/api/tournaments/upload-logo'
-    | '/api/files/$collection/$recordId/$file'
-  fileServerRoutesById: FileServerRoutesById
-}
-export interface RootServerRouteChildren {
-  ApiAuthSplatServerRoute: typeof ApiAuthSplatServerRoute
-  ApiEventsSplatServerRoute: typeof ApiEventsSplatServerRoute
-  ApiSpotifyCallbackServerRoute: typeof ApiSpotifyCallbackServerRoute
-  ApiSpotifyCaptureServerRoute: typeof ApiSpotifyCaptureServerRoute
-  ApiSpotifyPlaybackServerRoute: typeof ApiSpotifyPlaybackServerRoute
-  ApiSpotifyResumeServerRoute: typeof ApiSpotifyResumeServerRoute
-  ApiSpotifySearchServerRoute: typeof ApiSpotifySearchServerRoute
-  ApiSpotifyTokenServerRoute: typeof ApiSpotifyTokenServerRoute
-  ApiTeamsUploadLogoServerRoute: typeof ApiTeamsUploadLogoServerRoute
-  ApiTournamentsUploadLogoServerRoute: typeof ApiTournamentsUploadLogoServerRoute
-  ApiFilesCollectionRecordIdFileServerRoute: typeof ApiFilesCollectionRecordIdFileServerRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -503,6 +478,76 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedAdminIndexRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
+    '/api/tournaments/upload-logo': {
+      id: '/api/tournaments/upload-logo'
+      path: '/api/tournaments/upload-logo'
+      fullPath: '/api/tournaments/upload-logo'
+      preLoaderRoute: typeof ApiTournamentsUploadLogoRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/teams/upload-logo': {
+      id: '/api/teams/upload-logo'
+      path: '/api/teams/upload-logo'
+      fullPath: '/api/teams/upload-logo'
+      preLoaderRoute: typeof ApiTeamsUploadLogoRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/spotify/token': {
+      id: '/api/spotify/token'
+      path: '/api/spotify/token'
+      fullPath: '/api/spotify/token'
+      preLoaderRoute: typeof ApiSpotifyTokenRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/spotify/search': {
+      id: '/api/spotify/search'
+      path: '/api/spotify/search'
+      fullPath: '/api/spotify/search'
+      preLoaderRoute: typeof ApiSpotifySearchRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/spotify/resume': {
+      id: '/api/spotify/resume'
+      path: '/api/spotify/resume'
+      fullPath: '/api/spotify/resume'
+      preLoaderRoute: typeof ApiSpotifyResumeRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/spotify/playback': {
+      id: '/api/spotify/playback'
+      path: '/api/spotify/playback'
+      fullPath: '/api/spotify/playback'
+      preLoaderRoute: typeof ApiSpotifyPlaybackRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/spotify/capture': {
+      id: '/api/spotify/capture'
+      path: '/api/spotify/capture'
+      fullPath: '/api/spotify/capture'
+      preLoaderRoute: typeof ApiSpotifyCaptureRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/spotify/callback': {
+      id: '/api/spotify/callback'
+      path: '/api/spotify/callback'
+      fullPath: '/api/spotify/callback'
+      preLoaderRoute: typeof ApiSpotifyCallbackRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/events/$': {
+      id: '/api/events/$'
+      path: '/api/events/$'
+      fullPath: '/api/events/$'
+      preLoaderRoute: typeof ApiEventsSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/auth/$': {
+      id: '/api/auth/$'
+      path: '/api/auth/$'
+      fullPath: '/api/auth/$'
+      preLoaderRoute: typeof ApiAuthSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_authed/tournaments/$tournamentId': {
       id: '/_authed/tournaments/$tournamentId'
       path: '/tournaments/$tournamentId'
@@ -552,6 +597,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedAdminTournamentsIdIndexRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
+    '/api/files/$collection/$recordId/$file': {
+      id: '/api/files/$collection/$recordId/$file'
+      path: '/api/files/$collection/$recordId/$file'
+      fullPath: '/api/files/$collection/$recordId/$file'
+      preLoaderRoute: typeof ApiFilesCollectionRecordIdFileRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_authed/admin/tournaments/run/$id': {
       id: '/_authed/admin/tournaments/run/$id'
       path: '/tournaments/run/$id'
@@ -568,87 +620,6 @@ declare module '@tanstack/react-router' {
     }
   }
 }
-declare module '@tanstack/react-start/server' {
-  interface ServerFileRoutesByPath {
-    '/api/tournaments/upload-logo': {
-      id: '/api/tournaments/upload-logo'
-      path: '/api/tournaments/upload-logo'
-      fullPath: '/api/tournaments/upload-logo'
-      preLoaderRoute: typeof ApiTournamentsUploadLogoServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-    '/api/teams/upload-logo': {
-      id: '/api/teams/upload-logo'
-      path: '/api/teams/upload-logo'
-      fullPath: '/api/teams/upload-logo'
-      preLoaderRoute: typeof ApiTeamsUploadLogoServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-    '/api/spotify/token': {
-      id: '/api/spotify/token'
-      path: '/api/spotify/token'
-      fullPath: '/api/spotify/token'
-      preLoaderRoute: typeof ApiSpotifyTokenServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-    '/api/spotify/search': {
-      id: '/api/spotify/search'
-      path: '/api/spotify/search'
-      fullPath: '/api/spotify/search'
-      preLoaderRoute: typeof ApiSpotifySearchServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-    '/api/spotify/resume': {
-      id: '/api/spotify/resume'
-      path: '/api/spotify/resume'
-      fullPath: '/api/spotify/resume'
-      preLoaderRoute: typeof ApiSpotifyResumeServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-    '/api/spotify/playback': {
-      id: '/api/spotify/playback'
-      path: '/api/spotify/playback'
-      fullPath: '/api/spotify/playback'
-      preLoaderRoute: typeof ApiSpotifyPlaybackServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-    '/api/spotify/capture': {
-      id: '/api/spotify/capture'
-      path: '/api/spotify/capture'
-      fullPath: '/api/spotify/capture'
-      preLoaderRoute: typeof ApiSpotifyCaptureServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-    '/api/spotify/callback': {
-      id: '/api/spotify/callback'
-      path: '/api/spotify/callback'
-      fullPath: '/api/spotify/callback'
-      preLoaderRoute: typeof ApiSpotifyCallbackServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-    '/api/events/$': {
-      id: '/api/events/$'
-      path: '/api/events/$'
-      fullPath: '/api/events/$'
-      preLoaderRoute: typeof ApiEventsSplatServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-    '/api/auth/$': {
-      id: '/api/auth/$'
-      path: '/api/auth/$'
-      fullPath: '/api/auth/$'
-      preLoaderRoute: typeof ApiAuthSplatServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-    '/api/files/$collection/$recordId/$file': {
-      id: '/api/files/$collection/$recordId/$file'
-      path: '/api/files/$collection/$recordId/$file'
-      fullPath: '/api/files/$collection/$recordId/$file'
-      preLoaderRoute: typeof ApiFilesCollectionRecordIdFileServerRouteImport
-      parentRoute: typeof rootServerRouteImport
-    }
-  }
-}
 
 interface AuthedAdminRouteChildren {
   AuthedAdminPreviewRoute: typeof AuthedAdminPreviewRoute
@@ -704,24 +675,26 @@ const rootRouteChildren: RootRouteChildren = {
   LoginRoute: LoginRoute,
   LogoutRoute: LogoutRoute,
   RefreshSessionRoute: RefreshSessionRoute,
+  ApiAuthSplatRoute: ApiAuthSplatRoute,
+  ApiEventsSplatRoute: ApiEventsSplatRoute,
+  ApiSpotifyCallbackRoute: ApiSpotifyCallbackRoute,
+  ApiSpotifyCaptureRoute: ApiSpotifyCaptureRoute,
+  ApiSpotifyPlaybackRoute: ApiSpotifyPlaybackRoute,
+  ApiSpotifyResumeRoute: ApiSpotifyResumeRoute,
+  ApiSpotifySearchRoute: ApiSpotifySearchRoute,
+  ApiSpotifyTokenRoute: ApiSpotifyTokenRoute,
+  ApiTeamsUploadLogoRoute: ApiTeamsUploadLogoRoute,
+  ApiTournamentsUploadLogoRoute: ApiTournamentsUploadLogoRoute,
+  ApiFilesCollectionRecordIdFileRoute: ApiFilesCollectionRecordIdFileRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
-const rootServerRouteChildren: RootServerRouteChildren = {
+
-  ApiAuthSplatServerRoute: ApiAuthSplatServerRoute,
+import type { getRouter } from './router.tsx'
-  ApiEventsSplatServerRoute: ApiEventsSplatServerRoute,
+import type { createStart } from '@tanstack/react-start'
-  ApiSpotifyCallbackServerRoute: ApiSpotifyCallbackServerRoute,
+declare module '@tanstack/react-start' {
-  ApiSpotifyCaptureServerRoute: ApiSpotifyCaptureServerRoute,
+  interface Register {
-  ApiSpotifyPlaybackServerRoute: ApiSpotifyPlaybackServerRoute,
+    router: Awaited<ReturnType<typeof getRouter>>
-  ApiSpotifyResumeServerRoute: ApiSpotifyResumeServerRoute,
+  }
-  ApiSpotifySearchServerRoute: ApiSpotifySearchServerRoute,
-  ApiSpotifyTokenServerRoute: ApiSpotifyTokenServerRoute,
-  ApiTeamsUploadLogoServerRoute: ApiTeamsUploadLogoServerRoute,
-  ApiTournamentsUploadLogoServerRoute: ApiTournamentsUploadLogoServerRoute,
-  ApiFilesCollectionRecordIdFileServerRoute:
-    ApiFilesCollectionRecordIdFileServerRoute,
 }
-export const serverRouteTree = rootServerRouteImport
-  ._addFileChildren(rootServerRouteChildren)
-  ._addFileTypes<FileServerRouteTypes>()

src/app/router.tsx

@@ -1,15 +1,11 @@
 import { QueryClient } from "@tanstack/react-query";
 import { createRouter as createTanStackRouter } from "@tanstack/react-router";
-import { routerWithQueryClient } from "@tanstack/react-router-with-query";
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
 import { routeTree } from "./routeTree.gen";
 import { DefaultCatchBoundary } from "../components/DefaultCatchBoundary";
 import { defaultHeaderConfig } from "@/features/core/hooks/use-router-config";
 
-import dotenv from 'dotenv';
+export function getRouter() {
-dotenv.config();
-
-
-export function createRouter() {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -22,28 +18,32 @@ export function createRouter() {
     },
   });
 
-  return routerWithQueryClient(
+  const router = createTanStackRouter({
-    createTanStackRouter({
+    routeTree,
-      routeTree,
+    context: {
-      context: {
+      queryClient,
-        queryClient,
+      auth: undefined!,
-        auth: undefined!,
+      header: defaultHeaderConfig,
-        header: defaultHeaderConfig,
+      refresh: [],
-        refresh: [],
+      withPadding: true,
-        withPadding: true,
+      fullWidth: false,
-        fullWidth: false,
+    },
-      },
+    defaultPreload: "intent",
-      defaultPreload: "intent",
+    defaultErrorComponent: DefaultCatchBoundary,
-      defaultErrorComponent: DefaultCatchBoundary,
+    scrollRestoration: true,
-      scrollRestoration: true,
+    defaultViewTransition: false,
-      defaultViewTransition: false,
+  });
-    }),
+
+  setupRouterSsrQueryIntegration({
+    router,
     queryClient
-  );
+  })
+
+  return router;
 }
 
 declare module "@tanstack/react-router" {
   interface Register {
-    router: ReturnType<typeof createRouter>;
+    router: ReturnType<typeof getRouter>;
   }
 }

src/app/routes/__root.tsx

@@ -83,12 +83,20 @@ export const Route = createRootRouteWithContext<{
       return {};
     }
 
-    // https://github.com/TanStack/router/discussions/3531
+    if (location.pathname === '/login' || location.pathname === '/logout') {
-    const auth = await ensureServerQueryData(
+      return {};
-      context.queryClient,
+    }
-      playerQueries.auth()
+
-    );
+    try {
-    return { auth };
+      // https://github.com/TanStack/router/discussions/3531
+      const auth = await ensureServerQueryData(
+        context.queryClient,
+        playerQueries.auth()
+      );
+      return { auth };
+    } catch (error) {
+      return {};
+    }
   },
   pendingComponent: () => <Providers><FullScreenLoader /></Providers>,
 });

src/app/routes/api/auth.$.ts

@@ -1,5 +1,5 @@
 // API file that handles all supertokens auth routes
-import { createServerFileRoute } from '@tanstack/react-start/server';
+import { createFileRoute } from '@tanstack/react-router';
 import { handleAuthAPIRequest } from 'supertokens-node/custom'
 import { ensureSuperTokensBackend } from '@/lib/supertokens/server'
 
@@ -12,12 +12,16 @@ const handleRequest = async ({ request }: {request: Request}) => {
   console.log("Handling auth request:", request.method, request.url);
   return superTokensHandler(request);
 };
-export const ServerRoute = createServerFileRoute('/api/auth/$').methods({
+export const Route = createFileRoute('/api/auth/$')({
-  GET: handleRequest,
+  server: {
-  POST: handleRequest,
+    handlers: {
-  PUT: handleRequest,
+      GET: handleRequest,
-  DELETE: handleRequest,
+      POST: handleRequest,
-  PATCH: handleRequest,
+      PUT: handleRequest,
-  OPTIONS: handleRequest,
+      DELETE: handleRequest,
-  HEAD: handleRequest,
+      PATCH: handleRequest,
+      OPTIONS: handleRequest,
+      HEAD: handleRequest,
+    }
+  }
 })

src/app/routes/api/events.$.ts

@@ -1,66 +1,72 @@
-import { createServerFileRoute } from "@tanstack/react-start/server";
+import { createFileRoute } from "@tanstack/react-router";
 import { serverEvents, type ServerEvent } from "@/lib/events/emitter";
 import { logger } from "@/lib/logger";
 import { superTokensRequestMiddleware } from "@/utils/supertokens";
 
-export const ServerRoute = createServerFileRoute("/api/events/$").middleware([superTokensRequestMiddleware]).methods({
+export const Route = createFileRoute("/api/events/$")({
-  GET: ({ request, context }) => {
+  server: {
-    logger.info('ServerEvents | New connection', context?.userAuthId);
+    middleware: [superTokensRequestMiddleware],
-    
+    handlers: {
-    const stream = new ReadableStream({
+      GET: ({ request, context }) => {
-      start(controller) {
+        logger.info("ServerEvents | New connection", context?.userAuthId);
-        const connectMessage = `data: ${JSON.stringify({ type: "connected" })}\n\n`;
-        controller.enqueue(new TextEncoder().encode(connectMessage));
 
-        const handleEvent = (event: ServerEvent) => {
+        const stream = new ReadableStream({
-          logger.info('ServerEvents | Event received', event);
+          start(controller) {
-          const message = `data: ${JSON.stringify(event)}\n\n`;
+            const connectMessage = `data: ${JSON.stringify({ type: "connected" })}\n\n`;
-          try {
+            controller.enqueue(new TextEncoder().encode(connectMessage));
-            controller.enqueue(new TextEncoder().encode(message));
-          } catch (error) {
-            logger.error("ServerEvents | Error sending SSE message", error);
-          }
-        };
 
-        serverEvents.on("test", handleEvent);
+            const handleEvent = (event: ServerEvent) => {
-        serverEvents.on("match", handleEvent);
+              logger.info("ServerEvents | Event received", event);
-        serverEvents.on("reaction", handleEvent);
+              const message = `data: ${JSON.stringify(event)}\n\n`;
+              try {
+                controller.enqueue(new TextEncoder().encode(message));
+              } catch (error) {
+                logger.error("ServerEvents | Error sending SSE message", error);
+              }
+            };
 
-        const pingInterval = setInterval(() => {
+            serverEvents.on("test", handleEvent);
-          try {
+            serverEvents.on("match", handleEvent);
-            const pingMessage = `data: ${JSON.stringify({ type: "ping" })}\n\n`;
+            serverEvents.on("reaction", handleEvent);
-            controller.enqueue(new TextEncoder().encode(pingMessage));
-          } catch (e) {
-            clearInterval(pingInterval);
-            controller.close();
-          }
-        }, 30000);
 
-        const cleanup = () => {
+            const pingInterval = setInterval(() => {
-          serverEvents.off("test", handleEvent);
+              try {
-          clearInterval(pingInterval);
+                const pingMessage = `data: ${JSON.stringify({ type: "ping" })}\n\n`;
-          try {
+                controller.enqueue(new TextEncoder().encode(pingMessage));
-            logger.info('ServerEvents | Closing connection', context?.userAuthId);
+              } catch (e) {
-            controller.close();
+                clearInterval(pingInterval);
-          } catch (e) {
+                controller.close();
-            logger.error('ServerEvents | Error closing controller', e);
+              }
-          }
+            }, 30000);
-        };
 
-        request.signal?.addEventListener("abort", cleanup);
+            const cleanup = () => {
+              serverEvents.off("test", handleEvent);
+              clearInterval(pingInterval);
+              try {
+                logger.info(
+                  "ServerEvents | Closing connection",
+                  context?.userAuthId
+                );
+              } catch (e) {
+                logger.error("ServerEvents | Error closing controller", e);
+              }
+            };
 
-        return cleanup;
+            request.signal?.addEventListener("abort", cleanup);
+            return cleanup;
+          },
+        });
+
+        return new Response(stream, {
+          headers: {
+            "Content-Type": "text/event-stream",
+            "Cache-Control": "no-cache",
+            Connection: "keep-alive",
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Headers": "Cache-Control",
+          },
+        });
       },
-    });
+    },
-
-    return new Response(stream, {
-      headers: {
-        "Content-Type": "text/event-stream",
-        "Cache-Control": "no-cache",
-        Connection: "keep-alive",
-        "Access-Control-Allow-Origin": "*",
-        "Access-Control-Allow-Headers": "Cache-Control",
-      },
-    });
   },
-});
+});

src/app/routes/api/files/$collection/$recordId/$file.ts

@@ -1,95 +1,113 @@
-import { createServerFileRoute } from "@tanstack/react-start/server";
+import { createFileRoute } from "@tanstack/react-router";
 import { logger } from "@/lib/logger";
 
-export const ServerRoute = createServerFileRoute("/api/files/$collection/$recordId/$file").methods({
+export const Route = createFileRoute(
-  GET: async ({ params, request }) => {
+  "/api/files/$collection/$recordId/$file"
-    try {
+)({
-      const { collection, recordId, file } = params;
+  server: {
-      const pocketbaseUrl = process.env.POCKETBASE_URL || 'http://127.0.0.1:8090';
+    handlers: {
-      const fileUrl = `${pocketbaseUrl}/api/files/${collection}/${recordId}/${file}`;
+      GET: async ({ params, request }) => {
-      
+        try {
-      logger.info('File proxy', { 
+          const { collection, recordId, file } = params;
-        collection, 
+          const pocketbaseUrl =
-        recordId, 
+            process.env.POCKETBASE_URL || "http://127.0.0.1:8090";
-        file, 
+          const fileUrl = `${pocketbaseUrl}/api/files/${collection}/${recordId}/${file}`;
-        targetUrl: fileUrl 
-      });
 
-      const response = await fetch(fileUrl, {
+          logger.info("File proxy", {
-        method: 'GET',
+            collection,
-        headers: {
+            recordId,
-          ...(request.headers.get('range') && { 'Range': request.headers.get('range')! }),
+            file,
-          ...(request.headers.get('if-none-match') && { 'If-None-Match': request.headers.get('if-none-match')! }),
+            targetUrl: fileUrl,
-          ...(request.headers.get('if-modified-since') && { 'If-Modified-Since': request.headers.get('if-modified-since')! }),
+          });
-        },
-      });
 
-      if (!response.ok) {
+          const response = await fetch(fileUrl, {
-        logger.error('PocketBase file request failed', {
+            method: "GET",
-          status: response.status,
+            headers: {
-          statusText: response.statusText,
+              ...(request.headers.get("range") && {
-          url: fileUrl
+                Range: request.headers.get("range")!,
-        });
+              }),
+              ...(request.headers.get("if-none-match") && {
+                "If-None-Match": request.headers.get("if-none-match")!,
+              }),
+              ...(request.headers.get("if-modified-since") && {
+                "If-Modified-Since": request.headers.get("if-modified-since")!,
+              }),
+            },
+          });
 
-        if (response.status === 404) {
+          if (!response.ok) {
-          return new Response('File not found', { status: 404 });
+            logger.error("PocketBase file request failed", {
+              status: response.status,
+              statusText: response.statusText,
+              url: fileUrl,
+            });
+
+            if (response.status === 404) {
+              return new Response("File not found", { status: 404 });
+            }
+
+            return new Response(`PocketBase error: ${response.statusText}`, {
+              status: response.status,
+            });
+          }
+
+          const body = response.body;
+          const responseHeaders = new Headers();
+          const headers = [
+            "content-type",
+            "content-length",
+            "content-disposition",
+            "etag",
+            "last-modified",
+            "cache-control",
+            "accept-ranges",
+            "content-range",
+          ];
+
+          headers.forEach((header) => {
+            const value = response.headers.get(header);
+            if (value) {
+              responseHeaders.set(header, value);
+            }
+          });
+
+          responseHeaders.set("Access-Control-Allow-Origin", "*");
+          responseHeaders.set(
+            "Access-Control-Allow-Methods",
+            "GET, HEAD, OPTIONS"
+          );
+          responseHeaders.set(
+            "Access-Control-Allow-Headers",
+            "Range, If-None-Match, If-Modified-Since"
+          );
+
+          logger.info("File proxy response", {
+            status: response.status,
+            contentType: response.headers.get("content-type"),
+            contentLength: response.headers.get("content-length"),
+          });
+
+          return new Response(body, {
+            status: response.status,
+            statusText: response.statusText,
+            headers: responseHeaders,
+          });
+        } catch (error) {
+          logger.error("File proxy error", error);
+          return new Response("Internal server error", { status: 500 });
         }
+      },
 
-        return new Response(`PocketBase error: ${response.statusText}`, { 
+      OPTIONS: () => {
-          status: response.status 
+        return new Response(null, {
+          status: 200,
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods": "GET, OPTIONS",
+            "Access-Control-Max-Age": "86400",
+          },
         });
-      }
+      },
-
+    },
-      const body = response.body;
-      const responseHeaders = new Headers();
-      const headers = [
-        'content-type',
-        'content-length',
-        'content-disposition',
-        'etag',
-        'last-modified',
-        'cache-control',
-        'accept-ranges',
-        'content-range'
-      ];
-
-      headers.forEach(header => {
-        const value = response.headers.get(header);
-        if (value) {
-          responseHeaders.set(header, value);
-        }
-      });
-
-      responseHeaders.set('Access-Control-Allow-Origin', '*');
-      responseHeaders.set('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS');
-      responseHeaders.set('Access-Control-Allow-Headers', 'Range, If-None-Match, If-Modified-Since');
-
-      logger.info('File proxy response', {
-        status: response.status,
-        contentType: response.headers.get('content-type'),
-        contentLength: response.headers.get('content-length')
-      });
-
-      return new Response(body, {
-        status: response.status,
-        statusText: response.statusText,
-        headers: responseHeaders
-      });
-
-    } catch (error) {
-      logger.error('File proxy error', error);
-      return new Response('Internal server error', { status: 500 });
-    }
   },
-
+});
-  OPTIONS: () => {
-    return new Response(null, {
-      status: 200,
-      headers: {
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods': 'GET, OPTIONS',
-        'Access-Control-Max-Age': '86400',
-      }
-    });
-  }
-});

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

@@ -1,127 +1,146 @@
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from "@tanstack/react-router";
-import { SpotifyAuth } from '@/lib/spotify/auth'
+import { SpotifyAuth } from "@/lib/spotify/auth";
 
-const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!
+const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!;
-const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!
+const SPOTIFY_CLIENT_SECRET = import.meta.env.SPOTIFY_CLIENT_SECRET!;
-const SPOTIFY_REDIRECT_URI = import.meta.env.VITE_SPOTIFY_REDIRECT_URI!
+const SPOTIFY_REDIRECT_URI = import.meta.env.VITE_SPOTIFY_REDIRECT_URI!;
 
-export const ServerRoute = createServerFileRoute('/api/spotify/callback').methods({
+export const Route = createFileRoute("/api/spotify/callback")({
-  GET: async ({ request }: { request: Request }) => {
+  server: {
-    const getReturnPath = (state: string | null): string => {
+    handlers: {
-      if (!state) return '/';
+      GET: async ({ request }: { request: Request }) => {
-      try {
+        const getReturnPath = (state: string | null): string => {
-        const decodedState = JSON.parse(atob(state));
+          if (!state) return "/";
-        return decodedState.returnPath || '/';
+          try {
-      } catch {
+            const decodedState = JSON.parse(atob(state));
-        return '/';
+            return decodedState.returnPath || "/";
-      }
+          } catch {
-    };
+            return "/";
+          }
+        };
 
-    try {
+        try {
-      const url = new URL(request.url)
+          const url = new URL(request.url);
-      const code = url.searchParams.get('code')
+          const code = url.searchParams.get("code");
-      const state = url.searchParams.get('state')
+          const state = url.searchParams.get("state");
-      const error = url.searchParams.get('error')
+          const error = url.searchParams.get("error");
 
-      const returnPath = getReturnPath(state);
+          const returnPath = getReturnPath(state);
 
-      if (error) {
+          if (error) {
-        console.error('Spotify OAuth error:', error)
+            console.error("Spotify OAuth error:", error);
-        return new Response(null, {
+            return new Response(null, {
-          status: 302,
+              status: 302,
-          headers: {
+              headers: {
-            'Location': returnPath + '?spotify_error=' + encodeURIComponent(error),
+                Location:
-          },
+                  returnPath + "?spotify_error=" + encodeURIComponent(error),
-        })
+              },
-      }
+            });
+          }
 
-      if (!code || !state) {
+          if (!code || !state) {
-        console.error('Missing code or state:', { code: !!code, state: !!state })
+            console.error("Missing code or state:", {
-        return new Response(null, {
+              code: !!code,
-          status: 302,
+              state: !!state,
-          headers: {
+            });
-            'Location': returnPath + '?spotify_error=missing_code_or_state',
+            return new Response(null, {
-          },
+              status: 302,
-        })
+              headers: {
-      }
+                Location: returnPath + "?spotify_error=missing_code_or_state",
+              },
+            });
+          }
 
-      console.log('Token exchange attempt:', {
+          console.log("Token exchange attempt:", {
-        client_id: SPOTIFY_CLIENT_ID,
+            client_id: SPOTIFY_CLIENT_ID,
-        redirect_uri: SPOTIFY_REDIRECT_URI,
+            redirect_uri: SPOTIFY_REDIRECT_URI,
-        has_code: !!code,
+            has_code: !!code,
-        has_state: !!state,
+            has_state: !!state,
-      })
+          });
 
-      const tokenResponse = await fetch('https://accounts.spotify.com/api/token', {
+          const tokenResponse = await fetch(
-        method: 'POST',
+            "https://accounts.spotify.com/api/token",
-        headers: {
+            {
-          'Content-Type': 'application/x-www-form-urlencoded',
+              method: "POST",
-          'Authorization': `Basic ${Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString('base64')}`,
+              headers: {
-        },
+                "Content-Type": "application/x-www-form-urlencoded",
-        body: new URLSearchParams({
+                Authorization: `Basic ${Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString("base64")}`,
-          grant_type: 'authorization_code',
+              },
-          code,
+              body: new URLSearchParams({
-          redirect_uri: SPOTIFY_REDIRECT_URI,
+                grant_type: "authorization_code",
-        }),
+                code,
-      })
+                redirect_uri: SPOTIFY_REDIRECT_URI,
+              }),
+            }
+          );
 
-      if (!tokenResponse.ok) {
+          if (!tokenResponse.ok) {
-        const errorText = await tokenResponse.text()
+            const errorText = await tokenResponse.text();
-        console.error('Token exchange error:', {
+            console.error("Token exchange error:", {
-          status: tokenResponse.status,
+              status: tokenResponse.status,
-          statusText: tokenResponse.statusText,
+              statusText: tokenResponse.statusText,
-          body: errorText,
+              body: errorText,
-          redirect_uri: SPOTIFY_REDIRECT_URI,
+              redirect_uri: SPOTIFY_REDIRECT_URI,
-        })
+            });
-        
-        const errorParam = encodeURIComponent(`${tokenResponse.status}: ${errorText}`)
-        return new Response(null, {
-          status: 302,
-          headers: {
-            'Location': `${returnPath}?spotify_error=token_exchange_failed&details=${errorParam}`,
-          },
-        })
-      }
 
-      const tokens = await tokenResponse.json()
+            const errorParam = encodeURIComponent(
+              `${tokenResponse.status}: ${errorText}`
+            );
+            return new Response(null, {
+              status: 302,
+              headers: {
+                Location: `${returnPath}?spotify_error=token_exchange_failed&details=${errorParam}`,
+              },
+            });
+          }
 
-      console.log('Token exchange successful:', {
+          const tokens = await tokenResponse.json();
-        has_access_token: !!tokens.access_token,
-        has_refresh_token: !!tokens.refresh_token,
-        expires_in: tokens.expires_in,
-      })
 
-      console.log('Decoded return path:', returnPath);
+          console.log("Token exchange successful:", {
+            has_access_token: !!tokens.access_token,
+            has_refresh_token: !!tokens.refresh_token,
+            expires_in: tokens.expires_in,
+          });
 
-      const response = new Response(null, {
+          console.log("Decoded return path:", returnPath);
-        status: 302,
-        headers: {
-          'Location': returnPath + '?spotify_auth=success',
-        },
-      })
 
-      const isSecure = process.env.NODE_ENV === 'production'
+          const response = new Response(null, {
-      const cookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${tokens.expires_in}`
+            status: 302,
+            headers: {
+              Location: returnPath + "?spotify_auth=success",
+            },
+          });
 
-      response.headers.append('Set-Cookie', `spotify_access_token=${tokens.access_token}; ${cookieOptions}`)
+          const isSecure = import.meta.env.NODE_ENV === "production";
-      
+          const cookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${tokens.expires_in}`;
-      if (tokens.refresh_token) {
-        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}`)
-      }
 
-      return response
+          response.headers.append(
-    } catch (error) {
+            "Set-Cookie",
-      console.error('Spotify callback error:', error)
+            `spotify_access_token=${tokens.access_token}; ${cookieOptions}`
-      const url = new URL(request.url);
+          );
-      const state = url.searchParams.get('state');
+
-      const returnPath = getReturnPath(state);
+          if (tokens.refresh_token) {
-      return new Response(null, {
+            const refreshCookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${60 * 60 * 24 * 30}`; // 30 days
-        status: 302,
+            response.headers.append(
-        headers: {
+              "Set-Cookie",
-          'Location': returnPath + '?spotify_error=callback_failed',
+              `spotify_refresh_token=${tokens.refresh_token}; ${refreshCookieOptions}`
-        },
+            );
-      })
+          }
-    }
+
+          return response;
+        } catch (error) {
+          console.error("Spotify callback error:", error);
+          const url = new URL(request.url);
+          const state = url.searchParams.get("state");
+          const returnPath = getReturnPath(state);
+          return new Response(null, {
+            status: 302,
+            headers: {
+              Location: returnPath + "?spotify_error=callback_failed",
+            },
+          });
+        }
+      },
+    },
   },
-})
+});

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

@@ -1,59 +1,60 @@
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from "@tanstack/react-router";
-import { SpotifyWebApiClient } from '@/lib/spotify/client'
+import { SpotifyWebApiClient } from "@/lib/spotify/client";
-import type { SpotifyPlaybackSnapshot } from '@/lib/spotify/types'
+import type { SpotifyPlaybackSnapshot } from "@/lib/spotify/types";
 
-export const ServerRoute = createServerFileRoute('/api/spotify/capture').methods({
+export const Route = createFileRoute("/api/spotify/capture")({
-  POST: async ({ request }: { request: Request }) => {
+  server: {
-    try {
+    handlers: {
-      // Get access token from cookies
+      POST: async ({ request }: { request: Request }) => {
-      const cookies = request.headers.get('Cookie') || ''
+        try {
-      const accessTokenMatch = cookies.match(/spotify_access_token=([^;]+)/)
+          const cookies = request.headers.get("Cookie") || "";
-      
+          const accessTokenMatch = cookies.match(
-      if (!accessTokenMatch) {
+            /spotify_access_token=([^;]+)/
-        return new Response(
+          );
-          JSON.stringify({ error: 'No access token found' }),
+
-          { 
+          if (!accessTokenMatch) {
-            status: 401,
+            return new Response(
-            headers: { 'Content-Type': 'application/json' }
+              JSON.stringify({ error: "No access token found" }),
+              {
+                status: 401,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
           }
-        )
-      }
 
-      const accessToken = decodeURIComponent(accessTokenMatch[1])
+          const accessToken = decodeURIComponent(accessTokenMatch[1]);
-      const spotifyClient = new SpotifyWebApiClient(accessToken)
+          const spotifyClient = new SpotifyWebApiClient(accessToken);
 
-      // Create a snapshot of the current playback state
+          const snapshot = await spotifyClient.createPlaybackSnapshot();
-      const snapshot = await spotifyClient.createPlaybackSnapshot()
+
-      
+          if (!snapshot) {
-      if (!snapshot) {
+            return new Response(
-        return new Response(
+              JSON.stringify({ error: "No active playback to capture" }),
-          JSON.stringify({ error: 'No active playback to capture' }),
+              {
-          { 
+                status: 400,
-            status: 400,
+                headers: { "Content-Type": "application/json" },
-            headers: { 'Content-Type': 'application/json' }
+              }
+            );
           }
-        )
-      }
 
-      return new Response(
+          return new Response(JSON.stringify({ snapshot }), {
-        JSON.stringify({ snapshot }),
+            status: 200,
-        {
+            headers: { "Content-Type": "application/json" },
-          status: 200,
+          });
-          headers: { 'Content-Type': 'application/json' }
+        } catch (error) {
+          console.error("Spotify capture error:", error);
+
+          const errorMessage =
+            error instanceof Error
+              ? error.message
+              : "Failed to capture playback state";
+
+          return new Response(JSON.stringify({ error: errorMessage }), {
+            status: 500,
+            headers: { "Content-Type": "application/json" },
+          });
         }
-      )
+      },
-    } catch (error) {
+    },
-      console.error('Spotify capture error:', error)
-      
-      const errorMessage = error instanceof Error ? error.message : 'Failed to capture playback state'
-      
-      return new Response(
-        JSON.stringify({ error: errorMessage }),
-        {
-          status: 500,
-          headers: { 'Content-Type': 'application/json' }
-        }
-      )
-    }
   },
-})
+});

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

@@ -1,202 +1,203 @@
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from "@tanstack/react-router";
-import { SpotifyWebApiClient } from '@/lib/spotify/client'
+import { SpotifyWebApiClient } from "@/lib/spotify/client";
 
 function getAccessTokenFromCookies(request: Request): string | null {
-  const cookieHeader = request.headers.get('cookie')
+  const cookieHeader = request.headers.get("cookie");
-  if (!cookieHeader) return null
+  if (!cookieHeader) return null;
 
   const cookies = Object.fromEntries(
-    cookieHeader.split('; ').map(c => c.split('='))
+    cookieHeader.split("; ").map((c) => c.split("="))
-  )
+  );
 
-  return cookies.spotify_access_token || null
+  return cookies.spotify_access_token || null;
 }
 
-export const ServerRoute = createServerFileRoute('/api/spotify/playback').methods({
+export const Route = createFileRoute("/api/spotify/playback")({
-  POST: async ({ request }: { request: Request }) => {
+  server: {
-    try {
+    handlers: {
-      const accessToken = getAccessTokenFromCookies(request)
+      POST: async ({ request }: { request: Request }) => {
-      if (!accessToken) {
+        try {
-        return new Response(
+          const accessToken = getAccessTokenFromCookies(request);
-          JSON.stringify({ error: 'No access token found' }),
+          if (!accessToken) {
-          {
-            status: 401,
-            headers: { 'Content-Type': 'application/json' },
-          }
-        )
-      }
-
-      const body = await request.json()
-      const { action, deviceId, volumePercent, trackId, positionMs } = body
-
-      const spotifyClient = new SpotifyWebApiClient(accessToken)
-
-      switch (action) {
-        case 'play':
-          await spotifyClient.play(deviceId)
-          break
-        case 'playTrack':
-          if (!trackId) {
             return new Response(
-              JSON.stringify({ error: 'trackId is required for playTrack action' }),
+              JSON.stringify({ error: "No access token found" }),
               {
-                status: 400,
+                status: 401,
-                headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
               }
-            )
+            );
           }
-          await spotifyClient.playTrack(trackId, deviceId, positionMs)
+
-          break
+          const body = await request.json();
-        case 'pause':
+          const { action, deviceId, volumePercent, trackId, positionMs } = body;
-          await spotifyClient.pause()
+
-          break
+          const spotifyClient = new SpotifyWebApiClient(accessToken);
-        case 'next':
+
-          await spotifyClient.skipToNext()
+          switch (action) {
-          break
+            case "play":
-        case 'previous':
+              await spotifyClient.play(deviceId);
-          await spotifyClient.skipToPrevious()
+              break;
-          break
+            case "playTrack":
-        case 'volume':
+              if (!trackId) {
-          if (typeof volumePercent !== 'number') {
+                return new Response(
+                  JSON.stringify({
+                    error: "trackId is required for playTrack action",
+                  }),
+                  {
+                    status: 400,
+                    headers: { "Content-Type": "application/json" },
+                  }
+                );
+              }
+              await spotifyClient.playTrack(trackId, deviceId, positionMs);
+              break;
+            case "pause":
+              await spotifyClient.pause();
+              break;
+            case "next":
+              await spotifyClient.skipToNext();
+              break;
+            case "previous":
+              await spotifyClient.skipToPrevious();
+              break;
+            case "volume":
+              if (typeof volumePercent !== "number") {
+                return new Response(
+                  JSON.stringify({ error: "volumePercent must be a number" }),
+                  {
+                    status: 400,
+                    headers: { "Content-Type": "application/json" },
+                  }
+                );
+              }
+              await spotifyClient.setVolume(volumePercent);
+              break;
+            case "transfer":
+              if (!deviceId) {
+                return new Response(
+                  JSON.stringify({
+                    error: "deviceId is required for transfer action",
+                  }),
+                  {
+                    status: 400,
+                    headers: { "Content-Type": "application/json" },
+                  }
+                );
+              }
+              await spotifyClient.transferPlayback(deviceId);
+              break;
+            default:
+              return new Response(JSON.stringify({ error: "Invalid action" }), {
+                status: 400,
+                headers: { "Content-Type": "application/json" },
+              });
+          }
+
+          return new Response(JSON.stringify({ success: true }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          });
+        } catch (error) {
+          console.error("Playback control error:", error);
+
+          if (error instanceof Error) {
+            if (error.message.includes("NO_ACTIVE_DEVICE")) {
+              return new Response(
+                JSON.stringify({
+                  error:
+                    "No active device found. Please select a device first.",
+                }),
+                {
+                  status: 400,
+                  headers: { "Content-Type": "application/json" },
+                }
+              );
+            }
+
+            if (error.message.includes("PREMIUM_REQUIRED")) {
+              return new Response(
+                JSON.stringify({
+                  error: "Spotify Premium is required for playback control.",
+                }),
+                {
+                  status: 403,
+                  headers: { "Content-Type": "application/json" },
+                }
+              );
+            }
+
+            console.error("Full error details:", {
+              message: error.message,
+              stack: error.stack,
+              name: error.name,
+            });
+          }
+
+          return new Response(
+            JSON.stringify({
+              error: "Playback control failed",
+              details: error instanceof Error ? error.message : "Unknown error",
+            }),
+            {
+              status: 500,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
+        }
+      },
+
+      GET: async ({ request }: { request: Request }) => {
+        try {
+          const accessToken = getAccessTokenFromCookies(request);
+          if (!accessToken) {
             return new Response(
-              JSON.stringify({ error: 'volumePercent must be a number' }),
+              JSON.stringify({ error: "No access token found" }),
               {
-                status: 400,
+                status: 401,
-                headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
               }
-            )
+            );
           }
-          await spotifyClient.setVolume(volumePercent)
+
-          break
+          const url = new URL(request.url);
-        case 'transfer':
+          const type = url.searchParams.get("type");
-          if (!deviceId) {
+
-            return new Response(
+          const spotifyClient = new SpotifyWebApiClient(accessToken);
-              JSON.stringify({ error: 'deviceId is required for transfer action' }),
+
-              {
+          if (type === "devices") {
-                status: 400,
+            const devices = await spotifyClient.getDevices();
-                headers: { 'Content-Type': 'application/json' },
+            return new Response(JSON.stringify({ devices }), {
-              }
+              status: 200,
-            )
+              headers: { "Content-Type": "application/json" },
+            });
+          } else if (type === "state") {
+            const playbackState = await spotifyClient.getPlaybackState();
+            return new Response(JSON.stringify({ playbackState }), {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            });
+          } else {
+            const [devices, playbackState] = await Promise.all([
+              spotifyClient.getDevices(),
+              spotifyClient.getPlaybackState(),
+            ]);
+
+            return new Response(JSON.stringify({ devices, playbackState }), {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            });
           }
-          await spotifyClient.transferPlayback(deviceId)
+        } catch (error) {
-          break
+          console.error("Get playback data error:", error);
-        default:
           return new Response(
-            JSON.stringify({ error: 'Invalid action' }),
+            JSON.stringify({ error: "Failed to get playback data" }),
             {
-              status: 400,
+              status: 500,
-              headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
             }
-          )
+          );
-      }
-
-      return new Response(
-        JSON.stringify({ success: true }),
-        {
-          status: 200,
-          headers: { 'Content-Type': 'application/json' },
         }
-      )
+      },
-    } catch (error) {
+    },
-      console.error('Playback control error:', error)
-      
-      if (error instanceof Error) {
-        if (error.message.includes('NO_ACTIVE_DEVICE')) {
-          return new Response(
-            JSON.stringify({ error: 'No active device found. Please select a device first.' }),
-            {
-              status: 400,
-              headers: { 'Content-Type': 'application/json' },
-            }
-          )
-        }
-        
-        if (error.message.includes('PREMIUM_REQUIRED')) {
-          return new Response(
-            JSON.stringify({ error: 'Spotify Premium is required for playback control.' }),
-            {
-              status: 403,
-              headers: { 'Content-Type': 'application/json' },
-            }
-          )
-        }
-
-        console.error('Full error details:', {
-          message: error.message,
-          stack: error.stack,
-          name: error.name,
-        })
-      }
-
-      return new Response(
-        JSON.stringify({ error: 'Playback control failed', details: error instanceof Error ? error.message : 'Unknown error' }),
-        {
-          status: 500,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      )
-    }
   },
-
+});
-  GET: async ({ request }: { request: Request }) => {
-    try {
-      const accessToken = getAccessTokenFromCookies(request)
-      if (!accessToken) {
-        return new Response(
-          JSON.stringify({ error: 'No access token found' }),
-          {
-            status: 401,
-            headers: { 'Content-Type': 'application/json' },
-          }
-        )
-      }
-
-      const url = new URL(request.url)
-      const type = url.searchParams.get('type')
-
-      const spotifyClient = new SpotifyWebApiClient(accessToken)
-
-      if (type === 'devices') {
-        const devices = await spotifyClient.getDevices()
-        return new Response(
-          JSON.stringify({ devices }),
-          {
-            status: 200,
-            headers: { 'Content-Type': 'application/json' },
-          }
-        )
-      } else if (type === 'state') {
-        const playbackState = await spotifyClient.getPlaybackState()
-        return new Response(
-          JSON.stringify({ playbackState }),
-          {
-            status: 200,
-            headers: { 'Content-Type': 'application/json' },
-          }
-        )
-      } else {
-        const [devices, playbackState] = await Promise.all([
-          spotifyClient.getDevices(),
-          spotifyClient.getPlaybackState(),
-        ])
-
-        return new Response(
-          JSON.stringify({ devices, playbackState }),
-          {
-            status: 200,
-            headers: { 'Content-Type': 'application/json' },
-          }
-        )
-      }
-    } catch (error) {
-      console.error('Get playback data error:', error)
-      return new Response(
-        JSON.stringify({ error: 'Failed to get playback data' }),
-        {
-          status: 500,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      )
-    }
-  },
-})

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

@@ -1,72 +1,71 @@
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from "@tanstack/react-router";
-import { SpotifyWebApiClient } from '@/lib/spotify/client'
+import { SpotifyWebApiClient } from "@/lib/spotify/client";
-import type { SpotifyPlaybackSnapshot } from '@/lib/spotify/types'
+import type { SpotifyPlaybackSnapshot } from "@/lib/spotify/types";
 
-export const ServerRoute = createServerFileRoute('/api/spotify/resume').methods({
+export const Route = createFileRoute("/api/spotify/resume")({
-  POST: async ({ request }: { request: Request }) => {
+  server: {
-    try {
+    handlers: {
-      // Get access token from cookies
+      POST: async ({ request }: { request: Request }) => {
-      const cookies = request.headers.get('Cookie') || ''
+        try {
-      const accessTokenMatch = cookies.match(/spotify_access_token=([^;]+)/)
+          const cookies = request.headers.get("Cookie") || "";
-      
+          const accessTokenMatch = cookies.match(
-      if (!accessTokenMatch) {
+            /spotify_access_token=([^;]+)/
-        return new Response(
+          );
-          JSON.stringify({ error: 'No access token found' }),
+
-          { 
+          if (!accessTokenMatch) {
-            status: 401,
+            return new Response(
-            headers: { 'Content-Type': 'application/json' }
+              JSON.stringify({ error: "No access token found" }),
+              {
+                status: 401,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
           }
-        )
-      }
 
-      const accessToken = decodeURIComponent(accessTokenMatch[1])
+          const accessToken = decodeURIComponent(accessTokenMatch[1]);
-      const spotifyClient = new SpotifyWebApiClient(accessToken)
+          const spotifyClient = new SpotifyWebApiClient(accessToken);
 
-      // Parse the request body to get the snapshot
+          const body = await request.json();
-      const body = await request.json()
+          const { snapshot } = body as { snapshot: SpotifyPlaybackSnapshot };
-      const { snapshot } = body as { snapshot: SpotifyPlaybackSnapshot }
+
-      
+          if (!snapshot) {
-      if (!snapshot) {
+            return new Response(
-        return new Response(
+              JSON.stringify({ error: "No snapshot provided" }),
-          JSON.stringify({ error: 'No snapshot provided' }),
+              {
-          { 
+                status: 400,
-            status: 400,
+                headers: { "Content-Type": "application/json" },
-            headers: { 'Content-Type': 'application/json' }
+              }
+            );
           }
-        )
-      }
 
-      // Restore the playback state from the snapshot
+          await spotifyClient.restorePlaybackSnapshot(snapshot);
-      await spotifyClient.restorePlaybackSnapshot(snapshot)
 
-      return new Response(
+          return new Response(JSON.stringify({ success: true }), {
-        JSON.stringify({ success: true }),
+            status: 200,
-        {
+            headers: { "Content-Type": "application/json" },
-          status: 200,
+          });
-          headers: { 'Content-Type': 'application/json' }
+        } catch (error) {
+          console.error("Spotify resume error:", error);
+
+          let errorMessage = "Failed to resume playback state";
+
+          if (error instanceof Error) {
+            if (
+              error.message.includes("Premium") ||
+              error.message.includes("403")
+            ) {
+              errorMessage = "Spotify premium required";
+            } else {
+              errorMessage = error.message;
+            }
+          }
+
+          return new Response(JSON.stringify({ error: errorMessage }), {
+            status: 500,
+            headers: { "Content-Type": "application/json" },
+          });
         }
-      )
+      },
-    } catch (error) {
+    },
-      console.error('Spotify resume error:', error)
-      
-      let errorMessage = 'Failed to resume playback state'
-      
-      // Handle common Spotify Premium requirement error
-      if (error instanceof Error) {
-        if (error.message.includes('Premium') || error.message.includes('403')) {
-          errorMessage = 'Spotify Premium required for playback control'
-        } else {
-          errorMessage = error.message
-        }
-      }
-      
-      return new Response(
-        JSON.stringify({ error: errorMessage }),
-        {
-          status: 500,
-          headers: { 'Content-Type': 'application/json' }
-        }
-      )
-    }
   },
-})
+});

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

@@ -1,81 +1,87 @@
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from "@tanstack/react-router";
 
-// Function to get Client Credentials access token
 async function getClientCredentialsToken(): Promise<string> {
-  const clientId = process.env.VITE_SPOTIFY_CLIENT_ID
+  const clientId = import.meta.env.VITE_SPOTIFY_CLIENT_ID;
-  const clientSecret = process.env.SPOTIFY_CLIENT_SECRET
+  const clientSecret = import.meta.env.SPOTIFY_CLIENT_SECRET;
 
   if (!clientId || !clientSecret) {
-    throw new Error('Missing Spotify client credentials')
+    throw new Error("Missing Spotify client credentials");
   }
 
-  const response = await fetch('https://accounts.spotify.com/api/token', {
+  const response = await fetch("https://accounts.spotify.com/api/token", {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
+      "Content-Type": "application/x-www-form-urlencoded",
-      'Authorization': `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString('base64')}`,
+      Authorization: `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString("base64")}`,
     },
-    body: 'grant_type=client_credentials',
+    body: "grant_type=client_credentials",
-  })
+  });
 
   if (!response.ok) {
-    throw new Error('Failed to get Spotify access token')
+    throw new Error("Failed to get Spotify access token");
   }
 
-  const data = await response.json()
+  const data = await response.json();
-  return data.access_token
+  return data.access_token;
 }
 
-export const ServerRoute = createServerFileRoute('/api/spotify/search').methods({
+export const Route = createFileRoute("/api/spotify/search")({
-  GET: async ({ request }: { request: Request }) => {
+  server: {
-    try {
+    handlers: {
-      const url = new URL(request.url)
+      GET: async ({ request }: { request: Request }) => {
-      const query = url.searchParams.get('q')
+        try {
+          const url = new URL(request.url);
+          const query = url.searchParams.get("q");
 
-      if (!query) {
+          if (!query) {
-        return new Response(
+            return new Response(
-          JSON.stringify({ error: 'Query parameter q is required' }),
+              JSON.stringify({ error: "Query parameter q is required" }),
-          {
+              {
-            status: 400,
+                status: 400,
-            headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
+              }
+            );
           }
-        )
-      }
 
-      // Get client credentials access token
+          // Get client credentials access token
-      const accessToken = await getClientCredentialsToken()
+          const accessToken = await getClientCredentialsToken();
 
-      // Search using Spotify API directly
+          // Search using Spotify API directly
-      const searchUrl = `https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track&limit=20`
+          const searchUrl = `https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track&limit=20`;
 
-      const searchResponse = await fetch(searchUrl, {
+          const searchResponse = await fetch(searchUrl, {
-        headers: {
+            headers: {
-          'Authorization': `Bearer ${accessToken}`,
+              Authorization: `Bearer ${accessToken}`,
-        },
+            },
-      })
+          });
 
-      if (!searchResponse.ok) {
+          if (!searchResponse.ok) {
-        throw new Error('Spotify search request failed')
+            throw new Error("Spotify search request failed");
-      }
+          }
 
-      const searchResult = await searchResponse.json()
+          const searchResult = await searchResponse.json();
 
-      return new Response(
+          return new Response(
-        JSON.stringify({ tracks: searchResult.tracks.items }),
+            JSON.stringify({ tracks: searchResult.tracks.items }),
-        {
+            {
-          status: 200,
+              status: 200,
-          headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
+            }
+          );
+        } catch (error) {
+          console.error("Search error:", error);
+          return new Response(
+            JSON.stringify({
+              error: "Search failed",
+              details: error instanceof Error ? error.message : "Unknown error",
+            }),
+            {
+              status: 500,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
         }
-      )
+      },
-    } catch (error) {
+    },
-      console.error('Search error:', error)
-      return new Response(
-        JSON.stringify({ error: 'Search failed', details: error instanceof Error ? error.message : 'Unknown error' }),
-        {
-          status: 500,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      )
-    }
   },
-})
+});

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

@@ -1,125 +1,131 @@
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from "@tanstack/react-router";
 
-const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!
+const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!;
-const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!
+const SPOTIFY_CLIENT_SECRET = import.meta.env.SPOTIFY_CLIENT_SECRET!;
 
-export const ServerRoute = createServerFileRoute('/api/spotify/token').methods({
+export const Route = createFileRoute("/api/spotify/token")({
-  POST: async ({ request }: { request: Request }) => {
+  server: {
-    try {
+    handlers: {
-      const body = await request.json()
+      POST: async ({ request }: { request: Request }) => {
-      const { refresh_token } = body
+        try {
+          const body = await request.json();
+          const { refresh_token } = body;
 
-      if (!refresh_token) {
+          if (!refresh_token) {
-        return new Response(
+            return new Response(
-          JSON.stringify({ error: 'refresh_token is required' }),
+              JSON.stringify({ error: "refresh_token is required" }),
-          {
+              {
-            status: 400,
+                status: 400,
-            headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
+              }
+            );
           }
-        )
-      }
 
-      const tokenResponse = await fetch('https://accounts.spotify.com/api/token', {
+          const tokenResponse = await fetch(
-        method: 'POST',
+            "https://accounts.spotify.com/api/token",
-        headers: {
+            {
-          'Content-Type': 'application/x-www-form-urlencoded',
+              method: "POST",
-          'Authorization': `Basic ${Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString('base64')}`,
+              headers: {
-        },
+                "Content-Type": "application/x-www-form-urlencoded",
-        body: new URLSearchParams({
+                Authorization: `Basic ${Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString("base64")}`,
-          grant_type: 'refresh_token',
+              },
-          refresh_token,
+              body: new URLSearchParams({
-        }),
+                grant_type: "refresh_token",
-      })
+                refresh_token,
+              }),
+            }
+          );
 
-      if (!tokenResponse.ok) {
+          if (!tokenResponse.ok) {
-        const error = await tokenResponse.json()
+            const error = await tokenResponse.json();
-        console.error('Token refresh error:', error)
+            console.error("Token refresh error:", error);
-        return new Response(
+            return new Response(
-          JSON.stringify({ error: 'Failed to refresh token', details: error }),
+              JSON.stringify({
-          {
+                error: "Failed to refresh token",
-            status: tokenResponse.status,
+                details: error,
-            headers: { 'Content-Type': 'application/json' },
+              }),
+              {
+                status: tokenResponse.status,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
           }
-        )
-      }
 
-      const tokens = await tokenResponse.json()
+          const tokens = await tokenResponse.json();
 
-      return new Response(
+          return new Response(
-        JSON.stringify({
+            JSON.stringify({
-          access_token: tokens.access_token,
+              access_token: tokens.access_token,
-          expires_in: tokens.expires_in,
+              expires_in: tokens.expires_in,
-          scope: tokens.scope,
+              scope: tokens.scope,
-          token_type: tokens.token_type,
+              token_type: tokens.token_type,
-        }),
+            }),
-        {
+            {
-          status: 200,
+              status: 200,
-          headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
+            }
+          );
+        } catch (error) {
+          console.error("Token refresh endpoint error:", error);
+          return new Response(
+            JSON.stringify({ error: "Internal server error" }),
+            {
+              status: 500,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
         }
-      )
+      },
-    } catch (error) {
+
-      console.error('Token refresh endpoint error:', error)
+      GET: async ({ request }: { request: Request }) => {
-      return new Response(
+        try {
-        JSON.stringify({ error: 'Internal server error' }),
+          const cookieHeader = request.headers.get("cookie");
-        {
+          if (!cookieHeader) {
-          status: 500,
+            return new Response(JSON.stringify({ error: "No cookies found" }), {
-          headers: { 'Content-Type': 'application/json' },
+              status: 401,
+              headers: { "Content-Type": "application/json" },
+            });
+          }
+
+          const cookies = Object.fromEntries(
+            cookieHeader.split("; ").map((c: string) => c.split("="))
+          );
+
+          const accessToken = cookies.spotify_access_token;
+          const refreshToken = cookies.spotify_refresh_token;
+
+          if (!accessToken && !refreshToken) {
+            return new Response(
+              JSON.stringify({ error: "No Spotify tokens found" }),
+              {
+                status: 401,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          return new Response(
+            JSON.stringify({
+              access_token: accessToken || null,
+              refresh_token: refreshToken || null,
+              has_tokens: !!(accessToken || refreshToken),
+            }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
+        } catch (error) {
+          console.error("Get tokens endpoint error:", error);
+          return new Response(
+            JSON.stringify({ error: "Internal server error" }),
+            {
+              status: 500,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
         }
-      )
+      },
-    }
+    },
   },
-
+});
-  // GET endpoint to retrieve current tokens from cookies
-  GET: async ({ request }: { request: Request }) => {
-    try {
-      const cookieHeader = request.headers.get('cookie')
-      if (!cookieHeader) {
-        return new Response(
-          JSON.stringify({ error: 'No cookies found' }),
-          {
-            status: 401,
-            headers: { 'Content-Type': 'application/json' },
-          }
-        )
-      }
-
-      const cookies = Object.fromEntries(
-        cookieHeader.split('; ').map((c: string) => c.split('='))
-      )
-
-      const accessToken = cookies.spotify_access_token
-      const refreshToken = cookies.spotify_refresh_token
-
-      if (!accessToken && !refreshToken) {
-        return new Response(
-          JSON.stringify({ error: 'No Spotify tokens found' }),
-          {
-            status: 401,
-            headers: { 'Content-Type': 'application/json' },
-          }
-        )
-      }
-
-      return new Response(
-        JSON.stringify({
-          access_token: accessToken || null,
-          refresh_token: refreshToken || null,
-          has_tokens: !!(accessToken || refreshToken),
-        }),
-        {
-          status: 200,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      )
-    } catch (error) {
-      console.error('Get tokens endpoint error:', error)
-      return new Response(
-        JSON.stringify({ error: 'Internal server error' }),
-        {
-          status: 500,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      )
-    }
-  },
-})

src/app/routes/api/teams/upload-logo.ts

@@ -1,117 +1,148 @@
-import { createServerFileRoute } from '@tanstack/react-start/server';
+import { createFileRoute } from "@tanstack/react-router";
-import { superTokensRequestMiddleware } from '@/utils/supertokens';
+import { superTokensRequestMiddleware } from "@/utils/supertokens";
-import { pbAdmin } from '@/lib/pocketbase/client';
+import { pbAdmin } from "@/lib/pocketbase/client";
-import { logger } from '@/lib/logger';
+import { logger } from "@/lib/logger";
-import { z } from 'zod';
+import { z } from "zod";
 
 const uploadSchema = z.object({
-  teamId: z.string().min(1, 'Team ID is required'),
+  teamId: z.string().min(1, "Team ID is required"),
 });
 
-export const ServerRoute = createServerFileRoute('/api/teams/upload-logo')
+export const Route = createFileRoute("/api/teams/upload-logo")({
-  .middleware([superTokensRequestMiddleware])
+  server: {
-  .methods({
+    middleware: [superTokensRequestMiddleware],
-    POST: async ({ request, context }) => {
+    handlers: {
-      try {
+      POST: async ({ request, context }) => {
-        const userId = context.userAuthId;
+        try {
-        const isAdmin = context.roles.includes("Admin");
+          const userId = context.userAuthId;
+          const isAdmin = context.roles.includes("Admin");
 
-        if (!userId) return new Response('Unauthenticated', { status: 401 });
+          if (!userId) return new Response("Unauthenticated", { status: 401 });
 
-        const formData = await request.formData();
+          const formData = await request.formData();
-        const teamId = formData.get('teamId') as string;
+          const teamId = formData.get("teamId") as string;
-        const logoFile = formData.get('logo') as File;
+          const logoFile = formData.get("logo") as File;
 
-        const validationResult = uploadSchema.safeParse({ teamId });
+          const validationResult = uploadSchema.safeParse({ teamId });
-        if (!validationResult.success) {
+          if (!validationResult.success) {
-          return new Response(JSON.stringify({ 
+            return new Response(
-            error: 'Invalid input', 
+              JSON.stringify({
-            details: validationResult.error.issues 
+                error: "Invalid input",
-          }), { 
+                details: validationResult.error.issues,
-            status: 400, 
+              }),
-            headers: { 'Content-Type': 'application/json' }
+              {
+                status: 400,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          if (!logoFile || logoFile.size === 0) {
+            return new Response(
+              JSON.stringify({
+                error: "Logo file is required",
+              }),
+              {
+                status: 400,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          const allowedTypes = [
+            "image/jpeg",
+            "image/jpg",
+            "image/png",
+            "image/gif",
+          ];
+          if (!allowedTypes.includes(logoFile.type)) {
+            return new Response(
+              JSON.stringify({
+                error: "Invalid file type. Only JPEG, PNG and GIF are allowed.",
+              }),
+              {
+                status: 400,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          const maxSize = 10 * 1024 * 1024;
+          if (logoFile.size > maxSize) {
+            return new Response(
+              JSON.stringify({
+                error: "File too large. Maximum size is 10MB.",
+              }),
+              {
+                status: 400,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          const team = await pbAdmin.getTeam(teamId);
+          if (!team) {
+            return new Response(
+              JSON.stringify({
+                error: "Team not found",
+              }),
+              {
+                status: 404,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          const user = await pbAdmin.getPlayerByAuthId(userId);
+          if (!team.players.map((p) => p.id).includes(user?.id!) && !isAdmin)
+            return new Response("Unauthorized", { status: 403 });
+
+          logger.info("Uploading team logo", {
+            teamId,
+            fileName: logoFile.name,
+            fileSize: logoFile.size,
+            userId,
           });
-        }
 
-        if (!logoFile || logoFile.size === 0) {
+          const pbFormData = new FormData();
-          return new Response(JSON.stringify({ 
+          pbFormData.append("logo", logoFile);
-            error: 'Logo file is required' 
+
-          }), { 
+          const updatedTeam = await pbAdmin.updateTeam(
-            status: 400, 
+            teamId,
-            headers: { 'Content-Type': 'application/json' }
+            pbFormData as any
+          );
+
+          logger.info("Team logo uploaded successfully", {
+            teamId,
+            logo: updatedTeam.logo,
           });
+
+          return new Response(
+            JSON.stringify({
+              success: true,
+              team: updatedTeam,
+              message: "Logo uploaded successfully",
+            }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
+        } catch (error: any) {
+          logger.error("Error uploading team logo:", error);
+
+          return new Response(
+            JSON.stringify({
+              error: "Failed to upload logo",
+              message: error.message || "Unknown error occurred",
+            }),
+            {
+              status: 500,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
         }
-
+      },
-        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+    },
-        if (!allowedTypes.includes(logoFile.type)) {
+  },
-          return new Response(JSON.stringify({ 
+});
-            error: 'Invalid file type. Only JPEG, PNG and GIF are allowed.' 
-          }), { 
-            status: 400, 
-            headers: { 'Content-Type': 'application/json' }
-          });
-        }
-
-        const maxSize = 10 * 1024 * 1024;
-        if (logoFile.size > maxSize) {
-          return new Response(JSON.stringify({ 
-            error: 'File too large. Maximum size is 10MB.' 
-          }), { 
-            status: 400, 
-            headers: { 'Content-Type': 'application/json' }
-          });
-        }
-
-        const team = await pbAdmin.getTeam(teamId);
-        if (!team) {
-          return new Response(JSON.stringify({ 
-            error: 'Team not found' 
-          }), { 
-            status: 404, 
-            headers: { 'Content-Type': 'application/json' }
-          });
-        }
-        
-        const user = await pbAdmin.getPlayerByAuthId(context.userAuthId)
-        if (!team.players.map(p => p.id).includes(user!.id) && !isAdmin)
-          return new Response('Unauthorized', { status: 403 });
-
-        logger.info('Uploading team logo', { 
-          teamId, 
-          fileName: logoFile.name,
-          fileSize: logoFile.size,
-          userId 
-        });
-
-        const pbFormData = new FormData();
-        pbFormData.append('logo', logoFile);
-
-        const updatedTeam= await pbAdmin.updateTeam(teamId, pbFormData as any);
-
-        logger.info('Team logo uploaded successfully', { 
-          teamId, 
-          logo: updatedTeam.logo
-        });
-
-        return new Response(JSON.stringify({ 
-          success: true,
-          team: updatedTeam,
-          message: 'Logo uploaded successfully'
-        }), {
-          status: 200,
-          headers: { 'Content-Type': 'application/json' }
-        });
-
-      } catch (error: any) {
-        logger.error('Error uploading team logo:', error);
-        
-        return new Response(JSON.stringify({ 
-          error: 'Failed to upload logo',
-          message: error.message || 'Unknown error occurred'
-        }), { 
-          status: 500, 
-          headers: { 'Content-Type': 'application/json' }
-        });
-      }
-    }
-  });

src/app/routes/api/tournaments/upload-logo.ts

@@ -1,115 +1,145 @@
-import { createServerFileRoute } from '@tanstack/react-start/server';
+import { createFileRoute } from "@tanstack/react-router";
-import { superTokensRequestMiddleware } from '@/utils/supertokens';
+import { superTokensRequestMiddleware } from "@/utils/supertokens";
-import { pbAdmin } from '@/lib/pocketbase/client';
+import { pbAdmin } from "@/lib/pocketbase/client";
-import { logger } from '@/lib/logger';
+import { logger } from "@/lib/logger";
-import { z } from 'zod';
+import { z } from "zod";
 
 const uploadSchema = z.object({
-  tournamentId: z.string().min(1, 'Tournament ID is required'),
+  tournamentId: z.string().min(1, "Tournament ID is required"),
 });
 
-export const ServerRoute = createServerFileRoute('/api/tournaments/upload-logo')
+export const Route = createFileRoute("/api/tournaments/upload-logo")({
-  .middleware([superTokensRequestMiddleware])
+  server: {
-  .methods({
+    middleware: [superTokensRequestMiddleware],
-    POST: async ({ request, context }) => {
+    handlers: {
-      try {
+      POST: async ({ request, context }) => {
-        const userId = context.userAuthId;
+        try {
-        const isAdmin = context.roles.includes("Admin");
+          const userId = context.userAuthId;
+          const isAdmin = context.roles.includes("Admin");
 
-        if (!userId) return new Response('Unauthenticated', { status: 401 });
+          if (!userId) return new Response("Unauthenticated", { status: 401 });
-        if (!isAdmin) return new Response('Unauthorized', { status: 403 });
+          if (!isAdmin) return new Response("Unauthorized", { status: 403 });
 
-        const formData = await request.formData();
+          const formData = await request.formData();
-        const tournamentId = formData.get('tournamentId') as string;
+          const tournamentId = formData.get("tournamentId") as string;
-        const logoFile = formData.get('logo') as File;
+          const logoFile = formData.get("logo") as File;
 
-        const validationResult = uploadSchema.safeParse({ tournamentId });
+          const validationResult = uploadSchema.safeParse({ tournamentId });
-        if (!validationResult.success) {
+          if (!validationResult.success) {
-          return new Response(JSON.stringify({ 
+            return new Response(
-            error: 'Invalid input', 
+              JSON.stringify({
-            details: validationResult.error.issues 
+                error: "Invalid input",
-          }), { 
+                details: validationResult.error.issues,
-            status: 400, 
+              }),
-            headers: { 'Content-Type': 'application/json' }
+              {
+                status: 400,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          if (!logoFile || logoFile.size === 0) {
+            return new Response(
+              JSON.stringify({
+                error: "Logo file is required",
+              }),
+              {
+                status: 400,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          const allowedTypes = [
+            "image/jpeg",
+            "image/jpg",
+            "image/png",
+            "image/gif",
+          ];
+          if (!allowedTypes.includes(logoFile.type)) {
+            return new Response(
+              JSON.stringify({
+                error: "Invalid file type. Only JPEG, PNG and GIF are allowed.",
+              }),
+              {
+                status: 400,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          const maxSize = 10 * 1024 * 1024;
+          if (logoFile.size > maxSize) {
+            return new Response(
+              JSON.stringify({
+                error: "File too large. Maximum size is 10MB.",
+              }),
+              {
+                status: 400,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          const tournament = await pbAdmin.getTournament(tournamentId);
+          if (!tournament) {
+            return new Response(
+              JSON.stringify({
+                error: "Tournament not found",
+              }),
+              {
+                status: 404,
+                headers: { "Content-Type": "application/json" },
+              }
+            );
+          }
+
+          logger.info("Uploading tournament logo", {
+            tournamentId,
+            fileName: logoFile.name,
+            fileSize: logoFile.size,
+            userId,
           });
-        }
 
-        if (!logoFile || logoFile.size === 0) {
+          const pbFormData = new FormData();
-          return new Response(JSON.stringify({ 
+          pbFormData.append("logo", logoFile);
-            error: 'Logo file is required' 
+
-          }), { 
+          const updatedTournament = await pbAdmin.updateTournament(
-            status: 400, 
+            tournamentId,
-            headers: { 'Content-Type': 'application/json' }
+            pbFormData as any
+          );
+
+          logger.info("Tournament logo uploaded successfully", {
+            tournamentId,
+            logo: updatedTournament.logo,
           });
+
+          return new Response(
+            JSON.stringify({
+              success: true,
+              tournament: updatedTournament,
+              message: "Logo uploaded successfully",
+            }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
+        } catch (error: any) {
+          logger.error("Error uploading tournament logo:", error);
+
+          return new Response(
+            JSON.stringify({
+              error: "Failed to upload logo",
+              message: error.message || "Unknown error occurred",
+            }),
+            {
+              status: 500,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
         }
-
+      },
-        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+    },
-        if (!allowedTypes.includes(logoFile.type)) {
+  },
-          return new Response(JSON.stringify({ 
+});
-            error: 'Invalid file type. Only JPEG, PNG and GIF are allowed.' 
-          }), { 
-            status: 400, 
-            headers: { 'Content-Type': 'application/json' }
-          });
-        }
-
-        const maxSize = 10 * 1024 * 1024;
-        if (logoFile.size > maxSize) {
-          return new Response(JSON.stringify({ 
-            error: 'File too large. Maximum size is 10MB.' 
-          }), { 
-            status: 400, 
-            headers: { 'Content-Type': 'application/json' }
-          });
-        }
-
-        const tournament = await pbAdmin.getTournament(tournamentId);
-        if (!tournament) {
-          return new Response(JSON.stringify({ 
-            error: 'Tournament not found' 
-          }), { 
-            status: 404, 
-            headers: { 'Content-Type': 'application/json' }
-          });
-        }
-
-
-        logger.info('Uploading tournament logo', { 
-          tournamentId, 
-          fileName: logoFile.name,
-          fileSize: logoFile.size,
-          userId 
-        });
-
-        const pbFormData = new FormData();
-        pbFormData.append('logo', logoFile);
-
-        const updatedTournament = await pbAdmin.updateTournament(tournamentId, pbFormData as any);
-
-        logger.info('Tournament logo uploaded successfully', { 
-          tournamentId, 
-          logo: updatedTournament.logo
-        });
-
-        return new Response(JSON.stringify({ 
-          success: true,
-          tournament: updatedTournament,
-          message: 'Logo uploaded successfully'
-        }), {
-          status: 200,
-          headers: { 'Content-Type': 'application/json' }
-        });
-
-      } catch (error: any) {
-        logger.error('Error uploading tournament logo:', error);
-        
-        return new Response(JSON.stringify({ 
-          error: 'Failed to upload logo',
-          message: error.message || 'Unknown error occurred'
-        }), { 
-          status: 500, 
-          headers: { 'Content-Type': 'application/json' }
-        });
-      }
-    }
-  });

src/app/routes/refresh-session.tsx

@@ -1,38 +1,33 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import FullScreenLoader from '@/components/full-screen-loader'
 import { attemptRefreshingSession } from 'supertokens-web-js/recipe/session'
+import { resetRefreshFlag } from '@/lib/supertokens/client'
 
 export const Route = createFileRoute('/refresh-session')({
   component: RouteComponent,
 })
 
-// https://supertokens.com/docs/additional-verification/session-verification/ssr?uiType=custom
 function RouteComponent() {
+  const hasAttemptedRef = useRef(false);
+
   useEffect(() => {
+    if (hasAttemptedRef.current) return;
+    hasAttemptedRef.current = true;
+
     const handleRefresh = async () => {
-      try {        
+      try {
+        resetRefreshFlag();
         const refreshed = await attemptRefreshingSession()
-        
+
         if (refreshed) {
           const urlParams = new URLSearchParams(window.location.search)
           const redirect = urlParams.get('redirect')
-          
+
-          const isServerFunction = redirect && (
+          if (redirect && !redirect.includes('_serverFn') && !redirect.includes('/api/')) {
-            redirect.startsWith('_serverFn') || 
-            redirect.startsWith('api/') ||
-            redirect.includes('_serverFn')
-          );
-          
-          if (redirect && !isServerFunction) {
             window.location.href = decodeURIComponent(redirect)
           } else {
-            const referrer = document.referrer;
+            window.location.href = '/';
-            const referrerUrl = referrer && !referrer.includes('/_serverFn') && !referrer.includes('/api/') 
-              ? referrer 
-              : '/';
-            
-            window.location.href = referrerUrl;
           }
         } else {
           window.location.href = '/login'
@@ -42,8 +37,7 @@ function RouteComponent() {
       }
     }
 
-    const timeout = setTimeout(handleRefresh, 100)
+    setTimeout(handleRefresh, 100)
-    return () => clearTimeout(timeout)
   }, [])
 
   return <FullScreenLoader />

src/contexts/auth-context.tsx

@@ -58,13 +58,13 @@ export const AuthProvider: React.FC<PropsWithChildren> = ({ children }) => {
 
   const value = useMemo(
     () => ({
-      user: data?.user || defaultAuthData.user,
+      user: data?.user,
-      metadata: data?.metadata || defaultAuthData.metadata,
+      metadata: data?.metadata || { accentColor: "blue" as MantineColor, colorScheme: "dark" as MantineColorScheme },
-      roles: data?.roles || defaultAuthData.roles,
+      roles: data?.roles || [],
       phone: data?.phone || "",
       set,
     }),
-    [data, defaultAuthData]
+    [data, set]
   );
 
   return <AuthContext value={value}>{children}</AuthContext>;

src/contexts/spotify-context.tsx

@@ -438,6 +438,7 @@ export const SpotifyProvider: React.FC<PropsWithChildren> = ({ children }) => {
     activeDevice,
     isLoading,
     error,
+    // Capture/Resume state
     capturedState,
     isCaptureLoading,
     isResumeLoading,
@@ -452,9 +453,11 @@ export const SpotifyProvider: React.FC<PropsWithChildren> = ({ children }) => {
     getDevices,
     setActiveDevice,
     refreshPlaybackState,
+    // Capture/Resume methods
     capturePlaybackState,
     resumePlaybackState,
     clearCapturedState,
+    // Search
     searchTracks,
   };
 

src/features/bracket/server.ts

@@ -9,7 +9,7 @@ import { toServerResult } from "@/lib/tanstack-query/utils/to-server-result";
 const logger = new Logger("Bracket Generation");
 
 export const previewBracket = createServerFn()
-  .validator(z.number())
+  .inputValidator(z.number())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: teams }) =>
     toServerResult(async () => {

src/features/matches/server.ts

@@ -16,7 +16,7 @@ const orderedTeamsSchema = z.object({
 });
 
 export const generateTournamentBracket = createServerFn()
-  .validator(orderedTeamsSchema)
+  .inputValidator(orderedTeamsSchema)
   .middleware([superTokensAdminFunctionMiddleware])
   .handler(async ({ data: { tournamentId, orderedTeamIds } }) =>
     toServerResult(async () => {
@@ -137,7 +137,7 @@ export const generateTournamentBracket = createServerFn()
   );
 
 export const startMatch = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensAdminFunctionMiddleware])
   .handler(async ({ data }) =>
     toServerResult(async () => {
@@ -170,7 +170,7 @@ const endMatchSchema = z.object({
   ot_count: z.number(),
 });
 export const endMatch = createServerFn()
-  .validator(endMatchSchema)
+  .inputValidator(endMatchSchema)
   .middleware([superTokensAdminFunctionMiddleware])
   .handler(async ({ data: { matchId, home_cups, away_cups, ot_count } }) =>
     toServerResult(async () => {
@@ -252,7 +252,7 @@ const toggleReactionSchema = z.object({
 });
 
 export const toggleMatchReaction = createServerFn()
-  .validator(toggleReactionSchema)
+  .inputValidator(toggleReactionSchema)
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: { matchId, emoji }, context }) =>
     toServerResult(async () => {
@@ -312,7 +312,7 @@ export interface Reaction {
   players: PlayerInfo[];
 }
 export const getMatchReactions = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: matchId, context }) =>
     toServerResult(async () => {

src/features/players/queries.ts

@@ -60,7 +60,6 @@ export const useMe = () => {
           const errorData = error?.response?.data;
           if (errorData?.error === "SESSION_REFRESH_REQUIRED") {
             const currentUrl = window.location.pathname + window.location.search;
-            console.log('redirecting 3')
             window.location.href = `/refresh-session?redirect=${encodeURIComponent(currentUrl)}`;
             return false;
           }

src/features/players/server.ts

@@ -5,13 +5,13 @@ import { Match } from "@/features/matches/types";
 import { pbAdmin } from "@/lib/pocketbase/client";
 import { z } from "zod";
 import { logger } from ".";
-import { getWebRequest } from "@tanstack/react-start/server";
+import { getRequest } from "@tanstack/react-start/server";
 import { toServerResult } from "@/lib/tanstack-query/utils/to-server-result";
 
 export const fetchMe = createServerFn()
   .handler(async () => 
     toServerResult(async () => {
-      const request = getWebRequest();
+      const request = getRequest();
       
       try {
         const context = await getSessionContext(request);
@@ -25,7 +25,7 @@ export const fetchMe = createServerFn()
           phone: context.phone
         };
       } catch (error: any) {
-        logger.info("FetchMe: Session error", error)
+        // logger.info("FetchMe: Session error", error)
         if (error?.response?.status === 401) {
           const errorData = error?.response?.data;
           if (errorData?.error === "SESSION_REFRESH_REQUIRED") {
@@ -38,14 +38,14 @@ export const fetchMe = createServerFn()
   );
 
 export const getPlayer = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data }) => 
     toServerResult<Player>(async () => await pbAdmin.getPlayer(data))
   );
 
 export const updatePlayer = createServerFn()
-  .validator(playerUpdateSchema)
+  .inputValidator(playerUpdateSchema)
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ context, data }) => 
     toServerResult(async () => {
@@ -72,7 +72,7 @@ export const updatePlayer = createServerFn()
   );
 
 export const createPlayer = createServerFn()
-  .validator(playerInputSchema)
+  .inputValidator(playerInputSchema)
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ context, data }) => 
     toServerResult(async () => {
@@ -97,7 +97,7 @@ export const createPlayer = createServerFn()
   );
 
 export const associatePlayer = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ context, data }) => 
     toServerResult(async () => {
@@ -129,7 +129,7 @@ export const getUnassociatedPlayers = createServerFn()
   );
 
 export const getPlayerStats = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data }) =>
     toServerResult<PlayerStats>(async () => await pbAdmin.getPlayerStats(data))
@@ -142,14 +142,14 @@ export const getAllPlayerStats = createServerFn()
   );
 
 export const getPlayerMatches = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data }) =>
     toServerResult<Match[]>(async () => await pbAdmin.getPlayerMatches(data))
   );
 
 export const getUnenrolledPlayers = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: tournamentId }) =>
     toServerResult(async () => await pbAdmin.getUnenrolledPlayers(tournamentId))

src/features/teams/server.ts

@@ -15,21 +15,21 @@ export const listTeamInfos = createServerFn()
   );
 
 export const getTeam = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: teamId }) => 
     toServerResult(() => pbAdmin.getTeam(teamId))
   );
 
 export const getTeamInfo = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: teamId }) => 
     toServerResult(() => pbAdmin.getTeamInfo(teamId))
   );
 
 export const createTeam = createServerFn()
-  .validator(teamInputSchema)
+  .inputValidator(teamInputSchema)
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data, context }) => 
     toServerResult(async () => {
@@ -46,7 +46,7 @@ export const createTeam = createServerFn()
   );
 
 export const updateTeam = createServerFn()
-  .validator(z.object({
+  .inputValidator(z.object({
     id: z.string(),
     updates: teamUpdateSchema
   }))
@@ -72,14 +72,14 @@ export const updateTeam = createServerFn()
   );
 
 export const getTeamStats = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: teamId }) =>
     toServerResult(() => pbAdmin.getTeamStats(teamId))
   );
 
 export const getTeamMatches = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data }) =>
     toServerResult<Match[]>(async () => await pbAdmin.getTeamMatches(data))

src/features/tournaments/server.ts

@@ -13,14 +13,14 @@ export const listTournaments = createServerFn()
   );
 
 export const createTournament = createServerFn()
-  .validator(tournamentInputSchema)
+  .inputValidator(tournamentInputSchema)
   .middleware([superTokensAdminFunctionMiddleware])
   .handler(async ({ data }) => 
     toServerResult(() => pbAdmin.createTournament(data))
   );
 
 export const updateTournament = createServerFn()
-  .validator(z.object({
+  .inputValidator(z.object({
     id: z.string(),
     updates: tournamentInputSchema.partial()
   }))
@@ -30,7 +30,7 @@ export const updateTournament = createServerFn()
   );
 
 export const getTournament = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: tournamentId, context }) => {
     const isAdmin = context.roles.includes("Admin");
@@ -44,7 +44,7 @@ export const getCurrentTournament = createServerFn()
   );
 
 export const enrollTeam = createServerFn()
-  .validator(z.object({
+  .inputValidator(z.object({
     tournamentId: z.string(),
     teamId: z.string()
   }))
@@ -70,7 +70,7 @@ export const enrollTeam = createServerFn()
   );
 
 export const unenrollTeam = createServerFn()
-  .validator(z.object({
+  .inputValidator(z.object({
     tournamentId: z.string(),
     teamId: z.string()
   }))
@@ -80,21 +80,21 @@ export const unenrollTeam = createServerFn()
   );
 
 export const getUnenrolledTeams = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
   .middleware([superTokensAdminFunctionMiddleware])
   .handler(async ({ data: tournamentId }) => 
     toServerResult(() => pbAdmin.getUnenrolledTeams(tournamentId))
   );
 
 export const getFreeAgents = createServerFn()
-  .validator(z.string())
+  .inputValidator(z.string())
-  .middleware([superTokensAdminFunctionMiddleware])
+  .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: tournamentId }) => 
     toServerResult(() => pbAdmin.getFreeAgents(tournamentId))
   );
 
 export const enrollFreeAgent = createServerFn()
-  .validator(z.object({ phone: z.string(), tournamentId: z.string() }))
+  .inputValidator(z.object({ phone: z.string(), tournamentId: z.string() }))
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ context, data }) =>
     toServerResult(async () => {
@@ -108,7 +108,7 @@ export const enrollFreeAgent = createServerFn()
   );
 
 export const unenrollFreeAgent = createServerFn()
-  .validator(z.object({ tournamentId: z.string() }))
+  .inputValidator(z.object({ tournamentId: z.string() }))
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ context, data }) =>
     toServerResult(async () => {

src/hooks/use-server-events.ts

@@ -37,6 +37,7 @@ export function useServerEvents() {
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
+    if (typeof window === 'undefined') return;
     if (!user?.id) return;
 
     shouldConnectRef.current = true;

src/lib/logger/index.ts

@@ -46,7 +46,7 @@ class Logger {
   constructor(context?: string, options: LoggerOptions = {}) {
     this.context = context;
     this.options = {
-      enabled: process.env.NODE_ENV !== "production",
+      enabled: import.meta.env.NODE_ENV !== "production",
       showTimestamp: true,
       collapsed: true,
       colors: true,

src/lib/pocketbase/client.ts

@@ -4,6 +4,8 @@ import { createTournamentsService } from "./services/tournaments";
 import { createTeamsService } from "./services/teams";
 import { createMatchesService } from "./services/matches";
 import { createReactionsService } from "./services/reactions";
+import dotenv from 'dotenv';
+dotenv.config();
 
 class PocketBaseAdminClient {
   private pb: PocketBase;

src/lib/supertokens/client.ts

@@ -4,6 +4,31 @@ import Passwordless from "supertokens-web-js/recipe/passwordless";
 import { appInfo } from "./config";
 import { logger } from "./";
 
+let refreshAttemptCount = 0;
+
+export const resetRefreshFlag = () => {
+  refreshAttemptCount = 0;
+};
+
+const setupFetchInterceptor = () => {
+  if (typeof window === 'undefined') return;
+
+  const originalFetch = window.fetch;
+  window.fetch = async (resource: RequestInfo | URL, options?: RequestInit) => {
+    const url = typeof resource === 'string' ? resource :
+                resource instanceof URL ? resource.toString() : resource.url;
+
+    if (url.includes('/api/auth/session/refresh')) {
+      refreshAttemptCount++;
+      if (refreshAttemptCount > 1) {
+        throw new Error('Duplicate refresh attempt blocked');
+      }
+    }
+
+    return originalFetch.call(window, resource, options);
+  };
+};
+
 export const frontendConfig = () => {
   return {
     appInfo,
@@ -12,7 +37,6 @@ export const frontendConfig = () => {
       Session.init({
         tokenTransferMethod: "cookie",
         sessionTokenBackendDomain: undefined,
-
         preAPIHook: async (context) => {
           context.requestInit.credentials = "include";
           return context;
@@ -23,16 +47,14 @@ export const frontendConfig = () => {
 };
 
 let initialized = false;
+
 export function ensureSuperTokensFrontend() {
   if (typeof window === "undefined") return;
 
   if (!initialized) {
+    setupFetchInterceptor();
     SuperTokens.init(frontendConfig());
     initialized = true;
-    logger.info("Initialized");
+    logger.info("SuperTokens initialized");
-
-    Session.doesSessionExist().then((exists) => {
-      logger.info(`Session does${exists ? "" : "NOT"} exist on load!`);
-    });
   }
 }

src/lib/supertokens/server.ts

@@ -6,6 +6,7 @@ import UserRoles from "supertokens-node/recipe/userroles";
 import { appInfo } from "./config";
 import PasswordlessDevelopmentMode from "./recipes/passwordless-development-mode";
 import { logger } from "./";
+import passwordlessTwilioVerify from "./recipes/passwordless-twilio-verify";
 
 export const backendConfig = (): TypeInput => {
   return {
@@ -19,10 +20,10 @@ export const backendConfig = (): TypeInput => {
       PasswordlessDevelopmentMode.init(),
       Session.init({
         cookieSameSite: "lax",
-        cookieSecure: process.env.NODE_ENV === "production",
+        cookieSecure: import.meta.env.NODE_ENV === "production",
         cookieDomain:
-          process.env.NODE_ENV === "production" ? ".example.com" : undefined,
+          import.meta.env.NODE_ENV === "production" ? ".example.com" : undefined,
-        antiCsrf: process.env.NODE_ENV === "production" ? "VIA_TOKEN" : "NONE",
+        antiCsrf: import.meta.env.NODE_ENV === "production" ? "VIA_TOKEN" : "NONE",
 
         // Debug only
         exposeAccessTokenToFrontendInCookieBasedAuth: true,
@@ -30,13 +31,13 @@ export const backendConfig = (): TypeInput => {
       Dashboard.init(),
       UserRoles.init(),
     ],
-    telemetry: process.env.NODE_ENV !== "production",
+    telemetry: import.meta.env.NODE_ENV !== "production",
   };
 };
 
 let initialized = false;
 export function ensureSuperTokensBackend() {
-  if (!initialized) {
+  if (!initialized && typeof window === 'undefined') {
     SuperTokens.init(backendConfig());
     initialized = true;
     logger.simple("Backend initialized");

src/lib/tanstack-query/hooks/use-server-mutation.ts

@@ -2,6 +2,8 @@ import { useMutation, UseMutationOptions } from "@tanstack/react-query";
 import { ServerResult } from "../types";
 import toast from '@/lib/sonner'
 
+let isMutationRefreshingSession = false;
+
 export function useServerMutation<TData, TVariables = unknown>(
   options: Omit<UseMutationOptions<TData, Error, TVariables>, 'mutationFn'> & {
     mutationFn: (variables: TVariables) => Promise<ServerResult<TData>>;
@@ -42,9 +44,14 @@ export function useServerMutation<TData, TVariables = unknown>(
               : error.response.data;
             
             if (errorData?.error === "SESSION_REFRESH_REQUIRED") {
-              const currentUrl = window.location.pathname + window.location.search;
+              if (!isMutationRefreshingSession) {
-              window.location.href = `/refresh-session?redirect=${encodeURIComponent(currentUrl)}`;
+                isMutationRefreshingSession = true;
-              console.log('redirecting 2')
+                const currentUrl = window.location.pathname + window.location.search;
+                setTimeout(() => {
+                  isMutationRefreshingSession = false;
+                }, 1000);
+                window.location.href = `/refresh-session?redirect=${encodeURIComponent(currentUrl)}`;
+              }
               throw new Error("SESSION_REFRESH_REQUIRED");
             }
           } catch (parseError) {}

src/lib/twilio/index.ts

@@ -1,13 +1,23 @@
-import twilio from "twilio";
+import type { Twilio } from "twilio";
 
 const accountSid = process.env.TWILIO_ACCOUNT_SID!;
 const authToken = process.env.TWILIO_AUTH_TOKEN!;
 const serviceSid = process.env.TWILIO_SERVICE_SID!;
 
-const client = twilio(accountSid, authToken);
+let client: Twilio;
+
+function getTwilioClient() {
+  if (!client) {
+    const twilio = require("twilio");
+    client = twilio(accountSid, authToken);
+  }
+  return client;
+}
 
 export async function sendVerifyCode(phoneNumber: string, code: string) {
-  const verification = await client.verify.v2
+  const twilioClient = getTwilioClient();
+  
+  const verification = await twilioClient!.verify.v2
     .services(serviceSid)
     .verifications.create({
       channel: "sms",
@@ -23,7 +33,9 @@ export async function sendVerifyCode(phoneNumber: string, code: string) {
 }
 
 export async function updateVerify(sid: string) {
-  const verification = await client.verify.v2
+  const twilioClient = getTwilioClient();
+  
+  const verification = await twilioClient!.verify.v2
     .services(serviceSid)
     .verifications(sid)
     .update({ status: "approved" });
@@ -31,4 +43,4 @@ export async function updateVerify(sid: string) {
   if (verification.status !== "approved") {
     throw new Error("Unknown error updating verification");
   }
-}
+}

src/utils/supertokens.ts

@@ -1,48 +1,25 @@
 import {
   createMiddleware,
   createServerFn,
-  ServerFnResponseType,
+  createServerOnlyFn,
 } from "@tanstack/react-start";
-import { getWebRequest } from "@tanstack/react-start/server";
+import { getRequest, setResponseHeader } from "@tanstack/react-start/server";
 import { redirect as redirect } from "@tanstack/react-router";
 import UserRoles from "supertokens-node/recipe/userroles";
 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");
 
-export const verifySuperTokensSession = async (
+const verifySuperTokensSession = async (
-  request: Request,
+  request: Request
-  response?: ServerFnResponseType
 ) => {
   let session = await getSessionForStart(request, { sessionRequired: false });
 
   if (session?.needsRefresh) {
-    logger.info("Session needs refresh");
+    logger.info("Session needs refresh - redirecting to client");
-    
+    return { context: { session: { tryRefresh: true } } };
-    try {
-      if (response) {
-        const refreshedSession = await refreshSession(request, response);
-        if (refreshedSession) {
-          session = await getSessionForStart(request, { sessionRequired: false });
-        }
-      }
-      
-      if (session?.needsRefresh) {
-        return { context: { session: { tryRefresh: true } } };
-      }
-    } catch (error: any) {
-      logger.error("Session refresh error", error);
-      
-      if (error.type === 'UNAUTHORISED' || error.type === 'TOKEN_THEFT_DETECTED') {
-        return { context: { userAuthId: null, roles: [] } };
-      }
-      
-      return { context: { session: { tryRefresh: true } } };
-    }
   }
   
   const userAuthId = session?.userId;
@@ -69,7 +46,7 @@ export const verifySuperTokensSession = async (
   };
 };
 
-export const getSessionContext = async (request: Request, options?: { isServerFunction?: boolean }) => {
+export const getSessionContext = createServerOnlyFn(async (request: Request, options?: { isServerFunction?: boolean }) => {
   const session = await verifySuperTokensSession(request);
 
   if (session.context.session?.tryRefresh) {
@@ -79,7 +56,6 @@ export const getSessionContext = async (request: Request, options?: { isServerFu
     
     const url = new URL(request.url);
     const from = encodeURIComponent(url.pathname + url.search);
-    console.log('redirecting')
     throw redirect({ 
       to: "/refresh-session", 
       search: { redirect: from }
@@ -99,7 +75,7 @@ export const getSessionContext = async (request: Request, options?: { isServerFu
   };
 
   return context;
-};
+});
 
 export const superTokensRequestMiddleware = createMiddleware({
   type: "request",
@@ -110,8 +86,8 @@ export const superTokensRequestMiddleware = createMiddleware({
 
 export const superTokensFunctionMiddleware = createMiddleware({
   type: "function",
-}).server(async ({ next, response }) => {
+}).server(async ({ next }) => {
-  const request = getWebRequest();
+  const request = getRequest();
   
   try {
     const context = await getSessionContext(request, { isServerFunction: true });
@@ -136,7 +112,7 @@ export const superTokensFunctionMiddleware = createMiddleware({
 export const superTokensAdminFunctionMiddleware = createMiddleware({
   type: "function",
 }).server(async ({ next }) => {
-  const request = getWebRequest();
+  const request = getRequest();
   
   try {
     const context = await getSessionContext(request, { isServerFunction: true });
@@ -170,7 +146,7 @@ export const fetchUserRoles = async (userAuthId: string) => {
 };
 
 export const setUserMetadata = createServerFn({ method: "POST" })
-  .validator(
+  .inputValidator(
     z
       .object({
         first_name: z
@@ -213,7 +189,7 @@ export const setUserMetadata = createServerFn({ method: "POST" })
   });
 
 export const updateUserColorScheme = createServerFn({ method: "POST" })
-  .validator((data: string) => data)
+  .inputValidator((data: string) => data)
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ context, data }) => {
     const { userAuthId, metadata } = context;
@@ -232,7 +208,7 @@ export const updateUserColorScheme = createServerFn({ method: "POST" })
   });
 
 export const updateUserAccentColor = createServerFn({ method: "POST" })
-  .validator((data: string) => data)
+  .inputValidator((data: string) => data)
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ context, data }) => {
     const { userAuthId, metadata } = context;

vite.config.ts

@@ -6,23 +6,15 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   server: {
     port: 3000,
+    allowedHosts: ["dev.flexxon.app"]
   },
   plugins: [
     tsConfigPaths({
       projects: ['./tsconfig.json'],
     }),
     tanstackStart({
-      customViteReactPlugin: true,
+      srcDirectory: 'src/app',
-      tsr: {
-        srcDirectory: 'src/app',
-      },
     }),
     react()
-  ],
+  ]
-  build: {
-    target: 'esnext',
-  },
-  ssr: {
-    target: 'node',
-  }
 })