Handle model configs

web/src/pages/ClassificationModel.tsx

@@ -1,3 +1,4 @@
+import { useOverlayState } from "@/hooks/use-overlay-state";
 import { CustomClassificationModelConfig } from "@/types/frigateConfig";
 import ModelSelectionView from "@/views/classification/ModelSelectionView";
 import ModelTrainingView from "@/views/classification/ModelTrainingView";
@@ -6,11 +7,13 @@ import { useState } from "react";
 export default function ClassificationModelPage() {
   // training
 
-  const [model, setModel] = useState<CustomClassificationModelConfig>();
+  const [model, setModel] = useOverlayState<CustomClassificationModelConfig>(
+    "classificationModel",
+  );
 
   if (model == undefined) {
-    return <ModelSelectionView />;
+    return <ModelSelectionView onClick={setModel} />;
   }
 
-  return <ModelTrainingView />;
+  return <ModelTrainingView model={model} />;
 }

web/src/views/classification/ModelSelectionView.tsx

@@ -1,9 +1,19 @@
 import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { FrigateConfig } from "@/types/frigateConfig";
+import { cn } from "@/lib/utils";
+import {
+  CustomClassificationModelConfig,
+  FrigateConfig,
+} from "@/types/frigateConfig";
 import { useMemo } from "react";
+import { isMobile } from "react-device-detect";
 import useSWR from "swr";
 
-export default function ModelSelectionView() {
+type ModelSelectionViewProps = {
+  onClick: (model: CustomClassificationModelConfig) => void;
+};
+export default function ModelSelectionView({
+  onClick,
+}: ModelSelectionViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
@@ -25,9 +35,29 @@ export default function ModelSelectionView() {
   }
 
   return (
-    <div className="size-full">
+    <div className="size-full p-2">
       {classificationConfigs.map((config) => (
-        <div className="size-48">{config.name}</div>
+        <div
+          className={cn(
+            "flex w-72 cursor-pointer flex-col gap-2 rounded-lg bg-card p-2 outline outline-[3px]",
+            isMobile && "w-full",
+            false
+              ? "shadow-selected outline-selected"
+              : "outline-transparent duration-500",
+          )}
+          onClick={() => onClick(config)}
+          onContextMenu={() => {
+            // e.stopPropagation();
+            // e.preventDefault();
+            // handleClickEvent(true);
+          }}
+        >
+          <div className="size-48"></div>
+          <div className="smart-capitalize">
+            {config.name} ({config.state_config != null ? "State" : "Object"}{" "}
+            Classification)
+          </div>
+        </div>
       ))}
     </div>
   );

web/src/views/classification/ModelTrainingView.tsx

@@ -1 +1,16 @@
-export default function ModelTrainingView() {}
+import Heading from "@/components/ui/heading";
+import { CustomClassificationModelConfig } from "@/types/frigateConfig";
+
+type ModelTrainingViewProps = {
+  model: CustomClassificationModelConfig;
+};
+export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
+  return (
+    <div className="flex size-full flex-col p-2">
+      <Heading className="smart-capitalize" as="h3">
+        {model.name} ({model.state_config != null ? "State" : "Object"}{" "}
+        Classification)
+      </Heading>
+    </div>
+  );
+}