From fa49e0e7b121021daf262e4ab6baf2844b1fc37d Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 9 Mar 2026 15:57:24 -0500
Subject: [PATCH] add active profile badge to settings toolbar

---
 web/src/pages/Settings.tsx | 45 ++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 3137f14f4..0ca568855 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -92,6 +92,8 @@ import {
   prepareSectionSavePayload,
 } from "@/utils/configUtil";
 import type { ProfileState } from "@/types/profile";
+import { getProfileColor } from "@/utils/profileColors";
+import { Badge } from "@/components/ui/badge";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import RestartDialog from "@/components/overlay/dialog/RestartDialog";
 import SaveAllPreviewPopover, {
@@ -609,6 +611,10 @@ export default function Settings() {
   >({});
 
   const { data: config } = useSWR<FrigateConfig>("config");
+  const { data: profilesData } = useSWR<{
+    profiles: string[];
+    active_profile: string | null;
+  }>("profiles");
 
   const [searchParams] = useSearchParams();
 
@@ -1217,10 +1223,27 @@ export default function Settings() {
                   />
                 </div>
               </div>
-              <div className="flex flex-row text-center">
+              <div className="flex flex-row items-center">
                 <h2 className="ml-2 text-lg">
                   {t("menu.settings", { ns: "common" })}
                 </h2>
+                {profilesData?.active_profile && (
+                  <Badge
+                    className={cn(
+                      "ml-2 cursor-pointer text-white",
+                      getProfileColor(
+                        profilesData.active_profile,
+                        allProfileNames,
+                      ).bg,
+                    )}
+                    onClick={() => {
+                      setPage("profiles");
+                      setContentMobileOpen(true);
+                    }}
+                  >
+                    {profilesData.active_profile}
+                  </Badge>
+                )}
               </div>
             </div>
 
@@ -1405,9 +1428,23 @@ export default function Settings() {
     <div className="flex h-full flex-col">
       <Toaster position="top-center" />
       <div className="flex min-h-16 items-center justify-between border-b border-secondary p-3">
-        <Heading as="h3" className="mb-0">
-          {t("menu.settings", { ns: "common" })}
-        </Heading>
+        <div className="mr-2 flex w-full items-center justify-between gap-3">
+          <Heading as="h3" className="mb-0">
+            {t("menu.settings", { ns: "common" })}
+          </Heading>
+          {profilesData?.active_profile && (
+            <Badge
+              className={cn(
+                "cursor-pointer text-white",
+                getProfileColor(profilesData.active_profile, allProfileNames)
+                  .bg,
+              )}
+              onClick={() => setPage("profiles")}
+            >
+              {profilesData.active_profile}
+            </Badge>
+          )}
+        </div>
         <div className="flex items-center gap-5">
           {hasPendingChanges && (
             <div