From 2dd3dd4a58cc4b5885a1736f58d72f7024ffcf67 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 7 Jan 2026 22:52:44 -0500
Subject: [PATCH 1/7] Add multi-cam top buttons option

---
 client/dive-common/components/EditorMenu.vue  |  2 +
 .../components/TrackSettingsPanel.vue         | 40 +++++++++++++++++++
 client/dive-common/components/Viewer.vue      | 14 +++++++
 client/dive-common/store/settings.ts          |  9 ++++-
 4 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/client/dive-common/components/EditorMenu.vue b/client/dive-common/components/EditorMenu.vue
index 748f9db8d..a4f84d8c5 100644
--- a/client/dive-common/components/EditorMenu.vue
+++ b/client/dive-common/components/EditorMenu.vue
@@ -243,7 +243,9 @@ export default Vue.extend({
         <v-icon>{{ button.icon }}</v-icon>
       </v-btn>
       <slot name="delete-controls" />
+      <slot name="multicam-controls-left" />
       <v-spacer />
+      <slot name="multicam-controls-right" />
       <span class="pb-1">
         <span class="mr-1 px-3 py-1">
           <v-icon class="pr-1">
diff --git a/client/dive-common/components/TrackSettingsPanel.vue b/client/dive-common/components/TrackSettingsPanel.vue
index 90ed67ed9..71b1ec1b2 100644
--- a/client/dive-common/components/TrackSettingsPanel.vue
+++ b/client/dive-common/components/TrackSettingsPanel.vue
@@ -32,6 +32,7 @@ export default defineComponent({
       prompt: 'Prompt user before deleting a track?',
       filterTracksByFrame: 'Filter the track list by those with detections in the current frame',
       autoZoom: 'Automatically zoom to the track when selected',
+      showMultiCamToolbar: 'Show multi-camera tools in the top toolbar when a track is selected',
     });
     const modes = ref(['Track', 'Detection']);
     // Add unknown as the default type to the typeList
@@ -322,6 +323,45 @@ export default defineComponent({
           </v-tooltip>
         </v-col>
       </v-row>
+      <v-divider class="my-2" />
+      <div class="subheading">
+        Multi-Camera Settings
+      </div>
+      <v-row
+        align="end"
+        dense
+      >
+        <v-col class="py-1">
+          <v-switch
+            v-model="clientSettings.multiCamSettings.showToolbar"
+            class="my-0 ml-1 pt-0"
+            dense
+            label="Show Toolbar"
+            hide-details
+          />
+        </v-col>
+        <v-col
+          cols="2"
+          class="py-1"
+          align="right"
+        >
+          <v-tooltip
+            open-delay="200"
+            max-width="200"
+            bottom
+          >
+            <template #activator="{ on }">
+              <v-icon
+                small
+                v-on="on"
+              >
+                mdi-help
+              </v-icon>
+            </template>
+            <span>{{ help.showMultiCamToolbar }}</span>
+          </v-tooltip>
+        </v-col>
+      </v-row>
     </v-card>
   </div>
 </template>
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index b05d9bf78..a3b77a2d9 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -49,6 +49,7 @@ import context from 'dive-common/store/context';
 import { MarkChangesPendingFilter } from 'vue-media-annotator/BaseFilterControls';
 import GroupSidebarVue from './GroupSidebar.vue';
 import MultiCamToolsVue from './MultiCamTools.vue';
+import MultiCamToolbar from './MultiCamToolbar.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
 
 export interface ImageDataItem {
@@ -68,6 +69,7 @@ export default defineComponent({
     ConfidenceFilter,
     UserGuideButton,
     EditorMenu,
+    MultiCamToolbar,
     PrimaryAttributeTrackFilter,
   },
 
@@ -1010,6 +1012,18 @@ export default defineComponent({
               @delete-annotation="handler.removeAnnotation"
             />
           </template>
+          <template
+            v-if="multiCamList.length > 1 && clientSettings.multiCamSettings.showToolbar && selectedCamera === multiCamList[0]"
+            slot="multicam-controls-left"
+          >
+            <multi-cam-toolbar />
+          </template>
+          <template
+            v-if="multiCamList.length > 1 && clientSettings.multiCamSettings.showToolbar && selectedCamera !== multiCamList[0]"
+            slot="multicam-controls-right"
+          >
+            <multi-cam-toolbar />
+          </template>
         </EditorMenu>
         <v-select
           v-if="multiCamList.length > 1"
diff --git a/client/dive-common/store/settings.ts b/client/dive-common/store/settings.ts
index 61f390872..adab2e24f 100644
--- a/client/dive-common/store/settings.ts
+++ b/client/dive-common/store/settings.ts
@@ -44,7 +44,10 @@ interface AnnotationSettings {
   timelineCountSettings: {
     totalCount: boolean;
     defaultView: 'tracks' | 'detections';
-  }
+  };
+  multiCamSettings: {
+    showToolbar: boolean;
+  };
 }
 
 const defaultSettings: AnnotationSettings = {
@@ -99,7 +102,9 @@ const defaultSettings: AnnotationSettings = {
     totalCount: true,
     defaultView: 'tracks',
   },
-
+  multiCamSettings: {
+    showToolbar: true,
+  },
 };
 
 // Utility to safely load from localStorage

From 3901131e12dd150c78bc4a3d600d198739156e30 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 7 Jan 2026 22:54:27 -0500
Subject: [PATCH 2/7] Check in vue for multi-cam toolbar

---
 .../components/MultiCamToolbar.vue            | 287 ++++++++++++++++++
 1 file changed, 287 insertions(+)
 create mode 100644 client/dive-common/components/MultiCamToolbar.vue

diff --git a/client/dive-common/components/MultiCamToolbar.vue b/client/dive-common/components/MultiCamToolbar.vue
new file mode 100644
index 000000000..2a128978d
--- /dev/null
+++ b/client/dive-common/components/MultiCamToolbar.vue
@@ -0,0 +1,287 @@
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import {
+  useCameraStore,
+  useHandler,
+  useSelectedCamera,
+  useSelectedTrackId,
+  useTime,
+  useTrackFilters,
+  useEditingMode,
+} from 'vue-media-annotator/provides';
+import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+
+export default defineComponent({
+  name: 'MultiCamToolbar',
+  setup() {
+    const selectedCamera = useSelectedCamera();
+    const selectedTrackId = useSelectedTrackId();
+    const cameraStore = useCameraStore();
+    const handler = useHandler();
+    const { frame } = useTime();
+    const enabledTracksRef = useTrackFilters().enabledAnnotations;
+    const inEditingMode = useEditingMode();
+
+    const cameras = computed(() => [...cameraStore.camMap.value.keys()]);
+    const canary = ref(false);
+
+    function _depend(): boolean {
+      return canary.value;
+    }
+
+    // Get info about which cameras have tracks/detections for selected track
+    const cameraTrackInfo = computed(() => {
+      const info: Record<string, { hasTrack: boolean; hasDetection: boolean }> = {};
+      _depend();
+      if (
+        selectedTrackId.value !== null
+        && selectedCamera.value
+        && enabledTracksRef.value.length > 0
+      ) {
+        cameraStore.camMap.value.forEach((camera, key) => {
+          const track = camera.trackStore.getPossible(selectedTrackId.value as AnnotationId);
+          const hasTrack = track !== undefined && track.features.length > 0;
+          info[key] = {
+            hasTrack,
+            hasDetection:
+              hasTrack
+              && camera.trackStore
+                .get(selectedTrackId.value as AnnotationId)
+                ?.getFeature(frame.value)[0] !== null,
+          };
+        });
+      }
+      return info;
+    });
+
+    const camerasWithTrack = computed(
+      () => Object.entries(cameraTrackInfo.value).filter(([, v]) => v.hasTrack).length,
+    );
+
+    const currentCameraHasTrack = computed(
+      () => cameraTrackInfo.value[selectedCamera.value]?.hasTrack ?? false,
+    );
+
+    const currentCameraHasDetection = computed(
+      () => cameraTrackInfo.value[selectedCamera.value]?.hasDetection ?? false,
+    );
+
+    // Other cameras that don't have this track (available for linking)
+    const linkableCameras = computed(() => cameras.value.filter(
+      (cam) => !cameraTrackInfo.value[cam]?.hasTrack,
+    ));
+
+    // Delete detection from current camera/frame
+    const deleteDetection = async () => {
+      if (selectedTrackId.value === null || !selectedCamera.value) return;
+      canary.value = !canary.value;
+      const track = cameraStore.getTrack(selectedTrackId.value, selectedCamera.value);
+      const allTracks = cameraStore.getTrackAll(selectedTrackId.value);
+      if (track.length === 1) {
+        await handler.removeTrack([selectedTrackId.value], allTracks.length > 1, selectedCamera.value);
+        if (allTracks.length === 1) {
+          handler.trackSelect(null, false);
+        }
+      } else {
+        track.toggleKeyframe(frame.value);
+      }
+    };
+
+    // Delete entire track from current camera
+    const deleteTrackFromCamera = async () => {
+      if (selectedTrackId.value === null || !selectedCamera.value) return;
+      canary.value = !canary.value;
+      const allTracks = cameraStore.getTrackAll(selectedTrackId.value);
+      await handler.removeTrack([selectedTrackId.value], allTracks.length > 1, selectedCamera.value);
+      if (allTracks.length === 1) {
+        handler.trackSelect(null, false);
+      }
+    };
+
+    // Unlink current camera from track
+    const unlinkCurrentCamera = () => {
+      if (selectedTrackId.value === null || !selectedCamera.value) return;
+      handler.unlinkCameraTrack(selectedTrackId.value, selectedCamera.value);
+      canary.value = !canary.value;
+    };
+
+    // Start linking to another camera
+    const startLinkingToCamera = (camera: string) => {
+      if (inEditingMode.value) {
+        handler.trackSelect(selectedTrackId.value, false);
+      }
+      if (selectedCamera.value !== camera) {
+        handler.selectCamera(camera, false);
+      }
+      handler.startLinking(camera);
+    };
+
+    // Edit or create detection on a camera
+    const editOnCamera = (camera: string) => {
+      handler.selectCamera(camera, true);
+    };
+
+    return {
+      selectedTrackId,
+      selectedCamera,
+      cameras,
+      cameraTrackInfo,
+      camerasWithTrack,
+      currentCameraHasTrack,
+      currentCameraHasDetection,
+      linkableCameras,
+      deleteDetection,
+      deleteTrackFromCamera,
+      unlinkCurrentCamera,
+      startLinkingToCamera,
+      editOnCamera,
+    };
+  },
+});
+</script>
+
+<template>
+  <div
+    v-if="selectedTrackId !== null && cameras.length > 1"
+    class="d-flex align-center multicam-toolbar"
+  >
+    <!-- Edit/Add detection on other cameras -->
+    <v-menu offset-y>
+      <template #activator="{ on, attrs }">
+        <v-tooltip bottom>
+          <template #activator="{ on: tooltipOn }">
+            <v-btn
+              v-bind="attrs"
+              small
+              class="mx-1 mode-button"
+              v-on="{ ...on, ...tooltipOn }"
+            >
+              <v-icon>mdi-pencil-plus</v-icon>
+            </v-btn>
+          </template>
+          <span>Edit detection on camera</span>
+        </v-tooltip>
+      </template>
+      <v-list dense>
+        <v-list-item
+          v-for="camera in cameras"
+          :key="camera"
+          @click="editOnCamera(camera)"
+        >
+          <v-list-item-icon class="mr-2">
+            <v-icon
+              small
+              :color="cameraTrackInfo[camera]?.hasDetection ? 'success' : (cameraTrackInfo[camera]?.hasTrack ? 'warning' : 'grey')"
+            >
+              {{ cameraTrackInfo[camera]?.hasDetection ? 'mdi-check-circle' : (cameraTrackInfo[camera]?.hasTrack ? 'mdi-circle-outline' : 'mdi-plus-circle-outline') }}
+            </v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>
+              {{ camera }}
+              <span v-if="camera === selectedCamera" class="text-caption">(current)</span>
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+
+    <!-- Link to another camera -->
+    <v-menu
+      v-if="linkableCameras.length > 0"
+      offset-y
+    >
+      <template #activator="{ on, attrs }">
+        <v-tooltip bottom>
+          <template #activator="{ on: tooltipOn }">
+            <v-btn
+              v-bind="attrs"
+              small
+              class="mx-1 mode-button"
+              v-on="{ ...on, ...tooltipOn }"
+            >
+              <v-icon>mdi-link-variant-plus</v-icon>
+            </v-btn>
+          </template>
+          <span>Link track to camera</span>
+        </v-tooltip>
+      </template>
+      <v-list dense>
+        <v-list-item
+          v-for="camera in linkableCameras"
+          :key="camera"
+          @click="startLinkingToCamera(camera)"
+        >
+          <v-list-item-content>
+            <v-list-item-title>Link to {{ camera }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+
+    <!-- Unlink current camera -->
+    <v-tooltip
+      v-if="currentCameraHasTrack && camerasWithTrack > 1"
+      bottom
+    >
+      <template #activator="{ on }">
+        <v-btn
+          small
+          class="mx-1 mode-button"
+          color="warning"
+          v-on="on"
+          @click="unlinkCurrentCamera"
+        >
+          <v-icon>mdi-link-variant-minus</v-icon>
+        </v-btn>
+      </template>
+      <span>Unlink track from current camera</span>
+    </v-tooltip>
+
+    <!-- Delete detection from current camera -->
+    <v-tooltip
+      v-if="currentCameraHasDetection"
+      bottom
+    >
+      <template #activator="{ on }">
+        <v-btn
+          small
+          class="mx-1 mode-button"
+          v-on="on"
+          @click="deleteDetection"
+        >
+          <v-icon>mdi-star-minus</v-icon>
+        </v-btn>
+      </template>
+      <span>Delete detection from current camera</span>
+    </v-tooltip>
+
+    <!-- Delete track from current camera -->
+    <v-tooltip
+      v-if="currentCameraHasTrack"
+      bottom
+    >
+      <template #activator="{ on }">
+        <v-btn
+          small
+          class="mx-1 mode-button"
+          color="error"
+          v-on="on"
+          @click="deleteTrackFromCamera"
+        >
+          <v-icon>mdi-delete</v-icon>
+        </v-btn>
+      </template>
+      <span>Delete track from current camera</span>
+    </v-tooltip>
+  </div>
+</template>
+
+<style scoped>
+.multicam-toolbar {
+  flex-shrink: 0;
+}
+.mode-button {
+  border: 1px solid grey;
+}
+</style>

From 8ca9daa8a953030cbfe2c0f004947718d72468e7 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 7 Jan 2026 23:00:29 -0500
Subject: [PATCH 3/7] Replace dropdown toggle with fast option to draw on
 opposite camera

---
 .../components/MultiCamToolbar.vue            | 66 ++++++++-----------
 1 file changed, 27 insertions(+), 39 deletions(-)

diff --git a/client/dive-common/components/MultiCamToolbar.vue b/client/dive-common/components/MultiCamToolbar.vue
index 2a128978d..e5798b4f8 100644
--- a/client/dive-common/components/MultiCamToolbar.vue
+++ b/client/dive-common/components/MultiCamToolbar.vue
@@ -71,6 +71,11 @@ export default defineComponent({
       (cam) => !cameraTrackInfo.value[cam]?.hasTrack,
     ));
 
+    // The opposite camera (first camera that isn't the currently selected one)
+    const oppositeCamera = computed(() => cameras.value.find(
+      (cam) => cam !== selectedCamera.value,
+    ));
+
     // Delete detection from current camera/frame
     const deleteDetection = async () => {
       if (selectedTrackId.value === null || !selectedCamera.value) return;
@@ -121,6 +126,13 @@ export default defineComponent({
       handler.selectCamera(camera, true);
     };
 
+    // Edit on the opposite camera
+    const editOnOppositeCamera = () => {
+      if (oppositeCamera.value) {
+        editOnCamera(oppositeCamera.value);
+      }
+    };
+
     return {
       selectedTrackId,
       selectedCamera,
@@ -130,11 +142,13 @@ export default defineComponent({
       currentCameraHasTrack,
       currentCameraHasDetection,
       linkableCameras,
+      oppositeCamera,
       deleteDetection,
       deleteTrackFromCamera,
       unlinkCurrentCamera,
       startLinkingToCamera,
       editOnCamera,
+      editOnOppositeCamera,
     };
   },
 });
@@ -145,46 +159,20 @@ export default defineComponent({
     v-if="selectedTrackId !== null && cameras.length > 1"
     class="d-flex align-center multicam-toolbar"
   >
-    <!-- Edit/Add detection on other cameras -->
-    <v-menu offset-y>
-      <template #activator="{ on, attrs }">
-        <v-tooltip bottom>
-          <template #activator="{ on: tooltipOn }">
-            <v-btn
-              v-bind="attrs"
-              small
-              class="mx-1 mode-button"
-              v-on="{ ...on, ...tooltipOn }"
-            >
-              <v-icon>mdi-pencil-plus</v-icon>
-            </v-btn>
-          </template>
-          <span>Edit detection on camera</span>
-        </v-tooltip>
-      </template>
-      <v-list dense>
-        <v-list-item
-          v-for="camera in cameras"
-          :key="camera"
-          @click="editOnCamera(camera)"
+    <!-- Edit/Add detection on opposite camera -->
+    <v-tooltip bottom>
+      <template #activator="{ on }">
+        <v-btn
+          small
+          class="mx-1 mode-button"
+          v-on="on"
+          @click="editOnOppositeCamera"
         >
-          <v-list-item-icon class="mr-2">
-            <v-icon
-              small
-              :color="cameraTrackInfo[camera]?.hasDetection ? 'success' : (cameraTrackInfo[camera]?.hasTrack ? 'warning' : 'grey')"
-            >
-              {{ cameraTrackInfo[camera]?.hasDetection ? 'mdi-check-circle' : (cameraTrackInfo[camera]?.hasTrack ? 'mdi-circle-outline' : 'mdi-plus-circle-outline') }}
-            </v-icon>
-          </v-list-item-icon>
-          <v-list-item-content>
-            <v-list-item-title>
-              {{ camera }}
-              <span v-if="camera === selectedCamera" class="text-caption">(current)</span>
-            </v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-menu>
+          <v-icon>mdi-pencil-plus</v-icon>
+        </v-btn>
+      </template>
+      <span>Edit detection on {{ oppositeCamera }}</span>
+    </v-tooltip>
 
     <!-- Link to another camera -->
     <v-menu

From b5d3d35ff847ff6fc6735fe8cf097338e368bfb1 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 7 Jan 2026 23:07:03 -0500
Subject: [PATCH 4/7] Add configuration option to settings

---
 .../desktop/frontend/components/Settings.vue  | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/platform/desktop/frontend/components/Settings.vue b/client/platform/desktop/frontend/components/Settings.vue
index 7a9ea7721..93ce64c5e 100644
--- a/client/platform/desktop/frontend/components/Settings.vue
+++ b/client/platform/desktop/frontend/components/Settings.vue
@@ -9,6 +9,7 @@ import { useRequest } from 'dive-common/use';
 import { NvidiaSmiReply } from 'platform/desktop/constants';
 import { cloneDeep, isEqual } from 'lodash';
 
+import { clientSettings } from 'dive-common/store/settings';
 import { autoDiscover } from '../store/dataset';
 import { settings, updateSettings, validateSettings } from '../store/settings';
 import { nvidiaSmi } from '../api';
@@ -73,6 +74,7 @@ export default defineComponent({
       appversion,
       arch,
       autoDiscoverState,
+      clientSettings,
       gitHash,
       platform,
       settings,
@@ -96,7 +98,7 @@ export default defineComponent({
     <navigation-bar />
     <v-container>
       <v-card v-if="localSettings">
-        <v-card-title>Settings</v-card-title>
+        <v-card-title>Folder Settings</v-card-title>
 
         <v-card-text>
           <v-row>
@@ -180,6 +182,22 @@ export default defineComponent({
           </v-btn>
         </v-card-text>
 
+        <v-card-title>Annotation Settings</v-card-title>
+        <v-card-text>
+          <v-row>
+            <v-col>
+              <v-switch
+                v-model="clientSettings.multiCamSettings.showToolbar"
+                color="primary"
+                label="Show multi-camera toolbar"
+                hint="Show multi-camera editing tools in the top toolbar when a track is selected"
+                persistent-hint
+                class="my-0"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+
         <v-card-title>Platform support</v-card-title>
         <v-card-subtitle>
           Not all checks must pass in order to use this application.

From 0327c4dbbd7a94881460657c2eed2cbd0803fafc Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 7 Jan 2026 23:12:29 -0500
Subject: [PATCH 5/7] Add quick keypress option

---
 client/dive-common/components/MultiCamToolbar.vue | 9 ++++++++-
 client/dive-common/components/Viewer.vue          | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/dive-common/components/MultiCamToolbar.vue b/client/dive-common/components/MultiCamToolbar.vue
index e5798b4f8..5c1ccf35b 100644
--- a/client/dive-common/components/MultiCamToolbar.vue
+++ b/client/dive-common/components/MultiCamToolbar.vue
@@ -10,6 +10,7 @@ import {
   useEditingMode,
 } from 'vue-media-annotator/provides';
 import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
+import { Mousetrap } from 'vue-media-annotator/types';
 
 export default defineComponent({
   name: 'MultiCamToolbar',
@@ -133,7 +134,12 @@ export default defineComponent({
       }
     };
 
+    const mousetrap: Mousetrap[] = [
+      { bind: 'e', handler: editOnOppositeCamera },
+    ];
+
     return {
+      mousetrap,
       selectedTrackId,
       selectedCamera,
       cameras,
@@ -157,6 +163,7 @@ export default defineComponent({
 <template>
   <div
     v-if="selectedTrackId !== null && cameras.length > 1"
+    v-mousetrap="mousetrap"
     class="d-flex align-center multicam-toolbar"
   >
     <!-- Edit/Add detection on opposite camera -->
@@ -171,7 +178,7 @@ export default defineComponent({
           <v-icon>mdi-pencil-plus</v-icon>
         </v-btn>
       </template>
-      <span>Edit detection on {{ oppositeCamera }}</span>
+      <span>Edit detection on {{ oppositeCamera }} (e)</span>
     </v-tooltip>
 
     <!-- Link to another camera -->
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index a3b77a2d9..040837bcf 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1139,6 +1139,7 @@ export default defineComponent({
             { bind: 'n', handler: () => !readonlyState && handler.trackAdd() },
             { bind: 'r', handler: () => aggregateController.resetZoom() },
             { bind: 'esc', handler: () => handler.trackAbort() },
+            { bind: 'e', handler: () => multiCamList.length === 1 && selectedTrackId !== null && handler.trackEdit(selectedTrackId) },
           ]"
           class="d-flex flex-column grow"
         >

From c151a0110d3d1862bf2ee104b5e50fcb0c997d16 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Thu, 8 Jan 2026 00:38:26 -0500
Subject: [PATCH 6/7] Switch to fixed 4 buttons

---
 .../components/MultiCamToolbar.vue            | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/client/dive-common/components/MultiCamToolbar.vue b/client/dive-common/components/MultiCamToolbar.vue
index 5c1ccf35b..d4caf26f5 100644
--- a/client/dive-common/components/MultiCamToolbar.vue
+++ b/client/dive-common/components/MultiCamToolbar.vue
@@ -72,6 +72,14 @@ export default defineComponent({
       (cam) => !cameraTrackInfo.value[cam]?.hasTrack,
     ));
 
+    // Can unlink when current camera has track and multiple cameras have the track
+    const canUnlink = computed(
+      () => currentCameraHasTrack.value && camerasWithTrack.value > 1,
+    );
+
+    // Can link when there are cameras without the track
+    const canLink = computed(() => linkableCameras.value.length > 0);
+
     // The opposite camera (first camera that isn't the currently selected one)
     const oppositeCamera = computed(() => cameras.value.find(
       (cam) => cam !== selectedCamera.value,
@@ -148,6 +156,8 @@ export default defineComponent({
       currentCameraHasTrack,
       currentCameraHasDetection,
       linkableCameras,
+      canUnlink,
+      canLink,
       oppositeCamera,
       deleteDetection,
       deleteTrackFromCamera,
@@ -181,9 +191,10 @@ export default defineComponent({
       <span>Edit detection on {{ oppositeCamera }} (e)</span>
     </v-tooltip>
 
-    <!-- Link to another camera -->
+    <!-- Link/Unlink button - switches between modes -->
+    <!-- Link mode: when there are cameras without the track -->
     <v-menu
-      v-if="linkableCameras.length > 0"
+      v-if="canLink"
       offset-y
     >
       <template #activator="{ on, attrs }">
@@ -213,17 +224,17 @@ export default defineComponent({
         </v-list-item>
       </v-list>
     </v-menu>
-
-    <!-- Unlink current camera -->
+    <!-- Unlink mode: when current camera has track and multiple cameras have it -->
     <v-tooltip
-      v-if="currentCameraHasTrack && camerasWithTrack > 1"
+      v-else
       bottom
     >
       <template #activator="{ on }">
         <v-btn
           small
           class="mx-1 mode-button"
-          color="warning"
+          :color="canUnlink ? 'warning' : undefined"
+          :disabled="!canUnlink"
           v-on="on"
           @click="unlinkCurrentCamera"
         >
@@ -234,14 +245,12 @@ export default defineComponent({
     </v-tooltip>
 
     <!-- Delete detection from current camera -->
-    <v-tooltip
-      v-if="currentCameraHasDetection"
-      bottom
-    >
+    <v-tooltip bottom>
       <template #activator="{ on }">
         <v-btn
           small
           class="mx-1 mode-button"
+          :disabled="!currentCameraHasDetection"
           v-on="on"
           @click="deleteDetection"
         >
@@ -252,15 +261,13 @@ export default defineComponent({
     </v-tooltip>
 
     <!-- Delete track from current camera -->
-    <v-tooltip
-      v-if="currentCameraHasTrack"
-      bottom
-    >
+    <v-tooltip bottom>
       <template #activator="{ on }">
         <v-btn
           small
           class="mx-1 mode-button"
-          color="error"
+          :color="currentCameraHasTrack ? 'error' : undefined"
+          :disabled="!currentCameraHasTrack"
           v-on="on"
           @click="deleteTrackFromCamera"
         >

From adbe96192f8e7436a1048ef91d1d0f49af6bb605 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Sat, 17 Jan 2026 13:22:41 -0500
Subject: [PATCH 7/7] refactor editor to defineComponent, add
 AnnotationVisibility component, add expand/collaspe icons and localStorage
 Setting

---
 .../components/AnnotationVisibilityMenu.vue   | 326 +++++++++++++++
 client/dive-common/components/EditorMenu.vue  | 376 +++++++++---------
 .../components/MultiCamToolbar.vue            | 369 +++++++++++++----
 client/dive-common/components/Viewer.vue      |   8 +-
 4 files changed, 809 insertions(+), 270 deletions(-)
 create mode 100644 client/dive-common/components/AnnotationVisibilityMenu.vue

diff --git a/client/dive-common/components/AnnotationVisibilityMenu.vue b/client/dive-common/components/AnnotationVisibilityMenu.vue
new file mode 100644
index 000000000..f4e1a4857
--- /dev/null
+++ b/client/dive-common/components/AnnotationVisibilityMenu.vue
@@ -0,0 +1,326 @@
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+  watch,
+} from 'vue';
+
+import { VisibleAnnotationTypes } from 'vue-media-annotator/layers';
+
+interface ButtonData {
+  id: string;
+  icon: string;
+  type?: VisibleAnnotationTypes;
+  active: boolean;
+  description: string;
+  click: () => void;
+}
+
+export default defineComponent({
+  name: 'AnnotationVisibilityMenu',
+  props: {
+    visibleModes: {
+      type: Array as PropType<(VisibleAnnotationTypes)[]>,
+      required: true,
+    },
+    tailSettings: {
+      type: Object as PropType<{ before: number; after: number }>,
+      required: true,
+    },
+  },
+  emits: ['set-annotation-state', 'update:tail-settings'],
+  setup(props, { emit }) {
+    const STORAGE_KEY = 'annotationVisibilityMenu.expanded';
+
+    // Load from localStorage or default to true
+    const loadExpandedState = (): boolean => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored !== null ? stored === 'true' : true;
+    };
+
+    const isExpanded = ref(loadExpandedState());
+
+    // Save to localStorage when state changes
+    watch(isExpanded, (value) => {
+      localStorage.setItem(STORAGE_KEY, String(value));
+    });
+
+    const isVisible = (mode: VisibleAnnotationTypes) => props.visibleModes.includes(mode);
+
+    const toggleVisible = (mode: VisibleAnnotationTypes) => {
+      if (isVisible(mode)) {
+        emit('set-annotation-state', {
+          visible: props.visibleModes.filter((m) => m !== mode),
+        });
+      } else {
+        emit('set-annotation-state', {
+          visible: props.visibleModes.concat([mode]),
+        });
+      }
+    };
+
+    const toggleExpanded = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+
+    const viewButtons = computed((): ButtonData[] => (
+      /* Only geometry primitives can be visible types right now */
+      [
+        {
+          id: 'rectangle',
+          type: 'rectangle',
+          icon: 'mdi-vector-square',
+          active: isVisible('rectangle'),
+          description: 'Rectangle',
+          click: () => toggleVisible('rectangle'),
+        },
+        {
+          id: 'Polygon',
+          type: 'Polygon',
+          icon: 'mdi-vector-polygon',
+          active: isVisible('Polygon'),
+          description: 'Polygon',
+          click: () => toggleVisible('Polygon'),
+        },
+        {
+          id: 'LineString',
+          type: 'LineString',
+          active: isVisible('LineString'),
+          icon: 'mdi-vector-line',
+          description: 'Head Tail',
+          click: () => toggleVisible('LineString'),
+        },
+        {
+          id: 'text',
+          type: 'text',
+          active: isVisible('text'),
+          icon: 'mdi-format-text',
+          description: 'Text',
+          click: () => toggleVisible('text'),
+        },
+        {
+          id: 'tooltip',
+          type: 'tooltip',
+          active: isVisible('tooltip'),
+          icon: 'mdi-tooltip-text-outline',
+          description: 'Tooltip',
+          click: () => toggleVisible('tooltip'),
+        },
+      ]));
+
+    const updateTailSettings = (type: 'before' | 'after', event: Event) => {
+      const value = Number.parseFloat((event.target as HTMLInputElement).value);
+      const settings = { ...props.tailSettings, [type]: value };
+      emit('update:tail-settings', settings);
+    };
+
+    return {
+      isExpanded,
+      viewButtons,
+      isVisible,
+      toggleVisible,
+      toggleExpanded,
+      updateTailSettings,
+    };
+  },
+});
+</script>
+
+<template>
+  <span class="pb-1">
+    <!-- Dropdown mode when collapsed -->
+    <v-menu
+      v-if="!isExpanded"
+      offset-y
+      :close-on-content-click="false"
+      min-width="300"
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn
+          v-bind="attrs"
+          class="mx-1 mode-button"
+          small
+          v-on="on"
+        >
+          <v-icon>mdi-eye</v-icon>
+          <v-btn
+            icon
+            x-small
+            class="ml-1 expand-toggle"
+            @click.stop="toggleExpanded"
+          >
+            <v-icon small>mdi-chevron-right</v-icon>
+          </v-btn>
+        </v-btn>
+      </template>
+      <v-list dense>
+        <v-list-item
+          v-for="button in viewButtons"
+          :key="`${button.id}-menu`"
+          @click="button.click"
+        >
+          <v-list-item-icon>
+            <v-btn
+              :color="button.active ? 'grey darken-2' : ''"
+              class="mx-1 mode-button"
+              small
+              @click="button.click"
+            >
+              <v-icon>{{ button.icon }}</v-icon>
+            </v-btn>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>{{ button.description }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-icon>
+            <v-btn
+              :color="isVisible('TrackTail') ? 'grey darken-2' : ''"
+              class="mx-1 mode-button"
+              small
+              @click="toggleVisible('TrackTail')"
+            >
+              <v-icon>mdi-navigation</v-icon>
+            </v-btn>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>Track Trails</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-divider />
+        <v-list-item v-if="isVisible('TrackTail')">
+          <v-list-item-content>
+            <v-card
+              class="pa-4 flex-column d-flex"
+              outlined
+              flat
+            >
+              <label for="frames-before">Frames before: {{ tailSettings.before }}</label>
+              <input
+                id="frames-before"
+                type="range"
+                name="frames-before"
+                class="tail-slider-width"
+                label
+                min="0"
+                max="100"
+                :value="tailSettings.before"
+                @input="updateTailSettings('before', $event)"
+              >
+              <div class="py-2" />
+              <label for="frames-after">Frames after: {{ tailSettings.after }}</label>
+              <input
+                id="frames-after"
+                type="range"
+                name="frames-after"
+                class="tail-slider-width"
+                min="0"
+                max="100"
+                :value="tailSettings.after"
+                @input="updateTailSettings('after', $event)"
+              >
+            </v-card>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+
+    <!-- Full button mode when expanded -->
+    <template v-else>
+      <span class="mr-1 px-3 py-1">
+        <v-icon class="pr-1">
+          mdi-eye
+        </v-icon>
+        <span class="text-subtitle-2">
+          Visibility
+        </span>
+        <v-btn
+          icon
+          x-small
+          class="ml-1 expand-toggle"
+          @click="toggleExpanded"
+        >
+          <v-icon small>mdi-chevron-left</v-icon>
+        </v-btn>
+      </span>
+      <v-btn
+        v-for="button in viewButtons"
+        :key="`${button.id}-view`"
+        :color="button.active ? 'grey darken-2' : ''"
+        class="mx-1 mode-button"
+        small
+        @click="button.click"
+      >
+        <v-icon>{{ button.icon }}</v-icon>
+      </v-btn>
+      <v-menu
+        open-on-hover
+        bottom
+        offset-y
+        :close-on-content-click="false"
+      >
+        <template #activator="{ on, attrs }">
+          <v-btn
+            v-bind="attrs"
+            :color="isVisible('TrackTail') ? 'grey darken-2' : ''"
+            class="mx-1 mode-button"
+            small
+            v-on="on"
+            @click="toggleVisible('TrackTail')"
+          >
+            <v-icon>mdi-navigation</v-icon>
+          </v-btn>
+        </template>
+        <v-card
+          class="pa-4 flex-column d-flex"
+          outlined
+        >
+          <label for="frames-before-full">Frames before: {{ tailSettings.before }}</label>
+          <input
+            id="frames-before-full"
+            type="range"
+            name="frames-before-full"
+            class="tail-slider-width"
+            label
+            min="0"
+            max="100"
+            :value="tailSettings.before"
+            @input="updateTailSettings('before', $event)"
+          >
+          <div class="py-2" />
+          <label for="frames-after-full">Frames after: {{ tailSettings.after }}</label>
+          <input
+            id="frames-after-full"
+            type="range"
+            name="frames-after-full"
+            class="tail-slider-width"
+            min="0"
+            max="100"
+            :value="tailSettings.after"
+            @input="updateTailSettings('after', $event)"
+          >
+        </v-card>
+      </v-menu>
+    </template>
+  </span>
+</template>
+
+<style scoped>
+.mode-button {
+  border: 1px solid grey;
+  min-width: 36px;
+}
+.tail-slider-width {
+  width: 240px;
+}
+.expand-toggle {
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+.expand-toggle:hover {
+  opacity: 1;
+}
+</style>
diff --git a/client/dive-common/components/EditorMenu.vue b/client/dive-common/components/EditorMenu.vue
index a4f84d8c5..13b74443a 100644
--- a/client/dive-common/components/EditorMenu.vue
+++ b/client/dive-common/components/EditorMenu.vue
@@ -1,22 +1,34 @@
 <script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+  watch,
+} from 'vue';
 import { flatten } from 'lodash';
-import Vue, { PropType } from 'vue';
 
 import { Mousetrap } from 'vue-media-annotator/types';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
 import Recipe from 'vue-media-annotator/recipe';
 
+import AnnotationVisibilityMenu from './AnnotationVisibilityMenu.vue';
+
 interface ButtonData {
   id: string;
   icon: string;
   type?: VisibleAnnotationTypes;
   active: boolean;
   mousetrap?: Mousetrap[];
+  description: string;
   click: () => void;
 }
 
-export default Vue.extend({
+export default defineComponent({
   name: 'EditorMenu',
+  components: {
+    AnnotationVisibilityMenu,
+  },
   props: {
     editingTrack: {
       type: Boolean,
@@ -51,47 +63,61 @@ export default Vue.extend({
       default: () => ({ before: 20, after: 10 }),
     },
   },
-  data() {
-    return {
-      toolTipForce: false,
-      toolTimeTimeout: 0,
-      modeToolTips: {
-        Creating: {
-          rectangle: 'Drag to draw rectangle. Press ESC to exit.',
-          Polygon: 'Click to place vertices. Right click to close.',
-          LineString: 'Click to place head/tail points.',
-        },
-        Editing: {
-          rectangle: 'Drag vertices to resize the rectangle',
-          Polygon: 'Drag midpoints to create new vertices. Click vertices to select for deletion.',
-          LineString: 'Click endpoints to select for deletion.',
-        },
+  emits: ['set-annotation-state', 'update:tail-settings'],
+  setup(props, { emit }) {
+    const toolTimeTimeout = ref<number | null>(null);
+    const STORAGE_KEY = 'editorMenu.editButtonsExpanded';
+
+    // Load from localStorage or default to true
+    const loadExpandedState = (): boolean => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored !== null ? stored === 'true' : true;
+    };
+
+    const isEditButtonsExpanded = ref(loadExpandedState());
+
+    // Save to localStorage when state changes
+    watch(isEditButtonsExpanded, (value) => {
+      localStorage.setItem(STORAGE_KEY, String(value));
+    });
+
+    const modeToolTips = {
+      Creating: {
+        rectangle: 'Drag to draw rectangle. Press ESC to exit.',
+        Polygon: 'Click to place vertices. Right click to close.',
+        LineString: 'Click to place head/tail points.',
+      },
+      Editing: {
+        rectangle: 'Drag vertices to resize the rectangle',
+        Polygon: 'Drag midpoints to create new vertices. Click vertices to select for deletion.',
+        LineString: 'Click endpoints to select for deletion.',
       },
     };
-  },
-  computed: {
-    editButtons(): ButtonData[] {
-      const em = this.editingMode;
+
+    const editButtons = computed((): ButtonData[] => {
+      const em = props.editingMode;
       return [
         {
           id: 'rectangle',
           icon: 'mdi-vector-square',
-          active: this.editingTrack && em === 'rectangle',
+          active: props.editingTrack && em === 'rectangle',
+          description: 'Rectangle',
           mousetrap: [{
             bind: '1',
             handler: () => {
-              this.$emit('set-annotation-state', { editing: 'rectangle' });
+              emit('set-annotation-state', { editing: 'rectangle' });
             },
           }],
           click: () => {
-            this.$emit('set-annotation-state', { editing: 'rectangle' });
+            emit('set-annotation-state', { editing: 'rectangle' });
           },
         },
         /* Include recipes as editing modes if they're toggleable */
-        ...this.recipes.filter((r) => r.toggleable.value).map((r, i) => ({
+        ...props.recipes.filter((r) => r.toggleable.value).map((r, i) => ({
           id: r.name,
           icon: r.icon.value || 'mdi-pencil',
-          active: this.editingTrack && r.active.value,
+          active: props.editingTrack && r.active.value,
+          description: r.name,
           click: () => r.activate(),
           mousetrap: [
             {
@@ -102,94 +128,69 @@ export default Vue.extend({
           ],
         })),
       ];
-    },
-    viewButtons(): ButtonData[] {
-      /* Only geometry primitives can be visible types right now */
-      return [
-        {
-          id: 'rectangle',
-          type: 'rectangle',
-          icon: 'mdi-vector-square',
-          active: this.isVisible('rectangle'),
-          click: () => this.toggleVisible('rectangle'),
-        },
-        {
-          id: 'Polygon',
-          type: 'Polygon',
-          icon: 'mdi-vector-polygon',
-          active: this.isVisible('Polygon'),
-          click: () => this.toggleVisible('Polygon'),
-        },
-        {
-          id: 'LineString',
-          type: 'LineString',
-          active: this.isVisible('LineString'),
-          icon: 'mdi-vector-line',
-          click: () => this.toggleVisible('LineString'),
-        },
-        {
-          id: 'text',
-          type: 'text',
-          active: this.isVisible('text'),
-          icon: 'mdi-format-text',
-          click: () => this.toggleVisible('text'),
-        },
-        {
-          id: 'tooltip',
-          type: 'tooltip',
-          active: this.isVisible('tooltip'),
-          icon: 'mdi-tooltip-text-outline',
-          click: () => this.toggleVisible('tooltip'),
-        },
-      ];
-    },
-    mousetrap(): Mousetrap[] {
-      return flatten(this.editButtons.map((b) => b.mousetrap || []));
-    },
-    editingHeader() {
-      if (this.groupEditActive) {
+    });
+
+    const mousetrap = computed((): Mousetrap[] => flatten(editButtons.value.map((b) => b.mousetrap || [])));
+
+    const activeEditButton = computed(() => editButtons.value.find((b) => b.active) || editButtons.value[0]);
+
+    const toggleEditButtonsExpanded = () => {
+      isEditButtonsExpanded.value = !isEditButtonsExpanded.value;
+    };
+
+    const editButtonsMenuKey = computed(() => `${props.editingMode}-${editButtons.value.length}-${activeEditButton.value?.id || ''}`);
+
+    const editingHeader = computed(() => {
+      if (props.groupEditActive) {
         return { text: 'Group Edit Mode', icon: 'mdi-group', color: 'primary' };
       }
-      if (this.multiSelectActive) {
+      if (props.multiSelectActive) {
         return { text: 'Multi-select Mode', icon: 'mdi-call-merge', color: 'error' };
       }
-      if (this.editingDetails !== 'disabled') {
+      if (props.editingDetails !== 'disabled') {
         return {
-          text: `${this.editingDetails} ${this.editingMode} `,
-          icon: this.editingDetails === 'Creating' ? 'mdi-pencil-plus' : 'mdi-pencil',
-          color: this.editingDetails === 'Creating' ? 'success' : 'primary',
+          text: `${props.editingDetails} ${props.editingMode} `,
+          icon: props.editingDetails === 'Creating' ? 'mdi-pencil-plus' : 'mdi-pencil',
+          color: props.editingDetails === 'Creating' ? 'success' : 'primary',
         };
       }
       return { text: 'Not editing', icon: 'mdi-pencil-off-outline', color: '' };
-    },
-  },
-  watch: {
-    editingDetails() {
-      clearTimeout(this.toolTimeTimeout);
-      if (this.editingDetails !== 'disabled') {
-        this.toolTipForce = true;
-        this.toolTimeTimeout = setTimeout(() => { this.toolTipForce = false; }, 2000) as unknown as number;
-      } else {
-        this.toolTipForce = false;
+    });
+
+    const editingTooltip = computed(() => {
+      if (props.editingDetails === 'disabled' || !props.editingMode || typeof props.editingMode !== 'string') {
+        return '';
       }
-    },
-  },
-  methods: {
-    isVisible(mode: VisibleAnnotationTypes) {
-      return this.visibleModes.includes(mode);
-    },
+      const tips = modeToolTips[props.editingDetails];
+      if (!tips) {
+        return '';
+      }
+      const mode = props.editingMode as keyof typeof modeToolTips.Creating;
+      return tips[mode] || '';
+    });
 
-    toggleVisible(mode: VisibleAnnotationTypes) {
-      if (this.isVisible(mode)) {
-        this.$emit('set-annotation-state', {
-          visible: this.visibleModes.filter((m) => m !== mode),
-        });
-      } else {
-        this.$emit('set-annotation-state', {
-          visible: this.visibleModes.concat([mode]),
-        });
+    watch(() => props.editingDetails, () => {
+      if (toolTimeTimeout.value !== null) {
+        clearTimeout(toolTimeTimeout.value);
       }
-    },
+      if (props.editingDetails !== 'disabled') {
+        toolTimeTimeout.value = setTimeout(() => {
+          // Tooltip timeout handler - can be extended if needed
+        }, 2000) as unknown as number;
+      }
+    });
+
+    return {
+      modeToolTips,
+      editButtons,
+      mousetrap,
+      editingHeader,
+      editingTooltip,
+      isEditButtonsExpanded,
+      toggleEditButtonsExpanded,
+      activeEditButton,
+      editButtonsMenuKey,
+    };
   },
 });
 </script>
@@ -222,98 +223,111 @@ export default Vue.extend({
               Multi-select in progress.  Editing is disabled.
               Select additional tracks to merge or group.
             </span>
-            <span v-else-if="editingDetails !== 'disabled'">
-              {{ modeToolTips[editingDetails][editingMode] }}
+            <span v-else-if="editingDetails !== 'disabled' && editingMode && typeof editingMode === 'string'">
+              {{ editingTooltip }}
             </span>
             <span v-else>Right click on an annotation to edit</span>
           </div>
         </div>
       </div>
-      <v-btn
-        v-for="button in editButtons"
-        :key="button.id + 'view'"
-        :disabled="!editingMode"
-        :outlined="!button.active"
-        :color="button.active ? editingHeader.color : ''"
-        class="mx-1"
-        small
-        @click="button.click"
+      <!-- Collapsed mode for edit buttons -->
+      <v-menu
+        v-if="!isEditButtonsExpanded"
+        :key="editButtonsMenuKey"
+        offset-y
+        :close-on-content-click="false"
       >
-        <pre v-if="button.mousetrap">{{ button.mousetrap[0].bind }}:</pre>
-        <v-icon>{{ button.icon }}</v-icon>
-      </v-btn>
-      <slot name="delete-controls" />
-      <slot name="multicam-controls-left" />
-      <v-spacer />
-      <slot name="multicam-controls-right" />
-      <span class="pb-1">
+        <template #activator="{ on, attrs }">
+          <v-btn
+            v-bind="attrs"
+            :disabled="!editingMode"
+            :outlined="!activeEditButton?.active"
+            :color="activeEditButton?.active ? editingHeader.color : ''"
+            class="mx-1"
+            small
+            v-on="on"
+          >
+            <pre v-if="activeEditButton?.mousetrap">{{ activeEditButton.mousetrap[0].bind }}:</pre>
+            <v-icon>{{ activeEditButton?.icon }}</v-icon>
+            <v-btn
+              icon
+              x-small
+              class="ml-1 expand-toggle"
+              @click.stop="toggleEditButtonsExpanded"
+            >
+              <v-icon small>
+                mdi-chevron-right
+              </v-icon>
+            </v-btn>
+          </v-btn>
+        </template>
+        <v-list dense>
+          <v-list-item
+            v-for="button in editButtons"
+            :key="`${button.id}-menu`"
+          >
+            <v-list-item-icon>
+              <v-btn
+                :disabled="!editingMode"
+                :outlined="!button.active"
+                :color="button.active ? editingHeader.color : ''"
+                class="mx-1"
+                small
+                @click="button.click"
+              >
+                <pre v-if="button.mousetrap">{{ button.mousetrap[0].bind }}:</pre>
+                <v-icon>{{ button.icon }}</v-icon>
+              </v-btn>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title>{{ button.id }}</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
+      <!-- Expanded mode for edit buttons -->
+      <template v-else>
         <span class="mr-1 px-3 py-1">
           <v-icon class="pr-1">
-            mdi-eye
+            mdi-pencil
           </v-icon>
           <span class="text-subtitle-2">
-            Visibility
+            Edit Types
           </span>
+          <v-btn
+            icon
+            x-small
+            class="ml-1 expand-toggle"
+            @click="toggleEditButtonsExpanded"
+          >
+            <v-icon small>mdi-chevron-left</v-icon>
+          </v-btn>
         </span>
         <v-btn
-          v-for="button in viewButtons"
-          :key="button.id"
-          :color="button.active ? 'grey darken-2' : ''"
-          class="mx-1 mode-button"
+          v-for="button in editButtons"
+          :key="button.id + 'view'"
+          :disabled="!editingMode"
+          :outlined="!button.active"
+          :color="button.active ? editingHeader.color : ''"
+          class="mx-1"
           small
           @click="button.click"
         >
+          <pre v-if="button.mousetrap">{{ button.mousetrap[0].bind }}:</pre>
           <v-icon>{{ button.icon }}</v-icon>
         </v-btn>
-        <v-menu
-          open-on-hover
-          bottom
-          offset-y
-          :close-on-content-click="false"
-        >
-          <template #activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              :color="isVisible('TrackTail') ? 'grey darken-2' : ''"
-              class="mx-1 mode-button"
-              small
-              v-on="on"
-              @click="toggleVisible('TrackTail')"
-            >
-              <v-icon>mdi-navigation</v-icon>
-            </v-btn>
-          </template>
-          <v-card
-            class="pa-4 flex-column d-flex"
-            outlined
-          >
-            <label for="frames-before">Frames before: {{ tailSettings.before }}</label>
-            <input
-              id="frames-before"
-              type="range"
-              name="frames-before"
-              class="tail-slider-width"
-              label
-              min="0"
-              max="100"
-              :value="tailSettings.before"
-              @input="$emit('update:tail-settings', { ...tailSettings, before: Number.parseFloat($event.target.value) })"
-            >
-            <div class="py-2" />
-            <label for="frames-after">Frames after: {{ tailSettings.after }}</label>
-            <input
-              id="frames-after"
-              type="range"
-              name="frames-after"
-              class="tail-slider-width"
-              min="0"
-              max="100"
-              :value="tailSettings.after"
-              @input="$emit('update:tail-settings', { ...tailSettings, after: Number.parseFloat($event.target.value) })"
-            >
-          </v-card>
-        </v-menu>
-      </span>
+      </template>
+      <slot name="delete-controls" />
+      <v-spacer />
+      <slot name="multicam-controls" />
+      <v-spacer />
+      <annotation-visibility-menu
+        :visible-modes="visibleModes"
+        :tail-settings="tailSettings"
+        @set-annotation-state="$emit('set-annotation-state', $event)"
+        @update:tail-settings="$emit('update:tail-settings', $event)"
+      />
     </div>
   </v-row>
 </template>
@@ -332,7 +346,11 @@ export default Vue.extend({
 .mode-button{
   border: 1px solid grey;
 }
-.tail-slider-width {
-  width: 240px;
+.expand-toggle {
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+.expand-toggle:hover {
+  opacity: 1;
 }
 </style>
diff --git a/client/dive-common/components/MultiCamToolbar.vue b/client/dive-common/components/MultiCamToolbar.vue
index d4caf26f5..b3f2a2abf 100644
--- a/client/dive-common/components/MultiCamToolbar.vue
+++ b/client/dive-common/components/MultiCamToolbar.vue
@@ -1,5 +1,10 @@
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+import {
+  computed,
+  defineComponent,
+  ref,
+  watch,
+} from 'vue';
 import {
   useCameraStore,
   useHandler,
@@ -12,6 +17,16 @@ import {
 import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
 import { Mousetrap } from 'vue-media-annotator/types';
 
+interface ToolbarButton {
+  id: string;
+  icon: string;
+  tooltip: string;
+  action?: () => void;
+  disabled?: boolean;
+  color?: string;
+  menu?: { items: Array<{ label: string; action: () => void }> };
+}
+
 export default defineComponent({
   name: 'MultiCamToolbar',
   setup() {
@@ -25,6 +40,20 @@ export default defineComponent({
 
     const cameras = computed(() => [...cameraStore.camMap.value.keys()]);
     const canary = ref(false);
+    const STORAGE_KEY = 'multiCamToolbar.expanded';
+
+    // Load from localStorage or default to true
+    const loadExpandedState = (): boolean => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored !== null ? stored === 'true' : true;
+    };
+
+    const isExpanded = ref(loadExpandedState());
+
+    // Save to localStorage when state changes
+    watch(isExpanded, (value) => {
+      localStorage.setItem(STORAGE_KEY, String(value));
+    });
 
     function _depend(): boolean {
       return canary.value;
@@ -142,6 +171,72 @@ export default defineComponent({
       }
     };
 
+    const toggleExpanded = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+
+    const toolbarButtons = computed((): ToolbarButton[] => {
+      // Ensure reactivity by accessing canary
+      _depend();
+      const buttons: ToolbarButton[] = [
+        {
+          id: 'edit-opposite',
+          icon: 'mdi-pencil-plus',
+          tooltip: `Edit detection on ${oppositeCamera.value} (e)`,
+          action: editOnOppositeCamera,
+        },
+      ];
+
+      if (canLink.value) {
+        buttons.push({
+          id: 'link',
+          icon: 'mdi-link-variant-plus',
+          tooltip: 'Link track to camera',
+          menu: {
+            items: linkableCameras.value.map((cam) => ({
+              label: `Link to ${cam}`,
+              action: () => startLinkingToCamera(cam),
+            })),
+          },
+        });
+      } else {
+        buttons.push({
+          id: 'unlink',
+          icon: 'mdi-link-variant-minus',
+          tooltip: 'Unlink track from current camera',
+          action: unlinkCurrentCamera,
+          disabled: !canUnlink.value,
+          color: canUnlink.value ? 'warning' : undefined,
+        });
+      }
+
+      buttons.push(
+        {
+          id: 'delete-detection',
+          icon: 'mdi-star-minus',
+          tooltip: 'Delete detection from current camera',
+          action: deleteDetection,
+          disabled: !currentCameraHasDetection.value,
+        },
+        {
+          id: 'delete-track',
+          icon: 'mdi-delete',
+          tooltip: 'Delete track from current camera',
+          action: deleteTrackFromCamera,
+          disabled: !currentCameraHasTrack.value,
+          color: currentCameraHasTrack.value ? 'error' : undefined,
+        },
+      );
+
+      return buttons;
+    });
+
+    // Create a key for the menu to force re-render when buttons change
+    const menuKey = computed(() => {
+      _depend();
+      return `${selectedTrackId.value}-${toolbarButtons.value.length}-${canLink.value}-${canUnlink.value}`;
+    });
+
     const mousetrap: Mousetrap[] = [
       { bind: 'e', handler: editOnOppositeCamera },
     ];
@@ -165,118 +260,216 @@ export default defineComponent({
       startLinkingToCamera,
       editOnCamera,
       editOnOppositeCamera,
+      isExpanded,
+      toggleExpanded,
+      toolbarButtons,
+      menuKey,
     };
   },
 });
 </script>
 
 <template>
-  <div
+  <span
     v-if="selectedTrackId !== null && cameras.length > 1"
     v-mousetrap="mousetrap"
-    class="d-flex align-center multicam-toolbar"
+    class="pb-1"
   >
-    <!-- Edit/Add detection on opposite camera -->
-    <v-tooltip bottom>
-      <template #activator="{ on }">
+    <!-- Dropdown mode when collapsed -->
+    <v-menu
+      v-if="!isExpanded"
+      :key="menuKey"
+      offset-y
+      :close-on-content-click="false"
+    >
+      <template #activator="{ on, attrs }">
         <v-btn
-          small
+          v-bind="attrs"
           class="mx-1 mode-button"
+          small
           v-on="on"
-          @click="editOnOppositeCamera"
         >
-          <v-icon>mdi-pencil-plus</v-icon>
+          <v-icon>mdi-image-multiple</v-icon>
+          <v-btn
+            icon
+            x-small
+            class="ml-1 expand-toggle"
+            @click.stop="toggleExpanded"
+          >
+            <v-icon small>mdi-chevron-right</v-icon>
+          </v-btn>
         </v-btn>
       </template>
-      <span>Edit detection on {{ oppositeCamera }} (e)</span>
-    </v-tooltip>
-
-    <!-- Link/Unlink button - switches between modes -->
-    <!-- Link mode: when there are cameras without the track -->
-    <v-menu
-      v-if="canLink"
-      offset-y
-    >
-      <template #activator="{ on, attrs }">
-        <v-tooltip bottom>
-          <template #activator="{ on: tooltipOn }">
+      <v-list dense>
+        <v-list-item
+          v-for="button in toolbarButtons"
+          :key="`${button.id}-menu`"
+        >
+          <v-list-item-icon>
             <v-btn
-              v-bind="attrs"
-              small
+              v-if="!button.menu"
+              :color="button.color"
+              :disabled="button.disabled"
               class="mx-1 mode-button"
-              v-on="{ ...on, ...tooltipOn }"
+              small
+              @click="button.action"
             >
-              <v-icon>mdi-link-variant-plus</v-icon>
+              <v-icon>{{ button.icon }}</v-icon>
             </v-btn>
-          </template>
-          <span>Link track to camera</span>
-        </v-tooltip>
-      </template>
-      <v-list dense>
-        <v-list-item
-          v-for="camera in linkableCameras"
-          :key="camera"
-          @click="startLinkingToCamera(camera)"
-        >
+            <v-menu
+              v-else
+              offset-y
+            >
+              <template #activator="{ on: menuOn, attrs: menuAttrs }">
+                <v-btn
+                  v-bind="menuAttrs"
+                  class="mx-1 mode-button"
+                  small
+                  v-on="menuOn"
+                >
+                  <v-icon>{{ button.icon }}</v-icon>
+                </v-btn>
+              </template>
+              <v-list dense>
+                <v-list-item
+                  v-for="item in button.menu.items"
+                  :key="item.label"
+                  @click="item.action"
+                >
+                  <v-list-item-content>
+                    <v-list-item-title>{{ item.label }}</v-list-item-title>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-list-item-icon>
           <v-list-item-content>
-            <v-list-item-title>Link to {{ camera }}</v-list-item-title>
+            <v-list-item-title>{{ button.tooltip }}</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </v-list>
     </v-menu>
-    <!-- Unlink mode: when current camera has track and multiple cameras have it -->
-    <v-tooltip
-      v-else
-      bottom
-    >
-      <template #activator="{ on }">
-        <v-btn
-          small
-          class="mx-1 mode-button"
-          :color="canUnlink ? 'warning' : undefined"
-          :disabled="!canUnlink"
-          v-on="on"
-          @click="unlinkCurrentCamera"
-        >
-          <v-icon>mdi-link-variant-minus</v-icon>
-        </v-btn>
-      </template>
-      <span>Unlink track from current camera</span>
-    </v-tooltip>
 
-    <!-- Delete detection from current camera -->
-    <v-tooltip bottom>
-      <template #activator="{ on }">
+    <!-- Full button mode when expanded -->
+    <template v-else>
+      <span class="mr-1 px-3 py-1">
+        <v-icon class="pr-1">
+          mdi-image-multiple
+        </v-icon>
+        <span class="text-subtitle-2">
+          Multi-Cam Tools
+        </span>
         <v-btn
-          small
-          class="mx-1 mode-button"
-          :disabled="!currentCameraHasDetection"
-          v-on="on"
-          @click="deleteDetection"
+          icon
+          x-small
+          class="ml-1 mr-0 mr-0 expand-toggle"
+          @click="toggleExpanded"
         >
-          <v-icon>mdi-star-minus</v-icon>
+          <v-icon small class="mr-0">mdi-chevron-left</v-icon>
         </v-btn>
-      </template>
-      <span>Delete detection from current camera</span>
-    </v-tooltip>
+      </span>
+      <!-- Edit/Add detection on opposite camera -->
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-btn
+            small
+            class="mx-1 mode-button"
+            v-on="on"
+            @click="editOnOppositeCamera"
+          >
+            <v-icon>mdi-pencil-plus</v-icon>
+          </v-btn>
+        </template>
+        <span>Edit detection on {{ oppositeCamera }} (e)</span>
+      </v-tooltip>
 
-    <!-- Delete track from current camera -->
-    <v-tooltip bottom>
-      <template #activator="{ on }">
-        <v-btn
-          small
-          class="mx-1 mode-button"
-          :color="currentCameraHasTrack ? 'error' : undefined"
-          :disabled="!currentCameraHasTrack"
-          v-on="on"
-          @click="deleteTrackFromCamera"
-        >
-          <v-icon>mdi-delete</v-icon>
-        </v-btn>
-      </template>
-      <span>Delete track from current camera</span>
-    </v-tooltip>
-  </div>
+      <!-- Link/Unlink button - switches between modes -->
+      <!-- Link mode: when there are cameras without the track -->
+      <v-menu
+        v-if="canLink"
+        offset-y
+      >
+        <template #activator="{ on, attrs }">
+          <v-tooltip bottom>
+            <template #activator="{ on: tooltipOn }">
+              <v-btn
+                v-bind="attrs"
+                small
+                class="mx-1 mode-button"
+                v-on="{ ...on, ...tooltipOn }"
+              >
+                <v-icon>mdi-link-variant-plus</v-icon>
+              </v-btn>
+            </template>
+            <span>Link track to camera</span>
+          </v-tooltip>
+        </template>
+        <v-list dense>
+          <v-list-item
+            v-for="camera in linkableCameras"
+            :key="camera"
+            @click="startLinkingToCamera(camera)"
+          >
+            <v-list-item-content>
+              <v-list-item-title>Link to {{ camera }}</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <!-- Unlink mode: when current camera has track and multiple cameras have it -->
+      <v-tooltip
+        v-else
+        bottom
+      >
+        <template #activator="{ on }">
+          <v-btn
+            small
+            class="mx-1 mode-button"
+            :color="canUnlink ? 'warning' : undefined"
+            :disabled="!canUnlink"
+            v-on="on"
+            @click="unlinkCurrentCamera"
+          >
+            <v-icon>mdi-link-variant-minus</v-icon>
+          </v-btn>
+        </template>
+        <span>Unlink track from current camera</span>
+      </v-tooltip>
+
+      <!-- Delete detection from current camera -->
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-btn
+            small
+            class="mx-1 mode-button"
+            :disabled="!currentCameraHasDetection"
+            v-on="on"
+            @click="deleteDetection"
+          >
+            <v-icon>mdi-star-minus</v-icon>
+          </v-btn>
+        </template>
+        <span>Delete detection from current camera</span>
+      </v-tooltip>
+
+      <!-- Delete track from current camera -->
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-btn
+            small
+            class="mx-1 mode-button"
+            :color="currentCameraHasTrack ? 'error' : undefined"
+            :disabled="!currentCameraHasTrack"
+            v-on="on"
+            @click="deleteTrackFromCamera"
+          >
+            <v-icon>mdi-delete</v-icon>
+          </v-btn>
+        </template>
+        <span>Delete track from current camera</span>
+      </v-tooltip>
+    </template>
+  </span>
 </template>
 
 <style scoped>
@@ -285,5 +478,13 @@ export default defineComponent({
 }
 .mode-button {
   border: 1px solid grey;
+  min-width: 36px;
+}
+.expand-toggle {
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+.expand-toggle:hover {
+  opacity: 1;
 }
 </style>
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 040837bcf..b3da641be 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1012,15 +1012,9 @@ export default defineComponent({
               @delete-annotation="handler.removeAnnotation"
             />
           </template>
-          <template
-            v-if="multiCamList.length > 1 && clientSettings.multiCamSettings.showToolbar && selectedCamera === multiCamList[0]"
-            slot="multicam-controls-left"
-          >
-            <multi-cam-toolbar />
-          </template>
           <template
             v-if="multiCamList.length > 1 && clientSettings.multiCamSettings.showToolbar && selectedCamera !== multiCamList[0]"
-            slot="multicam-controls-right"
+            slot="multicam-controls"
           >
             <multi-cam-toolbar />
           </template>