From 91afbbf3c629defcdac0d3fd6d42d31e4d1610b4 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 5 Feb 2026 12:02:32 +0300
Subject: [PATCH] fix: resolve RemnaWave SVG icons and icon colors on
 connection page

SVG library entries from RemnaWave API are plain strings, not objects
with svgString property. Also map named colors (violet, cyan, teal, etc.)
to hex values for correct icon background rendering.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/pages/Connection.tsx | 42 +++++++++++++++++++---------------------
 src/types/index.ts       |  2 +-
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/pages/Connection.tsx b/src/pages/Connection.tsx
index 4abd76e..e7554da 100644
--- a/src/pages/Connection.tsx
+++ b/src/pages/Connection.tsx
@@ -364,31 +364,15 @@ export default function Connection() {
 
   // Get sanitized SVG HTML
   const getSvgHtml = (svgKey: string | undefined): string => {
-    if (!svgKey || !appConfig?.svgLibrary?.[svgKey]?.svgString) return '';
-    return DOMPurify.sanitize(appConfig.svgLibrary[svgKey].svgString, {
+    if (!svgKey || !appConfig?.svgLibrary?.[svgKey]) return '';
+    const entry = appConfig.svgLibrary[svgKey];
+    const raw = typeof entry === 'string' ? entry : entry.svgString;
+    if (!raw) return '';
+    return DOMPurify.sanitize(raw, {
       USE_PROFILES: { svg: true, svgFilters: true },
     });
   };
 
-  // DEBUG: log app data to check svgIconKey presence
-  if (isRemnawave && appConfig?.platforms) {
-    const firstPlatformKey = Object.keys(appConfig.platforms)[0];
-    if (firstPlatformKey) {
-      const pd = appConfig.platforms[firstPlatformKey];
-      if (pd && !Array.isArray(pd) && 'apps' in pd) {
-        console.log(
-          '[DEBUG] RemnaWave apps:',
-          pd.apps.map((a: RemnawaveAppClient) => ({
-            name: a.name,
-            svgIconKey: a.svgIconKey,
-            keys: Object.keys(a),
-          })),
-        );
-        console.log('[DEBUG] svgLibrary keys:', Object.keys(appConfig.svgLibrary || {}));
-      }
-    }
-  }
-
   // Loading
   if (isLoading) {
     return (
@@ -556,7 +540,21 @@ export default function Connection() {
           <div className="space-y-4">
             {currentApp.blocks.map((block, blockIdx) => {
               const svgHtml = getSvgHtml(block.svgIconKey);
-              const iconColor = block.svgIconColor || '#8B5CF6';
+              const colorMap: Record<string, string> = {
+                violet: '#8B5CF6',
+                cyan: '#06B6D4',
+                teal: '#14B8A6',
+                red: '#EF4444',
+                blue: '#3B82F6',
+                green: '#22C55E',
+                yellow: '#EAB308',
+                orange: '#F97316',
+                pink: '#EC4899',
+                indigo: '#6366F1',
+                amber: '#F59E0B',
+              };
+              const rawColor = block.svgIconColor || 'violet';
+              const iconColor = colorMap[rawColor] || rawColor;
 
               // Fallback block title from baseTranslations by block index
               const blockTitleFallbackKeys = ['installApp', 'addSubscription', 'connectAndUse'];
diff --git a/src/types/index.ts b/src/types/index.ts
index 858546e..556d81a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -545,7 +545,7 @@ export interface AppConfig {
 
   // RemnaWave format (isRemnawave: true)
   isRemnawave?: boolean;
-  svgLibrary?: Record<string, { svgString: string }>;
+  svgLibrary?: Record<string, string | { svgString: string }>;
   baseTranslations?: Record<string, LocalizedText>;
   baseSettings?: { isShowTutorialButton: boolean; tutorialUrl: string };