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/plugins/vuetify.ts

@@ -1,41 +1,53 @@
-import Vue from "vue";
-import Vuetify from "vuetify";
-import "vuetify/dist/vuetify.min.css";
+import "vuetify/styles";
 import "@mdi/font/css/materialdesignicons.css";
-import type { VuetifyThemeVariant } from "vuetify/types/services/theme";
+import type { ThemeDefinition } from "vuetify/lib/composables/theme";
+import { createVuetify } from "vuetify";
 
-Vue.use(Vuetify);
-
-const darkTheme: VuetifyThemeVariant = Object.freeze({
-  primary: "#006492",
-  secondary: "#39A4D5",
-  accent: "#FFD843",
-  background: "#232C37",
+const commonColors = {
   error: "#b80000",
   info: "#2196F3",
   success: "#4CAF50",
   warning: "#FFC107"
-});
+};
 
-const lightTheme: VuetifyThemeVariant = Object.freeze({
-  primary: "#006492",
-  secondary: "#39A4D5",
-  accent: "#FFD843",
-  background: "#232C37",
-  error: "#b80000",
-  info: "#2196F3",
-  success: "#4CAF50",
-  warning: "#FFC107"
-});
+const DarkTheme: ThemeDefinition = {
+  dark: true,
+  colors: {
+    primary: "#006492",
+    secondary: "#39A4D5",
+    accent: "#FFD843",
+    background: "#232C37",
+    ...commonColors
+  }
+};
 
-export default new Vuetify({
+const LightTheme: ThemeDefinition = {
+  dark: false,
+  colors: {
+    background: "#232C37",
+    primary: "#006492",
+    surface: "#006492",
+    secondary: "#39A4D5",
+    "surface-variant": "#358AB0",
+    accent: "#FFD843",
+    "surface-light": "#FFD843",
+    ...commonColors
+  },
+  variables: {
+    "medium-emphasis-opacity": 1,
+    "high-emphasis-opacity": 1
+  }
+};
+
+export default createVuetify({
   theme: {
+    defaultTheme: "LightTheme",
     themes: {
-      light: lightTheme,
-      dark: darkTheme
+      LightTheme: LightTheme,
+      DarkTheme: DarkTheme
     }
   },
-  breakpoint: {
+  display: {
     thresholds: {
       md: 1460,
       lg: 2000