feat: add ButtonsTab for per-section button style customization

Visual editor in admin settings for configuring Telegram button colors
and custom emoji IDs per menu section. Includes API client, draft state
management, save/reset, and translations for ru/en/fa/zh locales.

src/api/buttonStyles.ts

@@ -0,0 +1,66 @@
+import apiClient from './client';
+
+export interface ButtonSectionConfig {
+  style: 'primary' | 'success' | 'danger';
+  icon_custom_emoji_id: string;
+}
+
+export interface ButtonStylesConfig {
+  home: ButtonSectionConfig;
+  subscription: ButtonSectionConfig;
+  balance: ButtonSectionConfig;
+  referral: ButtonSectionConfig;
+  support: ButtonSectionConfig;
+  info: ButtonSectionConfig;
+  admin: ButtonSectionConfig;
+}
+
+export type ButtonStylesUpdate = {
+  [K in keyof ButtonStylesConfig]?: Partial<ButtonSectionConfig>;
+};
+
+export const BUTTON_SECTIONS = [
+  'home',
+  'subscription',
+  'balance',
+  'referral',
+  'support',
+  'info',
+  'admin',
+] as const;
+
+export type ButtonSection = (typeof BUTTON_SECTIONS)[number];
+
+export const DEFAULT_BUTTON_STYLES: ButtonStylesConfig = {
+  home: { style: 'primary', icon_custom_emoji_id: '' },
+  subscription: { style: 'success', icon_custom_emoji_id: '' },
+  balance: { style: 'primary', icon_custom_emoji_id: '' },
+  referral: { style: 'success', icon_custom_emoji_id: '' },
+  support: { style: 'primary', icon_custom_emoji_id: '' },
+  info: { style: 'primary', icon_custom_emoji_id: '' },
+  admin: { style: 'danger', icon_custom_emoji_id: '' },
+};
+
+export const buttonStylesApi = {
+  getStyles: async (): Promise<ButtonStylesConfig> => {
+    try {
+      const response = await apiClient.get<ButtonStylesConfig>('/cabinet/admin/button-styles');
+      return response.data;
+    } catch {
+      return DEFAULT_BUTTON_STYLES;
+    }
+  },
+
+  updateStyles: async (update: ButtonStylesUpdate): Promise<ButtonStylesConfig> => {
+    const response = await apiClient.patch<ButtonStylesConfig>(
+      '/cabinet/admin/button-styles',
+      update,
+    );
+    return response.data;
+  },
+
+  resetStyles: async (): Promise<ButtonStylesConfig> => {
+    const response = await apiClient.post<ButtonStylesConfig>('/cabinet/admin/button-styles/reset');
+    return response.data;
+  },
+};

src/components/admin/ButtonsTab.tsx

@@ -0,0 +1,222 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  buttonStylesApi,
+  ButtonStylesConfig,
+  DEFAULT_BUTTON_STYLES,
+  BUTTON_SECTIONS,
+  ButtonSection,
+} from '../../api/buttonStyles';
+
+type StyleValue = 'primary' | 'success' | 'danger';
+
+const STYLE_OPTIONS: { value: StyleValue; colorClass: string }[] = [
+  { value: 'primary', colorClass: 'bg-blue-500' },
+  { value: 'success', colorClass: 'bg-green-500' },
+  { value: 'danger', colorClass: 'bg-red-500' },
+];
+
+function stylesEqual(a: ButtonStylesConfig, b: ButtonStylesConfig): boolean {
+  for (const section of BUTTON_SECTIONS) {
+    if (a[section].style !== b[section].style) return false;
+    if (a[section].icon_custom_emoji_id !== b[section].icon_custom_emoji_id) return false;
+  }
+  return true;
+}
+
+export function ButtonsTab() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const { data: serverStyles } = useQuery({
+    queryKey: ['button-styles'],
+    queryFn: buttonStylesApi.getStyles,
+  });
+
+  const [draftStyles, setDraftStyles] = useState<ButtonStylesConfig>(DEFAULT_BUTTON_STYLES);
+  const savedStylesRef = useRef<ButtonStylesConfig>(DEFAULT_BUTTON_STYLES);
+  const draftStylesRef = useRef(draftStyles);
+  draftStylesRef.current = draftStyles;
+
+  useEffect(() => {
+    if (serverStyles) {
+      if (
+        stylesEqual(savedStylesRef.current, draftStylesRef.current) ||
+        stylesEqual(savedStylesRef.current, DEFAULT_BUTTON_STYLES)
+      ) {
+        setDraftStyles(serverStyles);
+        savedStylesRef.current = serverStyles;
+      }
+    }
+  }, [serverStyles]);
+
+  const hasUnsavedChanges = !stylesEqual(draftStyles, savedStylesRef.current);
+
+  const updateMutation = useMutation({
+    mutationFn: buttonStylesApi.updateStyles,
+    onSuccess: (data) => {
+      savedStylesRef.current = data;
+      setDraftStyles(data);
+      queryClient.setQueryData(['button-styles'], data);
+    },
+  });
+
+  const resetMutation = useMutation({
+    mutationFn: buttonStylesApi.resetStyles,
+    onSuccess: (data) => {
+      savedStylesRef.current = data;
+      setDraftStyles(data);
+      queryClient.setQueryData(['button-styles'], data);
+    },
+  });
+
+  const updateSection = useCallback(
+    (section: ButtonSection, field: 'style' | 'icon_custom_emoji_id', value: string) => {
+      setDraftStyles((prev) => ({
+        ...prev,
+        [section]: {
+          ...prev[section],
+          [field]: value,
+        },
+      }));
+    },
+    [],
+  );
+
+  const handleCancel = useCallback(() => {
+    setDraftStyles(savedStylesRef.current);
+  }, []);
+
+  const handleSave = useCallback(() => {
+    // Build partial update — only send changed sections
+    const update: Record<string, Record<string, string>> = {};
+    for (const section of BUTTON_SECTIONS) {
+      const draft = draftStyles[section];
+      const saved = savedStylesRef.current[section];
+      if (
+        draft.style !== saved.style ||
+        draft.icon_custom_emoji_id !== saved.icon_custom_emoji_id
+      ) {
+        update[section] = {};
+        if (draft.style !== saved.style) {
+          update[section].style = draft.style;
+        }
+        if (draft.icon_custom_emoji_id !== saved.icon_custom_emoji_id) {
+          update[section].icon_custom_emoji_id = draft.icon_custom_emoji_id;
+        }
+      }
+    }
+    if (Object.keys(update).length > 0) {
+      updateMutation.mutate(update);
+    }
+  }, [draftStyles, updateMutation]);
+
+  return (
+    <div className="space-y-6">
+      {/* Section cards */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        {BUTTON_SECTIONS.map((section) => {
+          const cfg = draftStyles[section];
+          return (
+            <div
+              key={section}
+              className="rounded-2xl border border-dark-700/50 bg-dark-800/50 p-4 sm:p-5"
+            >
+              <div className="mb-3 flex items-center justify-between">
+                <div>
+                  <h4 className="text-sm font-semibold text-dark-100">
+                    {t(`admin.buttons.sections.${section}`)}
+                  </h4>
+                  <p className="mt-0.5 text-xs text-dark-400">
+                    {t(`admin.buttons.descriptions.${section}`)}
+                  </p>
+                </div>
+                {/* Live preview chip */}
+                <div
+                  className={`rounded-lg px-3 py-1.5 text-xs font-medium text-white ${
+                    cfg.style === 'success'
+                      ? 'bg-green-500'
+                      : cfg.style === 'danger'
+                        ? 'bg-red-500'
+                        : 'bg-blue-500'
+                  }`}
+                >
+                  {t(`admin.buttons.styles.${cfg.style}`)}
+                </div>
+              </div>
+
+              {/* Color selector chips */}
+              <div className="mb-3">
+                <label className="mb-1.5 block text-xs font-medium text-dark-300">
+                  {t('admin.buttons.color')}
+                </label>
+                <div className="flex gap-2">
+                  {STYLE_OPTIONS.map((opt) => (
+                    <button
+                      key={opt.value}
+                      onClick={() => updateSection(section, 'style', opt.value)}
+                      className={`flex h-8 items-center gap-1.5 rounded-lg border px-3 text-xs font-medium transition-all ${
+                        cfg.style === opt.value
+                          ? 'border-accent-500 bg-accent-500/10 text-accent-400'
+                          : 'border-dark-600 bg-dark-700/50 text-dark-300 hover:border-dark-500'
+                      }`}
+                    >
+                      <span className={`h-3 w-3 rounded-full ${opt.colorClass}`} />
+                      {t(`admin.buttons.styles.${opt.value}`)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Emoji ID input */}
+              <div>
+                <label className="mb-1.5 block text-xs font-medium text-dark-300">
+                  {t('admin.buttons.emojiId')}
+                </label>
+                <input
+                  type="text"
+                  value={cfg.icon_custom_emoji_id}
+                  onChange={(e) => updateSection(section, 'icon_custom_emoji_id', e.target.value)}
+                  placeholder={t('admin.buttons.emojiPlaceholder')}
+                  className="w-full rounded-lg border border-dark-600 bg-dark-700/50 px-3 py-2 text-sm text-dark-100 placeholder-dark-500 transition-colors focus:border-accent-500 focus:outline-none"
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Save / Cancel */}
+      {hasUnsavedChanges && (
+        <div className="flex flex-wrap items-center gap-3">
+          <button
+            onClick={handleSave}
+            disabled={updateMutation.isPending}
+            className="rounded-xl bg-accent-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
+          >
+            {updateMutation.isPending ? t('common.saving', t('common.save')) : t('common.save')}
+          </button>
+          <button
+            onClick={handleCancel}
+            disabled={updateMutation.isPending}
+            className="rounded-xl bg-dark-700 px-4 py-2 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-600 disabled:opacity-50"
+          >
+            {t('common.cancel')}
+          </button>
+        </div>
+      )}
+
+      {/* Reset */}
+      <div className="flex justify-end">
+        <button
+          onClick={() => resetMutation.mutate()}
+          disabled={resetMutation.isPending}
+          className="rounded-xl bg-dark-700 px-4 py-2 text-sm text-dark-300 transition-colors hover:bg-dark-600 disabled:opacity-50"
+        >
+          {t('admin.buttons.resetAll')}
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/admin/constants.ts

@@ -21,6 +21,7 @@ export const MENU_SECTIONS: MenuSection[] = [
       { id: 'branding', iconType: null },
       { id: 'theme', iconType: null },
       { id: 'analytics', iconType: null },
+      { id: 'buttons', iconType: null },
     ],
   },
   {

src/components/admin/index.ts

@@ -6,6 +6,7 @@ export * from './SettingInput';
 export * from './SettingRow';
 export * from './AnalyticsTab';
 export * from './BrandingTab';
+export * from './ButtonsTab';
 export * from './ThemeTab';
 export * from './FavoritesTab';
 export * from './SettingsTab';

src/locales/en.json

@@ -1217,6 +1217,7 @@
       "noSearchResults": "Nothing found",
       "example": "Example",
       "analytics": "Analytics",
+      "buttons": "Buttons",
       "notConfigured": "Not configured",
       "counterActive": "Active",
       "counterInactive": "Inactive",
@@ -1286,6 +1287,35 @@
       "quickPresets": "Quick presets",
       "saturation": "Saturation"
     },
+    "buttons": {
+      "color": "Button color",
+      "emojiId": "Custom Emoji ID",
+      "emojiPlaceholder": "Custom emoji ID (optional)",
+      "resetAll": "Reset all styles",
+      "sections": {
+        "home": "Home",
+        "subscription": "Subscription",
+        "balance": "Balance",
+        "referral": "Referrals",
+        "support": "Support",
+        "info": "Info",
+        "admin": "Admin Panel"
+      },
+      "descriptions": {
+        "home": "Personal cabinet button",
+        "subscription": "Subscription management",
+        "balance": "Top-up and balance",
+        "referral": "Referral program",
+        "support": "Support tickets",
+        "info": "Information section",
+        "admin": "Web admin panel"
+      },
+      "styles": {
+        "primary": "Blue",
+        "success": "Green",
+        "danger": "Red"
+      }
+    },
     "apps": {
       "title": "App Management",
       "addApp": "Add App",

src/locales/fa.json

@@ -935,6 +935,7 @@
       "noSearchResults": "چیزی یافت نشد",
       "example": "مثال",
       "analytics": "تحلیل‌ها",
+      "buttons": "دکمه‌ها",
       "notConfigured": "پیکربندی نشده",
       "counterActive": "فعال",
       "counterInactive": "غیرفعال",
@@ -995,6 +996,35 @@
       "resetAllColors": "بازنشانی همه رنگ‌ها",
       "statusColors": "رنگ‌های وضعیت"
     },
+    "buttons": {
+      "color": "رنگ دکمه",
+      "emojiId": "شناسه ایموجی سفارشی",
+      "emojiPlaceholder": "شناسه ایموجی سفارشی (اختیاری)",
+      "resetAll": "بازنشانی همه سبک‌ها",
+      "sections": {
+        "home": "صفحه اصلی",
+        "subscription": "اشتراک",
+        "balance": "موجودی",
+        "referral": "معرفی",
+        "support": "پشتیبانی",
+        "info": "اطلاعات",
+        "admin": "پنل مدیریت"
+      },
+      "descriptions": {
+        "home": "دکمه کابینت شخصی",
+        "subscription": "مدیریت اشتراک",
+        "balance": "شارژ و موجودی",
+        "referral": "برنامه معرفی",
+        "support": "تیکت‌های پشتیبانی",
+        "info": "بخش اطلاعات",
+        "admin": "پنل مدیریت وب"
+      },
+      "styles": {
+        "primary": "آبی",
+        "success": "سبز",
+        "danger": "قرمز"
+      }
+    },
     "apps": {
       "title": "مدیریت برنامه‌ها",
       "addApp": "افزودن برنامه",

src/locales/ru.json

@@ -1260,6 +1260,7 @@
       "branding": "Брендинг",
       "theme": "Тема",
       "analytics": "Аналитика",
+      "buttons": "Кнопки",
       "payments": "Платежи",
       "subscriptions": "Подписки",
       "interface": "Интерфейс",
@@ -1801,6 +1802,35 @@
         "MODERATION": "Модерация"
       }
     },
+    "buttons": {
+      "color": "Цвет кнопки",
+      "emojiId": "Custom Emoji ID",
+      "emojiPlaceholder": "ID кастомного эмодзи (необязательно)",
+      "resetAll": "Сбросить все стили",
+      "sections": {
+        "home": "Главная",
+        "subscription": "Подписка",
+        "balance": "Баланс",
+        "referral": "Рефералы",
+        "support": "Поддержка",
+        "info": "Информация",
+        "admin": "Админка"
+      },
+      "descriptions": {
+        "home": "Кнопка личного кабинета",
+        "subscription": "Управление подпиской",
+        "balance": "Пополнение и баланс",
+        "referral": "Реферальная программа",
+        "support": "Обращения в поддержку",
+        "info": "Информационный раздел",
+        "admin": "Веб-админка"
+      },
+      "styles": {
+        "primary": "Синий",
+        "success": "Зелёный",
+        "danger": "Красный"
+      }
+    },
     "apps": {
       "title": "Управление приложениями",
       "addApp": "Добавить приложение",

src/locales/zh.json

@@ -973,6 +973,7 @@
       "noSearchResults": "未找到结果",
       "example": "示例",
       "analytics": "分析",
+      "buttons": "按钮",
       "notConfigured": "未配置",
       "counterActive": "已启用",
       "counterInactive": "未启用",
@@ -1033,6 +1034,35 @@
       "resetAllColors": "重置所有颜色",
       "statusColors": "状态颜色"
     },
+    "buttons": {
+      "color": "按钮颜色",
+      "emojiId": "自定义表情 ID",
+      "emojiPlaceholder": "自定义表情 ID（可选）",
+      "resetAll": "重置所有样式",
+      "sections": {
+        "home": "主页",
+        "subscription": "订阅",
+        "balance": "余额",
+        "referral": "推荐",
+        "support": "支持",
+        "info": "信息",
+        "admin": "管理面板"
+      },
+      "descriptions": {
+        "home": "个人中心按钮",
+        "subscription": "订阅管理",
+        "balance": "充值和余额",
+        "referral": "推荐计划",
+        "support": "支持工单",
+        "info": "信息板块",
+        "admin": "网页管理面板"
+      },
+      "styles": {
+        "primary": "蓝色",
+        "success": "绿色",
+        "danger": "红色"
+      }
+    },
     "apps": {
       "title": "应用管理",
       "addApp": "添加应用",

src/pages/AdminSettings.tsx

@@ -9,6 +9,7 @@ import { MENU_SECTIONS, MenuItem, formatSettingKey } from '../components/admin';
 import { usePlatform } from '../platform/hooks/usePlatform';
 import { AnalyticsTab } from '../components/admin/AnalyticsTab';
 import { BrandingTab } from '../components/admin/BrandingTab';
+import { ButtonsTab } from '../components/admin/ButtonsTab';
 import { ThemeTab } from '../components/admin/ThemeTab';
 import { FavoritesTab } from '../components/admin/FavoritesTab';
 import { SettingsTab } from '../components/admin/SettingsTab';
@@ -174,6 +175,8 @@ export default function AdminSettings() {
         return <BrandingTab accentColor={themeColors?.accent} />;
       case 'theme':
         return <ThemeTab />;
+      case 'buttons':
+        return <ButtonsTab />;
       case 'favorites':
         return (
           <FavoritesTab