added dummy styling panel

Author: Mnikley

src/graph/core.js

@@ -899,6 +899,9 @@ class GraphCoreManager {
         case "m":
           this.cache.metrics.toggleUI();
           break;
+        case "y":
+          this.cache.ui.toggleStylingPanel();
+          break;
         default:
           break;
       }

src/graph_lens_lite.html

@@ -32,6 +32,7 @@ <h3>Graph Lens Lite</h3>
           <button id="metricsToggleBtn" class="showOnLoad medium-btn" title="Toggle network metrics panel (M)" onclick="cache.metrics.toggleUI()">📊</button>
           <button id="dataToggleBtn" class="showOnLoad medium-btn" title="Toggle data editor (D)" onclick="cache.ui.toggleDataEditor()">🔢</button>
           <button id="queryToggleBtn" class="showOnLoad medium-btn" title="Toggle query editor (Q)" onclick="cache.ui.toggleQueryEditor()">📝</button>
+          <button id="styleToggleBtn" class="showOnLoad medium-btn" title="Open styling panel (Y)" onclick="cache.ui.toggleStylingPanel()">🎨</button>
           <button id="editBtn" class="showOnLoad medium-btn" title="Toggle Edit mode (E)" onclick="cache.ui.toggleEditMode()">⚙️</button>
         </div>
       </div>
@@ -100,6 +101,18 @@ <h5 class="purple">Shown:
     </div>
     <div id="innerGraphContainer"></div>
   </div>
+  <div id="rightSidebar">
+    <div id="rightSidebarContentContainer">
+      <div class="header-row">
+        <h3>Styling Panel</h3>
+        <button id="closeStylingPanelBtn" class="small-btn red" title="Close styling panel" onclick="cache.ui.toggleStylingPanel()">×</button>
+      </div>
+      <hr>
+      <div id="stylingPanelContent">
+        <!-- Styling controls will be populated here -->
+      </div>
+    </div>
+  </div>
 </div>
 <div id="bottomBar">
   <div class="resize-handle"></div>

src/managers/ui.js

@@ -329,6 +329,22 @@ class UIManager {
     this.handleEditModeUIChanges();
   }
 
+  toggleStylingPanel() {
+    const rightSidebar = document.getElementById("rightSidebar");
+    const styleBtn = document.getElementById("styleToggleBtn");
+    const isActive = rightSidebar.classList.contains("active");
+
+    if (isActive) {
+      rightSidebar.classList.remove("active");
+      styleBtn.classList.remove("highlight");
+      this.info("Styling panel closed");
+    } else {
+      rightSidebar.classList.add("active");
+      styleBtn.classList.add("highlight");
+      this.info("Styling panel opened");
+    }
+  }
+
   async toggleLassoSelection() {
     const lassoWrapper = document.getElementById("lassoWrapper");
     let lassoIsActive = lassoWrapper.classList.contains("active");
@@ -448,6 +464,8 @@ class UIManager {
 
     this.buildFilterUI();
 
+    this.buildStylingPanelUI();
+
     document.getElementById("resetSelectedElementsStyleBtn").title = this.cache.CFG.RESET_SELECTION_BUTTON_RESETS_POSITIONS
       ? "Reset the visual appearance and positions of the selected elements to their defaults"
       : "Reset the visual appearance of the selected elements to their defaults";
@@ -679,6 +697,16 @@ class UIManager {
       this.cache.EVENT_LOCKS.QUERY_UPDATE_EVENT = false;
     }
   }
+
+  buildStylingPanelUI() {
+    const content = document.getElementById("stylingPanelContent");
+    content.innerHTML = "";
+
+    const placeholder = document.createElement("div");
+    placeholder.className = "alert-info";
+    placeholder.innerHTML = "<p>Styling controls will be added here.</p>";
+    content.appendChild(placeholder);
+  }
 }
 
 export {UIManager};

src/style.css

@@ -30,6 +30,47 @@ body, html {
     flex-shrink: 0;
 }
 
+#rightSidebar {
+    min-width: 0;
+    width: 0;
+    background-color: #f4f4f4;
+    padding-right: 0;
+    overflow: hidden;
+    transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out, padding-right 0.3s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    border-left: 0 solid #ccc;
+}
+
+#rightSidebar.active {
+    min-width: 360px;
+    width: 360px;
+    padding-right: 10px;
+    padding-left: 10px;
+    border-left: 1px solid #ccc;
+}
+
+#rightSidebarContentContainer {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+}
+
+#rightSidebar.active #rightSidebarContentContainer {
+    opacity: 1;
+}
+
+#stylingPanelContent {
+    padding-top: 10px;
+}
+
+#closeStylingPanelBtn {
+    margin-left: auto;
+}
+
 #sidebarContentContainer {
     flex: 1;
     overflow-y: auto;