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

@@ -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'];

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 };