feat(ui): show collection options as a compact icon toolbar

packages/phoenix-event-display/src/managers/ui-manager/color-options.ts

@@ -88,7 +88,11 @@ export class ColorOptions {
     colorByOptionsToInclude?: ColorByOptionKeys[],
   ) {
     this.collectionName = collectionFolder.name;
-    this.colorOptionsFolder = collectionFolder.addChild('Color Options');
+    this.colorOptionsFolder = collectionFolder.addChild(
+      'Color Options',
+      undefined,
+      'color-options',
+    );
 
     this.colorOptionsFolder.addConfig({
       type: 'color',

packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts

@@ -298,7 +298,11 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
     collectionName: string,
     cuts: Cut[],
   ) {
-    const cutsOptionsNode = collectionNode.addChild('Cut Options');
+    const cutsOptionsNode = collectionNode.addChild(
+      'Cut Options',
+      undefined,
+      'cut-options',
+    );
 
     cutsOptionsNode
       .addConfig({
@@ -340,7 +344,11 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
     collectionNode: PhoenixMenuNode,
     collectionName: string,
   ) {
-    const drawOptionsNode = collectionNode.addChild('Draw Options');
+    const drawOptionsNode = collectionNode.addChild(
+      'Draw Options',
+      undefined,
+      'draw-options',
+    );
 
     drawOptionsNode.addConfig({
       type: 'slider',