move profile dropdown from section panes to settings header

web/src/views/settings/MasksAndZonesView.tsx

@@ -36,10 +36,6 @@ import { useTranslation } from "react-i18next";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { cn } from "@/lib/utils";
 import { ProfileState } from "@/types/profile";
-import { ProfileSectionDropdown } from "@/components/settings/ProfileSectionDropdown";
-import axios from "axios";
-import { useSWRConfig } from "swr";
-
 type MasksAndZoneViewProps = {
   selectedCamera: string;
   selectedZoneMask?: PolygonType[];
@@ -56,7 +52,6 @@ export default function MasksAndZonesView({
   const { t } = useTranslation(["views/settings"]);
   const { getLocaleDocUrl } = useDocDomain();
   const { data: config } = useSWR<FrigateConfig>("config");
-  const { mutate } = useSWRConfig();
   const [allPolygons, setAllPolygons] = useState<Polygon[]>([]);
   const [editingPolygons, setEditingPolygons] = useState<Polygon[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -82,58 +77,6 @@ export default function MasksAndZonesView({
   const currentEditingProfile =
     profileState?.editingProfile[profileSectionKey] ?? null;
 
-  const hasProfileData = useCallback(
-    (profileName: string) => {
-      if (!config || !selectedCamera) return false;
-      const profileData =
-        config.cameras[selectedCamera]?.profiles?.[profileName];
-      if (!profileData) return false;
-      const hasZones =
-        profileData.zones && Object.keys(profileData.zones).length > 0;
-      const hasMotionMasks =
-        profileData.motion?.mask &&
-        Object.keys(profileData.motion.mask).length > 0;
-      const hasObjectMasks =
-        (profileData.objects?.mask &&
-          Object.keys(profileData.objects.mask).length > 0) ||
-        (profileData.objects?.filters &&
-          Object.values(profileData.objects.filters).some(
-            (f) => f.mask && Object.keys(f.mask).length > 0,
-          ));
-      return !!(hasZones || hasMotionMasks || hasObjectMasks);
-    },
-    [config, selectedCamera],
-  );
-
-  const handleDeleteProfileMasksAndZones = useCallback(
-    async (profileName: string) => {
-      try {
-        // Delete zones, motion masks, and object masks from the profile
-        await axios.put("config/set", {
-          config_data: {
-            cameras: {
-              [selectedCamera]: {
-                profiles: {
-                  [profileName]: {
-                    zones: "",
-                    motion: { mask: "" },
-                    objects: { mask: "", filters: "" },
-                  },
-                },
-              },
-            },
-          },
-        });
-        await mutate("config");
-        profileState?.onSelectProfile(selectedCamera, "masksAndZones", null);
-        toast.success(t("toast.save.success", { ns: "common" }));
-      } catch {
-        toast.error(t("toast.save.error.noMessage", { ns: "common" }));
-      }
-    },
-    [selectedCamera, mutate, profileState, t],
-  );
-
   const cameraConfig = useMemo(() => {
     if (config && selectedCamera) {
       return config.cameras[selectedCamera];
@@ -829,26 +772,6 @@ export default function MasksAndZonesView({
               <>
                 <div className="mb-2 flex items-center justify-between">
                   <Heading as="h4">{t("menu.masksAndZones")}</Heading>
-                  {profileState && selectedCamera && (
-                    <ProfileSectionDropdown
-                      cameraName={selectedCamera}
-                      sectionKey="masksAndZones"
-                      allProfileNames={profileState.allProfileNames}
-                      editingProfile={currentEditingProfile}
-                      hasProfileData={hasProfileData}
-                      onSelectProfile={(profile) =>
-                        profileState.onSelectProfile(
-                          selectedCamera,
-                          "masksAndZones",
-                          profile,
-                        )
-                      }
-                      onAddProfile={profileState.onAddProfile}
-                      onDeleteProfileSection={(profileName) =>
-                        handleDeleteProfileMasksAndZones(profileName)
-                      }
-                    />
-                  )}
                 </div>
                 <div className="flex w-full flex-col">
                   {(selectedZoneMask === undefined ||

web/src/views/settings/SingleSectionPage.tsx

@@ -1,22 +1,16 @@
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import useSWR from "swr";
 import type { SectionConfig } from "@/components/config-form/sections";
 import { ConfigSectionTemplate } from "@/components/config-form/sections";
 import type { PolygonType } from "@/types/canvas";
-import type { FrigateConfig } from "@/types/frigateConfig";
 import { Badge } from "@/components/ui/badge";
 import type { ConfigSectionData } from "@/types/configForm";
 import type { ProfileState } from "@/types/profile";
-import {
-  getSectionConfig,
-  PROFILE_ELIGIBLE_SECTIONS,
-} from "@/utils/configUtil";
+import { getSectionConfig } from "@/utils/configUtil";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { Link } from "react-router-dom";
 import { LuExternalLink } from "react-icons/lu";
 import Heading from "@/components/ui/heading";
-import { ProfileSectionDropdown } from "@/components/settings/ProfileSectionDropdown";
 
 export type SettingsPageProps = {
   selectedCamera?: string;
@@ -74,7 +68,6 @@ export function SingleSectionPage({
     "common",
   ]);
   const { getLocaleDocUrl } = useDocDomain();
-  const { data: config } = useSWR<FrigateConfig>("config");
   const [sectionStatus, setSectionStatus] = useState<SectionStatus>({
     hasChanges: false,
     isOverridden: false,
@@ -88,13 +81,6 @@ export function SingleSectionPage({
     ? getLocaleDocUrl(resolvedSectionConfig.sectionDocs)
     : undefined;
 
-  // Profile support: determine if this section supports profiles
-  const isProfileEligible =
-    level === "camera" &&
-    selectedCamera &&
-    profileState &&
-    PROFILE_ELIGIBLE_SECTIONS.has(sectionKey);
-
   const profileKey = selectedCamera
     ? `${selectedCamera}::${sectionKey}`
     : undefined;
@@ -148,36 +134,6 @@ export function SingleSectionPage({
         </div>
         <div className="flex flex-col items-end gap-2 md:flex-row md:items-center">
           <div className="flex flex-wrap items-center justify-end gap-2">
-            {isProfileEligible && selectedCamera && profileState && (
-              <ProfileSectionDropdown
-                cameraName={selectedCamera}
-                sectionKey={sectionKey}
-                allProfileNames={profileState.allProfileNames}
-                editingProfile={currentEditingProfile}
-                hasProfileData={(profile) => {
-                  const profileData =
-                    config?.cameras?.[selectedCamera]?.profiles?.[profile];
-                  return !!profileData?.[
-                    sectionKey as keyof typeof profileData
-                  ];
-                }}
-                onSelectProfile={(profile) =>
-                  profileState.onSelectProfile(
-                    selectedCamera,
-                    sectionKey,
-                    profile,
-                  )
-                }
-                onAddProfile={profileState.onAddProfile}
-                onDeleteProfileSection={(profile) =>
-                  profileState.onDeleteProfileSection(
-                    selectedCamera,
-                    sectionKey,
-                    profile,
-                  )
-                }
-              />
-            )}
             {level === "camera" &&
               showOverrideIndicator &&
               sectionStatus.isOverridden && (