(
+ undefined
+ );
+
+ let cameras;
+ if (config?.cameras) {
+ cameras = Object.keys(config.cameras).map((name) => (
+
+ setSelectedCamera(name)}>
+ {name}
+
+
+ ));
+ }
+
+ return (
+ <>
+ {!config && }
+
+ Components testing
+
+
+
+
+ {selectedCamera && }
+
+ );
+}
+
+function Camera({ cameraName }: { cameraName: string }) {
+ const { payload: detectValue, send: sendDetect } = useDetectState(cameraName);
+
+ return (
+ <>
+
+ {cameraName}
+
+
+
+ sendDetect(detectValue === "ON" ? "OFF" : "ON", true)
+ }
+ />
+
+
+
+ );
+}
+
+export default Dashboard;
diff --git a/web-new/src/pages/Export.tsx b/web-new/src/pages/Export.tsx
new file mode 100644
index 000000000..a03c64668
--- /dev/null
+++ b/web-new/src/pages/Export.tsx
@@ -0,0 +1,11 @@
+import Heading from "@/components/ui/heading";
+
+function Export() {
+ return (
+ <>
+ Export
+
+ );
+}
+
+export default Export;
diff --git a/web-new/src/pages/History.tsx b/web-new/src/pages/History.tsx
new file mode 100644
index 000000000..a5ea4ea95
--- /dev/null
+++ b/web-new/src/pages/History.tsx
@@ -0,0 +1,11 @@
+import Heading from "@/components/ui/heading";
+
+function History() {
+ return (
+ <>
+ History
+
+ );
+}
+
+export default History;
diff --git a/web-new/src/pages/Live.tsx b/web-new/src/pages/Live.tsx
new file mode 100644
index 000000000..4a0ebae35
--- /dev/null
+++ b/web-new/src/pages/Live.tsx
@@ -0,0 +1,11 @@
+import Heading from "@/components/ui/heading";
+
+function Live() {
+ return (
+
+ Birdseye
+
+ );
+}
+
+export default Live;
diff --git a/web-new/src/pages/Logs.tsx b/web-new/src/pages/Logs.tsx
new file mode 100644
index 000000000..16cae73ba
--- /dev/null
+++ b/web-new/src/pages/Logs.tsx
@@ -0,0 +1,11 @@
+import Heading from "@/components/ui/heading";
+
+function Logs() {
+ return (
+ <>
+ Logs
+
+ );
+}
+
+export default Logs;
diff --git a/web-new/src/pages/NoMatch.tsx b/web-new/src/pages/NoMatch.tsx
new file mode 100644
index 000000000..c3660928b
--- /dev/null
+++ b/web-new/src/pages/NoMatch.tsx
@@ -0,0 +1,12 @@
+import Heading from "@/components/ui/heading";
+
+function NoMatch() {
+ return (
+ <>
+ 404
+ Page not found
+
+ );
+}
+
+export default NoMatch;
diff --git a/web-new/src/pages/Settings.tsx b/web-new/src/pages/Settings.tsx
new file mode 100644
index 000000000..b80040203
--- /dev/null
+++ b/web-new/src/pages/Settings.tsx
@@ -0,0 +1,44 @@
+import Heading from "@/components/ui/heading";
+import { Label } from "@/components/ui/label";
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+
+function Settings() {
+ return (
+ <>
+ Settings
+
+ {}} />
+
+
+
+
+
+
+
+ );
+}
+
+export default Settings;
diff --git a/web-new/src/pages/Storage.tsx b/web-new/src/pages/Storage.tsx
new file mode 100644
index 000000000..00886c004
--- /dev/null
+++ b/web-new/src/pages/Storage.tsx
@@ -0,0 +1,11 @@
+import Heading from "@/components/ui/heading";
+
+function Storage() {
+ return (
+ <>
+ Storage
+
+ );
+}
+
+export default Storage;
diff --git a/web-new/src/pages/System.tsx b/web-new/src/pages/System.tsx
new file mode 100644
index 000000000..2a9c456a6
--- /dev/null
+++ b/web-new/src/pages/System.tsx
@@ -0,0 +1,11 @@
+import Heading from "@/components/ui/heading";
+
+function System() {
+ return (
+ <>
+ System
+
+ );
+}
+
+export default System;
diff --git a/web-new/src/types/frigateConfig.ts b/web-new/src/types/frigateConfig.ts
new file mode 100644
index 000000000..44afd96dc
--- /dev/null
+++ b/web-new/src/types/frigateConfig.ts
@@ -0,0 +1,402 @@
+export interface FrigateConfig {
+ audio: {
+ enabled: boolean;
+ enabled_in_config: boolean | null;
+ filters: string[] | null;
+ listen: string[];
+ max_not_heard: number;
+ min_volume: number;
+ num_threads: number;
+ };
+
+ birdseye: {
+ enabled: boolean;
+ height: number;
+ mode: "objects";
+ quality: number;
+ restream: boolean;
+ width: number;
+ };
+
+ cameras: {
+ [cameraName: string]: {
+ audio: {
+ enabled: boolean;
+ enabled_in_config: boolean;
+ filters: string[] | null;
+ listen: string[];
+ max_not_heard: number;
+ min_volume: number;
+ num_threads: number;
+ };
+ best_image_timeout: number;
+ birdseye: {
+ enabled: boolean;
+ mode: "objects";
+ order: number;
+ };
+ detect: {
+ annotation_offset: number;
+ enabled: boolean;
+ fps: number;
+ height: number;
+ max_disappeared: number;
+ min_initialized: number;
+ stationary: {
+ interval: number;
+ max_frames: {
+ default: number | null;
+ objects: Record;
+ };
+ threshold: number;
+ };
+ width: number;
+ };
+ enabled: boolean;
+ ffmpeg: {
+ global_args: string[];
+ hwaccel_args: string;
+ input_args: string;
+ inputs: {
+ global_args: string[];
+ hwaccel_args: string[];
+ input_args: string;
+ path: string;
+ roles: string[];
+ }[];
+ output_args: {
+ detect: string[];
+ record: string;
+ rtmp: string;
+ };
+ retry_interval: number;
+ };
+ ffmpeg_cmds: {
+ cmd: string;
+ roles: string[];
+ }[];
+ live: {
+ height: number;
+ quality: number;
+ stream_name: string;
+ };
+ motion: {
+ contour_area: number;
+ delta_alpha: number;
+ frame_alpha: number;
+ frame_height: number;
+ improve_contrast: boolean;
+ lightning_threshold: number;
+ mask: string[];
+ mqtt_off_delay: number;
+ threshold: number;
+ };
+ mqtt: {
+ bounding_box: boolean;
+ crop: boolean;
+ enabled: boolean;
+ height: number;
+ quality: number;
+ required_zones: string[];
+ timestamp: boolean;
+ };
+ name: string;
+ objects: {
+ filters: {
+ [objectName: string]: {
+ mask: string | null;
+ max_area: number;
+ max_ratio: number;
+ min_area: number;
+ min_ratio: number;
+ min_score: number;
+ threshold: number;
+ };
+ };
+ mask: string;
+ track: string[];
+ };
+ onvif: {
+ autotracking: {
+ calibrate_on_startup: boolean,
+ enabled: boolean;
+ enabled_in_config: boolean;
+ movement_weights: string[];
+ required_zones: string[];
+ return_preset: string;
+ timeout: number;
+ track: string[];
+ zoom_factor: number;
+ zooming: string;
+ };
+ host: string;
+ password: string | null;
+ port: number;
+ user: string | null;
+ };
+ record: {
+ enabled: boolean;
+ enabled_in_config: boolean;
+ events: {
+ objects: string[] | null;
+ post_capture: number;
+ pre_capture: number;
+ required_zones: string[];
+ retain: {
+ default: number;
+ mode: string;
+ objects: Record;
+ };
+ };
+ expire_interval: number;
+ export: {
+ timelapse_args: string;
+ };
+ preview: {
+ quality: string;
+ };
+ retain: {
+ days: number;
+ mode: string;
+ };
+ sync_recordings: boolean;
+ };
+ rtmp: {
+ enabled: boolean;
+ };
+ snapshots: {
+ bounding_box: boolean;
+ clean_copy: boolean;
+ crop: boolean;
+ enabled: boolean;
+ height: number | null;
+ quality: number;
+ required_zones: string[];
+ retain: {
+ default: number;
+ mode: string;
+ objects: Record;
+ };
+ timestamp: boolean;
+ };
+ timestamp_style: {
+ color: {
+ blue: number;
+ green: number;
+ red: number;
+ };
+ effect: string | null;
+ format: string;
+ position: string;
+ thickness: number;
+ };
+ ui: {
+ dashboard: boolean;
+ order: number;
+ };
+ webui_url: string | null;
+ zones: {
+ [zoneName: string]: {
+ coordinates: string;
+ filters: Record;
+ inertia: number;
+ objects: any[];
+ };
+ };
+ };
+ };
+
+ database: {
+ path: string;
+ };
+
+ detect: {
+ annotation_offset: number;
+ enabled: boolean;
+ fps: number;
+ height: number | null;
+ max_disappeared: number | null;
+ min_initialized: number | null;
+ stationary: {
+ interval: number | null;
+ max_frames: {
+ default: number | null;
+ objects: Record;
+ };
+ threshold: number | null;
+ };
+ width: number | null;
+ };
+
+ detectors: {
+ coral: {
+ device: string;
+ model: {
+ height: number;
+ input_pixel_format: string;
+ input_tensor: string;
+ labelmap: Record;
+ labelmap_path: string | null;
+ model_type: string;
+ path: string;
+ width: number;
+ };
+ type: string;
+ };
+ };
+
+ environment_vars: Record;
+
+ ffmpeg: {
+ global_args: string[];
+ hwaccel_args: string;
+ input_args: string;
+ output_args: {
+ detect: string[];
+ record: string;
+ rtmp: string;
+ };
+ retry_interval: number;
+ };
+
+ go2rtc: Record;
+
+ live: {
+ height: number;
+ quality: number;
+ stream_name: string;
+ };
+
+ logger: {
+ default: string;
+ logs: Record;
+ };
+
+ model: {
+ height: number;
+ input_pixel_format: string;
+ input_tensor: string;
+ labelmap: Record;
+ labelmap_path: string | null;
+ model_type: string;
+ path: string | null;
+ width: number;
+ };
+
+ motion: Record | null;
+
+ mqtt: {
+ client_id: string;
+ enabled: boolean;
+ host: string;
+ port: number;
+ stats_interval: number;
+ tls_ca_certs: string | null;
+ tls_client_cert: string | null;
+ tls_client_key: string | null;
+ tls_insecure: boolean | null;
+ topic_prefix: string;
+ user: string | null;
+ };
+
+ objects: {
+ filters: {
+ [objectName: string]: {
+ mask: string | null;
+ max_area: number;
+ max_ratio: number;
+ min_area: number;
+ min_ratio: number;
+ min_score: number;
+ threshold: number;
+ };
+ };
+ mask: string;
+ track: string[];
+ };
+
+ plus: {
+ enabled: boolean;
+ };
+
+ record: {
+ enabled: boolean;
+ enabled_in_config: boolean | null;
+ events: {
+ objects: string[] | null;
+ post_capture: number;
+ pre_capture: number;
+ required_zones: string[];
+ retain: {
+ default: number;
+ mode: string;
+ objects: Record;
+ };
+ };
+ expire_interval: number;
+ export: {
+ timelapse_args: string;
+ };
+ preview: {
+ quality: string;
+ };
+ retain: {
+ days: number;
+ mode: string;
+ };
+ sync_recordings: boolean;
+ };
+
+ rtmp: {
+ enabled: boolean;
+ };
+
+ snapshots: {
+ bounding_box: boolean;
+ clean_copy: boolean;
+ crop: boolean;
+ enabled: boolean;
+ height: number | null;
+ quality: number;
+ required_zones: string[];
+ retain: {
+ default: number;
+ mode: string;
+ objects: Record;
+ };
+ timestamp: boolean;
+ };
+
+ telemetry: {
+ network_interfaces: any[];
+ stats: {
+ amd_gpu_stats: boolean;
+ intel_gpu_stats: boolean;
+ network_bandwidth: boolean;
+ };
+ version_check: boolean;
+ };
+
+ timestamp_style: {
+ color: {
+ blue: number;
+ green: number;
+ red: number;
+ };
+ effect: string | null;
+ format: string;
+ position: string;
+ thickness: number;
+ };
+
+ ui: {
+ date_style: string;
+ live_mode: string;
+ strftime_fmt: string | null;
+ time_format: string;
+ time_style: string;
+ timezone: string | null;
+ use_experimental: boolean;
+ };
+
+}
\ No newline at end of file
diff --git a/web-new/src/vite-env.d.ts b/web-new/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/web-new/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/web-new/tailwind.config.js b/web-new/tailwind.config.js
new file mode 100644
index 000000000..0377ea1de
--- /dev/null
+++ b/web-new/tailwind.config.js
@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ["class"],
+ content: [
+ './pages/**/*.{ts,tsx}',
+ './components/**/*.{ts,tsx}',
+ './app/**/*.{ts,tsx}',
+ './src/**/*.{ts,tsx}',
+ ],
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: 0 },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: 0 },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+}
\ No newline at end of file
diff --git a/web-new/themes/theme-blue.css b/web-new/themes/theme-blue.css
new file mode 100644
index 000000000..be2609668
--- /dev/null
+++ b/web-new/themes/theme-blue.css
@@ -0,0 +1,46 @@
+@layer base {
+ .theme-blue.light {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+ --primary: 221.2 83.2% 53.3%;
+ --primary-foreground: 210 40% 98%;
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 221.2 83.2% 53.3%;
+ --radius: 0.5rem;
+ }
+
+ .theme-blue.dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+ --primary: 217.2 91.2% 59.8%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 224.3 76.3% 48%;
+ }
+}
diff --git a/web-new/themes/theme-default.css b/web-new/themes/theme-default.css
new file mode 100644
index 000000000..ce094fe99
--- /dev/null
+++ b/web-new/themes/theme-default.css
@@ -0,0 +1,121 @@
+@layer base {
+ :root {
+ --background-hsl: hsl(0 0% 100%);
+ --background: 0 0% 100%;
+
+ --foreground: hsl(222.2 84% 4.9%);
+ --foreground: 222.2 84% 4.9%;
+
+ --card: hsl(0 0% 100%);
+ --card: 0 0% 100%;
+
+ --card-foreground: hsl(222.2 84% 4.9%);
+ --card-foreground: 222.2 84% 4.9%;
+
+ --popover: hsl(0 0% 100%);
+ --popover: 0 0% 100%;
+
+ --popover-foreground: hsl(222.2 84% 4.9%);
+ --popover-foreground: 222.2 84% 4.9%;
+
+ --primary: hsl(222.2 47.4% 11.2%);
+ --primary: 222.2 47.4% 11.2%;
+
+ --primary-foreground: hsl(210 40% 98%);
+ --primary-foreground: 210 40% 98%;
+
+ --secondary: hsl(210 40% 96.1%);
+ --secondary: 210 40% 96.1%;
+
+ --secondary-foreground: hsl(222.2 47.4% 11.2%);
+ --secondary-foreground: 222.2 47.4% 11.2%;
+
+ --muted: hsl(210 40% 96.1%);
+ --muted: 210 40% 96.1%;
+
+ --muted-foreground: hsl(215.4 16.3% 46.9%);
+ --muted-foreground: 215.4 16.3% 46.9%;
+
+ --accent: hsl(210 40% 96.1%);
+ --accent: 210 40% 96.1%;
+
+ --accent-foreground: hsl(222.2 47.4% 11.2%);
+ --accent-foreground: 222.2 47.4% 11.2%;
+
+ --destructive: hsl(0 84.2% 60.2%);
+ --destructive: 0 84.2% 60.2%;
+
+ --destructive-foreground: hsl(210 40% 98%);
+ --destructive-foreground: 210 40% 98%;
+
+ --border: hsl(214.3 31.8% 91.4%);
+ --border: 214.3 31.8% 91.4%;
+
+ --input: hsl(214.3 31.8% 91.4%);
+ --input: 214.3 31.8% 91.4%;
+
+ --ring: hsl(222.2 84% 4.9%);
+ --ring: 222.2 84% 4.9%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background-hsl: hsl(222.2 84% 4.9%);
+ --background: 222.2 84% 4.9%;
+
+ --foreground: hsl(210 40% 98%);
+ --foreground: 210 40% 98%;
+
+ --card: hsl(222.2 84% 4.9%);
+ --card: 222.2 84% 4.9%;
+
+ --card-foreground: hsl(210 40% 98%);
+ --card-foreground: 210 40% 98%;
+
+ --popover: hsl(222.2 84% 4.9%);
+ --popover: 222.2 84% 4.9%;
+
+ --popover-foreground: hsl(210 40% 98%);
+ --popover-foreground: 210 40% 98%;
+
+ --primary: hsl(210 40% 98%);
+ --primary: 210 40% 98%;
+
+ --primary-foreground: hsl(222.2 47.4% 11.2%);
+ --primary-foreground: 222.2 47.4% 11.2%;
+
+ --secondary: hsl(217.2 32.6% 17.5%);
+ --secondary: 217.2 32.6% 17.5%;
+
+ --secondary-foreground: hsl(210 40% 98%);
+ --secondary-foreground: 210 40% 98%;
+
+ --muted: hsl(217.2 32.6% 17.5%);
+ --muted: 217.2 32.6% 17.5%;
+
+ --muted-foreground: hsl(215 20.2% 65.1%);
+ --muted-foreground: 215 20.2% 65.1%;
+
+ --accent: hsl(217.2 32.6% 17.5%);
+ --accent: 217.2 32.6% 17.5%;
+
+ --accent-foreground: hsl(210 40% 98%);
+ --accent-foreground: 210 40% 98%;
+
+ --destructive: hsl(0 62.8% 30.6%);
+ --destructive: 0 62.8% 30.6%;
+
+ --destructive-foreground: hsl(210 40% 98%);
+ --destructive-foreground: 210 40% 98%;
+
+ --border: hsl(217.2 32.6% 17.5%);
+ --border: 217.2 32.6% 17.5%;
+
+ --input: hsl(217.2 32.6% 17.5%);
+ --input: 217.2 32.6% 17.5%;
+
+ --ring: hsl(212.7 26.8% 83.9%);
+ --ring: 212.7 26.8% 83.9%;
+ }
+}
diff --git a/web-new/themes/theme-gold.css b/web-new/themes/theme-gold.css
new file mode 100644
index 000000000..4b9ddaaf4
--- /dev/null
+++ b/web-new/themes/theme-gold.css
@@ -0,0 +1,61 @@
+.theme-gold.light {
+ --background: 38, 77%, 88%;
+ --foreground: 16, 43%, 34%;
+
+ --muted: 28, 46%, 56%;
+ --muted-foreground: 16, 43%, 34%;
+
+ --popover: 38, 77%, 88%;
+ --popover-foreground: 16, 43%, 34%;
+
+ --border: 28, 46%, 56%;
+ --input: 28, 46%, 56%;
+
+ --card: 38, 77%, 88%;
+ --card-foreground: 16, 43%, 34%;
+
+ --primary: 28, 46%, 56%;
+ --primary-foreground: 60, 70%, 90%;
+
+ --secondary: 39, 100%, 73%;
+ --secondary-foreground: 16, 43%, 34%;
+
+ --accent: 39, 100%, 73%;
+ --accent-foreground: 16, 43%, 34%;
+
+ --destructive: 16, 43%, 34%;
+ --destructive-foreground: 38, 77%, 88%;
+
+ --ring: 28, 46%, 56%;
+}
+
+.theme-gold.dark {
+ --background: 16, 43%, 34%;
+ --foreground: 38, 77%, 88%;
+
+ --muted: 28, 46%, 56%;
+ --muted-foreground: 38, 77%, 88%;
+
+ --popover: 16, 43%, 34%;
+ --popover-foreground: 38, 77%, 88%;
+
+ --border: 28, 46%, 56%;
+ --input: 28, 46%, 56%;
+
+ --card: 16, 43%, 34%;
+ --card-foreground: 38, 77%, 88%;
+
+ --primary: 28, 46%, 56%;
+ --primary-foreground: 60, 70%, 90%;
+
+ --secondary: 39, 100%, 73%;
+ --secondary-foreground: 16, 43%, 34%;
+
+ --accent: 39, 100%, 52%;
+ --accent-foreground: 16, 43%, 34%;
+
+ --destructive: 38, 77%, 88%;
+ --destructive-foreground: 16, 43%, 34%;
+
+ --ring: 28, 46%, 56%;
+}
diff --git a/web-new/themes/theme-green.css b/web-new/themes/theme-green.css
new file mode 100644
index 000000000..9919c00ca
--- /dev/null
+++ b/web-new/themes/theme-green.css
@@ -0,0 +1,46 @@
+@layer base {
+ .theme-green.light {
+ --background: 0 0% 100%;
+ --foreground: 240 10% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 240 10% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 240 10% 3.9%;
+ --primary: 142.1 76.2% 36.3%;
+ --primary-foreground: 355.7 100% 97.3%;
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 5.9% 10%;
+ --muted: 240 4.8% 95.9%;
+ --muted-foreground: 240 3.8% 46.1%;
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 10%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 5.9% 90%;
+ --input: 240 5.9% 90%;
+ --ring: 142.1 76.2% 36.3%;
+ --radius: 0.5rem;
+ }
+
+ .theme-green.dark {
+ --background: 20 14.3% 4.1%;
+ --foreground: 0 0% 95%;
+ --card: 24 9.8% 10%;
+ --card-foreground: 0 0% 95%;
+ --popover: 0 0% 9%;
+ --popover-foreground: 0 0% 95%;
+ --primary: 142.1 70.6% 45.3%;
+ --primary-foreground: 144.9 80.4% 10%;
+ --secondary: 240 3.7% 15.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 0 0% 15%;
+ --muted-foreground: 240 5% 64.9%;
+ --accent: 12 6.5% 15.1%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 85.7% 97.3%;
+ --border: 240 3.7% 15.9%;
+ --input: 240 3.7% 15.9%;
+ --ring: 142.4 71.8% 29.2%;
+ }
+}
diff --git a/web-new/themes/theme-nature.css b/web-new/themes/theme-nature.css
new file mode 100644
index 000000000..6fcd1be03
--- /dev/null
+++ b/web-new/themes/theme-nature.css
@@ -0,0 +1,61 @@
+.theme-nature.light {
+ --background: 58, 65%, 83%;
+ --foreground: 187, 33%, 43%;
+
+ --muted: 70, 20%, 68%;
+ --muted-foreground: 187, 33%, 43%;
+
+ --popover: 58, 65%, 83%;
+ --popover-foreground: 187, 33%, 43%;
+
+ --border: 93, 28%, 56%;
+ --input: 93, 28%, 56%;
+
+ --card: 58, 65%, 83%;
+ --card-foreground: 187, 33%, 43%;
+
+ --primary: 93, 28%, 56%;
+ --primary-foreground: 58, 65%, 83%;
+
+ --secondary: 70, 20%, 68%;
+ --secondary-foreground: 187, 33%, 43%;
+
+ --accent: 70, 20%, 68%;
+ --accent-foreground: 187, 33%, 43%;
+
+ --destructive: 187, 33%, 43%;
+ --destructive-foreground: 58, 65%, 83%;
+
+ --ring: 93, 28%, 56%;
+}
+
+.theme-nature.dark {
+ --background: 187, 33%, 43%;
+ --foreground: 58, 65%, 83%;
+
+ --muted: 70, 20%, 68%;
+ --muted-foreground: 58, 65%, 83%;
+
+ --popover: 187, 33%, 43%;
+ --popover-foreground: 58, 65%, 83%;
+
+ --border: 93, 28%, 56%;
+ --input: 93, 28%, 56%;
+
+ --card: 187, 33%, 43%;
+ --card-foreground: 58, 65%, 83%;
+
+ --primary: 93, 28%, 56%;
+ --primary-foreground: 187, 33%, 43%;
+
+ --secondary: 70, 20%, 68%;
+ --secondary-foreground: 58, 65%, 83%;
+
+ --accent: 70, 20%, 68%;
+ --accent-foreground: 58, 65%, 83%;
+
+ --destructive: 58, 65%, 83%;
+ --destructive-foreground: 187, 33%, 43%;
+
+ --ring: 93, 28%, 56%;
+}
diff --git a/web-new/themes/theme-netflix.css b/web-new/themes/theme-netflix.css
new file mode 100644
index 000000000..93f8770a0
--- /dev/null
+++ b/web-new/themes/theme-netflix.css
@@ -0,0 +1,61 @@
+.theme-netflix.light {
+ --background: 0, 0%, 100%;
+ --foreground: 0, 0%, 0%;
+
+ --muted: 0, 0%, 68%;
+ --muted-foreground: 0, 0%, 0%;
+
+ --popover: 0, 0%, 95%;
+ --popover-foreground: 0, 0%, 0%;
+
+ --border: 0, 68%, 39%;
+ --input: 0, 68%, 39%;
+
+ --card: 0, 0%, 95%;
+ --card-foreground: 0, 0%, 0%;
+
+ --primary: 0, 100%, 44%;
+ --primary-foreground: 0, 0%, 100%;
+
+ --secondary: 0, 0%, 0%;
+ --secondary-foreground: 0, 0%, 100%;
+
+ --accent: 0, 100%, 50%;
+ --accent-foreground: 0, 0%, 0%;
+
+ --destructive: 0, 68%, 39%;
+ --destructive-foreground: 0, 0%, 100%;
+
+ --ring: 0, 100%, 44%;
+}
+
+.theme-netflix.dark {
+ --background: 0, 0%, 0%;
+ --foreground: 0, 0%, 100%;
+
+ --muted: 0, 0%, 50%;
+ --muted-foreground: 0, 0%, 100%;
+
+ --popover: 0, 0%, 5%;
+ --popover-foreground: 0, 0%, 100%;
+
+ --border: 0, 68%, 39%;
+ --input: 0, 68%, 39%;
+
+ --card: 0, 0%, 5%;
+ --card-foreground: 0, 0%, 100%;
+
+ --primary: 0, 100%, 44%;
+ --primary-foreground: 0, 0%, 0%;
+
+ --secondary: 0, 0%, 100%;
+ --secondary-foreground: 0, 0%, 0%;
+
+ --accent: 0, 100%, 50%;
+ --accent-foreground: 0, 0%, 100%;
+
+ --destructive: 0, 68%, 39%;
+ --destructive-foreground: 0, 0%, 100%;
+
+ --ring: 0, 100%, 44%;
+}
diff --git a/web-new/themes/theme-nord.css b/web-new/themes/theme-nord.css
new file mode 100644
index 000000000..5a5f95daf
--- /dev/null
+++ b/web-new/themes/theme-nord.css
@@ -0,0 +1,61 @@
+.theme-nord.light {
+ --background: 220, 16%, 96%;
+ --foreground: 222, 20%, 16%;
+
+ --muted: 215, 14%, 80%;
+ --muted-foreground: 222, 20%, 16%;
+
+ --popover: 220, 16%, 96%;
+ --popover-foreground: 222, 20%, 16%;
+
+ --border: 222, 20%, 70%;
+ --input: 222, 20%, 70%;
+
+ --card: 220, 16%, 96%;
+ --card-foreground: 222, 20%, 16%;
+
+ --primary: 222, 20%, 70%;
+ --primary-foreground: 220, 16%, 96%;
+
+ --secondary: 215, 14%, 80%;
+ --secondary-foreground: 222, 20%, 16%;
+
+ --accent: 215, 14%, 80%;
+ --accent-foreground: 222, 20%, 16%;
+
+ --destructive: 0, 80%, 50%;
+ --destructive-foreground: 222, 20%, 16%;
+
+ --ring: 222, 20%, 70%;
+}
+
+.theme-nord.dark {
+ --background: 220, 16%, 16%;
+ --foreground: 222, 20%, 96%;
+
+ --muted: 215, 14%, 25%;
+ --muted-foreground: 222, 20%, 96%;
+
+ --popover: 220, 16%, 16%;
+ --popover-foreground: 222, 20%, 96%;
+
+ --border: 222, 20%, 40%;
+ --input: 222, 20%, 40%;
+
+ --card: 220, 16%, 16%;
+ --card-foreground: 222, 20%, 96%;
+
+ --primary: 222, 20%, 65%;
+ --primary-foreground: 220, 16%, 16%;
+
+ --secondary: 215, 14%, 25%;
+ --secondary-foreground: 222, 20%, 96%;
+
+ --accent: 215, 14%, 25%;
+ --accent-foreground: 222, 20%, 96%;
+
+ --destructive: 0, 80%, 50%;
+ --destructive-foreground: 222, 20%, 96%;
+
+ --ring: 222, 20%, 40%;
+}
diff --git a/web-new/themes/theme-orange.css b/web-new/themes/theme-orange.css
new file mode 100644
index 000000000..57a26182c
--- /dev/null
+++ b/web-new/themes/theme-orange.css
@@ -0,0 +1,46 @@
+@layer base {
+ .theme-orange.light {
+ --background: 0 0% 100%;
+ --foreground: 20 14.3% 4.1%;
+ --card: 0 0% 100%;
+ --card-foreground: 20 14.3% 4.1%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 20 14.3% 4.1%;
+ --primary: 24.6 95% 53.1%;
+ --primary-foreground: 60 9.1% 97.8%;
+ --secondary: 60 4.8% 95.9%;
+ --secondary-foreground: 24 9.8% 10%;
+ --muted: 60 4.8% 95.9%;
+ --muted-foreground: 25 5.3% 44.7%;
+ --accent: 60 4.8% 95.9%;
+ --accent-foreground: 24 9.8% 10%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 60 9.1% 97.8%;
+ --border: 20 5.9% 90%;
+ --input: 20 5.9% 90%;
+ --ring: 24.6 95% 53.1%;
+ --radius: 0.5rem;
+ }
+
+ .theme-orange.dark {
+ --background: 20 14.3% 4.1%;
+ --foreground: 60 9.1% 97.8%;
+ --card: 20 14.3% 4.1%;
+ --card-foreground: 60 9.1% 97.8%;
+ --popover: 20 14.3% 4.1%;
+ --popover-foreground: 60 9.1% 97.8%;
+ --primary: 20.5 90.2% 48.2%;
+ --primary-foreground: 60 9.1% 97.8%;
+ --secondary: 12 6.5% 15.1%;
+ --secondary-foreground: 60 9.1% 97.8%;
+ --muted: 12 6.5% 15.1%;
+ --muted-foreground: 24 5.4% 63.9%;
+ --accent: 12 6.5% 15.1%;
+ --accent-foreground: 60 9.1% 97.8%;
+ --destructive: 0 72.2% 50.6%;
+ --destructive-foreground: 60 9.1% 97.8%;
+ --border: 12 6.5% 15.1%;
+ --input: 12 6.5% 15.1%;
+ --ring: 20.5 90.2% 48.2%;
+ }
+}
diff --git a/web-new/themes/theme-red.css b/web-new/themes/theme-red.css
new file mode 100644
index 000000000..d52fd4e07
--- /dev/null
+++ b/web-new/themes/theme-red.css
@@ -0,0 +1,46 @@
+@layer base {
+ .theme-red.light {
+ --background: 0 0% 100%;
+ --foreground: 240 10% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 240 10% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 240 10% 3.9%;
+ --primary: 346.8 77.2% 49.8%;
+ --primary-foreground: 355.7 100% 97.3%;
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 5.9% 10%;
+ --muted: 240 4.8% 95.9%;
+ --muted-foreground: 240 3.8% 46.1%;
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 10%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 5.9% 90%;
+ --input: 240 5.9% 90%;
+ --ring: 346.8 77.2% 49.8%;
+ --radius: 0.5rem;
+ }
+
+ .theme-red.dark {
+ --background: 20 14.3% 4.1%;
+ --foreground: 0 0% 95%;
+ --card: 24 9.8% 10%;
+ --card-foreground: 0 0% 95%;
+ --popover: 0 0% 9%;
+ --popover-foreground: 0 0% 95%;
+ --primary: 346.8 77.2% 49.8%;
+ --primary-foreground: 355.7 100% 97.3%;
+ --secondary: 240 3.7% 15.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 0 0% 15%;
+ --muted-foreground: 240 5% 64.9%;
+ --accent: 12 6.5% 15.1%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 85.7% 97.3%;
+ --border: 240 3.7% 15.9%;
+ --input: 240 3.7% 15.9%;
+ --ring: 346.8 77.2% 49.8%;
+ }
+}
diff --git a/web-new/tsconfig.json b/web-new/tsconfig.json
new file mode 100644
index 000000000..7ef7c299a
--- /dev/null
+++ b/web-new/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/web-new/tsconfig.node.json b/web-new/tsconfig.node.json
new file mode 100644
index 000000000..42872c59f
--- /dev/null
+++ b/web-new/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/web-new/vite.config.ts b/web-new/vite.config.ts
new file mode 100644
index 000000000..147bff22d
--- /dev/null
+++ b/web-new/vite.config.ts
@@ -0,0 +1,61 @@
+///
+import path from "path"
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import monacoEditorPlugin from 'vite-plugin-monaco-editor';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ define: {
+ 'import.meta.vitest': 'undefined',
+ },
+ server: {
+ proxy: {
+ '/api': {
+ target: 'http://localhost:5000',
+ ws: true,
+ },
+ '/vod': {
+ target: 'http://localhost:5000'
+ },
+ '/exports': {
+ target: 'http://localhost:5000'
+ },
+ '/ws': {
+ target: 'ws://localhost:5000',
+ ws: true,
+ },
+ '/live': {
+ target: 'ws://localhost:5000',
+ changeOrigin: true,
+ ws: true,
+ },
+ }
+ },
+ plugins: [
+ react(),
+ monacoEditorPlugin.default({
+ customWorkers: [{ label: 'yaml', entry: 'monaco-yaml/yaml.worker' }],
+ languageWorkers: ['editorWorkerService'], // we don't use any of the default languages
+ }),
+ ],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+ test: {
+ environment: 'jsdom',
+ alias: {
+ 'testing-library': path.resolve(__dirname, './__test__/testing-library.js'),
+ },
+ setupFiles: ['./__test__/test-setup.ts'],
+ includeSource: ['src/**/*.{js,jsx,ts,tsx}'],
+ coverage: {
+ reporter: ['text-summary', 'text'],
+ },
+ mockReset: true,
+ restoreMocks: true,
+ globals: true,
+ },
+})