From caf499a824774fa0cfbb84c76a158872db58f224 Mon Sep 17 00:00:00 2001
From: Boris Kovalskii <36034823+JustYay@users.noreply.github.com>
Date: Thu, 11 Jun 2026 10:07:47 +1000
Subject: [PATCH] fix(backgrounds): legacy config compatibility and locale sync

---
 src/components/ui/backgrounds/aurora-background.tsx | 10 +++++++---
 src/components/ui/backgrounds/background-beams.tsx  | 11 +++++++----
 src/components/ui/backgrounds/background-boxes.tsx  |  8 ++++++--
 src/components/ui/backgrounds/registry.ts           |  2 +-
 src/locales/fa.json                                 |  6 ++++++
 src/locales/zh.json                                 |  6 ++++++
 6 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/ui/backgrounds/aurora-background.tsx b/src/components/ui/backgrounds/aurora-background.tsx
index e689c4e..afea0e1 100644
--- a/src/components/ui/backgrounds/aurora-background.tsx
+++ b/src/components/ui/backgrounds/aurora-background.tsx
@@ -15,9 +15,13 @@ const SPEED_DURATIONS: Record<string, string> = {
 };
 
 export default function AuroraBackground({ settings }: Props) {
-  const firstColor = sanitizeColor(settings.firstColor, '#3b82f6');
-  const secondColor = sanitizeColor(settings.secondColor, '#a5b4fc');
-  const thirdColor = sanitizeColor(settings.thirdColor, '#93c5fd');
+  const isLegacySeed =
+    settings.firstColor === '#00d2ff' &&
+    settings.secondColor === '#7928ca' &&
+    settings.thirdColor === '#ff0080';
+  const firstColor = isLegacySeed ? '#3b82f6' : sanitizeColor(settings.firstColor, '#3b82f6');
+  const secondColor = isLegacySeed ? '#a5b4fc' : sanitizeColor(settings.secondColor, '#a5b4fc');
+  const thirdColor = isLegacySeed ? '#93c5fd' : sanitizeColor(settings.thirdColor, '#93c5fd');
   const speed = safeSelect(settings.speed, ['slow', 'normal', 'fast'] as const, 'normal');
   const showRadialGradient = safeBoolean(settings.showRadialGradient, true);
   const paused = useAnimationPause();
diff --git a/src/components/ui/backgrounds/background-beams.tsx b/src/components/ui/backgrounds/background-beams.tsx
index 4846b30..55a035c 100644
--- a/src/components/ui/backgrounds/background-beams.tsx
+++ b/src/components/ui/backgrounds/background-beams.tsx
@@ -102,6 +102,9 @@ function ensureStyles() {
 
 export default React.memo(function BackgroundBeams({ settings }: Props) {
   const paused = useAnimationPause();
+  const uid = React.useId();
+  const beamGradientId = `beamGradient-${uid}`;
+  const radialGradientId = `beamsRadial-${uid}`;
 
   const gradientStart = sanitizeColor(settings.gradientStart, '#18CCFC');
   const gradientMid = sanitizeColor(settings.gradientMid, '#6344F5');
@@ -124,7 +127,7 @@ export default React.memo(function BackgroundBeams({ settings }: Props) {
       >
         <path
           d={bgPath}
-          stroke="url(#paint0_radial_beams)"
+          stroke={`url(#${radialGradientId})`}
           strokeOpacity="0.05"
           strokeWidth="0.5"
         />
@@ -133,7 +136,7 @@ export default React.memo(function BackgroundBeams({ settings }: Props) {
           <path
             key={paramIndex}
             d={path}
-            stroke="url(#beamGradient)"
+            stroke={`url(#${beamGradientId})`}
             strokeWidth="0.5"
             strokeOpacity="0.4"
             pathLength={1}
@@ -147,7 +150,7 @@ export default React.memo(function BackgroundBeams({ settings }: Props) {
         ))}
 
         <defs>
-          <linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <linearGradient id={beamGradientId} x1="0%" y1="0%" x2="100%" y2="100%">
             <stop stopColor={gradientStart} stopOpacity="0" />
             <stop offset="10%" stopColor={gradientStart} />
             <stop offset="50%" stopColor={gradientMid} />
@@ -155,7 +158,7 @@ export default React.memo(function BackgroundBeams({ settings }: Props) {
           </linearGradient>
 
           <radialGradient
-            id="paint0_radial_beams"
+            id={radialGradientId}
             cx="0"
             cy="0"
             r="1"
diff --git a/src/components/ui/backgrounds/background-boxes.tsx b/src/components/ui/backgrounds/background-boxes.tsx
index b500dc2..9e1b939 100644
--- a/src/components/ui/backgrounds/background-boxes.tsx
+++ b/src/components/ui/backgrounds/background-boxes.tsx
@@ -51,8 +51,11 @@ export default React.memo(function BackgroundBoxes({ settings }: Props) {
   const rows = clampNumber(settings.rows, 4, 30, 15);
   const cols = clampNumber(settings.cols, 4, 30, 15);
   const boxColor = sanitizeColor(settings.boxColor, '#818cf8');
-  const lineColor = sanitizeColor(settings.lineColor, 'rgba(51,65,85,0.5)');
-  const multicolor = safeBoolean(settings.multicolor, true);
+  const lineColor = sanitizeColor(settings.lineColor, '#334155');
+  const multicolor =
+    settings.multicolor === undefined
+      ? boxColor === '#818cf8'
+      : safeBoolean(settings.multicolor, true);
 
   const cells = useMemo((): CellData[] => {
     return Array.from({ length: rows * cols }, () => ({
@@ -131,6 +134,7 @@ export default React.memo(function BackgroundBoxes({ settings }: Props) {
         ctx.fillRect(ox + col * cellW, oy + row * cellH, cellW, cellH);
       }
 
+      ctx.globalAlpha = 0.5;
       ctx.strokeStyle = lineColor;
       ctx.lineWidth = 1;
       ctx.beginPath();
diff --git a/src/components/ui/backgrounds/registry.ts b/src/components/ui/backgrounds/registry.ts
index cff1e25..8c91a86 100644
--- a/src/components/ui/backgrounds/registry.ts
+++ b/src/components/ui/backgrounds/registry.ts
@@ -434,7 +434,7 @@ export const backgroundRegistry: BackgroundDefinition[] = [
         key: 'lineColor',
         label: 'admin.backgrounds.lineColor',
         type: 'color',
-        default: 'rgba(51,65,85,0.5)',
+        default: '#334155',
       },
     ],
   },
diff --git a/src/locales/fa.json b/src/locales/fa.json
index c9d4d59..db3d58f 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -1050,6 +1050,12 @@
       "particleColor": "رنگ ذرات",
       "starColor": "رنگ ستاره",
       "trailColor": "رنگ دنباله",
+      "bgStarColor": "رنگ ستاره‌های پس‌زمینه",
+      "pointerColor": "رنگ اشاره‌گر",
+      "beamColor": "رنگ پرتو",
+      "explosionColor": "رنگ انفجار",
+      "multicolor": "حالت چندرنگ",
+      "lineColor": "رنگ خطوط",
       "bgColor": "رنگ پس‌زمینه",
       "fillColor": "رنگ پر کردن",
       "color1": "رنگ ۱",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index f78ac6c..9ba385f 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -1050,6 +1050,12 @@
       "particleColor": "粒子颜色",
       "starColor": "星星颜色",
       "trailColor": "尾迹颜色",
+      "bgStarColor": "背景星星颜色",
+      "pointerColor": "指针颜色",
+      "beamColor": "光束颜色",
+      "explosionColor": "爆炸颜色",
+      "multicolor": "多彩模式",
+      "lineColor": "线条颜色",
       "bgColor": "背景颜色",
       "fillColor": "填充颜色",
       "color1": "颜色1",