add persistent mode label when menu not hovered

package.json

@@ -40,8 +40,8 @@
         "manifold-3d": "^2.5.1",
         "moment": "^2.29.4",
         "serve-static": "^1.14.1",
-        "three": "^0.166.0",
+        "three": "^0.167.1",
-        "three-mesh-bvh": "^0.5.21",
+        "three-mesh-bvh": "^0.7.6",
         "uglify-js": "3.14.5",
         "validator": ">=13.7.0",
         "ws": "^7.5.5"

src/mesh/api.js

@@ -1231,6 +1231,7 @@ const mode = {
             $(`mode-${key}`).classList.remove('selected');
         }
         $(`mode-${mode}`).classList.add('selected');
+        $('mode-label').innerText = mode;
         api.mode.check();
         mesh.edges?.end();
         if (mode === 'sketch') {

src/mesh/build.js

@@ -451,7 +451,8 @@ function ui_build() {
                 menu_item('Surface', mode.surface, '4', 'mode-surface'),
                 menu_item('Face', mode.face, '5', 'mode-face'),
                 menu_item('Edge', mode.edge, '6', 'mode-edge'),
-            ])
+            ]),
+            div({ id: "mode-label" })
         ]),
         div({ class: "menu sketch-on" }, [
             div('Object'),

web/mesh/index.css

@@ -217,6 +217,43 @@ button:hover {
     gap: 1px;
 }
 
+#top-left:not(:hover) #mode-label {
+    display: flex;
+}
+
+#mode-label {
+    display: none;
+    position: absolute;
+    text-transform: capitalize;
+    padding: 2px 4px 2px 4px;
+    background-color: rgba(0,200,0,0.35);
+    border: 1px solid rgba(0,0,0,0.25);
+    border-radius: 3px;
+    transform: translateX(-50%);
+    top: calc(100% + 2px);
+    left: 50%;
+}
+
+#mode-label:before {
+    content: '';
+    position: absolute;
+    top: -10px; /* Adjust to position the caret above the menu */
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent #777 transparent;
+}
+
+.dark #mode-label:before {
+    border-color: transparent transparent #ddd transparent;
+}
+
+.dark #mode-label {
+    background-color: rgba(0,200,0,0.65);
+    border-color: rgba(255,255,255,0.25);
+}
+
 #top-mid {
     flex-grow: 1;
 }