add profiles enable toggle and improve empty state

2026-03-13 03:47:34 +03:00 · 2026-03-11 11:05:18 -05:00 · 2026-03-11 11:05:18 -05:00 · a0849b104c
commit a0849b104c
parent 096a13bce9
4 changed files with 96 additions and 53 deletions
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@ -1461,7 +1461,10 @@
    "deleteProfileConfirm": "Delete profile \"{{profile}}\" from all cameras? This cannot be undone.",
    "deleteSuccess": "Profile '{{profile}}' deleted",
    "deleteSection": "Delete Section Overrides",
-    "deleteSectionConfirm": "Remove {{profile}}'s overrides for {{section}} on {{camera}}?"
+    "deleteSectionConfirm": "Remove {{profile}}'s overrides for {{section}} on {{camera}}?",
+    "enableSwitch": "Enable Profiles",
+    "enabledDescription": "Profiles are enabled. Navigate to a camera config section, create a new profile from the dropdown in the header, and save for changes to take effect.",
+    "disabledDescription": "Profiles allow you to define named sets of camera config overrides (e.g., armed, away, night) that can be activated on demand. Enable profiles to get started."
  },
  "unsavedChanges": "You have unsaved changes",
  "confirmReset": "Confirm Reset",
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@ -659,6 +659,7 @@ export default function Settings() {
    Record<string, string | null>
  >({});
  const [newProfiles, setNewProfiles] = useState<string[]>([]);
+  const [profilesUIEnabled, setProfilesUIEnabled] = useState(false);

  const allProfileNames = useMemo(() => {
    if (!config) return [];
@ -1127,7 +1128,7 @@ export default function Settings() {
  const showProfileDropdown =
    PROFILE_DROPDOWN_PAGES.has(pageToggle) &&
    !!selectedCamera &&
-    allProfileNames.length > 0;
+    (allProfileNames.length > 0 || profilesUIEnabled);

  const headerHasProfileData = useCallback(
    (profileName: string): boolean => {
@ -1527,6 +1528,8 @@ export default function Settings() {
                    pendingDataBySection={pendingDataBySection}
                    onPendingDataChange={handlePendingDataChange}
                    profileState={profileState}
+                    profilesUIEnabled={profilesUIEnabled}
+                    setProfilesUIEnabled={setProfilesUIEnabled}
                  />
                );
              })()}
--- a/web/src/views/settings/ProfilesView.tsx
+++ b/web/src/views/settings/ProfilesView.tsx
@ -29,6 +29,8 @@ import {
  AlertDialogHeader,
  AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";

 type ProfilesApiResponse = {
  profiles: string[];
@ -38,9 +40,15 @@ type ProfilesApiResponse = {
 type ProfilesViewProps = {
  setUnsavedChanges?: React.Dispatch<React.SetStateAction<boolean>>;
  profileState?: ProfileState;
+  profilesUIEnabled?: boolean;
+  setProfilesUIEnabled?: React.Dispatch<React.SetStateAction<boolean>>;
 };

-export default function ProfilesView({ profileState }: ProfilesViewProps) {
+export default function ProfilesView({
+  profileState,
+  profilesUIEnabled,
+  setProfilesUIEnabled,
+}: ProfilesViewProps) {
  const { t } = useTranslation(["views/settings", "common"]);
  const { data: config, mutate: updateConfig } =
    useSWR<FrigateConfig>("config");
@ -182,68 +190,95 @@ export default function ProfilesView({ profileState }: ProfilesViewProps) {
    return null;
  }

+  const hasProfiles = allProfileNames.length > 0;
+
  return (
    <div className="flex size-full flex-col lg:pr-2">
      <Heading as="h4" className="mb-5">
        {t("profiles.title", { ns: "views/settings" })}
      </Heading>

-      {/* Active Profile Section */}
-      <div className="mb-6 rounded-lg border border-border/70 bg-card/30 p-4">
-        <div className="mb-3 text-sm font-semibold text-primary-variant">
-          {t("profiles.activeProfile", { ns: "views/settings" })}
+      {/* Enable Profiles Toggle — shown only when no profiles exist */}
+      {!hasProfiles && setProfilesUIEnabled && (
+        <div className="mb-6 rounded-lg border border-border/70 bg-card/30 p-4">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="profiles-toggle" className="cursor-pointer">
+              {t("profiles.enableSwitch", { ns: "views/settings" })}
+            </Label>
+            <Switch
+              id="profiles-toggle"
+              checked={profilesUIEnabled ?? false}
+              onCheckedChange={setProfilesUIEnabled}
+            />
+          </div>
+          <p className="mt-3 text-sm text-muted-foreground">
+            {profilesUIEnabled
+              ? t("profiles.enabledDescription", { ns: "views/settings" })
+              : t("profiles.disabledDescription", { ns: "views/settings" })}
+          </p>
        </div>
-        <div className="flex items-center gap-3">
-          <Select
-            value={activeProfile ?? "__none__"}
-            onValueChange={(v) =>
-              handleActivateProfile(v === "__none__" ? null : v)
-            }
-            disabled={activating}
-          >
-            <SelectTrigger className="w-[200px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="__none__">
-                {t("profiles.noActiveProfile", { ns: "views/settings" })}
-              </SelectItem>
-              {allProfileNames.map((profile) => {
-                const color = getProfileColor(profile, allProfileNames);
-                return (
-                  <SelectItem key={profile} value={profile}>
-                    <div className="flex items-center gap-2">
-                      <span
-                        className={cn(
-                          "h-2 w-2 shrink-0 rounded-full",
-                          color.dot,
-                        )}
-                      />
-                      {profile}
-                    </div>
-                  </SelectItem>
-                );
-              })}
-            </SelectContent>
-          </Select>
-          {activeProfile && (
-            <Badge
-              className={cn(
-                "cursor-default",
-                getProfileColor(activeProfile, allProfileNames).bg,
-                "text-white",
-              )}
+      )}
+
+      {/* Active Profile Section — only when profiles exist */}
+      {hasProfiles && (
+        <div className="mb-6 rounded-lg border border-border/70 bg-card/30 p-4">
+          <div className="mb-3 text-sm font-semibold text-primary-variant">
+            {t("profiles.activeProfile", { ns: "views/settings" })}
+          </div>
+          <div className="flex items-center gap-3">
+            <Select
+              value={activeProfile ?? "__none__"}
+              onValueChange={(v) =>
+                handleActivateProfile(v === "__none__" ? null : v)
+              }
+              disabled={activating}
            >
-              {t("profiles.active", { ns: "views/settings" })}
-            </Badge>
-          )}
+              <SelectTrigger className="w-[200px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__">
+                  {t("profiles.noActiveProfile", { ns: "views/settings" })}
+                </SelectItem>
+                {allProfileNames.map((profile) => {
+                  const color = getProfileColor(profile, allProfileNames);
+                  return (
+                    <SelectItem key={profile} value={profile}>
+                      <div className="flex items-center gap-2">
+                        <span
+                          className={cn(
+                            "h-2 w-2 shrink-0 rounded-full",
+                            color.dot,
+                          )}
+                        />
+                        {profile}
+                      </div>
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+            {activeProfile && (
+              <Badge
+                className={cn(
+                  "cursor-default",
+                  getProfileColor(activeProfile, allProfileNames).bg,
+                  "text-white",
+                )}
+              >
+                {t("profiles.active", { ns: "views/settings" })}
+              </Badge>
+            )}
+          </div>
        </div>
-      </div>
+      )}

      {/* Profile Cards */}
-      {allProfileNames.length === 0 ? (
+      {!hasProfiles ? (
        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-          <p>{t("profiles.noProfiles", { ns: "views/settings" })}</p>
+          {!profilesUIEnabled && (
+            <p>{t("profiles.noProfiles", { ns: "views/settings" })}</p>
+          )}
        </div>
      ) : (
        <div className="flex flex-col gap-3">
--- a/web/src/views/settings/SingleSectionPage.tsx
+++ b/web/src/views/settings/SingleSectionPage.tsx
@ -28,6 +28,8 @@ export type SettingsPageProps = {
    data: ConfigSectionData | null,
  ) => void;
  profileState?: ProfileState;
+  profilesUIEnabled?: boolean;
+  setProfilesUIEnabled?: React.Dispatch<React.SetStateAction<boolean>>;
 };

 export type SectionStatus = {