frigate+ pane updates

- allow users to select a plus model from the select even when one was not previously loaded
- always show model summary card
- add model filter popover
- add restart button totast

web/public/locales/en/views/settings.json

@@ -1128,8 +1128,16 @@
       "cameras": "Cameras",
       "loading": "Loading model information…",
       "error": "Failed to load model information",
+      "noModelLoaded": "No Frigate+ model is currently loaded.",
       "availableModels": "Available Models",
       "loadingAvailableModels": "Loading available models…",
+      "selectModel": "Select a model",
+      "noModelsAvailable": "No models available",
+      "filter": {
+        "ariaLabel": "Filter models by type",
+        "baseModels": "Base Models",
+        "fineTunedModels": "Fine-tuned Models"
+      },
       "modelSelect": "Your available models on Frigate+ can be selected here. Note that only models compatible with your current detector configuration can be selected."
     },
     "unsavedChanges": "Unsaved Frigate+ settings changes",

web/src/views/settings/FrigatePlusSettingsView.tsx

@@ -1,5 +1,5 @@
 import Heading from "@/components/ui/heading";
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { Toaster } from "@/components/ui/sonner";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { toast } from "sonner";
@@ -10,7 +10,7 @@ import { CheckCircle2, XCircle } from "lucide-react";
 import { Trans, useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Link } from "react-router-dom";
-import { LuExternalLink } from "react-icons/lu";
+import { LuExternalLink, LuFilter } from "react-icons/lu";
 import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 import {
   Select,
@@ -19,6 +19,14 @@ import {
   SelectItem,
   SelectTrigger,
 } from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
 import {
@@ -26,6 +34,8 @@ import {
   SplitCardRow,
 } from "@/components/card/SettingsGroupCard";
 import FrigatePlusCurrentModelSummary from "@/views/settings/components/FrigatePlusCurrentModelSummary";
+import { useRestart } from "@/api/ws";
+import RestartDialog from "@/components/overlay/dialog/RestartDialog";
 
 type FrigatePlusModel = {
   id: string;
@@ -58,6 +68,8 @@ export default function FrigatePlusSettingsView({
     useSWR<FrigateConfig>("config");
   const [changedValue, setChangedValue] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [restartDialogOpen, setRestartDialogOpen] = useState(false);
+  const { send: sendRestart } = useRestart();
 
   const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
 
@@ -76,7 +88,7 @@ export default function FrigatePlusSettingsView({
     },
   );
 
-  const { data: availableModels = {} } = useSWR<
+  const { data: availableModels = {}, isLoading: isLoadingModels } = useSWR<
     Record<string, FrigatePlusModel>
   >("/plus/models", {
     fallbackData: {},
@@ -92,6 +104,19 @@ export default function FrigatePlusSettingsView({
     },
   });
 
+  const [showBaseModels, setShowBaseModels] = useState(true);
+  const [showFineTunedModels, setShowFineTunedModels] = useState(true);
+
+  const filteredModelEntries = useMemo(
+    () =>
+      Object.entries(availableModels || {}).filter(([, model]) =>
+        model.isBaseModel ? showBaseModels : showFineTunedModels,
+      ),
+    [availableModels, showBaseModels, showFineTunedModels],
+  );
+
+  const isFilterActive = !showBaseModels || !showFineTunedModels;
+
   useEffect(() => {
     if (config) {
       if (frigatePlusSettings?.model.id == undefined) {
@@ -128,14 +153,29 @@ export default function FrigatePlusSettingsView({
   const saveToConfig = useCallback(async () => {
     setIsLoading(true);
 
-    axios
+    try {
-      .put(`config/set?model.path=plus://${frigatePlusSettings.model.id}`, {
+      // Clear the existing model section so only the new path remains
+      await axios.put("config/set", {
         requires_restart: 0,
-      })
+        config_data: { model: null },
-      .then((res) => {
+      });
+      const res = await axios.put("config/set", {
+        requires_restart: 0,
+        config_data: {
+          model: { path: `plus://${frigatePlusSettings.model.id}` },
+        },
+      });
+
       if (res.status === 200) {
         toast.success(t("frigatePlus.toast.success"), {
           position: "top-center",
+          action: (
+            <a onClick={() => setRestartDialogOpen(true)}>
+              <Button>
+                {t("restart.button", { ns: "components/dialog" })}
+              </Button>
+            </a>
+          ),
         });
         setChangedValue(false);
         updateConfig();
@@ -147,20 +187,18 @@ export default function FrigatePlusSettingsView({
           },
         );
       }
-      })
+    } catch (error) {
-      .catch((error) => {
+      const err = error as {
+        response?: { data?: { message?: string; detail?: string } };
+      };
       const errorMessage =
-          error.response?.data?.message ||
+        err.response?.data?.message ||
-          error.response?.data?.detail ||
+        err.response?.data?.detail ||
         "Unknown error";
-        toast.error(
+      toast.error(t("toast.save.error.title", { errorMessage, ns: "common" }), {
-          t("toast.save.error.title", { errorMessage, ns: "common" }),
-          {
         position: "top-center",
-          },
+      });
-        );
+    } finally {
-      })
-      .finally(() => {
       addMessage(
         "plus_restart",
         t("frigatePlus.restart_required"),
@@ -168,7 +206,7 @@ export default function FrigatePlusSettingsView({
         "plus_restart",
       );
       setIsLoading(false);
-      });
+    }
   }, [updateConfig, addMessage, frigatePlusSettings, t]);
 
   const onCancel = useCallback(() => {
@@ -255,11 +293,11 @@ export default function FrigatePlusSettingsView({
                 />
               </SettingsGroupCard>
 
-              {config?.model.plus && (
+              {config?.plus?.enabled && (
                 <FrigatePlusCurrentModelSummary plusModel={config.model.plus} />
               )}
 
-              {config?.model.plus && (
+              {config?.plus?.enabled && (
                 <SettingsGroupCard
                   title={t("frigatePlus.cardTitles.otherModels")}
                 >
@@ -271,6 +309,7 @@ export default function FrigatePlusSettingsView({
                       </Trans>
                     }
                     content={
+                      <div className="flex w-full items-center gap-2">
                         <Select
                           value={frigatePlusSettings.model.id}
                           onValueChange={(value) =>
@@ -279,10 +318,10 @@ export default function FrigatePlusSettingsView({
                             })
                           }
                         >
-                        {frigatePlusSettings.model.id &&
-                        availableModels?.[frigatePlusSettings.model.id] ? (
                           <SelectTrigger className="w-full">
-                            {new Date(
+                            {frigatePlusSettings.model.id &&
+                            availableModels?.[frigatePlusSettings.model.id]
+                              ? new Date(
                                   availableModels[
                                     frigatePlusSettings.model.id
                                   ].trainDate,
@@ -308,18 +347,22 @@ export default function FrigatePlusSettingsView({
                                 "x" +
                                 availableModels[frigatePlusSettings.model.id]
                                   .height +
-                              ")"}
+                                ")"
+                              : isLoadingModels
+                                ? t(
+                                    "frigatePlus.modelInfo.loadingAvailableModels",
+                                  )
+                                : t("frigatePlus.modelInfo.selectModel")}
                           </SelectTrigger>
-                        ) : (
-                          <SelectTrigger className="w-full">
-                            {t("frigatePlus.modelInfo.loadingAvailableModels")}
-                          </SelectTrigger>
-                        )}
 
                           <SelectContent>
                             <SelectGroup>
-                            {Object.entries(availableModels || {}).map(
+                              {filteredModelEntries.length === 0 ? (
-                              ([id, model]) => (
+                                <div className="px-4 py-3 text-center text-sm text-muted-foreground">
+                                  {t("frigatePlus.modelInfo.noModelsAvailable")}
+                                </div>
+                              ) : (
+                                filteredModelEntries.map(([id, model]) => (
                                   <SelectItem
                                     key={id}
                                     className="cursor-pointer"
@@ -356,11 +399,67 @@ export default function FrigatePlusSettingsView({
                                       {id}
                                     </div>
                                   </SelectItem>
-                              ),
+                                ))
                               )}
                             </SelectGroup>
                           </SelectContent>
                         </Select>
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <button
+                              type="button"
+                              className="focus:outline-none"
+                              aria-label={t(
+                                "frigatePlus.modelInfo.filter.ariaLabel",
+                              )}
+                            >
+                              <LuFilter
+                                className={cn(
+                                  "size-4",
+                                  isFilterActive
+                                    ? "text-selected"
+                                    : "text-secondary-foreground",
+                                )}
+                              />
+                            </button>
+                          </PopoverTrigger>
+                          <PopoverContent align="end" className="w-56">
+                            <div className="space-y-3">
+                              <div className="text-sm text-primary-variant">
+                                {t("frigatePlus.modelInfo.filter.ariaLabel")}
+                              </div>
+                              <div className="flex items-center justify-between">
+                                <Label
+                                  htmlFor="filterBaseModels"
+                                  className="cursor-pointer text-primary"
+                                >
+                                  {t("frigatePlus.modelInfo.filter.baseModels")}
+                                </Label>
+                                <Switch
+                                  id="filterBaseModels"
+                                  checked={showBaseModels}
+                                  onCheckedChange={setShowBaseModels}
+                                />
+                              </div>
+                              <div className="flex items-center justify-between">
+                                <Label
+                                  htmlFor="filterFineTunedModels"
+                                  className="cursor-pointer text-primary"
+                                >
+                                  {t(
+                                    "frigatePlus.modelInfo.filter.fineTunedModels",
+                                  )}
+                                </Label>
+                                <Switch
+                                  id="filterFineTunedModels"
+                                  checked={showFineTunedModels}
+                                  onCheckedChange={setShowFineTunedModels}
+                                />
+                              </div>
+                            </div>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
                     }
                   />
                 </SettingsGroupCard>
@@ -469,6 +568,11 @@ export default function FrigatePlusSettingsView({
           </div>
         </div>
       </div>
+      <RestartDialog
+        isOpen={restartDialogOpen}
+        onClose={() => setRestartDialogOpen(false)}
+        onRestart={() => sendRestart("restart")}
+      />
     </div>
   );
 }

web/src/views/settings/components/FrigatePlusCurrentModelSummary.tsx

@@ -16,14 +16,11 @@ export default function FrigatePlusCurrentModelSummary({
 
   return (
     <SettingsGroupCard title={t("frigatePlus.cardTitles.currentModel")}>
-      {plusModel === undefined && (
+      {!plusModel && (
         <p className="text-muted-foreground">
-          {t("frigatePlus.modelInfo.loading")}
+          {t("frigatePlus.modelInfo.noModelLoaded")}
         </p>
       )}
-      {plusModel === null && (
-        <p className="text-danger">{t("frigatePlus.modelInfo.error")}</p>
-      )}
       {plusModel && (
         <div className="space-y-6">
           <SplitCardRow