feat: добавить компонент ElectricBorder с анимацией и стилями

Author: RXDCODX

src/components/OBS_Components/ChatVertical/Message.module.scss

@@ -7,9 +7,9 @@
 }
 
 .container {
-  display: inline;
+  display: inline-flex;
   flex-direction: row; // меняем на row для горизонтального расположения
-  align-items: center; // выравниваем по центру
+  align-items: center;
   gap: 8px;
   min-height: 60px;
   border-radius: 12px;
@@ -18,6 +18,10 @@
   box-sizing: border-box;
 }
 
+.containerLargeMessage {
+  align-items: flex-start;
+}
+
 .userInfo {
   display: inline-flex;
   flex-direction: row;
@@ -27,6 +31,17 @@
   padding: 0 8px;
   border-radius: 12px;
   width: fit-content;
+  flex-shrink: 0;
+
+  .badges {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    gap: 4px;
+    flex-shrink: 0;
+  }
 
   // Бейджи теперь напрямую в userInfo
   img {
@@ -36,16 +51,21 @@
   }
 }
 
+.userInfoLargeMessage {
+  margin-top: 12px;
+}
+
 .nickname {
   font-weight: bold;
   color: white;
   font-size: 2em;
+  line-height: 1;
   white-space: nowrap;
   flex-shrink: 0;
 }
 
 .message {
-  display: inline;
+  display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 4px;
@@ -56,13 +76,19 @@
   width: fit-content; // сообщение по ширине контента
   max-width: 100%; // ограничиваем ширину
   min-width: 0;
+  line-height: 1;
+  flex: 1 1 auto;
 
   & * {
     display: inline !important;
     backdrop-filter: none !important;
   }
 }
 
+.messageLargeMessage {
+  align-items: flex-start;
+}
+
 .linkStub {
   color: #39ff14;
   text-decoration: underline;

src/components/OBS_Components/ChatVertical/Message.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from "react";
-import ElectricBorder from "react-bits/src/content/Animations/ElectricBorder/ElectricBorder";
 import GradientText from "react-bits/src/ts-default/TextAnimations/GradientText/GradientText";
 
 import catisaVideo from "@/assets/catisa.mp4";
 import { ChatMessage } from "@/shared/api";
+import ElectricBorder from "@/shared/components/ElectricBorderLegacy";
 import useTwitchStore from "@/shared/twitchStore/twitchStore";
 import { parseContent, replaceBadges, replaceEmotes } from "@/shared/Utils";
 
@@ -33,8 +33,10 @@ export function Message({ message, onRemove }: Props) {
   const parser = useTwitchStore(state => state.parser);
   const parserToLink = useTwitchStore(state => state.parseToLink);
   const [parts] = useState(() => parseContent(message.message));
+  const [isMultilineMessage, setIsMultilineMessage] = useState(false);
   const roleColor = getRoleColor(message);
   const msgRef = useRef<HTMLDivElement>(null);
+  const messageContentRef = useRef<HTMLDivElement>(null);
 
   // Появление/исчезновение управляется фреймером (в родителе)
 
@@ -49,6 +51,35 @@ export function Message({ message, onRemove }: Props) {
     return () => clearTimeout(timer);
   }, [onRemove, message]);
 
+  useEffect(() => {
+    const messageElement = messageContentRef.current;
+    if (!messageElement) {
+      return;
+    }
+
+    const updateMultilineState = () => {
+      const computedStyles = window.getComputedStyle(messageElement);
+      const parsedLineHeight = Number.parseFloat(computedStyles.lineHeight);
+      const parsedFontSize = Number.parseFloat(computedStyles.fontSize);
+      const lineHeight = Number.isFinite(parsedLineHeight)
+        ? parsedLineHeight
+        : (Number.isFinite(parsedFontSize) ? parsedFontSize : 16) * 1.2;
+      const messageHeight = messageElement.getBoundingClientRect().height;
+      const hasMultipleTextLines =
+        !isCatisa && messageHeight > lineHeight * 1.6;
+      setIsMultilineMessage(hasMultipleTextLines);
+    };
+
+    updateMultilineState();
+
+    const resizeObserver = new ResizeObserver(updateMultilineState);
+    resizeObserver.observe(messageElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isCatisa, message.message]);
+
   return (
     <>
       <div className={styles.wrapper}>
@@ -59,9 +90,12 @@ export function Message({ message, onRemove }: Props) {
           speed={1.2}
         >
           <div style={{ display: "block", padding: "3px 15px" }}>
-            <div ref={msgRef} className={styles.container}>
+            <div
+              ref={msgRef}
+              className={`${styles.container} ${isMultilineMessage ? styles.containerLargeMessage : ""}`}
+            >
               <div
-                className={styles.userInfo}
+                className={`${styles.userInfo} ${isMultilineMessage ? styles.userInfoLargeMessage : ""}`}
                 style={{ backgroundColor: roleColor ?? "transparent" }}
               >
                 <div className={styles.badges}>
@@ -76,7 +110,10 @@ export function Message({ message, onRemove }: Props) {
                   {message.displayName}
                 </div>
               </div>
-              <div className={styles.message}>
+              <div
+                ref={messageContentRef}
+                className={`${styles.message} ${isMultilineMessage ? styles.messageLargeMessage : ""}`}
+              >
                 {isCatisa ? (
                   <video
                     src={catisaVideo}

src/components/OBS_Components/Credits/Credits.tsx

@@ -23,7 +23,7 @@ import styles from "./Credits.module.scss";
 
 // ОПТИМИЗАЦИЯ: Lazy loading для тяжелых анимаций - загружаем только когда нужно
 const ElectricBorder = lazy(
-  () => import("./ElectricBorderLegacy/ElectricBorder")
+  () => import("@/shared/components/ElectricBorderLegacy")
 );
 const Aurora = lazy(
   () => import("react-bits/src/ts-default/Backgrounds/Aurora/Aurora")

…/ElectricBorderLegacy/ElectricBorder.css …/ElectricBorderLegacy/ElectricBorder.csssrc/components/OBS_Components/Credits/ElectricBorderLegacy/ElectricBorder.css renamed to src/shared/components/ElectricBorderLegacy/ElectricBorder.css src/components/OBS_Components/Credits/ElectricBorderLegacy/ElectricBorder.css renamed to src/shared/components/ElectricBorderLegacy/ElectricBorder.css

@@ -72,4 +72,4 @@
     transparent,
     var(--electric-border-color)
   );
-}
+}

…/ElectricBorderLegacy/ElectricBorder.tsx …/ElectricBorderLegacy/ElectricBorder.tsxsrc/components/OBS_Components/Credits/ElectricBorderLegacy/ElectricBorder.tsx renamed to src/shared/components/ElectricBorderLegacy/ElectricBorder.tsx src/components/OBS_Components/Credits/ElectricBorderLegacy/ElectricBorder.tsx renamed to src/shared/components/ElectricBorderLegacy/ElectricBorder.tsx

@@ -0,0 +1 @@
+export { default } from "./ElectricBorder";