allow to import strings to display to the ui from the strings keys file

Author: Eaglenait

src/app/components/header-bar.component.html

@@ -239,11 +239,27 @@ <h4>Import UI Code</h4>
           <textarea
             id="import-source"
             class="import-textarea"
-            rows="14"
+            rows="10"
             [value]="importSource()"
             (input)="onImportSourceChange($event)"
             placeholder="const widget = modlib.ParseUI(...);"
           ></textarea>
+          
+          <div class="import-strings-section">
+            <label for="import-strings">
+              Paste the strings JSON file (optional):
+              <span class="import-strings-hint">This will populate text elements with localized strings</span>
+            </label>
+            <textarea
+              id="import-strings"
+              class="import-textarea import-textarea--strings"
+              rows="6"
+              [value]="importStrings()"
+              (input)="onImportStringsChange($event)"
+              placeholder='{"ElementName": "Display Text", ...}'
+            ></textarea>
+          </div>
+
           <p class="import-help">By default, existing elements are replaced. Enable append to keep the current layout. Your project is auto-saved before import.</p>
           <div class="import-mode-toggle">
             <label class="mode-switch">

src/app/components/header-bar.component.ts

@@ -13,7 +13,7 @@ type BannerMessage = { type: 'success' | 'error'; text: string };
   styleUrl: './header-bar.component.scss'
 })
 export class HeaderBarComponent implements AfterViewInit {
-  readonly version = 'V1.5.2';
+  readonly version = 'V1.5.3';
   readonly title = 'UI Builder';
   readonly defaultBackgroundImage: CanvasBackgroundAsset;
 
@@ -31,6 +31,7 @@ export class HeaderBarComponent implements AfterViewInit {
   readonly showContainerLabels = computed(() => this.uiBuilder.showContainerLabels());
   readonly importModalOpen = signal(false);
   readonly importSource = signal('');
+  readonly importStrings = signal('');
   readonly importError = signal<string | null>(null);
   readonly importMode = signal<'replace' | 'append'>('replace');
   readonly bannerMessage = signal<BannerMessage | null>(null);
@@ -177,6 +178,7 @@ export class HeaderBarComponent implements AfterViewInit {
 
   openImportModal() {
     this.importSource.set('');
+    this.importStrings.set('');
     this.importError.set(null);
     this.importMode.set('replace');
     this.importModalOpen.set(true);
@@ -185,6 +187,7 @@ export class HeaderBarComponent implements AfterViewInit {
   closeImportModal() {
     this.importModalOpen.set(false);
     this.importSource.set('');
+    this.importStrings.set('');
     this.importError.set(null);
     this.importMode.set('replace');
   }
@@ -197,6 +200,14 @@ export class HeaderBarComponent implements AfterViewInit {
     }
   }
 
+  onImportStringsChange(event: Event) {
+    const value = (event.target as HTMLTextAreaElement | null)?.value ?? '';
+    this.importStrings.set(value);
+    if (this.importError()) {
+      this.importError.set(null);
+    }
+  }
+
   setImportMode(event: Event) {
     const target = event.target as HTMLInputElement | null;
     if (!target) {
@@ -214,9 +225,10 @@ export class HeaderBarComponent implements AfterViewInit {
     }
 
     const mode = this.importMode();
+    const stringsJson = this.importStrings().trim();
 
     try {
-      const result = this.uiBuilder.importFromTypescript(source, { mode });
+      const result = this.uiBuilder.importFromTypescript(source, { mode, stringsJson: stringsJson || undefined });
       if (!result.success) {
         this.importError.set(result.error ?? 'Import failed.');
         this.showBannerMessage(result.error ?? 'Import failed.', 'error', false);
@@ -232,7 +244,10 @@ export class HeaderBarComponent implements AfterViewInit {
           ? 'No new elements detected.'
           : 'UI cleared. No elements detected in snippet.'
         : `${verb} ${count} root element${suffix} from script.`;
-      this.showBannerMessage(details, 'success');
+      
+      // Add info about strings if they were imported
+      const stringsInfo = stringsJson ? ' Text strings applied.' : '';
+      this.showBannerMessage(details + stringsInfo, 'success');
     } catch (error) {
       console.error('Failed to import UI:', error);
       this.importError.set('Unexpected error while importing. Please verify the snippet and try again.');

src/app/services/ui-builder.service.ts

@@ -1745,7 +1745,7 @@ export class UiBuilderService {
 
   importFromTypescript(
     source: string,
-    options?: { mode?: 'replace' | 'append' }
+    options?: { mode?: 'replace' | 'append'; stringsJson?: string }
   ): { success: boolean; importedCount: number; error?: string } {
     const text = typeof source === 'string' ? source : '';
     if (!text.trim()) {
@@ -1776,6 +1776,11 @@ export class UiBuilderService {
         this._elements.set(restored);
       }
 
+      // Apply strings if provided
+      if (options?.stringsJson) {
+        this.importStringsJson(options.stringsJson);
+      }
+
       this.clearSelection();
 
       return { success: true, importedCount: restored.length };
@@ -1785,6 +1790,72 @@ export class UiBuilderService {
     }
   }
 
+  importStringsJson(stringsJson: string): { success: boolean; appliedCount: number; error?: string } {
+    const text = typeof stringsJson === 'string' ? stringsJson.trim() : '';
+    if (!text) {
+      return { success: true, appliedCount: 0 };
+    }
+
+    try {
+      const strings = JSON.parse(text);
+      if (!strings || typeof strings !== 'object' || Array.isArray(strings)) {
+        return { success: false, appliedCount: 0, error: 'Invalid strings JSON format.' };
+      }
+
+      let appliedCount = 0;
+
+      // Apply strings to matching elements by name or ID
+      this._elements.update(elements => {
+        return this.applyStringsToElements(elements, strings, (count) => {
+          appliedCount += count;
+        });
+      });
+
+      return { success: true, appliedCount };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to parse strings JSON.';
+      return { success: false, appliedCount: 0, error: message };
+    }
+  }
+
+  private applyStringsToElements(
+    elements: UIElement[],
+    strings: Record<string, string>,
+    onApplied: (count: number) => void
+  ): UIElement[] {
+    return elements.map(element => {
+      let updated = element;
+
+      // Check if this element has a matching string by name or ID
+      if (element.type === 'Text') {
+        const key = element.name || element.id;
+        if (key in strings) {
+          const stringValue = strings[key];
+          if (typeof stringValue === 'string' && stringValue.trim().length > 0) {
+            updated = {
+              ...element,
+              textLabel: stringValue,
+            };
+            onApplied(1);
+          }
+        }
+      }
+
+      // Recursively apply to children
+      if (element.children?.length) {
+        const updatedChildren = this.applyStringsToElements(element.children, strings, onApplied);
+        if (updatedChildren !== element.children) {
+          updated = {
+            ...updated,
+            children: updatedChildren,
+          };
+        }
+      }
+
+      return updated;
+    });
+  }
+
   // Clear all elements
   clear(): void {
     this._elements.set([]);

src/styles.scss

@@ -111,12 +111,38 @@ html, body {
   min-height: 220px;
 }
 
+.import-textarea--strings {
+  min-height: 140px;
+}
+
 .import-textarea:focus {
   outline: none;
   border-color: #4a9eff;
   box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.3);
 }
 
+.import-strings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 8px;
+  margin-top: 12px;
+  border-top: 1px solid #2a2a2a;
+}
+
+.import-strings-section label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.import-strings-hint {
+  font-size: 11px;
+  color: #6b7280;
+  font-weight: 400;
+  letter-spacing: 0.2px;
+}
+
 .import-help {
   font-size: 12px;
   color: #9ca3af;