add profiles enable toggle and improve empty state

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

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}
                   />
                 );
               })()}

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,13 +190,37 @@ 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 */}
+      {/* 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>
+      )}
+
+      {/* 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" })}
@@ -239,11 +271,14 @@ export default function ProfilesView({ profileState }: ProfilesViewProps) {
             )}
           </div>
         </div>
+      )}
 
       {/* Profile Cards */}
-      {allProfileNames.length === 0 ? (
+      {!hasProfiles ? (
         <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+          {!profilesUIEnabled && (
             <p>{t("profiles.noProfiles", { ns: "views/settings" })}</p>
+          )}
         </div>
       ) : (
         <div className="flex flex-col gap-3">

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 = {