real-time-fund/app/components/AGENTS.md

app/components/ — UI Components

OVERVIEW

47 app-specific React components (all client-side). Modals dominate (~26). Core display: FundCard, PcFundTable, MobileFundTable.

STRUCTURE

app/components/
├── Core Display (6)
│   ├── FundCard.jsx            # Individual fund card (valuation + holdings)
│   ├── PcFundTable.jsx         # Desktop table layout
│   ├── MobileFundTable.jsx     # Mobile list with swipe actions
│   ├── MobileFundCardDrawer.jsx# Mobile fund detail drawer
│   ├── GroupSummary.jsx        # Group portfolio summary
│   └── MarketIndexAccordion.jsx# Market indices (24 A/HK/US)
├── Modals (26)
│   ├── Fund ops: AddFundToGroupModal, GroupManageModal, GroupModal, AddResultModal
│   ├── Trading: TradeModal, HoldingEditModal, HoldingActionModal, TransactionHistoryModal, PendingTradesModal, DcaModal, AddHistoryModal
│   ├── Settings: SettingsModal, MarketSettingModal, MobileSettingModal, PcTableSettingModal, SortSettingModal
│   ├── Auth: LoginModal, CloudConfigModal
│   ├── Scan: ScanPickModal, ScanProgressModal, ScanImportConfirmModal, ScanImportProgressModal
│   └── Misc: ConfirmModal, SuccessModal, DonateModal, FeedbackModal, WeChatModal, UpdatePromptModal, FundHistoryNetValueModal
├── Charts (3)
│   ├── FundIntradayChart.jsx   # Intraday valuation chart (localStorage data)
│   ├── FundTrendChart.jsx      # Fund trend chart (pingzhongdata)
│   └── FundHistoryNetValue.jsx # Historical NAV display
└── Utilities (7)
    ├── Icons.jsx               # Custom SVG icons (Close, Eye, Moon, Sun, etc.)
    ├── Common.jsx              # Shared UI helpers
    ├── FitText.jsx             # Auto-fit text sizing
    ├── RefreshButton.jsx       # Manual refresh control
    ├── EmptyStateCard.jsx      # Empty state placeholder
    ├── Announcement.jsx        # Banner announcement
    ├── ThemeColorSync.jsx      # Theme meta tag sync
    ├── PwaRegister.jsx         # Service worker registration
    └── AnalyticsGate.jsx       # Conditional GA loader

CONVENTIONS

• All client components — 'use client' at top, no server components
• State from parent — page.jsx manages ALL state; components receive props only
• shadcn/ui primitives — imported from @/components/ui/*
• Mobile/Desktop switching — parent passes isMobile prop; 640px breakpoint
• Modals: use useBodyScrollLock(open) hook for scroll prevention
• Icons: mix of custom SVG (Icons.jsx) + lucide-react
• Styling: glassmorphism via CSS variables (globals.css), no component-level CSS

ANTI-PATTERNS (THIS DIRECTORY)

• No prop drilling avoidance — all state flows from page.jsx via props (30+ prop holes in FundCard)
• Modal sprawl — 26 modals could benefit from a modal manager/context
• Swipe gesture duplication — MobileFundTable and MobileFundCardDrawer both implement swipe logic
• No loading skeletons — components show spinners, not skeleton placeholders