feat: localize all the strings used in image ribbon gallery

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -2288,7 +2288,7 @@ function RemoteFunctions(config = {}) {
                             <div class="phoenix-ribbon-header-left">
                                 <div class="phoenix-ribbon-search">
                                     <input type="text" placeholder="${config.strings.imageGallerySearchPlaceholder}" />
-                                    <button class="phoenix-ribbon-search-btn">Search</button>
+                                    <button class="phoenix-ribbon-search-btn">${config.strings.imageGallerySearchButton}</button>
                                 </div>
                                 <div class="phoenix-ribbon-select">
                                     <button class="phoenix-select-image-btn" title="${config.strings.imageGallerySelectFromComputer}">
@@ -2381,7 +2381,7 @@ function RemoteFunctions(config = {}) {
                         this._updateSearchInput(searchQuery);
                         this._updateCache(searchQuery, data, append);
                     } else if (!append) {
-                        this._showError('No images found');
+                        this._showError(config.strings.imageGalleryNoImages);
                     }
 
                     if (append) {
@@ -2392,7 +2392,7 @@ function RemoteFunctions(config = {}) {
                 .catch(error => {
                     console.error('Failed to fetch images:', error);
                     if (!append) {
-                        this._showError('Failed to load images');
+                        this._showError(config.strings.imageGalleryLoadError);
                     } else {
                         this._isLoadingMore = false;
                         this._hideLoadingMore();
@@ -2540,7 +2540,7 @@ function RemoteFunctions(config = {}) {
             const rowElement = this._shadow.querySelector('.phoenix-ribbon-row');
             if (!rowElement) { return; }
 
-            rowElement.innerHTML = 'Loading images...';
+            rowElement.innerHTML = config.strings.imageGalleryLoadingInitial;
             rowElement.className = 'phoenix-ribbon-row phoenix-ribbon-loading';
         },
 
@@ -2551,7 +2551,7 @@ function RemoteFunctions(config = {}) {
             // when loading more images we need to show the message at the end of the image ribbon
             const loadingIndicator = window.document.createElement('div');
             loadingIndicator.className = 'phoenix-loading-more';
-            loadingIndicator.textContent = 'Loading...';
+            loadingIndicator.textContent = config.strings.imageGalleryLoadingMore;
             rowElement.appendChild(loadingIndicator);
         },
 

src/LiveDevelopment/main.js

@@ -84,7 +84,12 @@ define(function main(require, exports, module) {
             imageGalleryUseImage: Strings.LIVE_DEV_IMAGE_GALLERY_USE_IMAGE,
             imageGallerySelectFromComputer: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER,
             imageGalleryChooseFolder: Strings.LIVE_DEV_IMAGE_GALLERY_CHOOSE_FOLDER,
-            imageGallerySearchPlaceholder: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER
+            imageGallerySearchPlaceholder: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER,
+            imageGallerySearchButton: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_BUTTON,
+            imageGalleryLoadingInitial: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL,
+            imageGalleryLoadingMore: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_MORE,
+            imageGalleryNoImages: Strings.LIVE_DEV_IMAGE_GALLERY_NO_IMAGES,
+            imageGalleryLoadError: Strings.LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR
         }
     };
     // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.

src/nls/root/strings.js

@@ -193,6 +193,11 @@ define({
     "LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER": "Select image from computer",
     "LIVE_DEV_IMAGE_GALLERY_CHOOSE_FOLDER": "Choose download folder",
     "LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER": "Search images...",
+    "LIVE_DEV_IMAGE_GALLERY_SEARCH_BUTTON": "Search",
+    "LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL": "Loading images...",
+    "LIVE_DEV_IMAGE_GALLERY_LOADING_MORE": "Loading...",
+    "LIVE_DEV_IMAGE_GALLERY_NO_IMAGES": "No images found",
+    "LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR": "Failed to load images",
     "LIVE_DEV_AI_PROMPT_PLACEHOLDER": "Ask Phoenix AI to modify this element...",
     "LIVE_PREVIEW_CUSTOM_SERVER_BANNER": "Getting preview from your custom server {0}",
     "LIVE_PREVIEW_MODE_PREVIEW": "Preview Mode",