ready for regionals

Reviewed-on: #10

.gitea/workflows/ci-cd.yaml

@@ -0,0 +1,143 @@
+name: CI/CD Pipeline
+
+on:
+  push:
+    branches:
+      - development
+      - main
+
+jobs:
+  build-app:
+    name: Build and Push App Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set environment variables
+        run: |
+          if [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            echo "DOCKER_TAG=latest" >> $GITHUB_ENV
+            echo "ENVIRONMENT=prod" >> $GITHUB_ENV
+          else
+            echo "DOCKER_TAG=dev" >> $GITHUB_ENV
+            echo "ENVIRONMENT=dev" >> $GITHUB_ENV
+          fi
+
+      - name: Build and push app Docker image
+        run: |
+          docker login git.yohler.net -u ${{ github.actor }} -p ${{ secrets.PACKAGES_TOKEN }}
+
+          docker build \
+            -f Dockerfile \
+            -t git.yohler.net/kyle/flxn-app:${{ env.DOCKER_TAG }} \
+            -t git.yohler.net/kyle/flxn-app:${{ github.sha }} \
+            .
+
+          docker push git.yohler.net/kyle/flxn-app:${{ env.DOCKER_TAG }}
+          docker push git.yohler.net/kyle/flxn-app:${{ github.sha }}
+
+  build-pocketbase:
+    name: Build and Push PocketBase Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Check if PocketBase Dockerfile or migrations changed
+        id: check_changes
+        run: |
+          if [ "${{ github.event.before }}" == "0000000000000000000000000000000000000000" ] || ! git cat-file -e ${{ github.event.before }} 2>/dev/null; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+          elif git diff --name-only ${{ github.event.before }} ${{ github.sha }} | grep -qE "(Dockerfile.pocketbase|pb_migrations/)"; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+          else
+            echo "changed=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Build and push PocketBase Docker image
+        if: steps.check_changes.outputs.changed == 'true' || github.event.before == '0000000000000000000000000000000000000000'
+        run: |
+          docker login git.yohler.net -u ${{ github.actor }} -p ${{ secrets.PACKAGES_TOKEN }}
+
+          docker build \
+            -f Dockerfile.pocketbase \
+            -t git.yohler.net/kyle/flxn-pocketbase:latest \
+            -t git.yohler.net/kyle/flxn-pocketbase:${{ github.sha }} \
+            .
+
+          docker push git.yohler.net/kyle/flxn-pocketbase:latest
+          docker push git.yohler.net/kyle/flxn-pocketbase:${{ github.sha }}
+
+  deploy:
+    name: Deploy to Kubernetes
+    needs: [build-app, build-pocketbase]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set environment variables
+        run: |
+          if [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            echo "ENVIRONMENT=prod" >> $GITHUB_ENV
+            echo "NAMESPACE=flxn-prod" >> $GITHUB_ENV
+          else
+            echo "ENVIRONMENT=dev" >> $GITHUB_ENV
+            echo "NAMESPACE=flxn-dev" >> $GITHUB_ENV
+          fi
+
+      - name: Install kubectl
+        run: |
+          curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"
+          chmod +x kubectl
+          mv kubectl /usr/local/bin/
+
+      - name: Configure kubectl
+        run: |
+          mkdir -p $HOME/.kube
+          echo "${{ secrets.KUBE_CONFIG }}" | base64 -d > $HOME/.kube/config
+          chmod 600 $HOME/.kube/config
+          kubectl config set-cluster local --insecure-skip-tls-verify=true
+
+      - name: Verify kubectl access
+        run: |
+          kubectl version --client
+          kubectl get nodes
+
+      - name: Deploy shared services (SuperTokens)
+        run: |
+          kubectl apply -k k8s/overlays/shared/
+
+      - name: Deploy to ${{ env.ENVIRONMENT }}
+        run: |
+          kubectl apply -k k8s/overlays/${{ env.ENVIRONMENT }}/
+
+      - name: Force rollout to pull latest image
+        run: |
+          kubectl rollout restart deployment/flxn-app -n ${{ env.NAMESPACE }}
+          kubectl rollout restart deployment/flxn-pocketbase -n ${{ env.NAMESPACE }}
+
+      - name: Wait for rollout
+        run: |
+          kubectl rollout status deployment/flxn-app -n ${{ env.NAMESPACE }} --timeout=5m
+          kubectl rollout status deployment/flxn-pocketbase -n ${{ env.NAMESPACE }} --timeout=5m
+
+      - name: Verify deployment
+        run: |
+          kubectl get pods -n ${{ env.NAMESPACE }} -l app=flxn
+          kubectl get svc -n ${{ env.NAMESPACE }} -l app=flxn
+          kubectl get ingress -n ${{ env.NAMESPACE }}
+
+      - name: Check app health
+        run: |
+          sleep 15
+          APP_POD=$(kubectl get pod -n ${{ env.NAMESPACE }} -l component=app -o jsonpath='{.items[0].metadata.name}')
+          kubectl exec -n ${{ env.NAMESPACE }} $APP_POD -- wget -O- http://localhost:3000/api/health || echo "Health check failed (endpoint may not exist yet)"
+
+      - name: Check PocketBase health
+        run: |
+          PB_POD=$(kubectl get pod -n ${{ env.NAMESPACE }} -l component=pocketbase -o jsonpath='{.items[0].metadata.name}')
+          kubectl exec -n ${{ env.NAMESPACE }} $PB_POD -- wget -O- http://localhost:8090/api/health || echo "PocketBase health check completed"

Dockerfile

@@ -0,0 +1,29 @@
+FROM oven/bun:1 AS builder
+
+WORKDIR /app
+
+COPY package.json bun.lockb* ./
+
+RUN bun install --frozen-lockfile
+
+COPY . .
+
+RUN bun run build
+
+FROM oven/bun:1-alpine AS runtime
+
+WORKDIR /app
+
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/server.ts ./server.ts
+
+EXPOSE 3000
+
+ENV NODE_ENV=production
+ENV PORT=3000
+ENV NITRO_PORT=3000
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+  CMD bun -e "fetch('http://localhost:3000/api/health').then(r => r.ok ? process.exit(0) : process.exit(1)).catch(() => process.exit(1))"
+
+CMD ["bun", "run", "server.ts"]

Dockerfile.pocketbase

@@ -1,16 +1,23 @@
 FROM alpine:latest
 
-ARG PB_VERSION=0.29.2
+ARG PB_VERSION=0.26.5
 
 RUN apk add --no-cache \
     unzip \
     ca-certificates
 
-# download and unzip PocketBase
 ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
-RUN unzip /tmp/pb.zip -d /pb/
+RUN unzip /tmp/pb.zip -d /pb/ && \
+    rm /tmp/pb.zip && \
+    chmod +x /pb/pocketbase
+
+RUN mkdir -p /pb/pb_data
+
+COPY pb_migrations /pb/pb_migrations
 
 EXPOSE 8090
 
-# start PocketBase
-CMD ["/pb/pocketbase", "serve", "--http=0.0.0.0:8090"]
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:8090/api/health || exit 1
+
+CMD ["/pb/pocketbase", "serve", "--http=0.0.0.0:8090", "--dir=/pb/pb_data", "--migrationsDir=/pb/pb_migrations"]

docker-compose.yml

@@ -13,7 +13,6 @@ services:
       - .env.docker
     volumes:
       - postgres-data:/var/lib/postgresql/data
-      - ./.docker-postgres-init:/docker-entrypoint-initdb.d
     networks:
       - app-network
 

k8s/base/app-deployment.yaml

@@ -0,0 +1,129 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: flxn-app
+  labels:
+    app: flxn
+    component: app
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: flxn
+      component: app
+  template:
+    metadata:
+      labels:
+        app: flxn
+        component: app
+    spec:
+      containers:
+      - name: flxn-app
+        image: git.yohler.net/kyle/flxn-app:latest
+        imagePullPolicy: Always
+        ports:
+        - containerPort: 3000
+          name: http
+          protocol: TCP
+        env:
+        - name: VITE_API_DOMAIN
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: vite_api_domain
+        - name: VITE_WEBSITE_DOMAIN
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: vite_website_domain
+        - name: SUPERTOKENS_URI
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: supertokens_uri
+        - name: POCKETBASE_URL
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: pocketbase_url
+        - name: SUPERTOKENS_API_KEY
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: supertokens_api_key
+        - name: PORT
+          value: "3000"
+        - name: NODE_ENV
+          value: "production"
+
+        - name: TWILIO_ACCOUNT_SID
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: twilio_account_sid
+        - name: TWILIO_AUTH_TOKEN
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: twilio_auth_token
+        - name: TWILIO_SERVICE_SID
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: twilio_service_sid
+        - name: POCKETBASE_ADMIN_EMAIL
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: pocketbase_admin_email
+        - name: POCKETBASE_ADMIN_PASSWORD
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: pocketbase_admin_password
+        - name: VITE_SPOTIFY_CLIENT_ID
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: vite_spotify_client_id
+        - name: SPOTIFY_CLIENT_SECRET
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: spotify_client_secret
+        - name: VITE_SPOTIFY_REDIRECT_URI
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: vite_spotify_redirect_uri
+        - name: COOKIE_DOMAIN
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: cookie_domain
+
+        resources:
+          requests:
+            memory: "768Mi"
+            cpu: "250m"
+          limits:
+            memory: "1536Mi"
+            cpu: "1000m"
+
+        livenessProbe:
+          httpGet:
+            path: /api/health
+            port: 3000
+          initialDelaySeconds: 30
+          periodSeconds: 30
+          timeoutSeconds: 5
+          failureThreshold: 3
+
+        readinessProbe:
+          httpGet:
+            path: /api/health
+            port: 3000
+          initialDelaySeconds: 10
+          periodSeconds: 10
+          timeoutSeconds: 3
+          failureThreshold: 3

k8s/base/app-service.yaml

@@ -0,0 +1,17 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: flxn-app
+  labels:
+    app: flxn
+    component: app
+spec:
+  type: ClusterIP
+  ports:
+  - port: 3000
+    targetPort: 3000
+    protocol: TCP
+    name: http
+  selector:
+    app: flxn
+    component: app

k8s/base/kustomization.yaml

@@ -0,0 +1,12 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+
+resources:
+- app-deployment.yaml
+- app-service.yaml
+- pocketbase-deployment.yaml
+- pocketbase-service.yaml
+- pb-data-pvc.yaml
+
+commonLabels:
+  app: flxn

k8s/base/pb-data-pvc.yaml

@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: flxn-pb-data
+  labels:
+    app: flxn
+    component: pocketbase
+spec:
+  accessModes:
+  - ReadWriteOnce
+  resources:
+    requests:
+      storage: 10Gi

k8s/base/pocketbase-deployment.yaml

@@ -0,0 +1,57 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: flxn-pocketbase
+  labels:
+    app: flxn
+    component: pocketbase
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: flxn
+      component: pocketbase
+  template:
+    metadata:
+      labels:
+        app: flxn
+        component: pocketbase
+    spec:
+      containers:
+      - name: pocketbase
+        image: git.yohler.net/kyle/flxn-pocketbase:latest
+        imagePullPolicy: Always
+        ports:
+        - containerPort: 8090
+          name: http
+          protocol: TCP
+        volumeMounts:
+        - name: pb-data
+          mountPath: /pb/pb_data
+        resources:
+          requests:
+            memory: "256Mi"
+            cpu: "100m"
+          limits:
+            memory: "512Mi"
+            cpu: "500m"
+        livenessProbe:
+          httpGet:
+            path: /api/health
+            port: 8090
+          initialDelaySeconds: 10
+          periodSeconds: 30
+          timeoutSeconds: 5
+          failureThreshold: 3
+        readinessProbe:
+          httpGet:
+            path: /api/health
+            port: 8090
+          initialDelaySeconds: 5
+          periodSeconds: 10
+          timeoutSeconds: 3
+          failureThreshold: 3
+      volumes:
+      - name: pb-data
+        persistentVolumeClaim:
+          claimName: flxn-pb-data

k8s/base/pocketbase-service.yaml

@@ -0,0 +1,18 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: flxn-pocketbase
+  labels:
+    app: flxn
+    component: pocketbase
+spec:
+  type: NodePort
+  ports:
+  - port: 8090
+    targetPort: 8090
+    nodePort: 30090
+    protocol: TCP
+    name: http
+  selector:
+    app: flxn
+    component: pocketbase

k8s/overlays/dev/configmap.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: flxn-config
+  namespace: flxn-dev
+data:
+  vite_api_domain: "https://dev.flexxon.app"
+  vite_website_domain: "https://dev.flexxon.app"
+  supertokens_uri: "http://192.168.0.50:30568"
+  pocketbase_url: "http://192.168.0.50:30096"
+  vite_spotify_client_id: "3ffde6b594e84460b3d4b329b8919277"
+  vite_spotify_redirect_uri: "https://dev.flexxon.app/api/spotify/callback"
+  s3_endpoint: "https://s3.yohler.net"
+  s3_bucket: "flxn-dev"
+  cookie_domain: "dev.flexxon.app"

k8s/overlays/dev/ingress.yaml

@@ -0,0 +1,17 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: flxn-app
+  namespace: flxn-dev
+spec:
+  rules:
+  - host: dev.flexxon.app
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: flxn-app
+            port:
+              number: 3000

k8s/overlays/dev/kustomization.yaml

@@ -0,0 +1,50 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+
+namespace: flxn-dev
+
+resources:
+- namespace.yaml
+- ../../base
+- configmap.yaml
+- ingress.yaml
+
+images:
+- name: git.yohler.net/kyle/flxn-app
+  newTag: dev
+- name: git.yohler.net/kyle/flxn-pocketbase
+  newTag: latest
+
+commonLabels:
+  environment: dev
+
+patches:
+- patch: |-
+    - op: replace
+      path: /spec/template/spec/containers/0/resources/requests/memory
+      value: "768Mi"
+    - op: replace
+      path: /spec/template/spec/containers/0/resources/limits/memory
+      value: "1536Mi"
+  target:
+    kind: Deployment
+    name: flxn-app
+
+- patch: |-
+    - op: replace
+      path: /spec/type
+      value: NodePort
+    - op: add
+      path: /spec/ports/0/nodePort
+      value: 30083
+  target:
+    kind: Service
+    name: flxn-app
+
+- patch: |-
+    - op: replace
+      path: /spec/ports/0/nodePort
+      value: 30096
+  target:
+    kind: Service
+    name: flxn-pocketbase

k8s/overlays/dev/namespace.yaml

@@ -0,0 +1,4 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: flxn-dev

k8s/overlays/prod/configmap.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: flxn-config
+  namespace: flxn-prod
+data:
+  vite_api_domain: "https://flexxon.app"
+  vite_website_domain: "https://flexxon.app"
+  supertokens_uri: "http://192.168.0.50:30568"
+  pocketbase_url: "http://192.168.0.50:30097"
+  vite_spotify_client_id: "3ffde6b594e84460b3d4b329b8919277"
+  vite_spotify_redirect_uri: "https://flexxon.app/api/spotify/callback"
+  s3_endpoint: "https://s3.yohler.net"
+  s3_bucket: "flxn-prod"
+  cookie_domain: "flexxon.app"

k8s/overlays/prod/ingress.yaml

@@ -0,0 +1,17 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: flxn-app
+  namespace: flxn-prod
+spec:
+  rules:
+  - host: flexxon.app
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: flxn-app
+            port:
+              number: 3000

k8s/overlays/prod/kustomization.yaml

@@ -0,0 +1,50 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+
+namespace: flxn-prod
+
+resources:
+- namespace.yaml
+- ../../base
+- configmap.yaml
+- ingress.yaml
+
+images:
+- name: git.yohler.net/kyle/flxn-app
+  newTag: latest
+- name: git.yohler.net/kyle/flxn-pocketbase
+  newTag: latest
+
+commonLabels:
+  environment: prod
+
+patches:
+- patch: |-
+    - op: replace
+      path: /spec/template/spec/containers/0/resources/requests/memory
+      value: "1536Mi"
+    - op: replace
+      path: /spec/template/spec/containers/0/resources/limits/memory
+      value: "3Gi"
+  target:
+    kind: Deployment
+    name: flxn-app
+
+- patch: |-
+    - op: replace
+      path: /spec/type
+      value: NodePort
+    - op: add
+      path: /spec/ports/0/nodePort
+      value: 30084
+  target:
+    kind: Service
+    name: flxn-app
+
+- patch: |-
+    - op: replace
+      path: /spec/ports/0/nodePort
+      value: 30097
+  target:
+    kind: Service
+    name: flxn-pocketbase

k8s/overlays/prod/namespace.yaml

@@ -0,0 +1,4 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: flxn-prod

k8s/overlays/shared/configmap.yaml

@@ -0,0 +1,5 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: supertokens-config
+  namespace: flxn-shared

k8s/overlays/shared/kustomization.yaml

@@ -0,0 +1,16 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+
+namespace: flxn-shared
+
+resources:
+- namespace.yaml
+- supertokens-deployment.yaml
+- supertokens-service.yaml
+- supertokens-postgres-deployment.yaml
+- supertokens-postgres-service.yaml
+- supertokens-db-pvc.yaml
+
+labels:
+- pairs:
+    environment: shared

k8s/overlays/shared/namespace.yaml

@@ -0,0 +1,4 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: flxn-shared

k8s/overlays/shared/supertokens-db-pvc.yaml

@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: supertokens-db-data
+  labels:
+    app: flxn
+    component: supertokens-db
+spec:
+  accessModes:
+  - ReadWriteOnce
+  resources:
+    requests:
+      storage: 2Gi

k8s/overlays/shared/supertokens-deployment.yaml

@@ -0,0 +1,71 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: supertokens
+  labels:
+    app: flxn
+    component: supertokens
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: flxn
+      component: supertokens
+  template:
+    metadata:
+      labels:
+        app: flxn
+        component: supertokens
+    spec:
+      enableServiceLinks: false
+      containers:
+      - name: supertokens
+        image: registry.supertokens.io/supertokens/supertokens-postgresql:latest
+        ports:
+        - containerPort: 3567
+          name: http
+          protocol: TCP
+        env:
+        - name: PORT
+          value: "3567"
+        - name: POSTGRESQL_USER
+          value: supertokens
+        - name: POSTGRESQL_PASSWORD
+          valueFrom:
+            secretKeyRef:
+              name: supertokens-secrets
+              key: postgres_password
+        - name: POSTGRESQL_HOST
+          value: supertokens-db
+        - name: POSTGRESQL_PORT
+          value: "5432"
+        - name: POSTGRESQL_DATABASE_NAME
+          value: supertokens
+        - name: API_KEYS
+          valueFrom:
+            secretKeyRef:
+              name: supertokens-secrets
+              key: api_keys
+        resources:
+          requests:
+            memory: "256Mi"
+            cpu: "100m"
+          limits:
+            memory: "512Mi"
+            cpu: "500m"
+        livenessProbe:
+          httpGet:
+            path: /hello
+            port: 3567
+          initialDelaySeconds: 30
+          periodSeconds: 30
+          timeoutSeconds: 5
+          failureThreshold: 3
+        readinessProbe:
+          httpGet:
+            path: /hello
+            port: 3567
+          initialDelaySeconds: 10
+          periodSeconds: 10
+          timeoutSeconds: 3
+          failureThreshold: 3

k8s/overlays/shared/supertokens-postgres-deployment.yaml

@@ -0,0 +1,68 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: supertokens-db
+  labels:
+    app: flxn
+    component: supertokens-db
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: flxn
+      component: supertokens-db
+  template:
+    metadata:
+      labels:
+        app: flxn
+        component: supertokens-db
+    spec:
+      containers:
+      - name: postgres
+        image: postgres:16-alpine
+        ports:
+        - containerPort: 5432
+          name: postgres
+          protocol: TCP
+        env:
+        - name: POSTGRES_USER
+          value: "supertokens"
+        - name: POSTGRES_PASSWORD
+          valueFrom:
+            secretKeyRef:
+              name: supertokens-secrets
+              key: postgres_password
+        - name: POSTGRES_DB
+          value: "supertokens"
+        - name: PGDATA
+          value: "/var/lib/postgresql/data/pgdata"
+        volumeMounts:
+        - name: postgres-data
+          mountPath: /var/lib/postgresql/data
+        resources:
+          requests:
+            memory: "128Mi"
+            cpu: "50m"
+          limits:
+            memory: "256Mi"
+            cpu: "500m"
+        livenessProbe:
+          exec:
+            command:
+            - pg_isready
+            - -U
+            - supertokens
+          initialDelaySeconds: 30
+          periodSeconds: 10
+        readinessProbe:
+          exec:
+            command:
+            - pg_isready
+            - -U
+            - supertokens
+          initialDelaySeconds: 5
+          periodSeconds: 5
+      volumes:
+      - name: postgres-data
+        persistentVolumeClaim:
+          claimName: supertokens-db-data

k8s/overlays/shared/supertokens-postgres-service.yaml

@@ -0,0 +1,17 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: supertokens-db
+  labels:
+    app: flxn
+    component: supertokens-db
+spec:
+  type: ClusterIP
+  ports:
+  - port: 5432
+    targetPort: 5432
+    protocol: TCP
+    name: postgres
+  selector:
+    app: flxn
+    component: supertokens-db

k8s/overlays/shared/supertokens-service.yaml

@@ -0,0 +1,18 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: supertokens
+  labels:
+    app: flxn
+    component: supertokens
+spec:
+  type: NodePort
+  ports:
+  - port: 3567
+    targetPort: 3567
+    nodePort: 30568
+    protocol: TCP
+    name: http
+  selector:
+    app: flxn
+    component: supertokens

package.json

@@ -6,8 +6,7 @@
   "scripts": {
     "dev": "vite dev --host 0.0.0.0",
     "build": "vite build && tsc --noEmit",
-    "start": "bun run .output/server/index.mjs",
-    "start:node": "node .output/server/index.mjs"
+    "start": "bun run server.ts"
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
@@ -20,12 +19,13 @@
     "@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.132.2",
+    "@tanstack/react-router": "^1.143.6",
+    "@tanstack/react-router-devtools": "^1.143.6",
+    "@tanstack/react-router-ssr-query": "^1.143.6",
+    "@tanstack/react-start": "^1.143.6",
     "@tanstack/react-virtual": "^3.13.12",
     "@tiptap/pm": "^3.4.3",
     "@tiptap/react": "^3.4.3",
@@ -35,6 +35,7 @@
     "browser-image-compression": "^2.0.2",
     "dotenv": "^17.2.2",
     "embla-carousel-react": "^8.6.0",
+    "facehash": "^0.0.7",
     "framer-motion": "^12.23.12",
     "ioredis": "^5.7.0",
     "pg": "^8.16.3",
@@ -51,11 +52,11 @@
     "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",
@@ -70,6 +71,8 @@
     "tsx": "^4.20.3",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-plugin-pwa": "^1.2.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "workbox-window": "^7.4.0"
   }
 }

pb_migrations/1759344931_deleted_player_badges_view.js

@@ -1,187 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_5062686152");
-
-  return app.delete(collection);
-}, (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"
-      },
-      {
-        "cascadeDelete": false,
-        "collectionId": "pbc_1340419796",
-        "hidden": false,
-        "id": "relation4154639100",
-        "maxSelect": 1,
-        "minSelect": 0,
-        "name": "badge_id",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "relation"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "_clone_GhrR",
-        "max": 0,
-        "min": 0,
-        "name": "badge_name",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": true,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "_clone_DEaW",
-        "max": 0,
-        "min": 0,
-        "name": "badge_description",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": true,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "_clone_MHmw",
-        "maxSelect": 1,
-        "name": "badge_type",
-        "presentable": false,
-        "required": true,
-        "system": false,
-        "type": "select",
-        "values": [
-          "tournament_participation",
-          "tournament_placement",
-          "performance",
-          "overtime",
-          "match_milestone"
-        ]
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "_clone_11YE",
-        "max": 50,
-        "min": 0,
-        "name": "badge_icon",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "_clone_qAJu",
-        "max": 50,
-        "min": 0,
-        "name": "badge_color",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "_clone_giOf",
-        "name": "is_progressive",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "bool"
-      },
-      {
-        "hidden": false,
-        "id": "json3212413036",
-        "maxSize": 1,
-        "name": "current_progress",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "json"
-      },
-      {
-        "hidden": false,
-        "id": "json4171899439",
-        "maxSize": 1,
-        "name": "target_progress",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "json"
-      },
-      {
-        "hidden": false,
-        "id": "json3435813110",
-        "maxSize": 1,
-        "name": "is_earned",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "json"
-      },
-      {
-        "hidden": false,
-        "id": "_clone_Q7lC",
-        "max": "",
-        "min": "",
-        "name": "earned_at",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "date"
-      }
-    ],
-    "id": "pbc_5062686152",
-    "indexes": [],
-    "listRule": null,
-    "name": "player_badges_view",
-    "system": false,
-    "type": "view",
-    "updateRule": null,
-    "viewQuery": "\n      SELECT\n        (p.id || '_' || b.id) as id,\n        p.id as player_id,\n        b.id as badge_id,\n        b.name as badge_name,\n        b.description as badge_description,\n        b.type as badge_type,\n        b.icon as badge_icon,\n        b.color as badge_color,\n        b.is_progressive,\n        COALESCE(pbp.current_progress, 0) as current_progress,\n        COALESCE(pbp.target_progress, b.progress_target, 1) as target_progress,\n        COALESCE(pbp.is_earned, false) as is_earned,\n        pbp.earned_at\n      FROM players p\n      CROSS JOIN badges b\n      LEFT JOIN player_badge_progress pbp ON pbp.player_id = p.id AND pbp.badge_id = b.id\n    ",
-    "viewRule": null
-  });
-
-  return app.save(collection);
-})

pb_migrations/1759344938_deleted_player_badge_progress.js

@@ -1,8 +1,12 @@
 /// <reference path="../pb_data/types.d.ts" />
 migrate((app) => {
+  try {
     const collection = app.findCollectionByNameOrId("pbc_4251874343");
-
     return app.delete(collection);
+  } catch (e) {
+    console.log("Collection pbc_4251874343 not found, skipping deletion");
+    return null;
+  }
 }, (app) => {
   const collection = new Collection({
     "createRule": null,

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)
+})

pb_migrations/1771294794_created_groups.js

@@ -0,0 +1,109 @@
+/// <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_340646327",
+        "hidden": false,
+        "id": "relation3177167065",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "tournament",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "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": "number4113142680",
+        "max": null,
+        "min": null,
+        "name": "order",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_1568971955",
+        "hidden": false,
+        "id": "relation2529305176",
+        "maxSelect": 999,
+        "minSelect": 0,
+        "name": "teams",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "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_3346940990",
+    "indexes": [],
+    "listRule": null,
+    "name": "groups",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3346940990");
+
+  return app.delete(collection);
+})

pb_migrations/1771294861_updated_tournaments.js

@@ -0,0 +1,52 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("select3736761055")
+
+  // add field
+  collection.fields.addAt(13, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "text3736761055",
+    "max": 0,
+    "min": 0,
+    "name": "format",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+}, (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",
+      "swiss_bracket",
+      "round_robin"
+    ]
+  }))
+
+  // remove field
+  collection.fields.removeById("text3736761055")
+
+  return app.save(collection)
+})

pb_migrations/1771294883_updated_tournaments.js

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

pb_migrations/1771294898_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(15, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "text2982008523",
+    "max": 0,
+    "min": 0,
+    "name": "phase",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("text2982008523")
+
+  return app.save(collection)
+})

pb_migrations/1771295070_updated_matches.js

@@ -0,0 +1,47 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2541054544")
+
+  // add field
+  collection.fields.addAt(22, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_3346940990",
+    "hidden": false,
+    "id": "relation1841317061",
+    "maxSelect": 1,
+    "minSelect": 0,
+    "name": "group",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  // add field
+  collection.fields.addAt(23, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "text3987859035",
+    "max": 0,
+    "min": 0,
+    "name": "match_type",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2541054544")
+
+  // remove field
+  collection.fields.removeById("relation1841317061")
+
+  // remove field
+  collection.fields.removeById("text3987859035")
+
+  return app.save(collection)
+})

public/site.webmanifest

@@ -1,17 +1,28 @@
 {
-  "name": "",
-  "short_name": "",
+  "short_name": "FLXN",
+  "name": "FLXN",
+  "description": "Amicus meus madidus",
   "icons": [
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "/icon-192x192.png",
+      "type": "image/png",
       "sizes": "192x192",
-      "type": "image/png"
+      "purpose": "any maskable"
     },
     {
-      "src": "/android-chrome-512x512.png",
+      "src": "/icon-512x512.png",
+      "type": "image/png",
       "sizes": "512x512",
-      "type": "image/png"
+      "purpose": "any maskable"
     }
   ],
-  "display": "standalone"
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#1e293b",
+  "background_color": "#0f172a",
+  "orientation": "portrait-primary",
+  "scope": "/",
+  "categories": ["games", "social", "beer pong"],
+  "prefer_related_applications": false,
+  "shortcuts": []
 }

server.ts

@@ -16,73 +16,133 @@
  *   - Server port number
  *   - Default: 3000
  *
- * STATIC_PRELOAD_MAX_BYTES (number)
+ * ASSET_PRELOAD_MAX_SIZE (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)
+ *   - Example: ASSET_PRELOAD_MAX_SIZE=5242880 (5MB)
  *
- * STATIC_PRELOAD_INCLUDE (string)
+ * ASSET_PRELOAD_INCLUDE_PATTERNS (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"
+ *   - Example: ASSET_PRELOAD_INCLUDE_PATTERNS="*.js,*.css,*.woff2"
  *
- * STATIC_PRELOAD_EXCLUDE (string)
+ * ASSET_PRELOAD_EXCLUDE_PATTERNS (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"
+ *   - Example: ASSET_PRELOAD_EXCLUDE_PATTERNS="*.map,*.txt"
  *
- * STATIC_PRELOAD_VERBOSE (boolean)
+ * ASSET_PRELOAD_VERBOSE_LOGGING (boolean)
  *   - Enable detailed logging of loaded and skipped files
  *   - Default: false
  *   - Set to "true" to enable verbose output
  *
+ * ASSET_PRELOAD_ENABLE_ETAG (boolean)
+ *   - Enable ETag generation for preloaded assets
+ *   - Default: true
+ *   - Set to "false" to disable ETag support
+ *
+ * ASSET_PRELOAD_ENABLE_GZIP (boolean)
+ *   - Enable Gzip compression for eligible assets
+ *   - Default: true
+ *   - Set to "false" to disable Gzip compression
+ *
+ * ASSET_PRELOAD_GZIP_MIN_SIZE (number)
+ *   - Minimum file size in bytes required for Gzip compression
+ *   - Files smaller than this will not be compressed
+ *   - Default: 1024 (1KB)
+ *
+ * ASSET_PRELOAD_GZIP_MIME_TYPES (string)
+ *   - Comma-separated list of MIME types eligible for Gzip compression
+ *   - Supports partial matching for types ending with "/"
+ *   - Default: text/,application/javascript,application/json,application/xml,image/svg+xml
+ *
  * Usage:
  *   bun run server.ts
  */
 
-import { readdir } from 'node:fs/promises'
-import { join } from 'node:path'
+import path from 'node:path'
 
 // Configuration
-const PORT = Number(process.env.PORT ?? 3000)
-const CLIENT_DIR = './dist/client'
-const SERVER_ENTRY = './dist/server/server.js'
+const SERVER_PORT = Number(process.env.PORT ?? 3000)
+const CLIENT_DIRECTORY = './dist/client'
+const SERVER_ENTRY_POINT = './dist/server/server.js'
+
+// Logging utilities for professional output
+const log = {
+  info: (message: string) => {
+    console.log(`[INFO] ${message}`)
+  },
+  success: (message: string) => {
+    console.log(`[SUCCESS] ${message}`)
+  },
+  warning: (message: string) => {
+    console.log(`[WARNING] ${message}`)
+  },
+  error: (message: string) => {
+    console.log(`[ERROR] ${message}`)
+  },
+  header: (message: string) => {
+    console.log(`\n${message}\n`)
+  },
+}
 
 // Preloading configuration from environment variables
 const MAX_PRELOAD_BYTES = Number(
-  process.env.STATIC_PRELOAD_MAX_BYTES ?? 5 * 1024 * 1024, // 5MB default
+  process.env.ASSET_PRELOAD_MAX_SIZE ?? 5 * 1024 * 1024, // 5MB default
 )
 
 // Parse comma-separated include patterns (no defaults)
-const INCLUDE_PATTERNS = (process.env.STATIC_PRELOAD_INCLUDE ?? '')
+const INCLUDE_PATTERNS = (process.env.ASSET_PRELOAD_INCLUDE_PATTERNS ?? '')
   .split(',')
   .map((s) => s.trim())
   .filter(Boolean)
-  .map(globToRegExp)
+  .map((pattern: string) => convertGlobToRegExp(pattern))
 
 // Parse comma-separated exclude patterns (no defaults)
-const EXCLUDE_PATTERNS = (process.env.STATIC_PRELOAD_EXCLUDE ?? '')
+const EXCLUDE_PATTERNS = (process.env.ASSET_PRELOAD_EXCLUDE_PATTERNS ?? '')
   .split(',')
   .map((s) => s.trim())
   .filter(Boolean)
-  .map(globToRegExp)
+  .map((pattern: string) => convertGlobToRegExp(pattern))
 
 // Verbose logging flag
-const VERBOSE = process.env.STATIC_PRELOAD_VERBOSE === 'true'
+const VERBOSE = process.env.ASSET_PRELOAD_VERBOSE_LOGGING === 'true'
+
+// Optional ETag feature
+const ENABLE_ETAG = (process.env.ASSET_PRELOAD_ENABLE_ETAG ?? 'true') === 'true'
+
+// Optional Gzip feature
+const ENABLE_GZIP = (process.env.ASSET_PRELOAD_ENABLE_GZIP ?? 'true') === 'true'
+const GZIP_MIN_BYTES = Number(process.env.ASSET_PRELOAD_GZIP_MIN_SIZE ?? 1024) // 1KB
+const GZIP_TYPES = (
+  process.env.ASSET_PRELOAD_GZIP_MIME_TYPES ??
+  'text/,application/javascript,application/json,application/xml,image/svg+xml'
+)
+  .split(',')
+  .map((v) => v.trim())
+  .filter(Boolean)
 
 /**
  * Convert a simple glob pattern to a regular expression
  * Supports * wildcard for matching any characters
  */
-function globToRegExp(glob: string): RegExp {
+function convertGlobToRegExp(globPattern: string): RegExp {
   // Escape regex special chars except *, then replace * with .*
-  const escaped = glob
+  const escapedPattern = globPattern
     .replace(/[-/\\^$+?.()|[\]{}]/g, '\\$&')
     .replace(/\*/g, '.*')
-  return new RegExp(`^${escaped}$`, 'i')
+  return new RegExp(`^${escapedPattern}$`, 'i')
+}
+
+/**
+ * Compute ETag for a given data buffer
+ */
+function computeEtag(data: Uint8Array): string {
+  const hash = Bun.hash(data)
+  return `W/"${hash.toString(16)}-${data.byteLength.toString()}"`
 }
 
 /**
@@ -95,18 +155,30 @@ interface AssetMetadata {
 }
 
 /**
- * Result of static asset preloading process
+ * In-memory asset with ETag and Gzip support
  */
-interface PreloadResult {
-  routes: Record<string, () => Response>
-  loaded: Array<AssetMetadata>
-  skipped: Array<AssetMetadata>
+interface InMemoryAsset {
+  raw: Uint8Array
+  gz?: Uint8Array
+  etag?: string
+  type: string
+  immutable: boolean
+  size: number
 }
 
 /**
- * Check if a file should be included based on configured patterns
+ * Result of static asset preloading process
  */
-function shouldInclude(relativePath: string): boolean {
+interface PreloadResult {
+  routes: Record<string, (req: Request) => Response | Promise<Response>>
+  loaded: AssetMetadata[]
+  skipped: AssetMetadata[]
+}
+
+/**
+ * Check if a file is eligible for preloading based on configured patterns
+ */
+function isFileEligibleForPreloading(relativePath: string): boolean {
   const fileName = relativePath.split(/[/\\]/).pop() ?? relativePath
 
   // If include patterns are specified, file must match at least one
@@ -125,38 +197,122 @@ function shouldInclude(relativePath: string): boolean {
 }
 
 /**
- * Build static routes with intelligent preloading strategy
+ * Check if a MIME type is compressible
+ */
+function isMimeTypeCompressible(mimeType: string): boolean {
+  return GZIP_TYPES.some((type) =>
+    type.endsWith('/') ? mimeType.startsWith(type) : mimeType === type,
+  )
+}
+
+/**
+ * Conditionally compress data based on size and MIME type
+ */
+function compressDataIfAppropriate(
+  data: Uint8Array,
+  mimeType: string,
+): Uint8Array | undefined {
+  if (!ENABLE_GZIP) return undefined
+  if (data.byteLength < GZIP_MIN_BYTES) return undefined
+  if (!isMimeTypeCompressible(mimeType)) return undefined
+  try {
+    return Bun.gzipSync(data.buffer as ArrayBuffer)
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Create response handler function with ETag and Gzip support
+ */
+function createResponseHandler(
+  asset: InMemoryAsset,
+): (req: Request) => Response {
+  return (req: Request) => {
+    const headers: Record<string, string> = {
+      'Content-Type': asset.type,
+      'Cache-Control': asset.immutable
+        ? 'public, max-age=31536000, immutable'
+        : 'public, max-age=3600',
+    }
+
+    if (ENABLE_ETAG && asset.etag) {
+      const ifNone = req.headers.get('if-none-match')
+      if (ifNone && ifNone === asset.etag) {
+        return new Response(null, {
+          status: 304,
+          headers: { ETag: asset.etag },
+        })
+      }
+      headers.ETag = asset.etag
+    }
+
+    if (
+      ENABLE_GZIP &&
+      asset.gz &&
+      req.headers.get('accept-encoding')?.includes('gzip')
+    ) {
+      headers['Content-Encoding'] = 'gzip'
+      headers['Content-Length'] = String(asset.gz.byteLength)
+      const gzCopy = new Uint8Array(asset.gz)
+      return new Response(gzCopy, { status: 200, headers })
+    }
+
+    headers['Content-Length'] = String(asset.raw.byteLength)
+    const rawCopy = new Uint8Array(asset.raw)
+    return new Response(rawCopy, { status: 200, headers })
+  }
+}
+
+/**
+ * Create composite glob pattern from include patterns
+ */
+function createCompositeGlobPattern(): Bun.Glob {
+  const raw = (process.env.ASSET_PRELOAD_INCLUDE_PATTERNS ?? '')
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+  if (raw.length === 0) return new Bun.Glob('**/*')
+  if (raw.length === 1) return new Bun.Glob(raw[0])
+  return new Bun.Glob(`{${raw.join(',')}}`)
+}
+
+/**
+ * Initialize 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> = []
+async function initializeStaticRoutes(
+  clientDirectory: string,
+): Promise<PreloadResult> {
+  const routes: Record<string, (req: Request) => Response | Promise<Response>> =
+    {}
+  const loaded: AssetMetadata[] = []
+  const skipped: AssetMetadata[] = []
 
-  console.log(`📦 Loading static assets from ${clientDir}...`)
+  log.info(`Loading static assets from ${clientDirectory}...`)
+  if (VERBOSE) {
     console.log(
-    `   Max preload size: ${(MAX_PRELOAD_BYTES / 1024 / 1024).toFixed(2)} MB`,
+      `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 ?? ''}`,
+        `Include patterns: ${process.env.ASSET_PRELOAD_INCLUDE_PATTERNS ?? ''}`,
       )
     }
     if (EXCLUDE_PATTERNS.length > 0) {
       console.log(
-      `   Exclude patterns: ${process.env.STATIC_PRELOAD_EXCLUDE ?? ''}`,
+        `Exclude patterns: ${process.env.ASSET_PRELOAD_EXCLUDE_PATTERNS ?? ''}`,
       )
     }
+  }
 
   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
+    const glob = createCompositeGlobPattern()
+    for await (const relativePath of glob.scan({ cwd: clientDirectory })) {
+      const filepath = path.join(clientDirectory, relativePath)
+      const route = `/${relativePath.split(path.sep).join(path.posix.sep)}`
 
       try {
         // Get file metadata
@@ -174,20 +330,23 @@ async function buildStaticRoutes(clientDir: string): Promise<PreloadResult> {
         }
 
         // Determine if file should be preloaded
-        const matchesPattern = shouldInclude(relativePath)
+        const matchesPattern = isFileEligibleForPreloading(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',
-              },
-            })
+          // Preload small files into memory with ETag and Gzip support
+          const bytes = new Uint8Array(await file.arrayBuffer())
+          const gz = compressDataIfAppropriate(bytes, metadata.type)
+          const etag = ENABLE_ETAG ? computeEtag(bytes) : undefined
+          const asset: InMemoryAsset = {
+            raw: bytes,
+            gz,
+            etag,
+            type: metadata.type,
+            immutable: true,
+            size: bytes.byteLength,
+          }
+          routes[route] = createResponseHandler(asset)
 
           loaded.push({ ...metadata, size: bytes.byteLength })
           totalPreloadedBytes += bytes.byteLength
@@ -207,13 +366,13 @@ async function buildStaticRoutes(clientDir: string): Promise<PreloadResult> {
         }
       } catch (error: unknown) {
         if (error instanceof Error && error.name !== 'EISDIR') {
-          console.error(`❌ Failed to load ${filepath}:`, error)
+          log.error(`Failed to load ${filepath}: ${error.message}`)
         }
       }
     }
 
-    // Always show file overview in Vite-like format first
-    if (loaded.length > 0 || skipped.length > 0) {
+    // Show detailed file overview only when verbose mode is enabled
+    if (VERBOSE && (loaded.length > 0 || skipped.length > 0)) {
       const allFiles = [...loaded, ...skipped].sort((a, b) =>
         a.route.localeCompare(b.route),
       )
@@ -224,124 +383,162 @@ async function buildStaticRoutes(clientDir: string): Promise<PreloadResult> {
         60,
       )
 
-      // Format file size with KB and gzip estimation
-      const formatFileSize = (bytes: number) => {
+      // Format file size with KB and actual gzip size
+      const formatFileSize = (bytes: number, gzBytes?: number) => {
         const kb = bytes / 1024
-        // Rough gzip estimation (typically 30-70% compression)
+        const sizeStr = kb < 100 ? kb.toFixed(2) : kb.toFixed(1)
+
+        if (gzBytes !== undefined) {
+          const gzKb = gzBytes / 1024
+          const gzStr = gzKb < 100 ? gzKb.toFixed(2) : gzKb.toFixed(1)
+          return {
+            size: sizeStr,
+            gzip: gzStr,
+          }
+        }
+
+        // Rough gzip estimation (typically 30-70% compression) if no actual gzip data
         const gzipKb = kb * 0.35
         return {
-          size: kb < 100 ? kb.toFixed(2) : kb.toFixed(1),
+          size: sizeStr,
           gzip: gzipKb < 100 ? gzipKb.toFixed(2) : gzipKb.toFixed(1),
         }
       }
 
       if (loaded.length > 0) {
         console.log('\n📁 Preloaded into memory:')
+        console.log(
+          'Path                                          │    Size │ Gzip Size',
+        )
         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}`)
+            const gzipStr = `${gzip.padStart(7)} kB`
+            console.log(`${paddedPath} │ ${sizeStr} │  ${gzipStr}`)
           })
       }
 
       if (skipped.length > 0) {
         console.log('\n💾 Served on-demand:')
+        console.log(
+          'Path                                          │    Size │ Gzip Size',
+        )
         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}`)
+            const gzipStr = `${gzip.padStart(7)} kB`
+            console.log(`${paddedPath} │ ${sizeStr} │  ${gzipStr}`)
           })
       }
+    }
 
     // Show detailed verbose info if enabled
     if (VERBOSE) {
+      if (loaded.length > 0 || skipped.length > 0) {
+        const allFiles = [...loaded, ...skipped].sort((a, b) =>
+          a.route.localeCompare(b.route),
+        )
         console.log('\n📊 Detailed file information:')
+        console.log(
+          'Status       │ Path                            │ MIME Type                    │ Reason',
+        )
         allFiles.forEach((file) => {
           const isPreloaded = loaded.includes(file)
-          const status = isPreloaded ? '[MEMORY]' : '[ON-DEMAND]'
+          const status = isPreloaded ? 'MEMORY' : 'ON-DEMAND'
           const reason =
             !isPreloaded && file.size > MAX_PRELOAD_BYTES
-              ? ' (too large)'
+              ? 'too large'
               : !isPreloaded
-                ? ' (filtered)'
-                : ''
+                ? 'filtered'
+                : 'preloaded'
+          const route =
+            file.route.length > 30
+              ? file.route.substring(0, 27) + '...'
+              : file.route
           console.log(
-            `   ${status.padEnd(12)} ${file.route} - ${file.type}${reason}`,
+            `${status.padEnd(12)} │ ${route.padEnd(30)} │ ${file.type.padEnd(28)} │ ${reason.padEnd(10)}`,
           )
         })
+      } else {
+        console.log('\n📊 No files found to display')
       }
     }
 
     // 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`,
+      log.success(
+        `Preloaded ${String(loaded.length)} files (${(totalPreloadedBytes / 1024 / 1024).toFixed(2)} MB) into memory`,
       )
     } else {
-      console.log('ℹ️  No files preloaded into memory')
+      log.info('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)`,
+      log.info(
+        `${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)
+    log.error(
+      `Failed to load static files from ${clientDirectory}: ${String(error)}`,
+    )
   }
 
   return { routes, loaded, skipped }
 }
 
 /**
- * Start the production server
+ * Initialize the server
  */
-async function startServer() {
-  console.log('🚀 Starting production server...')
+async function initializeServer() {
+  log.header('Starting Production Server')
 
   // Load TanStack Start server handler
   let handler: { fetch: (request: Request) => Response | Promise<Response> }
   try {
-    const serverModule = (await import(SERVER_ENTRY)) as {
+    const serverModule = (await import(SERVER_ENTRY_POINT)) as {
       default: { fetch: (request: Request) => Response | Promise<Response> }
     }
     handler = serverModule.default
-    console.log('✅ TanStack Start handler loaded')
+    log.success('TanStack Start application handler initialized')
   } catch (error) {
-    console.error('❌ Failed to load server handler:', error)
+    log.error(`Failed to load server handler: ${String(error)}`)
     process.exit(1)
   }
 
   // Build static routes with intelligent preloading
-  const { routes } = await buildStaticRoutes(CLIENT_DIR)
+  const { routes } = await initializeStaticRoutes(CLIENT_DIRECTORY)
 
   // Create Bun server
   const server = Bun.serve({
-    port: PORT,
-
-    idleTimeout: 255,
+    port: SERVER_PORT,
 
     routes: {
       // Serve static assets (preloaded or on-demand)
       ...routes,
 
       // Fallback to TanStack Start handler for all other routes
-      '/*': (request) => {
+      '/*': async (req: Request) => {
         try {
-          return handler.fetch(request)
+          const h3Response = await handler.fetch(req)
+            
+          const body = await h3Response.arrayBuffer()
+          return new Response(body, {
+            status: h3Response.status,
+            statusText: h3Response.statusText,
+            headers: h3Response.headers,
+          })
         } catch (error) {
-          console.error('Server handler error:', error)
+          log.error(`Server handler error: ${String(error)}`)
           return new Response('Internal Server Error', { status: 500 })
         }
       },
@@ -349,18 +546,18 @@ async function startServer() {
 
     // Global error handler
     error(error) {
-      console.error('Uncaught server error:', error)
+      log.error(
+        `Uncaught server error: ${error instanceof Error ? error.message : String(error)}`,
+      )
       return new Response('Internal Server Error', { status: 500 })
     },
   })
 
-  console.log(
-    `\n🚀 Server running at http://localhost:${String(server.port)}\n`,
-  )
+  log.success(`Server listening on http://localhost:${String(server.port)}`)
 }
 
-// Start the server
-startServer().catch((error: unknown) => {
-  console.error('Failed to start server:', error)
+// Initialize the server
+initializeServer().catch((error: unknown) => {
+  log.error(`Failed to start server: ${String(error)}`)
   process.exit(1)
 })

src/app/routeTree.gen.ts

@@ -14,8 +14,10 @@ import { Route as LogoutRouteImport } from './routes/logout'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as AuthedRouteImport } from './routes/_authed'
 import { Route as AuthedIndexRouteImport } from './routes/_authed/index'
+import { Route as ApiHealthRouteImport } from './routes/api/health'
 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'
@@ -36,11 +38,13 @@ import { Route as AuthedAdminPreviewRouteImport } from './routes/_authed/admin/p
 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 AuthedTournamentsIdGroupsRouteImport } from './routes/_authed/tournaments/$id.groups'
 import { Route as AuthedTournamentsIdBracketRouteImport } from './routes/_authed/tournaments/$id.bracket'
 import { Route as AuthedAdminTournamentsIdIndexRouteImport } from './routes/_authed/admin/tournaments/$id/index'
 import { Route as ApiFilesCollectionRecordIdFileRouteImport } from './routes/api/files/$collection/$recordId/$file'
 import { Route as AuthedAdminTournamentsRunIdRouteImport } from './routes/_authed/admin/tournaments/run.$id'
 import { Route as AuthedAdminTournamentsIdTeamsRouteImport } from './routes/_authed/admin/tournaments/$id/teams'
+import { Route as AuthedAdminTournamentsIdAssignPartnersRouteImport } from './routes/_authed/admin/tournaments/$id/assign-partners'
 
 const RefreshSessionRoute = RefreshSessionRouteImport.update({
   id: '/refresh-session',
@@ -66,6 +70,11 @@ const AuthedIndexRoute = AuthedIndexRouteImport.update({
   path: '/',
   getParentRoute: () => AuthedRoute,
 } as any)
+const ApiHealthRoute = ApiHealthRouteImport.update({
+  id: '/api/health',
+  path: '/api/health',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AuthedStatsRoute = AuthedStatsRouteImport.update({
   id: '/stats',
   path: '/stats',
@@ -76,6 +85,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',
@@ -179,6 +193,12 @@ const AuthedAdminTournamentsIndexRoute =
     path: '/tournaments/',
     getParentRoute: () => AuthedAdminRoute,
   } as any)
+const AuthedTournamentsIdGroupsRoute =
+  AuthedTournamentsIdGroupsRouteImport.update({
+    id: '/tournaments/$id/groups',
+    path: '/tournaments/$id/groups',
+    getParentRoute: () => AuthedRoute,
+  } as any)
 const AuthedTournamentsIdBracketRoute =
   AuthedTournamentsIdBracketRouteImport.update({
     id: '/tournaments/$id/bracket',
@@ -209,15 +229,23 @@ const AuthedAdminTournamentsIdTeamsRoute =
     path: '/tournaments/$id/teams',
     getParentRoute: () => AuthedAdminRoute,
   } as any)
+const AuthedAdminTournamentsIdAssignPartnersRoute =
+  AuthedAdminTournamentsIdAssignPartnersRouteImport.update({
+    id: '/tournaments/$id/assign-partners',
+    path: '/tournaments/$id/assign-partners',
+    getParentRoute: () => AuthedAdminRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
+  '/': typeof AuthedIndexRoute
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
   '/refresh-session': typeof RefreshSessionRoute
   '/admin': typeof AuthedAdminRouteWithChildren
+  '/badges': typeof AuthedBadgesRoute
   '/settings': typeof AuthedSettingsRoute
   '/stats': typeof AuthedStatsRoute
-  '/': typeof AuthedIndexRoute
+  '/api/health': typeof ApiHealthRoute
   '/admin/activities': typeof AuthedAdminActivitiesRoute
   '/admin/badges': typeof AuthedAdminBadgesRoute
   '/admin/preview': typeof AuthedAdminPreviewRoute
@@ -235,20 +263,24 @@ export interface FileRoutesByFullPath {
   '/api/teams/upload-logo': typeof ApiTeamsUploadLogoRoute
   '/api/tournaments/upload-logo': typeof ApiTournamentsUploadLogoRoute
   '/admin/': typeof AuthedAdminIndexRoute
-  '/tournaments': typeof AuthedTournamentsIndexRoute
+  '/tournaments/': typeof AuthedTournamentsIndexRoute
   '/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
-  '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute
+  '/tournaments/$id/groups': typeof AuthedTournamentsIdGroupsRoute
+  '/admin/tournaments/': typeof AuthedAdminTournamentsIndexRoute
+  '/admin/tournaments/$id/assign-partners': typeof AuthedAdminTournamentsIdAssignPartnersRoute
   '/admin/tournaments/$id/teams': typeof AuthedAdminTournamentsIdTeamsRoute
   '/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
   '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileRoute
-  '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdIndexRoute
+  '/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
+  '/api/health': typeof ApiHealthRoute
   '/': typeof AuthedIndexRoute
   '/admin/activities': typeof AuthedAdminActivitiesRoute
   '/admin/badges': typeof AuthedAdminBadgesRoute
@@ -269,7 +301,9 @@ export interface FileRoutesByTo {
   '/admin': typeof AuthedAdminIndexRoute
   '/tournaments': typeof AuthedTournamentsIndexRoute
   '/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
+  '/tournaments/$id/groups': typeof AuthedTournamentsIdGroupsRoute
   '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute
+  '/admin/tournaments/$id/assign-partners': typeof AuthedAdminTournamentsIdAssignPartnersRoute
   '/admin/tournaments/$id/teams': typeof AuthedAdminTournamentsIdTeamsRoute
   '/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
   '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileRoute
@@ -282,8 +316,10 @@ 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
+  '/api/health': typeof ApiHealthRoute
   '/_authed/': typeof AuthedIndexRoute
   '/_authed/admin/activities': typeof AuthedAdminActivitiesRoute
   '/_authed/admin/badges': typeof AuthedAdminBadgesRoute
@@ -304,7 +340,9 @@ export interface FileRoutesById {
   '/_authed/admin/': typeof AuthedAdminIndexRoute
   '/_authed/tournaments/': typeof AuthedTournamentsIndexRoute
   '/_authed/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
+  '/_authed/tournaments/$id/groups': typeof AuthedTournamentsIdGroupsRoute
   '/_authed/admin/tournaments/': typeof AuthedAdminTournamentsIndexRoute
+  '/_authed/admin/tournaments/$id/assign-partners': typeof AuthedAdminTournamentsIdAssignPartnersRoute
   '/_authed/admin/tournaments/$id/teams': typeof AuthedAdminTournamentsIdTeamsRoute
   '/_authed/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
   '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileRoute
@@ -313,13 +351,15 @@ export interface FileRoutesById {
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
+    | '/'
     | '/login'
     | '/logout'
     | '/refresh-session'
     | '/admin'
+    | '/badges'
     | '/settings'
     | '/stats'
-    | '/'
+    | '/api/health'
     | '/admin/activities'
     | '/admin/badges'
     | '/admin/preview'
@@ -337,20 +377,24 @@ export interface FileRouteTypes {
     | '/api/teams/upload-logo'
     | '/api/tournaments/upload-logo'
     | '/admin/'
-    | '/tournaments'
+    | '/tournaments/'
     | '/tournaments/$id/bracket'
-    | '/admin/tournaments'
+    | '/tournaments/$id/groups'
+    | '/admin/tournaments/'
+    | '/admin/tournaments/$id/assign-partners'
     | '/admin/tournaments/$id/teams'
     | '/admin/tournaments/run/$id'
     | '/api/files/$collection/$recordId/$file'
-    | '/admin/tournaments/$id'
+    | '/admin/tournaments/$id/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/login'
     | '/logout'
     | '/refresh-session'
+    | '/badges'
     | '/settings'
     | '/stats'
+    | '/api/health'
     | '/'
     | '/admin/activities'
     | '/admin/badges'
@@ -371,7 +415,9 @@ export interface FileRouteTypes {
     | '/admin'
     | '/tournaments'
     | '/tournaments/$id/bracket'
+    | '/tournaments/$id/groups'
     | '/admin/tournaments'
+    | '/admin/tournaments/$id/assign-partners'
     | '/admin/tournaments/$id/teams'
     | '/admin/tournaments/run/$id'
     | '/api/files/$collection/$recordId/$file'
@@ -383,8 +429,10 @@ export interface FileRouteTypes {
     | '/logout'
     | '/refresh-session'
     | '/_authed/admin'
+    | '/_authed/badges'
     | '/_authed/settings'
     | '/_authed/stats'
+    | '/api/health'
     | '/_authed/'
     | '/_authed/admin/activities'
     | '/_authed/admin/badges'
@@ -405,7 +453,9 @@ export interface FileRouteTypes {
     | '/_authed/admin/'
     | '/_authed/tournaments/'
     | '/_authed/tournaments/$id/bracket'
+    | '/_authed/tournaments/$id/groups'
     | '/_authed/admin/tournaments/'
+    | '/_authed/admin/tournaments/$id/assign-partners'
     | '/_authed/admin/tournaments/$id/teams'
     | '/_authed/admin/tournaments/run/$id'
     | '/api/files/$collection/$recordId/$file'
@@ -417,6 +467,7 @@ export interface RootRouteChildren {
   LoginRoute: typeof LoginRoute
   LogoutRoute: typeof LogoutRoute
   RefreshSessionRoute: typeof RefreshSessionRoute
+  ApiHealthRoute: typeof ApiHealthRoute
   ApiAuthSplatRoute: typeof ApiAuthSplatRoute
   ApiEventsSplatRoute: typeof ApiEventsSplatRoute
   ApiSpotifyCallbackRoute: typeof ApiSpotifyCallbackRoute
@@ -456,7 +507,7 @@ declare module '@tanstack/react-router' {
     '/_authed': {
       id: '/_authed'
       path: ''
-      fullPath: ''
+      fullPath: '/'
       preLoaderRoute: typeof AuthedRouteImport
       parentRoute: typeof rootRouteImport
     }
@@ -467,6 +518,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedIndexRouteImport
       parentRoute: typeof AuthedRoute
     }
+    '/api/health': {
+      id: '/api/health'
+      path: '/api/health'
+      fullPath: '/api/health'
+      preLoaderRoute: typeof ApiHealthRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_authed/stats': {
       id: '/_authed/stats'
       path: '/stats'
@@ -481,6 +539,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'
@@ -491,7 +556,7 @@ declare module '@tanstack/react-router' {
     '/_authed/tournaments/': {
       id: '/_authed/tournaments/'
       path: '/tournaments'
-      fullPath: '/tournaments'
+      fullPath: '/tournaments/'
       preLoaderRoute: typeof AuthedTournamentsIndexRouteImport
       parentRoute: typeof AuthedRoute
     }
@@ -617,10 +682,17 @@ declare module '@tanstack/react-router' {
     '/_authed/admin/tournaments/': {
       id: '/_authed/admin/tournaments/'
       path: '/tournaments'
-      fullPath: '/admin/tournaments'
+      fullPath: '/admin/tournaments/'
       preLoaderRoute: typeof AuthedAdminTournamentsIndexRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
+    '/_authed/tournaments/$id/groups': {
+      id: '/_authed/tournaments/$id/groups'
+      path: '/tournaments/$id/groups'
+      fullPath: '/tournaments/$id/groups'
+      preLoaderRoute: typeof AuthedTournamentsIdGroupsRouteImport
+      parentRoute: typeof AuthedRoute
+    }
     '/_authed/tournaments/$id/bracket': {
       id: '/_authed/tournaments/$id/bracket'
       path: '/tournaments/$id/bracket'
@@ -631,7 +703,7 @@ declare module '@tanstack/react-router' {
     '/_authed/admin/tournaments/$id/': {
       id: '/_authed/admin/tournaments/$id/'
       path: '/tournaments/$id'
-      fullPath: '/admin/tournaments/$id'
+      fullPath: '/admin/tournaments/$id/'
       preLoaderRoute: typeof AuthedAdminTournamentsIdIndexRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
@@ -656,6 +728,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedAdminTournamentsIdTeamsRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
+    '/_authed/admin/tournaments/$id/assign-partners': {
+      id: '/_authed/admin/tournaments/$id/assign-partners'
+      path: '/tournaments/$id/assign-partners'
+      fullPath: '/admin/tournaments/$id/assign-partners'
+      preLoaderRoute: typeof AuthedAdminTournamentsIdAssignPartnersRouteImport
+      parentRoute: typeof AuthedAdminRoute
+    }
   }
 }
 
@@ -665,6 +744,7 @@ interface AuthedAdminRouteChildren {
   AuthedAdminPreviewRoute: typeof AuthedAdminPreviewRoute
   AuthedAdminIndexRoute: typeof AuthedAdminIndexRoute
   AuthedAdminTournamentsIndexRoute: typeof AuthedAdminTournamentsIndexRoute
+  AuthedAdminTournamentsIdAssignPartnersRoute: typeof AuthedAdminTournamentsIdAssignPartnersRoute
   AuthedAdminTournamentsIdTeamsRoute: typeof AuthedAdminTournamentsIdTeamsRoute
   AuthedAdminTournamentsRunIdRoute: typeof AuthedAdminTournamentsRunIdRoute
   AuthedAdminTournamentsIdIndexRoute: typeof AuthedAdminTournamentsIdIndexRoute
@@ -676,6 +756,8 @@ const AuthedAdminRouteChildren: AuthedAdminRouteChildren = {
   AuthedAdminPreviewRoute: AuthedAdminPreviewRoute,
   AuthedAdminIndexRoute: AuthedAdminIndexRoute,
   AuthedAdminTournamentsIndexRoute: AuthedAdminTournamentsIndexRoute,
+  AuthedAdminTournamentsIdAssignPartnersRoute:
+    AuthedAdminTournamentsIdAssignPartnersRoute,
   AuthedAdminTournamentsIdTeamsRoute: AuthedAdminTournamentsIdTeamsRoute,
   AuthedAdminTournamentsRunIdRoute: AuthedAdminTournamentsRunIdRoute,
   AuthedAdminTournamentsIdIndexRoute: AuthedAdminTournamentsIdIndexRoute,
@@ -687,6 +769,7 @@ const AuthedAdminRouteWithChildren = AuthedAdminRoute._addFileChildren(
 
 interface AuthedRouteChildren {
   AuthedAdminRoute: typeof AuthedAdminRouteWithChildren
+  AuthedBadgesRoute: typeof AuthedBadgesRoute
   AuthedSettingsRoute: typeof AuthedSettingsRoute
   AuthedStatsRoute: typeof AuthedStatsRoute
   AuthedIndexRoute: typeof AuthedIndexRoute
@@ -695,10 +778,12 @@ interface AuthedRouteChildren {
   AuthedTournamentsTournamentIdRoute: typeof AuthedTournamentsTournamentIdRoute
   AuthedTournamentsIndexRoute: typeof AuthedTournamentsIndexRoute
   AuthedTournamentsIdBracketRoute: typeof AuthedTournamentsIdBracketRoute
+  AuthedTournamentsIdGroupsRoute: typeof AuthedTournamentsIdGroupsRoute
 }
 
 const AuthedRouteChildren: AuthedRouteChildren = {
   AuthedAdminRoute: AuthedAdminRouteWithChildren,
+  AuthedBadgesRoute: AuthedBadgesRoute,
   AuthedSettingsRoute: AuthedSettingsRoute,
   AuthedStatsRoute: AuthedStatsRoute,
   AuthedIndexRoute: AuthedIndexRoute,
@@ -707,6 +792,7 @@ const AuthedRouteChildren: AuthedRouteChildren = {
   AuthedTournamentsTournamentIdRoute: AuthedTournamentsTournamentIdRoute,
   AuthedTournamentsIndexRoute: AuthedTournamentsIndexRoute,
   AuthedTournamentsIdBracketRoute: AuthedTournamentsIdBracketRoute,
+  AuthedTournamentsIdGroupsRoute: AuthedTournamentsIdGroupsRoute,
 }
 
 const AuthedRouteWithChildren =
@@ -717,6 +803,7 @@ const rootRouteChildren: RootRouteChildren = {
   LoginRoute: LoginRoute,
   LogoutRoute: LogoutRoute,
   RefreshSessionRoute: RefreshSessionRoute,
+  ApiHealthRoute: ApiHealthRoute,
   ApiAuthSplatRoute: ApiAuthSplatRoute,
   ApiEventsSplatRoute: ApiEventsSplatRoute,
   ApiSpotifyCallbackRoute: ApiSpotifyCallbackRoute,

src/app/router.tsx

@@ -13,7 +13,7 @@ export function getRouter() {
         gcTime: 5 * 60 * 1000, // 5 minutes
         refetchOnWindowFocus: false,
         refetchOnReconnect: "always",
-        retry: 3,
+        retry: 1,
       },
     },
   });

src/app/routes/__root.tsx

@@ -11,6 +11,8 @@ import { type QueryClient } from "@tanstack/react-query";
 import { ensureSuperTokensFrontend } from "@/lib/supertokens/client";
 import { AuthContextType } from "@/contexts/auth-context";
 import Providers from "@/features/core/components/providers";
+import { SessionMonitor } from "@/components/session-monitor";
+import { IOSInstallPrompt } from "@/components/ios-install-prompt";
 import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
 import { HeaderConfig } from "@/features/core/types/header-config";
 import { playerQueries } from "@/features/players/queries";
@@ -30,6 +32,7 @@ export const Route = createRootRouteWithContext<{
   fullWidth: boolean;
 }>()({
   head: () => ({
+    title: "FLXN IX",
     meta: [
       {
         charSet: "utf-8",
@@ -39,6 +42,27 @@ export const Route = createRootRouteWithContext<{
         content:
           "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=resizes-content",
       },
+      { name: 'description', content: 'Amicus meus madidus' },
+      { name: 'keywords', content: 'FLXN, beer pong, tournament, sports, statistics, pong' },
+      { name: 'theme-color', content: '#1e293b' },
+      { property: 'og:title', content: 'FLXN' },
+      { property: 'og:description', content: 'Amicus meus madidus' },
+      { property: 'og:url', content: 'https://flexxon.app' },
+      { property: 'og:type', content: 'website' },
+      { property: 'og:site_name', content: 'FLXN' },
+      { property: 'og:image', content: 'https://flexxon.app/favicon.png' },
+      { property: 'og:image:width', content: '512' },
+      { property: 'og:image:height', content: '512' },
+      { property: 'og:image:alt', content: 'FLXN logo' },
+      { property: 'og:locale', content: 'en_US' },
+      { name: 'twitter:card', content: 'summary' },
+      { name: 'twitter:title', content: 'FLXN' },
+      { name: 'twitter:description', content: 'Amicus meus madidus' },
+      { name: 'twitter:image', content: 'https://flexxon.app/favicon.png' },
+      { name: 'mobile-web-app-capable', content: 'yes' },
+      { name: 'apple-mobile-web-app-capable', content: 'yes' },
+      { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+      { name: 'apple-mobile-web-app-title', content: 'FLXN' },
     ],
     links: [
       {
@@ -88,23 +112,35 @@ export const Route = createRootRouteWithContext<{
   component: RootComponent,
   notFoundComponent: () => <Navigate to="/" />,
   beforeLoad: async ({ context, location }) => {
-    // Skip auth check for refresh-session route to avoid infinite loops
-    if (location.pathname === '/refresh-session') {
-      return {};
-    }
-
-    if (location.pathname === '/login' || location.pathname === '/logout') {
+    const publicRoutes = ['/login', '/logout', '/refresh-session'];
+    if (publicRoutes.some(route => location.pathname.startsWith(route))) {
       return {};
     }
 
     try {
-      // https://github.com/TanStack/router/discussions/3531
       const auth = await ensureServerQueryData(
         context.queryClient,
         playerQueries.auth()
       );
       return { auth };
-    } catch (error) {
+    } catch (error: any) {
+      if (typeof window !== 'undefined') {
+        const { doesSessionExist, attemptRefreshingSession } = await import('supertokens-web-js/recipe/session');
+
+        const sessionExists = await doesSessionExist();
+        if (sessionExists) {
+          try {
+            await attemptRefreshingSession();
+            const auth = await ensureServerQueryData(
+              context.queryClient,
+              playerQueries.auth()
+            );
+            return { auth };
+          } catch {
+            return {};
+          }
+        }
+      }
       return {};
     }
   },
@@ -119,6 +155,8 @@ function RootComponent() {
   return (
     <RootDocument>
       <Providers>
+        <SessionMonitor />
+        <IOSInstallPrompt />
         <Outlet />
       </Providers>
     </RootDocument>

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

@@ -1,12 +1,16 @@
 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,
@@ -15,10 +19,27 @@ export const Route = createFileRoute("/_authed/admin/activities")({
       title: "Activities",
       withBackButton: true,
     },
-        refresh: [activityQueries.search().queryKey],
+    refresh: [activityQueries.search().queryKey, playerQueries.activity().queryKey],
   }),
 });
 
 function Stats() {
-  return <ActivitiesTable />;
+  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/tournaments/$id/assign-partners.tsx

@@ -0,0 +1,167 @@
+import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
+import { tournamentQueries, useFreeAgents, useTournament } from "@/features/tournaments/queries";
+import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import { Stack, Text, Button, Alert, LoadingOverlay, Group } from "@mantine/core";
+import { useState } from "react";
+import useGenerateRandomTeams from "@/features/tournaments/hooks/use-generate-random-teams";
+import useConfirmTeamAssignments from "@/features/tournaments/hooks/use-confirm-team-assignments";
+import TeamAssignmentPreview from "@/features/tournaments/components/team-assignment-preview";
+import { WarningCircleIcon, ShuffleIcon, CheckCircleIcon } from "@phosphor-icons/react";
+import { PlayerInfo } from "@/features/players/types";
+import { useQueryClient } from "@tanstack/react-query";
+
+export const Route = createFileRoute("/_authed/admin/tournaments/$id/assign-partners")({
+  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: `Manage ${context.tournament.name}`,
+    },
+  }),
+  component: RouteComponent,
+});
+
+interface TeamAssignment {
+  player1: PlayerInfo;
+  player2: PlayerInfo;
+  teamName: string;
+}
+
+function RouteComponent() {
+  const { id } = Route.useParams();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { data: freeAgents } = useFreeAgents(id);
+  const [assignments, setAssignments] = useState<TeamAssignment[] | null>(null);
+  const [currentSeed, setCurrentSeed] = useState<number | undefined>(undefined);
+
+  const generateMutation = useGenerateRandomTeams();
+  const confirmMutation = useConfirmTeamAssignments();
+
+  const hasOddPlayers = freeAgents.length % 2 !== 0;
+  const hasEnoughPlayers = freeAgents.length >= 2;
+
+  const handleGenerate = () => {
+    generateMutation.mutate(
+      { data: { tournamentId: id, seed: currentSeed } },
+      {
+        onSuccess: (result) => {
+          setAssignments(result.assignments);
+          setCurrentSeed(result.seed);
+        },
+      }
+    );
+  };
+
+  const handleReroll = () => {
+    if (currentSeed === undefined) return;
+    generateMutation.mutate(
+      { data: { tournamentId: id, seed: currentSeed + 1 } },
+      {
+        onSuccess: (result) => {
+          setAssignments(result.assignments);
+          setCurrentSeed(result.seed);
+        },
+      }
+    );
+  };
+
+  const handleConfirm = () => {
+    if (!assignments) return;
+
+    const formattedAssignments = assignments.map((a) => ({
+      player1Id: a.player1.id,
+      player2Id: a.player2.id,
+      teamName: a.teamName,
+    }));
+
+    confirmMutation.mutate(
+      { data: { tournamentId: id, assignments: formattedAssignments } },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: tournamentQueries.details(id).queryKey });
+          queryClient.invalidateQueries({ queryKey: tournamentQueries.free_agents(id).queryKey });
+          navigate({ to: "/admin/tournaments/$id", params: { id } });
+        },
+      }
+    );
+  };
+
+  return (
+    <Stack gap="lg" pos="relative">
+      <LoadingOverlay visible={confirmMutation.isPending} />
+
+      <Stack gap="xs">
+        <Group gap="xs" align="baseline">
+          <Text size="xl" fw={700}>
+            {freeAgents.length}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {freeAgents.length === 1 ? "player enrolled" : "players enrolled"}
+          </Text>
+        </Group>
+
+        {!hasEnoughPlayers && (
+          <Alert color="yellow" icon={<WarningCircleIcon size={16} />}>
+            Need at least 2 players to create teams
+          </Alert>
+        )}
+
+        {hasOddPlayers && (
+          <Alert color="red" icon={<WarningCircleIcon size={16} />}>
+            Cannot create teams with an odd number of players. Please have one player unenroll.
+          </Alert>
+        )}
+
+        {!assignments && hasEnoughPlayers && !hasOddPlayers && (
+          <Button
+            leftSection={<ShuffleIcon size={18} />}
+            onClick={handleGenerate}
+            loading={generateMutation.isPending}
+          >
+            Generate Random Pairings
+          </Button>
+        )}
+      </Stack>
+
+      {assignments && (
+        <Stack gap="md">
+          <Group justify="space-between" align="center">
+            <Text size="lg" fw={600}>
+              Partner Assignments
+            </Text>
+            <Group gap="sm">
+              <Button
+                variant="subtle"
+                leftSection={<ShuffleIcon size={16} />}
+                onClick={handleReroll}
+                loading={generateMutation.isPending}
+                size="sm"
+              >
+                Re-roll
+              </Button>
+              <Button
+                leftSection={<CheckCircleIcon size={18} />}
+                onClick={handleConfirm}
+                loading={confirmMutation.isPending}
+                size="sm"
+              >
+                Confirm & Create Teams
+              </Button>
+            </Group>
+          </Group>
+
+          <TeamAssignmentPreview assignments={assignments} />
+        </Stack>
+      )}
+    </Stack>
+  );
+}

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

@@ -5,12 +5,15 @@ import {
 } from "@/features/tournaments/queries";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import SeedTournament from "@/features/tournaments/components/seed-tournament";
-import { Container } from "@mantine/core";
+import SetupGroupStage from "@/features/tournaments/components/setup-group-stage";
+import GroupStageView from "@/features/tournaments/components/group-stage-view";
+import { Container, Stack, Divider, Title } from "@mantine/core";
 import { useMemo } from "react";
 import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
 import BracketView from "@/features/bracket/components/bracket-view";
 import { SpotifyControlsBar } from "@/features/spotify/components";
+import { useAuth } from "@/contexts/auth-context";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
   beforeLoad: async ({ context, params }) => {
@@ -39,6 +42,22 @@ 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 hasGroupStage = useMemo(() => {
+    return tournament.matches?.some((match) => match.round === -1) || false;
+  }, [tournament.matches]);
+
+  const hasKnockout = useMemo(() => {
+    return tournament.matches?.some((match) => match.round !== -1) || false;
+  }, [tournament.matches]);
+
+  const knockoutBracketPopulated = useMemo(() => {
+    return tournament.matches?.some((match) =>
+      match.round === 0 && match.lid >= 0 && (match.home || match.away)
+    ) || false;
+  }, [tournament.matches]);
 
   const bracket: BracketData = useMemo(() => {
     if (!tournament.matches || tournament.matches.length === 0) {
@@ -49,6 +68,7 @@ function RouteComponent() {
     const losersMap = new Map<number, Match[]>();
 
     tournament.matches
+      .filter((match) => match.round !== -1)
       .sort((a, b) => a.lid - b.lid)
       .forEach((match) => {
         if (!match.is_losers_bracket) {
@@ -76,14 +96,51 @@ function RouteComponent() {
 
   return (
     <Container size="md" px={0}>
-      <SpotifyControlsBar />
+      { isAdmin && !tournament.regional && <SpotifyControlsBar />}
       {tournament.matches?.length ? (
-        <BracketView bracket={bracket} showControls />
+        hasGroupStage && hasKnockout ? (
+          <Stack gap="xl">
+            <GroupStageView
+              groups={tournament.groups || []}
+              matches={tournament.matches}
+              showControls
+              tournamentId={tournament.id}
+              hasKnockoutBracket={knockoutBracketPopulated}
+              isRegional={tournament.regional}
+              groupConfig={tournament.group_config}
+            />
+            <Divider />
+            <div>
+              <Title order={3} ta="center" mb="md">Knockout Bracket</Title>
+              <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} />
+            </div>
+          </Stack>
+        ) : hasGroupStage ? (
+          <GroupStageView
+            groups={tournament.groups || []}
+            matches={tournament.matches}
+            showControls
+            tournamentId={tournament.id}
+            hasKnockoutBracket={knockoutBracketPopulated}
+            isRegional={tournament.regional}
+            groupConfig={tournament.group_config}
+          />
+        ) : (
+          <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} />
+        )
+      ) : (
+        tournament.regional === true ? (
+          <SetupGroupStage
+            tournamentId={tournament.id}
+            teams={tournament.teams || []}
+          />
         ) : (
           <SeedTournament
             tournamentId={tournament.id}
             teams={tournament.teams || []}
+            isRegional={tournament.regional}
           />
+        )
       )}
     </Container>
   );

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/stats.tsx

@@ -1,15 +1,19 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { playerQueries } from "@/features/players/queries";
 import PlayerStatsTable from "@/features/players/components/player-stats-table";
-import { Suspense } from "react";
+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: ({ context }) => {
     const queryClient = context.queryClient;
-    prefetchServerQuery(queryClient, playerQueries.allStats());
+    prefetchServerQuery(queryClient, playerQueries.allStats('all'));
+    prefetchServerQuery(queryClient, playerQueries.allStats('mainline'));
+    prefetchServerQuery(queryClient, playerQueries.allStats('regional'));
   },
   loader: () => ({
     withPadding: false,
@@ -22,7 +26,57 @@ export const Route = createFileRoute("/_authed/stats")({
 });
 
 function Stats() {
-  return <Suspense fallback={<PlayerStatsTableSkeleton />}>
-    <PlayerStatsTable />
-  </Suspense>;
+  const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
+  const deferredViewType = useDeferredValue(viewType);
+  const isStale = viewType !== deferredViewType;
+
+  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/tournaments/$id.bracket.tsx

@@ -4,13 +4,11 @@ import {
   useTournament,
 } from "@/features/tournaments/queries";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
-import SeedTournament from "@/features/tournaments/components/seed-tournament";
 import { Container } from "@mantine/core";
 import { useMemo } from "react";
 import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
 import BracketView from "@/features/bracket/components/bracket-view";
-import { SpotifyControlsBar } from "@/features/spotify/components";
 
 export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
   beforeLoad: async ({ context, params }) => {
@@ -19,7 +17,7 @@ export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
       queryClient,
       tournamentQueries.details(params.id)
     );
-    if (!tournament) throw redirect({ to: "/admin/tournaments" });
+    if (!tournament) throw redirect({ to: "/tournaments" });
     return {
       tournament,
     };
@@ -27,7 +25,6 @@ export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
   loader: ({ context }) => ({
     fullWidth: true,
     withPadding: false,
-    showSpotifyPanel: true,
     header: {
       withBackButton: true,
       title: `${context.tournament.name}`,
@@ -49,6 +46,7 @@ function RouteComponent() {
     const losersMap = new Map<number, Match[]>();
 
     tournament.matches
+      .filter((match) => match.round !== -1)
       .sort((a, b) => a.lid - b.lid)
       .forEach((match) => {
         if (!match.is_losers_bracket) {
@@ -76,7 +74,7 @@ function RouteComponent() {
 
   return (
     <Container size="md" px={0}>
-      <BracketView bracket={bracket} />
+      <BracketView bracket={bracket} groupConfig={tournament.group_config} />
     </Container>
   );
 }

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

@@ -0,0 +1,47 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import {
+  tournamentQueries,
+  useTournament,
+} from "@/features/tournaments/queries";
+import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import GroupStageView from "@/features/tournaments/components/group-stage-view";
+import { Container } from "@mantine/core";
+
+export const Route = createFileRoute("/_authed/tournaments/$id/groups")({
+  beforeLoad: async ({ context, params }) => {
+    const { queryClient } = context;
+    const tournament = await ensureServerQueryData(
+      queryClient,
+      tournamentQueries.details(params.id)
+    );
+    if (!tournament) throw redirect({ to: "/tournaments" });
+    return {
+      tournament,
+    };
+  },
+  loader: ({ context }) => ({
+    fullWidth: true,
+    withPadding: false,
+    header: {
+      withBackButton: true,
+      title: `${context.tournament.name}`,
+    },
+  }),
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { id } = Route.useParams();
+  const { data: tournament } = useTournament(id);
+
+  return (
+    <Container size="md" px={0}>
+      <GroupStageView
+        groups={tournament.groups || []}
+        matches={tournament.matches || []}
+        isRegional={tournament.regional}
+        groupConfig={tournament.group_config}
+      />
+    </Container>
+  );
+}

src/app/routes/api/health.ts

@@ -0,0 +1,22 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/api/health")({
+  server: {
+    handlers: {
+      GET: () => {
+        return new Response(
+          JSON.stringify({
+            status: "ok",
+            timestamp: new Date().toISOString(),
+          }),
+          {
+            status: 200,
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+      },
+    },
+  },
+});

src/app/routes/refresh-session.tsx

@@ -2,7 +2,8 @@ import { createFileRoute } from '@tanstack/react-router'
 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'
+import { resetRefreshFlag, getOrCreateRefreshPromise } from '@/lib/supertokens/client'
+import { logger } from '@/lib/supertokens'
 
 export const Route = createFileRoute('/refresh-session')({
   component: RouteComponent,
@@ -17,23 +18,31 @@ function RouteComponent() {
 
     const handleRefresh = async () => {
       try {
-        resetRefreshFlag();
-        const refreshed = await attemptRefreshingSession()
+        logger.info("Refresh session route: starting refresh");
+
+        const refreshed = await getOrCreateRefreshPromise(async () => {
+          return await attemptRefreshingSession();
+        });
 
         if (refreshed) {
-          const urlParams = new URLSearchParams(window.location.search)
-          const redirect = urlParams.get('redirect')
+          logger.info("Refresh session route: refresh successful");
+          const urlParams = new URLSearchParams(window.location.search);
+          const redirect = urlParams.get('redirect');
 
           if (redirect && !redirect.includes('_serverFn') && !redirect.includes('/api/')) {
-            window.location.href = decodeURIComponent(redirect)
+            logger.info("Refresh session route: redirecting to", redirect);
+            window.location.href = decodeURIComponent(redirect);
           } else {
+            logger.info("Refresh session route: redirecting to home");
             window.location.href = '/';
           }
         } else {
-          window.location.href = '/login'
+          logger.warn("Refresh session route: refresh failed, redirecting to login");
+          window.location.href = '/login';
         }
       } catch (error) {
-        window.location.href = '/login'
+        logger.error("Refresh session route: error during refresh", error);
+        window.location.href = '/login';
       }
     }
 

src/components/avatar.tsx

@@ -13,7 +13,7 @@ import { XIcon } from "@phosphor-icons/react";
 
 interface AvatarProps
   extends Omit<MantineAvatarProps, "radius" | "color" | "size"> {
-  name: string;
+  name?: string;
   size?: number;
   radius?: string | number;
   withBorder?: boolean;

src/components/button.tsx

@@ -10,5 +10,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   return <MantineButton fullWidth ref={ref} {...props} />;
 });
 
-Button.displayName = "Button";
 export default Button;

src/components/ios-install-prompt.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react'
+import { Box, Paper, Group, Text, ActionIcon } from '@mantine/core'
+import { DownloadIcon, XIcon } from '@phosphor-icons/react'
+
+export function IOSInstallPrompt() {
+  const [show, setShow] = useState(false)
+  const [platform, setPlatform] = useState<'ios' | 'android' | null>(null)
+
+  useEffect(() => {
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
+    const isAndroid = /Android/.test(navigator.userAgent)
+
+    const isInStandaloneMode =
+      window.matchMedia('(display-mode: standalone)').matches ||
+      ('standalone' in window.navigator && (window.navigator as any).standalone)
+
+    const hasBeenDismissed = localStorage.getItem('pwa-install-prompt-dismissed') === 'true'
+
+    if ((isIOS || isAndroid) && !isInStandaloneMode && !hasBeenDismissed) {
+      setPlatform(isIOS ? 'ios' : 'android')
+      const timer = setTimeout(() => setShow(true), 3000)
+      return () => clearTimeout(timer)
+    }
+  }, [])
+
+  const handleDismiss = () => {
+    localStorage.setItem('pwa-install-prompt-dismissed', 'true')
+    setShow(false)
+  }
+
+  if (!show || !platform) return null
+
+  const instructions = platform === 'ios'
+    ? 'Tap Share → Add to Home Screen'
+    : 'Tap Menu (⋮) → Add to Home screen'
+
+  return (
+    <Box style={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 1000, padding: '8px' }}>
+      <Paper shadow="lg" p="sm" style={{ background: 'var(--mantine-color-blue-9)', color: 'white' }}>
+        <Group justify="space-between" wrap="nowrap">
+          <Group gap="xs" wrap="nowrap" style={{ flex: 1 }}>
+            <DownloadIcon size={20} style={{ flexShrink: 0 }} />
+            <Box style={{ flex: 1, minWidth: 0 }}>
+              <Text size="sm" fw={500} style={{ lineHeight: 1.3 }}>
+                Please install FLXN • This will save me Twilio credits as you won't be signed out!
+              </Text>
+              <Text size="xs" opacity={0.9} style={{ lineHeight: 1.2 }}>
+                {instructions}
+              </Text>
+            </Box>
+          </Group>
+          <ActionIcon variant="subtle" color="white" onClick={handleDismiss}>
+            <XIcon size={18} />
+          </ActionIcon>
+        </Group>
+      </Paper>
+    </Box>
+  )
+}

src/components/player-avatar.tsx

@@ -0,0 +1,85 @@
+import { Paper, useMantineTheme } from "@mantine/core";
+import { Facehash } from "facehash";
+
+interface PlayerAvatarProps {
+  name?: string;
+  size?: number;
+  disableFullscreen?: boolean;
+  style?: React.CSSProperties;
+}
+
+const PlayerAvatar = ({
+  name = "",
+  size = 35,
+  disableFullscreen = false,
+  style,
+}: PlayerAvatarProps) => {
+  const theme = useMantineTheme();
+
+  const getFacehashSize = (size: number): 32 | 48 | 64 | 80 => {
+    if (size <= 40) return 32;
+    if (size <= 56) return 48;
+    if (size <= 72) return 64;
+    return 80;
+  };
+
+  const facehashSize = getFacehashSize(size);
+
+  const colors = [
+    "hsla(314, 100%, 80%, 1)",
+    "hsla(58, 93%, 72%, 1)",
+    "hsla(218, 92%, 72%, 1)",
+    "hsla(19, 99%, 44%, 1)",
+    "hsla(156, 86%, 40%, 1)",
+    "hsla(314, 100%, 85%, 1)",
+    "hsla(58, 92%, 79%, 1)",
+    "hsla(218, 91%, 78%, 1)",
+    "hsla(19, 99%, 50%, 1)",
+    "hsla(156, 86%, 64%, 1)",
+  ];
+
+  return (
+    <Paper
+      p={size / 20}
+      radius="100%"
+      withBorder
+      style={{
+        cursor: !disableFullscreen ? 'pointer' : 'default',
+        transition: 'transform 0.15s ease',
+        ...style,
+      }}
+      onMouseEnter={(e) => {
+        if (!disableFullscreen) {
+          e.currentTarget.style.transform = 'scale(1.02)';
+        }
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.transform = 'scale(1)';
+      }}
+    >
+      <div
+        style={{
+          width: size,
+          height: size,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+          borderRadius: '100%',
+        }}
+      >
+        <Facehash
+          name={name}
+          size={size}
+          variant="solid"
+          colors={colors}
+					intensity3d="dramatic"
+          enableBlink
+          style={{ borderRadius: '100%', overflow: 'hidden', color: 'black' }}
+        />
+      </div>
+    </Paper>
+  );
+};
+
+export default PlayerAvatar;

src/components/session-monitor.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { doesSessionExist } from 'supertokens-web-js/recipe/session';
+import { getOrCreateRefreshPromise } from '@/lib/supertokens/client';
+import { attemptRefreshingSession } from 'supertokens-web-js/recipe/session';
+import { logger } from '@/lib/supertokens';
+
+export function SessionMonitor() {
+  const navigate = useNavigate();
+  const lastRefreshTimeRef = useRef<number>(0);
+  const REFRESH_COOLDOWN = 30 * 1000;
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleVisibilityChange = async () => {
+      if (document.visibilityState !== 'visible') return;
+
+      const publicRoutes = ['/login', '/logout', '/refresh-session'];
+      if (publicRoutes.some(route => window.location.pathname === route)) {
+        return;
+      }
+
+      const now = Date.now();
+      if (now - lastRefreshTimeRef.current < REFRESH_COOLDOWN) {
+        logger.info('Session monitor: skipping refresh (cooldown)');
+        return;
+      }
+
+      try {
+        const sessionExists = await doesSessionExist();
+        if (!sessionExists) {
+          logger.info('Session monitor: no session exists, skipping refresh');
+          return;
+        }
+
+        logger.info('Session monitor: tab became visible, refreshing session');
+
+        const refreshed = await getOrCreateRefreshPromise(async () => {
+          return await attemptRefreshingSession();
+        });
+
+        if (refreshed) {
+          lastRefreshTimeRef.current = Date.now();
+          logger.info('Session monitor: session refreshed successfully');
+        } else {
+          logger.warn('Session monitor: refresh returned false');
+        }
+      } catch (error) {
+        logger.error('Session monitor: error refreshing session', error);
+      }
+    };
+
+    handleVisibilityChange();
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [navigate]);
+
+  return null;
+}

src/components/sheet/drawer.tsx

@@ -1,5 +1,10 @@
-import { Box, Container, Flex, Loader, Title, useComputedColorScheme } from "@mantine/core";
-import { PropsWithChildren, Suspense, useEffect, useRef } from "react";
+import {
+  Box,
+  Container,
+  Title,
+  useComputedColorScheme,
+} from "@mantine/core";
+import { PropsWithChildren, useEffect, useRef } from "react";
 import { Drawer as VaulDrawer } from "vaul";
 import styles from "./styles.module.css";
 
@@ -17,6 +22,11 @@ const Drawer: React.FC<DrawerProps> = ({
 }) => {
   const colorScheme = useComputedColorScheme("light");
   const contentRef = useRef<HTMLDivElement>(null);
+  const openedRef = useRef(opened);
+
+  useEffect(() => {
+    openedRef.current = opened;
+  }, [opened]);
 
   useEffect(() => {
     const appElement = document.querySelector(".app") as HTMLElement;
@@ -57,7 +67,7 @@ const Drawer: React.FC<DrawerProps> = ({
       appElement.classList.remove("drawer-scaling");
       themeColorMeta.content = currentColors.normal;
     };
-  }, [opened, colorScheme]);
+  }, [opened]);
 
   useEffect(() => {
     if (!opened || !contentRef.current) return;
@@ -69,46 +79,44 @@ const Drawer: React.FC<DrawerProps> = ({
 
         if (visualViewport) {
           const availableHeight = visualViewport.height;
-          const maxDrawerHeight = Math.min(availableHeight * 0.75, window.innerHeight * 0.75);
+          const maxDrawerHeight = Math.min(
+            availableHeight * 0.75,
+            window.innerHeight * 0.75
+          );
 
           drawerContent.style.maxHeight = `${maxDrawerHeight}px`;
         } else {
-          drawerContent.style.maxHeight = '75vh';
+          drawerContent.style.maxHeight = "75vh";
         }
       }
     };
 
-    const resizeObserver = new ResizeObserver(() => {
-      if (contentRef.current) {
-        const drawerContent = contentRef.current.closest('[data-vaul-drawer-wrapper]');
-        if (drawerContent) {
-          (drawerContent as HTMLElement).style.height = 'auto';
-          (drawerContent as HTMLElement).offsetHeight;
-        }
-      }
-    });
-
     updateDrawerHeight();
 
     if (window.visualViewport) {
-      window.visualViewport.addEventListener('resize', updateDrawerHeight);
+      window.visualViewport.addEventListener("resize", updateDrawerHeight);
     }
 
-    resizeObserver.observe(contentRef.current);
-
     return () => {
-      resizeObserver.disconnect();
       if (window.visualViewport) {
-        window.visualViewport.removeEventListener('resize', updateDrawerHeight);
+        window.visualViewport.removeEventListener("resize", updateDrawerHeight);
       }
     };
-  }, [opened, children]);
+  }, [opened]);
 
   return (
-    <VaulDrawer.Root repositionInputs={false} open={opened} onOpenChange={onChange}>
+    <VaulDrawer.Root
+      repositionInputs={false}
+      open={opened}
+      onOpenChange={onChange}
+    >
       <VaulDrawer.Portal>
         <VaulDrawer.Overlay className={styles.drawerOverlay} />
-        <VaulDrawer.Content className={styles.drawerContent} aria-describedby="drawer" ref={contentRef}>
+        <VaulDrawer.Content
+          className={styles.drawerContent}
+          aria-describedby="drawer"
+          ref={contentRef}
+        >
           <Container flex={1} p="md">
             <Box
               mb="sm"
@@ -120,14 +128,10 @@ const Drawer: React.FC<DrawerProps> = ({
               style={{ borderRadius: "9999px" }}
             />
             <Container mx="auto" maw="28rem" px={0}>
-              <VaulDrawer.Title><Title order={2}>{title}</Title></VaulDrawer.Title>
-              <Suspense fallback={
-                <Flex justify='center' align='center' w='100%' h={400}>
-                  <Loader size='lg' />
-                </Flex>
-              }>
+              <VaulDrawer.Title>
+                <Title order={2}>{title}</Title>
+              </VaulDrawer.Title>
               {children}
-              </Suspense>
             </Container>
           </Container>
         </VaulDrawer.Content>

src/components/sheet/sheet.tsx

@@ -1,8 +1,8 @@
-import { PropsWithChildren, useCallback } from "react";
+import { PropsWithChildren, Suspense, useCallback } from "react";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import Drawer from "./drawer";
 import Modal from "./modal";
-import { ScrollArea } from "@mantine/core";
+import { ScrollArea, Flex, Loader } from "@mantine/core";
 
 interface SheetProps extends PropsWithChildren {
   title?: string;
@@ -16,6 +16,8 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
 
   const SheetComponent = isMobile ? Drawer : Modal;
 
+  if (!opened) return null;
+
   return (
     <SheetComponent
       title={title}
@@ -23,6 +25,11 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
       onChange={onChange}
       onClose={handleClose}
     >
+      <Suspense fallback={
+        <Flex justify='center' align='center' w='100%' style={{ minHeight: '25vh' }}>
+          <Loader size='lg' />
+        </Flex>
+      }>
         <ScrollArea.Autosize
           style={{ flex: 1, maxHeight: '75dvh' }}
           scrollbarSize={8}
@@ -31,6 +38,7 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
         >
           {children}
         </ScrollArea.Autosize>
+      </Suspense>
     </SheetComponent>
   );
 };

src/components/stats-overview.tsx

@@ -101,10 +101,10 @@ const StatsOverview = ({ statsData, isLoading = false }: StatsOverviewProps) =>
     { label: "Losses", value: overallStats.losses, Icon: XIcon },
     { label: "Cups Made", value: overallStats.total_cups_made, Icon: FireIcon },
     { label: "Cups Against", value: overallStats.total_cups_against, Icon: ShieldIcon },
-    { label: "Avg Cups Per Game", value: avgCupsPerMatch > 0 ? avgCupsPerMatch : null, Icon: ChartLineUpIcon },
-    { label: "Avg Cups Against", value: avgCupsAgainstPerMatch > 0 ? avgCupsAgainstPerMatch : null, Icon: ShieldCheckIcon },
-    { label: "Avg Win Margin", value: avgMarginOfVictory > 0 ? avgMarginOfVictory : null, Icon: ArrowUpIcon },
-    { label: "Avg Loss Margin", value: avgMarginOfLoss > 0 ? avgMarginOfLoss : null, Icon: ArrowDownIcon },
+    { label: "Avg Cups Per Match", value: avgCupsPerMatch >= 0 ? avgCupsPerMatch : null, Icon: ChartLineUpIcon },
+    { label: "Avg Cups Against", value: avgCupsAgainstPerMatch >= 0 ? avgCupsAgainstPerMatch : null, Icon: ShieldCheckIcon },
+    { label: "Avg Win Margin", value: avgMarginOfVictory >= 0 ? avgMarginOfVictory : null, Icon: ArrowUpIcon },
+    { label: "Avg Loss Margin", value: avgMarginOfLoss >= 0 ? avgMarginOfLoss : null, Icon: ArrowDownIcon },
   ];
 
   return (
@@ -133,7 +133,7 @@ export const StatsSkeleton = () => {
     { label: "Losses", Icon: XIcon },
     { label: "Cups Made", Icon: FireIcon },
     { label: "Cups Against", Icon: ShieldIcon },
-    { label: "Avg Cups Per Game", Icon: ChartLineUpIcon },
+    { label: "Avg Cups Per Match", Icon: ChartLineUpIcon },
     { label: "Avg Cups Against", Icon: ShieldCheckIcon },
     { label: "Avg Win Margin", Icon: ArrowUpIcon },
     { label: "Avg Loss Margin", Icon: ArrowDownIcon },

src/components/swipeable-tabs.tsx

@@ -18,6 +18,7 @@ interface TabItem {
 interface SwipeableTabsProps {
   tabs: TabItem[];
   defaultTab?: number;
+  mb?: string | number;
   onTabChange?: (index: number, tab: TabItem) => void;
 }
 
@@ -25,6 +26,7 @@ function SwipeableTabs({
   tabs,
   defaultTab = 0,
   onTabChange,
+  mb,
 }: SwipeableTabsProps) {
   const router = useRouter();
   const search = router.state.location.search as any;
@@ -144,7 +146,7 @@ function SwipeableTabs({
         style={{
           display: "flex",
           paddingInline: "var(--mantine-spacing-md)",
-          marginBottom: "var(--mantine-spacing-md)",
+          marginBottom: mb !== undefined ? mb : "var(--mantine-spacing-md)",
           zIndex: 100,
           backgroundColor: "var(--mantine-color-body)",
         }}
@@ -205,11 +207,13 @@ function SwipeableTabs({
           height: carouselHeight === "auto" ? "auto" : `${carouselHeight}px`,
           transition: "height 300ms ease",
           touchAction: "pan-y",
+          width: "100%",
+          maxWidth: "100vw",
         }}
       >
         {tabs.map((tab, index) => (
           <Carousel.Slide key={`${tab.label}-content-${index}`}>
-            <Box ref={setSlideRef(index)} style={{ height: "auto" }}>
+            <Box ref={setSlideRef(index)} style={{ height: "auto", width: "100%", maxWidth: "100vw", overflow: "hidden" }}>
               {tab.content}
             </Box>
           </Carousel.Slide>

src/components/team-avatar.tsx

@@ -0,0 +1,129 @@
+import { Box, AvatarGroup } from "@mantine/core";
+import { CrownIcon } from "@phosphor-icons/react";
+import { TeamInfo } from "@/features/teams/types";
+import Avatar from "./avatar";
+import PlayerAvatar from "./player-avatar";
+
+interface TeamAvatarProps {
+  team: TeamInfo;
+  size?: number;
+  radius?: string | number;
+  withBorder?: boolean;
+  disableFullscreen?: boolean;
+  contain?: boolean;
+  style?: React.CSSProperties;
+  winner?: boolean;
+  isRegional?: boolean;
+}
+
+const TeamAvatar = ({
+  team,
+  size = 35,
+  radius = "sm",
+  withBorder = true,
+  disableFullscreen = false,
+  contain = false,
+  style,
+  winner = false,
+  isRegional,
+}: TeamAvatarProps) => {
+  const hasNoLogo = !team.logo;
+  const hasTwoPlayers = team.players?.length === 2;
+
+  const shouldShowPlayerAvatars = isRegional === true && hasTwoPlayers && hasNoLogo;
+
+  if (shouldShowPlayerAvatars && team.players?.length === 2) {
+    const playerSize = size * 0.6;
+    const crownSize = Math.max(12, size * 0.35);
+
+    return (
+      <Box
+        style={{
+          position: "relative",
+          width: size,
+          height: size,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          ...style,
+        }}
+      >
+        <AvatarGroup spacing={size * -0.25}>
+          <Box style={{ position: "relative" }}>
+            <PlayerAvatar
+              name={`${team.players[0].first_name} ${team.players[0].last_name}`}
+              size={playerSize}
+              disableFullscreen={disableFullscreen}
+            />
+            {winner && (
+              <Box
+                style={{
+                  position: "absolute",
+                  top: -crownSize * 1.1,
+                  left: "45%",
+                  transform: "translateX(-50%)",
+                  color: "gold",
+                  rotate: "-5deg",
+                }}
+              >
+                <CrownIcon size={crownSize} weight="fill" />
+              </Box>
+            )}
+          </Box>
+          <Box style={{ position: "relative" }}>
+            <PlayerAvatar
+              name={`${team.players[1].first_name} ${team.players[1].last_name}`}
+              size={playerSize}
+              disableFullscreen={disableFullscreen}
+            />
+            {winner && (
+              <Box
+                style={{
+                  position: "absolute",
+                  top: -crownSize * 0.95,
+                  left: "65%",
+                  transform: "translateX(-50%)",
+                  color: "gold",
+                  rotate: "10deg",
+                }}
+              >
+                <CrownIcon size={crownSize} weight="fill" />
+              </Box>
+            )}
+          </Box>
+        </AvatarGroup>
+      </Box>
+    );
+  }
+
+  const crownSize = Math.max(14, size * 0.4); 
+
+  return (
+    <Box style={{ position: "relative", ...style }}>
+      <Avatar
+        name={team.name}
+        size={size}
+        radius={radius}
+        withBorder={withBorder}
+        disableFullscreen={disableFullscreen}
+        contain={contain}
+        src={team.logo ? `/api/files/teams/${team.id}/${team.logo}` : undefined}
+      />
+      {winner && (
+        <Box
+          style={{
+            position: "absolute",
+            top: -crownSize * 0.6,
+            left: -crownSize * 0.25,
+            transform: "rotate(-25deg)",
+            color: "gold",
+          }}
+        >
+          <CrownIcon size={crownSize} weight="fill" />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default TeamAvatar;

src/contexts/spotify-context.tsx

@@ -1,6 +1,7 @@
 import { createContext, useCallback, useEffect, useState, PropsWithChildren } from 'react';
 import { SpotifyAuth } from '@/lib/spotify/auth';
 import { useAuth } from './auth-context';
+import { useConfig } from '@/hooks/use-config';
 import type {
   SpotifyContextType,
   SpotifyAuthState,
@@ -23,6 +24,7 @@ export const SpotifyContext = createContext<SpotifyContextType | null>(null);
 export const SpotifyProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const { roles } = useAuth();
   const isAdmin = roles?.includes('Admin') || false;
+  const config = useConfig();
 
   const [authState, setAuthState] = useState<SpotifyAuthState>(defaultSpotifyState);
 
@@ -40,8 +42,8 @@ export const SpotifyProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const [isResumeLoading, setIsResumeLoading] = useState(false);
 
   const spotifyAuth = new SpotifyAuth(
-    import.meta.env.VITE_SPOTIFY_CLIENT_ID!,
-    import.meta.env.VITE_SPOTIFY_REDIRECT_URI!
+    config.spotifyClientId,
+    config.spotifyRedirectUri
   );
 
   useEffect(() => {

src/features/activities/components/activities-table.tsx

@@ -92,8 +92,6 @@ const ActivityListItem = memo(({ activity, onClick }: ActivityListItemProps) =>
   );
 });
 
-ActivityListItem.displayName = "ActivityListItem";
-
 interface ActivityDetailsSheetProps {
   activity: Activity | null;
   isOpen: boolean;
@@ -205,8 +203,6 @@ const ActivityDetailsSheet = memo(({ activity, isOpen, onClose }: ActivityDetail
   );
 });
 
-ActivityDetailsSheet.displayName = "ActivityDetailsSheet";
-
 const ActivitiesResults = ({ searchParams, page, setPage, onActivityClick }: any) => {
   const { data: result } = useActivities(searchParams);
   return (

src/features/badges/components/badge-showcase.tsx

@@ -18,16 +18,15 @@ interface BadgeDisplay {
 
 interface BadgeIconProps {
   badge: Badge;
-  earned: boolean;
+  filled: boolean;
 }
 
-const BadgeIcon = ({ badge, earned, size = 48 }: BadgeIconProps & { size?: number }) => {
+export const BadgeIcon = ({ badge, filled, size = 48 }: BadgeIconProps & { size?: number }) => {
   const [imageError, setImageError] = useState(false);
   const imagePath = `/static/img/${badge.key}.png`;
 
   if (imageError) {
-    // Fallback to icon if image fails to load
-    return earned ? (
+    return filled ? (
       <MedalIcon
         size={size}
         weight="fill"
@@ -51,7 +50,7 @@ const BadgeIcon = ({ badge, earned, size = 48 }: BadgeIconProps & { size?: numbe
       onError={() => setImageError(true)}
       style={{
         objectFit: 'contain',
-        opacity: earned ? 1 : 0.4,
+        opacity: filled ? 1 : 0.4,
       }}
     />
   );
@@ -142,7 +141,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
       <Box
         px="md"
         style={{
-          maxHeight: '220px',
+          maxHeight: '240px',
           overflowY: 'auto',
           overflowX: 'hidden',
           width: '100%',
@@ -180,15 +179,15 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                           <Box
                             key={i}
                             style={{
-                              width: '85px',
-                              height: '85px',
+                              width: '100px',
+                              height: '100px',
                               borderRadius: '12px',
-                              background: 'transparent',
+                              background: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-7))',
                               border: '2px solid var(--mantine-primary-color-5)',
                               position: 'absolute',
-                              top: `${(i + 1) * 3}px`,
-                              left: `${(i + 1) * 3}px`,
-                              opacity: 0.4 - (i * 0.15),
+                              top: `${(i + 1) * 4}px`,
+                              left: `${(i + 1) * 4}px`,
+                              opacity: 0.3 - (i * 0.1),
                               zIndex: -(i + 1),
                             }}
                           />
@@ -210,6 +209,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                         justifyContent: 'center',
                         flexDirection: 'column',
                         gap: '4px',
+                        padding: 'var(--mantine-spacing-sm)',
                         position: 'relative',
                         boxShadow: display.earned
                           ? '0 0 0 1px color-mix(in srgb, var(--mantine-primary-color-6) 20%, transparent)'
@@ -218,7 +218,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                         zIndex: 1,
                       }}
                     >
-                      <BadgeIcon badge={display.badge} earned={display.earned} />
+                      <BadgeIcon badge={display.badge} filled={display.earned} />
 
                       {showStack && (
                         <Box
@@ -242,6 +242,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
 
                       <Text
                         size="xs"
+                        px={4}
                         fw={display.earned ? 600 : 500}
                         ta="center"
                         c={display.earned ? undefined : 'dimmed'}
@@ -255,7 +256,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                 <Popover.Dropdown>
                   <Stack gap={4} align="center">
                     <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                      <BadgeIcon badge={display.badge} earned={display.earned} size={80} />
+                      <BadgeIcon badge={display.badge} filled={display.earned} size={80} />
                     </Box>
 
                     <Title order={5} ta="center">

src/features/badges/components/badge-stats-table-skeleton.tsx

@@ -0,0 +1,67 @@
+import {
+  Stack,
+  Container,
+  Box,
+  Divider,
+  Grid,
+  Skeleton,
+} from '@mantine/core';
+
+const BadgeStatsTableSkeleton = () => {
+  return (
+    <Container size='100%' px={0}>
+      <Stack gap='xs'>
+        <Stack gap={0}>
+          {Array.from({ length: 15 }).map((_, index) => (
+            <BadgeStatRowSkeleton
+              key={`skeleton-${index}`}
+              isLastRow={index >= 14}
+            />
+          ))}
+        </Stack>
+      </Stack>
+    </Container>
+  );
+};
+
+export default BadgeStatsTableSkeleton;
+
+interface BadgeStatRowSkeletonProps {
+  isLastRow: boolean;
+}
+
+const BadgeStatRowSkeleton: React.FC<BadgeStatRowSkeletonProps> = ({
+  isLastRow,
+}) => {
+  return (
+    <Box>
+      <Grid p={'xs'} align='center'>
+        <Grid.Col span={2} style={{ display: 'flex', alignItems: 'center' }}>
+          <Skeleton circle height={48} width={48} />
+        </Grid.Col>
+        <Grid.Col span={'auto'}>
+          <Stack gap={8}>
+            <Skeleton height={16} width='60%' />
+            <Skeleton height={14} width='80%' />
+            <Skeleton height={12} width='50%' mt={4} />
+          </Stack>
+        </Grid.Col>
+        <Grid.Col
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            width: '73px',
+            flexBasis: '73px',
+          }}
+        >
+          <Stack gap={4} align='center'>
+            <Skeleton height={20} width={40} />
+            <Skeleton height={12} width={50} />
+          </Stack>
+        </Grid.Col>
+      </Grid>
+      {!isLastRow && <Divider />}
+    </Box>
+  );
+};

src/features/badges/components/badge-stats-table.tsx

@@ -0,0 +1,177 @@
+import {
+  Stack,
+  Container,
+  Title,
+  Box,
+  Divider,
+  Text,
+  Grid,
+  UnstyledButton,
+} from '@mantine/core';
+import { useAllBadges, useAllEarnedBadges } from '../queries';
+import { BadgeIcon } from './badge-showcase';
+import { useMemo } from 'react';
+import { Badge, EarnedBadge } from '../types';
+import { useAllPlayers } from '@/features/teams/hooks/use-available-players';
+import { useSheet } from '@/hooks/use-sheet';
+import Sheet from '@/components/sheet/sheet';
+import PlayerList from '@/features/players/components/player-list';
+import { useAuth } from '@/contexts/auth-context';
+import { Player } from '@/features/players/types';
+
+const BadgeStatsTable = () => {
+  const { data: allBadges } = useAllBadges();
+  const { data: allEarnedBadges } = useAllEarnedBadges();
+  const { data: allPlayers } = useAllPlayers();
+  const totalNumPlayers = allPlayers?.length || 0;
+
+  const groupedEarnedBadges = useMemo(() => {
+    const returnDict = new Map<string, EarnedBadge[]>();
+    allEarnedBadges?.forEach((earnedBadge) => {
+      if (!returnDict.has(earnedBadge.badge)) {
+        returnDict.set(earnedBadge.badge, []);
+      }
+      returnDict.get(earnedBadge.badge)!.push(earnedBadge);
+    });
+    return returnDict;
+  }, [allEarnedBadges]);
+
+  if (allBadges.length === 0) {
+    return (
+      <Container px={0} size='md'>
+        <Stack align='center' gap='md' py='xl'>
+          <Title order={3} c='dimmed'>
+            No Badges Available
+          </Title>
+        </Stack>
+      </Container>
+    );
+  }
+
+  return (
+    <Container size='100%' px={0}>
+      <Stack gap='xs'>
+        <Stack gap={0}>
+          {allBadges.map((badge, index) => (
+            <BadgeStatRow
+              badge={badge}
+              totalNumPlayers={totalNumPlayers}
+              earnedBadges={groupedEarnedBadges.get(badge.id) || []}
+              isLastRow={index >= allBadges.length - 1}
+            />
+          ))}
+        </Stack>
+      </Stack>
+    </Container>
+  );
+};
+
+export default BadgeStatsTable;
+
+interface BadgeStatRowProps {
+  badge: Badge;
+  totalNumPlayers: number;
+  earnedBadges: EarnedBadge[];
+  isLastRow: boolean;
+}
+
+const BadgeStatRow: React.FC<BadgeStatRowProps> = ({
+  badge,
+  totalNumPlayers,
+  earnedBadges,
+  isLastRow,
+}) => {
+  const badgeSheet = useSheet();
+  const { user } = useAuth();
+
+  const playerNamesBlurb = useMemo(() => {
+    if (earnedBadges.length === 0) return 'No players yet';
+
+    const currentUserHasBadge = earnedBadges.some(
+      (eb) => eb.player.id === user?.id
+    );
+
+    const otherPlayers = earnedBadges.filter(
+      (eb) => eb.player.id !== user?.id
+    );
+
+    const displayPlayers = currentUserHasBadge
+      ? otherPlayers.slice(0, 2)
+      : earnedBadges.slice(0, 3);
+
+    const names = displayPlayers.map((eb) => eb.player.first_name);
+
+    if (currentUserHasBadge) {
+      const remaining = earnedBadges.length - 1 - names.length;
+      if (names.length === 0 && remaining === 0) {
+        return 'You';
+      } else if (names.length === 0 && remaining > 0) {
+        return `You and ${remaining} other${remaining > 1 ? 's' : ''}`;
+      } else if (remaining > 0) {
+        return `You, ${names.join(', ')} and ${remaining} other${remaining > 1 ? 's' : ''}`;
+      } else {
+        return `You${names.length > 0 ? ` and ${names.join(', ')}` : ''}`;
+      }
+    } else {
+      const remaining = earnedBadges.length - names.length;
+      if (remaining > 0) {
+        return `${names.join(', ')} and ${remaining} other${remaining > 1 ? 's' : ''}`;
+      } else {
+        return names.join(', ');
+      }
+    }
+  }, [earnedBadges, user?.id]);
+
+  const playersForList: Player[] = useMemo(() => {
+    return earnedBadges.map((eb) => ({
+      id: eb.player.id,
+      first_name: eb.player.first_name,
+      last_name: eb.player.last_name,
+    } as Player));
+  }, [earnedBadges]);
+
+  return (
+    <Box key={badge.id}>
+      <UnstyledButton onClick={badgeSheet.open} w='100%'>
+        <Grid p={'xs'} align='center'>
+          <Grid.Col span={2} style={{ display: 'flex', alignItems: 'center' }}>
+            <BadgeIcon badge={badge} filled={true} />
+          </Grid.Col>
+          <Grid.Col span={'auto'}>
+            <Stack gap={2}>
+              <Text fw={700}>{badge.name}</Text>
+              <Text size="sm" fw={500}>{badge.description}</Text>
+              <Text size='xs' c='dimmed' mt={4}>
+                {playerNamesBlurb}
+              </Text>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              width: '73px',
+              flexBasis: '73px', // ensures the width is respected
+            }}
+          >
+            <Stack gap={0} align='center'>
+              <Text c="dimmed" size='lg' fw={700}>
+                {(
+                  ((earnedBadges?.length ?? 0) / totalNumPlayers) *
+                  100
+                ).toFixed(0)}
+                %
+              </Text>
+              <Text c="dimmed" size='xs'>of players</Text>
+            </Stack>
+          </Grid.Col>
+        </Grid>
+      </UnstyledButton>
+      <Sheet title={badge.name + ' Badge Holders'} {...badgeSheet.props}>
+        <PlayerList players={playersForList} />
+      </Sheet>
+      {!isLastRow && <Divider />}
+    </Box>
+  );
+};

src/features/badges/queries.ts

@@ -1,9 +1,10 @@
 import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
-import { getPlayerBadges, getAllBadges } from "./server";
+import { getPlayerBadges, getAllBadges, getAllEarnedBadges } from "./server";
 
 export const badgeKeys = {
   playerBadges: (playerId: string) => ['badges', 'player', playerId],
   allBadges: () => ['badges', 'all'],
+  allEarnedBadges: () => ['badges', 'earned'],
 };
 
 export const badgeQueries = {
@@ -15,6 +16,10 @@ export const badgeQueries = {
     queryKey: badgeKeys.allBadges(),
     queryFn: async () => await getAllBadges()
   }),
+  allEarnedBadges: () => ({
+    queryKey: badgeKeys.allEarnedBadges(),
+    queryFn: async () => await getAllEarnedBadges(),
+  }),
 };
 
 export const usePlayerBadges = (playerId: string) =>
@@ -22,3 +27,6 @@ export const usePlayerBadges = (playerId: string) =>
 
 export const useAllBadges = () =>
   useServerSuspenseQuery(badgeQueries.allBadges());
+
+export const useAllEarnedBadges = () =>
+  useServerSuspenseQuery(badgeQueries.allEarnedBadges());

src/features/badges/server.ts

@@ -23,6 +23,10 @@ export const getAllBadges = createServerFn()
     toServerResult(() => pbAdmin.listBadges())
   );
 
+export const getAllEarnedBadges = createServerFn()
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async () => toServerResult(() => pbAdmin.listEarnedBadges()));
+
 export const awardManualBadge = createServerFn()
   .inputValidator(z.object({
     playerId: z.string(),

src/features/badges/types.ts

@@ -1,3 +1,5 @@
+import { PlayerInfo } from '../players/types';
+
 export interface BadgeInfo {
   id: string;
   name: string;
@@ -23,3 +25,13 @@ export interface BadgeProgress {
   created: string;
   updated: string;
 }
+
+export interface EarnedBadge {
+  id: string;
+  badge: string;
+  player: PlayerInfo;
+  progress: number;
+  earned: boolean;
+  created: string;
+  updated: string;
+}

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

@@ -7,10 +7,14 @@ import { Match } from "@/features/matches/types";
 
 interface BracketViewProps {
   bracket: BracketData;
-  showControls?: boolean
+  showControls?: boolean;
+  groupConfig?: {
+    num_groups: number;
+    advance_per_group: number;
+  };
 }
 
-const BracketView: React.FC<BracketViewProps> = ({ bracket, showControls }) => {
+const BracketView: React.FC<BracketViewProps> = ({ bracket, showControls, groupConfig }) => {
   const height = useAppShellHeight();
   const orders = useMemo(() => {
     const map: Record<number, number> = {};
@@ -32,14 +36,14 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, showControls }) => {
         <Text fw={600} size="md" m={16}>
           Winners Bracket
         </Text>
-        <Bracket rounds={bracket.winners} orders={orders} showControls={showControls} />
+        <Bracket rounds={bracket.winners} orders={orders} showControls={showControls} groupConfig={groupConfig} />
       </div>
-      {bracket.losers && (
+      {bracket.losers && bracket.losers.length > 0 && bracket.losers.some(round => round.length > 0) && (
         <div>
           <Text fw={600} size="md" m={16}>
             Losers Bracket
           </Text>
-        <Bracket rounds={bracket.losers} orders={orders} showControls={showControls} />
+        <Bracket rounds={bracket.losers} orders={orders} showControls={showControls} groupConfig={groupConfig} />
         </div>
       )}
     </ScrollArea>

src/features/bracket/components/bracket.tsx

@@ -7,12 +7,17 @@ interface BracketProps {
   rounds: Match[][];
   orders: Record<number, number>;
   showControls?: boolean;
+  groupConfig?: {
+    num_groups: number;
+    advance_per_group: number;
+  };
 }
 
 export const Bracket: React.FC<BracketProps> = ({
   rounds,
   orders,
   showControls,
+  groupConfig,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const svgRef = useRef<SVGSVGElement>(null);
@@ -132,6 +137,7 @@ export const Bracket: React.FC<BracketProps> = ({
                     match={match}
                     orders={orders}
                     showControls={showControls}
+                    groupConfig={groupConfig}
                   />
                 </div>
               )

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

@@ -17,16 +17,62 @@ interface MatchCardProps {
   match: Match;
   orders: Record<number, number>;
   showControls?: boolean;
+  groupConfig?: {
+    num_groups: number;
+    advance_per_group: number;
+  };
 }
 
 export const MatchCard: React.FC<MatchCardProps> = ({
   match,
   orders,
   showControls,
+  groupConfig,
 }) => {
   const queryClient = useQueryClient();
   const editSheet = useSheet();
   const { playTrack, pause } = useSpotifyPlayback();
+
+  const getGroupLabel = useCallback((seed: number | undefined) => {
+    if (!seed || !groupConfig) return undefined;
+
+    const groupNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+    const numGroups = groupConfig.num_groups;
+    const advancePerGroup = groupConfig.advance_per_group;
+
+    const totalQualifiedTeams = numGroups * advancePerGroup;
+    const nextPowerOf2 = Math.pow(2, Math.ceil(Math.log2(totalQualifiedTeams)));
+    const wildcardsNeeded = nextPowerOf2 - totalQualifiedTeams;
+
+    if (seed > totalQualifiedTeams && wildcardsNeeded > 0) {
+      const wildcardNumber = seed - totalQualifiedTeams;
+      return `Wildcard ${wildcardNumber}`;
+    }
+
+    const pairIndex = Math.floor((seed - 1) / 2);
+    const isFirstInPair = (seed - 1) % 2 === 0;
+
+    if (isFirstInPair) {
+      const groupIndex = pairIndex % numGroups;
+      const rankIndex = Math.floor(pairIndex / numGroups);
+
+      const rank = rankIndex + 1;
+      const groupName = groupNames[groupIndex] || `${groupIndex + 1}`;
+      const rankSuffix = rank === 1 ? '1st' : rank === 2 ? '2nd' : rank === 3 ? '3rd' : `${rank}th`;
+
+      return `${groupName} ${rankSuffix}`;
+    } else {
+      const groupIndex = (pairIndex + 1) % numGroups;
+      const rankIndex = advancePerGroup - 1 - Math.floor(pairIndex / numGroups);
+
+      const rank = rankIndex + 1;
+      const groupName = groupNames[groupIndex] || `${groupIndex + 1}`;
+      const rankSuffix = rank === 1 ? '1st' : rank === 2 ? '2nd' : rank === 3 ? '3rd' : `${rank}th`;
+
+      return `${groupName} ${rankSuffix}`;
+    }
+  }, [groupConfig]);
+
   const homeSlot = useMemo(
     () => ({
       from: orders[match.home_from_lid],
@@ -39,8 +85,9 @@ export const MatchCard: React.FC<MatchCardProps> = ({
         match.home_cups !== undefined &&
         match.away_cups !== undefined &&
         match.home_cups > match.away_cups,
+      groupLabel: !match.home && match.home_seed ? getGroupLabel(match.home_seed) : undefined,
     }),
-    [match]
+    [match, getGroupLabel]
   );
   const awaySlot = useMemo(
     () => ({
@@ -54,8 +101,9 @@ export const MatchCard: React.FC<MatchCardProps> = ({
         match.away_cups !== undefined &&
         match.home_cups !== undefined &&
         match.away_cups > match.home_cups,
+      groupLabel: !match.away && match.away_seed ? getGroupLabel(match.away_seed) : undefined,
     }),
-    [match]
+    [match, getGroupLabel]
   );
 
   const showToolbar = useMemo(
@@ -179,8 +227,11 @@ export const MatchCard: React.FC<MatchCardProps> = ({
       data: match.id,
     });
 
-    // Play walkout sequence after starting the match
-    if (hasWalkoutData && match.home?.name && match.away?.name) {
+    // Skip announcements for regional tournaments
+    const isRegional = match.tournament?.regional === true;
+
+    // Play walkout sequence after starting the match (only for non-regional tournaments)
+    if (!isRegional && hasWalkoutData && match.home?.name && match.away?.name) {
       try {
         const homeTeam = match.home as Team;
         const awayTeam = match.away as Team;

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

@@ -11,6 +11,7 @@ interface MatchSlotProps {
   seed?: number;
   cups?: number;
   isWinner?: boolean;
+  groupLabel?: string;
 }
 
 export const MatchSlot: React.FC<MatchSlotProps> = ({
@@ -19,7 +20,8 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
   team,
   seed,
   cups,
-  isWinner
+  isWinner,
+  groupLabel
 }) => (
   <Flex
     align="stretch"
@@ -55,6 +57,10 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
               />
             )}
           </>
+        ) : groupLabel ? (
+          <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
+            {groupLabel}
+          </Text>
         ) : from ? (
           <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
             {from_loser ? "Loser" : "Winner"} of Match {from}

src/features/core/components/navbar.tsx

@@ -1,15 +1,16 @@
 import { AppShell, ScrollArea, Stack, Group, Paper, useMantineColorScheme } from "@mantine/core";
-import { Link } from "@tanstack/react-router";
 import { NavLink } from "./nav-link";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useAuth } from  "@/contexts/auth-context";
 import { useLinks } from "../hooks/use-links";
 import { memo } from "react";
+import { useIsPWA } from "@/hooks/use-is-pwa";
 
 const Navbar = () => {
   const { user, roles } = useAuth()
   const isMobile = useIsMobile();
   const { colorScheme } = useMantineColorScheme();
+  const isPWA = useIsPWA();
 
   const links = useLinks(user?.id, roles);
 
@@ -19,7 +20,7 @@ const Navbar = () => {
   //  boxShadow: `5px 5px ${boxShadowColor}`, borderColor
 
   if (isMobile) return (
-    <Paper component='nav' role='navigation' withBorder shadow="sm" radius='lg' h='4rem' w='calc(100% - 1rem)' pos='fixed' m='0.5rem' bottom='0' style={{ zIndex: 10 }}>
+    <Paper component='nav' role='navigation' withBorder shadow="sm" radius='lg' h='4rem' w='calc(100% - 1rem)' pos='fixed' m='0.5rem' bottom={isPWA ? '1rem' : '0'} style={{ zIndex: 10 }}>
       <Group gap='xs' justify='space-around' h='100%' w='100%' px={{ base: 12, sm: 0 }}>
         {links.map((link) => (
           <NavLink key={link.href} {...link} />