chore: phoenix pro branding changes

abose · abose · commit 6f8272d3e262 · 2025-09-01T13:11:25.000+05:30
diff --git a/src/assets/new-project/assets/css/responsive.css b/src/assets/new-project/assets/css/responsive.css
@@ -36,7 +36,7 @@
         width: 100%;
     }
 
-    .editor-name h4 {
+    .editor-name h4, .editor-name h4 span {
         font-size: 22px;
     }
 
@@ -79,21 +79,21 @@
         margin-left: 0px;
         width: 48%;
     }
-  
+
     .project-content-right {
         width: 48%;
 
     }
-    
+
     .website-detail input {
         width: 242px;
         height: 42px;
     }
-    
+
     #noProjectIframe {
         width: 267px;
     }
-    
+
 }
 
 @media (max-width: 650px) {
diff --git a/src/assets/new-project/assets/js/code-editor.js b/src/assets/new-project/assets/js/code-editor.js
@@ -183,6 +183,36 @@ function _openURLInTauri(url) {
     }
 }
 
+function _updateProBranding() {
+    try {
+        const $freeTitle = $('.phoenix-free-title');
+        const $proTitle = $('.phoenix-pro-title');
+        const $proTitleSpan = $('.pro-plan-name');
+
+        if (!$freeTitle.length || !$proTitle.length || !$proTitleSpan.length) {
+            console.warn('Pro branding elements not found');
+            return;
+        }
+
+        // Get plan info from window.top.Phoenix.pro.plan
+        const planInfo = window.top.Phoenix && window.top.Phoenix.pro && window.top.Phoenix.pro.plan;
+
+        if (planInfo && planInfo.paidSubscriber) {
+            // Hide free title, show pro title
+            $freeTitle.addClass('forced-hidden');
+            $proTitle.removeClass('forced-hidden');
+            // Update plan name
+            $proTitleSpan.text(planInfo.name || 'Phoenix Pro');
+        } else {
+            // Show free title, hide pro title
+            $freeTitle.removeClass('forced-hidden');
+            $proTitle.addClass('forced-hidden');
+        }
+    } catch (error) {
+        console.error('Error updating pro branding:', error);
+    }
+}
+
 function initCodeEditor() {
     document.getElementById("openFolderBtn").onclick = function() {
         Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "main.Click", "open-folder");
@@ -252,4 +282,5 @@ function initCodeEditor() {
     _showFirstTimeExperience();
     $("body").append($(`<script async defer src="https://buttons.github.io/buttons.js"></script>`));
     _attachSettingBtnEventListeners();
+    _updateProBranding();
 }
diff --git a/src/assets/new-project/code-editor.html b/src/assets/new-project/code-editor.html
@@ -15,6 +15,22 @@
     <script src="../../thirdparty/floating-ui.core.umd.min.js"></script>
     <script src="../../thirdparty/floating-ui.dom.umd.min.js"></script>
     <script src="assets/js/notification-ui.js"></script>
+    <style>
+        .phoenix-pro-title {
+            background: linear-gradient(
+                    45deg,
+                    #ff8c42,   /* deep orange */
+                    #ffa500,   /* bright orange */
+                    #ffcc70,   /* golden yellow */
+                    #ffd700    /* rich gold */
+            );
+            background-clip: text;
+            -webkit-background-clip: text; /* Chrome, Safari */
+            color: transparent;            /* works in Firefox */
+            -webkit-text-fill-color: transparent; /* Chrome, Safari */
+            display: inline-block;
+        }
+    </style>
 </head>
 <body id="top" onload="init(); initCodeEditor();">
 <div class="code-editor-card">
@@ -24,7 +40,8 @@
                 <img src="images/logo.png" alt="image"/>
             </div>
             <div class="editor-name">
-                <h4 class="localize">{{APP_TITLE}}</h4>
+                <h4 class="localize phoenix-free-title">{{APP_TITLE}}</h4>
+                <h4 class="phoenix-pro-title forced-hidden"><a href="https://account.phcode.dev" target="_blank" rel="noopener" class="phoenix-pro"><span class="pro-plan-name">Phoenix Pro</span><i class="fa-solid fa-feather orange-gold" style="margin-left: 4px;"></i></a></h4>
                 <!-- Place this tag where you want the button to render. -->
                 <div style="display: flex; justify-content: space-between;">
                     <span class="localize">{{BUILD_THE_WEB}}</span>
diff --git a/src/index.html b/src/index.html
@@ -350,6 +350,7 @@
                 baseURL: _getBaseURL(),
                 isTestWindow: _isTestWindow(),
                 firstBoot: false, // will be set below
+                pro: {},
                 startTime: Date.now(),
                 TRUSTED_ORIGINS: {
                     // if modifying this list, make sure to update in https://github.com/phcode-dev/phcode.live/blob/main/docs/trustedOrigins.js
diff --git a/src/services/profile-menu.js b/src/services/profile-menu.js
@@ -184,6 +184,43 @@ define(function (require, exports, module) {
         _setupDocumentClickHandler();
     }
 
+    /**
+     * Update main navigation branding based on entitlements
+     */
+    function _updateBranding(entitlements) {
+        const $brandingLink = $("#phcode-io-main-nav");
+        if (!entitlements) {
+            Phoenix.pro.plan = {
+                paidSubscriber: false,
+                name: "Community Edition",
+                isInTrial: false
+            };
+            return;
+        }
+
+        if (entitlements && entitlements.plan){
+            Phoenix.pro.plan = {
+                paidSubscriber: entitlements.plan.paidSubscriber,
+                name: entitlements.plan.name,
+                isInTrial: entitlements.plan.isInTrial,
+                validTill: entitlements.plan.validTill
+            };
+        }
+        if (entitlements && entitlements.plan && entitlements.plan.paidSubscriber) {
+            // Paid subscriber: show plan name with feather icon
+            const planName = entitlements.plan.name || "Phoenix Pro";
+            $brandingLink
+                .attr("href", "https://account.phcode.dev")
+                .addClass("phoenix-pro")
+                .html(`${planName}<i class="fa-solid fa-feather orange-gold" style="margin-left: 3px;"></i>`);
+        } else {
+            // Free user: show phcode.io branding
+            $brandingLink
+                .attr("href", "https://phcode.io")
+                .removeClass("phoenix-pro")
+                .text("phcode.io");
+        }
+    }
 
     let userEmail="";
     class SecureEmail extends HTMLElement {
@@ -366,7 +403,7 @@ define(function (require, exports, module) {
         isPopupVisible = true;
 
         positionPopup();
-        
+
         // Apply cached entitlements immediately if available (including quota/messages)
         KernalModeTrust.loginService.getEntitlements(false).then(cachedEntitlements => {
             if (cachedEntitlements && isPopupVisible) {
@@ -504,6 +541,9 @@ define(function (require, exports, module) {
 
         // Clear cached entitlements when user logs out
         LoginService.clearEntitlements();
+
+        // Reset branding to free mode
+        _updateBranding(null);
     }
 
     function setLoggedIn(initial, color) {
@@ -514,9 +554,11 @@ define(function (require, exports, module) {
         _updateProfileIcon(initial, color);
 
         // Preload entitlements when user logs in
-        KernalModeTrust.loginService.getEntitlements().catch(error => {
-            console.error('Failed to preload entitlements on login:', error);
-        });
+        KernalModeTrust.loginService.getEntitlements()
+            .then(_updateBranding)
+            .catch(error => {
+                console.error('Failed to preload entitlements on login:', error);
+            });
     }
 
     exports.init = init;
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -82,6 +82,15 @@ html, body {
     color: @dark-bc-text-link;
 }
 
+#phcode-io-main-nav.phoenix-pro{
+  background: @phoenix-pro-gradient;
+  background-clip: text;
+  -webkit-background-clip: text; /* Chrome, Safari */
+  color: transparent;            /* works in Firefox */
+  -webkit-text-fill-color: transparent; /* Chrome, Safari */
+  display: inline-block;
+}
+
 #ctrl-nav-overlay {
     position: absolute;
     display: flex; /* Enable flexbox */
diff --git a/src/styles/brackets_core_ui_variables.less b/src/styles/brackets_core_ui_variables.less
@@ -279,3 +279,12 @@
 // CSS Codehint icon
 @css-codehint-icon:                 #2ea56c;
 @dark-css-codehint-icon:            #146a41;
+
+// phoenix pro
+@phoenix-pro-gradient:                    linear-gradient(
+        45deg,
+        #ff8c42,   /* deep orange */
+        #ffa500,   /* bright orange */
+        #ffcc70,   /* golden yellow */
+        #ffd700    /* rich gold */
+);
diff --git a/test/SpecRunner.html b/test/SpecRunner.html
@@ -270,6 +270,7 @@
         isSpecRunnerWindow: window.location.pathname.endsWith("/SpecRunner.html"),
         firstBoot: false, // will be set below
         startTime: Date.now(),
+        pro: {},
         TRUSTED_ORIGINS: {
           // if modifying this list, make sure to update in https://github.com/phcode-dev/phcode.live/blob/main/docs/trustedOrigins.js
           // extensions may add their trusted origin to this list at any time.

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@`
`36`	`36`	`width: 100%;`
`37`	`37`	`}`
`38`	`38`
`39`		`- .editor-name h4 {`
	`39`	`+ .editor-name h4, .editor-name h4 span {`
`40`	`40`	`font-size: 22px;`
`41`	`41`	`}`
`42`	`42`
`@@ -79,21 +79,21 @@`
`79`	`79`	`margin-left: 0px;`
`80`	`80`	`width: 48%;`
`81`	`81`	`}`
`82`		`-`
	`82`	`+`
`83`	`83`	`.project-content-right {`
`84`	`84`	`width: 48%;`
`85`	`85`
`86`	`86`	`}`
`87`		`-`
	`87`	`+`
`88`	`88`	`.website-detail input {`
`89`	`89`	`width: 242px;`
`90`	`90`	`height: 42px;`
`91`	`91`	`}`
`92`		`-`
	`92`	`+`
`93`	`93`	`#noProjectIframe {`
`94`	`94`	`width: 267px;`
`95`	`95`	`}`
`96`		`-`
	`96`	`+`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`@media (max-width: 650px) {`