Vue 3 Upgrade (#1900)

## Description

Upgrades to Vue 3 and necessary associated dependencies. Also fixes some
issues with the layout and adds validation for object detection models.

Closes #885, closes #1943, closes #1449.
## Meta

Merge checklist:
- [x] Pull Request title is [short, imperative
summary](https://cbea.ms/git-commit/) of proposed changes
- [x] The description documents the _what_ and _why_
- [ ] If this PR changes behavior or adds a feature, user documentation
is updated
- [ ] If this PR touches photon-serde, all messages have been
regenerated and hashes have not changed unexpectedly
- [ ] If this PR touches configuration, this is backwards compatible
with settings back to v2024.3.1
- [ ] If this PR touches pipeline settings or anything related to data
exchange, the frontend typing is updated
- [ ] If this PR addresses a bug, a regression test for it is added

---------

Co-authored-by: Matt M <matthew.morley.ca@gmail.com>
Co-authored-by: Gold856 <117957790+Gold856@users.noreply.github.com>
Co-authored-by: samfreund <techguy763@gmail.com>

photon-client/src/components/app/photon-camera-stream.vue

@@ -3,7 +3,7 @@ import { computed, inject, ref, onBeforeUnmount } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import loadingImage from "@/assets/images/loading-transparent.svg";
-import type { StyleValue } from "vue/types/jsx";
+import type { StyleValue } from "vue";
 import PvIcon from "@/components/common/pv-icon.vue";
 import type { UiCameraConfiguration } from "@/types/SettingTypes";
 

photon-client/src/components/app/photon-error-snackbar.vue

@@ -5,7 +5,7 @@ import { useStateStore } from "@/stores/StateStore";
 <template>
   <v-snackbar
     v-model="useStateStore().snackbarData.show"
-    top
+    location="top"
     :color="useStateStore().snackbarData.color"
     :timeout="useStateStore().snackbarData.timeout"
   >

photon-client/src/components/app/photon-log-entry.vue

@@ -7,13 +7,13 @@ const props = defineProps<{ source: LogMessage }>();
 const logColorClass = computed<string>(() => {
   switch (props.source.level) {
     case LogLevel.ERROR:
-      return "red--text";
+      return "text-red";
     case LogLevel.WARN:
-      return "yellow--text";
+      return "text-yellow";
     case LogLevel.INFO:
-      return "light-blue--text";
+      return "text-light-blue";
     case LogLevel.DEBUG:
-      return "white--text";
+      return "text-white";
   }
   return "";
 });

photon-client/src/components/app/photon-log-view.vue

@@ -3,7 +3,7 @@ import { computed, inject, ref, watch } from "vue";
 import { LogLevel, type LogMessage } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";
 import LogEntry from "@/components/app/photon-log-entry.vue";
-import VirtualList from "vue-virtual-scroll-list";
+import VirtualList from "vue3-virtual-scroll-list";
 
 const backendHost = inject<string>("backendHost");
 
@@ -74,15 +74,15 @@ document.addEventListener("keydown", (e) => {
 
 <template>
   <v-dialog v-model="useStateStore().showLogModal" width="1500" dark>
-    <v-card dark class="dialog-container pa-6" color="primary" flat>
+    <v-card class="dialog-container pa-6" color="primary" flat>
       <!-- Logs header -->
-      <v-row class="no-gutters pb-3">
+      <v-row class="pb-3">
         <v-col cols="4">
           <v-card-title class="pa-0">Program Logs</v-card-title>
         </v-col>
         <v-col class="align-self-center pl-3" style="text-align: right">
-          <v-btn text color="white" @click="handleLogExport">
-            <v-icon left class="menu-icon"> mdi-download </v-icon>
+          <v-btn variant="text" color="white" @click="handleLogExport">
+            <v-icon start class="menu-icon"> mdi-download </v-icon>
             <span class="menu-label">Download</span>
 
             <!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
@@ -94,12 +94,12 @@ document.addEventListener("keydown", (e) => {
               target="_blank"
             />
           </v-btn>
-          <v-btn text color="white" @click="handleLogClear">
-            <v-icon left class="menu-icon"> mdi-trash-can-outline </v-icon>
+          <v-btn variant="text" color="white" @click="handleLogClear">
+            <v-icon start class="menu-icon"> mdi-trash-can-outline </v-icon>
             <span class="menu-label">Clear Client Logs</span>
           </v-btn>
-          <v-btn text color="white" @click="() => (useStateStore().showLogModal = false)">
-            <v-icon left class="menu-icon"> mdi-close </v-icon>
+          <v-btn variant="text" color="white" @click="() => (useStateStore().showLogModal = false)">
+            <v-icon start class="menu-icon"> mdi-close </v-icon>
             <span class="menu-label">Close</span>
           </v-btn>
         </v-col>
@@ -109,38 +109,28 @@ document.addEventListener("keydown", (e) => {
 
       <div class="dialog-data">
         <!-- Log view options -->
-        <v-row class="pt-4 pt-md-0 no-gutters">
-          <v-col cols="12" md="5" class="align-self-center">
+        <v-row no-gutters class="pt-4 pt-md-0" style="display: flex; justify-content: space-between">
+          <v-col cols="12" md="7" style="display: flex; align-items: center">
             <v-text-field
               v-model="searchQuery"
-              dark
-              dense
+              density="compact"
               clearable
               hide-details="auto"
               prepend-icon="mdi-magnify"
               color="accent"
               label="Search"
+              variant="underlined"
             />
-          </v-col>
-          <v-col cols="12" md="2" style="display: flex; align-items: center">
-            <input v-model="timeInput" type="time" step="1" class="white--text pl-0 pl-md-8" />
-            <v-btn icon class="ml-3" @click="timeInput = undefined">
+            <input v-model="timeInput" type="time" step="1" class="text-white pl-3" />
+            <v-btn icon variant="flat" @click="timeInput = undefined">
               <v-icon>mdi-close-circle-outline</v-icon>
             </v-btn>
           </v-col>
-          <v-col cols="12" md="5" class="pr-3">
-            <v-row class="no-gutters">
-              <v-col v-for="level in [0, 1, 2, 3]" :key="level">
-                <v-row dense align="center">
-                  <v-col cols="6" md="8" style="text-align: right">
-                    {{ getLogLevelFromIndex(level) }}
-                  </v-col>
-                  <v-col cols="6" md="4">
-                    <v-switch v-model="selectedLogLevels[level]" dark color="#ffd843" />
-                  </v-col>
-                </v-row>
-              </v-col>
-            </v-row>
+          <v-col v-for="level in [0, 1, 2, 3]" :key="level" class="pr-3">
+            <div class="pb-0 pt-0" style="display: flex; align-items: center; flex: min-content">
+              {{ getLogLevelFromIndex(level)
+              }}<v-switch v-model="selectedLogLevels[level]" class="pl-2" hide-details color="#ffd843"></v-switch>
+            </div>
           </v-col>
         </v-row>
 

photon-client/src/components/app/photon-sidebar.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance } from "vue";
+import { computed } from "vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { PlaceholderCameraSettings } from "@/types/SettingTypes";
-import { useRoute } from "vue2-helpers/vue-router";
+import { useRoute } from "vue-router";
+import { useDisplay } from "vuetify";
 
 const compact = computed<boolean>({
   get: () => {
@@ -14,9 +15,9 @@ const compact = computed<boolean>({
     useStateStore().setSidebarFolded(val);
   }
 });
+const { mdAndUp } = useDisplay();
 
-// Vuetify2 doesn't yet support the useDisplay API so this is required to access the prop when using the Composition API
-const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndUp || false);
+const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
 
 const needsCamerasConfigured = computed<boolean>(() => {
   return (
@@ -27,115 +28,99 @@ const needsCamerasConfigured = computed<boolean>(() => {
 </script>
 
 <template>
-  <v-navigation-drawer dark app permanent :mini-variant="compact || !mdAndUp" color="primary">
-    <v-list>
+  <v-navigation-drawer permanent :rail="renderCompact" color="primary">
+    <v-list nav>
       <!-- List item for the heading; note that there are some tricks in setting padding and image width make things look right -->
-      <v-list-item :class="compact || !mdAndUp ? 'pr-0 pl-0' : ''" style="display: flex; justify-content: center">
-        <v-list-item-icon class="mr-0">
-          <img v-if="!(compact || !mdAndUp)" class="logo" src="@/assets/images/logoLarge.svg" alt="large logo" />
+      <v-list-item :class="renderCompact ? 'pr-0 pl-0' : ''" style="display: flex; justify-content: center">
+        <template #prepend>
+          <img v-if="!renderCompact" class="logo" src="@/assets/images/logoLarge.svg" alt="large logo" />
           <img v-else class="logo" src="@/assets/images/logoSmall.svg" alt="small logo" />
-        </v-list-item-icon>
+        </template>
       </v-list-item>
 
-      <v-list-item link to="/dashboard">
-        <v-list-item-icon>
-          <v-icon>mdi-view-dashboard</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>Dashboard</v-list-item-title>
-        </v-list-item-content>
+      <v-list-item link to="/dashboard" prepend-icon="mdi-view-dashboard">
+        <v-list-item-title>Dashboard</v-list-item-title>
       </v-list-item>
-      <v-list-item link to="/settings">
-        <v-list-item-icon>
-          <v-icon>mdi-cog</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>Settings</v-list-item-title>
-        </v-list-item-content>
+      <v-list-item link to="/settings" prepend-icon="mdi-cog">
+        <v-list-item-title>Settings</v-list-item-title>
       </v-list-item>
-      <v-list-item ref="camerasTabOpener" link to="/cameras">
-        <v-list-item-icon>
-          <v-icon>mdi-camera</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>Camera</v-list-item-title>
-        </v-list-item-content>
+      <v-list-item ref="camerasTabOpener" link to="/cameras" prepend-icon="mdi-camera">
+        <v-list-item-title>Camera</v-list-item-title>
       </v-list-item>
       <v-list-item
         link
         to="/cameraConfigs"
         :class="{ cameraicon: needsCamerasConfigured && useRoute().path !== '/cameraConfigs' }"
       >
-        <v-list-item-icon>
-          <v-icon :class="{ 'red--text': needsCamerasConfigured }">mdi-swap-horizontal-bold</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title :class="{ 'red--text': needsCamerasConfigured }">Camera Matching</v-list-item-title>
-        </v-list-item-content>
+        <template #prepend>
+          <v-icon :class="{ 'text-red': needsCamerasConfigured }">mdi-swap-horizontal-bold</v-icon>
+        </template>
+        <v-list-item-title :class="{ 'text-red': needsCamerasConfigured }">Camera Matching</v-list-item-title>
       </v-list-item>
-      <v-list-item link to="/docs">
-        <v-list-item-icon>
-          <v-icon>mdi-bookshelf</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>Documentation</v-list-item-title>
-        </v-list-item-content>
+      <v-list-item link to="/docs" prepend-icon="mdi-bookshelf">
+        <v-list-item-title>Documentation</v-list-item-title>
       </v-list-item>
-
-      <div style="position: absolute; bottom: 0; left: 0">
-        <v-list-item v-if="mdAndUp" link @click="() => (compact = !compact)">
-          <v-list-item-icon>
-            <v-icon v-if="compact || !mdAndUp"> mdi-chevron-right </v-icon>
-            <v-icon v-else> mdi-chevron-left </v-icon>
-          </v-list-item-icon>
-          <v-list-item-content>
-            <v-list-item-title>Compact Mode</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-        <v-list-item>
-          <v-list-item-icon>
-            <v-icon v-if="useSettingsStore().network.runNTServer"> mdi-server </v-icon>
-            <v-icon v-else-if="useStateStore().ntConnectionStatus.connected"> mdi-robot </v-icon>
-            <v-icon v-else style="border-radius: 100%"> mdi-robot-off </v-icon>
-          </v-list-item-icon>
-          <v-list-item-content>
-            <v-list-item-title v-if="useSettingsStore().network.runNTServer" class="text-wrap">
-              NetworkTables server running for
-              <span class="accent--text">{{ useStateStore().ntConnectionStatus.clients || 0 }}</span> clients
-            </v-list-item-title>
-            <v-list-item-title
-              v-else-if="useStateStore().ntConnectionStatus.connected && useStateStore().backendConnected"
-              class="text-wrap"
-              style="flex-direction: column; display: flex"
-            >
-              NetworkTables Server Connected!
-              <span class="accent--text">
-                {{ useStateStore().ntConnectionStatus.address }}
-              </span>
-            </v-list-item-title>
-            <v-list-item-title v-else class="text-wrap" style="flex-direction: column; display: flex">
-              Not connected to NetworkTables Server!
-            </v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-
-        <v-list-item>
-          <v-list-item-icon>
-            <v-icon v-if="useStateStore().backendConnected"> mdi-server-network </v-icon>
-            <v-icon v-else style="border-radius: 100%"> mdi-server-network-off </v-icon>
-          </v-list-item-icon>
-          <v-list-item-content>
-            <v-list-item-title class="text-wrap">
-              {{ useStateStore().backendConnected ? "Backend connected" : "Trying to connect to backend" }}
-            </v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-      </div>
     </v-list>
+    <template #append>
+      <v-list nav>
+        <v-list-item
+          v-if="mdAndUp"
+          link
+          :prepend-icon="`mdi-chevron-${compact || !mdAndUp ? 'right' : 'left'}`"
+          @click="() => (compact = !compact)"
+        >
+          <v-list-item-title>Compact Mode</v-list-item-title>
+        </v-list-item>
+        <v-list-item
+          :prepend-icon="
+            useSettingsStore().network.runNTServer
+              ? 'mdi-server'
+              : useStateStore().ntConnectionStatus.connected
+                ? 'mdi-robot'
+                : 'mdi-robot-off'
+          "
+        >
+          <v-list-item-title v-if="useSettingsStore().network.runNTServer" v-show="!renderCompact" class="text-wrap">
+            NetworkTables server running for
+            <span class="text-accent">{{ useStateStore().ntConnectionStatus.clients || 0 }}</span> clients
+          </v-list-item-title>
+          <v-list-item-title
+            v-else-if="useStateStore().ntConnectionStatus.connected && useStateStore().backendConnected"
+            v-show="!renderCompact"
+            class="text-wrap"
+            style="flex-direction: column; display: flex"
+          >
+            NetworkTables Server Connected!
+            <span class="text-accent">
+              {{ useStateStore().ntConnectionStatus.address }}
+            </span>
+          </v-list-item-title>
+          <v-list-item-title
+            v-else
+            v-show="!renderCompact"
+            class="text-wrap"
+            style="flex-direction: column; display: flex"
+          >
+            Not connected to NetworkTables Server!
+          </v-list-item-title>
+        </v-list-item>
+
+        <v-list-item :prepend-icon="useStateStore().backendConnected ? 'mdi-server-network' : 'mdi-server-network-off'">
+          <v-list-item-title v-show="!renderCompact" class="text-wrap">
+            {{ useStateStore().backendConnected ? "Backend connected" : "Trying to connect to backend" }}
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </template>
   </v-navigation-drawer>
 </template>
 
 <style scoped>
+.v-list-item-title {
+  font-size: 1rem !important;
+  line-height: 1.2rem !important;
+}
+
 .logo {
   width: 100%;
   height: 70px;