w-lab-app/src/components/domains/chat/GlobalNewMessagesBanner/GlobalNewMessagesBanner.tsx
2025-09-12 21:45:46 +02:00

46 lines
1.6 KiB
TypeScript

"use client";
import { usePathname } from "next/navigation";
import { useLocale } from "next-intl";
import NewMessages from "@/components/domains/chat/NewMessages/NewMessages";
import ViewAll from "@/components/domains/chat/ViewAll/ViewAll";
import { useAppUiStore } from "@/providers/app-ui-store-provider";
import { useChats } from "@/providers/chats-provider";
import { ROUTES } from "@/shared/constants/client-routes";
import { stripLocale } from "@/shared/utils/path";
import styles from "./GlobalNewMessagesBanner.module.scss";
export default function GlobalNewMessagesBanner() {
const { unreadChats } = useChats();
// Exclude banner on chat-related, settings (profile), and retention funnel pages
const pathname = usePathname();
const locale = useLocale();
const pathnameWithoutLocale = stripLocale(pathname, locale);
const isExcluded =
pathnameWithoutLocale.startsWith(ROUTES.chat()) ||
pathnameWithoutLocale.startsWith(ROUTES.profile()) ||
pathnameWithoutLocale.startsWith("/retaining");
const hasHydrated = useAppUiStore(state => state._hasHydrated);
const { isVisibleAll } = useAppUiStore(state => state.home.newMessages);
const setHomeNewMessages = useAppUiStore(state => state.setHomeNewMessages);
if (!hasHydrated || isExcluded || unreadChats.length === 0) return null;
return (
<div className={styles.container}>
{unreadChats.length > 1 && (
<ViewAll
count={unreadChats.length}
isAll={isVisibleAll}
onClick={() => setHomeNewMessages({ isVisibleAll: !isVisibleAll })}
/>
)}
<NewMessages chats={unreadChats} isVisibleAll={isVisibleAll} />
</div>
);
}