name blurbs, skeleton and link

.gitignore

@@ -20,3 +20,4 @@ yarn.lock
 /scripts/
 /pb_data/
 /.tanstack/
+/dist/

docker-compose.yml

@@ -32,17 +32,17 @@ services:
       - app-network
     restart: unless-stopped
     
-  redis:
+  #redis:
-    image: redis:7-alpine
+  #  image: redis:7-alpine
-    container_name: redis-cache
+  #  container_name: redis-cache
-    ports:
+  #  ports:
-      - "6379:6379"
+  #    - "6379:6379"
-    command: redis-server --appendonly yes
+  #  command: redis-server --appendonly yes
-    volumes:
+  #  volumes:
-      - redis-data:/data
+  #    - redis-data:/data
-    networks:
+  #  networks:
-      - app-network
+  #    - app-network
-    restart: unless-stopped
+  #  restart: unless-stopped
 
   supertokens:
     image: registry.supertokens.io/supertokens/supertokens-postgresql
@@ -51,6 +51,7 @@ services:
       - postgres
     environment:
       POSTGRESQL_CONNECTION_URI: postgresql://supertokens:password@postgres:5432/supertokens
+      ACCESS_TOKEN_VALIDITY: 360000
     ports:
       - "3567:3567"
     env_file:

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite dev --host 0.0.0.0",
     "build": "vite build && tsc --noEmit",
-    "start": "vite start"
+    "start": "bun run .output/server/index.mjs",
+    "start:node": "node .output/server/index.mjs"
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
@@ -19,17 +20,21 @@
     "@mantine/tiptap": "^8.2.4",
     "@phosphor-icons/react": "^2.1.10",
     "@svgmoji/noto": "^3.2.0",
+    "@tanstack/react-devtools": "^0.7.6",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@tanstack/react-router": "^1.130.12",
     "@tanstack/react-router-devtools": "^1.130.13",
     "@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",
+    "@types/bun": "^1.2.22",
     "@types/ioredis": "^4.28.10",
+    "browser-image-compression": "^2.0.2",
+    "dotenv": "^17.2.2",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.12",
     "ioredis": "^5.7.0",
@@ -47,10 +52,13 @@
     "supertokens-web-js": "^0.15.0",
     "twilio": "^5.8.0",
     "vaul": "^1.1.2",
+    "xlsx": "^0.18.5",
     "zod": "^4.0.15",
     "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 +71,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"
   }
 }

pb_migrations/1758379630_created_badges.js

@@ -0,0 +1,85 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1843675174",
+        "max": 0,
+        "min": 0,
+        "name": "description",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_1340419796",
+    "indexes": [],
+    "listRule": null,
+    "name": "badges",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1340419796");
+
+  return app.delete(collection);
+})

pb_migrations/1758380013_updated_players.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // add field
+  collection.fields.addAt(5, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_1340419796",
+    "hidden": false,
+    "id": "relation2029409178",
+    "maxSelect": 999,
+    "minSelect": 0,
+    "name": "badges",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // remove field
+  collection.fields.removeById("relation2029409178")
+
+  return app.save(collection)
+})

pb_migrations/1758385120_updated_players.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // add field
+  collection.fields.addAt(6, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_1340419796",
+    "hidden": false,
+    "id": "relation2813965191",
+    "maxSelect": 1,
+    "minSelect": 0,
+    "name": "featured_badge",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // remove field
+  collection.fields.removeById("relation2813965191")
+
+  return app.save(collection)
+})

pb_migrations/1758388728_created_free_agents.js

@@ -0,0 +1,84 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2551806565",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "player",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1146066909",
+        "max": 0,
+        "min": 0,
+        "name": "phone",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_2929550049",
+    "indexes": [],
+    "listRule": null,
+    "name": "free_agents",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2929550049");
+
+  return app.delete(collection);
+})

pb_migrations/1758402128_updated_free_agents.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2929550049")
+
+  // add field
+  collection.fields.addAt(3, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_340646327",
+    "hidden": false,
+    "id": "relation3177167065",
+    "maxSelect": 1,
+    "minSelect": 0,
+    "name": "tournament",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2929550049")
+
+  // remove field
+  collection.fields.removeById("relation3177167065")
+
+  return app.save(collection)
+})

pb_migrations/1758402424_updated_tournaments.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("relation1584152981")
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(11, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_3072146508",
+    "hidden": false,
+    "id": "relation1584152981",
+    "maxSelect": 999,
+    "minSelect": 0,
+    "name": "free_agents",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+})

pb_migrations/1758575563_updated_free_agents.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2929550049")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "deleteRule": "",
+    "listRule": "",
+    "updateRule": "",
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2929550049")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "deleteRule": null,
+    "listRule": null,
+    "updateRule": null,
+    "viewRule": null
+  }, collection)
+
+  return app.save(collection)
+})

pb_migrations/1758575597_updated_free_agents.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2929550049")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "deleteRule": null,
+    "listRule": null,
+    "updateRule": null,
+    "viewRule": null
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2929550049")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "deleteRule": "",
+    "listRule": "",
+    "updateRule": "",
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+})

pb_migrations/1759244692_created_activities.js

@@ -0,0 +1,108 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "json4225120046",
+        "maxSize": 0,
+        "name": "arguments",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2551806565",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "player",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3293145029",
+        "max": 0,
+        "min": 0,
+        "name": "user_agent",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_1262591861",
+    "indexes": [],
+    "listRule": null,
+    "name": "activities",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1262591861");
+
+  return app.delete(collection);
+})

pb_migrations/1759245857_updated_activities.js

@@ -0,0 +1,27 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1262591861")
+
+  // add field
+  collection.fields.addAt(5, new Field({
+    "hidden": false,
+    "id": "number2254405824",
+    "max": null,
+    "min": null,
+    "name": "duration",
+    "onlyInt": false,
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "number"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1262591861")
+
+  // remove field
+  collection.fields.removeById("number2254405824")
+
+  return app.save(collection)
+})

pb_migrations/1759246171_updated_activities.js

@@ -0,0 +1,43 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1262591861")
+
+  // add field
+  collection.fields.addAt(6, new Field({
+    "hidden": false,
+    "id": "bool1862328242",
+    "name": "success",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "bool"
+  }))
+
+  // add field
+  collection.fields.addAt(7, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "text1574812785",
+    "max": 0,
+    "min": 0,
+    "name": "error",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1262591861")
+
+  // remove field
+  collection.fields.removeById("bool1862328242")
+
+  // remove field
+  collection.fields.removeById("text1574812785")
+
+  return app.save(collection)
+})

pb_migrations/1759340868_updated_badges.js

@@ -0,0 +1,27 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1340419796")
+
+  // add field
+  collection.fields.addAt(7, new Field({
+    "hidden": false,
+    "id": "number4113142680",
+    "max": null,
+    "min": null,
+    "name": "order",
+    "onlyInt": false,
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "number"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1340419796")
+
+  // remove field
+  collection.fields.removeById("number4113142680")
+
+  return app.save(collection)
+})

pb_migrations/1759344923_updated_players.js

@@ -0,0 +1,46 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // remove field
+  collection.fields.removeById("relation2029409178")
+
+  // remove field
+  collection.fields.removeById("relation2813965191")
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // add field
+  collection.fields.addAt(5, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_1340419796",
+    "hidden": false,
+    "id": "relation2029409178",
+    "maxSelect": 999,
+    "minSelect": 0,
+    "name": "badges",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  // add field
+  collection.fields.addAt(6, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_1340419796",
+    "hidden": false,
+    "id": "relation2813965191",
+    "maxSelect": 1,
+    "minSelect": 0,
+    "name": "featured_badge",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+})

pb_migrations/1759344938_deleted_player_badge_progress.js

@@ -0,0 +1,129 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4251874343");
+
+  return app.delete(collection);
+}, (app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": true,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2847519201",
+        "maxSelect": 1,
+        "minSelect": 1,
+        "name": "player_id",
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "cascadeDelete": true,
+        "collectionId": "pbc_1340419796",
+        "hidden": false,
+        "id": "relation3948571039",
+        "maxSelect": 1,
+        "minSelect": 1,
+        "name": "badge_id",
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "number1847293057",
+        "max": null,
+        "min": 0,
+        "name": "current_progress",
+        "onlyInt": false,
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "number2948571040",
+        "max": null,
+        "min": 1,
+        "name": "target_progress",
+        "onlyInt": false,
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "bool3049672141",
+        "name": "is_earned",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "bool"
+      },
+      {
+        "hidden": false,
+        "id": "date1150773242",
+        "max": "",
+        "min": "",
+        "name": "earned_at",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "date"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_4251874343",
+    "indexes": [
+      "CREATE UNIQUE INDEX `idx_unique_player_badge` ON `player_badge_progress` (`player_id`, `badge_id`)"
+    ],
+    "listRule": null,
+    "name": "player_badge_progress",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+})

pb_migrations/1759344944_deleted_badges.js

@@ -0,0 +1,173 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1340419796");
+
+  return app.delete(collection);
+}, (app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": true,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1843675174",
+        "max": 0,
+        "min": 0,
+        "name": "description",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": true,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "select4029814376",
+        "maxSelect": 1,
+        "name": "type",
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "select",
+        "values": [
+          "tournament_participation",
+          "tournament_placement",
+          "performance",
+          "overtime",
+          "match_milestone"
+        ]
+      },
+      {
+        "hidden": false,
+        "id": "json1578432567",
+        "maxSize": 2000000,
+        "name": "criteria",
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3928475610",
+        "max": 50,
+        "min": 0,
+        "name": "icon",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1847293056",
+        "max": 50,
+        "min": 0,
+        "name": "color",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "number4113142680",
+        "max": null,
+        "min": null,
+        "name": "order",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "bool2847519203",
+        "name": "is_progressive",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "bool"
+      },
+      {
+        "hidden": false,
+        "id": "number2948571038",
+        "max": null,
+        "min": null,
+        "name": "progress_target",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_1340419796",
+    "indexes": [],
+    "listRule": null,
+    "name": "badges",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+})

pb_migrations/1759345060_created_badges.js

@@ -0,0 +1,145 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text2324736937",
+        "max": 0,
+        "min": 0,
+        "name": "key",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1843675174",
+        "max": 0,
+        "min": 0,
+        "name": "description",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "json3055524737",
+        "maxSize": 0,
+        "name": "criteria",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "select2363381545",
+        "maxSelect": 1,
+        "name": "type",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "select",
+        "values": [
+          "manual",
+          "match",
+          "tournament"
+        ]
+      },
+      {
+        "hidden": false,
+        "id": "bool3646955747",
+        "name": "progressive",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "bool"
+      },
+      {
+        "hidden": false,
+        "id": "number4113142680",
+        "max": null,
+        "min": null,
+        "name": "order",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_1340419796",
+    "indexes": [],
+    "listRule": null,
+    "name": "badges",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1340419796");
+
+  return app.delete(collection);
+})

pb_migrations/1759345122_created_player_badge_progress.js

@@ -0,0 +1,104 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_1340419796",
+        "hidden": false,
+        "id": "relation4277159965",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "badge",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2551806565",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "player",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "number570552902",
+        "max": null,
+        "min": null,
+        "name": "progress",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "bool2625885481",
+        "name": "earned",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "bool"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_1063824264",
+    "indexes": [],
+    "listRule": null,
+    "name": "player_badge_progress",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1063824264");
+
+  return app.delete(collection);
+})

pb_migrations/1759345318_updated_player_badge_progress.js

@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1063824264")
+
+  // update collection data
+  unmarshal({
+    "name": "badge_progress"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1063824264")
+
+  // update collection data
+  unmarshal({
+    "name": "player_badge_progress"
+  }, collection)
+
+  return app.save(collection)
+})

pb_migrations/1759594431_updated_tournaments.js

@@ -0,0 +1,29 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(10, new Field({
+    "hidden": false,
+    "id": "file538556518",
+    "maxSelect": 1,
+    "maxSize": 0,
+    "mimeTypes": [],
+    "name": "glitch_logo",
+    "presentable": false,
+    "protected": false,
+    "required": false,
+    "system": false,
+    "thumbs": [],
+    "type": "file"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("file538556518")
+
+  return app.save(collection)
+})

pb_migrations/1759594880_updated_tournaments.js

@@ -0,0 +1,42 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // update field
+  collection.fields.addAt(10, new Field({
+    "hidden": false,
+    "id": "file538556518",
+    "maxSelect": 1,
+    "maxSize": 6000000,
+    "mimeTypes": [],
+    "name": "glitch_logo",
+    "presentable": false,
+    "protected": false,
+    "required": false,
+    "system": false,
+    "thumbs": [],
+    "type": "file"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // update field
+  collection.fields.addAt(10, new Field({
+    "hidden": false,
+    "id": "file538556518",
+    "maxSelect": 1,
+    "maxSize": 0,
+    "mimeTypes": [],
+    "name": "glitch_logo",
+    "presentable": false,
+    "protected": false,
+    "required": false,
+    "system": false,
+    "thumbs": [],
+    "type": "file"
+  }))
+
+  return app.save(collection)
+})

pb_migrations/1760127117_updated_players.js

@@ -0,0 +1,26 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // add field
+  collection.fields.addAt(5, new Field({
+    "hidden": false,
+    "id": "date3558165700",
+    "max": "",
+    "min": "",
+    "name": "last_activity",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "date"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // remove field
+  collection.fields.removeById("date3558165700")
+
+  return app.save(collection)
+})

pb_migrations/1760556705_updated_teams.js

@@ -0,0 +1,24 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1568971955")
+
+  // add field
+  collection.fields.addAt(14, new Field({
+    "hidden": false,
+    "id": "bool3523658193",
+    "name": "private",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "bool"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1568971955")
+
+  // remove field
+  collection.fields.removeById("bool3523658193")
+
+  return app.save(collection)
+})

pb_migrations/1760556851_updated_tournaments.js

@@ -0,0 +1,24 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(12, new Field({
+    "hidden": false,
+    "id": "bool3403970290",
+    "name": "regional",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "bool"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("bool3403970290")
+
+  return app.save(collection)
+})

pb_migrations/1760556905_updated_tournaments.js

@@ -0,0 +1,31 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(13, new Field({
+    "hidden": false,
+    "id": "select3736761055",
+    "maxSelect": 1,
+    "name": "format",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "single_elim",
+      "double_elim",
+      "groups",
+      "swiss"
+    ]
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("select3736761055")
+
+  return app.save(collection)
+})

pb_migrations/1760559911_created_player_regional_stats.js

@@ -0,0 +1,165 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 0,
+        "min": 0,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2582050271",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "player_id",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "json4231605813",
+        "maxSize": 1,
+        "name": "player_name",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "number103159226",
+        "max": null,
+        "min": null,
+        "name": "matches",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "number3837590211",
+        "max": null,
+        "min": null,
+        "name": "tournaments",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "json2732118329",
+        "maxSize": 1,
+        "name": "wins",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json724428801",
+        "maxSize": 1,
+        "name": "losses",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3154249934",
+        "maxSize": 1,
+        "name": "total_cups_made",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3227208027",
+        "maxSize": 1,
+        "name": "total_cups_against",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json2379943496",
+        "maxSize": 1,
+        "name": "win_percentage",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3165107022",
+        "maxSize": 1,
+        "name": "avg_cups_per_match",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3041953980",
+        "maxSize": 1,
+        "name": "margin_of_victory",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json1531431708",
+        "maxSize": 1,
+        "name": "margin_of_loss",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      }
+    ],
+    "id": "pbc_4086490894",
+    "indexes": [],
+    "listRule": null,
+    "name": "player_regional_stats",
+    "system": false,
+    "type": "view",
+    "updateRule": null,
+    "viewQuery": "SELECT\n      p.id as id,\n      p.id as player_id,\n      (p.first_name || ' ' || p.last_name) as player_name,\n      COUNT(m.id) as matches,\n      COUNT(DISTINCT m.tournament) as tournaments,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) as wins,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups < m.away_cups) OR\n               (m.away = t.id AND m.away_cups < m.home_cups)\n          THEN 1 ELSE 0\n      END) as losses,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) as total_cups_made,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.away_cups\n          WHEN m.away = t.id THEN m.home_cups\n          ELSE 0\n      END) as total_cups_against,\n      -- Win percentage\n      ROUND((CAST(SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) AS REAL) / COUNT(m.id)) * 100, 2) as win_percentage,\n      -- Average cups per match\n      ROUND(CAST(SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) AS REAL) / COUNT(m.id), 2) as avg_cups_per_match,\n      -- Margin of Victory\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups > m.away_cups\n          THEN m.home_cups - m.away_cups\n          WHEN m.away = t.id AND m.away_cups > m.home_cups\n          THEN m.away_cups - m.home_cups\n          ELSE NULL\n      END), 2) as margin_of_victory,\n      -- Margin of Loss\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups < m.away_cups\n          THEN m.away_cups - m.home_cups\n          WHEN m.away = t.id AND m.away_cups < m.home_cups\n          THEN m.home_cups - m.away_cups\n          ELSE NULL\n      END), 2) as margin_of_loss\n  FROM players p, teams t, matches m, tournaments tour\n  WHERE\n      t.players LIKE '%\"' || p.id || '\"%' AND\n      (m.home = t.id OR m.away = t.id) AND\n      m.tournament = tour.id AND\n      m.status = 'ended' AND\n      tour.regional = true\n  GROUP BY p.id",
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4086490894");
+
+  return app.delete(collection);
+})

pb_migrations/1760559954_created_player_mainline_stats.js

@@ -0,0 +1,165 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 0,
+        "min": 0,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2582050271",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "player_id",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "json4231605813",
+        "maxSize": 1,
+        "name": "player_name",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "number103159226",
+        "max": null,
+        "min": null,
+        "name": "matches",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "number3837590211",
+        "max": null,
+        "min": null,
+        "name": "tournaments",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "json2732118329",
+        "maxSize": 1,
+        "name": "wins",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json724428801",
+        "maxSize": 1,
+        "name": "losses",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3154249934",
+        "maxSize": 1,
+        "name": "total_cups_made",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3227208027",
+        "maxSize": 1,
+        "name": "total_cups_against",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json2379943496",
+        "maxSize": 1,
+        "name": "win_percentage",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3165107022",
+        "maxSize": 1,
+        "name": "avg_cups_per_match",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3041953980",
+        "maxSize": 1,
+        "name": "margin_of_victory",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json1531431708",
+        "maxSize": 1,
+        "name": "margin_of_loss",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      }
+    ],
+    "id": "pbc_15286826",
+    "indexes": [],
+    "listRule": null,
+    "name": "player_mainline_stats",
+    "system": false,
+    "type": "view",
+    "updateRule": null,
+    "viewQuery": "SELECT\n      p.id as id,\n      p.id as player_id,\n      (p.first_name || ' ' || p.last_name) as player_name,\n      COUNT(m.id) as matches,\n      COUNT(DISTINCT m.tournament) as tournaments,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) as wins,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups < m.away_cups) OR\n               (m.away = t.id AND m.away_cups < m.home_cups)\n          THEN 1 ELSE 0\n      END) as losses,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) as total_cups_made,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.away_cups\n          WHEN m.away = t.id THEN m.home_cups\n          ELSE 0\n      END) as total_cups_against,\n      -- Win percentage\n      ROUND((CAST(SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) AS REAL) / COUNT(m.id)) * 100, 2) as win_percentage,\n      -- Average cups per match\n      ROUND(CAST(SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) AS REAL) / COUNT(m.id), 2) as avg_cups_per_match,\n      -- Margin of Victory\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups > m.away_cups\n          THEN m.home_cups - m.away_cups\n          WHEN m.away = t.id AND m.away_cups > m.home_cups\n          THEN m.away_cups - m.home_cups\n          ELSE NULL\n      END), 2) as margin_of_victory,\n      -- Margin of Loss\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups < m.away_cups\n          THEN m.away_cups - m.home_cups\n          WHEN m.away = t.id AND m.away_cups < m.home_cups\n          THEN m.home_cups - m.away_cups\n          ELSE NULL\n      END), 2) as margin_of_loss\n  FROM players p, teams t, matches m, tournaments tour\n  WHERE\n      t.players LIKE '%\"' || p.id || '\"%' AND\n      (m.home = t.id OR m.away = t.id) AND\n      m.tournament = tour.id AND\n      m.status = 'ended' AND\n      (tour.regional = false OR tour.regional IS NULL)\n  GROUP BY p.id",
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_15286826");
+
+  return app.delete(collection);
+})

pb_migrations/1760585178_updated_tournaments.js

@@ -0,0 +1,48 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // update field
+  collection.fields.addAt(13, new Field({
+    "hidden": false,
+    "id": "select3736761055",
+    "maxSelect": 1,
+    "name": "format",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "single_elim",
+      "double_elim",
+      "groups",
+      "swiss",
+      "swiss_bracket",
+      "round_robin"
+    ]
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // update field
+  collection.fields.addAt(13, new Field({
+    "hidden": false,
+    "id": "select3736761055",
+    "maxSelect": 1,
+    "name": "format",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "single_elim",
+      "double_elim",
+      "groups",
+      "swiss"
+    ]
+  }))
+
+  return app.save(collection)
+})

public/site.webmanifest

@@ -1,14 +1,14 @@
 {
-  "name": "",
+  "name": "FLXN IX",
-  "short_name": "",
+  "short_name": "FLXN",
   "icons": [
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "/favicon.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/android-chrome-512x512.png",
+      "src": "/favicon.png",
       "sizes": "512x512",
       "type": "image/png"
     }

server.ts

@@ -0,0 +1,366 @@
+/**
+ * TanStack Start Production Server with Bun
+ *
+ * A high-performance production server for TanStack Start applications that
+ * implements intelligent static asset loading with configurable memory management.
+ *
+ * Features:
+ * - Hybrid loading strategy (preload small files, serve large files on-demand)
+ * - Configurable file filtering with include/exclude patterns
+ * - Memory-efficient response generation
+ * - Production-ready caching headers
+ *
+ * Environment Variables:
+ *
+ * PORT (number)
+ *   - Server port number
+ *   - Default: 3000
+ *
+ * STATIC_PRELOAD_MAX_BYTES (number)
+ *   - Maximum file size in bytes to preload into memory
+ *   - Files larger than this will be served on-demand from disk
+ *   - Default: 5242880 (5MB)
+ *   - Example: STATIC_PRELOAD_MAX_BYTES=5242880 (5MB)
+ *
+ * STATIC_PRELOAD_INCLUDE (string)
+ *   - Comma-separated list of glob patterns for files to include
+ *   - If specified, only matching files are eligible for preloading
+ *   - Patterns are matched against filenames only, not full paths
+ *   - Example: STATIC_PRELOAD_INCLUDE="*.js,*.css,*.woff2"
+ *
+ * STATIC_PRELOAD_EXCLUDE (string)
+ *   - Comma-separated list of glob patterns for files to exclude
+ *   - Applied after include patterns
+ *   - Patterns are matched against filenames only, not full paths
+ *   - Example: STATIC_PRELOAD_EXCLUDE="*.map,*.txt"
+ *
+ * STATIC_PRELOAD_VERBOSE (boolean)
+ *   - Enable detailed logging of loaded and skipped files
+ *   - Default: false
+ *   - Set to "true" to enable verbose output
+ *
+ * Usage:
+ *   bun run server.ts
+ */
+
+import { readdir } from 'node:fs/promises'
+import { join } from 'node:path'
+
+// Configuration
+const PORT = Number(process.env.PORT ?? 3000)
+const CLIENT_DIR = './dist/client'
+const SERVER_ENTRY = './dist/server/server.js'
+
+// Preloading configuration from environment variables
+const MAX_PRELOAD_BYTES = Number(
+  process.env.STATIC_PRELOAD_MAX_BYTES ?? 5 * 1024 * 1024, // 5MB default
+)
+
+// Parse comma-separated include patterns (no defaults)
+const INCLUDE_PATTERNS = (process.env.STATIC_PRELOAD_INCLUDE ?? '')
+  .split(',')
+  .map((s) => s.trim())
+  .filter(Boolean)
+  .map(globToRegExp)
+
+// Parse comma-separated exclude patterns (no defaults)
+const EXCLUDE_PATTERNS = (process.env.STATIC_PRELOAD_EXCLUDE ?? '')
+  .split(',')
+  .map((s) => s.trim())
+  .filter(Boolean)
+  .map(globToRegExp)
+
+// Verbose logging flag
+const VERBOSE = process.env.STATIC_PRELOAD_VERBOSE === 'true'
+
+/**
+ * Convert a simple glob pattern to a regular expression
+ * Supports * wildcard for matching any characters
+ */
+function globToRegExp(glob: string): RegExp {
+  // Escape regex special chars except *, then replace * with .*
+  const escaped = glob
+    .replace(/[-/\\^$+?.()|[\]{}]/g, '\\$&')
+    .replace(/\*/g, '.*')
+  return new RegExp(`^${escaped}$`, 'i')
+}
+
+/**
+ * Metadata for preloaded static assets
+ */
+interface AssetMetadata {
+  route: string
+  size: number
+  type: string
+}
+
+/**
+ * Result of static asset preloading process
+ */
+interface PreloadResult {
+  routes: Record<string, () => Response>
+  loaded: Array<AssetMetadata>
+  skipped: Array<AssetMetadata>
+}
+
+/**
+ * Check if a file should be included based on configured patterns
+ */
+function shouldInclude(relativePath: string): boolean {
+  const fileName = relativePath.split(/[/\\]/).pop() ?? relativePath
+
+  // If include patterns are specified, file must match at least one
+  if (INCLUDE_PATTERNS.length > 0) {
+    if (!INCLUDE_PATTERNS.some((pattern) => pattern.test(fileName))) {
+      return false
+    }
+  }
+
+  // If exclude patterns are specified, file must not match any
+  if (EXCLUDE_PATTERNS.some((pattern) => pattern.test(fileName))) {
+    return false
+  }
+
+  return true
+}
+
+/**
+ * Build static routes with intelligent preloading strategy
+ * Small files are loaded into memory, large files are served on-demand
+ */
+async function buildStaticRoutes(clientDir: string): Promise<PreloadResult> {
+  const routes: Record<string, () => Response> = {}
+  const loaded: Array<AssetMetadata> = []
+  const skipped: Array<AssetMetadata> = []
+
+  console.log(`📦 Loading static assets from ${clientDir}...`)
+  console.log(
+    `   Max preload size: ${(MAX_PRELOAD_BYTES / 1024 / 1024).toFixed(2)} MB`,
+  )
+  if (INCLUDE_PATTERNS.length > 0) {
+    console.log(
+      `   Include patterns: ${process.env.STATIC_PRELOAD_INCLUDE ?? ''}`,
+    )
+  }
+  if (EXCLUDE_PATTERNS.length > 0) {
+    console.log(
+      `   Exclude patterns: ${process.env.STATIC_PRELOAD_EXCLUDE ?? ''}`,
+    )
+  }
+
+  let totalPreloadedBytes = 0
+
+  try {
+    // Read all files recursively
+    const files = await readdir(clientDir, { recursive: true })
+
+    for (const relativePath of files) {
+      const filepath = join(clientDir, relativePath)
+      const route = '/' + relativePath.replace(/\\/g, '/') // Handle Windows paths
+
+      try {
+        // Get file metadata
+        const file = Bun.file(filepath)
+
+        // Skip if file doesn't exist or is empty
+        if (!(await file.exists()) || file.size === 0) {
+          continue
+        }
+
+        const metadata: AssetMetadata = {
+          route,
+          size: file.size,
+          type: file.type || 'application/octet-stream',
+        }
+
+        // Determine if file should be preloaded
+        const matchesPattern = shouldInclude(relativePath)
+        const withinSizeLimit = file.size <= MAX_PRELOAD_BYTES
+
+        if (matchesPattern && withinSizeLimit) {
+          // Preload small files into memory
+          const bytes = await file.bytes()
+
+          routes[route] = () =>
+            new Response(bytes, {
+              headers: {
+                'Content-Type': metadata.type,
+                'Cache-Control': 'public, max-age=31536000, immutable',
+              },
+            })
+
+          loaded.push({ ...metadata, size: bytes.byteLength })
+          totalPreloadedBytes += bytes.byteLength
+        } else {
+          // Serve large or filtered files on-demand
+          routes[route] = () => {
+            const fileOnDemand = Bun.file(filepath)
+            return new Response(fileOnDemand, {
+              headers: {
+                'Content-Type': metadata.type,
+                'Cache-Control': 'public, max-age=3600',
+              },
+            })
+          }
+
+          skipped.push(metadata)
+        }
+      } catch (error: unknown) {
+        if (error instanceof Error && error.name !== 'EISDIR') {
+          console.error(`❌ Failed to load ${filepath}:`, error)
+        }
+      }
+    }
+
+    // Always show file overview in Vite-like format first
+    if (loaded.length > 0 || skipped.length > 0) {
+      const allFiles = [...loaded, ...skipped].sort((a, b) =>
+        a.route.localeCompare(b.route),
+      )
+
+      // Calculate max path length for alignment
+      const maxPathLength = Math.min(
+        Math.max(...allFiles.map((f) => f.route.length)),
+        60,
+      )
+
+      // Format file size with KB and gzip estimation
+      const formatFileSize = (bytes: number) => {
+        const kb = bytes / 1024
+        // Rough gzip estimation (typically 30-70% compression)
+        const gzipKb = kb * 0.35
+        return {
+          size: kb < 100 ? kb.toFixed(2) : kb.toFixed(1),
+          gzip: gzipKb < 100 ? gzipKb.toFixed(2) : gzipKb.toFixed(1),
+        }
+      }
+
+      if (loaded.length > 0) {
+        console.log('\n📁 Preloaded into memory:')
+        loaded
+          .sort((a, b) => a.route.localeCompare(b.route))
+          .forEach((file) => {
+            const { size, gzip } = formatFileSize(file.size)
+            const paddedPath = file.route.padEnd(maxPathLength)
+            const sizeStr = `${size.padStart(7)} kB`
+            const gzipStr = `gzip: ${gzip.padStart(6)} kB`
+            console.log(`   ${paddedPath} ${sizeStr} │ ${gzipStr}`)
+          })
+      }
+
+      if (skipped.length > 0) {
+        console.log('\n💾 Served on-demand:')
+        skipped
+          .sort((a, b) => a.route.localeCompare(b.route))
+          .forEach((file) => {
+            const { size, gzip } = formatFileSize(file.size)
+            const paddedPath = file.route.padEnd(maxPathLength)
+            const sizeStr = `${size.padStart(7)} kB`
+            const gzipStr = `gzip: ${gzip.padStart(6)} kB`
+            console.log(`   ${paddedPath} ${sizeStr} │ ${gzipStr}`)
+          })
+      }
+
+      // Show detailed verbose info if enabled
+      if (VERBOSE) {
+        console.log('\n📊 Detailed file information:')
+        allFiles.forEach((file) => {
+          const isPreloaded = loaded.includes(file)
+          const status = isPreloaded ? '[MEMORY]' : '[ON-DEMAND]'
+          const reason =
+            !isPreloaded && file.size > MAX_PRELOAD_BYTES
+              ? ' (too large)'
+              : !isPreloaded
+                ? ' (filtered)'
+                : ''
+          console.log(
+            `   ${status.padEnd(12)} ${file.route} - ${file.type}${reason}`,
+          )
+        })
+      }
+    }
+
+    // Log summary after the file list
+    console.log() // Empty line for separation
+    if (loaded.length > 0) {
+      console.log(
+        `✅ Preloaded ${String(loaded.length)} files (${(totalPreloadedBytes / 1024 / 1024).toFixed(2)} MB) into memory`,
+      )
+    } else {
+      console.log('ℹ️  No files preloaded into memory')
+    }
+
+    if (skipped.length > 0) {
+      const tooLarge = skipped.filter((f) => f.size > MAX_PRELOAD_BYTES).length
+      const filtered = skipped.length - tooLarge
+      console.log(
+        `ℹ️  ${String(skipped.length)} files will be served on-demand (${String(tooLarge)} too large, ${String(filtered)} filtered)`,
+      )
+    }
+  } catch (error) {
+    console.error(`❌ Failed to load static files from ${clientDir}:`, error)
+  }
+
+  return { routes, loaded, skipped }
+}
+
+/**
+ * Start the production server
+ */
+async function startServer() {
+  console.log('🚀 Starting production server...')
+
+  // Load TanStack Start server handler
+  let handler: { fetch: (request: Request) => Response | Promise<Response> }
+  try {
+    const serverModule = (await import(SERVER_ENTRY)) as {
+      default: { fetch: (request: Request) => Response | Promise<Response> }
+    }
+    handler = serverModule.default
+    console.log('✅ TanStack Start handler loaded')
+  } catch (error) {
+    console.error('❌ Failed to load server handler:', error)
+    process.exit(1)
+  }
+
+  // Build static routes with intelligent preloading
+  const { routes } = await buildStaticRoutes(CLIENT_DIR)
+
+  // Create Bun server
+  const server = Bun.serve({
+    port: PORT,
+
+    idleTimeout: 255,
+
+    routes: {
+      // Serve static assets (preloaded or on-demand)
+      ...routes,
+
+      // Fallback to TanStack Start handler for all other routes
+      '/*': (request) => {
+        try {
+          return handler.fetch(request)
+        } catch (error) {
+          console.error('Server handler error:', error)
+          return new Response('Internal Server Error', { status: 500 })
+        }
+      },
+    },
+
+    // Global error handler
+    error(error) {
+      console.error('Uncaught server error:', error)
+      return new Response('Internal Server Error', { status: 500 })
+    },
+  })
+
+  console.log(
+    `\n🚀 Server running at http://localhost:${String(server.port)}\n`,
+  )
+}
+
+// Start the server
+startServer().catch((error: unknown) => {
+  console.error('Failed to start server:', error)
+  process.exit(1)
+})

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'
@@ -18,30 +16,32 @@ import { Route as AuthedRouteImport } from './routes/_authed'
 import { Route as AuthedIndexRouteImport } from './routes/_authed/index'
 import { Route as AuthedStatsRouteImport } from './routes/_authed/stats'
 import { Route as AuthedSettingsRouteImport } from './routes/_authed/settings'
+import { Route as AuthedBadgesRouteImport } from './routes/_authed/badges'
 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'
 import { Route as AuthedAdminPreviewRouteImport } from './routes/_authed/admin/preview'
+import { Route as AuthedAdminBadgesRouteImport } from './routes/_authed/admin/badges'
+import { Route as AuthedAdminActivitiesRouteImport } from './routes/_authed/admin/activities'
 import { Route as AuthedAdminTournamentsIndexRouteImport } from './routes/_authed/admin/tournaments/index'
 import { Route as AuthedTournamentsIdBracketRouteImport } from './routes/_authed/tournaments/$id.bracket'
-import { Route as AuthedAdminTournamentsIdRouteImport } from './routes/_authed/admin/tournaments/$id'
+import { Route as 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 { ServerRoute as ApiTournamentsUploadLogoServerRouteImport } from './routes/api/tournaments/upload-logo'
+import { Route as AuthedAdminTournamentsIdTeamsRouteImport } from './routes/_authed/admin/tournaments/$id/teams'
-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',
@@ -77,6 +77,11 @@ const AuthedSettingsRoute = AuthedSettingsRouteImport.update({
   path: '/settings',
   getParentRoute: () => AuthedRoute,
 } as any)
+const AuthedBadgesRoute = AuthedBadgesRouteImport.update({
+  id: '/badges',
+  path: '/badges',
+  getParentRoute: () => AuthedRoute,
+} as any)
 const AuthedAdminRoute = AuthedAdminRouteImport.update({
   id: '/admin',
   path: '/admin',
@@ -92,6 +97,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',
@@ -113,6 +169,16 @@ const AuthedAdminPreviewRoute = AuthedAdminPreviewRouteImport.update({
   path: '/preview',
   getParentRoute: () => AuthedAdminRoute,
 } as any)
+const AuthedAdminBadgesRoute = AuthedAdminBadgesRouteImport.update({
+  id: '/badges',
+  path: '/badges',
+  getParentRoute: () => AuthedAdminRoute,
+} as any)
+const AuthedAdminActivitiesRoute = AuthedAdminActivitiesRouteImport.update({
+  id: '/activities',
+  path: '/activities',
+  getParentRoute: () => AuthedAdminRoute,
+} as any)
 const AuthedAdminTournamentsIndexRoute =
   AuthedAdminTournamentsIndexRouteImport.update({
     id: '/tournaments/',
@@ -125,77 +191,29 @@ const AuthedTournamentsIdBracketRoute =
     path: '/tournaments/$id/bracket',
     getParentRoute: () => AuthedRoute,
   } as any)
-const AuthedAdminTournamentsIdRoute =
+const AuthedAdminTournamentsIdIndexRoute =
-  AuthedAdminTournamentsIdRouteImport.update({
+  AuthedAdminTournamentsIdIndexRouteImport.update({
-    id: '/tournaments/$id',
+    id: '/tournaments/$id/',
-    path: '/tournaments/$id',
+    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',
     path: '/tournaments/run/$id',
     getParentRoute: () => AuthedAdminRoute,
   } as any)
-const ApiTournamentsUploadLogoServerRoute =
+const AuthedAdminTournamentsIdTeamsRoute =
-  ApiTournamentsUploadLogoServerRouteImport.update({
+  AuthedAdminTournamentsIdTeamsRouteImport.update({
-    id: '/api/tournaments/upload-logo',
+    id: '/tournaments/$id/teams',
-    path: '/api/tournaments/upload-logo',
+    path: '/tournaments/$id/teams',
-    getParentRoute: () => rootServerRouteImport,
+    getParentRoute: () => AuthedAdminRoute,
-  } 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 {
@@ -203,37 +221,67 @@ export interface FileRoutesByFullPath {
   '/logout': typeof LogoutRoute
   '/refresh-session': typeof RefreshSessionRoute
   '/admin': typeof AuthedAdminRouteWithChildren
+  '/badges': typeof AuthedBadgesRoute
   '/settings': typeof AuthedSettingsRoute
   '/stats': typeof AuthedStatsRoute
   '/': typeof AuthedIndexRoute
+  '/admin/activities': typeof AuthedAdminActivitiesRoute
+  '/admin/badges': typeof AuthedAdminBadgesRoute
   '/admin/preview': typeof AuthedAdminPreviewRoute
   '/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
-  '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute
   '/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 {
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
   '/refresh-session': typeof RefreshSessionRoute
+  '/badges': typeof AuthedBadgesRoute
   '/settings': typeof AuthedSettingsRoute
   '/stats': typeof AuthedStatsRoute
   '/': typeof AuthedIndexRoute
+  '/admin/activities': typeof AuthedAdminActivitiesRoute
+  '/admin/badges': typeof AuthedAdminBadgesRoute
   '/admin/preview': typeof AuthedAdminPreviewRoute
   '/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
-  '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute
   '/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 {
   __root__: typeof rootRouteImport
@@ -242,19 +290,34 @@ export interface FileRoutesById {
   '/logout': typeof LogoutRoute
   '/refresh-session': typeof RefreshSessionRoute
   '/_authed/admin': typeof AuthedAdminRouteWithChildren
+  '/_authed/badges': typeof AuthedBadgesRoute
   '/_authed/settings': typeof AuthedSettingsRoute
   '/_authed/stats': typeof AuthedStatsRoute
   '/_authed/': typeof AuthedIndexRoute
+  '/_authed/admin/activities': typeof AuthedAdminActivitiesRoute
+  '/_authed/admin/badges': typeof AuthedAdminBadgesRoute
   '/_authed/admin/preview': typeof AuthedAdminPreviewRoute
   '/_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/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute
   '/_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 {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -263,37 +326,67 @@ export interface FileRouteTypes {
     | '/logout'
     | '/refresh-session'
     | '/admin'
+    | '/badges'
     | '/settings'
     | '/stats'
     | '/'
+    | '/admin/activities'
+    | '/admin/badges'
     | '/admin/preview'
     | '/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'
-    | '/admin/tournaments/$id'
     | '/tournaments/$id/bracket'
     | '/admin/tournaments'
+    | '/admin/tournaments/$id/teams'
     | '/admin/tournaments/run/$id'
+    | '/api/files/$collection/$recordId/$file'
+    | '/admin/tournaments/$id'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/login'
     | '/logout'
     | '/refresh-session'
+    | '/badges'
     | '/settings'
     | '/stats'
     | '/'
+    | '/admin/activities'
+    | '/admin/badges'
     | '/admin/preview'
     | '/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'
-    | '/admin/tournaments/$id'
     | '/tournaments/$id/bracket'
     | '/admin/tournaments'
+    | '/admin/tournaments/$id/teams'
     | '/admin/tournaments/run/$id'
+    | '/api/files/$collection/$recordId/$file'
+    | '/admin/tournaments/$id'
   id:
     | '__root__'
     | '/_authed'
@@ -301,19 +394,34 @@ export interface FileRouteTypes {
     | '/logout'
     | '/refresh-session'
     | '/_authed/admin'
+    | '/_authed/badges'
     | '/_authed/settings'
     | '/_authed/stats'
     | '/_authed/'
+    | '/_authed/admin/activities'
+    | '/_authed/admin/badges'
     | '/_authed/admin/preview'
     | '/_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/admin/tournaments/$id'
     | '/_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
 }
 export interface RootRouteChildren {
@@ -321,101 +429,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' {
@@ -469,6 +493,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedSettingsRouteImport
       parentRoute: typeof AuthedRoute
     }
+    '/_authed/badges': {
+      id: '/_authed/badges'
+      path: '/badges'
+      fullPath: '/badges'
+      preLoaderRoute: typeof AuthedBadgesRouteImport
+      parentRoute: typeof AuthedRoute
+    }
     '/_authed/admin': {
       id: '/_authed/admin'
       path: '/admin'
@@ -490,6 +521,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'
@@ -518,6 +619,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedAdminPreviewRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
+    '/_authed/admin/badges': {
+      id: '/_authed/admin/badges'
+      path: '/badges'
+      fullPath: '/admin/badges'
+      preLoaderRoute: typeof AuthedAdminBadgesRouteImport
+      parentRoute: typeof AuthedAdminRoute
+    }
+    '/_authed/admin/activities': {
+      id: '/_authed/admin/activities'
+      path: '/activities'
+      fullPath: '/admin/activities'
+      preLoaderRoute: typeof AuthedAdminActivitiesRouteImport
+      parentRoute: typeof AuthedAdminRoute
+    }
     '/_authed/admin/tournaments/': {
       id: '/_authed/admin/tournaments/'
       path: '/tournaments'
@@ -532,13 +647,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedTournamentsIdBracketRouteImport
       parentRoute: typeof AuthedRoute
     }
-    '/_authed/admin/tournaments/$id': {
+    '/_authed/admin/tournaments/$id/': {
-      id: '/_authed/admin/tournaments/$id'
+      id: '/_authed/admin/tournaments/$id/'
       path: '/tournaments/$id'
       fullPath: '/admin/tournaments/$id'
-      preLoaderRoute: typeof AuthedAdminTournamentsIdRouteImport
+      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'
@@ -546,104 +668,36 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedAdminTournamentsRunIdRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
-  }
+    '/_authed/admin/tournaments/$id/teams': {
-}
+      id: '/_authed/admin/tournaments/$id/teams'
-declare module '@tanstack/react-start/server' {
+      path: '/tournaments/$id/teams'
-  interface ServerFileRoutesByPath {
+      fullPath: '/admin/tournaments/$id/teams'
-    '/api/tournaments/upload-logo': {
+      preLoaderRoute: typeof AuthedAdminTournamentsIdTeamsRouteImport
-      id: '/api/tournaments/upload-logo'
+      parentRoute: typeof AuthedAdminRoute
-      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 {
+  AuthedAdminActivitiesRoute: typeof AuthedAdminActivitiesRoute
+  AuthedAdminBadgesRoute: typeof AuthedAdminBadgesRoute
   AuthedAdminPreviewRoute: typeof AuthedAdminPreviewRoute
   AuthedAdminIndexRoute: typeof AuthedAdminIndexRoute
-  AuthedAdminTournamentsIdRoute: typeof AuthedAdminTournamentsIdRoute
   AuthedAdminTournamentsIndexRoute: typeof AuthedAdminTournamentsIndexRoute
+  AuthedAdminTournamentsIdTeamsRoute: typeof AuthedAdminTournamentsIdTeamsRoute
   AuthedAdminTournamentsRunIdRoute: typeof AuthedAdminTournamentsRunIdRoute
+  AuthedAdminTournamentsIdIndexRoute: typeof AuthedAdminTournamentsIdIndexRoute
 }
 
 const AuthedAdminRouteChildren: AuthedAdminRouteChildren = {
+  AuthedAdminActivitiesRoute: AuthedAdminActivitiesRoute,
+  AuthedAdminBadgesRoute: AuthedAdminBadgesRoute,
   AuthedAdminPreviewRoute: AuthedAdminPreviewRoute,
   AuthedAdminIndexRoute: AuthedAdminIndexRoute,
-  AuthedAdminTournamentsIdRoute: AuthedAdminTournamentsIdRoute,
   AuthedAdminTournamentsIndexRoute: AuthedAdminTournamentsIndexRoute,
+  AuthedAdminTournamentsIdTeamsRoute: AuthedAdminTournamentsIdTeamsRoute,
   AuthedAdminTournamentsRunIdRoute: AuthedAdminTournamentsRunIdRoute,
+  AuthedAdminTournamentsIdIndexRoute: AuthedAdminTournamentsIdIndexRoute,
 }
 
 const AuthedAdminRouteWithChildren = AuthedAdminRoute._addFileChildren(
@@ -652,6 +706,7 @@ const AuthedAdminRouteWithChildren = AuthedAdminRoute._addFileChildren(
 
 interface AuthedRouteChildren {
   AuthedAdminRoute: typeof AuthedAdminRouteWithChildren
+  AuthedBadgesRoute: typeof AuthedBadgesRoute
   AuthedSettingsRoute: typeof AuthedSettingsRoute
   AuthedStatsRoute: typeof AuthedStatsRoute
   AuthedIndexRoute: typeof AuthedIndexRoute
@@ -664,6 +719,7 @@ interface AuthedRouteChildren {
 
 const AuthedRouteChildren: AuthedRouteChildren = {
   AuthedAdminRoute: AuthedAdminRouteWithChildren,
+  AuthedBadgesRoute: AuthedBadgesRoute,
   AuthedSettingsRoute: AuthedSettingsRoute,
   AuthedStatsRoute: AuthedStatsRoute,
   AuthedIndexRoute: AuthedIndexRoute,
@@ -682,24 +738,27 @@ 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,
+    ssr: true
-  ApiSpotifyResumeServerRoute: ApiSpotifyResumeServerRoute,
+    router: Awaited<ReturnType<typeof getRouter>>
-  ApiSpotifySearchServerRoute: ApiSpotifySearchServerRoute,
+  }
-  ApiSpotifyTokenServerRoute: ApiSpotifyTokenServerRoute,
-  ApiTeamsUploadLogoServerRoute: ApiTeamsUploadLogoServerRoute,
-  ApiTournamentsUploadLogoServerRoute: ApiTournamentsUploadLogoServerRoute,
-  ApiFilesCollectionRecordIdFileServerRoute:
-    ApiFilesCollectionRecordIdFileServerRoute,
 }
-export const serverRouteTree = rootServerRouteImport
-  ._addFileChildren(rootServerRouteChildren)
-  ._addFileTypes<FileServerRouteTypes>()

src/app/router.tsx

@@ -1,11 +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";
 
-export function createRouter() {
+export function getRouter() {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -13,13 +13,12 @@ export function createRouter() {
         gcTime: 5 * 60 * 1000, // 5 minutes
         refetchOnWindowFocus: false,
         refetchOnReconnect: "always",
-        retry: 3,
+        retry: 1,
       },
     },
   });
 
-  return routerWithQueryClient(
+  const router = createTanStackRouter({
-    createTanStackRouter({
     routeTree,
     context: {
       queryClient,
@@ -33,13 +32,18 @@ export function createRouter() {
     defaultErrorComponent: DefaultCatchBoundary,
     scrollRestoration: true,
     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

@@ -1,7 +1,3 @@
-import "@mantine/core/styles.css";
-import "@mantine/dates/styles.css";
-import "@mantine/carousel/styles.css";
-import '@mantine/tiptap/styles.css';
 import {
   HeadContent,
   Navigate,
@@ -18,9 +14,12 @@ import Providers from "@/features/core/components/providers";
 import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
 import { HeaderConfig } from "@/features/core/types/header-config";
 import { playerQueries } from "@/features/players/queries";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import FullScreenLoader from "@/components/full-screen-loader";
+import mantineCssUrl from '@mantine/core/styles.css?url'
+import mantineDatesCssUrl from '@mantine/dates/styles.css?url'
+import mantineCarouselCssUrl from '@mantine/carousel/styles.css?url'
+import mantineTiptapCssUrl from '@mantine/tiptap/styles.css?url'
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient;
@@ -31,6 +30,7 @@ export const Route = createRootRouteWithContext<{
   fullWidth: boolean;
 }>()({
   head: () => ({
+    title: "FLXN IX",
     meta: [
       {
         charSet: "utf-8",
@@ -38,29 +38,49 @@ export const Route = createRootRouteWithContext<{
       {
         name: "viewport",
         content:
-          "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=overlays-content",
+          "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=resizes-content",
       },
+      { property: 'og:title', content: 'FLXN IX' },
+      { property: 'og:description', content: 'Register for FLXN IX and view FLXN stats' },
+      { property: 'og:url', content: 'https://flexxon.app' },
+      { property: 'og:type', content: 'website' },
+      { property: 'og:site_name', content: 'FLXN IX' },
+      { property: 'og:image', content: 'https://flexxon.app/favicon.png' },
     ],
     links: [
       {
         rel: "apple-touch-icon",
         sizes: "180x180",
-        href: "/apple-touch-icon.png",
+        href: "/favicon.png",
       },
       {
         rel: "icon",
         type: "image/png",
         sizes: "32x32",
-        href: "/favicon-32x32.png",
+        href: "/favicon.png",
       },
       {
         rel: "icon",
         type: "image/png",
         sizes: "16x16",
-        href: "/favicon-16x16.png",
+        href: "/favicon.png",
       },
       { rel: "manifest", href: "/site.webmanifest" },
       { rel: "icon", href: "/favicon.ico" },
+      { rel: 'stylesheet', href: mantineCssUrl },
+      { rel: 'stylesheet', href: mantineCarouselCssUrl },
+      { rel: 'stylesheet', href: mantineDatesCssUrl },
+      { rel: 'stylesheet', href: mantineTiptapCssUrl },
+      { rel: "preconnect", href: "https://fonts.googleapis.com" },
+      {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossOrigin: "anonymous",
+      },
+      {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=League+Spartan:wght@100..900&display=swap",
+      }
     ],
   }),
   errorComponent: (props) => {
@@ -80,12 +100,20 @@ export const Route = createRootRouteWithContext<{
       return {};
     }
 
+    if (location.pathname === '/login' || location.pathname === '/logout') {
+      return {};
+    }
+
+    try {
       // https://github.com/TanStack/router/discussions/3531
       const auth = await ensureServerQueryData(
         context.queryClient,
         playerQueries.auth()
       );
       return { auth };
+    } catch (error) {
+      return {};
+    }
   },
   pendingComponent: () => <Providers><FullScreenLoader /></Providers>,
 });
@@ -111,8 +139,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       {...mantineHtmlProps}
       style={{
         overflowX: "hidden",
-        overflowY: "hidden",
+        height: "100%",
-        position: "fixed",
         width: "100%",
       }}
     >
@@ -124,14 +151,14 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       <body
         style={{
           overflowX: "hidden",
-          overflowY: "hidden",
+          height: "100%",
-          position: "fixed",
           width: "100%",
+          margin: 0,
+          padding: 0,
         }}
       >
         <div className="app">{children}</div>
         <Scripts />
-        <ReactQueryDevtools />
       </body>
     </html>
   );

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

@@ -0,0 +1,45 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
+import { ActivitiesTable, activityQueries } from "@/features/activities";
+import { PlayersActivityTable, playerQueries } from "@/features/players";
+import { Tabs } from "@mantine/core";
+import { useState } from "react";
+
+export const Route = createFileRoute("/_authed/admin/activities")({
+  component: Stats,
+  beforeLoad: ({ context }) => {
+    const queryClient = context.queryClient;
+    prefetchServerQuery(queryClient, activityQueries.search());
+    prefetchServerQuery(queryClient, playerQueries.activity());
+  },
+  loader: () => ({
+    withPadding: false,
+    fullWidth: true,
+    header: {
+      title: "Activities",
+      withBackButton: true,
+    },
+    refresh: [activityQueries.search().queryKey, playerQueries.activity().queryKey],
+  }),
+});
+
+function Stats() {
+  const [activeTab, setActiveTab] = useState<string | null>("server-functions");
+
+  return (
+    <Tabs value={activeTab} onChange={setActiveTab}>
+      <Tabs.List mb='md'>
+        <Tabs.Tab value="server-functions">Server Functions</Tabs.Tab>
+        <Tabs.Tab value="player-activity">Player Activity</Tabs.Tab>
+      </Tabs.List>
+
+      <Tabs.Panel value="server-functions">
+        <ActivitiesTable />
+      </Tabs.Panel>
+
+      <Tabs.Panel value="player-activity">
+        <PlayersActivityTable />
+      </Tabs.Panel>
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import AwardBadges from "@/features/admin/components/award-badges";
+
+export const Route = createFileRoute("/_authed/admin/badges")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <AwardBadges />;
+}

src/app/routes/_authed/admin/tournaments/$id/index.tsx

@@ -3,7 +3,7 @@ import { tournamentQueries } from "@/features/tournaments/queries";
 import ManageTournament from "@/features/tournaments/components/manage-tournament";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 
-export const Route = createFileRoute("/_authed/admin/tournaments/$id")({
+export const Route = createFileRoute("/_authed/admin/tournaments/$id/")({
   beforeLoad: async ({ context, params }) => {
     const { queryClient } = context;
     const tournament = await ensureServerQueryData(

src/app/routes/_authed/admin/tournaments/$id/teams.tsx

@@ -0,0 +1,32 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { tournamentQueries } from "@/features/tournaments/queries";
+import ManageTeams from "@/features/teams/components/manage-teams";
+import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+
+export const Route = createFileRoute("/_authed/admin/tournaments/$id/teams")({
+  beforeLoad: async ({ context, params }) => {
+    const { queryClient } = context;
+    const tournament = await ensureServerQueryData(
+      queryClient,
+      tournamentQueries.details(params.id)
+    );
+    if (!tournament) throw redirect({ to: "/admin/tournaments" });
+    return {
+      tournament,
+    };
+  },
+  loader: ({ context }) => ({
+    header: {
+      withBackButton: true,
+      title: `${context.tournament.name} Teams`,
+    },
+    withPadding: false,
+  }),
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { id } = Route.useParams();
+  const { tournament } = Route.useRouteContext();
+  return <ManageTeams tournament={tournament} />;
+}

src/app/routes/_authed/admin/tournaments/run.$id.tsx

@@ -11,6 +11,7 @@ import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
 import BracketView from "@/features/bracket/components/bracket-view";
 import { SpotifyControlsBar } from "@/features/spotify/components";
+import { useAuth } from "@/contexts/auth-context";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
   beforeLoad: async ({ context, params }) => {
@@ -39,6 +40,8 @@ export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
 function RouteComponent() {
   const { id } = Route.useParams();
   const { data: tournament } = useTournament(id);
+  const { roles } = useAuth();
+  const isAdmin = roles?.includes('Admin') || false;
 
   const bracket: BracketData = useMemo(() => {
     if (!tournament.matches || tournament.matches.length === 0) {
@@ -76,7 +79,7 @@ function RouteComponent() {
 
   return (
     <Container size="md" px={0}>
-      <SpotifyControlsBar />
+      { isAdmin && <SpotifyControlsBar />}
       {tournament.matches?.length ? (
         <BracketView bracket={bracket} showControls />
       ) : (

src/app/routes/_authed/badges.tsx

@@ -0,0 +1,34 @@
+import BadgeStatsTable from '@/features/badges/components/badge-stats-table';
+import BadgeStatsTableSkeleton from '@/features/badges/components/badge-stats-table-skeleton';
+import { badgeQueries, useAllBadges } from '@/features/badges/queries';
+import PlayerStatsTableSkeleton from '@/features/players/components/player-stats-table-skeleton';
+import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch';
+import { createFileRoute } from '@tanstack/react-router';
+import { Suspense } from 'react';
+
+export const Route = createFileRoute('/_authed/badges')({
+  component: Badges,
+  beforeLoad: ({ context }) => {
+    const queryClient = context.queryClient;
+    prefetchServerQuery(queryClient, badgeQueries.allBadges());
+  },
+  loader: () => ({
+    withPadding: false,
+    fullWidth: true,
+    header: {
+      title: 'All Badges',
+      withBackButton: true,
+    },
+    refresh: [badgeQueries.allBadges().queryKey],
+  }),
+});
+
+function Badges() {
+  return (
+    <Suspense fallback={<BadgeStatsTableSkeleton />}>
+      <div>
+        <BadgeStatsTable />
+      </div>
+    </Suspense>
+  );
+}

src/app/routes/_authed/index.tsx

@@ -3,9 +3,13 @@ import { tournamentQueries, useCurrentTournament } from "@/features/tournaments/
 import UpcomingTournament from "@/features/tournaments/components/upcoming-tournament";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import StartedTournament from "@/features/tournaments/components/started-tournament";
+import { Suspense } from "react";
+import UpcomingTournamentSkeleton from "@/features/tournaments/components/upcoming-tournament/skeleton";
 
 export const Route = createFileRoute("/_authed/")({
-  component: Home,
+  component: () => <Suspense fallback={<UpcomingTournamentSkeleton />}>
+    <Home />
+  </Suspense>,
   beforeLoad: async ({ context }) => {
     const queryClient = context.queryClient;
     const tournament = await ensureServerQueryData(queryClient, tournamentQueries.current())
@@ -18,11 +22,11 @@ export const Route = createFileRoute("/_authed/")({
       title: context.tournament.name || "FLXN"
     }
   }),
+  pendingComponent: () => <UpcomingTournamentSkeleton />
 });
 
 function Home() {
   const { data: tournament } = useCurrentTournament();
-
   if (!tournament.matches || tournament.matches.length === 0) {
     return <UpcomingTournament tournament={tournament} />;
   }

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

@@ -1,3 +1,4 @@
+import { badgeKeys, badgeQueries } from "@/features/badges/queries";
 import Profile from "@/features/players/components/profile";
 import HeaderSkeleton from "@/features/players/components/profile/header-skeleton";
 import ProfileSkeleton from "@/features/players/components/profile/skeleton";
@@ -24,6 +25,14 @@ export const Route = createFileRoute("/_authed/profile/$playerId")({
         queryClient,
         playerQueries.matches(params.playerId)
       ),
+      prefetchServerQuery(
+        queryClient,
+        playerQueries.stats(params.playerId)
+      ),
+      prefetchServerQuery(
+        queryClient,
+        badgeQueries.playerBadges(params.playerId)
+      ),
     ]);
   },
   loader: ({ params, context }) => ({
@@ -34,7 +43,7 @@ export const Route = createFileRoute("/_authed/profile/$playerId")({
         context?.auth.user.id === params.playerId ? "/settings" : undefined,
     },
     withPadding: false,
-    refresh: [playerKeys.details(params.playerId), playerKeys.matches(params.playerId), playerKeys.stats(params.playerId)],
+    refresh: [playerKeys.details(params.playerId), playerKeys.matches(params.playerId), playerKeys.stats(params.playerId), badgeKeys.playerBadges(params.playerId)],
   }),
   component: () => {
     const { playerId } = Route.useParams();

src/app/routes/_authed/stats.tsx

@@ -1,13 +1,19 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { playerQueries, useAllPlayerStats } from "@/features/players/queries";
+import { playerQueries } from "@/features/players/queries";
-import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import PlayerStatsTable from "@/features/players/components/player-stats-table";
+import { Suspense, useState, useDeferredValue } from "react";
+import PlayerStatsTableSkeleton from "@/features/players/components/player-stats-table-skeleton";
+import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
+import LeagueHeadToHead from "@/features/players/components/league-head-to-head";
+import { Box, Loader, Tabs, Button, Group, Container, Stack } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed/stats")({
   component: Stats,
-  beforeLoad: async ({ context }) => {
+  beforeLoad: ({ context }) => {
     const queryClient = context.queryClient;
-    await ensureServerQueryData(queryClient, playerQueries.allStats());
+    prefetchServerQuery(queryClient, playerQueries.allStats('all'));
+    prefetchServerQuery(queryClient, playerQueries.allStats('mainline'));
+    prefetchServerQuery(queryClient, playerQueries.allStats('regional'));
   },
   loader: () => ({
     withPadding: false,
@@ -20,7 +26,57 @@ export const Route = createFileRoute("/_authed/stats")({
 });
 
 function Stats() {
-  const { data: playerStats } = useAllPlayerStats();
+  const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
+  const deferredViewType = useDeferredValue(viewType);
+  const isStale = viewType !== deferredViewType;
 
-  return <PlayerStatsTable playerStats={playerStats} />;
+  return (
+    <Tabs defaultValue="stats">
+      <Tabs.List grow>
+        <Tabs.Tab value="stats">Stats</Tabs.Tab>
+        <Tabs.Tab value="h2h">Head to Head</Tabs.Tab>
+      </Tabs.List>
+
+      <Tabs.Panel value="stats">
+        <Container size="100%" px={0} mt="md">
+          <Stack gap="xs">
+            <Group gap="xs" px="md" justify="center">
+              <Button
+                variant={viewType === 'all' ? 'filled' : 'light'}
+                size="compact-xs"
+                onClick={() => setViewType('all')}
+              >
+                All
+              </Button>
+              <Button
+                variant={viewType === 'mainline' ? 'filled' : 'light'}
+                size="compact-xs"
+                onClick={() => setViewType('mainline')}
+              >
+                Mainline
+              </Button>
+              <Button
+                variant={viewType === 'regional' ? 'filled' : 'light'}
+                size="compact-xs"
+                onClick={() => setViewType('regional')}
+              >
+                Regional
+              </Button>
+            </Group>
+            <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
+              <Suspense key={deferredViewType} fallback={<PlayerStatsTableSkeleton hideFilters />}>
+                <PlayerStatsTable viewType={deferredViewType} />
+              </Suspense>
+            </Box>
+          </Stack>
+        </Container>
+      </Tabs.Panel>
+
+      <Tabs.Panel value="h2h">
+        <Suspense fallback={<Box w='100vw' py='xl'><Loader ml='45vw' /></Box>}>
+          <LeagueHeadToHead />
+        </Suspense>
+      </Tabs.Panel>
+    </Tabs>
+  );
 }

src/app/routes/_authed/teams.$teamId.tsx

@@ -1,8 +1,9 @@
 import TeamProfile from "@/features/teams/components/team-profile";
+import ProfileSkeleton from "@/features/teams/components/team-profile/skeleton";
 import { teamKeys, teamQueries } from "@/features/teams/queries";
-import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
-import { redirect, createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { Suspense } from "react";
 import { z } from "zod";
 
 const searchSchema = z.object({
@@ -25,6 +26,8 @@ export const Route = createFileRoute("/_authed/teams/$teamId")({
   }),
   component: () => {
     const { teamId } = Route.useParams();
-    return <TeamProfile id={teamId} />;
+    return <Suspense fallback={<ProfileSkeleton />}>
+      <TeamProfile id={teamId} />
+    </Suspense>;
   },
 });

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

@@ -10,7 +10,6 @@ import { useMemo } from "react";
 import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
 import BracketView from "@/features/bracket/components/bracket-view";
-import { SpotifyControlsBar } from "@/features/spotify/components";
 
 export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
   beforeLoad: async ({ context, params }) => {

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

@@ -3,6 +3,8 @@ import { tournamentQueries } from '@/features/tournaments/queries';
 import Profile from '@/features/tournaments/components/profile';
 import { z } from "zod";
 import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch';
+import { Suspense } from 'react';
+import ProfileSkeleton from '@/features/tournaments/components/profile/skeleton';
 
 const searchSchema = z.object({
   tab: z.string().optional(),
@@ -10,9 +12,9 @@ const searchSchema = z.object({
 
 export const Route = createFileRoute('/_authed/tournaments/$tournamentId')({
   validateSearch: searchSchema,
-  beforeLoad: async ({ context, params }) => {
+  beforeLoad: ({ context, params }) => {
     const { queryClient } = context;
-    await prefetchServerQuery(queryClient, tournamentQueries.details(params.tournamentId))
+    prefetchServerQuery(queryClient, tournamentQueries.details(params.tournamentId))
   },
   loader: ({ params, context }) => ({
     header: {
@@ -28,5 +30,7 @@ export const Route = createFileRoute('/_authed/tournaments/$tournamentId')({
 
 function RouteComponent() {
   const tournamentId = Route.useParams().tournamentId;
-  return <Profile id={tournamentId} />
+  return <Suspense fallback={<ProfileSkeleton />}>
+    <Profile id={tournamentId} />
+  </Suspense>
 }

src/app/routes/_authed/tournaments/index.tsx

@@ -1,20 +1,14 @@
-import Page from '@/components/page'
-import { Stack } from '@mantine/core'
 import { createFileRoute } from '@tanstack/react-router'
-import { TournamentCard } from '@/features/tournaments/components/tournament-card'
+import { tournamentQueries } from '@/features/tournaments/queries'
-import { tournamentQueries, useTournaments } from '@/features/tournaments/queries'
-import { useAuth } from '@/contexts/auth-context'
-import { useSheet } from '@/hooks/use-sheet'
-import Sheet from '@/components/sheet/sheet'
-import TournamentForm from '@/features/tournaments/components/tournament-form'
-import { PlusIcon } from '@phosphor-icons/react'
-import Button from '@/components/button'
 import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch'
+import { Suspense } from 'react'
+import TournamentCardList from '@/features/tournaments/components/tournament-card-list'
+import { Skeleton, Stack } from '@mantine/core'
 
 export const Route = createFileRoute('/_authed/tournaments/')({
   beforeLoad: async ({ context }) => {
     const { queryClient } = context;
-    await prefetchServerQuery(queryClient, tournamentQueries.list())
+    prefetchServerQuery(queryClient, tournamentQueries.list())
   },
   loader: () => ({
     header: {
@@ -27,27 +21,11 @@ export const Route = createFileRoute('/_authed/tournaments/')({
 })
 
 function RouteComponent() {
-  const { data: tournaments } = useTournaments();
+  return <Suspense fallback={<Stack gap="md">
-  const { roles } = useAuth();
+    {Array(10).fill(null).map((_, index) => (
-  const sheet = useSheet();
+      <Skeleton height="120px" w="100%" />
-
+    ))}
-  return (
+  </Stack>}>
-    <Stack>
+    <TournamentCardList />
-      {
+  </Suspense>
-        roles?.includes("Admin") ? (
-          <>
-          <Button leftSection={<PlusIcon />} variant='subtle' onClick={sheet.open}>Create Tournament</Button>
-          <Sheet {...sheet.props} title='Create Tournament'>
-            <TournamentForm close={sheet.close} />
-          </Sheet>
-          </>
-        ) : null
-      }
-      {
-        tournaments?.map((tournament: any) => (
-          <TournamentCard key={tournament.id} tournament={tournament} />
-        ))
-      }
-    </Stack>
-  )
 }

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,7 +12,9 @@ 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/$')({
+  server: {
+    handlers: {
       GET: handleRequest,
       POST: handleRequest,
       PUT: handleRequest,
@@ -20,4 +22,6 @@ export const ServerRoute = createServerFileRoute('/api/auth/$').methods({
       PATCH: handleRequest,
       OPTIONS: handleRequest,
       HEAD: handleRequest,
+    }
+  }
 })

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

@@ -1,21 +1,31 @@
-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({
+let activeConnections = 0;
-  GET: ({ request, context }) => {
-    logger.info('ServerEvents | New connection', context?.userAuthId);
 
+export const Route = createFileRoute("/api/events/$")({
+  server: {
+    middleware: [superTokensRequestMiddleware],
+    handlers: {
+      GET: ({ request }) => {
+        activeConnections++;
+        const connectionId = `conn_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+        logger.info(`ServerEvents | New connection ${connectionId}. Active: ${activeConnections}`);
         const stream = new ReadableStream({
           start(controller) {
             const connectMessage = `data: ${JSON.stringify({ type: "connected" })}\n\n`;
             controller.enqueue(new TextEncoder().encode(connectMessage));
 
             const handleEvent = (event: ServerEvent) => {
-          logger.info('ServerEvents | Event received', event);
+              logger.info("ServerEvents | Event received", event);
               const message = `data: ${JSON.stringify(event)}\n\n`;
               try {
+                if (!controller.desiredSize || controller.desiredSize <= 0) {
+                  logger.warn("ServerEvents | Stream closed, skipping event");
+                  return;
+                }
                 controller.enqueue(new TextEncoder().encode(message));
               } catch (error) {
                 logger.error("ServerEvents | Error sending SSE message", error);
@@ -28,27 +38,37 @@ export const ServerRoute = createServerFileRoute("/api/events/$").middleware([su
 
             const pingInterval = setInterval(() => {
               try {
-            const pingMessage = `data: ${JSON.stringify({ type: "ping" })}\n\n`;
+                if (!controller.desiredSize || controller.desiredSize <= 0) {
+                  clearInterval(pingInterval);
+                  return;
+                }
+                const pingMessage = `data: ${JSON.stringify({ type: "ping", timestamp: Date.now() })}\n\n`;
                 controller.enqueue(new TextEncoder().encode(pingMessage));
               } catch (e) {
+                logger.error("ServerEvents | Ping interval error", e);
                 clearInterval(pingInterval);
-            controller.close();
               }
-        }, 30000);
+            }, 15000);
+
+            setTimeout(() => {
+              try {
+                const heartbeatMessage = `data: ${JSON.stringify({ type: "heartbeat", timestamp: Date.now() })}\n\n`;
+                controller.enqueue(new TextEncoder().encode(heartbeatMessage));
+              } catch (e) {
+                logger.error("ServerEvents | Heartbeat error", e);
+              }
+            }, 1000);
 
             const cleanup = () => {
+              activeConnections--;
               serverEvents.off("test", handleEvent);
+              serverEvents.off("match", handleEvent);
+              serverEvents.off("reaction", handleEvent);
               clearInterval(pingInterval);
-          try {
+              logger.info(`ServerEvents | Connection ${connectionId} cleanup completed. Active: ${activeConnections}`);
-            logger.info('ServerEvents | Closing connection', context?.userAuthId);
-            controller.close();
-          } catch (e) {
-            logger.error('ServerEvents | Error closing controller', e);
-          }
             };
 
             request.signal?.addEventListener("abort", cleanup);
-
             return cleanup;
           },
         });
@@ -56,11 +76,17 @@ export const ServerRoute = createServerFileRoute("/api/events/$").middleware([su
         return new Response(stream, {
           headers: {
             "Content-Type": "text/event-stream",
-        "Cache-Control": "no-cache",
+            "Cache-Control": "no-cache, no-store, must-revalidate",
-        Connection: "keep-alive",
+            "Connection": "keep-alive",
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "Cache-Control",
+            "X-Accel-Buffering": "no",
+            "X-Proxy-Buffering": "no",
+            "Proxy-Buffering": "off",
+            "Transfer-Encoding": "chunked",
           },
         });
       },
+    },
+  },
 });

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

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

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

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

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

@@ -1,195 +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";
 
-// Helper function to get access token from cookies
 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")({
+  server: {
+    handlers: {
       POST: async ({ request }: { request: Request }) => {
         try {
-      const accessToken = getAccessTokenFromCookies(request)
+          const accessToken = getAccessTokenFromCookies(request);
           if (!accessToken) {
             return new Response(
-          JSON.stringify({ error: 'No access token found' }),
+              JSON.stringify({ error: "No access token found" }),
               {
                 status: 401,
-            headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
               }
-        )
+            );
           }
 
-      const body = await request.json()
+          const body = await request.json();
-      const { action, deviceId, volumePercent } = body
+          const { action, deviceId, volumePercent, trackId, positionMs } = body;
 
-      const spotifyClient = new SpotifyWebApiClient(accessToken)
+          const spotifyClient = new SpotifyWebApiClient(accessToken);
 
           switch (action) {
-        case 'play':
+            case "play":
-          await spotifyClient.play(deviceId)
+              await spotifyClient.play(deviceId);
-          break
+              break;
-        case 'pause':
+            case "playTrack":
-          await spotifyClient.pause()
+              if (!trackId) {
-          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' }),
+                  JSON.stringify({
+                    error: "trackId is required for playTrack action",
+                  }),
                   {
                     status: 400,
-                headers: { 'Content-Type': 'application/json' },
+                    headers: { "Content-Type": "application/json" },
                   }
-            )
+                );
               }
-          await spotifyClient.setVolume(volumePercent)
+              await spotifyClient.playTrack(trackId, deviceId, positionMs);
-          break
+              break;
-        case 'transfer':
+            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' }),
+                  JSON.stringify({
+                    error: "deviceId is required for transfer action",
+                  }),
                   {
                     status: 400,
-                headers: { 'Content-Type': 'application/json' },
+                    headers: { "Content-Type": "application/json" },
                   }
-            )
+                );
               }
-          await spotifyClient.transferPlayback(deviceId)
+              await spotifyClient.transferPlayback(deviceId);
-          break
+              break;
             default:
-          return new Response(
+              return new Response(JSON.stringify({ error: "Invalid action" }), {
-            JSON.stringify({ error: 'Invalid action' }),
-            {
                 status: 400,
-              headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
-            }
+              });
-          )
           }
 
-      return new Response(
+          return new Response(JSON.stringify({ success: true }), {
-        JSON.stringify({ success: true }),
-        {
             status: 200,
-          headers: { 'Content-Type': 'application/json' },
+            headers: { "Content-Type": "application/json" },
-        }
+          });
-      )
         } catch (error) {
-      console.error('Playback control error:', error)
+          console.error("Playback control error:", error);
 
-      // Handle specific Spotify API errors
           if (error instanceof Error) {
-        if (error.message.includes('NO_ACTIVE_DEVICE')) {
+            if (error.message.includes("NO_ACTIVE_DEVICE")) {
               return new Response(
-            JSON.stringify({ error: 'No active device found. Please select a device first.' }),
+                JSON.stringify({
+                  error:
+                    "No active device found. Please select a device first.",
+                }),
                 {
                   status: 400,
-              headers: { 'Content-Type': 'application/json' },
+                  headers: { "Content-Type": "application/json" },
                 }
-          )
+              );
             }
 
-        if (error.message.includes('PREMIUM_REQUIRED')) {
+            if (error.message.includes("PREMIUM_REQUIRED")) {
               return new Response(
-            JSON.stringify({ error: 'Spotify Premium is required for playback control.' }),
+                JSON.stringify({
+                  error: "Spotify Premium is required for playback control.",
+                }),
                 {
                   status: 403,
-              headers: { 'Content-Type': 'application/json' },
+                  headers: { "Content-Type": "application/json" },
                 }
-          )
+              );
             }
 
-        // Log the full error details for debugging
+            console.error("Full error details:", {
-        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' }),
+            JSON.stringify({
+              error: "Playback control failed",
+              details: error instanceof Error ? error.message : "Unknown error",
+            }),
             {
               status: 500,
-          headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
             }
-      )
+          );
         }
       },
 
-  // GET endpoint for retrieving current playback state and devices
       GET: async ({ request }: { request: Request }) => {
         try {
-      const accessToken = getAccessTokenFromCookies(request)
+          const accessToken = getAccessTokenFromCookies(request);
           if (!accessToken) {
             return new Response(
-          JSON.stringify({ error: 'No access token found' }),
+              JSON.stringify({ error: "No access token found" }),
               {
                 status: 401,
-            headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
               }
-        )
+            );
           }
 
-      const url = new URL(request.url)
+          const url = new URL(request.url);
-      const type = url.searchParams.get('type') // 'state' or 'devices'
+          const type = url.searchParams.get("type");
 
-      const spotifyClient = new SpotifyWebApiClient(accessToken)
+          const spotifyClient = new SpotifyWebApiClient(accessToken);
 
-      if (type === 'devices') {
+          if (type === "devices") {
-        const devices = await spotifyClient.getDevices()
+            const devices = await spotifyClient.getDevices();
-        return new Response(
+            return new Response(JSON.stringify({ devices }), {
-          JSON.stringify({ devices }),
-          {
               status: 200,
-            headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
-          }
+            });
-        )
+          } else if (type === "state") {
-      } else if (type === 'state') {
+            const playbackState = await spotifyClient.getPlaybackState();
-        const playbackState = await spotifyClient.getPlaybackState()
+            return new Response(JSON.stringify({ playbackState }), {
-        return new Response(
-          JSON.stringify({ playbackState }),
-          {
               status: 200,
-            headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
-          }
+            });
-        )
           } else {
-        // Return both by default
             const [devices, playbackState] = await Promise.all([
               spotifyClient.getDevices(),
               spotifyClient.getPlaybackState(),
-        ])
+            ]);
 
-        return new Response(
+            return new Response(JSON.stringify({ devices, playbackState }), {
-          JSON.stringify({ devices, playbackState }),
-          {
               status: 200,
-            headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
-          }
+            });
-        )
           }
         } catch (error) {
-      console.error('Get playback data error:', error)
+          console.error("Get playback data error:", error);
           return new Response(
-        JSON.stringify({ error: 'Failed to get playback data' }),
+            JSON.stringify({ error: "Failed to get playback data" }),
             {
               status: 500,
-          headers: { 'Content-Type': 'application/json' },
+              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")({
+  server: {
+    handlers: {
       POST: async ({ request }: { request: Request }) => {
         try {
-      // Get access token from cookies
+          const cookies = request.headers.get("Cookie") || "";
-      const cookies = request.headers.get('Cookie') || ''
+          const accessTokenMatch = cookies.match(
-      const accessTokenMatch = cookies.match(/spotify_access_token=([^;]+)/)
+            /spotify_access_token=([^;]+)/
+          );
 
           if (!accessTokenMatch) {
             return new Response(
-          JSON.stringify({ error: 'No access token found' }),
+              JSON.stringify({ error: "No access token found" }),
               {
                 status: 401,
-            headers: { 'Content-Type': 'application/json' }
+                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) {
             return new Response(
-          JSON.stringify({ error: 'No snapshot provided' }),
+              JSON.stringify({ error: "No snapshot provided" }),
               {
                 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' }
+            headers: { "Content-Type": "application/json" },
-        }
+          });
-      )
         } catch (error) {
-      console.error('Spotify resume error:', error)
+          console.error("Spotify resume error:", error);
 
-      let errorMessage = 'Failed to resume playback state'
+          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')) {
+            if (
-          errorMessage = 'Spotify Premium required for playback control'
+              error.message.includes("Premium") ||
+              error.message.includes("403")
+            ) {
+              errorMessage = "Spotify premium required";
             } else {
-          errorMessage = error.message
+              errorMessage = error.message;
             }
           }
 
-      return new Response(
+          return new Response(JSON.stringify({ error: errorMessage }), {
-        JSON.stringify({ error: errorMessage }),
-        {
             status: 500,
-          headers: { 'Content-Type': 'application/json' }
+            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 = process.env.VITE_SPOTIFY_CLIENT_ID;
-  const clientSecret = process.env.SPOTIFY_CLIENT_SECRET
+  const clientSecret = process.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")({
+  server: {
+    handlers: {
       GET: async ({ request }: { request: Request }) => {
         try {
-      const url = new URL(request.url)
+          const url = new URL(request.url);
-      const query = url.searchParams.get('q')
+          const query = url.searchParams.get("q");
 
           if (!query) {
             return new Response(
-          JSON.stringify({ error: 'Query parameter q is required' }),
+              JSON.stringify({ error: "Query parameter q is required" }),
               {
                 status: 400,
-            headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
               }
-        )
+            );
           }
 
           // Get client credentials access token
-      const accessToken = await getClientCredentialsToken()
+          const accessToken = await getClientCredentialsToken();
 
           // 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, {
             headers: {
-          'Authorization': `Bearer ${accessToken}`,
+              Authorization: `Bearer ${accessToken}`,
             },
-      })
+          });
 
           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(
             JSON.stringify({ tracks: searchResult.tracks.items }),
             {
               status: 200,
-          headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
             }
-      )
+          );
         } catch (error) {
-      console.error('Search error:', error)
+          console.error("Search error:", error);
           return new Response(
-        JSON.stringify({ error: 'Search failed', details: error instanceof Error ? error.message : 'Unknown error' }),
+            JSON.stringify({
+              error: "Search failed",
+              details: error instanceof Error ? error.message : "Unknown error",
+            }),
             {
               status: 500,
-          headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
             }
-      )
+          );
         }
       },
-})
+    },
+  },
+});

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

@@ -1,52 +1,58 @@
-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 = process.env.VITE_SPOTIFY_CLIENT_ID!;
-const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!
+const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!;
 
-export const ServerRoute = createServerFileRoute('/api/spotify/token').methods({
+export const Route = createFileRoute("/api/spotify/token")({
+  server: {
+    handlers: {
       POST: async ({ request }: { request: Request }) => {
         try {
-      const body = await request.json()
+          const body = await request.json();
-      const { refresh_token } = body
+          const { refresh_token } = body;
 
           if (!refresh_token) {
             return new Response(
-          JSON.stringify({ error: 'refresh_token is required' }),
+              JSON.stringify({ error: "refresh_token is required" }),
               {
                 status: 400,
-            headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
               }
-        )
+            );
           }
 
-      // Refresh access token
+          const tokenResponse = await fetch(
-      const tokenResponse = await fetch('https://accounts.spotify.com/api/token', {
+            "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(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString('base64')}`,
+                Authorization: `Basic ${Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString("base64")}`,
               },
               body: new URLSearchParams({
-          grant_type: 'refresh_token',
+                grant_type: "refresh_token",
                 refresh_token,
               }),
-      })
+            }
+          );
 
           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(
-          JSON.stringify({ error: 'Failed to refresh token', details: error }),
+              JSON.stringify({
+                error: "Failed to refresh token",
+                details: error,
+              }),
               {
                 status: tokenResponse.status,
-            headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
               }
-        )
+            );
           }
 
-      const tokens = await tokenResponse.json()
+          const tokens = await tokenResponse.json();
 
-      // Return new tokens
           return new Response(
             JSON.stringify({
               access_token: tokens.access_token,
@@ -56,50 +62,46 @@ export const ServerRoute = createServerFileRoute('/api/spotify/token').methods({
             }),
             {
               status: 200,
-          headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
             }
-      )
+          );
         } catch (error) {
-      console.error('Token refresh endpoint error:', error)
+          console.error("Token refresh endpoint error:", error);
           return new Response(
-        JSON.stringify({ error: 'Internal server error' }),
+            JSON.stringify({ error: "Internal server error" }),
             {
               status: 500,
-          headers: { 'Content-Type': 'application/json' },
+              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')
+          const cookieHeader = request.headers.get("cookie");
           if (!cookieHeader) {
-        return new Response(
+            return new Response(JSON.stringify({ error: "No cookies found" }), {
-          JSON.stringify({ error: 'No cookies found' }),
-          {
               status: 401,
-            headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
-          }
+            });
-        )
           }
 
           const cookies = Object.fromEntries(
-        cookieHeader.split('; ').map((c: string) => c.split('='))
+            cookieHeader.split("; ").map((c: string) => c.split("="))
-      )
+          );
 
-      const accessToken = cookies.spotify_access_token
+          const accessToken = cookies.spotify_access_token;
-      const refreshToken = cookies.spotify_refresh_token
+          const refreshToken = cookies.spotify_refresh_token;
 
           if (!accessToken && !refreshToken) {
             return new Response(
-          JSON.stringify({ error: 'No Spotify tokens found' }),
+              JSON.stringify({ error: "No Spotify tokens found" }),
               {
                 status: 401,
-            headers: { 'Content-Type': 'application/json' },
+                headers: { "Content-Type": "application/json" },
               }
-        )
+            );
           }
 
           return new Response(
@@ -110,18 +112,20 @@ export const ServerRoute = createServerFileRoute('/api/spotify/token').methods({
             }),
             {
               status: 200,
-          headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
             }
-      )
+          );
         } catch (error) {
-      console.error('Get tokens endpoint error:', error)
+          console.error("Get tokens endpoint error:", error);
           return new Response(
-        JSON.stringify({ error: 'Internal server error' }),
+            JSON.stringify({ error: "Internal server error" }),
             {
               status: 500,
-          headers: { 'Content-Type': 'application/json' },
+              headers: { "Content-Type": "application/json" },
             }
-      )
+          );
         }
       },
-})
+    },
+  },
+});

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

@@ -1,116 +1,147 @@
-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],
+    handlers: {
       POST: async ({ request, context }) => {
         try {
           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 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 });
           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' }
+                headers: { "Content-Type": "application/json" },
-          });
+              }
+            );
           }
 
           if (!logoFile || logoFile.size === 0) {
-          return new Response(JSON.stringify({ 
+            return new Response(
-            error: 'Logo file is required' 
+              JSON.stringify({
-          }), { 
+                error: "Logo file is required",
+              }),
+              {
                 status: 400,
-            headers: { 'Content-Type': 'application/json' }
+                headers: { "Content-Type": "application/json" },
-          });
+              }
+            );
           }
 
-        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+          const allowedTypes = [
+            "image/jpeg",
+            "image/jpg",
+            "image/png",
+            "image/gif",
+          ];
           if (!allowedTypes.includes(logoFile.type)) {
-          return new Response(JSON.stringify({ 
+            return new Response(
-            error: 'Invalid file type. Only JPEG, PNG and GIF are allowed.' 
+              JSON.stringify({
-          }), { 
+                error: "Invalid file type. Only JPEG, PNG and GIF are allowed.",
+              }),
+              {
                 status: 400,
-            headers: { 'Content-Type': 'application/json' }
+                headers: { "Content-Type": "application/json" },
-          });
+              }
+            );
           }
 
           const maxSize = 10 * 1024 * 1024;
           if (logoFile.size > maxSize) {
-          return new Response(JSON.stringify({ 
+            return new Response(
-            error: 'File too large. Maximum size is 10MB.' 
+              JSON.stringify({
-          }), { 
+                error: "File too large. Maximum size is 10MB.",
+              }),
+              {
                 status: 400,
-            headers: { 'Content-Type': 'application/json' }
+                headers: { "Content-Type": "application/json" },
-          });
+              }
+            );
           }
 
           const team = await pbAdmin.getTeam(teamId);
           if (!team) {
-          return new Response(JSON.stringify({ 
+            return new Response(
-            error: 'Team not found' 
+              JSON.stringify({
-          }), { 
+                error: "Team not found",
+              }),
+              {
                 status: 404,
-            headers: { 'Content-Type': 'application/json' }
+                headers: { "Content-Type": "application/json" },
-          });
+              }
+            );
           }
 
-        if (!team.players.map(p => p.id).includes(context.userId) && !isAdmin)
+          const user = await pbAdmin.getPlayerByAuthId(userId);
-          return new Response('Unauthorized', { status: 403 });
+          if (!team.players.map((p) => p.id).includes(user?.id!) && !isAdmin)
+            return new Response("Unauthorized", { status: 403 });
 
-        logger.info('Uploading team logo', { 
+          logger.info("Uploading team logo", {
             teamId,
             fileName: logoFile.name,
             fileSize: logoFile.size,
-          userId 
+            userId,
           });
 
           const pbFormData = new FormData();
-        pbFormData.append('logo', logoFile);
+          pbFormData.append("logo", logoFile);
 
-        const updatedTeam= await pbAdmin.updateTeam(teamId, pbFormData as any);
+          await pbAdmin.updateTeam(teamId, pbFormData as any);
+          const updatedTeam = await pbAdmin.getTeam(teamId);
+          if (!updatedTeam) throw new Error("Failed to fetch updated team");
 
-        logger.info('Team logo uploaded successfully', { 
+          logger.info("Team logo uploaded successfully", {
             teamId,
-          logo: updatedTeam.logo
+            logo: updatedTeam.logo,
           });
 
-        return new Response(JSON.stringify({ 
+          return new Response(
+            JSON.stringify({
               success: true,
               team: updatedTeam,
-          message: 'Logo uploaded successfully'
+              message: "Logo uploaded successfully",
-        }), {
+            }),
+            {
               status: 200,
-          headers: { 'Content-Type': 'application/json' }
+              headers: { "Content-Type": "application/json" },
-        });
+            }
-
+          );
         } catch (error: any) {
-        logger.error('Error uploading team logo:', error);
+          logger.error("Error uploading team logo:", error);
 
-        return new Response(JSON.stringify({ 
+          return new Response(
-          error: 'Failed to upload logo',
+            JSON.stringify({
-          message: error.message || 'Unknown error occurred'
+              error: "Failed to upload logo",
-        }), { 
+              message: error.message || "Unknown error occurred",
+            }),
+            {
               status: 500,
-          headers: { 'Content-Type': 'application/json' }
+              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],
+    handlers: {
       POST: async ({ request, context }) => {
         try {
           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 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 });
           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' }
+                headers: { "Content-Type": "application/json" },
-          });
+              }
+            );
           }
 
           if (!logoFile || logoFile.size === 0) {
-          return new Response(JSON.stringify({ 
+            return new Response(
-            error: 'Logo file is required' 
+              JSON.stringify({
-          }), { 
+                error: "Logo file is required",
+              }),
+              {
                 status: 400,
-            headers: { 'Content-Type': 'application/json' }
+                headers: { "Content-Type": "application/json" },
-          });
+              }
+            );
           }
 
-        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+          const allowedTypes = [
+            "image/jpeg",
+            "image/jpg",
+            "image/png",
+            "image/gif",
+          ];
           if (!allowedTypes.includes(logoFile.type)) {
-          return new Response(JSON.stringify({ 
+            return new Response(
-            error: 'Invalid file type. Only JPEG, PNG and GIF are allowed.' 
+              JSON.stringify({
-          }), { 
+                error: "Invalid file type. Only JPEG, PNG and GIF are allowed.",
+              }),
+              {
                 status: 400,
-            headers: { 'Content-Type': 'application/json' }
+                headers: { "Content-Type": "application/json" },
-          });
+              }
+            );
           }
 
           const maxSize = 10 * 1024 * 1024;
           if (logoFile.size > maxSize) {
-          return new Response(JSON.stringify({ 
+            return new Response(
-            error: 'File too large. Maximum size is 10MB.' 
+              JSON.stringify({
-          }), { 
+                error: "File too large. Maximum size is 10MB.",
+              }),
+              {
                 status: 400,
-            headers: { 'Content-Type': 'application/json' }
+                headers: { "Content-Type": "application/json" },
-          });
+              }
+            );
           }
 
           const tournament = await pbAdmin.getTournament(tournamentId);
           if (!tournament) {
-          return new Response(JSON.stringify({ 
+            return new Response(
-            error: 'Tournament not found' 
+              JSON.stringify({
-          }), { 
+                error: "Tournament not found",
+              }),
+              {
                 status: 404,
-            headers: { 'Content-Type': 'application/json' }
+                headers: { "Content-Type": "application/json" },
-          });
+              }
+            );
           }
 
-
+          logger.info("Uploading tournament logo", {
-        logger.info('Uploading tournament logo', { 
             tournamentId,
             fileName: logoFile.name,
             fileSize: logoFile.size,
-          userId 
+            userId,
           });
 
           const pbFormData = new FormData();
-        pbFormData.append('logo', logoFile);
+          pbFormData.append("logo", logoFile);
 
-        const updatedTournament = await pbAdmin.updateTournament(tournamentId, pbFormData as any);
+          const updatedTournament = await pbAdmin.updateTournament(
-
-        logger.info('Tournament logo uploaded successfully', { 
             tournamentId,
-          logo: updatedTournament.logo
+            pbFormData as any
+          );
+
+          logger.info("Tournament logo uploaded successfully", {
+            tournamentId,
+            logo: updatedTournament.logo,
           });
 
-        return new Response(JSON.stringify({ 
+          return new Response(
+            JSON.stringify({
               success: true,
               tournament: updatedTournament,
-          message: 'Logo uploaded successfully'
+              message: "Logo uploaded successfully",
-        }), {
+            }),
+            {
               status: 200,
-          headers: { 'Content-Type': 'application/json' }
+              headers: { "Content-Type": "application/json" },
-        });
+            }
-
+          );
         } catch (error: any) {
-        logger.error('Error uploading tournament logo:', error);
+          logger.error("Error uploading tournament logo:", error);
 
-        return new Response(JSON.stringify({ 
+          return new Response(
-          error: 'Failed to upload logo',
+            JSON.stringify({
-          message: error.message || 'Unknown error occurred'
+              error: "Failed to upload logo",
-        }), { 
+              message: error.message || "Unknown error occurred",
+            }),
+            {
               status: 500,
-          headers: { 'Content-Type': 'application/json' }
+              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 {
+        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/components/DefaultCatchBoundary.tsx

@@ -11,19 +11,18 @@ import {
   Box,
   Button as MantineButton,
   Text,
-  Title, 
   Stack,
   Group,
-  Alert,
   Collapse,
   Code,
-  ThemeIcon
+  Container,
+  Center
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { useEffect } from 'react'
 import toast from '@/lib/sonner'
 import { logger } from '@/lib/logger'
-import { ExclamationMarkIcon, XCircleIcon } from '@phosphor-icons/react'
+import { XCircleIcon, WarningIcon } from '@phosphor-icons/react'
 import Button from './button'
 
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
@@ -50,25 +49,15 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
 
   if (errorMessage.toLowerCase().includes('unauthorized')) {
     return (
-      <Box
+      <Container size="sm" py="xl">
-        style={{
+        <Center>
-          display: 'flex',
+          <Stack align="center" gap="md">
-          flexDirection: 'column',
+            <XCircleIcon size={64} color="var(--mantine-color-red-6)" />
-          alignItems: 'center',
+            <Text size="xl" fw={600}>Access Denied</Text>
-          justifyContent: 'center',
+            <Text c="dimmed" ta="center">
-          minHeight: '50vh',
+              You don't have permission to access this page.
-          padding: 'var(--mantine-spacing-xl)',
-        }}
-      >
-        <Stack align="center" gap="lg">
-          <ThemeIcon color="red" size={80} radius="xl">
-            <XCircleIcon size={48} />
-          </ThemeIcon>
-          <Title order={2} ta="center">Access Denied</Title>
-          <Text size="lg" c="dimmed" ta="center">
-            You don't have permission to access this.
             </Text>
-          <Group>
+            <Group gap="sm" mt="md">
               <Button
                 variant="light"
                 onClick={() => window.history.back()}
@@ -84,59 +73,46 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
               </MantineButton>
             </Group>
           </Stack>
-      </Box>
+        </Center>
+      </Container>
     )
   }
 
   return (
-    <Box
+    <Container size="sm" py="xl">
-      style={{
+      <Center>
-        display: 'flex',
+        <Stack align="center" gap="md" w="100%">
-        flexDirection: 'column',
+          <WarningIcon size={64} color="var(--mantine-color-red-6)" />
-        alignItems: 'center',
-        justifyContent: 'center',
-        minHeight: '50vh',
-        padding: 'var(--mantine-spacing-xl)',
-      }}
-    >
-      <Stack align="center" gap="lg" maw={600}>
-        <ThemeIcon color="red" size={80} radius="xl">
-          <ExclamationMarkIcon size={48} />
-        </ThemeIcon>
 
-        <Title order={2} ta="center">Something went wrong</Title>
+          <Text size="xl" fw={600}>Something went wrong</Text>
 
-        <Text size="lg" c="dimmed" ta="center">
+          <Text c="dimmed" ta="center">
-          There was an unexpected error. Please try again later.
+            An error occurred while loading this page.
           </Text>
 
-        <Alert 
+          <Box w="100%" mt="md">
-          variant="light" 
+            <Text size="sm" c="dimmed" mb="xs">Error: {errorMessage}</Text>
-          color="red" 
-          title="Error Details"
-          w="100%"
-        >
-          <Text mb="sm">{errorMessage}</Text>
             <Button
               variant="subtle"
               size="compact-sm"
               onClick={toggleDetails}
+              fullWidth
             >
-            {detailsOpened ? 'Hide' : 'Show'} stack trace
+              {detailsOpened ? 'Hide' : 'Show'} details
             </Button>
             <Collapse in={detailsOpened}>
-            <Code block mt="md" p="md">
+              <Code block mt="sm" p="sm" style={{ fontSize: '11px' }}>
                 {errorStack}
               </Code>
             </Collapse>
-        </Alert>
+          </Box>
 
-        <Group>
+          <Group gap="sm" mt="lg">
             <Button
               variant="light"
               onClick={() => router.invalidate()}
             >
-            Try Again
+              Retry
             </Button>
             {isRoot ? (
               <MantineButton
@@ -156,6 +132,7 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
             )}
           </Group>
         </Stack>
-    </Box>
+      </Center>
+    </Container>
   )
 }