feat(#5): ✨ Display measurements in a sorted list, and move the tools…

… for measurements to the same tab

Closes #5

index.html

@@ -55,8 +55,8 @@
     </div>
 
     <link rel="stylesheet" href="/src/measurementsPanel.css" />
-    <script type="module">
-      import { initMeasurementsPanel } from './src/measurementsPanel.js';
+    <script src="/src/measurementsPanel.js"></script>
+    <script>
       window.viewer = new Potree.Viewer(
         document.getElementById('potree_render_area')
       )
@@ -73,12 +73,15 @@
         $('#menu_appearance').next().show()
         $('#menu_tools').next().show()
         $('#menu_scene').next().show()
-        $('#menu_measurements').next().show()
         $('#menu_filters').next().show()
         viewer.toggleSidebar()
 
-        // Initialize custom measurements panel
-        initMeasurementsPanel(viewer)
+        // Initialize custom measurements panel (global function from measurementsPanel.js)
+        if(window.initMeasurementsPanel){
+          window.initMeasurementsPanel(viewer);
+        } else {
+          console.warn('initMeasurementsPanel not found on window');
+        }
       })
 
       let url = './pointclouds/data_converted/metadata.json'

public/build/potree/sidebar.html

@@ -116,17 +116,6 @@ <h3 id="menu_scene"><span data-i18n="tb.scene_opt"></span></h3>
 			<div id="scene_object_properties"></div>
 		</div>
 
-		<!-- MEASUREMENTS -->
-		<h3 id="menu_measurements"><span data-i18n="tb.measurements_opt">Measurements</span></h3>
-		<div class="pv-menu-list">
-
-			<div class="divider"><span>Point Measurements</span></div>
-
-			<div id="measurements_list">
-				<!-- Point measurements will be dynamically populated here -->
-			</div>
-		</div>
-
 		<!-- Classification -->
 		<h3 id="menu_filters"><span data-i18n="tb.filters_opt"></span></h3>
 		<div>

src/measurementsPanel.css

@@ -18,3 +18,23 @@
 #measurements_list::-webkit-scrollbar-track{background:var(--bg-dark-color);}
 #measurements_list::-webkit-scrollbar-thumb{background:var(--bg-color-2);border-radius:4px;}
 #measurements_list::-webkit-scrollbar-thumb:hover{background:var(--color-1);}
+
+/* Modern grouped measurement list */
+#measurement_items{background:#252d31;border:1px solid #1b2326;border-radius:6px;font-size:12px;color:#d9e2e6;}
+#measurement_items .m-empty{padding:10px;text-align:center;opacity:.6;}
+#measurement_items .m-group{border-top:1px solid #303a3f;}
+#measurement_items .m-group:first-child{border-top:none;}
+#measurement_items .m-group-header{display:flex;align-items:center;gap:6px;padding:6px 10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:11px;background:linear-gradient(#2f383d,#2b3438);cursor:pointer;user-select:none;position:sticky;top:0;z-index:1;}
+#measurement_items .m-group-header:hover{background:#374247;}
+#measurement_items .m-group-caret{font-size:10px;width:14px;text-align:center;color:#8fb9c9;}
+#measurement_items .m-group-title{flex:1;color:#c7d4d9;}
+#measurement_items .m-group-count{background:#3d4850;color:#9fb7c2;font-size:10px;padding:2px 6px;border-radius:10px;line-height:1;}
+#measurement_items .m-group-body{padding:4px 4px 6px;}
+#measurement_items .m-row{display:flex;align-items:center;gap:6px;padding:6px 8px;margin:2px 2px;border:1px solid transparent;border-radius:4px;background:#2c3539;transition:background .15s,border-color .15s;cursor:pointer;}
+#measurement_items .m-row-icon{width:16px;flex:0 0 16px;text-align:center;font-size:12px;color:#8fb9c9;filter:drop-shadow(0 0 2px #0a0f12);}
+#measurement_items .m-row:hover{background:#354045;border-color:#425056;}
+#measurement_items .m-row.active{background:#1f4b63;border-color:#2f6b8c;box-shadow:0 0 0 1px #2f6b8c66;}
+#measurement_items .m-row-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+#measurement_items .m-row-delete{background:#3b2626;border:1px solid #5a3a3a;color:#ff9a9a;font-weight:600;font-size:11px;line-height:1;padding:4px 6px;border-radius:4px;cursor:pointer;transition:background .15s, color .15s;}
+#measurement_items .m-row-delete:hover{background:#5a2d2d;color:#fff;}
+