Get started on export filters

web/src/components/filter/ExportFilterGroup.tsx

@@ -0,0 +1,16 @@
+import { ExportFilter, ExportFilters } from "@/types/export";
+
+type ExportFilterGroupProps = {
+  className: string;
+  filters?: ExportFilters[];
+  filter?: ExportFilter;
+  onUpdateFilter: (filter: ExportFilter) => void;
+};
+export default function ExportFilterGroup({
+  className,
+  filter,
+  filters,
+  onUpdateFilter,
+}: ExportFilterGroupProps) {
+  return <div></div>;
+}

web/src/pages/Exports.tsx

@@ -29,7 +29,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { isMobile } from "react-device-detect";
+import { isMobile, isMobileOnly } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 
 import { LuFolderX } from "react-icons/lu";
@@ -232,8 +232,13 @@ function Exports() {
         </DialogContent>
       </Dialog>
 
-      {(exports?.length || cases?.length) && (
+      <div
-        <div className="flex w-full items-center justify-center p-2">
+        className={cn(
+          "flex w-full flex-col items-start space-y-2 pr-2 md:mb-2 lg:relative lg:h-10 lg:flex-row lg:items-center lg:space-y-0",
+          isMobileOnly && "mb-2 h-auto flex-wrap gap-2 space-y-0",
+        )}
+      >
+        <div className="w-full">
           <Input
             className="text-md w-full bg-muted md:w-1/3"
             placeholder={t("search")}
@@ -241,7 +246,8 @@ function Exports() {
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
-      )}
+        <div></div>
+      </div>
 
       {selectedCase ? (
         <CaseView

web/src/types/export.ts

@@ -21,3 +21,13 @@ export type DeleteClipType = {
   file: string;
   exportName: string;
 };
+
+// filtering
+
+const EXPORT_FILTERS = ["cameras"] as const;
+export type ExportFilters = (typeof EXPORT_FILTERS)[number];
+export const DEFAULT_EXPORT_FILTERS: ExportFilters[] = ["cameras"];
+
+export type ExportFilter = {
+  cameras?: string[];
+};

web/vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 
-const proxyHost = process.env.PROXY_HOST || "localhost:5000";
+const proxyHost = process.env.PROXY_HOST || "192.168.50.106:5002";
 
 // https://vitejs.dev/config/
 export default defineConfig({