🧩 Split App.tsx into components, hooks, and modules

[GiorgosPanagopoulos]

Summary

Pure refactor — no behaviour change. Breaks the monolithic App.tsx (868 lines) into components, hooks, i18n, types, and an API module. App.tsx is now a thin composition root: providers, routing, layout only.

App.tsx: 868 → 86 lines

New tree

frontend/src/
├── api/
│   ├── auth.ts                 (unchanged)
│   └── chat.ts
├── components/
│   ├── chat/
│   │   ├── ChatPanel.tsx
│   │   ├── MessageBubble.tsx
│   │   ├── MessageList.tsx
│   │   ├── SuggestionChips.tsx
│   │   ├── TracePanel.tsx
│   │   ├── UploadZone.tsx
│   │   └── UsageBadge.tsx
│   ├── common/
│   │   ├── ErrorFallback.tsx
│   │   └── Icon.tsx
│   ├── inspector/
│   │   ├── BidCard.tsx
│   │   ├── DataInspector.tsx
│   │   ├── DataInspectorTabs.tsx
│   │   └── SupplierCard.tsx
│   └── layout/
│       ├── Header.tsx
│       ├── LanguageToggle.tsx
│       └── ThemeToggle.tsx
├── contexts/
│   └── AuthContext.tsx         (unchanged)
├── hooks/
│   ├── useCatalogData.ts
│   ├── useChat.ts
│   ├── useI18n.ts
│   ├── useInspectorData.ts
│   └── useTheme.ts
├── i18n/
│   └── translations.ts
├── pages/
│   └── LoginPage.tsx           (unchanged)
├── types/
│   └── index.ts
└── App.tsx                     86 lines

Verification

• npx tsc --noEmit — clean
• npm run lint — 0 warnings
• npm run build — succeeds
• docker compose up --build -d — all containers healthy
• Manual browser pass (login, chat message + trace panel, dark/light theme, EN/GR toggle, PDF upload, pagination, tab switching) — all match prior behaviour, no console errors

State lifted out of the former AppContent: suppliers/bids into useCatalogData, rightTab into App.tsx. Required because chat and inspector cross-reference each other (empty state shows counts, a successful response switches the right panel to Results). Keeps useChat free of inspector concepts.