From bc809ee3c0a36d487b3962473c6f969d85ed346f Mon Sep 17 00:00:00 2001
From: gurpreet991 <gurpreet.singh@ellocentlabs.com>
Date: Thu, 13 Jul 2023 14:59:12 +0530
Subject: [PATCH 1/9] profile popover

---
 .../components/Channel/Chat/ChatInput.svelte  |   4 +-
 .../components/Channel/Chat/DrawerChat.svelte |  34 ++++-
 .../components/Channel/Chat/Message.svelte    |  32 +++-
 .../Channel/Chat/ProfilePopup.svelte          | 140 ++++++++++++++++++
 4 files changed, 205 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/components/Channel/Chat/ProfilePopup.svelte

diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
index 9545e01e..42666d77 100644
--- a/src/lib/components/Channel/Chat/ChatInput.svelte
+++ b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -21,7 +21,7 @@
 	$: isHost = channel.user === $page.data.user?.userId
 
 	$: viewersWithOutHost = viewers.filter((viewer) => viewer.userId !== channel.user)
-
+$: console.log("viewers : ", viewers)
 	function insert(str: string, index: number, value: string) {
 		return str.substr(0, index) + value + str.substr(index)
 	}
@@ -205,6 +205,8 @@
 		!chatMessage.includes('@') &&
 		(channel.user === $page.data.user?.userId || channel.mods?.includes($page.data.user?.userId)) &&
 		!showUsers
+
+	console.log("viewersWithOutHost: ", viewersWithOutHost)
 </script>
 
 <form class="rounded-lg bg-base-200 p-2 w-full relative">
diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
index b2b98183..172a7cf6 100644
--- a/src/lib/components/Channel/Chat/DrawerChat.svelte
+++ b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -9,6 +9,7 @@
 	import { emitChatHistoryToChannel } from '$lib/websocket'
 	import { setRole } from '$lib/utils'
 	import LastItemInViewport from '$lib/actions/LastItemInViewport'
+	import ProfilePopup from './ProfilePopup.svelte'
 
 	export let channel: any = undefined,
 		showEditChannelDrawer: boolean = false,
@@ -16,6 +17,9 @@
 		chatHistory: any[] = []
 
 	let cursor: any = undefined
+	let profileElt:any = null
+	let selectedUser:string = ""
+	let ignoreOutsideClick = false
 
 	channel_message.subscribe((value) => {
 		if (!value) return
@@ -74,13 +78,41 @@
 			})
 		}
 	}
+
+
+	const closeProfile = () => {
+		if(ignoreOutsideClick)return
+		profileElt = null
+		selectedUser = ""
+	}
+
+	const onUsernameClick = (evt:any) => {
+		profileElt = evt.target
+		selectedUser = viewers.find(i => i.username == profileElt.id.substr(1))?.userId
+		ignoreOutsideClick = true
+		setTimeout(() => {
+			ignoreOutsideClick = false
+		}, 100)
+	}
+	
 </script>
 
 <div class="bg-base-100 flex flex-col overflow-y-hidden w-72 md:w-full h-full rounded-lg">
 	<DropdownViewChannel bind:channel bind:showEditChannelDrawer />
 	<div class="flex flex-col-reverse p-3 grow overflow-y-scroll w-96">
+		<ProfilePopup 
+			open={profileElt ? true: false}
+			elt={profileElt}
+			userId={selectedUser}
+			onOutsideClick={closeProfile}
+		/>
 		{#each chatHistory as sender}
-			<Message bind:sender bind:hostId={channel.user} bind:channel />
+			<Message 
+				bind:sender 
+				bind:hostId={channel.user} 
+				bind:channel 
+				onUsernameClick={onUsernameClick}
+			 />
 		{/each}
 		<span use:LastItemInViewport on:loadMore={loadMore} />
 	</div>
diff --git a/src/lib/components/Channel/Chat/Message.svelte b/src/lib/components/Channel/Chat/Message.svelte
index 4f36f292..6aedeb42 100644
--- a/src/lib/components/Channel/Chat/Message.svelte
+++ b/src/lib/components/Channel/Chat/Message.svelte
@@ -10,10 +10,11 @@
 	import { copyToClipboard, getColoredRole, setRole } from '$lib/utils'
 	import { page } from '$app/stores'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
+	import { onMount } from "svelte"
 
-	export let sender: any, hostId: string, channel: any
+	export let sender: any, hostId: string, channel: any, onUsernameClick:any
 	let role: string, coloredRole: any
-
+	
 	$: isGuest = channel?.guests?.includes(sender.user?.userId)
 
 	$: showBanItem =
@@ -130,6 +131,30 @@
 		}
 	}
 
+	const hightlightUsername = (match:string) => {
+	    return `
+			<span 
+				class="text-info font-medium cursor-pointer"
+				name="username"
+				id=${match}
+			>
+				${match}
+			</span>
+		`;
+    }
+
+	const parse = (msg: string) => {
+		return msg.replace(/@[\w-]+[,\s]/g, hightlightUsername)
+	}
+
+
+	onMount(() => {
+		const spans = document.querySelectorAll('span[name="username"]')
+		spans.forEach((span:any) => {
+			span.onclick = onUsernameClick
+		})
+	})
+
 	$: codeSnippet = isCodeSnippet(sender.message) ? getCodeSnippet(sender.message) : false
 </script>
 
@@ -172,7 +197,8 @@
 						<span class="break-all">{codeSnippet.endText}</span>
 					{/if}
 				{:else}
-					<span class="break-all">{sender.message}</span>
+					<span class="break-all">{@html parse(sender.message)}</span>
+					
 				{/if}
 			</label>
 
diff --git a/src/lib/components/Channel/Chat/ProfilePopup.svelte b/src/lib/components/Channel/Chat/ProfilePopup.svelte
new file mode 100644
index 00000000..44408310
--- /dev/null
+++ b/src/lib/components/Channel/Chat/ProfilePopup.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { get } from '$lib/api'
+	import { setProfile, getProfile } from '$lib/stores/helperStore'
+	import { clickOutside } from '$lib/utils.js'
+	import { put, del } from '$lib/api'
+	import { createEffect } from '$lib/utils'
+
+	export let userId: string
+	export let open:boolean
+	export let onOutsideClick:any
+	export let elt: any
+
+	let self:any
+
+	const useOueryEffect = createEffect()
+
+	let profileData: any = getProfile(userId) || { profile: {} }
+	let loading = false
+
+	$: auth = {
+		userId: $page.data.user?.userId,
+		token: $page.data.user?.token
+	}
+
+	const handleClickOutside = (event: any) => {
+		if(onOutsideClick)onOutsideClick()
+	}
+
+	const doFollow = async (isFollow: any) => {
+		loading = true
+
+		const source1 = profile._id
+		const source2 = $page.data.user?.userId
+		const isFollowing = isFollow.toString()
+
+		if (isFollowing == 'true') {
+			await put(`follows`, { source1, source2 }, auth)
+		} else {
+			await del(`follows?source1=${source1}&source2=${source2}`, auth)
+		}
+
+		await loadProfile(true)
+		loading = false
+	}
+
+	const loadProfile = async (refresh: boolean) => {
+		loading = true
+		if (getProfile(userId) && !refresh) {
+			profileData = getProfile(userId)
+		} else {
+			profileData.profile = await get(`users/search/id?userId=${userId}`, auth)
+			profileData.followerCount = await get(
+				`follows/count?source=${userId}&sourceType=source1`,
+				auth
+			)
+			profileData.followingCount = await get(
+				`follows/count?source=${userId}&sourceType=source2`,
+				auth
+			)
+			if ($page.data.user?.userId) {
+				profileData.isFollowed = await get(`follows/relationship?source=${profile._id}`, auth)
+			}
+
+			setProfile(userId, profileData)
+		}
+		loading = false
+	}
+
+	$: useOueryEffect(() => {
+		if(open && userId){
+			loadProfile(false)
+		}
+	}, [open])
+
+	$: profile = profileData.profile
+	$: followerCount = profileData.followerCount || 0
+	$: followingCount = profileData.followingCount || 0
+	$: margin = (self ? self.getBoundingClientRect().height : 0) + 40
+	$: top = (elt ? elt.getBoundingClientRect().top : 0) + 40
+	$: isSelf = userId === $page.data.user?.userId
+
+	$: console.log("userId: ", userId)
+</script>
+
+<span use:clickOutside={handleClickOutside}>
+	{#if open}
+		<div
+			style="margin-top: {-margin}px; top: {top}px;"
+			bind:this={self}
+			data-popover
+			class="absolute -mt-2 z-50 dropdown-content text-sm font-light bg-base-200 card shadow-sm w-80">
+			<div class="p-3">
+				<div class="flex items-center justify-between mb-2">
+					<span>
+						<img
+							class="w-10 h-10 mask mask-squircle"
+							src={profileData.profile.avatar}
+							alt={profileData.profile.avatar} />
+					</span>
+					<div>
+						<button
+							on:click={() => doFollow(!profileData.isFollowed?.isInterested)}
+							disabled={isSelf || loading}
+							type="button"
+							class="btn btn-secondary btn-sm">
+							{#if loading}
+								<span class="loading loading-dots loading-md" />
+							{:else if profileData.isFollowed?.isInterested}
+								Unfollow
+							{:else}
+								Follow
+							{/if}
+						</button>
+					</div>
+				</div>
+
+				<p class="text-base font-semibold leading-none">
+					{profileData.profile.displayName || ''}
+				</p>
+				<p class="mb-3 text-sm font-normal">
+					<a class="link link-hover" href="/profile/{profileData.profile.username}"
+						>@{profileData.profile.username || ''}</a>
+				</p>
+				<p class="mb-4 text-sm font-light">
+					
+					{profileData.profile.bio || ''}
+				</p>
+				<div class="flex text-sm gap-5">
+					<!-- svelte-ignore a11y-missing-attribute -->
+					<a class="link link-hover">
+						<span class="font-semibold">{followerCount}</span> Followers</a>
+					<!-- svelte-ignore a11y-missing-attribute -->
+					<a class="link link-hover">
+						<span class="font-semibold">{followingCount}</span> Following</a>
+				</div>
+			</div>
+		</div>
+	{/if}
+</span>

From d3d7eadeffcba9f3ed69427e6e30ebeafacf54bf Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Thu, 13 Jul 2023 19:37:37 +0530
Subject: [PATCH 2/9] profile card

---
 .../components/Channel/Chat/DrawerChat.svelte | 41 ++++++-----
 .../components/Channel/Chat/Message.svelte    | 46 ++++++++----
 .../Channel/Chat/ProfilePopup.svelte          | 71 +++++++++++++------
 3 files changed, 104 insertions(+), 54 deletions(-)

diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
index 172a7cf6..67008c9a 100644
--- a/src/lib/components/Channel/Chat/DrawerChat.svelte
+++ b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -17,8 +17,8 @@
 		chatHistory: any[] = []
 
 	let cursor: any = undefined
-	let profileElt:any = null
-	let selectedUser:string = ""
+	let profileElt: any = null
+	let selectedUser: string = ''
 	let ignoreOutsideClick = false
 
 	channel_message.subscribe((value) => {
@@ -79,40 +79,43 @@
 		}
 	}
 
-
 	const closeProfile = () => {
-		if(ignoreOutsideClick)return
+		if (ignoreOutsideClick) return
 		profileElt = null
-		selectedUser = ""
+		selectedUser = ''
 	}
 
-	const onUsernameClick = (evt:any) => {
+	const onUsernameClick = (evt: any) => {
 		profileElt = evt.target
-		selectedUser = viewers.find(i => i.username == profileElt.id.substr(1))?.userId
+		
+
+		const match = profileElt.id.match(/@\w+/g);
+		console.log('working +++', match)
+		if(match){
+			selectedUser = viewers.find((i) => i.username == profileElt.id.substr(1))?.userId
+		}
+		else{
+			selectedUser = viewers.find((i) => i.username == profileElt.id)?.userId
+		}
+		
+		console.log('selectedUser', selectedUser, 'viewers', viewers)
 		ignoreOutsideClick = true
 		setTimeout(() => {
 			ignoreOutsideClick = false
 		}, 100)
 	}
-	
 </script>
 
 <div class="bg-base-100 flex flex-col overflow-y-hidden w-72 md:w-full h-full rounded-lg">
 	<DropdownViewChannel bind:channel bind:showEditChannelDrawer />
 	<div class="flex flex-col-reverse p-3 grow overflow-y-scroll w-96">
-		<ProfilePopup 
-			open={profileElt ? true: false}
+		<ProfilePopup
+			open={profileElt ? true : false}
 			elt={profileElt}
-			userId={selectedUser}
-			onOutsideClick={closeProfile}
-		/>
+			bind:userId={selectedUser}
+			onOutsideClick={closeProfile} />
 		{#each chatHistory as sender}
-			<Message 
-				bind:sender 
-				bind:hostId={channel.user} 
-				bind:channel 
-				onUsernameClick={onUsernameClick}
-			 />
+			<Message bind:sender bind:hostId={channel.user} bind:channel {onUsernameClick} />
 		{/each}
 		<span use:LastItemInViewport on:loadMore={loadMore} />
 	</div>
diff --git a/src/lib/components/Channel/Chat/Message.svelte b/src/lib/components/Channel/Chat/Message.svelte
index 6aedeb42..de70893b 100644
--- a/src/lib/components/Channel/Chat/Message.svelte
+++ b/src/lib/components/Channel/Chat/Message.svelte
@@ -10,11 +10,14 @@
 	import { copyToClipboard, getColoredRole, setRole } from '$lib/utils'
 	import { page } from '$app/stores'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
-	import { onMount } from "svelte"
+	import { onMount } from 'svelte'
+	import ProfilePopup from './ProfilePopup.svelte'
 
 	export let sender: any, hostId: string, channel: any, onUsernameClick:any
 	let role: string, coloredRole: any
-	
+	let profileElt: any = null
+	let ignoreOutsideClick = false
+
 	$: isGuest = channel?.guests?.includes(sender.user?.userId)
 
 	$: showBanItem =
@@ -131,8 +134,8 @@
 		}
 	}
 
-	const hightlightUsername = (match:string) => {
-	    return `
+	const hightlightUsername = (match: string) => {
+		return `
 			<span 
 				class="text-info font-medium cursor-pointer"
 				name="username"
@@ -140,21 +143,35 @@
 			>
 				${match}
 			</span>
-		`;
-    }
+		`
+	}
 
 	const parse = (msg: string) => {
 		return msg.replace(/@[\w-]+[,\s]/g, hightlightUsername)
 	}
 
-
 	onMount(() => {
 		const spans = document.querySelectorAll('span[name="username"]')
-		spans.forEach((span:any) => {
+		spans.forEach((span: any) => {
 			span.onclick = onUsernameClick
 		})
 	})
 
+	// const closeProfile = () => {
+	// 	if (ignoreOutsideClick) return
+	// 	profileElt = null
+	// }
+
+	// const onUsernameClick = (evt: any) => {
+	// 	profileElt = evt.target
+	// 	ignoreOutsideClick = true
+	// 	setTimeout(() => {
+	// 		ignoreOutsideClick = false
+	// 	}, 100)
+	// }
+
+	$:console.log("sender",sender);
+
 	$: codeSnippet = isCodeSnippet(sender.message) ? getCodeSnippet(sender.message) : false
 </script>
 
@@ -174,11 +191,13 @@
 							id="b1"
 							class="{coloredRole.textColor} font-medium">@{sender.user?.username}</span> -->
 
-					<ProfileCard userId={sender.user?.userId}>
-						<span class="{coloredRole.textColor} font-medium">
-							@{sender.user?.username}
-						</span>
-					</ProfileCard>
+					<span
+						class="{coloredRole.textColor} font-medium cursor-pointer"
+						on:click={onUsernameClick}  id={sender.user?.username}  >
+						@{sender.user?.username}
+					</span>
+
+				
 				{/if}
 				{#if isImage(sender.message)}
 					<img class="py-2 pr-2" src={sender.message} alt="imgs" />
@@ -199,6 +218,7 @@
 				{:else}
 					<span class="break-all">{@html parse(sender.message)}</span>
 					
+
 				{/if}
 			</label>
 
diff --git a/src/lib/components/Channel/Chat/ProfilePopup.svelte b/src/lib/components/Channel/Chat/ProfilePopup.svelte
index 44408310..c96efc13 100644
--- a/src/lib/components/Channel/Chat/ProfilePopup.svelte
+++ b/src/lib/components/Channel/Chat/ProfilePopup.svelte
@@ -10,6 +10,7 @@
 	export let open:boolean
 	export let onOutsideClick:any
 	export let elt: any
+	export let hideLoader= true;
 
 	let self:any
 
@@ -69,9 +70,10 @@
 
 	$: useOueryEffect(() => {
 		if(open && userId){
+			profileData = { profile: {} }
 			loadProfile(false)
 		}
-	}, [open])
+	}, [open, userId])
 
 	$: profile = profileData.profile
 	$: followerCount = profileData.followerCount || 0
@@ -81,6 +83,7 @@
 	$: isSelf = userId === $page.data.user?.userId
 
 	$: console.log("userId: ", userId)
+
 </script>
 
 <span use:clickOutside={handleClickOutside}>
@@ -93,20 +96,26 @@
 			<div class="p-3">
 				<div class="flex items-center justify-between mb-2">
 					<span>
-						<img
-							class="w-10 h-10 mask mask-squircle"
-							src={profileData.profile.avatar}
-							alt={profileData.profile.avatar} />
+						{#if !profileData?.profile?.avatar}
+							<div class="animate-pulse flex space-x-4 mb-1">
+								<div class="rounded bg-slate-200 h-8 w-24" />
+							</div>
+						{:else}
+							<img
+								class="w-10 h-10 mask mask-squircle"
+								src={profileData?.profile?.avatar}
+								alt={profileData?.profile?.avatar} />
+						{/if}
 					</span>
 					<div>
 						<button
-							on:click={() => doFollow(!profileData.isFollowed?.isInterested)}
+							on:click={() => doFollow(!profileData?.isFollowed?.isInterested)}
 							disabled={isSelf || loading}
 							type="button"
 							class="btn btn-secondary btn-sm">
 							{#if loading}
 								<span class="loading loading-dots loading-md" />
-							{:else if profileData.isFollowed?.isInterested}
+							{:else if profileData?.isFollowed?.isInterested}
 								Unfollow
 							{:else}
 								Follow
@@ -115,24 +124,42 @@
 					</div>
 				</div>
 
-				<p class="text-base font-semibold leading-none">
-					{profileData.profile.displayName || ''}
-				</p>
-				<p class="mb-3 text-sm font-normal">
-					<a class="link link-hover" href="/profile/{profileData.profile.username}"
-						>@{profileData.profile.username || ''}</a>
-				</p>
+				{#if !profileData?.profile?.displayName && !profileData?.profile?.username}
+					<div class="animate-pulse flex space-x-4 mb-3">
+						<div class="rounded bg-slate-200 h-12 w-full" />
+					</div>
+				{:else}
+					<p class="text-base font-semibold leading-none">
+						{profileData?.profile?.displayName}
+					</p>
+					<p class="mb-3 text-sm font-normal">
+						<a class="link link-hover" href="/profile/{profileData?.profile?.username}"
+							>@{profileData?.profile?.username}</a>
+					</p>
+				{/if}
+
 				<p class="mb-4 text-sm font-light">
-					
-					{profileData.profile.bio || ''}
+					{#if !profileData?.profile?.bio  && profileData?.profile?.bio == undefined && profileData?.profile?.bio == "" }
+						<div class="animate-pulse flex space-x-4">
+							<div class="rounded bg-slate-200 h-4 w-full" />
+						</div>
+					{:else}
+						{profileData?.profile?.bio}
+					{/if}
 				</p>
 				<div class="flex text-sm gap-5">
-					<!-- svelte-ignore a11y-missing-attribute -->
-					<a class="link link-hover">
-						<span class="font-semibold">{followerCount}</span> Followers</a>
-					<!-- svelte-ignore a11y-missing-attribute -->
-					<a class="link link-hover">
-						<span class="font-semibold">{followingCount}</span> Following</a>
+					{#if !followerCount && !followingCount}
+						<div class="animate-pulse flex space-x-4 w-full -mt-1">
+							<div class="rounded bg-slate-200 h-4 w-full" />
+						</div>
+					{:else}
+						<!-- svelte-ignore a11y-missing-attribute -->
+						<a class="link link-hover">
+							<span class="font-semibold">{followerCount}</span> Followers</a>
+						<!-- svelte-ignore a11y-missing-attribute -->
+						<a class="link link-hover">
+							<span class="font-semibold">{followingCount}</span> Following</a>
+					{/if}
 				</div>
 			</div>
 		</div>

From db78edb58149244a0fde39e2cf71a11a977a671c Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Fri, 14 Jul 2023 10:10:04 +0530
Subject: [PATCH 3/9] profile popup loader

---
 .../components/Channel/Chat/DrawerChat.svelte |  6 +-----
 .../components/Channel/Chat/Message.svelte    | 16 ----------------
 .../Channel/Chat/ProfilePopup.svelte          | 19 +++++++++----------
 3 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
index 67008c9a..7a85ded1 100644
--- a/src/lib/components/Channel/Chat/DrawerChat.svelte
+++ b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -87,18 +87,14 @@
 
 	const onUsernameClick = (evt: any) => {
 		profileElt = evt.target
-		
-
 		const match = profileElt.id.match(/@\w+/g);
-		console.log('working +++', match)
 		if(match){
 			selectedUser = viewers.find((i) => i.username == profileElt.id.substr(1))?.userId
 		}
 		else{
 			selectedUser = viewers.find((i) => i.username == profileElt.id)?.userId
 		}
-		
-		console.log('selectedUser', selectedUser, 'viewers', viewers)
+		console.log("selectedUser",selectedUser, profileElt, viewers);
 		ignoreOutsideClick = true
 		setTimeout(() => {
 			ignoreOutsideClick = false
diff --git a/src/lib/components/Channel/Chat/Message.svelte b/src/lib/components/Channel/Chat/Message.svelte
index de70893b..34fa1820 100644
--- a/src/lib/components/Channel/Chat/Message.svelte
+++ b/src/lib/components/Channel/Chat/Message.svelte
@@ -5,7 +5,6 @@
 	import IconChatQuote from '$lib/assets/icons/chat/IconChatQuote.svelte'
 	import IconChatDelete from '$lib/assets/icons/chat/IconChatDelete.svelte'
 	import IconChatHorizontalMore from '$lib/assets/icons/chat/IconChatHorizontalMore.svelte'
-	import ProfileCard from '$lib/components/Channel/Chat/ProfileCard.svelte'
 	import { emitChannelUpdate, emitDeleteMessageToChannel } from '$lib/websocket'
 	import { copyToClipboard, getColoredRole, setRole } from '$lib/utils'
 	import { page } from '$app/stores'
@@ -157,21 +156,6 @@
 		})
 	})
 
-	// const closeProfile = () => {
-	// 	if (ignoreOutsideClick) return
-	// 	profileElt = null
-	// }
-
-	// const onUsernameClick = (evt: any) => {
-	// 	profileElt = evt.target
-	// 	ignoreOutsideClick = true
-	// 	setTimeout(() => {
-	// 		ignoreOutsideClick = false
-	// 	}, 100)
-	// }
-
-	$:console.log("sender",sender);
-
 	$: codeSnippet = isCodeSnippet(sender.message) ? getCodeSnippet(sender.message) : false
 </script>
 
diff --git a/src/lib/components/Channel/Chat/ProfilePopup.svelte b/src/lib/components/Channel/Chat/ProfilePopup.svelte
index c96efc13..06754e28 100644
--- a/src/lib/components/Channel/Chat/ProfilePopup.svelte
+++ b/src/lib/components/Channel/Chat/ProfilePopup.svelte
@@ -7,12 +7,11 @@
 	import { createEffect } from '$lib/utils'
 
 	export let userId: string
-	export let open:boolean
-	export let onOutsideClick:any
+	export let open: boolean
+	export let onOutsideClick: any
 	export let elt: any
-	export let hideLoader= true;
 
-	let self:any
+	let self: any
 
 	const useOueryEffect = createEffect()
 
@@ -25,7 +24,7 @@
 	}
 
 	const handleClickOutside = (event: any) => {
-		if(onOutsideClick)onOutsideClick()
+		if (onOutsideClick) onOutsideClick()
 	}
 
 	const doFollow = async (isFollow: any) => {
@@ -69,12 +68,14 @@
 	}
 
 	$: useOueryEffect(() => {
-		if(open && userId){
+		if (open && userId) {
 			profileData = { profile: {} }
 			loadProfile(false)
 		}
 	}, [open, userId])
 
+
+	$:console.log("userIdd",userId);
 	$: profile = profileData.profile
 	$: followerCount = profileData.followerCount || 0
 	$: followingCount = profileData.followingCount || 0
@@ -82,8 +83,6 @@
 	$: top = (elt ? elt.getBoundingClientRect().top : 0) + 40
 	$: isSelf = userId === $page.data.user?.userId
 
-	$: console.log("userId: ", userId)
-
 </script>
 
 <span use:clickOutside={handleClickOutside}>
@@ -139,12 +138,12 @@
 				{/if}
 
 				<p class="mb-4 text-sm font-light">
-					{#if !profileData?.profile?.bio  && profileData?.profile?.bio == undefined && profileData?.profile?.bio == "" }
+					{#if !profileData?.profile?.bio && loading}
 						<div class="animate-pulse flex space-x-4">
 							<div class="rounded bg-slate-200 h-4 w-full" />
 						</div>
 					{:else}
-						{profileData?.profile?.bio}
+						{profileData?.profile?.bio || " "}
 					{/if}
 				</p>
 				<div class="flex text-sm gap-5">

From 25e5268d5912669e07b0034fad28ba41bc35f6f4 Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Fri, 14 Jul 2023 10:38:34 +0530
Subject: [PATCH 4/9] profile card component remove

---
 .../Channel/Chat/ProfileCard.svelte           | 133 ------------------
 1 file changed, 133 deletions(-)
 delete mode 100644 src/lib/components/Channel/Chat/ProfileCard.svelte

diff --git a/src/lib/components/Channel/Chat/ProfileCard.svelte b/src/lib/components/Channel/Chat/ProfileCard.svelte
deleted file mode 100644
index 9c8fd838..00000000
--- a/src/lib/components/Channel/Chat/ProfileCard.svelte
+++ /dev/null
@@ -1,133 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores'
-	import { get, post } from '$lib/api'
-	import { onMount } from 'svelte'
-	import { setProfile, getProfile } from '$lib/stores/helperStore'
-	import { clickOutside } from '$lib/utils.js'
-	import { put, del } from '$lib/api'
-
-	export let userId: string
-	let profileData: any = getProfile(userId) || { profile: {} }
-	let loading = false
-	let show = false
-	let elt: any
-
-	$: auth = {
-		userId: $page.data.user?.userId,
-		token: $page.data.user?.token
-	}
-
-	const toggle = async () => {
-		show = !show
-		if (show) loadProfile(false)
-	}
-
-	const handleClickOutside = (event: any) => {
-		show = false
-	}
-
-	const doFollow = async (isFollow: any) => {
-		loading = true
-
-		const source1 = profile._id
-		const source2 = $page.data.user?.userId
-		const isFollowing = isFollow.toString()
-
-		if (isFollowing == 'true') {
-			await put(`follows`, { source1, source2 }, auth)
-		} else {
-			await del(`follows?source1=${source1}&source2=${source2}`, auth)
-		}
-
-		await loadProfile(true)
-		loading = false
-	}
-
-	const loadProfile = async (refresh: boolean) => {
-		loading = true
-		if (getProfile(userId) && !refresh) {
-			profileData = getProfile(userId)
-		} else {
-			profileData.profile = await get(`users/search/id?userId=${userId}`, auth)
-			profileData.followerCount = await get(
-				`follows/count?source=${userId}&sourceType=source1`,
-				auth
-			)
-			profileData.followingCount = await get(
-				`follows/count?source=${userId}&sourceType=source2`,
-				auth
-			)
-			if ($page.data.user?.userId) {
-				profileData.isFollowed = await get(`follows/relationship?source=${profile._id}`, auth)
-			}
-
-			setProfile(userId, profileData)
-		}
-		loading = false
-	}
-
-	$: profile = profileData.profile
-	$: followerCount = profileData.followerCount || 0
-	$: followingCount = profileData.followingCount || 0
-	$: margin = (elt ? elt.getBoundingClientRect().height : 0) + 40
-	$: isSelf = userId === $page.data.user?.userId
-</script>
-
-<span use:clickOutside={handleClickOutside}>
-	{#if show}
-		<div
-			style="margin-top: {-margin}px"
-			bind:this={elt}
-			data-popover
-			class="absolute -mt-2 z-50 dropdown-content text-sm font-light bg-base-200 card shadow-sm w-full">
-			<div class="p-3">
-				<div class="flex items-center justify-between mb-2">
-					<span>
-						<img
-							class="w-10 h-10 mask mask-squircle"
-							src={profileData.profile.avatar}
-							alt={profileData.profile.avatar} />
-					</span>
-					<div>
-						<button
-							on:click={() => doFollow(!profileData.isFollowed?.isInterested)}
-							disabled={isSelf || loading}
-							type="button"
-							class="btn btn-secondary btn-sm">
-							{#if loading}
-								<span class="loading loading-dots loading-md" />
-							{:else if profileData.isFollowed?.isInterested}
-								Unfollow
-							{:else}
-								Follow
-							{/if}
-						</button>
-					</div>
-				</div>
-
-				<p class="text-base font-semibold leading-none">
-					{profileData.profile.displayName || ''}
-				</p>
-				<p class="mb-3 text-sm font-normal">
-					<a class="link link-hover" href="/profile/{profileData.profile.username}"
-						>@{profileData.profile.username || ''}</a>
-				</p>
-				<p class="mb-4 text-sm font-light">
-					{profileData.profile.bio || ''}
-				</p>
-				<div class="flex text-sm gap-5">
-					<!-- svelte-ignore a11y-missing-attribute -->
-					<a class="link link-hover">
-						<span class="font-semibold">{followerCount}</span> Followers</a>
-					<!-- svelte-ignore a11y-missing-attribute -->
-					<a class="link link-hover">
-						<span class="font-semibold">{followingCount}</span> Following</a>
-				</div>
-			</div>
-		</div>
-	{/if}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<span class="cursor-pointer" on:click={toggle}>
-		<slot />
-	</span>
-</span>

From d027787b0a0ed33120518ddb1d8d19081d50db7f Mon Sep 17 00:00:00 2001
From: gurpreet991 <=>
Date: Fri, 14 Jul 2023 16:20:34 +0530
Subject: [PATCH 5/9] fixed profile fetch issues

---
 .../components/Channel/Chat/DrawerChat.svelte | 12 +++---------
 .../Channel/Chat/ProfilePopup.svelte          | 19 +++++++------------
 2 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
index 7a85ded1..71ce249f 100644
--- a/src/lib/components/Channel/Chat/DrawerChat.svelte
+++ b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -87,24 +87,18 @@
 
 	const onUsernameClick = (evt: any) => {
 		profileElt = evt.target
-		const match = profileElt.id.match(/@\w+/g);
-		if(match){
-			selectedUser = viewers.find((i) => i.username == profileElt.id.substr(1))?.userId
-		}
-		else{
-			selectedUser = viewers.find((i) => i.username == profileElt.id)?.userId
-		}
-		console.log("selectedUser",selectedUser, profileElt, viewers);
+		selectedUser = profileElt.id.substr(1)
 		ignoreOutsideClick = true
 		setTimeout(() => {
 			ignoreOutsideClick = false
 		}, 100)
 	}
+
 </script>
 
 <div class="bg-base-100 flex flex-col overflow-y-hidden w-72 md:w-full h-full rounded-lg">
 	<DropdownViewChannel bind:channel bind:showEditChannelDrawer />
-	<div class="flex flex-col-reverse p-3 grow overflow-y-scroll w-96">
+	<div on:scroll={closeProfile} class="flex flex-col-reverse p-3 grow overflow-y-scroll w-96">
 		<ProfilePopup
 			open={profileElt ? true : false}
 			elt={profileElt}
diff --git a/src/lib/components/Channel/Chat/ProfilePopup.svelte b/src/lib/components/Channel/Chat/ProfilePopup.svelte
index 06754e28..9406879d 100644
--- a/src/lib/components/Channel/Chat/ProfilePopup.svelte
+++ b/src/lib/components/Channel/Chat/ProfilePopup.svelte
@@ -30,7 +30,7 @@
 	const doFollow = async (isFollow: any) => {
 		loading = true
 
-		const source1 = profile._id
+		const source1 = profileData.profile._id
 		const source2 = $page.data.user?.userId
 		const isFollowing = isFollow.toString()
 
@@ -49,17 +49,18 @@
 		if (getProfile(userId) && !refresh) {
 			profileData = getProfile(userId)
 		} else {
-			profileData.profile = await get(`users/search/id?userId=${userId}`, auth)
+			profileData.profile = await get(`users/search/username?username=${userId}`, auth)
+			const id = profileData.profile._id
 			profileData.followerCount = await get(
-				`follows/count?source=${userId}&sourceType=source1`,
+				`follows/count?source=${id}&sourceType=source1`,
 				auth
 			)
 			profileData.followingCount = await get(
-				`follows/count?source=${userId}&sourceType=source2`,
+				`follows/count?source=${id}&sourceType=source2`,
 				auth
 			)
 			if ($page.data.user?.userId) {
-				profileData.isFollowed = await get(`follows/relationship?source=${profile._id}`, auth)
+				profileData.isFollowed = await get(`follows/relationship?source=${id}`, auth)
 			}
 
 			setProfile(userId, profileData)
@@ -138,13 +139,7 @@
 				{/if}
 
 				<p class="mb-4 text-sm font-light">
-					{#if !profileData?.profile?.bio && loading}
-						<div class="animate-pulse flex space-x-4">
-							<div class="rounded bg-slate-200 h-4 w-full" />
-						</div>
-					{:else}
-						{profileData?.profile?.bio || " "}
-					{/if}
+					{profileData?.profile?.bio || " "}
 				</p>
 				<div class="flex text-sm gap-5">
 					{#if !followerCount && !followingCount}

From 8ee77b25eca23bb2104c1567394364911b10e406 Mon Sep 17 00:00:00 2001
From: gurpreet991 <=>
Date: Fri, 14 Jul 2023 16:23:54 +0530
Subject: [PATCH 6/9] fixed parsing

---
 src/lib/components/Channel/Chat/Message.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Channel/Chat/Message.svelte b/src/lib/components/Channel/Chat/Message.svelte
index 34fa1820..fc34dd67 100644
--- a/src/lib/components/Channel/Chat/Message.svelte
+++ b/src/lib/components/Channel/Chat/Message.svelte
@@ -146,7 +146,8 @@
 	}
 
 	const parse = (msg: string) => {
-		return msg.replace(/@[\w-]+[,\s]/g, hightlightUsername)
+		const m = msg + " "
+		return m.replace(/@[\w-]+[,\s]/g, hightlightUsername).trim()
 	}
 
 	onMount(() => {

From 43dee0871650ffbb1fce25d244f695b1d3c729d9 Mon Sep 17 00:00:00 2001
From: gurpreet991 <=>
Date: Fri, 14 Jul 2023 16:47:08 +0530
Subject: [PATCH 7/9] update follow flow

---
 .../components/Channel/Chat/ProfilePopup.svelte   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Channel/Chat/ProfilePopup.svelte b/src/lib/components/Channel/Chat/ProfilePopup.svelte
index 9406879d..d80179d7 100644
--- a/src/lib/components/Channel/Chat/ProfilePopup.svelte
+++ b/src/lib/components/Channel/Chat/ProfilePopup.svelte
@@ -33,14 +33,19 @@
 		const source1 = profileData.profile._id
 		const source2 = $page.data.user?.userId
 		const isFollowing = isFollow.toString()
+		if(!profileData.isFollowed)
+			profileData.isFollowed = {}
 
 		if (isFollowing == 'true') {
 			await put(`follows`, { source1, source2 }, auth)
+			profileData.followerCount++
+			profileData.isFollowed.isFollowing = true
 		} else {
 			await del(`follows?source1=${source1}&source2=${source2}`, auth)
+			profileData.followerCount--
+			profileData.isFollowed.isFollowing = false
 		}
-
-		await loadProfile(true)
+		setProfile(userId, profileData)
 		loading = false
 	}
 
@@ -63,6 +68,8 @@
 				profileData.isFollowed = await get(`follows/relationship?source=${id}`, auth)
 			}
 
+			console.log("profileData: ", profileData)
+
 			setProfile(userId, profileData)
 		}
 		loading = false
@@ -109,13 +116,13 @@
 					</span>
 					<div>
 						<button
-							on:click={() => doFollow(!profileData?.isFollowed?.isInterested)}
+							on:click={() => doFollow(!profileData?.isFollowed?.isFollowing)}
 							disabled={isSelf || loading}
 							type="button"
 							class="btn btn-secondary btn-sm">
 							{#if loading}
 								<span class="loading loading-dots loading-md" />
-							{:else if profileData?.isFollowed?.isInterested}
+							{:else if profileData?.isFollowed?.isFollowing}
 								Unfollow
 							{:else}
 								Follow

From bbdad447dce7dc766f84beff0b7d80842e93dbef Mon Sep 17 00:00:00 2001
From: gurpreet991 <=>
Date: Fri, 14 Jul 2023 17:00:18 +0530
Subject: [PATCH 8/9] handle self profile loading

---
 .../components/Channel/Chat/Message.svelte    |  4 +++-
 .../Channel/Chat/ProfilePopup.svelte          | 22 +++++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/Channel/Chat/Message.svelte b/src/lib/components/Channel/Chat/Message.svelte
index fc34dd67..c4f5c930 100644
--- a/src/lib/components/Channel/Chat/Message.svelte
+++ b/src/lib/components/Channel/Chat/Message.svelte
@@ -178,7 +178,9 @@
 
 					<span
 						class="{coloredRole.textColor} font-medium cursor-pointer"
-						on:click={onUsernameClick}  id={sender.user?.username}  >
+						on:click={onUsernameClick}  
+						id={"@"+sender.user?.username}  
+					>
 						@{sender.user?.username}
 					</span>
 
diff --git a/src/lib/components/Channel/Chat/ProfilePopup.svelte b/src/lib/components/Channel/Chat/ProfilePopup.svelte
index d80179d7..4f1de360 100644
--- a/src/lib/components/Channel/Chat/ProfilePopup.svelte
+++ b/src/lib/components/Channel/Chat/ProfilePopup.svelte
@@ -54,7 +54,12 @@
 		if (getProfile(userId) && !refresh) {
 			profileData = getProfile(userId)
 		} else {
-			profileData.profile = await get(`users/search/username?username=${userId}`, auth)
+			if($page?.data?.user?.user?.username === userId){
+				profileData.profile = $page?.data?.user?.user
+			}
+			else{
+				profileData.profile = await get(`users/search/username?username=${userId}`, auth)
+			}
 			const id = profileData.profile._id
 			profileData.followerCount = await get(
 				`follows/count?source=${id}&sourceType=source1`,
@@ -64,12 +69,14 @@
 				`follows/count?source=${id}&sourceType=source2`,
 				auth
 			)
-			if ($page.data.user?.userId) {
+
+			if(userId === $page.data.user?.user?.username){
+				profileData.isFollowed = { isFollowing: true }
+			}
+			else{
 				profileData.isFollowed = await get(`follows/relationship?source=${id}`, auth)
 			}
-
-			console.log("profileData: ", profileData)
-
+		
 			setProfile(userId, profileData)
 		}
 		loading = false
@@ -82,14 +89,11 @@
 		}
 	}, [open, userId])
 
-
-	$:console.log("userIdd",userId);
-	$: profile = profileData.profile
 	$: followerCount = profileData.followerCount || 0
 	$: followingCount = profileData.followingCount || 0
 	$: margin = (self ? self.getBoundingClientRect().height : 0) + 40
 	$: top = (elt ? elt.getBoundingClientRect().top : 0) + 40
-	$: isSelf = userId === $page.data.user?.userId
+	$: isSelf = userId === $page.data.user?.user?.username
 
 </script>
 

From 7a7213e8edee39d60483e35a95af02259114d186 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Fri, 14 Jul 2023 13:34:00 -0500
Subject: [PATCH 9/9] Fix: minor profile popup issues

---
 .../components/Channel/Chat/Message.svelte    | 15 ++----
 .../Channel/Chat/ProfilePopup.svelte          | 54 +++++++------------
 2 files changed, 24 insertions(+), 45 deletions(-)

diff --git a/src/lib/components/Channel/Chat/Message.svelte b/src/lib/components/Channel/Chat/Message.svelte
index c4f5c930..93b2abab 100644
--- a/src/lib/components/Channel/Chat/Message.svelte
+++ b/src/lib/components/Channel/Chat/Message.svelte
@@ -12,7 +12,7 @@
 	import { onMount } from 'svelte'
 	import ProfilePopup from './ProfilePopup.svelte'
 
-	export let sender: any, hostId: string, channel: any, onUsernameClick:any
+	export let sender: any, hostId: string, channel: any, onUsernameClick: any
 	let role: string, coloredRole: any
 	let profileElt: any = null
 	let ignoreOutsideClick = false
@@ -136,7 +136,7 @@
 	const hightlightUsername = (match: string) => {
 		return `
 			<span 
-				class="text-info font-medium cursor-pointer"
+				class="text-success font-medium cursor-pointer link"
 				name="username"
 				id=${match}
 			>
@@ -146,7 +146,7 @@
 	}
 
 	const parse = (msg: string) => {
-		const m = msg + " "
+		const m = msg + ' '
 		return m.replace(/@[\w-]+[,\s]/g, hightlightUsername).trim()
 	}
 
@@ -178,13 +178,10 @@
 
 					<span
 						class="{coloredRole.textColor} font-medium cursor-pointer"
-						on:click={onUsernameClick}  
-						id={"@"+sender.user?.username}  
-					>
+						on:click={onUsernameClick}
+						id={'@' + sender.user?.username}>
 						@{sender.user?.username}
 					</span>
-
-				
 				{/if}
 				{#if isImage(sender.message)}
 					<img class="py-2 pr-2" src={sender.message} alt="imgs" />
@@ -204,8 +201,6 @@
 					{/if}
 				{:else}
 					<span class="break-all">{@html parse(sender.message)}</span>
-					
-
 				{/if}
 			</label>
 
diff --git a/src/lib/components/Channel/Chat/ProfilePopup.svelte b/src/lib/components/Channel/Chat/ProfilePopup.svelte
index 4f1de360..b7881c16 100644
--- a/src/lib/components/Channel/Chat/ProfilePopup.svelte
+++ b/src/lib/components/Channel/Chat/ProfilePopup.svelte
@@ -33,8 +33,7 @@
 		const source1 = profileData.profile._id
 		const source2 = $page.data.user?.userId
 		const isFollowing = isFollow.toString()
-		if(!profileData.isFollowed)
-			profileData.isFollowed = {}
+		if (!profileData.isFollowed) profileData.isFollowed = {}
 
 		if (isFollowing == 'true') {
 			await put(`follows`, { source1, source2 }, auth)
@@ -54,29 +53,21 @@
 		if (getProfile(userId) && !refresh) {
 			profileData = getProfile(userId)
 		} else {
-			if($page?.data?.user?.user?.username === userId){
+			if ($page?.data?.user?.user?.username === userId) {
 				profileData.profile = $page?.data?.user?.user
-			}
-			else{
+			} else {
 				profileData.profile = await get(`users/search/username?username=${userId}`, auth)
 			}
 			const id = profileData.profile._id
-			profileData.followerCount = await get(
-				`follows/count?source=${id}&sourceType=source1`,
-				auth
-			)
-			profileData.followingCount = await get(
-				`follows/count?source=${id}&sourceType=source2`,
-				auth
-			)
-
-			if(userId === $page.data.user?.user?.username){
+			profileData.followerCount = await get(`follows/count?source=${id}&sourceType=source1`, auth)
+			profileData.followingCount = await get(`follows/count?source=${id}&sourceType=source2`, auth)
+
+			if (userId === $page.data.user?.user?.username) {
 				profileData.isFollowed = { isFollowing: true }
-			}
-			else{
+			} else {
 				profileData.isFollowed = await get(`follows/relationship?source=${id}`, auth)
 			}
-		
+
 			setProfile(userId, profileData)
 		}
 		loading = false
@@ -94,7 +85,6 @@
 	$: margin = (self ? self.getBoundingClientRect().height : 0) + 40
 	$: top = (elt ? elt.getBoundingClientRect().top : 0) + 40
 	$: isSelf = userId === $page.data.user?.user?.username
-
 </script>
 
 <span use:clickOutside={handleClickOutside}>
@@ -109,7 +99,7 @@
 					<span>
 						{#if !profileData?.profile?.avatar}
 							<div class="animate-pulse flex space-x-4 mb-1">
-								<div class="rounded bg-slate-200 h-8 w-24" />
+								<div class="rounded bg-base-100 h-8 w-8" />
 							</div>
 						{:else}
 							<img
@@ -121,7 +111,7 @@
 					<div>
 						<button
 							on:click={() => doFollow(!profileData?.isFollowed?.isFollowing)}
-							disabled={isSelf || loading}
+							disabled={!$page.data.user?.userId || isSelf || loading}
 							type="button"
 							class="btn btn-secondary btn-sm">
 							{#if loading}
@@ -137,7 +127,7 @@
 
 				{#if !profileData?.profile?.displayName && !profileData?.profile?.username}
 					<div class="animate-pulse flex space-x-4 mb-3">
-						<div class="rounded bg-slate-200 h-12 w-full" />
+						<div class="rounded bg-base-100 h-12 w-full" />
 					</div>
 				{:else}
 					<p class="text-base font-semibold leading-none">
@@ -150,21 +140,15 @@
 				{/if}
 
 				<p class="mb-4 text-sm font-light">
-					{profileData?.profile?.bio || " "}
+					{profileData?.profile?.bio || ' '}
 				</p>
 				<div class="flex text-sm gap-5">
-					{#if !followerCount && !followingCount}
-						<div class="animate-pulse flex space-x-4 w-full -mt-1">
-							<div class="rounded bg-slate-200 h-4 w-full" />
-						</div>
-					{:else}
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<a class="link link-hover">
-							<span class="font-semibold">{followerCount}</span> Followers</a>
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<a class="link link-hover">
-							<span class="font-semibold">{followingCount}</span> Following</a>
-					{/if}
+					<!-- svelte-ignore a11y-missing-attribute -->
+					<a class="link link-hover">
+						<span class="font-semibold">{followerCount}</span> Followers</a>
+					<!-- svelte-ignore a11y-missing-attribute -->
+					<a class="link link-hover">
+						<span class="font-semibold">{followingCount}</span> Following</a>
 				</div>
 			</div>
 		</div>