Wrap Frigate+ model selector in SplitCardRow with label and description

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",

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,6 +448,14 @@ export default function DetectorsAndModelSettingsView({
                 </TabsList>
 
                 <TabsContent value="plus">
+                  <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}
@@ -478,8 +489,12 @@ export default function DetectorsAndModelSettingsView({
                                 availableModels[state.plusModelId].height +
                                 ")"
                               : isLoadingModels
-                            ? t("frigatePlus.modelInfo.loadingAvailableModels")
-                            : t("detectorsAndModel.plusModel.noModelSelected")}
+                                ? t(
+                                    "frigatePlus.modelInfo.loadingAvailableModels",
+                                  )
+                                : t(
+                                    "detectorsAndModel.plusModel.noModelSelected",
+                                  )}
                           </SelectTrigger>
                           <SelectContent>
                             <SelectGroup>
@@ -523,7 +538,9 @@ export default function DetectorsAndModelSettingsView({
                                           "detectorsAndModel.plusModel.requiresDetector",
                                           {
                                             detector:
-                                          model.supportedDetectors.join(", "),
+                                              model.supportedDetectors.join(
+                                                ", ",
+                                              ),
                                           },
                                         )}
                                       </div>
@@ -593,6 +610,8 @@ export default function DetectorsAndModelSettingsView({
                           </PopoverContent>
                         </Popover>
                       </div>
+                    }
+                  />
                 </TabsContent>
 
                 <TabsContent value="custom">