From 8126e0bde9b591a1c15d228606c331a6cce2961d Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Tue, 20 Jun 2023 15:55:09 +0530
Subject: [PATCH 1/2] channel drawer fixes

---
 src/lib/components/Browse/DrawerAddCategory.svelte   | 2 +-
 src/lib/components/Browse/DrawerCreateChannel.svelte | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Browse/DrawerAddCategory.svelte b/src/lib/components/Browse/DrawerAddCategory.svelte
index 46813d01..7ba9fd4a 100644
--- a/src/lib/components/Browse/DrawerAddCategory.svelte
+++ b/src/lib/components/Browse/DrawerAddCategory.svelte
@@ -88,7 +88,7 @@
 	})
 </script>
 
-<div class="flex h-full p-5">
+<div class="flex lg:h-full p-5">
 	<div class="bg-base-200 rounded-lg w-80 md:w-[30rem] flex flex-col {classes}">
 		<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">Select category</p>
 		<div class="flex flex-col p-3 h-full">
diff --git a/src/lib/components/Browse/DrawerCreateChannel.svelte b/src/lib/components/Browse/DrawerCreateChannel.svelte
index 395a4e1a..c164ee7d 100644
--- a/src/lib/components/Browse/DrawerCreateChannel.svelte
+++ b/src/lib/components/Browse/DrawerCreateChannel.svelte
@@ -96,14 +96,14 @@
 			<DrawerAddCategory bind:showAddCategory bind:categories={newChannel.category} />
 		{:else}
 			<form
-				class="flex h-full p-5"
+				class="flex lg:h-full p-5"
 				action="?/create-channel"
 				method="post"
 				use:enhance={({ data }) => {
 					isLoadingChannel = true
 					data.append('newChannel', JSON.stringify(newChannel))
 				}}>
-				<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col rounded-lg">
+				<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col rounded-lg lg:mb-0 mb-20">
 					<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
 						Create a new channel
 					</p>
@@ -151,7 +151,7 @@
 							{#if $tags && $tags.length > 0}
 								{#each $tags as tag}
 									<span
-										class="badge badge-md text-primary bg-gray-200 rounded-md font-semibold mx-1 cursor-pointer border-none"
+										class="badge badge-md text-primary bg-gray-200 rounded-md font-semibold mx-1 cursor-pointer border-none my-1"
 										on:click={() => addTag(tag.name)}>{tag.name}</span>
 								{/each}
 							{:else}

From 2c964106da61b8bfc5b729c063aec50ac2a40dac Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Tue, 20 Jun 2023 18:15:54 +0530
Subject: [PATCH 2/2] responsive gif and emoji picker

---
 .../components/Channel/Chat/DrawerChat.svelte |   2 +-
 .../Channel/Chat/EmojiPicker.svelte           |  39 ++-----
 .../Channel/Chat/FloatingMenu.svelte          |  57 ++++++++++
 .../components/Channel/Chat/GifPicker.svelte  | 106 +++++++-----------
 src/lib/utils.ts                              |   2 +-
 5 files changed, 106 insertions(+), 100 deletions(-)
 create mode 100644 src/lib/components/Channel/Chat/FloatingMenu.svelte

diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
index fa9e7dcf..d3cb97f2 100644
--- a/src/lib/components/Channel/Chat/DrawerChat.svelte
+++ b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -74,7 +74,7 @@
 
 </script>
 
-<div class="bg-base-100 flex flex-col overflow-y-hidden w-96 md:w-full h-full rounded-lg">
+<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">
 		{#each chatHistory as sender}
diff --git a/src/lib/components/Channel/Chat/EmojiPicker.svelte b/src/lib/components/Channel/Chat/EmojiPicker.svelte
index 49d9393c..68a9f805 100644
--- a/src/lib/components/Channel/Chat/EmojiPicker.svelte
+++ b/src/lib/components/Channel/Chat/EmojiPicker.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
+	import FloatingMenu from './FloatingMenu.svelte'
 	import IconChatEmoji from '$lib/assets/icons/chat/IconChatEmoji.svelte'
-	import { clickOutside } from '../../../utils.js';
 
 	export let onSelect: any
 
@@ -28,34 +28,13 @@
 		}
 	})
 
-	const handleClickOutside = () =>{
-		isFocused = false
-	}
-
-	$: btnClass = isFocused ? "btn-primary" : "btn-neutral"
-
 </script>
 
-<div use:clickOutside={handleClickOutside} class="dropdown dropdown-top">
-	<button
-		bind:this={btn}
-		tabindex="0"
-		type="button"
-		class={"btn text-white border-none tooltip font-normal normal-case " + btnClass}
-		data-tip="Emoji"
-	>
-		<IconChatEmoji />
-		<span class="sr-only">Add emoji</span>
-	</button>
-	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<div
-		bind:this={container}
-		tabindex="0"
-		class={'dropdown-content menu shadow bg-base-100 rounded-box emoji-container'} />
-</div>
-
-<style global>
-	emoji-picker {
-		margin-left: -70px;
-	}
-</style>
+<FloatingMenu 
+	id='emoji-picker'
+	icon={IconChatEmoji}
+	label="Emoji"
+>
+	<div bind:this={container} />
+</FloatingMenu>
+
diff --git a/src/lib/components/Channel/Chat/FloatingMenu.svelte b/src/lib/components/Channel/Chat/FloatingMenu.svelte
new file mode 100644
index 00000000..30f31e21
--- /dev/null
+++ b/src/lib/components/Channel/Chat/FloatingMenu.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { clickOutside } from '../../../utils.js';
+    export let id:string = "float-menu"
+	export let icon:any = null
+	export let label:string = ""
+    
+	let btn: any
+	let isFocused = false
+
+	const handleClickOutside = (event: any) =>{
+		const _id = event.target.id || 
+		event.target.parentElement.id || 
+		event.target.parentElement.parentElement.id
+
+		if(id !== _id)
+			isFocused = false
+	}
+
+	const forceClose = () => {
+		isFocused = false
+	}
+
+	$: btnClass = isFocused ? "btn-primary" : "btn-neutral"
+	$: dropdownClass = isFocused ? "dropdown-open" : ""
+	$: bottom = btn ? window.innerHeight - (btn.getBoundingClientRect().top) : 0
+
+</script>
+<button
+	bind:this={btn}
+	id={id}
+	type="button"
+	class={"btn text-white border-none tooltip font-normal normal-case " + btnClass}
+	data-tip={label}
+	on:click={() => {
+		isFocused = true
+	}}
+>
+	<svelte:component id={id} this={icon} />
+	<span class="sr-only">Add emoji</span>
+</button>
+<div 
+	use:clickOutside={handleClickOutside} 
+	class={"dropdown dropdown-top " + dropdownClass}
+>
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div 
+        style="bottom: {bottom}px" 
+		class={'dropdown-content menu shadow !fixed right-0 z-50 floating-menu overflow-auto'} 
+    >
+		<slot {forceClose} />
+	</div>
+</div>
+<style>
+	.floating-menu {
+		max-width: 100vw;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Channel/Chat/GifPicker.svelte b/src/lib/components/Channel/Chat/GifPicker.svelte
index 97a897e8..3f924f72 100644
--- a/src/lib/components/Channel/Chat/GifPicker.svelte
+++ b/src/lib/components/Channel/Chat/GifPicker.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import IconChatGif from '$lib/assets/icons/chat/IconChatGif.svelte'
-	import { clickOutside } from '../../../utils.js'
+	import FloatingMenu from './FloatingMenu.svelte'
 
 	import { get } from '../../../api.js'
 
 	export let onSelect: any
 
-	let btn: any
-	let isFocused = false
-
 	let gifs: { downsized_large: string; original: string; title: string }[] = []
 	let searched: { downsized_large: string; original: string; title: string }[] = []
 	let query: string = ''
@@ -20,22 +17,8 @@
 		const resp = await get('giphy/trending')
 		if (resp && Array.isArray(resp)) gifs = resp
 		loading = false
-
-		if (btn) {
-			btn.addEventListener('focus', () => {
-				isFocused = true
-			})
-		}
 	})
 
-	const handleClickOutside = () => {
-		isFocused = false
-	}
-
-	const openPicker = () => {
-		isFocused = true
-	}
-
 	const onSearch = async (evt: any) => {
 		query = evt.target.value
 		loading = true
@@ -44,66 +27,53 @@
 		if (resp && Array.isArray(resp)) searched = resp
 	}
 
-	$: btnClass = isFocused ? 'btn-primary' : 'btn-neutral'
-	$: dropdownClass = isFocused ? 'dropdown-open' : ''
 	$: list = query ? searched : gifs
 </script>
 
-<div 
-	use:clickOutside={handleClickOutside} 
-	class={"dropdown dropdown-top " + dropdownClass}
+<FloatingMenu 
+	let:forceClose id="gif-picker"
+	icon = {IconChatGif}
+	label="GIF"
 >
-	<button
-		bind:this={btn}
-		type="button"
-		class={'btn text-white border-none tooltip font-normal normal-case ' + btnClass}
-		data-tip="GIF"
-		on:click={openPicker}>
-		<IconChatGif />
-		<span class="sr-only">Add GIF</span>
-	</button>
-	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<div class={'dropdown-content menu shadow bg-base-100'}>
-		<div class="gif-picker bg-base-300 flex flex-col rounded-md px-2">
-			<div class="m-2">
-				<input
-					type="text"
-					placeholder="Search here"
-					class="input input-bordered input-sm w-full max-w-xs"
-					on:input={onSearch} />
-			</div>
-
-			{#if loading}
-				<div class="flex items-center justify-center py-4 w-full">
-					<span class="loading loading-dots loading-sm" />
-				</div>
-			{:else if list.length}
-				<div class="grid grid-cols-4 gap-2 flex-1 overflow-auto mt-2">
-					{#each list as gif}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							class="border cursor-pointer"
-							on:click={() => {
-								onSelect(gif.downsized_large)
-								isFocused = false
-							}}>
-							<img src={gif.downsized_large} alt="gif" class="w-full" />
-						</div>
-					{/each}
-				</div>
-			{:else}
-				<div class="flex items-center justify-center py-4 w-full">
-					<span class="text-sm text-neutral">No Items Found</span>
-				</div>
-			{/if}
+	<div class="gif-picker bg-base-300 flex flex-col rounded-md px-2">
+		<div class="m-2">
+			<input
+				type="text"
+				placeholder="Search here"
+				class="input input-bordered input-sm w-full max-w-xs"
+				on:input={onSearch} />
 		</div>
+
+		{#if loading}
+			<div class="flex items-center justify-center py-4 w-full">
+				<span class="loading loading-dots loading-sm" />
+			</div>
+		{:else if list.length}
+			<div class="grid grid-cols-4 gap-2 flex-1 overflow-auto mt-2">
+				{#each list as gif}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class="border cursor-pointer"
+						on:click={() => {
+							onSelect(gif.downsized_large)
+							forceClose()
+						}}>
+						<img src={gif.downsized_large} alt="gif" class="w-full" />
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div class="flex items-center justify-center py-4 w-full">
+				<span class="text-sm text-neutral">No Items Found</span>
+			</div>
+		{/if}
 	</div>
-</div>
+</FloatingMenu>
 
 <style global>
 	.gif-picker {
-		margin-left: -130px;
 		width: 350px;
 		height: 400px;
+		max-width: 100%;
 	}
 </style>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 617b5c15..1ba56840 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -254,7 +254,7 @@ export const getAudioIndicator = (
 export const clickOutside = (element: any, callbackFunction: any) => {
 	const onClick = (event: any) => {
 		if (!element.contains(event.target)) {
-			callbackFunction();
+			callbackFunction(event);
 		}
 	}