Skip to main content

Phase 3: AI Panel Polish, Mobile-First UX, Spacing Overhaul, Fixture Redesign

What Was Implemented​

New Dependency​

  • react-resizable-panels v4.6.2 — API: Group, Panel, Separator (v4 names, not v2 PanelGroup/PanelResizeHandle)

New File​

  • src/components/layout/AIMobileSheet.tsx — Mobile bottom sheet for AI (chat default, analysis tab when activeAnalysis exists)

1. AI Panel: Scrollable, Resizable, Collapsible​

Chat scrolling fix​

  • AIChatPanel.tsx: Root div flex-1 → h-full fixes nested flex overflow. Messages scroll, tabs stay fixed.

AI button always visible​

  • AIFloatingButton.tsx: Removed isOpen hide condition. Shows X when open, gradient Sparkles when closed. z-index z-[60]. Position bottom-[4.5rem] md:bottom-6.

Resizable panes​

  • AIPanel.tsx: Full rewrite using react-resizable-panels v4 (Group/Panel/Separator). Vertical split, minSize={15}, 6px drag handle with pill grip.

Collapsible panes​

  • aiPanelStore.ts: Added analysisVisible, chatVisible, toggleAnalysis(), toggleChat(). Persisted via partialize.
  • AIPanel.tsx: Three render states — both collapsed (restore buttons), one visible (fills full), both visible (resizable). PaneHeader component with collapse ChevronDown button per pane. AnalysisContent now exported for use by AIMobileSheet.

2. Layout Spacing: 5px Gaps, Edge-to-Edge​

5px gap system​

  • MainLayout.tsx: Grid mt-[5px] gap-[5px] pl-[5px] pr-[5px] pb-[5px]. Height h-[calc(100vh-71px)]. Aside/main use h-full.

Sports page push-not-overlay​

  • MainLayout.tsx: Removed isSportsPage exclusion from showAIColumn. AI panel is now a grid column on all pages. Removed overlay div.

Edge-to-edge padding​

  • fixture/[id]/page.tsx: px-4 sm:px-6 py-4 → px-2 py-2
  • live/page.tsx: px-4 sm:px-6 lg:px-8 py-6 → px-2 py-2
  • my-bets/page.tsx: px-4 sm:px-6 lg:px-8 py-6 → px-2 py-2
  • watchlists/page.tsx: px-4 py-6 → px-2 py-2
  • sports/page.tsx: Already tight (px-3 py-4), left as-is

3. Mobile: Bet Slip Bottom Sheet + AI Bottom Sheet​

Bet slip collapsed bar​

  • BetPanel.tsx: Replaced floating FAB with persistent collapsed bar at fixed bottom-16. Shows "Betslip (N)" with ChevronUp. Full-width, above BottomNav.

Improved sheet physics​

  • Both BetPanel.tsx and AIMobileSheet.tsx: Velocity tracking (dismiss if > 500px/s), 40% height threshold, rubber-band at top (Math.pow(overDrag, 0.7)), sheet-transition CSS class for spring snap-back.

AI mobile sheet​

  • AIMobileSheet.tsx: lg:hidden, reads from aiPanelStore, tab bar (Chat/Analysis) only when activeAnalysis exists. Same drag-to-dismiss mechanics. Glassmorphic: bg-slate-900/95 backdrop-blur-2xl.
  • layout.tsx: Added <AIMobileSheet /> after <AIFloatingButton />.

CSS utilities​

  • globals.css: Added .sheet-transition (300ms cubic-bezier(0.32, 0.72, 0, 1)), .glass-panel, .glass-panel-elevated.

4. Fixture Page: Header Removal, Breadcrumbs​

Removed duplicate header card​

  • fixture/[id]/page.tsx: Removed bg-slate-800/50 rounded-xl header block (tournament, LIVE badge, volume, full SportScoreDisplay).

Compact match header in market tab​

  • Inline teams row, SportScoreDisplay compact, LIVE badge, volume, AIFixtureButton size="sm".

1EXCH-style breadcrumbs​

  • FixtureBreadcrumb.tsx: Slash separators (/), ArrowLeft back button, useRouter().back(). Style: text-blue-400 links, text-slate-400 current, text-slate-600 separators.

Files Changed​

FileChange
package.json / package-lock.jsonAdded react-resizable-panels
AIPanel.tsxRewrite: resizable + collapsible panes via Group/Panel/Separator
AIChatPanel.tsxRoot div flex-1 → h-full
AIFloatingButton.tsxAlways visible, X icon when open, z-[60]
aiPanelStore.tsAdded analysisVisible/chatVisible + toggles, persisted
MainLayout.tsx5px gaps, push-not-overlay, height fix
BetPanel.tsxCollapsed bar, velocity drag-to-dismiss, glassmorphic sheet
AIMobileSheet.tsxNEW — Mobile AI bottom sheet
layout.tsxAdded AIMobileSheet
fixture/[id]/page.tsxRemoved header card, compact market tab header, reduced padding
FixtureBreadcrumb.tsxSlash separators, back button
live/page.tsxReduced padding
my-bets/page.tsxReduced padding
watchlists/page.tsxReduced padding
globals.csssheet-transition, glass-panel, glass-panel-elevated utilities

Verification​

  • npx tsc --noEmit — 0 errors
  • npm run lint — 0 new errors (162 pre-existing in unrelated files)