[TODO Import][Client][Backlog] Refactor backlog continuation (P1/P2 pending)

[ferneediaz]

Imported from client/TODO.md.

Kanban

• Column: Backlog
• Area: Client

P1 — Split mega page components (partial)

• pages/battle/Play.tsx — extracted to pages/battle/play/: usePlayConfig.ts, constants.ts, utils.ts, and components/{ModeSelector,RulesPanel,SkillsPicker,BattleRoyalePanel,ClanWarPanel,InvitePanel,...}.tsx; shell Play.tsx is now thin (~110 lines).
  • Deferred to P2: move clan-wars / invite api.post from InvitePanel into services/battles.ts (currently still direct api calls in the panel).
• pages/author/AuthorNew.tsx — extracted to pages/author/new/: useAuthorForm.ts, utils.ts (validation + YAML serialization), and components/{MetaSection,StarterSection,TestsSection,HintsSection,SolutionSection,...}.tsx; shell AuthorNew.tsx is now thin (~112 lines).
  • pages/author/new/useAuthorForm.ts
  • pages/author/new/utils.ts (validation + YAML serialization)
  • pages/author/new/components/{MetaSection,StarterSection,TestsSection,HintsSection,SolutionSection}.tsx
• pages/dashboard/Dashboard.tsx (~780 lines after partial split; target <~400 lines)
  • Extracted: Heatmap, MatchRow, NewsRow, StatTile, StatCard, QuickAction, ModeBreakdown → pages/dashboard/components/
  • Extracted: constants.ts, utils.ts (dashboard-specific helpers/constants)
  • Thin Dashboard.tsx further so the shell is <~400 lines (move remaining inline layout/helpers if any)
  • Move HARD_CODED_NEWS_PREVIEW to pages/dashboard/mockNewsPreview.ts (or remove) — if still inlined, extract when trimming shell
  • P2 overlap: GitHub contributions + services/github.ts + useGithubActivity
  • P2 overlap: replace inline api.get (/users/...) with services/users.ts

P2 — Data layer consistency

• Add services/battles.ts and services/users.ts so pages never call axios/api directly
  • Added services/battles.ts and services/users.ts
  • Migrated dashboard, Play presets/invites, practice solve run, battle results, and useBattle off direct api
  • Broader follow-up: author/auth/invite pages and a few shared hooks/components still import api directly
• Centralize TanStack query keys in lib/queryKeys.ts:

  export const queryKeys = {
    userStats: (userId: string) => ['userStats', userId] as const,
    matchHistory: (userId: string, limit = 20) => ['matchHistory', userId, limit] as const,
    practice: {
      problems: () => ['practice', 'problems'] as const,
      stats: () => ['practice', 'stats'] as const,
      problem: (id: string) => ['practice', 'problem', id] as const,
    },
    newsFeed: (userId: string) => ['newsFeed', userId] as const,
    githubActivity: (userId: string, year: string) =>
      ['githubActivity', userId, year] as const,
  };

• Migrate pages/dashboard/Dashboard.tsx, pages/practice/*, and hooks/useBattle.ts to use queryKeys
• Audit store/slices/battleSlice.ts: server-shaped fields (battle, problem) now live in TanStack Query; Redux keeps battle UI flags (isSubmitting, isRunning, usedSkills, activeEffects)