Calc2

frontend/app/assets/css/_graph.scss

@@ -1,3 +1,5 @@
+@use 'mixins' as *;
+
 // ---------- Graph view (the link map) ----------
 
 // desktop: the map owns the space beside the sidebar the way the open
@@ -21,11 +23,16 @@
   touch-action: none; // the map owns drags and pinches, not the page
 }
 
-.graph-toolbar {
+// top-right corner of the map: the button row, with the display menu
+// folding out under it
+.graph-tools {
   position: absolute;
   top: 16px;
   right: 18px;
   z-index: 2;
+}
+
+.graph-toolbar {
   display: flex;
   gap: 2px;
   padding: 4px;
@@ -34,6 +41,53 @@
   background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
   backdrop-filter: blur(10px);
   box-shadow: var(--shadow-sm);
+
+  // the display button while its menu is open, the ⋮ menu's way
+  .panel-icon-btn.open { color: var(--text); background: var(--surface-2); }
+}
+
+// the collapsible display menu, hinged under the buttons
+.graph-menu {
+  @include dropdown-panel($z: 20, $overflow: visible);
+  right: 0;
+  min-width: 216px;
+
+  .graph-menu-row {
+    @include menu-row(8px 10px, 14px);
+    justify-content: space-between;
+    text-align: left;
+
+    &:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
+  }
+}
+
+// the switch a menu row wears: a pill with a knob that rides across
+.graph-switch {
+  position: relative;
+  flex: none;
+  width: 32px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--border-strong);
+  transition: background-color 0.15s;
+
+  .knob {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--bg-elev);
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.15s ease;
+  }
+
+  &.on {
+    background: var(--accent);
+
+    .knob { transform: translateX(14px); }
+  }
 }
 
 .graph-state {
@@ -62,7 +116,7 @@
     box-shadow: var(--shadow-sm);
   }
 
-  .graph-toolbar { top: 10px; right: 10px; }
+  .graph-tools { top: 10px; right: 10px; }
 
   .graph-state { position: static; display: block; padding: 8px 0 32px; }
 }