Merge pull request #476 from TaloDev/develop

Release 0.69.4

Author: tudddorrr

.github/workflows/docker.yml

@@ -25,10 +25,12 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           platforms: linux/amd64,linux/arm64
-          push: true
+          push: ${{ startsWith(github.ref, 'refs/tags/') }}
           tags: |
             ghcr.io/talodev/frontend:latest
             ghcr.io/talodev/frontend:${{ github.ref_name }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
 
       - name: Image digest
         run: echo ${{ steps.docker_build.outputs.digest }}

CLAUDE.md

@@ -2,10 +2,6 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Project Overview
-
-Talo is a self-hostable game dev dashboard. This is the frontend React application that provides a web interface for managing players, leaderboards, events, stats, game saves, and other game backend features. The frontend communicates with the Talo backend API.
-
 ## Development Commands
 
 ### Running the application
@@ -31,29 +27,6 @@ npm run cypress:open     # Open Cypress (dev server must be running)
 npm run lint             # Run Oxlint on src/**/*.{js,jsx,ts,tsx}
 ```
 
-### Testing Notes
-
-- Unit tests use Vitest with jsdom environment
-- Test files are co-located with source in `__tests__/` directories
-- E2E tests are in `cypress/e2e/pages/` and use Cypress
-- Coverage excludes `src/api/`, `src/entities/`, `src/constants/`, and `src/utils/canViewPage.ts`
-- Tests must run with `TZ=UTC` for consistent date handling
-
-## Architecture Overview
-
-### Tech Stack
-
-- React 18 with TypeScript
-- Vite for build tooling
-- React Router v6 for routing
-- Recoil for global state management
-- Axios for HTTP requests
-- SWR for data fetching and caching
-- Zod for runtime validation
-- Tailwind CSS v4 for styling
-- Recharts for charts
-- React Hook Form for forms
-
 ### Directory Structure
 
 ```
@@ -102,14 +75,7 @@ src/
   - `devDataState` - Dev data inclusion flag
 - State consumed via `useRecoilValue()`, `useRecoilState()`, `useSetRecoilState()`
 
-### API Layer
-
-- Base Axios instance configured in [src/api/api.ts](src/api/api.ts)
-- Request interceptor adds Bearer token and dev data header
-- Response interceptor handles 401s with automatic token refresh
-- Base URL from `VITE_API_URL` environment variable
-
-**Data fetching patterns:**
+### Data fetching
 
 1. **SWR hooks** (23 hooks): Pattern is `use{Entity}(game, params)` returning `{ data, loading, error }`
    - Examples: `useEvents`, `useLeaderboards`, `useStats`
@@ -120,77 +86,12 @@ src/
    - Uses `makeValidatedRequest()` wrapper for Zod validation
    - Returns validated, typed responses
 
-### Component Patterns
-
-- Functional components with TypeScript
-- Composition over inheritance
-- Context for cross-cutting concerns (EventsContext, ToastProvider)
-- Form handling with React Hook Form
-- Tables use composable system: `Table` > `TableHeader`/`TableBody` > `TableCell`
-
-### Key Utilities and Hooks
-
-Located in [src/utils/](src/utils/):
-
-- `useTimePeriod` - Date range calculation from period strings ('1d', '7d', '30d', 'w', 'm', 'y')
-- `useTimePeriodAndDates` - Combined time period and date management
-- `useLocalStorage` - localStorage with React state sync
-- `usePlayer` - Extract player from URL params
-- `useSortedItems` - Client-side sorting
-- `useSearch` - Client-side search filtering
-- `useNodeGraph` - Graph visualization for save data (using @xyflow/react)
-- `buildError` - Normalize error objects
-- `canPerformAction` / `canViewPage` - Permission checking
-
-## Important Patterns
-
-### Authentication
-
-- Managed by [AuthService](src/services/AuthService.ts) singleton
-- Token-based with automatic refresh on 401 responses
-- Token stored in memory (not localStorage for security)
-- Login redirects handled via `useIntendedRoute` hook
-
 ### Authorization
 
 - Route-level checks with `canViewPage()` in Router
 - Action-level checks with `canPerformAction()` throughout components
 - Based on user type (ADMIN, OWNER, DEV, DEMO)
 
-### Validation
-
-- Zod schemas defined alongside entities in [src/entities/](src/entities/)
-- `makeValidatedRequest()` and `makeValidatedGetRequest()` wrappers ensure type safety
-- Validation errors logged and sent to Sentry
-
-### Error Handling
-
-- Centralized error normalization via `buildError()`
-- API errors show user-friendly messages via toast notifications
-- Sentry integration for error tracking
-
-### Date Handling
-
-- All API dates must be UTC
-- Use `convertDateToUTC()` when sending dates to API
-- Tests run with `TZ=UTC` to ensure consistency
-
-### Active Game Context
-
-- Most features require an active game to be selected
-- Active game stored in Recoil state and persisted to localStorage
-- Routes conditionally render based on `activeGame` availability
-
-## Environment Variables
-
-Required environment variables (set via `.env` files):
-
-- `VITE_API_URL` - Backend API base URL (e.g., `http://localhost:3000`)
-
-## Node Version
-
-This project requires Node.js 24.x (see package.json engines).
-
 ## Git Workflow
 
 Main branch for PRs: `develop`

Dockerfile

@@ -6,7 +6,7 @@ COPY . .
 # this prevents them from being substituted with empty values
 RUN sed -i 's/\${/\\${/g' .env.production
 
-RUN npm install
+RUN --mount=type=cache,target=/root/.npm npm install
 RUN npm run build
 
 FROM caddy:2-alpine

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.69.3",
+  "version": "0.69.4",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -26,9 +26,9 @@
     "axios": "^1.13.5",
     "chroma-js": "^3.2.0",
     "clsx": "^2.0.0",
-    "dagre": "^0.8.5",
     "date-fns": "^2.29.3",
     "dinero.js": "^2.0.0-alpha.11",
+    "elkjs": "^0.11.0",
     "framer-motion": "^10.9.1",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.7.2",
@@ -54,7 +54,6 @@
     "@testing-library/react": "^15.0.4",
     "@testing-library/user-event": "^14.5.2",
     "@types/chroma-js": "^3.1.2",
-    "@types/dagre": "^0.7.52",
     "@types/lodash-es": "^4.17.12",
     "@types/randomcolor": "^0.5.9",
     "@types/react": "^18.3.5",

package.json

@@ -16,7 +16,7 @@ export default function useEventBreakdown(
     const qs = new URLSearchParams({
       eventName,
       startDate: convertDateToUTC(startDate),
-      endDate: convertDateToUTC(endDate),
+      endDate: convertDateToUTC(endDate, true),
     }).toString()
 
     const res = await makeValidatedGetRequest(

src/api/useEventBreakdown.ts

@@ -16,7 +16,7 @@ export default function useEvents(activeGame: Game, startDate: string, endDate:
   const fetcher = async ([url]: [string]) => {
     const qs = new URLSearchParams({
       startDate: convertDateToUTC(startDate),
-      endDate: convertDateToUTC(endDate),
+      endDate: convertDateToUTC(endDate, true),
     }).toString()
 
     const res = await makeValidatedGetRequest(

src/api/useEvents.ts

@@ -32,7 +32,7 @@ export default function useHeadlines(
   const fetcher = async ([url]: [string]) => {
     const qs = new URLSearchParams({
       startDate: convertDateToUTC(startDate),
-      endDate: convertDateToUTC(endDate),
+      endDate: convertDateToUTC(endDate, true),
     }).toString()
 
     const headlines: (keyof Headlines)[] = [

src/api/useHeadlines.ts

@@ -25,7 +25,7 @@ export default function useLeaderboardEntries({
     const params: Record<string, string> = { page: String(page) }
     if (withDeleted) params.withDeleted = '1'
     params.startDate = convertDateToUTC(startDate)
-    params.endDate = convertDateToUTC(endDate)
+    params.endDate = convertDateToUTC(endDate, true)
     const qs = new URLSearchParams(params).toString()
 
     const res = await makeValidatedGetRequest(

src/api/useLeaderboardEntries.ts

@@ -19,7 +19,7 @@ export function useNewLeaderboardEntriesChart(
   const fetcher = async ([url]: [string]) => {
     const qs = new URLSearchParams({
       startDate: convertDateToUTC(startDate),
-      endDate: convertDateToUTC(endDate),
+      endDate: convertDateToUTC(endDate, true),
     }).toString()
 
     const res = await makeValidatedGetRequest(