bedolaga-cabinet/.ai/BENTO_REFACTOR.md

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 компонента:

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-стили должны работать в обеих.