feat(mdviewer): show crown icon on edit button for free users

Add a gold crown icon after the "Edit" text to indicate it's a Pro
feature, so free users know before clicking. Pro status is sent from
Phoenix to the md viewer iframe via MDVIEWR_SET_PRO_STATUS message
on iframe ready and on entitlement changes.

Author: abose

src-mdviewer/src/bridge.js

@@ -269,6 +269,9 @@ export function initBridge() {
             case "MDVIEWR_SET_THEME":
                 handleSetTheme(data);
                 break;
+            case "MDVIEWR_SET_PRO_STATUS":
+                setState({ isPro: !!data.isPro });
+                break;
             case "MDVIEWR_SET_EDIT_MODE":
                 handleSetEditMode(data);
                 break;

src-mdviewer/src/components/embedded-toolbar.js

@@ -34,7 +34,8 @@ import {
     Image as ImageIcon,
     Upload,
     Sun,
-    Moon
+    Moon,
+    Crown
 } from "lucide";
 import { on, emit } from "../core/events.js";
 import { getState, setState } from "../core/state.js";
@@ -57,7 +58,7 @@ const _isMacWebKit = /Mac/.test(navigator.platform)
     && !/Chrome|CriOS|Edg|Firefox|FxiOS/.test(navigator.userAgent);
 
 const allIcons = { Bold, Italic, Strikethrough, Underline, Code, Link, List, ListOrdered,
-    ListChecks, Quote, Minus, Table, FileCode, ChevronDown, Type, MoreHorizontal, Pencil, BookOpen, Link2, Link2Off, Printer, Image: ImageIcon, Upload, Sun, Moon };
+    ListChecks, Quote, Minus, Table, FileCode, ChevronDown, Type, MoreHorizontal, Pencil, BookOpen, Link2, Link2Off, Printer, Image: ImageIcon, Upload, Sun, Moon, Crown };
 
 export function initEmbeddedToolbar() {
     toolbar = document.getElementById("toolbar");
@@ -67,6 +68,7 @@ export function initEmbeddedToolbar() {
 
     on("state:editMode", () => render());
     on("state:theme", () => render());
+    on("state:isPro", () => render());
     on("editor:selection-state", updateFormatState);
     on("state:locale", () => render());
 }
@@ -102,9 +104,10 @@ function renderReadMode() {
             <i data-lucide="link-2" class="sync-on-icon"${cursorSyncEnabled ? "" : ' style="display:none"'}></i>
             <i data-lucide="link-2-off" class="sync-off-icon"${cursorSyncEnabled ? ' style="display:none"' : ""}></i>
         </button>
-        <button class="edit-toggle-btn" id="emb-edit-btn" title="${t("toolbar.switch_to_edit") || "Switch to edit mode"}">
+        <button class="edit-toggle-btn${getState().isPro === false ? " pro-locked" : ""}" id="emb-edit-btn" title="${t("toolbar.switch_to_edit") || "Switch to edit mode"}">
             <i data-lucide="pencil"></i>
             <span>${t("toolbar.edit") || "Edit"}</span>
+            ${getState().isPro === false ? '<i data-lucide="crown" class="pro-crown-icon"></i>' : ""}
         </button>
     </div>`;
 

src-mdviewer/src/styles/app.css

@@ -198,6 +198,16 @@ html, body {
   border-color: var(--color-border);
 }
 
+/* Crown icon shown after "Edit" text for free users — indicates a Pro feature */
+.embedded-toolbar .edit-toggle-btn .pro-crown-icon {
+  color: #f0b400;
+  margin-left: 2px;
+}
+.embedded-toolbar .edit-toggle-btn .pro-crown-icon svg {
+  width: 12px;
+  height: 12px;
+}
+
 .embedded-toolbar .format-btn {
   width: 22px;
   height: 22px;

src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js

@@ -455,6 +455,25 @@ define(function (require, exports, module) {
         _sendTheme();
     }
 
+    /**
+     * Push the Pro edit entitlement state to the iframe so it can show/hide
+     * the crown upsell indicator on the Edit button.
+     * @param {boolean} isPro
+     */
+    function sendProStatus(isPro) {
+        if (!_active || !_iframeReady) {
+            return;
+        }
+        const iframeWindow = _getIframeWindow();
+        if (!iframeWindow) {
+            return;
+        }
+        iframeWindow.postMessage({
+            type: "MDVIEWR_SET_PRO_STATUS",
+            isPro: !!isPro
+        }, "*");
+    }
+
     function _sendLocale() {
         if (!_active || !_iframeReady) {
             return;
@@ -1128,5 +1147,6 @@ define(function (require, exports, module) {
     exports.setIframeReadyHandler = setIframeReadyHandler;
     exports.setCursorSyncEnabled = setCursorSyncEnabled;
     exports.sendThemeOverride = sendThemeOverride;
+    exports.sendProStatus = sendProStatus;
     exports.setThemeToggleHandler = function(handler) { _onThemeToggle = handler; };
 });

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -202,6 +202,8 @@ define(function (require, exports, module) {
             isProEditUser = entitlement && entitlement.activated;
             // Sync edit mode with md iframe on entitlement change
             if (_isMdviewrActive && $iframe && $iframe[0] && $iframe[0].contentWindow) {
+                // Push pro status to iframe so it can toggle the crown indicator
+                MarkdownSync.sendProStatus(isProEditUser);
                 if (isProEditUser && !wasProEditUser) {
                     // Just got pro — switch to edit mode
                     $iframe[0].contentWindow.postMessage(
@@ -1572,6 +1574,8 @@ define(function (require, exports, module) {
         // When iframe first loads, send initial edit mode based on entitlement
         MarkdownSync.setIframeReadyHandler(function () {
             _updateLPControlsForMdviewer();
+            // Push pro status so the iframe can show the crown upsell indicator
+            MarkdownSync.sendProStatus(isProEditUser);
             // Pro users default to edit mode on first load
             if (isProEditUser) {
                 MarkdownSync.setEditMode(true);