Profile urls

src/lib/components/Profile/DrawerEditProfile.svelte

@@ -4,10 +4,12 @@
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
 	import IconLink from '$lib/assets/icons/IconLink.svelte'
 	import { category_list } from '$lib/stores/channelStore'
-	import { createEffect } from '$lib/utils'
+	import { createEffect, objectMonitor } from '$lib/utils'
 
 	export let showDrawer: boolean
 	export let profile: any
+
+	let isProfileUpdated = objectMonitor($page.data.profile)
 
 	let inputFields = [...profile.urls]
 
@@ -82,7 +84,13 @@
 		}
 	}, [$page.params])
 
-	console.info('profile', profile)
+	$: useOueryEffect(() => {
+		if(isProfileUpdated($page.data.profile)){
+			if (submitBtn) submitBtn.disabled = false
+			toggleDrawer()
+		}
+	}, [$page.data.profile])
+
 </script>
 
 <div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
@@ -168,7 +176,7 @@
 											<IconLink />
 										</div>
 									</div>
-									{#if index === inputFields.length - 1}
+									{#if index === inputFields.length - 1 && inputFields.length < 10}
 										<button
 											type="button"
 											class="btn btn-primary text-white"

src/lib/components/Profile/Elements/UserDetails.svelte

@@ -44,19 +44,18 @@
 			{profile.bio || ''}
 		</div>
 	{/if}
+
 	<div class="pt-4 mb-2">
-		<div class="flex gap-2 justify-center items-center p-4">
+		<div class="flex gap-2 justify-center items-center lg:overflow-hidden overflow-auto max-w-full ">
 			{#each profile.urls || [] as url, index (index)}
 				{#if url}
-					<div class="tooltip" data-tip={url}>
-						<Favicon {url} />
-					</div>
+					<Favicon {url} />
 				{/if}
 			{/each}
 		</div>
 
 		{#if profile.category?.length}
-			<div class="flex gap-2 justify-center">
+			<div class="flex gap-2 justify-center mt-8">
 				{#each profile.category as category}
 					<div class="tooltip" data-tip={category}>
 						<img src={$category_list[category]} alt="" class="h-7 w-7 m-1" />

src/lib/components/Profile/Favicon.svelte

@@ -17,11 +17,11 @@
 </script>
 
 {#if faviconUrl}
-	<a class="link link-info" href={url} target="_blank" rel="noreferrer">
-		<img class="w-10 h-10" src={faviconUrl} alt="Favicon" />
+	<a class="link link-info w-10 tooltip" href={url} data-tip={url} target="_blank" rel="noreferrer">
+		<img class="w-full" src={faviconUrl} alt="Favicon" />
 	</a>
 {:else}
-	<a class="link link-info" href={url} target="_blank" rel="noreferrer">
+	<a class="w-10 h-10 link link-info tooltip" href={url} data-tip={url} target="_blank" rel="noreferrer">
 		<IconLink />
 	</a>
 {/if}

src/lib/utils.ts

@@ -339,3 +339,9 @@ export const dataURLtoFile = (dataurl: string, filename: string) => {
 	}
 	return new File([u8arr], filename, { type: mime })
 }
+
+export const objectMonitor = (object:any) => {
+	return (currentState:any) => {
+		return JSON.stringify(object) !== JSON.stringify(currentState)
+	}
+}