refactor profilesview and add dots/border colors when overridden

web/public/locales/en/views/settings.json

@@ -16,6 +16,12 @@
     "maintenance": "Maintenance - Frigate",
     "profiles": "Profiles - Frigate"
   },
+  "button": {
+    "overriddenGlobal": "Overridden (Global)",
+    "overriddenGlobalTooltip": "This camera overrides global configuration settings in this section",
+    "overriddenBaseConfig": "Overridden (Base Config)",
+    "overriddenBaseConfigTooltip": "The {{profile}} profile overrides configuration settings in this section"
+  },
   "menu": {
     "general": "General",
     "globalConfig": "Global configuration",
@@ -1453,6 +1459,8 @@
     "deactivated": "Profile deactivated",
     "noProfiles": "No profiles defined. Add a profile from any camera section.",
     "noOverrides": "No overrides",
+    "cameraCount_one": "{{count}} camera",
+    "cameraCount_other": "{{count}} cameras",
     "baseConfig": "Base Config",
     "addProfile": "Add Profile",
     "newProfile": "New Profile",

web/src/components/config-form/sections/BaseSection.tsx

@@ -28,6 +28,11 @@ import { useConfigOverride } from "@/hooks/use-config-override";
 import { useSectionSchema } from "@/hooks/use-config-schema";
 import type { FrigateConfig } from "@/types/frigateConfig";
 import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
 import { LuChevronDown, LuChevronRight } from "react-icons/lu";
 import Heading from "@/components/ui/heading";
@@ -127,6 +132,7 @@ export interface BaseSectionProps {
   onStatusChange?: (status: {
     hasChanges: boolean;
     isOverridden: boolean;
+    overrideSource?: "global" | "profile";
     hasValidationErrors: boolean;
   }) => void;
   /** Pending form data keyed by "sectionKey" or "cameraName::sectionKey" */
@@ -139,6 +145,8 @@ export interface BaseSectionProps {
   ) => void;
   /** When set, editing this profile's overrides instead of the base config */
   profileName?: string;
+  /** Border color class for profile override badge (e.g., "border-amber-500") */
+  profileBorderColor?: string;
 }
 
 export interface CreateSectionOptions {
@@ -170,6 +178,7 @@ export function ConfigSection({
   pendingDataBySection,
   onPendingDataChange,
   profileName,
+  profileBorderColor,
 }: ConfigSectionProps) {
   // For replay level, treat as camera-level config access
   const effectiveLevel = level === "replay" ? "camera" : level;
@@ -267,7 +276,7 @@ export function ConfigSection({
     [sectionPath, level, sectionSchema],
   );
 
-  // Get override status
+  // Get override status (camera vs global)
   const { isOverridden, globalValue, cameraValue } = useConfigOverride({
     config,
     cameraName: effectiveLevel === "camera" ? cameraName : undefined,
@@ -275,6 +284,16 @@ export function ConfigSection({
     compareFields: sectionConfig.overrideFields,
   });
 
+  // Check if the active profile overrides the base config for this section
+  const profileOverridesSection = useMemo(() => {
+    if (!profileName || !cameraName || !config) return false;
+    const profileData = config.cameras?.[cameraName]?.profiles?.[profileName];
+    return !!profileData?.[sectionPath as keyof typeof profileData];
+  }, [profileName, cameraName, config, sectionPath]);
+
+  const overrideSource: "global" | "profile" | undefined =
+    profileOverridesSection ? "profile" : isOverridden ? "global" : undefined;
+
   // Get current form data
   // When editing a profile, show base camera config deep-merged with profile overrides
   const rawSectionValue = useMemo(() => {
@@ -409,8 +428,20 @@ export function ConfigSection({
   }, [formData, pendingData, extraHasChanges]);
 
   useEffect(() => {
-    onStatusChange?.({ hasChanges, isOverridden, hasValidationErrors });
+    onStatusChange?.({
-  }, [hasChanges, isOverridden, hasValidationErrors, onStatusChange]);
+      hasChanges,
+      isOverridden: profileOverridesSection || isOverridden,
+      overrideSource,
+      hasValidationErrors,
+    });
+  }, [
+    hasChanges,
+    isOverridden,
+    profileOverridesSection,
+    overrideSource,
+    hasValidationErrors,
+    onStatusChange,
+  ]);
 
   // Handle form data change
   const handleChange = useCallback(
@@ -991,13 +1022,32 @@ export function ConfigSection({
                   <Heading as="h4">{title}</Heading>
                   {showOverrideIndicator &&
                     effectiveLevel === "camera" &&
-                    isOverridden && (
+                    (profileOverridesSection || isOverridden) && (
-                      <Badge variant="secondary" className="text-xs">
+                      <Tooltip>
-                        {t("button.overridden", {
+                        <TooltipTrigger asChild>
-                          ns: "common",
+                          <Badge variant="secondary" className="text-xs">
-                          defaultValue: "Overridden",
+                            {overrideSource === "profile"
-                        })}
+                              ? t("button.overriddenBaseConfig", {
-                      </Badge>
+                                  ns: "common",
+                                  defaultValue: "Overridden (Base Config)",
+                                })
+                              : t("button.overriddenGlobal", {
+                                  ns: "views/settings",
+                                  defaultValue: "Overridden (Global)",
+                                })}
+                          </Badge>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          {overrideSource === "profile"
+                            ? t("button.overriddenBaseConfigTooltip", {
+                                ns: "common",
+                                profile: profileName,
+                              })
+                            : t("button.overriddenGlobalTooltip", {
+                                ns: "views/settings",
+                              })}
+                        </TooltipContent>
+                      </Tooltip>
                     )}
                   {hasChanges && (
                     <Badge variant="outline" className="text-xs">
@@ -1035,16 +1085,40 @@ export function ConfigSection({
                 <Heading as="h4">{title}</Heading>
                 {showOverrideIndicator &&
                   effectiveLevel === "camera" &&
-                  isOverridden && (
+                  (profileOverridesSection || isOverridden) && (
-                    <Badge
+                    <Tooltip>
-                      variant="secondary"
+                      <TooltipTrigger asChild>
-                      className="cursor-default border-2 border-selected text-xs text-primary-variant"
+                        <Badge
-                    >
+                          variant="secondary"
-                      {t("button.overridden", {
+                          className={cn(
-                        ns: "common",
+                            "cursor-default border-2 text-xs text-primary-variant",
-                        defaultValue: "Overridden",
+                            overrideSource === "profile" && profileBorderColor
-                      })}
+                              ? profileBorderColor
-                    </Badge>
+                              : "border-selected",
+                          )}
+                        >
+                          {overrideSource === "profile"
+                            ? t("button.overriddenBaseConfig", {
+                                ns: "common",
+                                defaultValue: "Overridden (Base Config)",
+                              })
+                            : t("button.overriddenGlobal", {
+                                ns: "views/settings",
+                                defaultValue: "Overridden (Global)",
+                              })}
+                        </Badge>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {overrideSource === "profile"
+                          ? t("button.overriddenBaseConfigTooltip", {
+                              ns: "common",
+                              profile: profileName,
+                            })
+                          : t("button.overriddenGlobalTooltip", {
+                              ns: "views/settings",
+                            })}
+                      </TooltipContent>
+                    </Tooltip>
                   )}
                 {hasChanges && (
                   <Badge

web/src/pages/Settings.tsx

@@ -1309,12 +1309,29 @@ export default function Settings() {
     [],
   );
 
+  // The active profile being edited for the selected camera
+  const activeEditingProfile = selectedCamera
+    ? (editingProfile[selectedCamera] ?? null)
+    : null;
+
+  // Profile color for the active editing profile
+  const activeProfileColor = useMemo(
+    () =>
+      activeEditingProfile
+        ? getProfileColor(activeEditingProfile, allProfileNames)
+        : undefined,
+    [activeEditingProfile, allProfileNames],
+  );
+
   // Initialize override status for all camera sections
   useEffect(() => {
     if (!selectedCamera || !cameraOverrides) return;
 
     const overrideMap: Partial<
-      Record<SettingsType, Pick<SectionStatus, "hasChanges" | "isOverridden">>
+      Record<
+        SettingsType,
+        Pick<SectionStatus, "hasChanges" | "isOverridden" | "overrideSource">
+      >
     > = {};
 
     // Build a set of menu keys that have pending changes for this camera
@@ -1327,13 +1344,29 @@ export default function Settings() {
       }
     }
 
+    // Get profile data if a profile is being edited
+    const profileData = activeEditingProfile
+      ? config?.cameras?.[selectedCamera]?.profiles?.[activeEditingProfile]
+      : undefined;
+
     // Set override status for all camera sections using the shared mapping
     Object.entries(CAMERA_SECTION_MAPPING).forEach(
       ([sectionKey, settingsKey]) => {
-        const isOverridden = cameraOverrides.includes(sectionKey);
+        const globalOverridden = cameraOverrides.includes(sectionKey);
+
+        // Check if the active profile overrides this section
+        const profileOverrides = profileData
+          ? !!profileData[sectionKey as keyof typeof profileData]
+          : false;
+
         overrideMap[settingsKey] = {
           hasChanges: pendingMenuKeys.has(settingsKey),
-          isOverridden,
+          isOverridden: profileOverrides || globalOverridden,
+          overrideSource: profileOverrides
+            ? "profile"
+            : globalOverridden
+              ? "global"
+              : undefined,
         };
       },
     );
@@ -1346,6 +1379,7 @@ export default function Settings() {
         merged[key as SettingsType] = {
           hasChanges: status.hasChanges,
           isOverridden: status.isOverridden,
+          overrideSource: status.overrideSource,
           hasValidationErrors: existingStatus?.hasValidationErrors ?? false,
         };
       });
@@ -1356,6 +1390,8 @@ export default function Settings() {
     cameraOverrides,
     pendingDataBySection,
     pendingKeyToMenuKey,
+    activeEditingProfile,
+    config,
   ]);
 
   const renderMenuItemLabel = useCallback(
@@ -1365,13 +1401,20 @@ export default function Settings() {
         CAMERA_SECTION_KEYS.has(key) && status?.isOverridden;
       const showUnsavedDot = status?.hasChanges;
 
+      const dotColor =
+        status?.overrideSource === "profile" && activeProfileColor
+          ? activeProfileColor.dot
+          : "bg-selected";
+
       return (
         <div className="flex w-full items-center justify-between pr-4 md:pr-0">
           <div>{t("menu." + key)}</div>
           {(showOverrideDot || showUnsavedDot) && (
             <div className="ml-2 flex items-center gap-2">
               {showOverrideDot && (
-                <span className="inline-block size-2 rounded-full bg-selected" />
+                <span
+                  className={cn("inline-block size-2 rounded-full", dotColor)}
+                />
               )}
               {showUnsavedDot && (
                 <span className="inline-block size-2 rounded-full bg-danger" />
@@ -1381,7 +1424,7 @@ export default function Settings() {
         </div>
       );
     },
-    [sectionStatusByKey, t],
+    [sectionStatusByKey, t, activeProfileColor],
   );
 
   if (isMobile) {

web/src/types/profile.ts

@@ -2,6 +2,7 @@ export type ProfileColor = {
   bg: string;
   text: string;
   dot: string;
+  border: string;
   bgMuted: string;
 };
 

web/src/utils/profileColors.ts

@@ -5,48 +5,56 @@ const PROFILE_COLORS: ProfileColor[] = [
     bg: "bg-amber-500",
     text: "text-amber-500",
     dot: "bg-amber-500",
+    border: "border-amber-500",
     bgMuted: "bg-amber-500/20",
   },
   {
     bg: "bg-purple-500",
     text: "text-purple-500",
     dot: "bg-purple-500",
+    border: "border-purple-500",
     bgMuted: "bg-purple-500/20",
   },
   {
     bg: "bg-rose-500",
     text: "text-rose-500",
     dot: "bg-rose-500",
+    border: "border-rose-500",
     bgMuted: "bg-rose-500/20",
   },
   {
     bg: "bg-cyan-500",
     text: "text-cyan-500",
     dot: "bg-cyan-500",
+    border: "border-cyan-500",
     bgMuted: "bg-cyan-500/20",
   },
   {
     bg: "bg-orange-500",
     text: "text-orange-500",
     dot: "bg-orange-500",
+    border: "border-orange-500",
     bgMuted: "bg-orange-500/20",
   },
   {
     bg: "bg-teal-500",
     text: "text-teal-500",
     dot: "bg-teal-500",
+    border: "border-teal-500",
     bgMuted: "bg-teal-500/20",
   },
   {
     bg: "bg-emerald-500",
     text: "text-emerald-500",
     dot: "bg-emerald-500",
+    border: "border-emerald-500",
     bgMuted: "bg-emerald-500/20",
   },
   {
     bg: "bg-blue-500",
     text: "text-blue-500",
     dot: "bg-blue-500",
+    border: "border-blue-500",
     bgMuted: "bg-blue-500/20",
   },
 ];

web/src/views/settings/ProfilesView.tsx

@@ -3,7 +3,8 @@ import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 import axios from "axios";
 import { toast } from "sonner";
-import { Camera, Trash2 } from "lucide-react";
+import { Trash2 } from "lucide-react";
+import { LuChevronDown, LuChevronRight, LuPlus } from "react-icons/lu";
 import type { FrigateConfig } from "@/types/frigateConfig";
 import type { ProfileState } from "@/types/profile";
 import { getProfileColor } from "@/utils/profileColors";
@@ -13,6 +14,7 @@ import { cn } from "@/lib/utils";
 import Heading from "@/components/ui/heading";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -20,6 +22,18 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -32,6 +46,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 
 type ProfilesApiResponse = {
   profiles: string[];
@@ -59,6 +74,12 @@ export default function ProfilesView({
   const [activating, setActivating] = useState(false);
   const [deleteProfile, setDeleteProfile] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
+  const [expandedProfiles, setExpandedProfiles] = useState<Set<string>>(
+    new Set(),
+  );
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [newProfileName, setNewProfileName] = useState("");
+  const [nameError, setNameError] = useState<string | null>(null);
 
   useEffect(() => {
     document.title = t("documentTitle.profiles", {
@@ -105,13 +126,33 @@ export default function ProfilesView({
     return data;
   }, [config, allProfileNames]);
 
-  const cameraCount = useMemo(() => {
+  const validateName = useCallback(
-    if (!config) return 0;
+    (name: string): string | null => {
-    return Object.keys(profileOverviewData).reduce((max, profile) => {
+      if (!name.trim()) return null;
-      const count = Object.keys(profileOverviewData[profile] ?? {}).length;
+      if (!/^[a-z0-9_]+$/.test(name)) {
-      return Math.max(max, count);
+        return t("profiles.nameInvalid", { ns: "views/settings" });
-    }, 0);
+      }
-  }, [config, profileOverviewData]);
+      if (allProfileNames.includes(name)) {
+        return t("profiles.nameDuplicate", { ns: "views/settings" });
+      }
+      return null;
+    },
+    [allProfileNames, t],
+  );
+
+  const handleAddSubmit = useCallback(() => {
+    const name = newProfileName.trim();
+    if (!name) return;
+    const error = validateName(name);
+    if (error) {
+      setNameError(error);
+      return;
+    }
+    profileState?.onAddProfile(name);
+    setAddDialogOpen(false);
+    setNewProfileName("");
+    setNameError(null);
+  }, [newProfileName, validateName, profileState]);
 
   const handleActivateProfile = useCallback(
     async (profile: string | null) => {
@@ -215,6 +256,18 @@ export default function ProfilesView({
     t,
   ]);
 
+  const toggleExpanded = useCallback((profile: string) => {
+    setExpandedProfiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(profile)) {
+        next.delete(profile);
+      } else {
+        next.add(profile);
+      }
+      return next;
+    });
+  }, []);
+
   if (!config || !profilesData) {
     return null;
   }
@@ -244,67 +297,67 @@ export default function ProfilesView({
         </div>
       )}
 
-      {profilesUIEnabled && (
+      {profilesUIEnabled && !hasProfiles && (
         <p className="mb-5 max-w-xl text-sm text-primary-variant">
           {t("profiles.enabledDescription", { ns: "views/settings" })}
         </p>
       )}
 
-      {/* Active Profile Section — only when profiles exist */}
+      {/* Active Profile + Add Profile bar */}
-      {hasProfiles && (
+      {(hasProfiles || profilesUIEnabled) && (
-        <div className="mb-6 rounded-lg border border-border/70 bg-card/30 p-4">
+        <div className="my-4 flex items-center justify-between rounded-lg border border-border/70 bg-card/30 p-4">
-          <div className="mb-3 text-sm font-semibold text-primary-variant">
+          {hasProfiles && (
-            {t("profiles.activeProfile", { ns: "views/settings" })}
+            <div className="flex items-center gap-3">
-          </div>
+              <span className="text-sm font-semibold text-primary-variant">
-          <div className="flex items-center gap-3">
+                {t("profiles.activeProfile", { ns: "views/settings" })}
-            <Select
+              </span>
-              value={activeProfile ?? "__none__"}
+              <Select
-              onValueChange={(v) =>
+                value={activeProfile ?? "__none__"}
-                handleActivateProfile(v === "__none__" ? null : v)
+                onValueChange={(v) =>
-              }
+                  handleActivateProfile(v === "__none__" ? null : v)
-              disabled={activating}
+                }
-            >
+                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",
-                )}
               >
-                {t("profiles.active", { ns: "views/settings" })}
+                <SelectTrigger className="">
-              </Badge>
+                  <SelectValue />
-            )}
+                </SelectTrigger>
-          </div>
+                <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>
+              {activating && <ActivityIndicator className="w-auto" size={18} />}
+            </div>
+          )}
+          <Button
+            variant="default"
+            size="sm"
+            onClick={() => setAddDialogOpen(true)}
+          >
+            <LuPlus className="mr-1.5 size-4" />
+            {t("profiles.addProfile", { ns: "views/settings" })}
+          </Button>
         </div>
       )}
 
-      {/* Profile Cards */}
+      {/* Profile List */}
       {!hasProfiles ? (
         profilesUIEnabled ? (
           <p className="text-sm text-muted-foreground">
@@ -314,104 +367,171 @@ export default function ProfilesView({
           <div />
         )
       ) : (
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-2">
           {allProfileNames.map((profile) => {
             const color = getProfileColor(profile, allProfileNames);
             const isActive = activeProfile === profile;
             const cameraData = profileOverviewData[profile] ?? {};
             const cameras = Object.keys(cameraData).sort();
+            const isExpanded = expandedProfiles.has(profile);
 
             return (
-              <div
+              <Collapsible
                 key={profile}
-                className={cn(
+                open={isExpanded}
-                  "rounded-lg border p-4",
+                onOpenChange={() => toggleExpanded(profile)}
-                  isActive
-                    ? "border-selected bg-selected/5"
-                    : "border-border/70 bg-card/30",
-                )}
               >
-                <div className="mb-3 flex items-center justify-between">
+                <div
-                  <div className="flex items-center gap-2">
+                  className={cn(
-                    <span
+                    "rounded-lg border",
-                      className={cn(
+                    isActive
-                        "h-2.5 w-2.5 shrink-0 rounded-full",
+                      ? "border-selected bg-selected/5"
-                        color.dot,
+                      : "border-border/70",
-                      )}
+                  )}
-                    />
+                >
-                    <span className="font-medium">{profile}</span>
+                  <CollapsibleTrigger asChild>
-                    {isActive && (
+                    <div className="flex cursor-pointer items-center justify-between px-4 py-3 hover:bg-secondary/30">
-                      <Badge
+                      <div className="flex items-center gap-3">
-                        variant="secondary"
+                        {isExpanded ? (
-                        className="text-xs text-primary-variant"
+                          <LuChevronDown className="size-4 text-muted-foreground" />
-                      >
+                        ) : (
-                        {t("profiles.active", { ns: "views/settings" })}
+                          <LuChevronRight className="size-4 text-muted-foreground" />
-                      </Badge>
+                        )}
-                    )}
+                        <span
-                  </div>
+                          className={cn(
-                  <Button
+                            "size-2.5 shrink-0 rounded-full",
-                    variant="ghost"
+                            color.dot,
-                    size="icon"
+                          )}
-                    className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                        />
-                    onClick={() => setDeleteProfile(profile)}
+                        <span className="font-medium">{profile}</span>
-                  >
+                        {isActive && (
-                    <Trash2 className="h-4 w-4" />
+                          <Badge
-                  </Button>
+                            variant="secondary"
-                </div>
+                            className="text-xs text-primary-variant"
-
+                          >
-                {cameras.length === 0 ? (
+                            {t("profiles.active", { ns: "views/settings" })}
-                  <p className="text-xs text-muted-foreground">
+                          </Badge>
-                    {t("profiles.noOverrides", { ns: "views/settings" })}
+                        )}
-                  </p>
+                      </div>
-                ) : (
+                      <div className="flex items-center gap-3">
-                  <div
+                        <span className="text-sm text-muted-foreground">
-                    className={cn(
+                          {cameras.length > 0
-                      "grid gap-2",
+                            ? t("profiles.cameraCount", {
-                      cameraCount <= 3
+                                ns: "views/settings",
-                        ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+                                count: cameras.length,
-                        : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+                              })
-                    )}
+                            : t("profiles.noOverrides", {
-                  >
+                                ns: "views/settings",
-                    {cameras.map((camera) => {
+                              })}
-                      const sections = cameraData[camera];
+                        </span>
-                      return (
+                        <Button
-                        <div
+                          variant="ghost"
-                          key={camera}
+                          size="icon"
-                          className="flex items-start gap-2 rounded-md bg-secondary/40 px-3 py-2"
+                          className="size-7 text-muted-foreground hover:text-destructive"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setDeleteProfile(profile);
+                          }}
                         >
-                          <Camera className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                          <Trash2 className="size-4" />
-                          <div className="min-w-0">
+                        </Button>
-                            <div className="truncate text-xs font-medium">
+                      </div>
-                              {resolveCameraName(config, camera)}
+                    </div>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    {cameras.length > 0 ? (
+                      <div className="mx-4 mb-3 ml-11 border-l border-border/50 pl-4">
+                        {cameras.map((camera) => {
+                          const sections = cameraData[camera];
+                          return (
+                            <div
+                              key={camera}
+                              className="flex items-baseline gap-3 py-1.5"
+                            >
+                              <span className="min-w-[120px] shrink-0 truncate text-sm font-medium">
+                                {resolveCameraName(config, camera)}
+                              </span>
+                              <span className="text-sm text-muted-foreground">
+                                {sections
+                                  .map((section) =>
+                                    t(`configForm.sections.${section}`, {
+                                      ns: "views/settings",
+                                      defaultValue: section,
+                                    }),
+                                  )
+                                  .join(", ")}
+                              </span>
                             </div>
-                            <div className="mt-1 flex flex-wrap gap-1">
+                          );
-                              {sections.map((section) => (
+                        })}
-                                <span
+                      </div>
-                                  key={section}
+                    ) : (
-                                  className={cn(
+                      <div className="mx-4 mb-3 ml-11 text-sm text-muted-foreground">
-                                    "rounded px-1.5 py-0.5 text-[10px] leading-tight text-white",
+                        {t("profiles.noOverrides", { ns: "views/settings" })}
-                                    color.bg,
+                      </div>
-                                  )}
+                    )}
-                                >
+                  </CollapsibleContent>
-                                  {t(`configForm.sections.${section}`, {
+                </div>
-                                    ns: "views/settings",
+              </Collapsible>
-                                    defaultValue: section,
-                                  })}
-                                </span>
-                              ))}
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
             );
           })}
         </div>
       )}
 
+      {/* Add Profile Dialog */}
+      <Dialog
+        open={addDialogOpen}
+        onOpenChange={(open) => {
+          setAddDialogOpen(open);
+          if (!open) {
+            setNewProfileName("");
+            setNameError(null);
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-[360px]">
+          <DialogHeader>
+            <DialogTitle>
+              {t("profiles.newProfile", { ns: "views/settings" })}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-2 py-2">
+            <Input
+              placeholder={t("profiles.profileNamePlaceholder", {
+                ns: "views/settings",
+              })}
+              value={newProfileName}
+              onChange={(e) => {
+                setNewProfileName(e.target.value);
+                setNameError(validateName(e.target.value));
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleAddSubmit();
+                }
+              }}
+              autoFocus
+            />
+            {nameError && (
+              <p className="text-xs text-destructive">{nameError}</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setAddDialogOpen(false)}>
+              {t("button.cancel", { ns: "common" })}
+            </Button>
+            <Button
+              variant="select"
+              onClick={handleAddSubmit}
+              disabled={!newProfileName.trim() || !!nameError}
+            >
+              {t("button.add", { ns: "common" })}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* Delete Profile Confirmation */}
       <AlertDialog
         open={!!deleteProfile}

web/src/views/settings/SingleSectionPage.tsx

@@ -4,9 +4,16 @@ import type { SectionConfig } from "@/components/config-form/sections";
 import { ConfigSectionTemplate } from "@/components/config-form/sections";
 import type { PolygonType } from "@/types/canvas";
 import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import type { ConfigSectionData } from "@/types/configForm";
 import type { ProfileState } from "@/types/profile";
 import { getSectionConfig } from "@/utils/configUtil";
+import { getProfileColor } from "@/utils/profileColors";
+import { cn } from "@/lib/utils";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { Link } from "react-router-dom";
 import { LuExternalLink } from "react-icons/lu";
@@ -35,6 +42,8 @@ export type SettingsPageProps = {
 export type SectionStatus = {
   hasChanges: boolean;
   isOverridden: boolean;
+  /** Where the override comes from: "global" = camera overrides global, "profile" = profile overrides base */
+  overrideSource?: "global" | "profile";
   hasValidationErrors: boolean;
 };
 
@@ -87,6 +96,14 @@ export function SingleSectionPage({
     ? (profileState?.editingProfile[selectedCamera] ?? null)
     : null;
 
+  const profileColor = useMemo(
+    () =>
+      currentEditingProfile && profileState?.allProfileNames
+        ? getProfileColor(currentEditingProfile, profileState.allProfileNames)
+        : undefined,
+    [currentEditingProfile, profileState?.allProfileNames],
+  );
+
   const handleSectionStatusChange = useCallback(
     (status: SectionStatus) => {
       setSectionStatus(status);
@@ -136,15 +153,40 @@ export function SingleSectionPage({
             {level === "camera" &&
               showOverrideIndicator &&
               sectionStatus.isOverridden && (
-                <Badge
+                <Tooltip>
-                  variant="secondary"
+                  <TooltipTrigger asChild>
-                  className="cursor-default border-2 border-selected text-xs text-primary-variant"
+                    <Badge
-                >
+                      variant="secondary"
-                  {t("button.overridden", {
+                      className={cn(
-                    ns: "common",
+                        "cursor-default border-2 text-xs text-primary-variant",
-                    defaultValue: "Overridden",
+                        sectionStatus.overrideSource === "profile" &&
-                  })}
+                          profileColor
-                </Badge>
+                          ? profileColor.border
+                          : "border-selected",
+                      )}
+                    >
+                      {sectionStatus.overrideSource === "profile"
+                        ? t("button.overriddenBaseConfig", {
+                            ns: "views/settings",
+                            defaultValue: "Overridden (Base Config)",
+                          })
+                        : t("button.overriddenGlobal", {
+                            ns: "views/settings",
+                            defaultValue: "Overridden (Global)",
+                          })}
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {sectionStatus.overrideSource === "profile"
+                      ? t("button.overriddenBaseConfigTooltip", {
+                          ns: "common",
+                          profile: currentEditingProfile,
+                        })
+                      : t("button.overriddenGlobalTooltip", {
+                          ns: "views/settings",
+                        })}
+                  </TooltipContent>
+                </Tooltip>
               )}
             {sectionStatus.hasChanges && (
               <Badge
@@ -170,6 +212,7 @@ export function SingleSectionPage({
         requiresRestart={requiresRestart}
         onStatusChange={handleSectionStatusChange}
         profileName={currentEditingProfile ?? undefined}
+        profileBorderColor={profileColor?.border}
       />
     </div>
   );