bento-grids v0.1

.ai/BENTO_REFACTOR.md

@@ -1,297 +0,0 @@
-# Bento Grids Refactor
-
-> **Ветка:** `bento-grids`
-> **Статус:** В работе
-> **Последнее обновление:** 2026-01-20
-
-## Референс
-
-- **Стиль:** Bento Grids (карточки разных размеров в сетке)
-- **Цветовая схема:** Зеленый неон на темном фоне, чистота
-- **Шрифт:** Manrope (современный гротеск, заменён с 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)~~ — Phase 6 complete
-- ✅ ~~Страницы кроме Dashboard~~ — Phase 5 complete
-- ✅ ~~Header~~ — Phase 7 complete
-- ❌ Рефакторинг логики — только UI
-
----
-
-## Прогресс
-
-```
-Этап 1: ██████████ 100%
-Этап 2: ██████████ 100%
-Этап 3: ██████████ 100%
-Этап 4: ██████████ 100%
-Этап 5: ██████████ 100%
-Этап 6: ██████████ 100%
-Этап 7: ██████████ 100%
-Этап 8: ██████████ 100%
-Этап 9: ██████████ 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-стили должны работать в обеих.
-
----
-
-## Следующие этапы (Phase 2)
-
-### Этап 5: Остальные страницы пользователя
-> Применить bento-стили к основным страницам
-
-| # | Страница | Приоритет | Объём | Статус |
-|---|----------|-----------|-------|--------|
-| 5.1 | Subscription.tsx | High | Большая — формы, тарифы, карточки | `[x]` |
-| 5.2 | Balance.tsx | High | Средняя — баланс, транзакции, методы оплаты | `[x]` |
-| 5.3 | Referral.tsx | Medium | Средняя — статистика, ссылка, условия | `[x]` |
-| 5.4 | Support.tsx | Medium | Малая — тикеты | `[x]` |
-| 5.5 | Profile.tsx | Low | Малая — настройки | `[x]` |
-| 5.6 | Info.tsx | Low | Малая — статичный контент | `[x]` |
-
-### Этап 6: Модалки
-> Обновить модальные окна в bento-стиле
-
-| # | Компонент | Статус | Заметки |
-|---|-----------|--------|---------|
-| 6.1 | ConnectionModal | `[x]` | ✅ z-[60], rounded-3xl, backdrop-blur-xl (desktop + mobile) |
-| 6.2 | TopUpModal | `[x]` | ✅ z-[60], rounded-3xl, backdrop-blur-xl |
-| 6.3 | InsufficientBalancePrompt | `[x]` | ✅ z-[60], rounded-3xl, backdrop-blur-xl (PaymentMethodModal тоже) |
-| 6.4 | Wheel Result Modal | `[x]` | ✅ z-[60] |
-| 6.5 | Contests Modal | `[x]` | ✅ z-[60], bento-card, backdrop-blur-sm |
-
-**Выборка модалок (select/close overlap):** Не найдено — все селекты в Subscription.tsx используют кнопки вместо `<select>` элемента.
-
-### Этап 7: Header
-> Обновить шапку (опционально)
-
-| # | Задача | Статус | Заметки |
-|---|--------|--------|---------|
-| 7.0 | Смена шрифта Urbanist → Manrope | `[x]` | Google Fonts, tailwind.config.js, globals.css |
-| 7.1 | Glass container + shadow | `[x]` | `glass shadow-lg shadow-black/10` (без border-b) |
-| 7.2 | Logo в bento-контейнере | `[x]` | `rounded-xl bg-dark-800/80 border border-dark-700/50` (app icon style) |
-| 7.3 | Controls в bento-стиле | `[x]` | Все кнопки: `rounded-xl bg-dark-800/50 hover:bg-dark-700 border border-dark-700/50` |
-| 7.4 | Z-Index = 50 | `[x]` | Подтверждено (выше контента, ниже модалок z-[60]) |
-
-### Этап 9: Visual Mastery (Final)
-> Премиум визуальная полировка
-
-| # | Задача | Статус | Заметки |
-|---|--------|--------|---------|
-| 9.1 | Background Noise | `[x]` | SVG fractalNoise, 3% opacity, mix-blend-mode: overlay, z-index: 0 |
-| 9.2 | Spotlight Effect | `[x]` | `::after` radial-gradient на hover, opacity transition |
-| 9.3 | BentoSkeleton | `[x]` | Компонент с animate-pulse, поддержка count prop |
-| 9.4 | Glass Border | `[x]` | `box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05)` на base, 0.1 на hover |
-
-### Этап 8: Полировка
-> Финальные штрихи
-
-| # | Задача | Статус | Заметки |
-|---|--------|--------|---------|
-| 8.1 | Stagger animation для карточек | `[x]` | `bentoFadeIn` keyframe + `--stagger` CSS var (50ms delay каждая) |
-| 8.2 | Micro-interactions | `[x]` | hover: `translateY(-4px)`, active: `scale(0.98)` |
-| 8.3 | Кастомный scrollbar | `[x]` | 6px thin, dark-700 thumb, transparent track |
-| 8.4 | prefers-reduced-motion | `[x]` | Анимации отключаются для accessibility |
-
----
-
-## Changelog
-
-### 2026-01-20 — MVP Complete
-- ✅ Urbanist шрифт
-- ✅ CSS переменные Bento
-- ✅ BentoCard компонент
-- ✅ Floating TabBar
-- ✅ Dashboard в bento-стиле
-- ✅ Commit: `bf0bcfb`
-
-### 2026-01-20 — Subscription.tsx Refactor
-- ✅ Все секции `card` → `bento-card` (6 шт):
-  - Current Subscription (line 429)
-  - Daily Pause (line 634)
-  - Additional Options (line 733)
-  - My Devices (line 1153)
-  - Tariffs section (line 1223)
-  - Classic mode purchase (line 1925)
-- ✅ Tariff cards: `bento-card-hover` + `bento-card-glow` для выбранного
-- ✅ Period selection cards: `bento-card-hover` + `bento-card-glow`
-- ✅ Traffic selection cards: `bento-card-hover` + `bento-card-glow`
-- ✅ Исправлен `.bento-grid` — добавлен breakpoint для xs (<375px)
-
-### 2026-01-20 — Phase 2 Complete (Все страницы пользователя)
-- ✅ **Balance.tsx**: 4 карточки → `bento-card`, методы оплаты → `bento-card-hover`
-- ✅ **Referral.tsx**: stats grid → `bento-grid` + `bento-card-hover`, 5 секций → `bento-card`
-- ✅ **Support.tsx**: 3 карточки → `bento-card`, tickets list items → `rounded-bento`
-- ✅ **Profile.tsx**: 3 карточки → `bento-card`
-- ✅ **Info.tsx**: FAQ items, rules, privacy, offer → `bento-card`
-
-### 2026-01-20 — Phase 9 Complete (Visual Mastery)
-- ✅ **Background Noise:** SVG `fractalNoise` pattern, 3% opacity, `mix-blend-mode: overlay`
-- ✅ **Spotlight Effect:** `::after` pseudo-element с `radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 60%)`
-- ✅ **BentoSkeleton Component:** `src/components/ui/BentoSkeleton.tsx` — `animate-pulse`, supports `count` prop
-- ✅ **Glass Border:** `box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05)` (0.1 on hover)
-- ✅ **Light Theme:** Warm spotlight `rgba(255,253,249,0.8)`, champagne glass borders
-
-**My Fixes (Inspector Review):**
-- Fixed `z-index: 9999` → `z-index: 0` on noise overlay (was blocking modals!)
-- Fixed BentoSkeleton — removed `bento-card` class to avoid entrance animation on skeleton
-
-### 2026-01-20 — Phase 8 Complete (Полировка)
-- ✅ **Stagger Animation:** `@keyframes bentoFadeIn` (fade-in + translateY(16px→0))
-- ✅ **CSS Variable `--stagger`:** Для delay между карточками (50ms increments)
-- ✅ **Micro-interactions:**
-  - Hover: `translateY(-4px)` + enhanced shadow
-  - Active: `scale(0.98)` + faster transition (150ms)
-- ✅ **Custom Scrollbar:** 6px thin, dark-700 thumb, transparent track
-- ✅ **Accessibility:** `prefers-reduced-motion` disables animations
-- ✅ **Light Theme:** Matching hover/active states for `.light` mode
-
-**Использование stagger в JSX:**
-```jsx
-<div className="bento-card" style={{ '--stagger': 0 }}>Card 1</div>
-<div className="bento-card" style={{ '--stagger': 1 }}>Card 2</div>
-<div className="bento-card" style={{ '--stagger': 2 }}>Card 3</div>
-```
-
-### 2026-01-20 — Phase 7 Complete (Header + Font)
-- ✅ **Шрифт:** Urbanist → Manrope (Google Fonts, tailwind.config.js, globals.css)
-- ✅ **Header Container:** `glass` + `shadow-lg shadow-black/10` (убран border-b)
-- ✅ **Logo:** App icon style — `rounded-xl bg-dark-800/80 border border-dark-700/50`
-- ✅ **Theme Toggle:** Bento style — `rounded-xl bg-dark-800/50 hover:bg-dark-700 border border-dark-700/50`
-- ✅ **Language Switcher:** Bento style — то же
-- ✅ **Notification Bell:** Bento style — то же
-- ✅ **Z-Index:** Header = z-50 (верифицировано)
-- ✅ **ConnectionModal.tsx**: z-[60], rounded-3xl, backdrop-blur-xl (desktop + mobile wrapper)
-- ✅ **TopUpModal.tsx**: z-[60], rounded-3xl, backdrop-blur-xl
-- ✅ **InsufficientBalancePrompt.tsx**: z-[60], rounded-3xl, backdrop-blur-xl (PaymentMethodModal тоже)
-- ✅ **Wheel.tsx**: Result modal z-[60]
-- ✅ **Contests.tsx**: Game modal z-[60], bento-card, backdrop-blur-sm
-
-**Z-Index Hierarchy (фиксировано):**
-- z-[9999]: ConnectionModal mobile view
-- z-[9998]: ConnectionModal mobile backdrop
-- z-[100]: Toast, MaintenanceScreen, ChannelSubscriptionScreen
-- z-[60]: Все модальные окна (TopUpModal, InsufficientBalancePrompt, ConnectionModal desktop, Wheel, Contests)
-- z-50: Header, dropdowns
-- z-40: TabBar (bottom nav)

.gitignore

@@ -43,3 +43,6 @@ coverage/
 tmp/
 temp/
 miniapp/
+
+# AI & Agents context
+.ai/

src/components/ThemeBentoPicker.tsx

@@ -0,0 +1,555 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { COLOR_PRESETS, ColorPreset } from '../data/colorPresets'
+import { hexToHsl, hslToHex, isValidHex, HSLColor } from '../utils/colorConversion'
+import { ThemeColors, DEFAULT_THEME_COLORS } from '../types/theme'
+import { applyThemeColors } from '../hooks/useThemeColors'
+
+interface ThemeBentoPickerProps {
+  currentColors: ThemeColors
+  onColorsChange: (colors: ThemeColors) => void
+  onSave: () => void
+  isSaving: boolean
+}
+
+const CheckIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+  </svg>
+)
+
+const ChevronDownIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+)
+
+const MoonIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+  </svg>
+)
+
+const SunIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+  </svg>
+)
+
+const StatusIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+  </svg>
+)
+
+const PaletteIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z" />
+  </svg>
+)
+
+function PresetCard({
+  preset,
+  isSelected,
+  onClick,
+}: {
+  preset: ColorPreset
+  isSelected: boolean
+  onClick: () => void
+}) {
+  const { i18n } = useTranslation()
+  const isRu = i18n.language === 'ru'
+
+  return (
+    <button
+      onClick={onClick}
+      className={`relative h-full w-full p-3 text-left transition-all duration-200 group rounded-2xl flex flex-col ${
+        isSelected
+          ? 'bg-dark-800/90 border-2 border-accent-500 shadow-lg shadow-accent-500/20 scale-[1.02] z-10'
+          : 'bg-dark-900/60 border border-dark-700/50 hover:bg-dark-800/70 hover:border-dark-600/60 hover:scale-[1.01]'
+      }`}
+    >
+      <div
+        className="w-full h-12 rounded-xl mb-2.5 relative overflow-hidden shrink-0"
+        style={{ backgroundColor: preset.preview.background }}
+      >
+        <div
+          className="absolute bottom-1.5 left-1.5 w-6 h-6 rounded-lg shadow-md"
+          style={{ backgroundColor: preset.preview.accent }}
+        />
+        <div
+          className="absolute bottom-2.5 right-2 w-10 h-1 rounded-full opacity-60"
+          style={{ backgroundColor: preset.preview.text }}
+        />
+        <div
+          className="absolute bottom-5 right-2 w-7 h-1 rounded-full opacity-40"
+          style={{ backgroundColor: preset.preview.text }}
+        />
+      </div>
+
+      <div className="flex items-center justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <h4 className="text-xs font-semibold text-dark-100 truncate">
+            {isRu ? preset.nameRu : preset.name}
+          </h4>
+        </div>
+        {isSelected && (
+          <div className="w-5 h-5 rounded-full bg-accent-500 flex items-center justify-center text-white shrink-0">
+            <CheckIcon />
+          </div>
+        )}
+      </div>
+    </button>
+  )
+}
+
+function HSLSlider({
+  label,
+  value,
+  onChange,
+  max,
+  gradient,
+  suffix = '',
+}: {
+  label: string
+  value: number
+  onChange: (value: number) => void
+  max: number
+  gradient: string
+  suffix?: string
+}) {
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <label className="text-xs font-medium text-dark-300">{label}</label>
+        <span className="text-xs text-dark-500 font-mono tabular-nums">
+          {value}
+          {suffix}
+        </span>
+      </div>
+      <input
+        type="range"
+        min="0"
+        max={max}
+        value={value}
+        onChange={(e) => onChange(parseInt(e.target.value))}
+        className="w-full h-2.5 rounded-full appearance-none cursor-pointer"
+        style={{ background: gradient }}
+      />
+    </div>
+  )
+}
+
+function CompactColorInput({
+  label,
+  value,
+  onChange,
+}: {
+  label: string
+  value: string
+  onChange: (color: string) => void
+}) {
+  const [localValue, setLocalValue] = useState(value)
+  const [isEditing, setIsEditing] = useState(false)
+
+  useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
+  const handleChange = (newValue: string) => {
+    let formatted = newValue.toUpperCase()
+    if (!formatted.startsWith('#')) {
+      formatted = '#' + formatted
+    }
+    setLocalValue(formatted)
+    if (isValidHex(formatted)) {
+      onChange(formatted)
+    }
+  }
+
+  const handleBlur = () => {
+    setIsEditing(false)
+    if (!isValidHex(localValue)) {
+      setLocalValue(value)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-2 p-2 rounded-xl bg-dark-800/40 hover:bg-dark-800/60 transition-colors group">
+      <button
+        type="button"
+        onClick={() => setIsEditing(true)}
+        className="w-8 h-8 rounded-lg border border-dark-600/50 shadow-inner shrink-0 transition-transform hover:scale-105"
+        style={{ backgroundColor: value }}
+      />
+      <div className="flex-1 min-w-0">
+        <label className="text-[10px] uppercase tracking-wide text-dark-500 block leading-none mb-0.5">
+          {label}
+        </label>
+        {isEditing ? (
+          <input
+            type="text"
+            value={localValue}
+            onChange={(e) => handleChange(e.target.value)}
+            onBlur={handleBlur}
+            onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
+            autoFocus
+            className="bg-transparent text-xs font-mono text-dark-200 w-full outline-none"
+            maxLength={7}
+          />
+        ) : (
+          <button
+            type="button"
+            onClick={() => setIsEditing(true)}
+            className="text-xs font-mono text-dark-300 hover:text-dark-100 transition-colors text-left"
+          >
+            {value.toUpperCase()}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function CollapsibleSection({
+  title,
+  icon,
+  isOpen,
+  onToggle,
+  children,
+  badge,
+}: {
+  title: string
+  icon: React.ReactNode
+  isOpen: boolean
+  onToggle: () => void
+  children: React.ReactNode
+  badge?: string
+}) {
+  return (
+    <div className="rounded-2xl bg-dark-900/50 border border-dark-700/40 overflow-hidden">
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between px-4 py-3 hover:bg-dark-800/30 transition-colors"
+      >
+        <div className="flex items-center gap-2.5">
+          <div className="text-dark-400">{icon}</div>
+          <span className="text-sm font-medium text-dark-200">{title}</span>
+          {badge && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded-md bg-dark-700/50 text-dark-400 font-mono">
+              {badge}
+            </span>
+          )}
+        </div>
+        <div
+          className={`text-dark-500 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+        >
+          <ChevronDownIcon />
+        </div>
+      </button>
+
+      <div
+        className={`grid transition-all duration-200 ease-out ${
+          isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+        }`}
+      >
+        <div className="overflow-hidden">
+          <div className="px-4 pb-4 pt-1 border-t border-dark-700/30">{children}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function ThemeBentoPicker({
+  currentColors,
+  onColorsChange,
+  onSave,
+  isSaving,
+}: ThemeBentoPickerProps) {
+  const { t } = useTranslation()
+
+  const [hsl, setHsl] = useState<HSLColor>(() => hexToHsl(currentColors.accent))
+  const [hexInput, setHexInput] = useState(currentColors.accent)
+  const [hasChanges, setHasChanges] = useState(false)
+
+  const [isAccentOpen, setIsAccentOpen] = useState(false)
+  const [isDarkOpen, setIsDarkOpen] = useState(false)
+  const [isLightOpen, setIsLightOpen] = useState(false)
+  const [isStatusOpen, setIsStatusOpen] = useState(false)
+
+  const selectedPresetId = useMemo(() => {
+    const match = COLOR_PRESETS.find(
+      (p) =>
+        p.colors.accent.toLowerCase() === currentColors.accent.toLowerCase() &&
+        p.colors.darkBackground.toLowerCase() === currentColors.darkBackground.toLowerCase() &&
+        p.colors.lightBackground.toLowerCase() === currentColors.lightBackground.toLowerCase()
+    )
+    return match?.id ?? null
+  }, [currentColors.accent, currentColors.darkBackground, currentColors.lightBackground])
+
+  useEffect(() => {
+    setHsl(hexToHsl(currentColors.accent))
+    setHexInput(currentColors.accent)
+  }, [currentColors.accent])
+
+  const updateColor = useCallback(
+    (key: keyof ThemeColors, value: string) => {
+      const newColors = { ...currentColors, [key]: value }
+      onColorsChange(newColors)
+      applyThemeColors(newColors)
+      setHasChanges(true)
+    },
+    [currentColors, onColorsChange]
+  )
+
+  const updateAccentFromHsl = useCallback(
+    (newHsl: HSLColor) => {
+      setHsl(newHsl)
+      const newHex = hslToHex(newHsl.h, newHsl.s, newHsl.l)
+      setHexInput(newHex)
+      updateColor('accent', newHex)
+    },
+    [updateColor]
+  )
+
+  const handleHexInputChange = (value: string) => {
+    setHexInput(value)
+    if (isValidHex(value)) {
+      const newHsl = hexToHsl(value)
+      setHsl(newHsl)
+      updateColor('accent', value)
+    }
+  }
+
+  const handlePresetSelect = (preset: ColorPreset) => {
+    onColorsChange(preset.colors)
+    applyThemeColors(preset.colors)
+    setHasChanges(true)
+  }
+
+  const hueGradient = useMemo(() => {
+    return `linear-gradient(to right, 
+      hsl(0, ${hsl.s}%, ${hsl.l}%), 
+      hsl(60, ${hsl.s}%, ${hsl.l}%), 
+      hsl(120, ${hsl.s}%, ${hsl.l}%), 
+      hsl(180, ${hsl.s}%, ${hsl.l}%), 
+      hsl(240, ${hsl.s}%, ${hsl.l}%), 
+      hsl(300, ${hsl.s}%, ${hsl.l}%), 
+      hsl(360, ${hsl.s}%, ${hsl.l}%)
+    )`
+  }, [hsl.s, hsl.l])
+
+  const saturationGradient = useMemo(() => {
+    return `linear-gradient(to right, 
+      hsl(${hsl.h}, 0%, ${hsl.l}%), 
+      hsl(${hsl.h}, 100%, ${hsl.l}%)
+    )`
+  }, [hsl.h, hsl.l])
+
+  const lightnessGradient = useMemo(() => {
+    return `linear-gradient(to right, 
+      hsl(${hsl.h}, ${hsl.s}%, 0%), 
+      hsl(${hsl.h}, ${hsl.s}%, 50%), 
+      hsl(${hsl.h}, ${hsl.s}%, 100%)
+    )`
+  }, [hsl.h, hsl.s])
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <h3 className="text-xs font-medium text-dark-400 uppercase tracking-wide mb-3">
+          {t('admin.theme.quickPresets', 'Quick Presets')}
+        </h3>
+        <div className="grid grid-cols-2 sm:grid-cols-3 auto-rows-fr gap-4 p-2">
+          {COLOR_PRESETS.map((preset, index) => (
+            <div key={preset.id} className="min-h-[100px]" style={{ '--stagger': index } as React.CSSProperties}>
+              <PresetCard
+                preset={preset}
+                isSelected={selectedPresetId === preset.id}
+                onClick={() => handlePresetSelect(preset)}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="text-xs font-medium text-dark-400 uppercase tracking-wide">
+          {t('admin.theme.customizeColors', 'Customize Colors')}
+        </h3>
+
+        <CollapsibleSection
+          title={t('admin.theme.accentColor', 'Accent Color')}
+          icon={<PaletteIcon />}
+          badge={hexInput.toUpperCase()}
+          isOpen={isAccentOpen}
+          onToggle={() => setIsAccentOpen(!isAccentOpen)}
+        >
+          <div className="space-y-4">
+            <div
+              className="w-full h-14 rounded-xl shadow-inner relative overflow-hidden"
+              style={{
+                background: `linear-gradient(135deg, ${hexInput} 0%, ${hslToHex(hsl.h, hsl.s, Math.max(20, hsl.l - 20))} 100%)`,
+              }}
+            >
+              <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent" />
+              <div className="absolute bottom-2 right-3 text-white/80 text-xs font-mono drop-shadow">
+                {hexInput.toUpperCase()}
+              </div>
+            </div>
+
+            <HSLSlider
+              label={t('admin.theme.hue', 'Hue')}
+              value={hsl.h}
+              onChange={(h) => updateAccentFromHsl({ ...hsl, h })}
+              max={360}
+              gradient={hueGradient}
+              suffix="°"
+            />
+
+            <HSLSlider
+              label={t('admin.theme.saturation', 'Saturation')}
+              value={hsl.s}
+              onChange={(s) => updateAccentFromHsl({ ...hsl, s })}
+              max={100}
+              gradient={saturationGradient}
+              suffix="%"
+            />
+
+            <HSLSlider
+              label={t('admin.theme.lightness', 'Lightness')}
+              value={hsl.l}
+              onChange={(l) => updateAccentFromHsl({ ...hsl, l })}
+              max={100}
+              gradient={lightnessGradient}
+              suffix="%"
+            />
+
+            <div>
+              <label className="text-xs font-medium text-dark-300 mb-1.5 block">
+                {t('admin.theme.hexCode', 'HEX Code')}
+              </label>
+              <input
+                type="text"
+                value={hexInput}
+                onChange={(e) => handleHexInputChange(e.target.value)}
+                placeholder="#3b82f6"
+                maxLength={7}
+                className="input w-full text-sm font-mono uppercase"
+              />
+            </div>
+          </div>
+        </CollapsibleSection>
+
+        <CollapsibleSection
+          title={t('theme.darkTheme', 'Dark Theme')}
+          icon={<MoonIcon />}
+          isOpen={isDarkOpen}
+          onToggle={() => setIsDarkOpen(!isDarkOpen)}
+        >
+          <div className="grid grid-cols-2 gap-2">
+            <CompactColorInput
+              label={t('theme.background', 'Background')}
+              value={currentColors.darkBackground || DEFAULT_THEME_COLORS.darkBackground}
+              onChange={(c) => updateColor('darkBackground', c)}
+            />
+            <CompactColorInput
+              label={t('theme.surface', 'Surface')}
+              value={currentColors.darkSurface || DEFAULT_THEME_COLORS.darkSurface}
+              onChange={(c) => updateColor('darkSurface', c)}
+            />
+            <CompactColorInput
+              label={t('theme.text', 'Text')}
+              value={currentColors.darkText || DEFAULT_THEME_COLORS.darkText}
+              onChange={(c) => updateColor('darkText', c)}
+            />
+            <CompactColorInput
+              label={t('theme.textSecondary', 'Secondary')}
+              value={currentColors.darkTextSecondary || DEFAULT_THEME_COLORS.darkTextSecondary}
+              onChange={(c) => updateColor('darkTextSecondary', c)}
+            />
+          </div>
+        </CollapsibleSection>
+
+        <CollapsibleSection
+          title={t('theme.lightTheme', 'Light Theme')}
+          icon={<SunIcon />}
+          isOpen={isLightOpen}
+          onToggle={() => setIsLightOpen(!isLightOpen)}
+        >
+          <div className="grid grid-cols-2 gap-2">
+            <CompactColorInput
+              label={t('theme.background', 'Background')}
+              value={currentColors.lightBackground || DEFAULT_THEME_COLORS.lightBackground}
+              onChange={(c) => updateColor('lightBackground', c)}
+            />
+            <CompactColorInput
+              label={t('theme.surface', 'Surface')}
+              value={currentColors.lightSurface || DEFAULT_THEME_COLORS.lightSurface}
+              onChange={(c) => updateColor('lightSurface', c)}
+            />
+            <CompactColorInput
+              label={t('theme.text', 'Text')}
+              value={currentColors.lightText || DEFAULT_THEME_COLORS.lightText}
+              onChange={(c) => updateColor('lightText', c)}
+            />
+            <CompactColorInput
+              label={t('theme.textSecondary', 'Secondary')}
+              value={currentColors.lightTextSecondary || DEFAULT_THEME_COLORS.lightTextSecondary}
+              onChange={(c) => updateColor('lightTextSecondary', c)}
+            />
+          </div>
+        </CollapsibleSection>
+
+        <CollapsibleSection
+          title={t('theme.statusColors', 'Status Colors')}
+          icon={<StatusIcon />}
+          isOpen={isStatusOpen}
+          onToggle={() => setIsStatusOpen(!isStatusOpen)}
+        >
+          <div className="grid grid-cols-3 gap-2">
+            <CompactColorInput
+              label={t('theme.success', 'Success')}
+              value={currentColors.success || DEFAULT_THEME_COLORS.success}
+              onChange={(c) => updateColor('success', c)}
+            />
+            <CompactColorInput
+              label={t('theme.warning', 'Warning')}
+              value={currentColors.warning || DEFAULT_THEME_COLORS.warning}
+              onChange={(c) => updateColor('warning', c)}
+            />
+            <CompactColorInput
+              label={t('theme.error', 'Error')}
+              value={currentColors.error || DEFAULT_THEME_COLORS.error}
+              onChange={(c) => updateColor('error', c)}
+            />
+          </div>
+        </CollapsibleSection>
+      </div>
+
+      <div className="rounded-2xl bg-dark-900/50 border border-dark-700/40 p-4">
+        <h4 className="text-xs font-medium text-dark-400 uppercase tracking-wide mb-3">
+          {t('theme.preview', 'Preview')}
+        </h4>
+        <div className="flex flex-wrap gap-2">
+          <button className="btn-primary text-sm">{t('theme.previewButton', 'Primary')}</button>
+          <button className="btn-secondary text-sm">
+            {t('theme.previewSecondary', 'Secondary')}
+          </button>
+          <span className="badge-success">{t('theme.success', 'Success')}</span>
+          <span className="badge-warning">{t('theme.warning', 'Warning')}</span>
+          <span className="badge-error">{t('theme.error', 'Error')}</span>
+        </div>
+      </div>
+
+      {hasChanges && (
+        <div className="flex justify-end animate-fade-in">
+          <button onClick={onSave} disabled={isSaving} className="btn-primary">
+            {isSaving ? t('common.saving', 'Saving...') : t('common.save', 'Save')}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

src/data/colorPresets.ts

@@ -0,0 +1,179 @@
+import { ThemeColors } from '../types/theme'
+
+export interface ColorPreset {
+  id: string
+  name: string
+  nameRu: string
+  description: string
+  descriptionRu: string
+  colors: ThemeColors
+  // Preview colors for the card
+  preview: {
+    background: string
+    accent: string
+    text: string
+  }
+}
+
+export const COLOR_PRESETS: ColorPreset[] = [
+  {
+    id: 'electric-blue',
+    name: 'Electric Blue',
+    nameRu: 'Электрик',
+    description: 'Classic tech blue, reliable and clean',
+    descriptionRu: 'Классический технологичный синий',
+    colors: {
+      accent: '#3b82f6',
+      darkBackground: '#0a0f1a',
+      darkSurface: '#0f172a',
+      darkText: '#f1f5f9',
+      darkTextSecondary: '#94a3b8',
+      lightBackground: '#f8fafc',
+      lightSurface: '#ffffff',
+      lightText: '#0f172a',
+      lightTextSecondary: '#64748b',
+      success: '#22c55e',
+      warning: '#f59e0b',
+      error: '#ef4444',
+    },
+    preview: {
+      background: '#0a0f1a',
+      accent: '#3b82f6',
+      text: '#f1f5f9',
+    },
+  },
+  {
+    id: 'toxic-neon',
+    name: 'Toxic Neon',
+    nameRu: 'Токсичный неон',
+    description: 'Cyberpunk vibes, high energy',
+    descriptionRu: 'Киберпанк атмосфера, высокая энергия',
+    colors: {
+      accent: '#22c55e',
+      darkBackground: '#030712',
+      darkSurface: '#0a0f14',
+      darkText: '#e2e8f0',
+      darkTextSecondary: '#64748b',
+      lightBackground: '#f0fdf4',
+      lightSurface: '#ffffff',
+      lightText: '#052e16',
+      lightTextSecondary: '#166534',
+      success: '#22c55e',
+      warning: '#eab308',
+      error: '#ef4444',
+    },
+    preview: {
+      background: '#030712',
+      accent: '#22c55e',
+      text: '#e2e8f0',
+    },
+  },
+  {
+    id: 'royal-purple',
+    name: 'Royal Purple',
+    nameRu: 'Королевский пурпур',
+    description: 'Premium, sophisticated, Stripe-like',
+    descriptionRu: 'Премиальный, утончённый, как Stripe',
+    colors: {
+      accent: '#8b5cf6',
+      darkBackground: '#0c0a14',
+      darkSurface: '#13111c',
+      darkText: '#f1f0f5',
+      darkTextSecondary: '#a1a1aa',
+      lightBackground: '#faf5ff',
+      lightSurface: '#ffffff',
+      lightText: '#1e1b29',
+      lightTextSecondary: '#6b21a8',
+      success: '#22c55e',
+      warning: '#f59e0b',
+      error: '#ef4444',
+    },
+    preview: {
+      background: '#0c0a14',
+      accent: '#8b5cf6',
+      text: '#f1f0f5',
+    },
+  },
+  {
+    id: 'sunset-orange',
+    name: 'Sunset Orange',
+    nameRu: 'Закатный оранж',
+    description: 'Warm, energetic, action-oriented',
+    descriptionRu: 'Тёплый, энергичный, призыв к действию',
+    colors: {
+      accent: '#f97316',
+      darkBackground: '#0f0906',
+      darkSurface: '#1a120d',
+      darkText: '#fef3e2',
+      darkTextSecondary: '#a3a3a3',
+      lightBackground: '#fff7ed',
+      lightSurface: '#ffffff',
+      lightText: '#1c1917',
+      lightTextSecondary: '#c2410c',
+      success: '#22c55e',
+      warning: '#f59e0b',
+      error: '#ef4444',
+    },
+    preview: {
+      background: '#0f0906',
+      accent: '#f97316',
+      text: '#fef3e2',
+    },
+  },
+  {
+    id: 'ocean-teal',
+    name: 'Ocean Teal',
+    nameRu: 'Океанский бирюзовый',
+    description: 'Calm, trustworthy, health-tech',
+    descriptionRu: 'Спокойный, надёжный, медтех',
+    colors: {
+      accent: '#14b8a6',
+      darkBackground: '#042f2e',
+      darkSurface: '#0d3d3b',
+      darkText: '#f0fdfa',
+      darkTextSecondary: '#5eead4',
+      lightBackground: '#f0fdfa',
+      lightSurface: '#ffffff',
+      lightText: '#134e4a',
+      lightTextSecondary: '#0f766e',
+      success: '#22c55e',
+      warning: '#f59e0b',
+      error: '#ef4444',
+    },
+    preview: {
+      background: '#042f2e',
+      accent: '#14b8a6',
+      text: '#f0fdfa',
+    },
+  },
+  {
+    id: 'champagne-gold',
+    name: 'Champagne Gold',
+    nameRu: 'Шампанское золото',
+    description: 'Luxury, premium, elegant',
+    descriptionRu: 'Роскошный, премиальный, элегантный',
+    colors: {
+      accent: '#b8860b',
+      darkBackground: '#0a0f1a',
+      darkSurface: '#0f172a',
+      darkText: '#f1f5f9',
+      darkTextSecondary: '#94a3b8',
+      lightBackground: '#F7E7CE',
+      lightSurface: '#FEF9F0',
+      lightText: '#1F1A12',
+      lightTextSecondary: '#7D6B48',
+      success: '#22c55e',
+      warning: '#f59e0b',
+      error: '#ef4444',
+    },
+    preview: {
+      background: '#F7E7CE',
+      accent: '#b8860b',
+      text: '#1F1A12',
+    },
+  },
+]
+
+export function getPresetById(id: string): ColorPreset | undefined {
+  return COLOR_PRESETS.find((preset) => preset.id === id)
+}

src/pages/AdminSettings.tsx

@@ -7,8 +7,8 @@ import { brandingApi, setCachedBranding } from '../api/branding'
 import { setCachedAnimationEnabled } from '../components/AnimatedBackground'
 import { setCachedFullscreenEnabled } from '../hooks/useTelegramWebApp'
 import { themeColorsApi } from '../api/themeColors'
-import { DEFAULT_THEME_COLORS, DEFAULT_ENABLED_THEMES } from '../types/theme'
-import { ColorPicker } from '../components/ColorPicker'
+import { DEFAULT_THEME_COLORS, DEFAULT_ENABLED_THEMES, ThemeColors } from '../types/theme'
+import { ThemeBentoPicker } from '../components/ThemeBentoPicker'
 import { applyThemeColors } from '../hooks/useThemeColors'
 import { updateEnabledThemesCache } from '../hooks/useTheme'
 
@@ -858,6 +858,7 @@ export default function AdminSettings() {
   const [searchQuery, setSearchQuery] = useState('')
   const [editingName, setEditingName] = useState(false)
   const [newName, setNewName] = useState('')
+  const [localColors, setLocalColors] = useState<ThemeColors | null>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   // Branding query and mutations
@@ -1355,113 +1356,18 @@ export default function AdminSettings() {
               Включите нужные темы для пользователей. Минимум одна тема должна быть активна.
             </p>
           </div>
-          {/* Accent Color */}
-          <ColorPicker
-            label={t('theme.accent')}
-            description={t('theme.accentDescription')}
-            value={themeColors?.accent || DEFAULT_THEME_COLORS.accent}
-            onChange={(color) => updateColorsMutation.mutate({ accent: color })}
-            disabled={updateColorsMutation.isPending}
-          />
 
-          {/* Dark Theme Section */}
-          <div>
-            <h3 className="text-sm font-medium text-dark-300 mb-3">{t('theme.darkTheme')}</h3>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-              <ColorPicker
-                label={t('theme.background')}
-                value={themeColors?.darkBackground || DEFAULT_THEME_COLORS.darkBackground}
-                onChange={(color) => updateColorsMutation.mutate({ darkBackground: color })}
-                disabled={updateColorsMutation.isPending}
+          <ThemeBentoPicker
+            currentColors={localColors || themeColors || DEFAULT_THEME_COLORS}
+            onColorsChange={(colors) => setLocalColors(colors)}
+            onSave={() => {
+              if (localColors) {
+                updateColorsMutation.mutate(localColors)
+                setLocalColors(null)
+              }
+            }}
+            isSaving={updateColorsMutation.isPending}
           />
-              <ColorPicker
-                label={t('theme.surface')}
-                value={themeColors?.darkSurface || DEFAULT_THEME_COLORS.darkSurface}
-                onChange={(color) => updateColorsMutation.mutate({ darkSurface: color })}
-                disabled={updateColorsMutation.isPending}
-              />
-              <ColorPicker
-                label={t('theme.text')}
-                value={themeColors?.darkText || DEFAULT_THEME_COLORS.darkText}
-                onChange={(color) => updateColorsMutation.mutate({ darkText: color })}
-                disabled={updateColorsMutation.isPending}
-              />
-              <ColorPicker
-                label={t('theme.textSecondary')}
-                value={themeColors?.darkTextSecondary || DEFAULT_THEME_COLORS.darkTextSecondary}
-                onChange={(color) => updateColorsMutation.mutate({ darkTextSecondary: color })}
-                disabled={updateColorsMutation.isPending}
-              />
-            </div>
-          </div>
-
-          {/* Light Theme Section */}
-          <div>
-            <h3 className="text-sm font-medium text-dark-300 mb-3">{t('theme.lightTheme')}</h3>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-              <ColorPicker
-                label={t('theme.background')}
-                value={themeColors?.lightBackground || DEFAULT_THEME_COLORS.lightBackground}
-                onChange={(color) => updateColorsMutation.mutate({ lightBackground: color })}
-                disabled={updateColorsMutation.isPending}
-              />
-              <ColorPicker
-                label={t('theme.surface')}
-                value={themeColors?.lightSurface || DEFAULT_THEME_COLORS.lightSurface}
-                onChange={(color) => updateColorsMutation.mutate({ lightSurface: color })}
-                disabled={updateColorsMutation.isPending}
-              />
-              <ColorPicker
-                label={t('theme.text')}
-                value={themeColors?.lightText || DEFAULT_THEME_COLORS.lightText}
-                onChange={(color) => updateColorsMutation.mutate({ lightText: color })}
-                disabled={updateColorsMutation.isPending}
-              />
-              <ColorPicker
-                label={t('theme.textSecondary')}
-                value={themeColors?.lightTextSecondary || DEFAULT_THEME_COLORS.lightTextSecondary}
-                onChange={(color) => updateColorsMutation.mutate({ lightTextSecondary: color })}
-                disabled={updateColorsMutation.isPending}
-              />
-            </div>
-          </div>
-
-          {/* Status Colors */}
-          <div>
-            <h3 className="text-sm font-medium text-dark-300 mb-3">{t('theme.statusColors')}</h3>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-              <ColorPicker
-                label={t('theme.success')}
-                value={themeColors?.success || DEFAULT_THEME_COLORS.success}
-                onChange={(color) => updateColorsMutation.mutate({ success: color })}
-                disabled={updateColorsMutation.isPending}
-              />
-              <ColorPicker
-                label={t('theme.warning')}
-                value={themeColors?.warning || DEFAULT_THEME_COLORS.warning}
-                onChange={(color) => updateColorsMutation.mutate({ warning: color })}
-                disabled={updateColorsMutation.isPending}
-              />
-              <ColorPicker
-                label={t('theme.error')}
-                value={themeColors?.error || DEFAULT_THEME_COLORS.error}
-                onChange={(color) => updateColorsMutation.mutate({ error: color })}
-                disabled={updateColorsMutation.isPending}
-              />
-            </div>
-          </div>
-
-          {/* Preview */}
-          <div className="p-4 bg-dark-800/50 rounded-xl">
-            <h4 className="text-sm font-medium text-dark-300 mb-3">{t('theme.preview')}</h4>
-            <div className="flex flex-wrap gap-2">
-              <button className="btn-primary text-sm">{t('theme.previewButton')}</button>
-              <button className="btn-secondary text-sm">{t('theme.previewSecondary')}</button>
-              <span className="badge-success">{t('theme.success')}</span>
-              <span className="badge-warning">{t('theme.warning')}</span>
-              <span className="badge-error">{t('theme.error')}</span>
-            </div>
-          </div>
         </div>
       </div>
 

src/utils/colorConversion.ts

@@ -0,0 +1,102 @@
+export interface HSLColor {
+  h: number
+  s: number
+  l: number
+}
+
+export interface RGBColor {
+  r: number
+  g: number
+  b: number
+}
+
+export function hexToRgb(hex: string): RGBColor {
+  if (hex.length === 4) {
+    hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]
+  }
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+  return { r, g, b }
+}
+
+export function rgbToHex(r: number, g: number, b: number): string {
+  return (
+    '#' +
+    [r, g, b]
+      .map((x) => {
+        const hex = Math.round(Math.max(0, Math.min(255, x))).toString(16)
+        return hex.length === 1 ? '0' + hex : hex
+      })
+      .join('')
+  )
+}
+
+export function hexToHsl(hex: string): HSLColor {
+  const { r, g, b } = hexToRgb(hex)
+  const rNorm = r / 255
+  const gNorm = g / 255
+  const bNorm = b / 255
+
+  const max = Math.max(rNorm, gNorm, bNorm)
+  const min = Math.min(rNorm, gNorm, bNorm)
+  let h = 0
+  let s = 0
+  const l = (max + min) / 2
+
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+    switch (max) {
+      case rNorm:
+        h = ((gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0)) / 6
+        break
+      case gNorm:
+        h = ((bNorm - rNorm) / d + 2) / 6
+        break
+      case bNorm:
+        h = ((rNorm - gNorm) / d + 4) / 6
+        break
+    }
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  }
+}
+
+export function hslToRgb(h: number, s: number, l: number): RGBColor {
+  const sNorm = s / 100
+  const lNorm = l / 100
+
+  const a = sNorm * Math.min(lNorm, 1 - lNorm)
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12
+    const color = lNorm - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+    return Math.round(255 * color)
+  }
+
+  return { r: f(0), g: f(8), b: f(4) }
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  const { r, g, b } = hslToRgb(h, s, l)
+  return rgbToHex(r, g, b)
+}
+
+export function isValidHex(hex: string): boolean {
+  return /^#[0-9A-Fa-f]{6}$/.test(hex)
+}
+
+export function normalizeHex(hex: string): string {
+  if (!hex.startsWith('#')) {
+    hex = '#' + hex
+  }
+  if (hex.length === 4) {
+    hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]
+  }
+  return hex.toLowerCase()
+}