Add selector for classifiction model type

web/src/views/classification/ModelSelectionView.tsx

@@ -1,31 +1,54 @@
 import { baseUrl } from "@/api/baseUrl";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import useOptimisticState from "@/hooks/use-optimistic-state";
 import { cn } from "@/lib/utils";
 import {
   CustomClassificationModelConfig,
   FrigateConfig,
 } from "@/types/frigateConfig";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
+const allModelTypes = ["objects", "states"] as const;
+type ModelType = (typeof allModelTypes)[number];
+
 type ModelSelectionViewProps = {
   onClick: (model: CustomClassificationModelConfig) => void;
 };
 export default function ModelSelectionView({
   onClick,
 }: ModelSelectionViewProps) {
+  const { t } = useTranslation(["views/classificationModel"]);
+  const [page, setPage] = useState<ModelType>("objects");
+  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
 
+  // data
+
   const classificationConfigs = useMemo(() => {
     if (!config) {
       return [];
     }
 
-    return Object.values(config.classification.custom);
+    const allModels = Object.values(config.classification.custom);
-  }, [config]);
+
+    return allModels.filter((model) => {
+      if (pageToggle == "objects" && model.object_config != undefined) {
+        return true;
+      }
+
+      if (pageToggle == "states" && model.state_config != undefined) {
+        return true;
+      }
+
+      return false;
+    });
+  }, [config, pageToggle]);
 
   if (!config) {
     return <ActivityIndicator />;
@@ -36,14 +59,47 @@ export default function ModelSelectionView({
   }
 
   return (
-    <div className="flex size-full gap-2 p-2">
+    <div className="flex size-full flex-col p-2">
-      {classificationConfigs.map((config) => (
+      <div className="flex h-12 w-full items-center">
-        <ModelCard
+        <div className="flex flex-row">
-          key={config.name}
+          <ToggleGroup
-          config={config}
+            className="*:rounded-md *:px-3 *:py-4"
-          onClick={() => onClick(config)}
+            type="single"
-        />
+            size="sm"
-      ))}
+            value={pageToggle}
+            onValueChange={(value: ModelType) => {
+              if (value) {
+                // Restrict viewer navigation
+                setPageToggle(value);
+              }
+            }}
+          >
+            {allModelTypes.map((item) => (
+              <ToggleGroupItem
+                key={item}
+                className={`flex scroll-mx-10 items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                value={item}
+                data-nav-item={item}
+                aria-label={t("selectItem", {
+                  ns: "common",
+                  item: t("menu." + item),
+                })}
+              >
+                <div className="smart-capitalize">{t("menu." + item)}</div>
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+        </div>
+      </div>
+      <div className="flex size-full gap-2 p-2">
+        {classificationConfigs.map((config) => (
+          <ModelCard
+            key={config.name}
+            config={config}
+            onClick={() => onClick(config)}
+          />
+        ))}
+      </div>
     </div>
   );
 }
@@ -94,10 +150,7 @@ function ModelCard({ config, onClick }: ModelCardProps) {
           />
         ))}
       </div>
-      <div className="smart-capitalize">
+      <div className="smart-capitalize">{config.name}</div>
-        {config.name} ({config.state_config != null ? "State" : "Object"}{" "}
-        Classification)
-      </div>
     </div>
   );
 }