# Pilot Migration — Implementation Plan

## Architecture

Миграция слоя представления без изменения логики. HomePage меняет JSX на DS-компоненты. SearchBar заменяет inline-стили на DS-компоненты + MUI `Box` (разрешён layout utility).

## Files

### Modify
- `apps/frontend/src/pages/home/ui/HomePage.tsx` — замена JSX
- `apps/frontend/src/widgets/search-bar/ui/SearchBar.tsx` — замена JSX

### No changes
- `apps/frontend/src/widgets/search-bar/ui/SearchBar.test.tsx` — тесты не меняются (те же тексты)
- `apps/frontend/src/styles.css` — CSS-переменные всё ещё используются broker-страницами

## Step-by-step

### Step 1: Migrate HomePage

```tsx
// До
<div style={{ textAlign: 'center', paddingTop: 120 }}>
  <h1 style={{ fontSize: 32, fontWeight: 700, marginBottom: 12 }}>MoexVibe</h1>
  <p style={{ color: 'var(--color-text-secondary)', fontSize: 16, marginBottom: 32 }}>
    Анализ акций и облигаций Московской биржи
  </p>
  <p style={{ color: '#888', fontSize: 13 }}>Введите название или тикер в строку поиска выше</p>
  <p style={{ color: '#aaa', fontSize: 12, marginTop: 8 }}>
    Данные задерживаются на 15 минут · Бесплатный API MOEX ISS
  </p>
</div>

// После
import { Box } from '@mui/material';
import { Heading, Text } from '@moex-vibe/design-system';

<Box textAlign="center" pt={30}>
  <Heading level={1} size="display">MoexVibe</Heading>
  <Text tone="secondary">Анализ акций и облигаций Московской биржи</Text>
  <Text tone="muted">Введите название или тикер в строку поиска выше</Text>
  <Text tone="muted">Данные задерживаются на 15 минут · Бесплатный API MOEX ISS</Text>
</Box>
```

### Step 2: Migrate SearchBar

- `<input>` → `<TextField label="Поиск" hiddenLabel placeholder="Поиск акций и облигаций..." />`
- `<ul>` dropdown wrapper → `<Surface elevation="sm">` (с inline-стилями для absolute positioning)
- `<li>` loading → `<Text tone="muted">Загрузка...</Text>`
- `<li>` empty → `<Text tone="muted">Ничего не найдено</Text>`
- `<li>` result item → `<Box>` + `<Text>` + `<Chip>`
- Hover effect (`onMouseEnter/onMouseLeave`) → MUI `sx={{ '&:hover': { bgcolor: 'action.hover' } }}`
- Hardcoded hex colors → MUI theme tokens (`text.disabled`, `divider`, etc.)

### Step 3: Verify

- `npm run test:frontend` — все тесты проходят
- `npm run lint -w apps/frontend` — lint чист, нет неразрешённых MUI-импортов
- `npm run build:frontend` — сборка проходит