feat: deprecated extensions like emment installed we show a dialog once that its deprecated

Author: abose

src/htmlContent/deprecated-extensions-dialog.html

@@ -0,0 +1,28 @@
+<div class="deprecated-extensions-dialog modal">
+    <div class="modal-header">
+        <h1 class="dialog-title">{{Strings.DEPRECATED_EXTENSIONS_TITLE}}</h1>
+    </div>
+    <div class="modal-body">
+        <p class="dialog-message">{{Strings.DEPRECATED_EXTENSIONS_MESSAGE}}</p>
+
+        <div class="deprecated-extensions-list" style="margin-top: 16px;">
+            {{#extensions}}
+            <div class="deprecated-extension-item" style="margin-bottom: 12px; padding: 12px; border: 1px solid var(--border-color, #ddd); border-radius: 4px;">
+                <div class="extension-info" style="margin-bottom: 6px;">
+                    <i class="fa fa-exclamation-triangle" style="color: #f5a623; margin-right: 8px;"></i>
+                    <strong>{{id}}</strong>
+                </div>
+                <div class="extension-alternative" style="margin-left: 24px;">
+                    <a href="{{docUrl}}" target="_blank" rel="noopener">
+                        {{Strings.DEPRECATED_EXTENSIONS_LEARN_MORE}}
+                        <i class="fa fa-external-link" style="margin-left: 4px; font-size: 11px;"></i>
+                    </a>
+                </div>
+            </div>
+            {{/extensions}}
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button class="dialog-button btn primary" data-button-id="ok">{{Strings.OK}}</button>
+    </div>
+</div>

src/nls/root/strings.js

@@ -1723,6 +1723,10 @@ define({
     "LICENSE_ACTIVATE_FAIL_APPLY": "'Failed to apply license to device'",
     "LICENSE_ENTER_KEY": "Please enter a license key",
     "LICENSE_REAPPLY_TO_DEVICE": "Already activated? Reapply system-wide",
+    // Deprecated Extensions Dialog
+    "DEPRECATED_EXTENSIONS_TITLE": "Deprecated Extensions Detected",
+    "DEPRECATED_EXTENSIONS_MESSAGE": "The following installed extensions are now natively supported by Phoenix and can be safely removed:",
+    "DEPRECATED_EXTENSIONS_LEARN_MORE": "Learn more about the native feature",
     // AI CONTROL
     "AI_LOGIN_DIALOG_TITLE": "Sign In to Use AI Edits",
     "AI_LOGIN_DIALOG_MESSAGE": "Please log in to use AI-powered edits",

src/utils/ExtensionLoader.js

@@ -54,11 +54,19 @@ define(function (require, exports, module) {
         UrlParams      = require("utils/UrlParams").UrlParams,
         NodeUtils = require("utils/NodeUtils"),
         PathUtils      = require("thirdparty/path-utils/path-utils"),
-        DefaultExtensions = JSON.parse(require("text!extensions/default/DefaultExtensions.json"));
+        DefaultExtensions = JSON.parse(require("text!extensions/default/DefaultExtensions.json")),
+        Dialogs        = require("widgets/Dialogs"),
+        PreferencesManager = require("preferences/PreferencesManager"),
+        Mustache       = require("thirdparty/mustache/mustache"),
+        Strings        = require("strings"),
+        DeprecatedExtensionsTemplate = require("text!htmlContent/deprecated-extensions-dialog.html");
 
     // takedown/dont load extensions that are compromised at app start - start
     const EXTENSION_TAKEDOWN_LOCALSTORAGE_KEY = "PH_EXTENSION_TAKEDOWN_LIST";
 
+    // deprecated extensions dialog state key
+    const STATE_DEPRECATED_EXTENSIONS_DIALOG_SHOWN = "deprecatedExtensionsDialogShown";
+
     function _getTakedownListLS() {
         try{
             let list = localStorage.getItem(EXTENSION_TAKEDOWN_LOCALSTORAGE_KEY);
@@ -1018,6 +1026,8 @@ define(function (require, exports, module) {
 
         promise.always(function () {
             _init = true;
+            // Check for deprecated extensions after all extensions have loaded
+            _checkAndShowDeprecatedExtensionsDialog();
         });
 
         return promise;
@@ -1032,6 +1042,55 @@ define(function (require, exports, module) {
         return takedownExtensionList.has(extensionID);
     }
 
+    /**
+     * Check if any deprecated extensions are installed and show a dialog once
+     * @private
+     */
+    function _checkAndShowDeprecatedExtensionsDialog() {
+        // Check if we've already shown the dialog
+        const dialogShown = PreferencesManager.stateManager.get(STATE_DEPRECATED_EXTENSIONS_DIALOG_SHOWN);
+        if (dialogShown) {
+            return;
+        }
+
+        // Get deprecated extensions config
+        const deprecatedExtensionsConfig = DefaultExtensions.deprecatedExtensions;
+        if (!deprecatedExtensionsConfig || !deprecatedExtensionsConfig.extensionIDsAndDocs) {
+            return;
+        }
+
+        const deprecatedExtensionIDs = deprecatedExtensionsConfig.extensionIDsAndDocs;
+
+        // Check which deprecated extensions are loaded
+        const deprecatedExtensionsFound = [];
+        for (const extensionID of loadedExtensionIDs) {
+            if (deprecatedExtensionIDs[extensionID]) {
+                deprecatedExtensionsFound.push({
+                    id: extensionID,
+                    docUrl: deprecatedExtensionIDs[extensionID]
+                });
+            }
+        }
+
+        // If no deprecated extensions found, mark dialog as shown and return
+        if (deprecatedExtensionsFound.length === 0) {
+            PreferencesManager.stateManager.set(STATE_DEPRECATED_EXTENSIONS_DIALOG_SHOWN, true);
+            return;
+        }
+
+        // Show the dialog
+        const templateVars = {
+            extensions: deprecatedExtensionsFound,
+            Strings: Strings
+        };
+
+        const $template = $(Mustache.render(DeprecatedExtensionsTemplate, templateVars));
+        Dialogs.showModalDialogUsingTemplate($template);
+
+        // Mark dialog as shown
+        PreferencesManager.stateManager.set(STATE_DEPRECATED_EXTENSIONS_DIALOG_SHOWN, true);
+    }
+
 
     EventDispatcher.makeEventDispatcher(exports);