feat: localize all strings

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -2491,7 +2491,7 @@ function RemoteFunctions(config = {}) {
                                 </div>
                             </div>
                             <div class="phoenix-ribbon-header-right">
-                                <button class="phoenix-ribbon-folder-settings" title="Select image download folder">
+                                <button class="phoenix-ribbon-folder-settings" title="${config.strings.imageGallerySelectDownloadFolder}">
                                     ${ICONS.folderSettings}
                                 </button>
                                 <button class="phoenix-ribbon-close">×</button>
@@ -2500,7 +2500,7 @@ function RemoteFunctions(config = {}) {
                         <div class="phoenix-ribbon-nav left">&#8249;</div>
                         <div class="phoenix-ribbon-strip">
                             <div class="phoenix-ribbon-row phoenix-ribbon-loading">
-                                Loading images...
+                                ${config.strings.imageGalleryLoadingInitial}
                             </div>
                         </div>
                         <div class="phoenix-ribbon-nav right">&#8250;</div>

src/LiveDevelopment/LivePreviewEdit.js

@@ -35,6 +35,8 @@ define(function (require, exports, module) {
     const Dialogs = require("widgets/Dialogs");
     const StateManager = require("preferences/StateManager");
     const ProDialogs = require("services/pro-dialogs");
+    const Mustache = require("thirdparty/mustache/mustache");
+    const Strings = require("strings");
     const ImageFolderDialogTemplate = require("text!htmlContent/image-folder-dialog.html");
 
     // state manager key, to save the download location of the image
@@ -1022,7 +1024,10 @@ define(function (require, exports, module) {
 
         // show the dialog with a text box to select a folder
         // dialog html is written in 'image-folder-dialog.html'
-        const dialog = Dialogs.showModalDialogUsingTemplate(ImageFolderDialogTemplate, false);
+        const templateVars = {
+            Strings: Strings
+        };
+        const dialog = Dialogs.showModalDialogUsingTemplate(Mustache.render(ImageFolderDialogTemplate, templateVars), false);
         const $dlg = dialog.getElement();
         const $input = $dlg.find("#folder-path-input");
         const $suggestions = $dlg.find("#folder-suggestions");

src/LiveDevelopment/main.js

@@ -83,7 +83,7 @@ define(function main(require, exports, module) {
             aiPromptPlaceholder: Strings.LIVE_DEV_AI_PROMPT_PLACEHOLDER,
             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,
+            imageGallerySelectDownloadFolder: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_DOWNLOAD_FOLDER,
             imageGallerySearchPlaceholder: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER,
             imageGallerySearchButton: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_BUTTON,
             imageGalleryLoadingInitial: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL,

src/htmlContent/image-folder-dialog.html

@@ -1,12 +1,12 @@
 <div class="image-folder-dialog template modal">
     <div class="modal-header">
-        <h1 class="dialog-title">Select Folder to Save Image</h1>
+        <h1 class="dialog-title">{{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_TITLE}}</h1>
     </div>
     <div class="modal-body">
-        <p>Choose where to download the image:</p>
+        <p>{{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_DESCRIPTION}}</p>
         <input type="text"
                id="folder-path-input"
-               placeholder="Type folder path (e.g., assets/images/)"
+               placeholder="{{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_PLACEHOLDER}}"
                value=""
                autocomplete="off"
                spellcheck="false">
@@ -15,18 +15,18 @@ <h1 class="dialog-title">Select Folder to Save Image</h1>
         <div id="folder-suggestions"></div>
 
         <p class="folder-help-text">
-            💡 Type folder path or leave empty to download in project root
+            {{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_HELP}}
         </p>
 
         <div class="remember-folder-container">
             <label>
                 <input type="checkbox" id="remember-folder-checkbox" checked>
-                <span>Don't ask again for this project</span>
+                <span>{{Strings.LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER}}</span>
             </label>
         </div>
     </div>
     <div class="modal-footer">
-        <button class="dialog-button btn" data-button-id="cancel">Cancel</button>
-        <button class="dialog-button btn primary" data-button-id="ok">OK</button>
+        <button class="dialog-button btn" data-button-id="cancel">{{Strings.CANCEL}}</button>
+        <button class="dialog-button btn primary" data-button-id="ok">{{Strings.OK}}</button>
     </div>
 </div>

src/nls/root/strings.js

@@ -192,13 +192,18 @@ define({
     "LIVE_DEV_MORE_OPTIONS_IMAGE_GALLERY": "Image Gallery",
     "LIVE_DEV_IMAGE_GALLERY_USE_IMAGE": "Use this image",
     "LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER": "Select image from computer",
-    "LIVE_DEV_IMAGE_GALLERY_CHOOSE_FOLDER": "Choose download folder",
+    "LIVE_DEV_IMAGE_GALLERY_SELECT_DOWNLOAD_FOLDER": "Choose image 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_IMAGE_FOLDER_DIALOG_TITLE": "Select Folder to Save Image",
+    "LIVE_DEV_IMAGE_FOLDER_DIALOG_DESCRIPTION": "Choose where to download the image:",
+    "LIVE_DEV_IMAGE_FOLDER_DIALOG_PLACEHOLDER": "Type folder path (e.g., assets/images/)",
+    "LIVE_DEV_IMAGE_FOLDER_DIALOG_HELP": "💡 Type folder path or leave empty to download in project root",
+    "LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER": "Don't ask again for this project",
     "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",