From 3ae327540133bce884e45cc89fb8b3468b7f1992 Mon Sep 17 00:00:00 2001
From: "n.tolstov" <n.tolstov@ai-sale-force.ru>
Date: Sun, 30 Nov 2025 23:29:23 +0300
Subject: [PATCH] feat: Expand `CornerBrackets` color options and make children
 optional, and refine `MatrixRain` animation reference type.

---
 .../components/decorative/CornerBrackets.tsx  | 29 ++++++++++---------
 .../src/components/effects/MatrixRain.tsx     |  2 +-
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/decorative/CornerBrackets.tsx b/frontend/src/components/decorative/CornerBrackets.tsx
index 0fa5076..500b952 100644
--- a/frontend/src/components/decorative/CornerBrackets.tsx
+++ b/frontend/src/components/decorative/CornerBrackets.tsx
@@ -4,16 +4,19 @@ import React from "react";
 import { cn } from "@/lib/utils";
 
 interface CornerBracketsProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
-  color?: "green" | "cyan" | "purple";
+  color?: "green" | "cyan" | "purple" | "pink" | "orange" | "yellow" | string;
   size?: "sm" | "md" | "lg";
 }
 
-const colorStyles = {
-  green: "border-[var(--color-neon-green)]",
-  cyan: "border-[var(--color-neon-cyan)]",
-  purple: "border-[var(--color-neon-purple)]",
+const colorStyles: Record<string, string> = {
+  green: "var(--color-neon-green)",
+  cyan: "var(--color-neon-cyan)",
+  purple: "var(--color-neon-purple)",
+  pink: "var(--color-neon-pink)",
+  orange: "var(--color-neon-orange)",
+  yellow: "var(--color-neon-yellow)",
 };
 
 const sizeStyles = {
@@ -29,6 +32,8 @@ export function CornerBrackets({
   size = "md",
 }: CornerBracketsProps) {
   const { bracket, offset } = sizeStyles[size];
+  // Support both named colors and CSS variable strings
+  const borderColor = colorStyles[color] || color;
 
   return (
     <div className={cn("relative", className)}>
@@ -37,40 +42,36 @@ export function CornerBrackets({
         className={cn(
           "absolute border-t-2 border-l-2 transition-opacity",
           bracket,
-          colorStyles[color],
           "opacity-50 group-hover:opacity-100"
         )}
-        style={{ top: offset, left: offset }}
+        style={{ top: offset, left: offset, borderColor }}
       />
       {/* Top Right */}
       <div
         className={cn(
           "absolute border-t-2 border-r-2 transition-opacity",
           bracket,
-          colorStyles[color],
           "opacity-50 group-hover:opacity-100"
         )}
-        style={{ top: offset, right: offset }}
+        style={{ top: offset, right: offset, borderColor }}
       />
       {/* Bottom Left */}
       <div
         className={cn(
           "absolute border-b-2 border-l-2 transition-opacity",
           bracket,
-          colorStyles[color],
           "opacity-50 group-hover:opacity-100"
         )}
-        style={{ bottom: offset, left: offset }}
+        style={{ bottom: offset, left: offset, borderColor }}
       />
       {/* Bottom Right */}
       <div
         className={cn(
           "absolute border-b-2 border-r-2 transition-opacity",
           bracket,
-          colorStyles[color],
           "opacity-50 group-hover:opacity-100"
         )}
-        style={{ bottom: offset, right: offset }}
+        style={{ bottom: offset, right: offset, borderColor }}
       />
       {children}
     </div>
diff --git a/frontend/src/components/effects/MatrixRain.tsx b/frontend/src/components/effects/MatrixRain.tsx
index e49fe24..25dd68b 100644
--- a/frontend/src/components/effects/MatrixRain.tsx
+++ b/frontend/src/components/effects/MatrixRain.tsx
@@ -38,7 +38,7 @@ export function MatrixRain({
   speed = "normal",
 }: MatrixRainProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const animationRef = useRef<number>();
+  const animationRef = useRef<number | undefined>(undefined);
   const dropsRef = useRef<number[]>([]);
 
   const draw = useCallback(() => {