refine chat header and unread tracking

Author: dnywh

src/components/AvatarPair/AvatarPair.tsx

@@ -1,7 +1,7 @@
 import {
   getListingAvatar,
   getListingOwnerAvatar,
-  getProfileAvatar,
+  getProfileAvatarSource,
 } from "@/utils/listingUtils";
 
 import Avatar from "@/components/Avatar";
@@ -107,7 +107,7 @@ export default function AvatarPair({
 }: AvatarPairProps) {
   const avatarSource =
     role === "owner"
-      ? (getProfileAvatar(profile?.avatar) as AvatarSource)
+      ? (getProfileAvatarSource(profile?.avatar) as AvatarSource)
       : (getListingAvatar(listing, user) as AvatarSource);
 
   const primaryAvatarProps = toAvatarComponentProps(avatarSource);

src/components/ChatHeader/ChatHeader.tsx

@@ -115,6 +115,7 @@ type ChatRole = "initiator" | "owner";
 function getChatRole(
   thread: ChatThreadRecord | null | undefined,
   user: ChatUser | null | undefined,
+  listing: ChatListing,
   isDemo: boolean
 ): ChatRole {
   if (isDemo) {
@@ -125,6 +126,14 @@ function getChatRole(
     return "initiator";
   }
 
+  if (!thread) {
+    if (listing.owner_id && listing.owner_id === user?.id) {
+      return "owner";
+    }
+
+    return "initiator";
+  }
+
   return "owner";
 }
 
@@ -156,7 +165,7 @@ function ChatHeader({
   const t = useTranslations();
   const router = useRouter();
 
-  const role = getChatRole(thread, user, isDemo);
+  const role = getChatRole(thread, user, listing, isDemo);
 
   const otherPersonName =
     role === "initiator"

src/contexts/UnreadMessagesContext.tsx

@@ -2,6 +2,7 @@
 
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { createClient } from "@/utils/supabase/client";
+import { usePathname } from "next/navigation";
 import type { Dispatch, PropsWithChildren, SetStateAction } from "react";
 
 type ThreadReadStatus = Record<string, boolean>;
@@ -40,6 +41,7 @@ export function UnreadMessagesProvider({ children }: PropsWithChildren) {
   );
   const [hasViewedChats, setHasViewedChats] = useState(false);
   const supabase = useMemo(() => createClient(), []);
+  const pathname = usePathname();
 
   useEffect(() => {
     let isActive = true;
@@ -80,22 +82,10 @@ export function UnreadMessagesProvider({ children }: PropsWithChildren) {
   }, [supabase]);
 
   useEffect(() => {
-    function handleRouteChange() {
-      if (window.location.pathname === "/chats") {
-        setHasViewedChats(true);
-      }
+    if (pathname === "/chats") {
+      setHasViewedChats(true);
     }
-
-    handleRouteChange();
-
-    const observer = new MutationObserver(handleRouteChange);
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-    });
-
-    return () => observer.disconnect();
-  }, []);
+  }, [pathname]);
 
   useEffect(() => {
     if (isAuthDebugEnabled) {

src/utils/listingUtils.ts

@@ -131,12 +131,14 @@ export function getListingOwnerAvatar(
   };
 }
 
-export function getProfileAvatar(profileId: string | null | undefined) {
-  if (!profileId) return null;
+export function getProfileAvatarSource(
+  avatarFilename: string | null | undefined
+) {
+  if (!avatarFilename) return null;
 
   return {
     bucket: "avatars",
-    filename: profileId,
+    filename: avatarFilename,
     alt: "The avatar for this profile",
   };
 }