show active profile indicator in desktop status bar

web/src/components/Statusbar.tsx

@@ -4,8 +4,12 @@ import {
   StatusMessage,
 } from "@/context/statusbar-provider";
 import useStats, { useAutoFrigateStats } from "@/hooks/use-stats";
+import { cn } from "@/lib/utils";
+import type { ProfilesApiResponse } from "@/types/profile";
+import { getProfileColor } from "@/utils/profileColors";
 import { useContext, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import useSWR from "swr";
 
 import { FaCheck } from "react-icons/fa";
 import { IoIosWarning } from "react-icons/io";
@@ -46,6 +50,21 @@ export default function Statusbar() {
     });
   }, [potentialProblems, addMessage, clearMessages]);
 
+  const { data: profilesData } = useSWR<ProfilesApiResponse>("profiles");
+
+  const activeProfile = useMemo(() => {
+    if (!profilesData?.active_profile || !profilesData.profiles) return null;
+    const info = profilesData.profiles.find(
+      (p) => p.name === profilesData.active_profile,
+    );
+    const allNames = profilesData.profiles.map((p) => p.name).sort();
+    return {
+      name: profilesData.active_profile,
+      friendlyName: info?.friendly_name ?? profilesData.active_profile,
+      color: getProfileColor(profilesData.active_profile, allNames),
+    };
+  }, [profilesData]);
+
   const { payload: reindexState } = useEmbeddingsReindexProgress();
 
   useEffect(() => {
@@ -136,6 +155,21 @@ export default function Statusbar() {
             </Link>
           );
         })}
+        {activeProfile && (
+          <Link to="/settings?page=profiles">
+            <div className="flex cursor-pointer items-center gap-2 text-sm hover:underline">
+              <span
+                className={cn(
+                  "size-2 shrink-0 rounded-full",
+                  activeProfile.color.dot,
+                )}
+              />
+              <span className="max-w-[150px] truncate">
+                {activeProfile.friendlyName}
+              </span>
+            </div>
+          </Link>
+        )}
       </div>
       <div className="no-scrollbar flex h-full max-w-[50%] items-center gap-2 overflow-x-auto">
         {Object.entries(messages).length === 0 ? (