feat: add play button icon in toolbar

devvaannsh · devvaannsh · commit 3cef7cde4b6d · 2025-08-25T23:30:19.000+05:30
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/images/sprites.svg b/src/extensionsIntegrated/Phoenix-live-preview/images/sprites.svg
@@ -25,12 +25,4 @@
         <path transform="translate(2 2)" fill="#a0a0a0"  d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
     </g>
 
-    <g class="sprite" id="pointer-fill-icon" transform="translate(1 2)">
-        <path transform="translate(2 1)" fill="#a0a0a0" d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"/>
-    </g>
-
-    <g class="sprite" id="pointer-icon" transform="translate(1 2)">
-        <path transform="translate(2 1)" fill="#a0a0a0" d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z"/>
-    </g>
-
 </svg>
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
@@ -98,6 +98,7 @@
     display: flex;
     align-items: center;
     margin-right: 4px;
+    margin-left: 3px;
     max-width: 80%;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -131,3 +132,12 @@
     height: 22px;
     flex-shrink: 0;
 }
+
+#previewModeLivePreviewButton {
+    color: #a0a0a0;
+    margin-left: 3px;
+    margin-top: 3.5px;
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+}
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/panel.html b/src/extensionsIntegrated/Phoenix-live-preview/panel.html
@@ -2,6 +2,9 @@
     <div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
         <div style="width: 20%;display: flex;">
             <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button reload-icon"></button>
+	        <button id="previewModeLivePreviewButton" title="todo: preview mode title" class="btn-alt-quiet toolbar-button">
+	            <i class="fa-solid fa-play"></i>
+	        </button>
             <button id="livePreviewModeBtn" title="{{livePreviewConfigureModes}}" class="btn-alt-quiet toolbar-button btn-dropdown btn"><!-- Content will come here dynamically --></button>
         </div>
         <div style="width: fit-content;min-width: 60%;display: flex;justify-content: center; align-items: center;">
