diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx index ab22a1143..d1035dd60 100644 --- a/web/src/components/Statusbar.tsx +++ b/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("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() { ); })} + {activeProfile && ( + +
+ + + {activeProfile.friendlyName} + +
+ + )}
{Object.entries(messages).length === 0 ? (