clean up file name, button presentation

src/main/mesh.js

@@ -72,7 +72,8 @@ function ui_build() {
                 // map groups to divs
                 .map(g => h.div([
                     h.button({
-                        _: `group (${g.id})`,
+                        _: `group`,
+                        title: g.id,
                         class: [
                             "group",
                             api.selection.contains(g) ? 'selected' : undefined

src/mesh/model.js

@@ -50,7 +50,12 @@ mesh.model = class MeshModel extends mesh.object {
             return;
         }
 
-        this.file = file;
+        // remove file name extensions
+        let text = file || '';
+        let dot = text.lastIndexOf('.');
+        if (dot > 0) file = text.substring(0, dot);
+
+        this.file = file || 'unnamed';
         this.mesh = this.load(mesh);
     }
 

web/mesh/index.css

@@ -141,6 +141,16 @@ body, div {
     margin-bottom: -14px !important;
 }
 
+button {
+    padding: 2px 3px 2px 3px;
+    border: 1px solid rgba(150,150,150,0.5);
+    background-color: rgba(220,220,220,0.5);
+}
+
+button:hover {
+    background-color: rgba(200,200,200,1);
+}
+
 #grouplist {
     position: absolute;
     margin: 3px 3px 0 0;
@@ -174,8 +184,11 @@ body, div {
     background-color: rgba(0,255,0,0.5)
 }
 
-#grouplist .vsep {
-    height: 1px;
-    margin: 2px 0 1px 0;
-    background-color: gray;
+#grouplist .selected:hover {
+    background-color: rgba(0,255,0,1)
+}
+
+#grouplist .vsep {
+    margin: 2px 0 1px 0;
+    border-bottom: 1px dashed gray;
 }