convert left action menu to hover/pop

src/mesh/build.js

@@ -355,6 +355,7 @@ function ui_build() {
         h.div([
             // create and bind file loading elements
             h.div({ _: "file", class: "head" }),
+            h.div({ class: "pop"}, [
                 h.button({ _: 'import', onclick: file.import }, [
                     h.input({
                         id: "import", type: "file", class: ["hide"], multiple: true,
@@ -362,44 +363,57 @@ function ui_build() {
                     })
                 ]),
                 h.button({ _: 'export', onclick: file.export }),
+            ])
+        ]),
+        h.div([
+            h.div({ _: "add", class: "head" }),
+            h.div({ class: "pop"}, [
+                h.button({ _: 'cylinder', onclick: add.cylinder }),
+                h.button({ _: 'cube', onclick: add.cube }),
+            ])
         ]),
         h.div([
             h.div({ _: "view", class: "head" }),
+            h.div({ class: "pop"}, [
                 h.button({ _: 'bounds', onclick() { selection.boundsBox({ toggle: true }) } }),
                 h.button({ _: 'normals', onclick() { api.normals() } }),
                 h.button({ _: 'gridlines', onclick() { api.grid() } }),
                 h.button({ _: 'wireframe', onclick() { api.wireframe() } }),
+            ])
         ]),
         h.div([
             h.div({ _: "model", class: "head" }),
+            h.div({ class: "pop"}, [
                 h.button({ _: 'duplicate', onclick: tool.duplicate }),
                 h.button({ _: 'regroup', onclick: tool.regroup }),
                 h.button({ _: 'merge', onclick: tool.merge }),
                 h.button({ _: 'mirror', onclick: tool.mirror }),
                 h.button({ _: 'split', onclick: call.edit_split }),
+            ])
         ]),
         h.div([
-            h.div({ _: "bool", class: "head" }),
+            h.div({ _: "boolean", class: "head" }),
+            h.div({ class: "pop"}, [
                 h.button({ _: 'union', onclick: tool.union }),
                 h.button({ _: 'subtract', onclick: tool.subtract }),
                 h.button({ _: 'intersect', onclick: tool.intersect }),
+            ])
         ]),
         h.div([
             h.div({ _: "normal", class: "head" }),
+            h.div({ class: "pop"}, [
                 h.button({ _: 'invert', onclick: tool.invert }),
-        ]),
+            ])
-        h.div([
-            h.div({ _: "add", class: "head" }),
-            h.button({ _: 'cylinder', onclick: add.cylinder }),
-            h.button({ _: 'cube', onclick: add.cube }),
         ]),
         h.div([
             h.div({ _: "repair", class: "head" }),
+            h.div({ class: "pop"}, [
                 h.button({ _: 'analyze', onclick: tool.analyze }),
                 h.button({ _: 'isolate', onclick: tool.isolate }),
                 h.button({ _: 'patch', onclick: tool.repair }),
                 // h.button({ _: 'rebuild', onclick: tool.rebuild }),
                 h.button({ _: 'clean', onclick: tool.clean }),
+            ])
         ]),
     ]);
 

web/mesh/index.css

@@ -376,6 +376,10 @@ button:hover {
 
 /** common look & feel */
 
+.dark #logger, .dark #modal_frame, .dark #actions > div, .dark #grouplist > div, .dark #actions .pop {
+    border: 1px solid #bbb;
+}
+
 #logger, #modal_frame, #actions > div, #grouplist > div {
     border: 1px solid gray;
     border-radius: 3px;
@@ -469,6 +473,39 @@ button.selected:hover {
     gap: 1px;
 }
 
+#actions .pop {
+    display: none;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    transform: translateX(100%);
+    right: -1px;
+    top: -1px;
+    gap: 3px;
+    margin: 0;
+    padding: 3px;
+    border-radius: 3px;
+    border: 1px solid gray;
+    background-color: rgba(255,255,255,0.5);
+}
+
+.pop button {
+    width: 100%;
+}
+
+.dark #actions > div:hover {
+    background-color: #999;
+}
+
+#actions > div:hover {
+    background-color: #eee;
+}
+
+#actions > div:hover .pop {
+    display: flex;
+}
+
 #actions > div {
     flex-direction: column;
     gap: 2px;
@@ -482,7 +519,6 @@ button.selected:hover {
     font-weight: lighter;
     font-size: smaller;
     border-radius: 3px;
-    background-color: rgba(150,150,150,0.05);
 }
 
 #actions .head:hover {