From 8daf8e1d2ac253c14768fa6afcd5eadbacca0458 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 16 May 2026 16:38:38 -0500
Subject: [PATCH] Wrap Frigate+ model selector in SplitCardRow with label and
 description

---
 web/public/locales/en/views/settings.json     |   2 +-
 .../DetectorsAndModelSettingsView.tsx         | 315 ++++++++++--------
 2 files changed, 168 insertions(+), 149 deletions(-)

diff --git a/web/public/locales/en/views/settings.json b/web/public/locales/en/views/settings.json
index a1b60dfd8a..083f7efe04 100644
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@@ -1135,7 +1135,7 @@
       "loading": "Loading model information…",
       "error": "Failed to load model information",
       "noModelLoaded": "No Frigate+ model is currently loaded.",
-      "availableModels": "Available Models",
+      "availableModels": "Available Frigate+ models",
       "loadingAvailableModels": "Loading available models…",
       "selectModel": "Select a model",
       "noModelsAvailable": "No models available",
diff --git a/web/src/views/settings/DetectorsAndModelSettingsView.tsx b/web/src/views/settings/DetectorsAndModelSettingsView.tsx
index ffbf564046..81ec491363 100644
--- a/web/src/views/settings/DetectorsAndModelSettingsView.tsx
+++ b/web/src/views/settings/DetectorsAndModelSettingsView.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { LuExternalLink, LuFilter } from "react-icons/lu";
 import { toast } from "sonner";
@@ -36,7 +36,10 @@ import type {
   SettingsPageProps,
 } from "@/views/settings/SingleSectionPage";
 import type { ConfigSectionData } from "@/types/configForm";
-import { SettingsGroupCard } from "@/components/card/SettingsGroupCard";
+import {
+  SettingsGroupCard,
+  SplitCardRow,
+} from "@/components/card/SettingsGroupCard";
 import { ConfigSectionTemplate } from "@/components/config-form/sections";
 import { ConfigMessageBanner } from "@/components/config-form/ConfigMessageBanner";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -445,154 +448,170 @@ export default function DetectorsAndModelSettingsView({
                 </TabsList>
 
                 <TabsContent value="plus">
-                  <div className="flex w-full items-center gap-2">
-                    <Select
-                      value={state.plusModelId}
-                      onValueChange={(value) =>
-                        setState((prev) =>
-                          prev ? { ...prev, plusModelId: value } : prev,
-                        )
-                      }
-                    >
-                      <SelectTrigger className="w-full">
-                        {state.plusModelId &&
-                        availableModels?.[state.plusModelId]
-                          ? new Date(
-                              availableModels[state.plusModelId].trainDate,
-                            ).toLocaleString() +
-                            " " +
-                            availableModels[state.plusModelId].baseModel +
-                            " (" +
-                            (availableModels[state.plusModelId].isBaseModel
-                              ? t(
-                                  "frigatePlus.modelInfo.plusModelType.baseModel",
-                                )
-                              : t(
-                                  "frigatePlus.modelInfo.plusModelType.userModel",
-                                )) +
-                            ") " +
-                            availableModels[state.plusModelId].name +
-                            " (" +
-                            availableModels[state.plusModelId].width +
-                            "x" +
-                            availableModels[state.plusModelId].height +
-                            ")"
-                          : isLoadingModels
-                            ? t("frigatePlus.modelInfo.loadingAvailableModels")
-                            : t("detectorsAndModel.plusModel.noModelSelected")}
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          {filteredModelEntries.length === 0 ? (
-                            <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"
-                                value={id}
-                                disabled={!isModelCompatible(model)}
-                              >
-                                {new Date(model.trainDate).toLocaleString()}{" "}
-                                <div>
-                                  {model.baseModel} {" ("}
-                                  {model.isBaseModel
-                                    ? t(
-                                        "frigatePlus.modelInfo.plusModelType.baseModel",
-                                      )
-                                    : t(
-                                        "frigatePlus.modelInfo.plusModelType.userModel",
-                                      )}
-                                  {")"}
-                                </div>
-                                <div>
-                                  {model.name} (
-                                  {model.width + "x" + model.height})
-                                </div>
-                                <div>
-                                  {t(
-                                    "frigatePlus.modelInfo.supportedDetectors",
-                                  )}
-                                  : {model.supportedDetectors.join(", ")}
-                                </div>
-                                {!isModelCompatible(model) && (
-                                  <div className="text-xs text-danger">
-                                    {t(
-                                      "detectorsAndModel.plusModel.requiresDetector",
-                                      {
-                                        detector:
-                                          model.supportedDetectors.join(", "),
-                                      },
-                                    )}
-                                  </div>
-                                )}
-                                <div className="text-xs text-muted-foreground">
-                                  {id}
-                                </div>
-                              </SelectItem>
-                            ))
-                          )}
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <button
-                          type="button"
-                          className="focus:outline-none"
-                          aria-label={t(
-                            "frigatePlus.modelInfo.filter.ariaLabel",
-                          )}
+                  <SplitCardRow
+                    label={t("frigatePlus.modelInfo.availableModels")}
+                    description={
+                      <Trans ns="views/settings">
+                        frigatePlus.modelInfo.modelSelect
+                      </Trans>
+                    }
+                    content={
+                      <div className="flex w-full items-center gap-2">
+                        <Select
+                          value={state.plusModelId}
+                          onValueChange={(value) =>
+                            setState((prev) =>
+                              prev ? { ...prev, plusModelId: value } : prev,
+                            )
+                          }
                         >
-                          <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",
+                          <SelectTrigger className="w-full">
+                            {state.plusModelId &&
+                            availableModels?.[state.plusModelId]
+                              ? new Date(
+                                  availableModels[state.plusModelId].trainDate,
+                                ).toLocaleString() +
+                                " " +
+                                availableModels[state.plusModelId].baseModel +
+                                " (" +
+                                (availableModels[state.plusModelId].isBaseModel
+                                  ? t(
+                                      "frigatePlus.modelInfo.plusModelType.baseModel",
+                                    )
+                                  : t(
+                                      "frigatePlus.modelInfo.plusModelType.userModel",
+                                    )) +
+                                ") " +
+                                availableModels[state.plusModelId].name +
+                                " (" +
+                                availableModels[state.plusModelId].width +
+                                "x" +
+                                availableModels[state.plusModelId].height +
+                                ")"
+                              : isLoadingModels
+                                ? t(
+                                    "frigatePlus.modelInfo.loadingAvailableModels",
+                                  )
+                                : t(
+                                    "detectorsAndModel.plusModel.noModelSelected",
+                                  )}
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectGroup>
+                              {filteredModelEntries.length === 0 ? (
+                                <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"
+                                    value={id}
+                                    disabled={!isModelCompatible(model)}
+                                  >
+                                    {new Date(model.trainDate).toLocaleString()}{" "}
+                                    <div>
+                                      {model.baseModel} {" ("}
+                                      {model.isBaseModel
+                                        ? t(
+                                            "frigatePlus.modelInfo.plusModelType.baseModel",
+                                          )
+                                        : t(
+                                            "frigatePlus.modelInfo.plusModelType.userModel",
+                                          )}
+                                      {")"}
+                                    </div>
+                                    <div>
+                                      {model.name} (
+                                      {model.width + "x" + model.height})
+                                    </div>
+                                    <div>
+                                      {t(
+                                        "frigatePlus.modelInfo.supportedDetectors",
+                                      )}
+                                      : {model.supportedDetectors.join(", ")}
+                                    </div>
+                                    {!isModelCompatible(model) && (
+                                      <div className="text-xs text-danger">
+                                        {t(
+                                          "detectorsAndModel.plusModel.requiresDetector",
+                                          {
+                                            detector:
+                                              model.supportedDetectors.join(
+                                                ", ",
+                                              ),
+                                          },
+                                        )}
+                                      </div>
+                                    )}
+                                    <div className="text-xs text-muted-foreground">
+                                      {id}
+                                    </div>
+                                  </SelectItem>
+                                ))
                               )}
-                            </Label>
-                            <Switch
-                              id="filterFineTunedModels"
-                              checked={showFineTunedModels}
-                              onCheckedChange={setShowFineTunedModels}
-                            />
-                          </div>
-                        </div>
-                      </PopoverContent>
-                    </Popover>
-                  </div>
+                            </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>
+                    }
+                  />
                 </TabsContent>
 
                 <TabsContent value="custom">