mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
6d88bac693
- Add Urbanist font (replace Inter) - Add CSS variables: --bento-radius, --bento-gap, --bento-padding - Add Tailwind extend: rounded-bento, rounded-4xl, spacing.bento - Create BentoCard component with size variants (sm/md/lg/xl) - Add .bento-card, .bento-card-hover, .bento-card-glow classes - Add .bento-grid container with responsive columns - Implement floating TabBar (margin 16px, shadow, pill active state) - Apply bento styles to Dashboard cards - Support both dark and light themes
151 lines
5.4 KiB
Markdown
151 lines
5.4 KiB
Markdown
# Bento Grids Refactor
|
||
|
||
> **Ветка:** `bento-grids`
|
||
> **Статус:** В работе
|
||
> **Последнее обновление:** 2026-01-20
|
||
|
||
## Референс
|
||
|
||
- **Стиль:** Bento Grids (карточки разных размеров в сетке)
|
||
- **Цветовая схема:** Зеленый неон на темном фоне, чистота
|
||
- **Шрифт:** Urbanist (современный гротеск)
|
||
- **Скругления:** Крупные (24-32px)
|
||
|
||
---
|
||
|
||
## План рефакторинга
|
||
|
||
### Этап 1: Фундамент (Vibe Check)
|
||
> Цель: Пустая страница уже выглядит "секси"
|
||
|
||
| # | Задача | Статус | Заметки |
|
||
|---|--------|--------|---------|
|
||
| 1.1 | Подключить Urbanist шрифт | `[x]` | Google Fonts, заменить Inter |
|
||
| 1.2 | Tailwind: bento radius/spacing | `[x]` | `rounded-bento`, `rounded-4xl`, `spacing.bento` |
|
||
| 1.3 | globals.css: CSS переменные Bento | `[x]` | `--bento-radius`, `--bento-gap`, `--bento-padding` |
|
||
|
||
**Файлы:**
|
||
- `src/styles/globals.css`
|
||
- `tailwind.config.js`
|
||
|
||
---
|
||
|
||
### Этап 2: Атом (BentoCard)
|
||
> Цель: Один идеальный компонент-карточка
|
||
|
||
| # | Задача | Статус | Заметки |
|
||
|---|--------|--------|---------|
|
||
| 2.1 | Создать BentoCard компонент | `[x]` | С вариантами размеров |
|
||
| 2.2 | Обновить .card в globals.css | `[x]` | Новые классы .bento-card, .bento-card-hover, .bento-card-glow |
|
||
|
||
**Файлы:**
|
||
- `src/components/ui/BentoCard.tsx` (новый)
|
||
- `src/styles/globals.css`
|
||
|
||
**API компонента:**
|
||
```tsx
|
||
type BentoSize = 'sm' | 'md' | 'lg' | 'xl' // 1x1, 2x1, 1x2, 2x2
|
||
|
||
interface BentoCardProps {
|
||
size?: BentoSize
|
||
children: React.ReactNode
|
||
className?: string
|
||
hover?: boolean
|
||
as?: 'div' | 'Link' | 'button'
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### Этап 3: Скелет (Floating TabBar)
|
||
> Цель: Bottom navigation как "парящий остров"
|
||
|
||
| # | Задача | Статус | Заметки |
|
||
|---|--------|--------|---------|
|
||
| 3.1 | Floating island стиль | `[x]` | margin 16px от краев, shadow |
|
||
| 3.2 | Active state с pill | `[x]` | rounded-2xl фон под активной иконкой |
|
||
| 3.3 | Убрать border-top | `[x]` | Заменено на shadow |
|
||
|
||
**Файлы:**
|
||
- `src/components/layout/Layout.tsx` (секция bottom-nav)
|
||
- `src/styles/globals.css` (`.bottom-nav` классы)
|
||
|
||
---
|
||
|
||
### Этап 4: Мясо (Dashboard Grid)
|
||
> Цель: Главная страница в стиле Bento
|
||
|
||
| # | Задача | Статус | Заметки |
|
||
|---|--------|--------|---------|
|
||
| 4.1 | Создать .bento-grid контейнер | `[x]` | CSS Grid с gap, 2 колонки mobile, 4 desktop |
|
||
| 4.2 | Subscription Status → bento-card | `[x]` | Главная карточка подписки |
|
||
| 4.3 | Stats Grid → bento-grid + bento-card-hover | `[x]` | Balance, Subscription, Referrals, Earnings |
|
||
| 4.4 | Quick Actions → bento-card | `[x]` | Контейнер для кнопок |
|
||
| 4.5 | Trial + Wheel Banner → bento-card-glow/hover | `[x]` | Акцентные карточки |
|
||
|
||
**Файлы:**
|
||
- `src/pages/Dashboard.tsx`
|
||
- `src/styles/globals.css`
|
||
|
||
**Правило:** Логику JS/TS НЕ трогаем — только UI обёртки.
|
||
|
||
---
|
||
|
||
## Решения и обоснования
|
||
|
||
### Почему Urbanist, а не Inter?
|
||
- Urbanist более геометричный, лучше подходит под Bento-эстетику
|
||
- Хорошая читаемость на мобильных
|
||
- Бесплатный, Google Fonts
|
||
|
||
### Почему rounded-3xl (24px)?
|
||
- Стандарт Bento — крупные скругления
|
||
- 16px (текущий rounded-2xl) выглядит слишком "приложенечно"
|
||
- 32px (rounded-4xl) для особо крупных элементов
|
||
|
||
### Floating TabBar vs прилипший
|
||
- Floating выглядит премиально
|
||
- Отделяет навигацию от контента визуально
|
||
- Работает с safe-area на iOS
|
||
|
||
---
|
||
|
||
## Что НЕ делаем
|
||
|
||
- ❌ Модалки (ConnectionModal, TopUpModal) — вторично
|
||
- ❌ Страницы кроме Dashboard — после MVP
|
||
- ❌ Header — работает, не ломаем
|
||
- ❌ Рефакторинг логики — только UI
|
||
|
||
---
|
||
|
||
## Прогресс
|
||
|
||
```
|
||
Этап 1: ██████████ 100%
|
||
Этап 2: ██████████ 100%
|
||
Этап 3: ██████████ 100%
|
||
Этап 4: ██████████ 100%
|
||
─────────────────────
|
||
Общий: ██████████ 100%
|
||
```
|
||
|
||
---
|
||
|
||
## Заметки для агентов
|
||
|
||
**Контекст:** Это Mini App для Telegram (VPN кабинет). Мобильный фокус.
|
||
|
||
**Текущий стек:**
|
||
- React + Vite + TypeScript
|
||
- Tailwind CSS
|
||
- React Query для данных
|
||
|
||
**Ключевые файлы:**
|
||
- `tailwind.config.js` — цвета через CSS переменные
|
||
- `src/styles/globals.css` — компонентные классы (.card, .btn, etc)
|
||
- `src/components/layout/Layout.tsx` — шапка + таббар
|
||
- `src/pages/Dashboard.tsx` — главный экран (монстр, но логику не трогаем)
|
||
|
||
**Темы:** Есть dark и light (champagne). Bento-стили должны работать в обеих.
|