feat: add SVG logo and enhance toolbar styles and functionality

.trunk/configs/svgo.config.mjs

@@ -0,0 +1,14 @@
+export default {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          removeViewBox: false, // https://github.com/svg/svgo/issues/1128
+          sortAttrs: true,
+          removeOffCanvasPaths: true,
+        },
+      },
+    },
+  ],
+};

.trunk/trunk.yaml

@@ -7,14 +7,14 @@ cli:
 plugins:
   sources:
     - id: trunk
-      ref: v1.7.4
+      ref: v1.10.2
       uri: https://github.com/trunk-io/plugins
 # Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes)
 runtimes:
   enabled:
     - go@1.21.0
     - node@22.16.0
-    - python@3.10.8
+    - python@3.14.4
 # This is the section where you manage your linters. (https://docs.trunk.io/check/configuration)
 lint:
   ignore:
@@ -27,13 +27,16 @@ lint:
       paths:
         - .ddev/**
   enabled:
-    - checkov@3.2.499
-    - actionlint@1.7.10
+    - pinact@4.0.0
+    - svgo@4.0.1
+    - taplo@0.10.0
+    - checkov@3.3.1
+    - actionlint@1.7.12
     - git-diff-check
     - hadolint@2.14.0
-    - markdownlint@0.47.0
+    - markdownlint@0.48.0
     - oxipng@10.1.0
-    - prettier@3.8.1
+    - prettier@3.8.4
     - shellcheck@0.11.0
     - shfmt@3.6.0
     - trufflehog@3.92.5

src/view/frontend/web/css/toolbar.css

@@ -121,27 +121,16 @@
   background: var(--mageforge-color-green);
 }
 
-.mageforge-toolbar-burger-icon {
+.mageforge-toolbar-burger-logo {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
   flex-shrink: 0;
 }
 
-.mageforge-toolbar-burger-bar {
-  display: block;
-  width: 14px;
-  height: 2px;
-  background: var(--mageforge-color-white);
-  border-radius: 1px;
-  transition: all 0.2s ease;
-}
-
 .mageforge-toolbar-burger-label {
   font-family: var(--mageforge-font-family);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.03em;
   color: var(--mageforge-color-white);
@@ -236,6 +225,17 @@
   display: block;
 }
 
+.mageforge-toolbar-menu-logo {
+  display: flex;
+  align-items: center;
+  padding-bottom: 8px;
+}
+
+.mageforge-toolbar-menu-logo svg {
+  height: 24px;
+  width: auto;
+}
+
 .mageforge-toolbar-menu-close {
   background: none;
   border: 1px solid var(--mageforge-border-color);

src/view/frontend/web/js/toolbar/ui.js

@@ -2,8 +2,18 @@
  * MageForge Toolbar - DOM construction and menu controls
  */
 
+const LOGO_SVG_PATH =
+  "M176 0L0 101.614V297L176 398.614L352 297V101.614L176 0ZM39 275.5V124L76.2391 101.614L101.5 162L126.5 73.4393L164.5 51.5V346.939L126.5 325V188L108.5 239H95L76.2391 188V297L39 275.5ZM187.5 346.939V51.5L313 124V170H275.5V146.368L225.5 117.5V188H280V226.5H225.5V325L187.5 346.939Z";
+
+function createLogoSvg(fill) {
+  return `<svg width="24" height="27" viewBox="0 0 352 399" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="${LOGO_SVG_PATH}" fill="${fill}"></path></svg>`;
+}
+
 export const uiMethods = {
   createToolbar() {
+    const logoSvgOrange = createLogoSvg("#E5622A");
+    const logoSvgWhite = createLogoSvg("white");
+
     this.container = document.createElement("div");
     this.container.className = "mageforge-toolbar";
 
@@ -31,8 +41,10 @@ export const uiMethods = {
 
     const menuTitle = document.createElement("div");
     menuTitle.className = "mageforge-toolbar-menu-title";
+
     menuTitle.innerHTML = `
-            <span class="mageforge-toolbar-menu-title-text">MageForge Toolbar</span>
+            <div class="mageforge-toolbar-menu-logo">${logoSvgOrange}</div>
+            <span class="mageforge-toolbar-menu-title-text">MageForge</span>
             <button type="button" class="mageforge-toolbar-menu-close" title="Close & deactivate all">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"></path></svg>
             </button>
@@ -273,15 +285,11 @@ export const uiMethods = {
     this.burgerButton.title = "Audit tools";
     this.burgerButton.setAttribute("role", "button");
     this.burgerButton.setAttribute("tabindex", "0");
-    this.burgerButton.setAttribute("aria-label", "MageForge Toolbar");
+    this.burgerButton.setAttribute("aria-label", "Open audit tools menu");
     this.burgerButton.setAttribute("aria-expanded", "false");
     this.burgerButton.innerHTML = `
-            <span class="mageforge-toolbar-burger-icon">
-                <span class="mageforge-toolbar-burger-bar"></span>
-                <span class="mageforge-toolbar-burger-bar"></span>
-                <span class="mageforge-toolbar-burger-bar"></span>
-            </span>
-            <span class="mageforge-toolbar-burger-label">MageForge Toolbar</span>
+            <div class="mageforge-toolbar-burger-logo">${logoSvgWhite}</div>
+            <span class="mageforge-toolbar-burger-label">MageForge</span>
         `;
     this.burgerButton.onclick = (e) => {
       e.preventDefault();