From b07ebb4b582638e4a3e43f2031c953126b838204 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 11 May 2026 15:25:38 -0500
Subject: [PATCH] fix frigate+ pane layout and buttons to match other settings
 panes

---
 .../settings/FrigatePlusSettingsView.tsx      | 642 +++++++++---------
 1 file changed, 321 insertions(+), 321 deletions(-)

diff --git a/web/src/views/settings/FrigatePlusSettingsView.tsx b/web/src/views/settings/FrigatePlusSettingsView.tsx
index db9a4369b5..7bc81fae22 100644
--- a/web/src/views/settings/FrigatePlusSettingsView.tsx
+++ b/web/src/views/settings/FrigatePlusSettingsView.tsx
@@ -239,332 +239,332 @@ export default function FrigatePlusSettingsView({
   }
 
   return (
-    <div className="flex size-full flex-col md:flex-row">
+    <div className="flex size-full flex-col md:pr-2">
       <Toaster position="top-center" closeButton={true} />
-      <div className="mt-2 flex h-full w-full flex-col">
-        <div className="scrollbar-container flex-1 overflow-y-auto">
-          <div className="w-full max-w-5xl space-y-6">
-            <div className="flex flex-col gap-0">
-              <Heading as="h4" className="mb-2">
-                {t("frigatePlus.title")}
-              </Heading>
+      <div className="w-full max-w-5xl space-y-6 pt-2">
+        <div className="flex flex-col gap-0">
+          <Heading as="h4" className="mb-2">
+            {t("frigatePlus.title")}
+          </Heading>
 
-              <p className="text-sm text-muted-foreground">
-                {t("frigatePlus.description")}
-              </p>
-            </div>
-
-            <div className="space-y-6">
-              <SettingsGroupCard title={t("frigatePlus.cardTitles.api")}>
-                <SplitCardRow
-                  label={t("frigatePlus.apiKey.title")}
-                  description={
-                    <>
-                      <p>{t("frigatePlus.apiKey.desc")}</p>
-                      {!config?.model.plus && (
-                        <div className="mt-2 flex items-center text-primary-variant">
-                          <Link
-                            to="https://frigate.video/plus"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline"
-                          >
-                            {t("frigatePlus.apiKey.plusLink")}
-                            <LuExternalLink className="ml-2 inline-flex size-3" />
-                          </Link>
-                        </div>
-                      )}
-                    </>
-                  }
-                  content={
-                    <div className="flex items-center gap-2">
-                      {config?.plus?.enabled ? (
-                        <CheckCircle2 className="h-5 w-5 text-green-500" />
-                      ) : (
-                        <XCircle className="h-5 w-5 text-red-500" />
-                      )}
-                      <span className="text-sm">
-                        {config?.plus?.enabled
-                          ? t("frigatePlus.apiKey.validated")
-                          : t("frigatePlus.apiKey.notValidated")}
-                      </span>
-                    </div>
-                  }
-                />
-              </SettingsGroupCard>
-
-              {config?.plus?.enabled && (
-                <FrigatePlusCurrentModelSummary plusModel={config.model.plus} />
-              )}
-
-              {config?.plus?.enabled && (
-                <SettingsGroupCard
-                  title={t("frigatePlus.cardTitles.otherModels")}
-                >
-                  <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={frigatePlusSettings.model.id}
-                          onValueChange={(value) =>
-                            handleFrigatePlusConfigChange({
-                              model: { id: value as string },
-                            })
-                          }
-                        >
-                          <SelectTrigger className="w-full">
-                            {frigatePlusSettings.model.id &&
-                            availableModels?.[frigatePlusSettings.model.id]
-                              ? new Date(
-                                  availableModels[
-                                    frigatePlusSettings.model.id
-                                  ].trainDate,
-                                ).toLocaleString() +
-                                " " +
-                                availableModels[frigatePlusSettings.model.id]
-                                  .baseModel +
-                                " (" +
-                                (availableModels[frigatePlusSettings.model.id]
-                                  .isBaseModel
-                                  ? t(
-                                      "frigatePlus.modelInfo.plusModelType.baseModel",
-                                    )
-                                  : t(
-                                      "frigatePlus.modelInfo.plusModelType.userModel",
-                                    )) +
-                                ") " +
-                                availableModels[frigatePlusSettings.model.id]
-                                  .name +
-                                " (" +
-                                availableModels[frigatePlusSettings.model.id]
-                                  .width +
-                                "x" +
-                                availableModels[frigatePlusSettings.model.id]
-                                  .height +
-                                ")"
-                              : isLoadingModels
-                                ? t(
-                                    "frigatePlus.modelInfo.loadingAvailableModels",
-                                  )
-                                : t("frigatePlus.modelInfo.selectModel")}
-                          </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={
-                                      !model.supportedDetectors.includes(
-                                        Object.values(config.detectors)[0].type,
-                                      )
-                                    }
-                                  >
-                                    {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>
-                                    <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",
-                              )}
-                            >
-                              <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>
-              )}
-
-              <SettingsGroupCard
-                title={t("frigatePlus.cardTitles.configuration")}
-              >
-                <SplitCardRow
-                  label={t("frigatePlus.snapshotConfig.title")}
-                  description={
-                    <>
-                      <p>
-                        <Trans ns="views/settings">
-                          frigatePlus.snapshotConfig.desc
-                        </Trans>
-                      </p>
-                      <div className="mt-2 flex items-center text-primary-variant">
-                        <Link
-                          to={getLocaleDocUrl("plus/faq")}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="inline"
-                        >
-                          {t("readTheDocumentation", { ns: "common" })}
-                          <LuExternalLink className="ml-2 inline-flex size-3" />
-                        </Link>
-                      </div>
-                    </>
-                  }
-                  content={
-                    <div className="space-y-3">
-                      <div className="overflow-x-auto">
-                        <table className="w-full text-sm">
-                          <thead>
-                            <tr className="border-b border-secondary">
-                              <th className="px-4 py-2 text-left">
-                                {t("frigatePlus.snapshotConfig.table.camera")}
-                              </th>
-                              <th className="px-4 py-2 text-center">
-                                {t(
-                                  "frigatePlus.snapshotConfig.table.snapshots",
-                                )}
-                              </th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {Object.entries(config.cameras).map(
-                              ([name, camera]) => (
-                                <tr
-                                  key={name}
-                                  className="border-b border-secondary"
-                                >
-                                  <td className="px-4 py-2">
-                                    <CameraNameLabel camera={name} />
-                                  </td>
-                                  <td className="px-4 py-2 text-center">
-                                    {camera.snapshots.enabled ? (
-                                      <CheckCircle2 className="mx-auto size-5 text-green-500" />
-                                    ) : (
-                                      <XCircle className="mx-auto size-5 text-danger" />
-                                    )}
-                                  </td>
-                                </tr>
-                              ),
-                            )}
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  }
-                />
-              </SettingsGroupCard>
-            </div>
-          </div>
+          <p className="text-sm text-muted-foreground">
+            {t("frigatePlus.description")}
+          </p>
         </div>
 
-        <div className="sticky bottom-0 z-50 w-full border-t border-secondary bg-background pb-5 pt-0 md:pr-2">
-          <div className="flex flex-col items-center gap-4 pt-2 md:flex-row md:justify-end">
-            <div className="flex w-full items-center gap-2 md:w-auto">
-              <Button
-                className="flex min-w-36 flex-1 gap-2"
-                variant="outline"
-                aria-label={t("button.reset", { ns: "common" })}
-                onClick={onCancel}
-              >
-                {t("button.reset", { ns: "common" })}
-              </Button>
-              <Button
-                variant="select"
-                disabled={!changedValue || isLoading}
-                className="flex min-w-36 flex-1 gap-2"
-                aria-label={t("button.save", { ns: "common" })}
-                onClick={saveToConfig}
-              >
-                {isLoading ? (
-                  <>
-                    <ActivityIndicator className="h-4 w-4" />
-                    {t("button.saving", { ns: "common" })}
-                  </>
-                ) : (
-                  t("button.save", { ns: "common" })
-                )}
-              </Button>
+        <div className="space-y-6">
+          <SettingsGroupCard title={t("frigatePlus.cardTitles.api")}>
+            <SplitCardRow
+              label={t("frigatePlus.apiKey.title")}
+              description={
+                <>
+                  <p>{t("frigatePlus.apiKey.desc")}</p>
+                  {!config?.model.plus && (
+                    <div className="mt-2 flex items-center text-primary-variant">
+                      <Link
+                        to="https://frigate.video/plus"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline"
+                      >
+                        {t("frigatePlus.apiKey.plusLink")}
+                        <LuExternalLink className="ml-2 inline-flex size-3" />
+                      </Link>
+                    </div>
+                  )}
+                </>
+              }
+              content={
+                <div className="flex items-center gap-2">
+                  {config?.plus?.enabled ? (
+                    <CheckCircle2 className="h-5 w-5 text-green-500" />
+                  ) : (
+                    <XCircle className="h-5 w-5 text-red-500" />
+                  )}
+                  <span className="text-sm">
+                    {config?.plus?.enabled
+                      ? t("frigatePlus.apiKey.validated")
+                      : t("frigatePlus.apiKey.notValidated")}
+                  </span>
+                </div>
+              }
+            />
+          </SettingsGroupCard>
+
+          {config?.plus?.enabled && (
+            <FrigatePlusCurrentModelSummary plusModel={config.model.plus} />
+          )}
+
+          {config?.plus?.enabled && (
+            <SettingsGroupCard title={t("frigatePlus.cardTitles.otherModels")}>
+              <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={frigatePlusSettings.model.id}
+                      onValueChange={(value) =>
+                        handleFrigatePlusConfigChange({
+                          model: { id: value as string },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        {frigatePlusSettings.model.id &&
+                        availableModels?.[frigatePlusSettings.model.id]
+                          ? new Date(
+                              availableModels[
+                                frigatePlusSettings.model.id
+                              ].trainDate,
+                            ).toLocaleString() +
+                            " " +
+                            availableModels[frigatePlusSettings.model.id]
+                              .baseModel +
+                            " (" +
+                            (availableModels[frigatePlusSettings.model.id]
+                              .isBaseModel
+                              ? t(
+                                  "frigatePlus.modelInfo.plusModelType.baseModel",
+                                )
+                              : t(
+                                  "frigatePlus.modelInfo.plusModelType.userModel",
+                                )) +
+                            ") " +
+                            availableModels[frigatePlusSettings.model.id].name +
+                            " (" +
+                            availableModels[frigatePlusSettings.model.id]
+                              .width +
+                            "x" +
+                            availableModels[frigatePlusSettings.model.id]
+                              .height +
+                            ")"
+                          : isLoadingModels
+                            ? t("frigatePlus.modelInfo.loadingAvailableModels")
+                            : t("frigatePlus.modelInfo.selectModel")}
+                      </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={
+                                  !model.supportedDetectors.includes(
+                                    Object.values(config.detectors)[0].type,
+                                  )
+                                }
+                              >
+                                {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>
+                                <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",
+                          )}
+                        >
+                          <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>
+          )}
+
+          <SettingsGroupCard title={t("frigatePlus.cardTitles.configuration")}>
+            <SplitCardRow
+              label={t("frigatePlus.snapshotConfig.title")}
+              description={
+                <>
+                  <p>
+                    <Trans ns="views/settings">
+                      frigatePlus.snapshotConfig.desc
+                    </Trans>
+                  </p>
+                  <div className="mt-2 flex items-center text-primary-variant">
+                    <Link
+                      to={getLocaleDocUrl("plus/faq")}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline"
+                    >
+                      {t("readTheDocumentation", { ns: "common" })}
+                      <LuExternalLink className="ml-2 inline-flex size-3" />
+                    </Link>
+                  </div>
+                </>
+              }
+              content={
+                <div className="space-y-3">
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="border-b border-secondary">
+                          <th className="px-4 py-2 text-left">
+                            {t("frigatePlus.snapshotConfig.table.camera")}
+                          </th>
+                          <th className="px-4 py-2 text-center">
+                            {t("frigatePlus.snapshotConfig.table.snapshots")}
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {Object.entries(config.cameras).map(
+                          ([name, camera]) => (
+                            <tr
+                              key={name}
+                              className="border-b border-secondary"
+                            >
+                              <td className="px-4 py-2">
+                                <CameraNameLabel camera={name} />
+                              </td>
+                              <td className="px-4 py-2 text-center">
+                                {camera.snapshots.enabled ? (
+                                  <CheckCircle2 className="mx-auto size-5 text-green-500" />
+                                ) : (
+                                  <XCircle className="mx-auto size-5 text-danger" />
+                                )}
+                              </td>
+                            </tr>
+                          ),
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              }
+            />
+          </SettingsGroupCard>
+        </div>
+      </div>
+
+      <div className="sticky bottom-0 z-50 mt-6 w-full border-t border-secondary bg-background pt-0">
+        <div
+          className={cn(
+            "flex flex-col items-center gap-4 pt-2 md:flex-row",
+            changedValue ? "justify-between" : "justify-end",
+          )}
+        >
+          {changedValue && (
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-unsaved">
+                {t("unsavedChanges")}
+              </span>
             </div>
+          )}
+          <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center md:w-auto">
+            {changedValue && (
+              <Button
+                onClick={onCancel}
+                variant="outline"
+                disabled={isLoading}
+                className="flex min-w-36 flex-1 gap-2"
+              >
+                {t("button.undo", { ns: "common" })}
+              </Button>
+            )}
+            <Button
+              onClick={saveToConfig}
+              variant="select"
+              disabled={!changedValue || isLoading}
+              className="flex min-w-36 flex-1 gap-2"
+            >
+              {isLoading ? (
+                <>
+                  <ActivityIndicator className="h-4 w-4" />
+                  {t("button.saving", { ns: "common" })}
+                </>
+              ) : (
+                t("button.save", { ns: "common" })
+              )}
+            </Button>
           </div>
         </div>
       </div>