feat: обновлен сайдбар

mmeerrkkaa · mmeerrkkaa · commit 8d77a4834bc6 · 2026-05-12T11:41:56.000+03:00
diff --git a/frontend/public/locales/en/sidebar.json b/frontend/public/locales/en/sidebar.json
@@ -1,10 +1,8 @@
 {
   "dashboard": "Dashboard",
   "scheduler": "Scheduler",
-  "graphStore": "Graph Store",
   "apiKeys": "API Keys",
   "proxy": "Proxy",
-  "changelog": "Version History",
   "bots": "Bots",
   "admin": "Administration",
   "servers": "Servers",
@@ -24,8 +22,9 @@
     "cancel": "Cancel",
     "confirm": "Log out"
   },
-  "whatsNew": "What's New?",
   "openMenu": "Open Menu",
+  "whatsNew": "What's New?",
+  "askQuestion": "Ask Question",
   "theme": {
     "label": "Theme",
     "light": "Light",
diff --git a/frontend/public/locales/ru/sidebar.json b/frontend/public/locales/ru/sidebar.json
@@ -1,10 +1,8 @@
 {
   "dashboard": "Дашборд",
   "scheduler": "Планировщик",
-  "graphStore": "Магазин графов",
   "apiKeys": "API Ключи",
   "proxy": "Прокси",
-  "changelog": "История версий",
   "bots": "Боты",
   "admin": "Администрирование",
   "servers": "Серверы",
@@ -24,8 +22,9 @@
     "cancel": "Отмена",
     "confirm": "Выйти"
   },
-  "whatsNew": "Что нового?",
   "openMenu": "Открыть меню",
+  "whatsNew": "Что нового?",
+  "askQuestion": "Задать вопрос",
   "theme": {
     "label": "Тема",
     "light": "Светлая",
diff --git a/frontend/src/components/TelegramWidget.jsx b/frontend/src/components/TelegramWidget.jsx
@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import { ExternalLink } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export default function TelegramWidget({ isCollapsed }) {
+    const [membersCount, setMembersCount] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        async function fetchMembers() {
+            try {
+                const response = await fetch('https://api.telegram.org/bot8062196096:AAH1bLASmX8oJFiTmPx0vB2t0oN6K_3pNjk/getChat?chat_id=@blockmineJs');
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.ok && data.result) {
+                        setMembersCount(data.result.member_count || data.result.members_count);
+                    }
+                }
+            } catch (error) {
+                console.error('Failed to fetch Telegram members:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        }
+
+        fetchMembers();
+    }, []);
+
+    return (
+        <a
+            href="https://t.me/blockmineJs"
+            target="_blank"
+            rel="noopener noreferrer"
+            title={isCollapsed ? 'Telegram' : undefined}
+            className={cn(
+                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
+                isCollapsed && "mx-auto h-9 w-9 justify-center px-0"
+            )}
+        >
+            <svg
+                viewBox="0 0 24 24"
+                className="h-4 w-4 flex-shrink-0"
+                fill="currentColor"
+            >
+                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+            </svg>
+            <span className={cn("flex-1 truncate", isCollapsed && "hidden")}>Telegram</span>
+            {isLoading ? (
+                <span className="text-xs text-muted-foreground hidden sm:inline">...</span>
+            ) : membersCount ? (
+                <span className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full font-medium hidden sm:inline">
+                    {membersCount.toLocaleString()}
+                </span>
+            ) : (
+                <ExternalLink className="h-3 w-3 hidden sm:block" />
+            )}
+        </a>
+    );
+}
diff --git a/frontend/src/pages/AdminPage.jsx b/frontend/src/pages/AdminPage.jsx
@@ -4,24 +4,34 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { ShieldCheck } from 'lucide-react';
+import { ShieldCheck, Key } from 'lucide-react';
 import PanelUsersManager from '@/components/admin/PanelUsersManager';
 import PanelRolesManager from '@/components/admin/PanelRolesManager';
 import GlobalSettingsManager from '@/components/admin/GlobalSettingsManager';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router-dom';
 
 export default function AdminPage() {
     const { t } = useTranslation('admin');
+    const navigate = useNavigate();
+
     return (
         <div className="h-full flex flex-col p-4">
             <CardHeader className="px-0">
-                <div className="flex items-center gap-3">
-                    <ShieldCheck className="w-8 h-8 text-primary" />
-                    <div>
-                        <CardTitle>{t('title')}</CardTitle>
-                        <CardDescription>
-                            {t('description')}
-                        </CardDescription>
+                <div className="flex items-center justify-between gap-3">
+                    <div className="flex items-center gap-3">
+                        <ShieldCheck className="w-8 h-8 text-primary" />
+                        <div>
+                            <CardTitle>{t('title')}</CardTitle>
+                            <CardDescription>
+                                {t('description')}
+                            </CardDescription>
+                        </div>
                     </div>
+                    <Button variant="outline" onClick={() => navigate('/api-keys')}>
+                        <Key className="h-4 w-4 mr-2" />
+                        API Keys
+                    </Button>
                 </div>
             </CardHeader>
 
diff --git a/frontend/src/pages/Layout.jsx b/frontend/src/pages/Layout.jsx
@@ -27,11 +27,9 @@ import {
     ChevronsRight,
     Server,
     ShieldCheck,
-    Store,
-    Lightbulb,
     Key,
-    MessageSquarePlus,
-    Globe
+    Globe,
+    Send
 } from 'lucide-react';
 import ImportBotDialog from '@/components/ImportBotDialog';
 import { cn } from "@/lib/utils";
@@ -63,7 +61,7 @@ import {
     useSortable,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import ContributeDialog from '@/components/ContributeDialog';
+import TelegramWidget from '@/components/TelegramWidget';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 
 const SIDEBAR_TRANSITION = 'duration-300 ease-out';
@@ -232,24 +230,6 @@ const SidebarNav = ({ onLinkClick, isCollapsed, isSheetOpen }) => {
     const navigate = useNavigate();
     const { toast } = useToast();
     const [isDragging, setIsDragging] = useState(false);
-    const [randomFeature, setRandomFeature] = useState({ text: t('contribute.improve'), icon: <Lightbulb className="h-4 w-4 flex-shrink-0" /> });
-    const [isContributeModalOpen, setIsContributeModalOpen] = useState(false);
-
-    useEffect(() => {
-        const texts = [
-            t('contribute.suggest'),
-            t('contribute.change'),
-            t('contribute.question'),
-            t('contribute.improve')
-        ];
-        const icons = [
-            <Lightbulb key="lightbulb" className="h-4 w-4 flex-shrink-0" />,
-            <MessageSquarePlus key="msg" className="h-4 w-4 flex-shrink-0" />
-        ];
-        const randomText = texts[Math.floor(Math.random() * texts.length)];
-        const randomIcon = icons[Math.floor(Math.random() * icons.length)];
-        setRandomFeature({ text: randomText, icon: randomIcon });
-    }, [t]);
 
     const activeBotId = location.pathname.match(/\/bots\/(\d+)/)?.[1];
 
@@ -416,52 +396,13 @@ const SidebarNav = ({ onLinkClick, isCollapsed, isSheetOpen }) => {
                 </NavLink>
             )}
 
-            <NavLink to="/graph-store" onClick={onLinkClick} className={navLinkClasses}>
-                {iconAndText(<Store className="h-4 w-4 flex-shrink-0" />, t('graphStore'))}
-            </NavLink>
-
-            <NavLink to="/api-keys" onClick={onLinkClick} className={navLinkClasses}>
-                {iconAndText(<Key className="h-4 w-4 flex-shrink-0" />, t('apiKeys'))}
-            </NavLink>
-
             {hasPermission('bot:update') && (
                 <NavLink to="/proxy-config" onClick={onLinkClick} className={navLinkClasses}>
                     {iconAndText(<Globe className="h-4 w-4 flex-shrink-0" />, t('proxy'))}
                 </NavLink>
             )}
 
-            <Dialog open={isContributeModalOpen} onOpenChange={setIsContributeModalOpen}>
-                <DialogTrigger asChild>
-                    <Button
-                        variant="ghost"
-                        className={cn(
-                            "w-full justify-start flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 text-muted-foreground hover:text-foreground hover:bg-muted/50",
-                            isCollapsed && "mx-auto h-9 w-9 justify-center gap-0 px-0"
-                        )}
-                        onClick={() => {
-                            setIsContributeModalOpen(true);
-                            if (typeof onLinkClick === 'function') onLinkClick();
-                        }}
-                    >
-                        {iconAndText(randomFeature.icon, randomFeature.text)}
-                    </Button>
-                </DialogTrigger>
-                <ContributeDialog onClose={() => setIsContributeModalOpen(false)} />
-            </Dialog>
-
-            <Button
-                variant="ghost"
-                className={cn(
-                    "w-full justify-start flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 text-muted-foreground hover:text-foreground hover:bg-accent",
-                    isCollapsed && "mx-auto h-9 w-9 justify-center gap-0 px-0"
-                )}
-                onClick={async () => {
-                    onLinkClick();
-                    await useAppStore.getState().openChangelogDialog();
-                }}
-            >
-                {iconAndText(<Github className="h-4 w-4 flex-shrink-0" />, t('changelog'))}
-            </Button>
+            <TelegramWidget isCollapsed={isCollapsed} />
 
             <Separator className="my-2" />
 
@@ -703,6 +644,22 @@ export default function Layout() {
                         <span className={sidebarLabelClasses(isCollapsed)}>{t('admin')}</span>
                     </NavLink>
                 )}
+                {hasPermission('api_key:list') && (
+                    <NavLink
+                        to="/api-keys"
+                        onClick={() => setIsSheetOpen(false)}
+                        className={({ isActive }) => cn(
+                            "relative flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium transition-[background-color,color,gap,padding] " + SIDEBAR_TRANSITION,
+                            isActive
+                                ? "bg-primary/10 text-primary before:absolute before:left-0 before:top-1 before:bottom-1 before:w-0.5 before:bg-primary before:rounded-r"
+                                : "text-muted-foreground hover:text-foreground hover:bg-accent",
+                            isCollapsed && "mx-auto h-9 w-9 justify-center gap-0 px-0"
+                        )}
+                    >
+                        <Key className="h-4 w-4 flex-shrink-0" />
+                        <span className={sidebarLabelClasses(isCollapsed)}>{t('apiKeys')}</span>
+                    </NavLink>
+                )}
                 {hasPermission('server:list') && (
                     <NavLink
                         to="/servers"
