tuning the sidebar

soleprint/station/tools/sbwrapper/sidebar.js

@@ -1,5 +1,5 @@
 // Soleprint Sidebar - Self-Injecting Script
-// This script creates and manages the soleprint sidebar when injected into a managed app
+// Matches the original Jinja2 sidebar look
 
 (function () {
   "use strict";
@@ -8,12 +8,14 @@
 
   let config = null;
   let user = null;
+
   let expanded = localStorage.getItem("spr_sidebar_expanded") === "true";
 
   // Icons as SVG strings
   const icons = {
     toggle: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-      <path d="M4 6h16M4 12h16M4 18h16"/>
+      <rect x="3" y="3" width="18" height="18" rx="2"/>
+      <path d="M9 3v18M3 9h6"/>
     </svg>`,
     home: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
       <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3m10-11v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1"/>
@@ -64,14 +66,6 @@
       // Create sidebar
       createSidebar();
 
-      // Setup keyboard shortcut
-      document.addEventListener("keydown", (e) => {
-        if (e.ctrlKey && e.shiftKey && e.key === "S") {
-          e.preventDefault();
-          toggleSidebar();
-        }
-      });
-
       console.log("[Soleprint] Sidebar initialized for room:", config.room);
     } catch (error) {
       console.error("[Soleprint] Failed to initialize sidebar:", error);
@@ -101,95 +95,90 @@
       document.body.classList.add("spr-sidebar-expanded");
     }
 
-    const sidebar = document.createElement("div");
+    const sidebar = document.createElement("nav");
     sidebar.id = "spr-sidebar";
     if (expanded) sidebar.classList.add("expanded");
 
     sidebar.innerHTML = `
-      <div class="spr-sidebar-header">
-        <button class="spr-sidebar-item" onclick="sprSidebar.toggle()" title="Toggle sidebar (Ctrl+Shift+S)">
-          ${icons.toggle}
-          <span class="label">Menu</span>
-        </button>
-        <div class="room-name">${config.room}</div>
-      </div>
+      <button class="spr-sidebar-item spr-toggle" title="Toggle sidebar">
+        ${icons.toggle}
+        <span class="label">Menu</span>
+        <span class="tooltip">Toggle</span>
+      </button>
 
-      <a href="/" class="spr-sidebar-item" title="Home">
+      <a href="/" class="spr-sidebar-item" title="${config.room}">
         ${icons.home}
-        <span class="label">Home</span>
+        <span class="label">${config.room}</span>
+        <span class="tooltip">${config.room}</span>
       </a>
 
       <div class="spr-sidebar-divider"></div>
 
-      <a href="${SPR_BASE}/" class="spr-sidebar-item" title="Soleprint">
+      <a href="${SPR_BASE}/" class="spr-sidebar-item active" title="Soleprint">
         ${icons.soleprint}
         <span class="label">Soleprint</span>
+        <span class="tooltip">Soleprint</span>
       </a>
 
-      <a href="${config.tools.artery}" class="spr-sidebar-item" title="Artery">
+      <div class="spr-sidebar-divider"></div>
+
+      <div class="spr-sidebar-icon" title="Artery">
         ${icons.artery}
-        <span class="label">Artery</span>
-      </a>
+      </div>
 
-      <a href="${config.tools.atlas}" class="spr-sidebar-item" title="Atlas">
+      <div class="spr-sidebar-icon" title="Atlas">
         ${icons.atlas}
-        <span class="label">Atlas</span>
-      </a>
+      </div>
 
-      <a href="${config.tools.station}" class="spr-sidebar-item" title="Station">
+      <div class="spr-sidebar-icon" title="Station">
         ${icons.station}
-        <span class="label">Station</span>
-      </a>
+      </div>
 
       <div class="spr-sidebar-spacer"></div>
 
       ${config.auth_enabled ? renderAuthSection() : ""}
     `;
 
+    // Add toggle click handler
+    sidebar
+      .querySelector(".spr-toggle")
+      .addEventListener("click", toggleSidebar);
+
     document.body.appendChild(sidebar);
   }
 
+  function toggleSidebar() {
+    const sidebar = document.getElementById("spr-sidebar");
+    expanded = !expanded;
+    sidebar.classList.toggle("expanded", expanded);
+    document.body.classList.toggle("spr-sidebar-expanded", expanded);
+    localStorage.setItem("spr_sidebar_expanded", expanded);
+  }
+
   function renderAuthSection() {
     if (user) {
       return `
         <div class="spr-sidebar-user">
-          <div class="spr-sidebar-item" title="${user.email}">
-            ${icons.user}
-            <span class="label">${user.email}</span>
-          </div>
-          <a href="${config.auth.logout_url}" class="spr-sidebar-item" title="Logout">
+          <a href="${config.auth.logout_url}" class="spr-sidebar-item" title="Logout (${user.email})">
             ${icons.logout}
             <span class="label">Logout</span>
+            <span class="tooltip">Logout</span>
           </a>
         </div>
       `;
     } else {
       return `
         <div class="spr-sidebar-user">
-          <a href="${config.auth.login_url}" class="spr-sidebar-item spr-login-btn" title="Login with Google">
+          <a href="${config.auth.login_url}" class="spr-sidebar-item" title="Login with Google">
             ${icons.google}
-            <span class="label">Login with Google</span>
+            <span class="label">Login</span>
+            <span class="tooltip">Login</span>
           </a>
         </div>
       `;
     }
   }
 
-  function toggleSidebar() {
-    const sidebar = document.getElementById("spr-sidebar");
-    expanded = !expanded;
-
-    sidebar.classList.toggle("expanded", expanded);
-    document.body.classList.toggle("spr-sidebar-expanded", expanded);
-
-    localStorage.setItem("spr_sidebar_expanded", expanded);
-  }
-
-  // Expose to global scope for onclick handlers
-  window.sprSidebar = {
-    toggle: toggleSidebar,
-  };
-
   // Initialize when DOM is ready
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", init);