feat: add per-button enable/disable toggle and custom labels per locale

- Add Toggle per section card to show/hide button in main menu
- Add collapsible locale label inputs (ru, en, ua, zh, fa) per section
- Normalize server response for backward compatibility with older API
- Update all 4 locale files with new translation keys

src/api/buttonStyles.ts

@@ -3,6 +3,8 @@ import apiClient from './client';
 export interface ButtonSectionConfig {
   style: 'primary' | 'success' | 'danger' | 'default';
   icon_custom_emoji_id: string;
+  enabled: boolean;
+  labels: Record<string, string>;
 }
 
 export interface ButtonStylesConfig {
@@ -31,21 +33,40 @@ export const BUTTON_SECTIONS = [
 
 export type ButtonSection = (typeof BUTTON_SECTIONS)[number];
 
+export const BOT_LOCALES = ['ru', 'en', 'ua', 'zh', 'fa'] as const;
+
+export type BotLocale = (typeof BOT_LOCALES)[number];
+
+const DEFAULT_SECTION: ButtonSectionConfig = {
+  style: 'primary',
+  icon_custom_emoji_id: '',
+  enabled: true,
+  labels: {},
+};
+
 export const DEFAULT_BUTTON_STYLES: ButtonStylesConfig = {
-  home: { style: 'primary', icon_custom_emoji_id: '' },
+  home: { ...DEFAULT_SECTION, style: 'primary' },
-  subscription: { style: 'success', icon_custom_emoji_id: '' },
+  subscription: { ...DEFAULT_SECTION, style: 'success' },
-  balance: { style: 'primary', icon_custom_emoji_id: '' },
+  balance: { ...DEFAULT_SECTION, style: 'primary' },
-  referral: { style: 'success', icon_custom_emoji_id: '' },
+  referral: { ...DEFAULT_SECTION, style: 'success' },
-  support: { style: 'primary', icon_custom_emoji_id: '' },
+  support: { ...DEFAULT_SECTION, style: 'primary' },
-  info: { style: 'primary', icon_custom_emoji_id: '' },
+  info: { ...DEFAULT_SECTION, style: 'primary' },
-  admin: { style: 'danger', icon_custom_emoji_id: '' },
+  admin: { ...DEFAULT_SECTION, style: 'danger' },
 };
 
 export const buttonStylesApi = {
   getStyles: async (): Promise<ButtonStylesConfig> => {
     try {
       const response = await apiClient.get<ButtonStylesConfig>('/cabinet/admin/button-styles');
-      return response.data;
+      const data = response.data;
+      for (const section of BUTTON_SECTIONS) {
+        data[section] = {
+          ...DEFAULT_SECTION,
+          ...data[section],
+          labels: { ...(data[section]?.labels || {}) },
+        };
+      }
+      return data;
     } catch {
       return DEFAULT_BUTTON_STYLES;
     }

src/components/admin/ButtonsTab.tsx

@@ -7,7 +7,9 @@ import {
   DEFAULT_BUTTON_STYLES,
   BUTTON_SECTIONS,
   ButtonSection,
+  BOT_LOCALES,
 } from '../../api/buttonStyles';
+import { Toggle } from './Toggle';
 
 type StyleValue = 'primary' | 'success' | 'danger' | 'default';
 
@@ -18,10 +20,19 @@ const STYLE_OPTIONS: { value: StyleValue; colorClass: string }[] = [
   { value: 'danger', colorClass: 'bg-red-500' },
 ];
 
+function labelsEqual(a: Record<string, string>, b: Record<string, string>): boolean {
+  for (const locale of BOT_LOCALES) {
+    if ((a[locale] || '') !== (b[locale] || '')) return false;
+  }
+  return true;
+}
+
 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;
+    if (a[section].enabled !== b[section].enabled) return false;
+    if (!labelsEqual(a[section].labels, b[section].labels)) return false;
   }
   return true;
 }
@@ -36,6 +47,7 @@ export function ButtonsTab() {
   });
 
   const [draftStyles, setDraftStyles] = useState<ButtonStylesConfig>(DEFAULT_BUTTON_STYLES);
+  const [expandedLabels, setExpandedLabels] = useState<Set<string>>(new Set());
   const savedStylesRef = useRef<ButtonStylesConfig>(DEFAULT_BUTTON_STYLES);
   const draftStylesRef = useRef(draftStyles);
   draftStylesRef.current = draftStyles;
@@ -85,27 +97,76 @@ export function ButtonsTab() {
     [],
   );
 
+  const toggleEnabled = useCallback((section: ButtonSection) => {
+    setDraftStyles((prev) => ({
+      ...prev,
+      [section]: {
+        ...prev[section],
+        enabled: !prev[section].enabled,
+      },
+    }));
+  }, []);
+
+  const updateLabel = useCallback((section: ButtonSection, locale: string, value: string) => {
+    setDraftStyles((prev) => ({
+      ...prev,
+      [section]: {
+        ...prev[section],
+        labels: {
+          ...prev[section].labels,
+          [locale]: value,
+        },
+      },
+    }));
+  }, []);
+
+  const toggleLabelsExpanded = useCallback((section: string) => {
+    setExpandedLabels((prev) => {
+      const next = new Set(prev);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
+    });
+  }, []);
+
   const handleCancel = useCallback(() => {
     setDraftStyles(savedStylesRef.current);
   }, []);
 
   const handleSave = useCallback(() => {
-    // Build partial update — only send changed sections
+    const update: Record<string, Record<string, unknown>> = {};
-    const update: Record<string, Record<string, string>> = {};
     for (const section of BUTTON_SECTIONS) {
       const draft = draftStyles[section];
       const saved = savedStylesRef.current[section];
-      if (
+      const sectionUpdate: Record<string, unknown> = {};
-        draft.style !== saved.style ||
+      let changed = false;
-        draft.icon_custom_emoji_id !== saved.icon_custom_emoji_id
+
-      ) {
+      if (draft.style !== saved.style) {
-        update[section] = {};
+        sectionUpdate.style = draft.style;
-        if (draft.style !== saved.style) {
+        changed = true;
-          update[section].style = draft.style;
+      }
-        }
+      if (draft.icon_custom_emoji_id !== saved.icon_custom_emoji_id) {
-        if (draft.icon_custom_emoji_id !== saved.icon_custom_emoji_id) {
+        sectionUpdate.icon_custom_emoji_id = draft.icon_custom_emoji_id;
-          update[section].icon_custom_emoji_id = draft.icon_custom_emoji_id;
+        changed = true;
+      }
+      if (draft.enabled !== saved.enabled) {
+        sectionUpdate.enabled = draft.enabled;
+        changed = true;
+      }
+      if (!labelsEqual(draft.labels, saved.labels)) {
+        const cleanLabels: Record<string, string> = {};
+        for (const locale of BOT_LOCALES) {
+          cleanLabels[locale] = (draft.labels[locale] || '').trim();
         }
+        sectionUpdate.labels = cleanLabels;
+        changed = true;
+      }
+
+      if (changed) {
+        update[section] = sectionUpdate;
       }
     }
     if (Object.keys(update).length > 0) {
@@ -119,33 +180,50 @@ export function ButtonsTab() {
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {BUTTON_SECTIONS.map((section) => {
           const cfg = draftStyles[section];
+          const isExpanded = expandedLabels.has(section);
+          const hasCustomLabels = BOT_LOCALES.some((l) => (cfg.labels[l] || '').trim());
+
           return (
             <div
               key={section}
-              className="rounded-2xl border border-dark-700/50 bg-dark-800/50 p-4 sm:p-5"
+              className={`rounded-2xl border bg-dark-800/50 p-4 transition-colors sm:p-5 ${
+                cfg.enabled ? 'border-dark-700/50' : 'border-dark-700/30 opacity-60'
+              }`}
             >
+              {/* Header */}
               <div className="mb-3 flex items-center justify-between">
-                <div>
+                <div className="flex-1">
-                  <h4 className="text-sm font-semibold text-dark-100">
+                  <div className="flex items-center gap-2">
-                    {t(`admin.buttons.sections.${section}`)}
+                    <h4 className="text-sm font-semibold text-dark-100">
-                  </h4>
+                      {t(`admin.buttons.sections.${section}`)}
+                    </h4>
+                    {!cfg.enabled && (
+                      <span className="rounded bg-dark-600 px-1.5 py-0.5 text-[10px] font-medium text-dark-400">
+                        {t('admin.buttons.hidden')}
+                      </span>
+                    )}
+                  </div>
                   <p className="mt-0.5 text-xs text-dark-400">
                     {t(`admin.buttons.descriptions.${section}`)}
                   </p>
                 </div>
-                {/* Live preview chip */}
+                <div className="flex items-center gap-3">
-                <div
+                  {/* Live preview chip */}
-                  className={`rounded-lg px-3 py-1.5 text-xs font-medium ${
+                  <div
-                    cfg.style === 'default'
+                    className={`rounded-lg px-3 py-1.5 text-xs font-medium ${
-                      ? 'bg-dark-600 text-dark-300'
+                      cfg.style === 'default'
-                      : cfg.style === 'success'
+                        ? 'bg-dark-600 text-dark-300'
-                        ? 'bg-green-500 text-white'
+                        : cfg.style === 'success'
-                        : cfg.style === 'danger'
+                          ? 'bg-green-500 text-white'
-                          ? 'bg-red-500 text-white'
+                          : cfg.style === 'danger'
-                          : 'bg-blue-500 text-white'
+                            ? 'bg-red-500 text-white'
-                  }`}
+                            : 'bg-blue-500 text-white'
-                >
+                    }`}
-                  {t(`admin.buttons.styles.${cfg.style}`)}
+                  >
+                    {t(`admin.buttons.styles.${cfg.style}`)}
+                  </div>
+                  {/* Enabled toggle */}
+                  <Toggle checked={cfg.enabled} onChange={() => toggleEnabled(section)} />
                 </div>
               </div>
 
@@ -173,7 +251,7 @@ export function ButtonsTab() {
               </div>
 
               {/* Emoji ID input */}
-              <div>
+              <div className="mb-3">
                 <label className="mb-1.5 block text-xs font-medium text-dark-300">
                   {t('admin.buttons.emojiId')}
                 </label>
@@ -185,6 +263,48 @@ export function ButtonsTab() {
                   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>
+
+              {/* Custom labels */}
+              <div>
+                <button
+                  onClick={() => toggleLabelsExpanded(section)}
+                  className="flex w-full items-center justify-between text-xs font-medium text-dark-300 transition-colors hover:text-dark-200"
+                >
+                  <span className="flex items-center gap-1.5">
+                    {t('admin.buttons.customLabels')}
+                    {hasCustomLabels && <span className="h-1.5 w-1.5 rounded-full bg-accent-500" />}
+                  </span>
+                  <svg
+                    className={`h-3.5 w-3.5 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                  </svg>
+                </button>
+                {isExpanded && (
+                  <div className="mt-2 space-y-2">
+                    {BOT_LOCALES.map((locale) => (
+                      <div key={locale} className="flex items-center gap-2">
+                        <span className="w-7 shrink-0 text-center text-[10px] font-semibold uppercase text-dark-500">
+                          {locale}
+                        </span>
+                        <input
+                          type="text"
+                          value={cfg.labels[locale] || ''}
+                          onChange={(e) => updateLabel(section, locale, e.target.value)}
+                          placeholder={t('admin.buttons.labelPlaceholder')}
+                          maxLength={100}
+                          className="w-full rounded-lg border border-dark-600 bg-dark-700/50 px-3 py-1.5 text-sm text-dark-100 placeholder-dark-500 transition-colors focus:border-accent-500 focus:outline-none"
+                        />
+                      </div>
+                    ))}
+                    <p className="text-[10px] text-dark-500">{t('admin.buttons.labelsHint')}</p>
+                  </div>
+                )}
+              </div>
             </div>
           );
         })}
@@ -198,7 +318,7 @@ export function ButtonsTab() {
             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')}
+            {updateMutation.isPending ? t('common.saving') : t('common.save')}
           </button>
           <button
             onClick={handleCancel}

src/locales/en.json

@@ -1292,6 +1292,10 @@
       "emojiId": "Custom Emoji ID",
       "emojiPlaceholder": "Custom emoji ID (optional)",
       "resetAll": "Reset all styles",
+      "hidden": "Hidden",
+      "customLabels": "Button labels",
+      "labelPlaceholder": "Custom button text",
+      "labelsHint": "Empty = default label",
       "sections": {
         "home": "Home",
         "subscription": "Subscription",

src/locales/fa.json

@@ -1001,6 +1001,10 @@
       "emojiId": "شناسه ایموجی سفارشی",
       "emojiPlaceholder": "شناسه ایموجی سفارشی (اختیاری)",
       "resetAll": "بازنشانی همه سبک‌ها",
+      "hidden": "پنهان",
+      "customLabels": "نام‌های دکمه",
+      "labelPlaceholder": "متن سفارشی دکمه",
+      "labelsHint": "خالی = نام پیش‌فرض",
       "sections": {
         "home": "صفحه اصلی",
         "subscription": "اشتراک",

src/locales/ru.json

@@ -1807,6 +1807,10 @@
       "emojiId": "Custom Emoji ID",
       "emojiPlaceholder": "ID кастомного эмодзи (необязательно)",
       "resetAll": "Сбросить все стили",
+      "hidden": "Скрыта",
+      "customLabels": "Названия кнопки",
+      "labelPlaceholder": "Свой текст кнопки",
+      "labelsHint": "Пустое поле = название по умолчанию",
       "sections": {
         "home": "Главная",
         "subscription": "Подписка",

src/locales/zh.json

@@ -1039,6 +1039,10 @@
       "emojiId": "自定义表情 ID",
       "emojiPlaceholder": "自定义表情 ID（可选）",
       "resetAll": "重置所有样式",
+      "hidden": "已隐藏",
+      "customLabels": "按钮名称",
+      "labelPlaceholder": "自定义按钮文本",
+      "labelsHint": "留空 = 默认名称",
       "sections": {
         "home": "主页",
         "subscription": "订阅",