Add "Фреймдата" tab to Navbar and update related components

RXDCODX · RXDCODX · commit 56ed1b331a72 · 2025-08-10T12:02:54.000+04:00
- Added "Фреймдата" tab to the Navbar in both the Control Room and Site components.
- Updated ChatHorizontal and ChatVertical message stories to use new enum names for chat message types.
- Refactored PyroAlerts and related components to use updated media file info type enums.
- Adjusted scoreboard store import path for consistency.
- Enhanced ScreenParticles Manager to utilize updated particle type enums.
- Fixed CSS for dropdown button in Header component.
- Updated CommandsPage to import new command-related enums.
- Added link to pending changes in CharacterGrid of FramedataPage.
- Introduced PendingChangesPage route in Routes configuration.
diff --git a/src/components/ControlRoom_Components/Navbar/Navbar.tsx b/src/components/ControlRoom_Components/Navbar/Navbar.tsx
@@ -32,6 +32,7 @@ const Navbar: React.FC<NavbarProps> = ({ activeTab, onTabChange }) => {
     { label: "Главная", path: "/" },
     { label: "О проекте", path: "/about" },
     { label: "Документация", path: "/docs" },
+    { label: "Фреймдата", path: "/framedata" },
     { label: "Команды", path: "/commands" },
     { label: "Контакты", path: "/contacts" },
   ];
diff --git a/src/components/OBS_Components/ChatHorizontal/Message.stories.tsx b/src/components/OBS_Components/ChatHorizontal/Message.stories.tsx
@@ -3,8 +3,8 @@ import { expect } from "storybook/test";
 
 import {
   ChatMessage,
-  EnumChatMessageNoisy,
-  EnumChatMessageUserType,
+  ChatMessageNoisyEnum,
+  ChatMessageUserTypeEnum,
 } from "@/shared/api";
 
 import { Message } from "./Message";
@@ -72,13 +72,13 @@ const defaultMessage: ChatMessage = {
   isStaff: false,
   isSubscriber: false,
   isTurbo: false,
-  noisy: EnumChatMessageNoisy.False,
+  noisy: ChatMessageNoisyEnum.False,
   rawIrcMessage: undefined,
   roomId: undefined,
   subscribedMonthCount: 0,
   tmiSentTs: undefined,
   userId: undefined,
-  userType: EnumChatMessageUserType.Viewer,
+  userType: ChatMessageUserTypeEnum.Viewer,
   username: undefined,
 };
 
diff --git a/src/components/OBS_Components/ChatVertical/Message.stories.tsx b/src/components/OBS_Components/ChatVertical/Message.stories.tsx
@@ -4,8 +4,8 @@ import { expect } from "storybook/test";
 
 import {
   ChatMessage,
-  EnumChatMessageNoisy,
-  EnumChatMessageUserType,
+  ChatMessageNoisyEnum,
+  ChatMessageUserTypeEnum,
 } from "@/shared/api";
 
 import { Message } from "./Message";
@@ -74,13 +74,13 @@ const defaultMessage: ChatMessage = {
   isStaff: false,
   isSubscriber: false,
   isTurbo: false,
-  noisy: EnumChatMessageNoisy.False,
+  noisy: ChatMessageNoisyEnum.False,
   rawIrcMessage: undefined,
   roomId: undefined,
   subscribedMonthCount: 0,
   tmiSentTs: undefined,
   userId: undefined,
-  userType: EnumChatMessageUserType.Viewer,
+  userType: ChatMessageUserTypeEnum.Viewer,
   username: undefined,
 };
 
@@ -166,12 +166,12 @@ function generateRandomMessages(count: number): ChatMessage[] {
       isModerator,
       isBroadcaster,
       userType: isBroadcaster
-        ? EnumChatMessageUserType.Broadcaster
+        ? ChatMessageUserTypeEnum.Broadcaster
         : isModerator
-          ? EnumChatMessageUserType.Moderator
+          ? ChatMessageUserTypeEnum.Moderator
           : isVip
-            ? EnumChatMessageUserType.Viewer
-            : EnumChatMessageUserType.Viewer,
+            ? ChatMessageUserTypeEnum.Viewer
+            : ChatMessageUserTypeEnum.Viewer,
       color: {
         ...defaultMessage.color,
         r: parseInt(colorHex.slice(1, 3), 16),
diff --git a/src/components/OBS_Components/PyroAlerts/Alert.tsx b/src/components/OBS_Components/PyroAlerts/Alert.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 
-import { EnumMediaFileInfoType, MediaDto } from "@/shared/api";
+import { MediaDto, MediaFileInfoTypeEnum } from "@/shared/api";
 
 import { Audio, Image, Video, Voice } from "./Primitive";
 import TelegramSticker from "./Primitive/TelegramSticker";
@@ -24,40 +24,40 @@ export default function Alert(messageProps: Props) {
   );
 
   switch (fileInfo.type) {
-    case EnumMediaFileInfoType.Image:
-    case EnumMediaFileInfoType.Gif:
+    case MediaFileInfoTypeEnum.Image:
+    case MediaFileInfoTypeEnum.Gif:
       return (
         <Image
           key={message.mediaInfo.id}
           mediaInfo={message}
           callBack={callback}
         />
       );
-    case EnumMediaFileInfoType.Video:
+    case MediaFileInfoTypeEnum.Video:
       return (
         <Video
           key={message.mediaInfo.id}
           MediaInfo={message}
           callback={callback}
         />
       );
-    case EnumMediaFileInfoType.Audio:
+    case MediaFileInfoTypeEnum.Audio:
       return (
         <Audio
           key={message.mediaInfo.id}
           mediaInfo={message}
           callback={callback}
         />
       );
-    case EnumMediaFileInfoType.Voice:
+    case MediaFileInfoTypeEnum.Voice:
       return (
         <Voice
           key={message.mediaInfo.id}
           mediaInfo={message}
           callback={callback}
         />
       );
-    case EnumMediaFileInfoType.TelegramSticker:
+    case MediaFileInfoTypeEnum.TelegramSticker:
       return (
         <TelegramSticker
           key={message.mediaInfo.id}
diff --git a/src/components/OBS_Components/PyroAlerts/HighPriorityAlert.tsx b/src/components/OBS_Components/PyroAlerts/HighPriorityAlert.tsx
@@ -1,13 +1,13 @@
 import { useCallback } from "react";
 
-import { EnumMediaFileInfoType, MediaDto } from "@/shared/api";
+import { MediaDto, MediaFileInfoTypeEnum } from "@/shared/api";
 
 import { Audio, Image, Video, Voice } from "./Primitive";
 import TelegramSticker from "./Primitive/TelegramSticker";
 
 export interface AlertDestination {
   message: MediaDto;
-  type: EnumMediaFileInfoType;
+  type: MediaFileInfoTypeEnum;
   callback: () => void;
 }
 
@@ -16,16 +16,16 @@ export default function HighPriorityAlert(alert: AlertDestination) {
   const callback = useCallback(() => alert.callback(), [alert]);
 
   switch (alert.type) {
-    case EnumMediaFileInfoType.Image:
-    case EnumMediaFileInfoType.Gif:
+    case MediaFileInfoTypeEnum.Image:
+    case MediaFileInfoTypeEnum.Gif:
       return (
         <Image
           key={message.mediaInfo.id}
           mediaInfo={message}
           callBack={callback}
         />
       );
-    case EnumMediaFileInfoType.Video:
+    case MediaFileInfoTypeEnum.Video:
       return (
         <Video
           key={message.mediaInfo.id}
@@ -34,7 +34,7 @@ export default function HighPriorityAlert(alert: AlertDestination) {
           isHighPrior
         />
       );
-    case EnumMediaFileInfoType.Audio:
+    case MediaFileInfoTypeEnum.Audio:
       return (
         <Audio
           key={message.mediaInfo.id}
@@ -43,7 +43,7 @@ export default function HighPriorityAlert(alert: AlertDestination) {
           isHighPrior
         />
       );
-    case EnumMediaFileInfoType.Voice:
+    case MediaFileInfoTypeEnum.Voice:
       return (
         <Voice
           key={message.mediaInfo.id}
@@ -52,7 +52,7 @@ export default function HighPriorityAlert(alert: AlertDestination) {
           isHighPrior
         />
       );
-    case EnumMediaFileInfoType.TelegramSticker:
+    case MediaFileInfoTypeEnum.TelegramSticker:
       return (
         <TelegramSticker
           key={message.mediaInfo.id}
diff --git a/src/components/OBS_Components/PyroAlerts/PyroAlerts.tsx b/src/components/OBS_Components/PyroAlerts/PyroAlerts.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 
-import { EnumMediaMetaInfoPriority, MediaDto } from "@/shared/api";
+import { MediaDto, MediaMetaInfoPriorityEnum } from "@/shared/api";
 import Announce from "@/shared/Utils/Announce/Announce";
 
 import { SignalRContext } from "../../../app";
@@ -32,12 +32,12 @@ export default function PyroAlerts() {
     };
 
     switch (message.mediaInfo.metaInfo.priority) {
-      case EnumMediaMetaInfoPriority.High:
+      case MediaMetaInfoPriorityEnum.High:
         setHighPriorityQueue(prev => [...prev, parsedMessage]); // Добавляем в очередь высокоприоритетных
         setMessages([]);
         break;
-      case EnumMediaMetaInfoPriority.Low:
-      case EnumMediaMetaInfoPriority.Normal:
+      case MediaMetaInfoPriorityEnum.Low:
+      case MediaMetaInfoPriorityEnum.Normal:
         setMessages(prev => [...prev, parsedMessage]);
         break;
     }
diff --git a/src/components/OBS_Components/RandomMem/RandomMem.tsx b/src/components/OBS_Components/RandomMem/RandomMem.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 
-import { EnumMediaMetaInfoPriority, MediaDto } from "@/shared/api";
+import { MediaDto, MediaMetaInfoPriorityEnum } from "@/shared/api";
 import Announce from "@/shared/Utils/Announce/Announce";
 
 import { SignalRContext } from "../../../app";
@@ -19,7 +19,7 @@ export default function PyroAlerts() {
     message.mediaInfo.id = uuidv4();
 
     switch (message.mediaInfo.metaInfo.priority) {
-      case EnumMediaMetaInfoPriority.High: {
+      case MediaMetaInfoPriorityEnum.High: {
         const parsedMessage: MediaDto = {
           ...message,
           mediaInfo: {
@@ -38,8 +38,8 @@ export default function PyroAlerts() {
         setMessages([]);
         break;
       }
-      case EnumMediaMetaInfoPriority.Low:
-      case EnumMediaMetaInfoPriority.Normal: {
+      case MediaMetaInfoPriorityEnum.Low:
+      case MediaMetaInfoPriorityEnum.Normal: {
         const coolMessage: MediaDto = {
           ...message,
           mediaInfo: {
diff --git a/src/components/OBS_Components/Scoreboard/AdminPanel/store/scoreboardStore.ts b/src/components/OBS_Components/Scoreboard/AdminPanel/store/scoreboardStore.ts
@@ -2,7 +2,7 @@ import { HubConnection, HubConnectionState } from "@microsoft/signalr";
 import { create } from "zustand";
 
 import { ScoreboardDto } from "@/shared/api";
-import { ScoreboardHubSignalRContext } from "@/shared/api/SignalR/ScoreboardHub/SignalRContext";
+import { ScoreboardHubSignalRContext } from "@/shared/api";
 
 import {
   ColorInfoWIthTimestamp,
diff --git a/src/components/OBS_Components/ScreenParticles/Manager.tsx b/src/components/OBS_Components/ScreenParticles/Manager.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 
 import { ChatMessage } from "@/shared/api";
-import { MakeScreenParticlesCreateParamsParticlesEnum } from "@/shared/api/SignalR/types/signalr-types";
+import { TelegramusMakeScreenParticlesCreateParamsParticlesEnum } from "@/shared/api/";
 
 import { SignalRContext } from "../../../app";
 import { Confettyv2 } from "./Confetty";
@@ -13,7 +13,7 @@ interface base {
 }
 
 interface particles extends base {
-  type: MakeScreenParticlesCreateParamsParticlesEnum;
+  type: TelegramusMakeScreenParticlesCreateParamsParticlesEnum;
 }
 
 interface emojis extends base {
@@ -27,7 +27,7 @@ export default function Manager() {
 
   SignalRContext.useSignalREffect(
     "MakeScreenParticles",
-    (type: MakeScreenParticlesCreateParamsParticlesEnum) => {
+    (type: TelegramusMakeScreenParticlesCreateParamsParticlesEnum) => {
       const newMessage = { type: type, id: count };
       setCount(count + 1);
       setMessages(prev => [...prev, newMessage]);
@@ -54,14 +54,14 @@ export default function Manager() {
       {messages.length > 0 &&
         messages.map(message => {
           switch (message.type) {
-            case MakeScreenParticlesCreateParamsParticlesEnum.Confetty:
+            case TelegramusMakeScreenParticlesCreateParamsParticlesEnum.Confetty:
               return (
                 <Confettyv2
                   key={message.id}
                   callback={() => removeMessage(message.id)}
                 />
               );
-            case MakeScreenParticlesCreateParamsParticlesEnum.Fireworks:
+            case TelegramusMakeScreenParticlesCreateParamsParticlesEnum.Fireworks:
               return (
                 <Firework
                   key={message.id}
diff --git a/src/components/Site_Components/Layout/Header/Header.module.scss b/src/components/Site_Components/Layout/Header/Header.module.scss
@@ -295,7 +295,6 @@
 // Исправление для переполнения текста
 .dropdownButton {
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px;
 }
diff --git a/src/components/Site_Components/Layout/Header/Header.tsx b/src/components/Site_Components/Layout/Header/Header.tsx
@@ -19,6 +19,7 @@ const Header: React.FC = () => {
     { label: "О проекте", path: "/about" },
     { label: "Документация", path: "/docs" },
     { label: "Команды", path: "/commands" },
+    { label: "Фреймдата", path: "/framedata" },
     { label: "Контакты", path: "/contacts" },
   ];
 
diff --git a/src/pages/CommandsPage/CommandsPage.tsx b/src/pages/CommandsPage/CommandsPage.tsx
@@ -12,11 +12,11 @@ import {
 } from "react-bootstrap";
 
 import { Commands } from "@/shared/api";
-import { CommandsAdminPlatformInfoListParamsEnum } from "@/shared/api/data-contracts";
 import {
   CommandInfo,
   CommandParameterInfo,
-} from "@/shared/api/SignalR/types/signalr-types";
+  CommandsAdminPlatformInfoListParamsEnum,
+} from "@/shared/api/data-contracts";
 import { useSiteColors } from "@/shared/Utils/useSiteColors";
 
 import { CommandsUserPlatformInfoListParamsEnum } from "../../shared/api/data-contracts";
diff --git a/src/pages/CommandsPage/CommandsPage.types.ts b/src/pages/CommandsPage/CommandsPage.types.ts
@@ -1,7 +1,7 @@
 import {
   CommandInfo,
+  CommandInfoAvailablePlatformsEnum,
   CommandParameterInfo,
-  EnumCommandInfoAvailablePlatforms,
 } from "@/shared/api";
 
 export interface CommandExecutionState {
@@ -23,4 +23,4 @@ export interface CommandsState {
   activeTab: "user" | "admin";
 }
 
-export type PlatformType = EnumCommandInfoAvailablePlatforms;
+export type PlatformType = CommandInfoAvailablePlatformsEnum;
diff --git a/src/pages/FramedataPage/CharacterGrid.tsx b/src/pages/FramedataPage/CharacterGrid.tsx
@@ -1,4 +1,5 @@
 import { Alert, Card, Col, Row, Spinner } from "react-bootstrap";
+import { Link } from "react-router-dom";
 
 import { TekkenCharacter } from "@/shared/api/data-contracts";
 
@@ -48,7 +49,12 @@ const CharacterGrid: React.FC<CharacterGridProps> = ({
 
   return (
     <div className={styles.characterGrid}>
-      <h2 className="mb-4">Персонажи Tekken</h2>
+      <div className="d-flex justify-content-between align-items-center mb-4">
+        <h2 className="mb-0">Персонажи Tekken</h2>
+        <Link to="/framedata/pending" className="btn btn-warning">
+          Ожидающие изменения
+        </Link>
+      </div>
       <Row xs={1} sm={2} md={3} lg={4} xl={5} className="g-4">
         {characters.map(character => {
           const charName =
diff --git a/src/pages/FramedataPage/PendingChangesPage.tsx b/src/pages/FramedataPage/PendingChangesPage.tsx
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo

Original file line number	Diff line number	Diff line change
`@@ -295,7 +295,6 @@`
`295`	`295`	`// Исправление для переполнения текста`
`296`	`296`	`.dropdownButton {`
`297`	`297`	`white-space: nowrap;`
`298`		`- overflow: hidden;`
`299`	`298`	`text-overflow: ellipsis;`
`300`	`299`	`max-width: 200px;`
`301`	`300`	`}`