From 83cf4565a49b72ba69048c694c47be7cbb05f5cc Mon Sep 17 00:00:00 2001
From: sitaradev <sw.sitara@gmail.com>
Date: Wed, 13 Sep 2023 19:18:13 +0530
Subject: [PATCH 01/13] multi urls on profile update

---
 .../Profile/DrawerEditProfile.svelte          | 41 +++++++++++++++++--
 .../Profile/Elements/UserDetails.svelte       | 17 ++++++++
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Profile/DrawerEditProfile.svelte b/src/lib/components/Profile/DrawerEditProfile.svelte
index d95a4dd9..8ccba26f 100644
--- a/src/lib/components/Profile/DrawerEditProfile.svelte
+++ b/src/lib/components/Profile/DrawerEditProfile.svelte
@@ -2,11 +2,23 @@
 	import { enhance } from '$app/forms'
 	import { page } from '$app/stores'
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
+	import IconLink from '$lib/assets/icons/IconLink.svelte'
+	import IconSocialTwitter from '$lib/assets/icons/social/IconSocialTwitter.svelte'
+	import IconSocialDiscord from '$lib/assets/icons/social/IconSocialDiscord.svg'
+	import IconSocialGitHub from '$lib/assets/icons/social/IconSocialGitHub.svelte'
 	import { category_list } from '$lib/stores/channelStore'
 	import { createEffect } from '$lib/utils'
 
 	export let showDrawer: boolean
 	export let profile: any
+	// export let profile: { website: string[]; [key: string]: any } = { website: [''] }
+
+	let inputFields = [profile.urls]
+
+	function addInputField() {
+		inputFields = [...inputFields, '']
+		// profile.website = [...profile.website, '']
+	}
 
 	let params = $page.params
 
@@ -54,6 +66,8 @@
 			}
 		}
 	}, [$page.params])
+
+	$: console.log('profile: ', profile)
 </script>
 
 <div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
@@ -71,6 +85,7 @@
 			<DrawerAddCategory bind:showAddCategory bind:categories={profile.category} />
 		{:else}
 			<form
+				enctype="multipart/form-data"
 				class="flex h-full p-5"
 				action="?/update-profile"
 				method="post"
@@ -82,7 +97,7 @@
 				on:submit={() => {
 					submitBtn.disabled = true
 				}}>
-				<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-max flex flex-col rounded-lg">
 					<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
 						Update Profile
 					</p>
@@ -109,13 +124,33 @@
 								username.setCustomValidity('')
 							}} />
 
-						<input
+						<!-- <input
 							bind:value={profile.website}
 							type="url"
 							name="website"
 							id="website"
 							class="input input-primary input-bordered mt-5 w-full"
-							placeholder="Your website URL" />
+							placeholder="Your website URL" /> -->
+
+						{#each inputFields as url, index (url)}
+							<div class="mt-5 relative">
+								<input
+									bind:value={inputFields[index]}
+									type="url"
+									name={`urls[${index}]`}
+									id={`urls-${index}`}
+									class="input input-primary input-bordered w-full"
+									placeholder="Your website URL" />
+								<div class="bg-primary w-max absolute right-0 top-0 p-2 h-[48px] rounded-r-lg">
+									<IconLink />
+								</div>
+							</div>
+						{/each}
+
+						<div class="flex w-max mt-5">
+							<button type="button" class="btn btn-primary text-white grow" on:click={addInputField}
+								>+</button>
+						</div>
 
 						<div class="form-control mt-5 w-full">
 							<!-- svelte-ignore a11y-label-has-associated-control -->
diff --git a/src/lib/components/Profile/Elements/UserDetails.svelte b/src/lib/components/Profile/Elements/UserDetails.svelte
index e339123d..d2f5b7e4 100644
--- a/src/lib/components/Profile/Elements/UserDetails.svelte
+++ b/src/lib/components/Profile/Elements/UserDetails.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import IconLink from '$lib/assets/icons/IconLink.svelte'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
+	import IconSocialTwitter from '$lib/assets/icons/social/IconSocialTwitter.svelte'
+	import IconSocialDiscord from '$lib/assets/icons/social/IconSocialDiscord.svg'
+	import IconSocialGitHub from '$lib/assets/icons/social/IconSocialGitHub.svelte'
 	import { category_list } from '$lib/stores/channelStore'
 	import { colorFromLevel, levelAndBarValueFromExp } from '$lib/utils'
 	import { onMount } from 'svelte'
@@ -51,6 +54,20 @@
 					>{profile.website || ''}</a>
 			</div>
 		{/if}
+		<!-- {#if profile.website}
+			<div class="flex gap-4 items-center">
+				<a href={profile.website} target="_blank" rel="noreferrer">
+					<IconSocialGitHub />
+				</a>
+				<a href={profile.website} target="_blank" rel="noreferrer">
+					<img src={IconSocialDiscord} alt="" />
+				</a>
+				<a href={profile.website} target="_blank" rel="noreferrer">
+					<IconSocialTwitter />
+				</a>
+			</div>
+		{/if} -->
+
 		{#if profile.category?.length}
 			<div class="flex gap-2 justify-center">
 				{#each profile.category as category}

From 5e2bf2b65d2d2e737477dbee4ddd88bce0496880 Mon Sep 17 00:00:00 2001
From: sitaradev <sw.sitara@gmail.com>
Date: Fri, 15 Sep 2023 17:15:28 +0530
Subject: [PATCH 02/13] multi form fields for social urls

---
 .../Profile/DrawerEditProfile.svelte          | 217 +++++++++++-------
 .../Profile/Elements/UserDetails.svelte       |   1 +
 2 files changed, 139 insertions(+), 79 deletions(-)

diff --git a/src/lib/components/Profile/DrawerEditProfile.svelte b/src/lib/components/Profile/DrawerEditProfile.svelte
index 8ccba26f..2e80d8c1 100644
--- a/src/lib/components/Profile/DrawerEditProfile.svelte
+++ b/src/lib/components/Profile/DrawerEditProfile.svelte
@@ -3,21 +3,37 @@
 	import { page } from '$app/stores'
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
 	import IconLink from '$lib/assets/icons/IconLink.svelte'
-	import IconSocialTwitter from '$lib/assets/icons/social/IconSocialTwitter.svelte'
-	import IconSocialDiscord from '$lib/assets/icons/social/IconSocialDiscord.svg'
-	import IconSocialGitHub from '$lib/assets/icons/social/IconSocialGitHub.svelte'
 	import { category_list } from '$lib/stores/channelStore'
 	import { createEffect } from '$lib/utils'
 
 	export let showDrawer: boolean
 	export let profile: any
-	// export let profile: { website: string[]; [key: string]: any } = { website: [''] }
+	// export let profile: { urls: string[]; [key: string]: any } = { urls: [''] }
 
 	let inputFields = [profile.urls]
 
-	function addInputField() {
-		inputFields = [...inputFields, '']
-		// profile.website = [...profile.website, '']
+	const removeInputField = (index: number) => {
+		inputFields = inputFields.filter((_, i) => i !== index)
+	}
+
+	const addInputField = () => {
+		const lastField = inputFields[inputFields.length - 1]
+
+		if (isValidURL(lastField)) {
+			inputFields = [...inputFields, '']
+		}
+	}
+
+	let isLastFieldValid = false
+
+	const isValidURL = (url: string) => {
+		const urlPattern = /^https?:\/\/\S+$/i
+		return urlPattern.test(url)
+	}
+
+	$: {
+		const lastField = inputFields[inputFields.length - 1]
+		isLastFieldValid = isValidURL(lastField)
 	}
 
 	let params = $page.params
@@ -67,7 +83,29 @@
 		}
 	}, [$page.params])
 
-	$: console.log('profile: ', profile)
+	// const handleSubmit = async (event: any) => {
+	// 	try {
+	// 		event.preventDefault()
+	// 		submitBtn.disabled = true
+
+	// 		const form = event.target
+	// 		const formData = new FormData(form)
+	// 		formData.set('urls', JSON.stringify(inputFields))
+
+	// 		const response = await fetch(form.action, {
+	// 			method: form.method,
+	// 			body: formData
+	// 		})
+
+	// 		if (response.ok) {
+	// 			console.log('response', response.ok)
+	// 		} else {
+	// 			console.error('Server returned an error:', response.status)
+	// 		}
+	// 	} catch (error) {
+	// 		console.error('An error occurred during form submission:', error)
+	// 	}
+	// }
 </script>
 
 <div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
@@ -124,91 +162,112 @@
 								username.setCustomValidity('')
 							}} />
 
-						<!-- <input
+						<input
 							bind:value={profile.website}
 							type="url"
 							name="website"
 							id="website"
 							class="input input-primary input-bordered mt-5 w-full"
-							placeholder="Your website URL" /> -->
-
-						{#each inputFields as url, index (url)}
-							<div class="mt-5 relative">
-								<input
-									bind:value={inputFields[index]}
-									type="url"
-									name={`urls[${index}]`}
-									id={`urls-${index}`}
-									class="input input-primary input-bordered w-full"
-									placeholder="Your website URL" />
-								<div class="bg-primary w-max absolute right-0 top-0 p-2 h-[48px] rounded-r-lg">
-									<IconLink />
-								</div>
-							</div>
-						{/each}
-
-						<div class="flex w-max mt-5">
-							<button type="button" class="btn btn-primary text-white grow" on:click={addInputField}
-								>+</button>
-						</div>
+							placeholder="Your website URL" />
 
 						<div class="form-control mt-5 w-full">
 							<!-- svelte-ignore a11y-label-has-associated-control -->
 							<label class="label">
-								<span class="label-text">Banner</span>
+								<span class="label-text">Social Links</span>
 							</label>
-							<input
-								type="file"
-								accept="image/png, image/jpeg"
-								name="banner"
-								id="banner"
-								class="file-input file-input-bordered file-input-primary w-full" />
-						</div>
 
-						<div class="form-control mt-5 w-full">
-							<!-- svelte-ignore a11y-label-has-associated-control -->
-							<label class="label">
-								<span class="label-text">Avatar</span>
-							</label>
-							<input
-								type="file"
-								accept="image/png, image/jpeg"
-								name="avatar"
-								id="avatar"
-								class="file-input file-input-bordered file-input-primary w-full" />
-						</div>
+							{#each inputFields as url, index (index)}
+								<div class="flex flex-1 items-baseline mb-2 gap-3 w-full">
+									<div class="relative w-full">
+										<input
+											bind:value={inputFields[index]}
+											type="url"
+											name={`urls`}
+											id={`urls`}
+											class="input input-primary input-bordered w-full"
+											placeholder="Your website URL" />
+										<div class="bg-primary w-max absolute right-0 top-0 p-2 h-[48px] rounded-r-lg">
+											<IconLink />
+										</div>
+									</div>
+									{#if index === inputFields.length - 1}
+										<button
+											type="button"
+											class="btn btn-primary text-white"
+											disabled={!isLastFieldValid}
+											on:click={addInputField}>
+											+
+										</button>
+									{:else}
+										<button
+											type="button"
+											class="btn btn-neutral text-white"
+											on:click={() => removeInputField(index)}>
+											-
+										</button>
+									{/if}
+								</div>
+							{/each}
 
-						<div class="relative">
-							<input
-								on:click={() => (showAddCategory = true)}
-								type="text"
-								name="category-search"
-								placeholder={profile?.category?.length ? '' : 'Category'}
-								class="input input-primary input-bordered mt-5 w-full" />
-							<span class="absolute right-0 top-1/2 text-gray-400 pr-3">({maxCategoryLabel})</span>
-							<span class="absolute flex flex-row gap-2 left-0 top-1/2 pl-5">
-								{#if profile?.category?.length}
-									{#each profile?.category as icon}
-										<img src={$category_list[icon]} alt="" class="h-5 w-5" />
-									{/each}
-								{/if}
-							</span>
-						</div>
+							<div class="form-control mt-5 w-full">
+								<!-- svelte-ignore a11y-label-has-associated-control -->
+								<label class="label">
+									<span class="label-text">Banner</span>
+								</label>
+								<input
+									type="file"
+									accept="image/png, image/jpeg"
+									name="banner"
+									id="banner"
+									class="file-input file-input-bordered file-input-primary w-full" />
+							</div>
 
-						<textarea
-							bind:value={profile.bio}
-							id="bio"
-							name="bio"
-							class="block w-full mt-5 textarea h-28 input-primary"
-							placeholder="Your bio here" />
-					</div>
+							<div class="form-control mt-5 w-full">
+								<!-- svelte-ignore a11y-label-has-associated-control -->
+								<label class="label">
+									<span class="label-text">Avatar</span>
+								</label>
+								<input
+									type="file"
+									accept="image/png, image/jpeg"
+									name="avatar"
+									id="avatar"
+									class="file-input file-input-bordered file-input-primary w-full" />
+							</div>
 
-					<div class="flex flex-row gap-2 mt-auto md:mb-4 p-3">
-						<button
-							type="button"
-							class="btn btn-neutral text-white grow"
-							on:click={() => toggleDrawer()}>Cancel</button>
-						<button type="submit" class="btn btn-primary grow" bind:this={submitBtn}>Save</button>
+							<div class="relative">
+								<input
+									on:click={() => (showAddCategory = true)}
+									type="text"
+									name="category-search"
+									placeholder={profile?.category?.length ? '' : 'Category'}
+									class="input input-primary input-bordered mt-5 w-full" />
+								<span class="absolute right-0 top-1/2 text-gray-400 pr-3"
+									>({maxCategoryLabel})</span>
+								<span class="absolute flex flex-row gap-2 left-0 top-1/2 pl-5">
+									{#if profile?.category?.length}
+										{#each profile?.category as icon}
+											<img src={$category_list[icon]} alt="" class="h-5 w-5" />
+										{/each}
+									{/if}
+								</span>
+							</div>
+
+							<textarea
+								bind:value={profile.bio}
+								id="bio"
+								name="bio"
+								class="block w-full mt-5 textarea h-28 input-primary"
+								placeholder="Your bio here" />
+						</div>
+
+						<div class="flex flex-row gap-2 mt-auto md:mb-4 p-3">
+							<button
+								type="button"
+								class="btn btn-neutral text-white grow"
+								on:click={() => toggleDrawer()}>Cancel</button>
+							<button type="submit" class="btn btn-primary grow" bind:this={submitBtn}>Save</button>
+						</div>
 					</div>
 				</div>
 			</form>
diff --git a/src/lib/components/Profile/Elements/UserDetails.svelte b/src/lib/components/Profile/Elements/UserDetails.svelte
index d2f5b7e4..0b088159 100644
--- a/src/lib/components/Profile/Elements/UserDetails.svelte
+++ b/src/lib/components/Profile/Elements/UserDetails.svelte
@@ -23,6 +23,7 @@
 			progressBarColor = colorFromLevel(progressBarLevel)
 		}
 	})
+
 </script>
 
 <div class="text-center flex flex-col items-center">

From 0c2e5b9da12e3a51848c1d6fcd3687f1547bd9c3 Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Wed, 20 Sep 2023 12:47:15 +0530
Subject: [PATCH 03/13] manage urls array

---
 .../Profile/DrawerEditProfile.svelte          | 24 -------------------
 .../Profile/Elements/UserDetails.svelte       | 11 +++++++++
 src/routes/[username]/+page.server.ts         |  6 +++--
 3 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/Profile/DrawerEditProfile.svelte b/src/lib/components/Profile/DrawerEditProfile.svelte
index 2e80d8c1..4c579787 100644
--- a/src/lib/components/Profile/DrawerEditProfile.svelte
+++ b/src/lib/components/Profile/DrawerEditProfile.svelte
@@ -8,7 +8,6 @@
 
 	export let showDrawer: boolean
 	export let profile: any
-	// export let profile: { urls: string[]; [key: string]: any } = { urls: [''] }
 
 	let inputFields = [profile.urls]
 
@@ -83,29 +82,6 @@
 		}
 	}, [$page.params])
 
-	// const handleSubmit = async (event: any) => {
-	// 	try {
-	// 		event.preventDefault()
-	// 		submitBtn.disabled = true
-
-	// 		const form = event.target
-	// 		const formData = new FormData(form)
-	// 		formData.set('urls', JSON.stringify(inputFields))
-
-	// 		const response = await fetch(form.action, {
-	// 			method: form.method,
-	// 			body: formData
-	// 		})
-
-	// 		if (response.ok) {
-	// 			console.log('response', response.ok)
-	// 		} else {
-	// 			console.error('Server returned an error:', response.status)
-	// 		}
-	// 	} catch (error) {
-	// 		console.error('An error occurred during form submission:', error)
-	// 	}
-	// }
 </script>
 
 <div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
diff --git a/src/lib/components/Profile/Elements/UserDetails.svelte b/src/lib/components/Profile/Elements/UserDetails.svelte
index 0b088159..ac8f52f3 100644
--- a/src/lib/components/Profile/Elements/UserDetails.svelte
+++ b/src/lib/components/Profile/Elements/UserDetails.svelte
@@ -55,6 +55,17 @@
 					>{profile.website || ''}</a>
 			</div>
 		{/if}
+		
+		{#each (profile.urls || []) as url, index (index)}
+			{#if url}
+				<div class="flex gap-2 justify-center p-4">
+					<IconLink />
+					<a class="link link-info" href={url} target="_blank" rel="noreferrer"
+						>{url || ''}</a>
+				</div>
+			{/if}
+		{/each}
+
 		<!-- {#if profile.website}
 			<div class="flex gap-4 items-center">
 				<a href={profile.website} target="_blank" rel="noreferrer">
diff --git a/src/routes/[username]/+page.server.ts b/src/routes/[username]/+page.server.ts
index 053e6bb5..0bf15cd2 100644
--- a/src/routes/[username]/+page.server.ts
+++ b/src/routes/[username]/+page.server.ts
@@ -39,6 +39,7 @@ export const actions = {
 		addPropertyIfDefined(data, 'website', newUser)
 		addPropertyIfDefined(data, 'category', newUser)
 		addPropertyIfDefined(data, 'bio', newUser)
+		addPropertyIfDefined(data, 'urls', newUser, true)
 
 		const avatar = data.get('avatar') as File
 
@@ -92,9 +93,10 @@ export const actions = {
 const addPropertyIfDefined = (
 	data: FormData,
 	property: string,
-	newUser: { [key: string]: any }
+	newUser: { [key: string]: any },
+	list?:boolean
 ) => {
-	const propertyValue = data.get(property)
+	const propertyValue = list ? data.getAll(property) : data.get(property)
 	if (propertyValue !== null && propertyValue !== undefined) {
 		newUser[property] =
 			property === 'category' ? JSON.parse(propertyValue.toString()) : propertyValue

From fe5beb5392ae92ce1b137a53f0f1236eec1e6a77 Mon Sep 17 00:00:00 2001
From: sitaradev <sw.sitara@gmail.com>
Date: Thu, 21 Sep 2023 15:04:57 +0530
Subject: [PATCH 04/13] profile favicons

---
 .../Profile/DrawerEditProfile.svelte          |  3 +-
 .../Profile/Elements/UserDetails.svelte       | 37 +++++--------------
 src/lib/components/Profile/Favicon.svelte     | 27 ++++++++++++++
 3 files changed, 39 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/components/Profile/Favicon.svelte

diff --git a/src/lib/components/Profile/DrawerEditProfile.svelte b/src/lib/components/Profile/DrawerEditProfile.svelte
index 4c579787..fe4f3139 100644
--- a/src/lib/components/Profile/DrawerEditProfile.svelte
+++ b/src/lib/components/Profile/DrawerEditProfile.svelte
@@ -9,7 +9,7 @@
 	export let showDrawer: boolean
 	export let profile: any
 
-	let inputFields = [profile.urls]
+	let inputFields = [...profile.urls]
 
 	const removeInputField = (index: number) => {
 		inputFields = inputFields.filter((_, i) => i !== index)
@@ -82,6 +82,7 @@
 		}
 	}, [$page.params])
 
+	console.info('profile', profile)
 </script>
 
 <div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
diff --git a/src/lib/components/Profile/Elements/UserDetails.svelte b/src/lib/components/Profile/Elements/UserDetails.svelte
index ac8f52f3..c9a08443 100644
--- a/src/lib/components/Profile/Elements/UserDetails.svelte
+++ b/src/lib/components/Profile/Elements/UserDetails.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
 	import IconLink from '$lib/assets/icons/IconLink.svelte'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
-	import IconSocialTwitter from '$lib/assets/icons/social/IconSocialTwitter.svelte'
-	import IconSocialDiscord from '$lib/assets/icons/social/IconSocialDiscord.svg'
-	import IconSocialGitHub from '$lib/assets/icons/social/IconSocialGitHub.svelte'
+	import Favicon from '$lib/components/Profile/Favicon.svelte'
 	import { category_list } from '$lib/stores/channelStore'
 	import { colorFromLevel, levelAndBarValueFromExp } from '$lib/utils'
 	import { onMount } from 'svelte'
@@ -23,7 +21,6 @@
 			progressBarColor = colorFromLevel(progressBarLevel)
 		}
 	})
-
 </script>
 
 <div class="text-center flex flex-col items-center">
@@ -55,30 +52,16 @@
 					>{profile.website || ''}</a>
 			</div>
 		{/if}
-		
-		{#each (profile.urls || []) as url, index (index)}
-			{#if url}
-				<div class="flex gap-2 justify-center p-4">
-					<IconLink />
-					<a class="link link-info" href={url} target="_blank" rel="noreferrer"
-						>{url || ''}</a>
-				</div>
-			{/if}
-		{/each}
 
-		<!-- {#if profile.website}
-			<div class="flex gap-4 items-center">
-				<a href={profile.website} target="_blank" rel="noreferrer">
-					<IconSocialGitHub />
-				</a>
-				<a href={profile.website} target="_blank" rel="noreferrer">
-					<img src={IconSocialDiscord} alt="" />
-				</a>
-				<a href={profile.website} target="_blank" rel="noreferrer">
-					<IconSocialTwitter />
-				</a>
-			</div>
-		{/if} -->
+		<div class="flex gap-2 justify-center items-center p-4">
+			{#each profile.urls || [] as url, index (index)}
+				{#if url}
+					<div class="tooltip" data-tip={url}>
+						<Favicon {url} />
+					</div>
+				{/if}
+			{/each}
+		</div>
 
 		{#if profile.category?.length}
 			<div class="flex gap-2 justify-center">
diff --git a/src/lib/components/Profile/Favicon.svelte b/src/lib/components/Profile/Favicon.svelte
new file mode 100644
index 00000000..ae80b828
--- /dev/null
+++ b/src/lib/components/Profile/Favicon.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import IconLink from '$lib/assets/icons/IconLink.svelte'
+
+	export let url: string
+	let faviconUrl = ''
+
+	async function fetchFavicon() {
+		try {
+			faviconUrl = `https://www.google.com/s2/favicons?domain=${url}`
+		} catch (error) {
+			faviconUrl = ''
+		}
+	}
+
+	import { onMount } from 'svelte'
+	onMount(fetchFavicon)
+</script>
+
+{#if faviconUrl}
+	<a class="link link-info" href={url} target="_blank" rel="noreferrer">
+		<img class='w-4 h-4' src={faviconUrl} alt="Favicon" />
+	</a>
+{:else}
+	<a class="link link-info" href={url} target="_blank" rel="noreferrer">
+		<IconLink />
+	</a>
+{/if}

From 5ce1f1a191f9f2d6a976183cfcc33f37da4101d4 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Fri, 22 Sep 2023 03:03:03 -0500
Subject: [PATCH 05/13] Fix: removed profile website url and adjusted social
 icon size

---
 package.json                                  |  2 +-
 src/lib/assets/icons/IconLink.svelte          |  2 +-
 .../Profile/DrawerEditProfile.svelte          | 86 ++++++++++---------
 .../Profile/Elements/UserDetails.svelte       |  8 --
 src/lib/components/Profile/Favicon.svelte     |  8 +-
 .../components/Search/ItemSearchUser.svelte   | 26 +++---
 src/routes/[username]/+page.server.ts         |  3 +-
 7 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/package.json b/package.json
index 79cc6b5f..6934a8b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.1.01",
+	"version": "0.1.02",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
diff --git a/src/lib/assets/icons/IconLink.svelte b/src/lib/assets/icons/IconLink.svelte
index 0708747e..bfc18482 100644
--- a/src/lib/assets/icons/IconLink.svelte
+++ b/src/lib/assets/icons/IconLink.svelte
@@ -4,7 +4,7 @@
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	stroke="currentColor"
-	class="w-6 h-6">
+	class="w-8 h-8">
 	<path
 		stroke-linecap="round"
 		stroke-linejoin="round"
diff --git a/src/lib/components/Profile/DrawerEditProfile.svelte b/src/lib/components/Profile/DrawerEditProfile.svelte
index fe4f3139..8dba2043 100644
--- a/src/lib/components/Profile/DrawerEditProfile.svelte
+++ b/src/lib/components/Profile/DrawerEditProfile.svelte
@@ -117,35 +117,36 @@
 						Update Profile
 					</p>
 					<div class="flex flex-col p-3">
-						<input
-							bind:value={profile.displayName}
-							type="text"
-							name="displayName"
-							id="displayName"
-							required
-							class="input input-primary input-bordered w-full"
-							placeholder="Display name" />
-
-						<input
-							bind:value={profile.username}
-							type="text"
-							name="username"
-							id="username"
-							required
-							class="input input-primary input-bordered mt-5 w-full"
-							placeholder="Username"
-							bind:this={username}
-							on:input={() => {
-								username.setCustomValidity('')
-							}} />
-
-						<input
-							bind:value={profile.website}
-							type="url"
-							name="website"
-							id="website"
-							class="input input-primary input-bordered mt-5 w-full"
-							placeholder="Your website URL" />
+						<div class="form-control w-full">
+							<label class="label">
+								<span class="label-text">Display Name</span>
+							</label>
+							<input
+								bind:value={profile.displayName}
+								type="text"
+								name="displayName"
+								id="displayName"
+								required
+								class="input input-primary input-bordered"
+								placeholder="Display name" />
+						</div>
+						<div class="form-control mt-5 w-full">
+							<label class="label">
+								<span class="label-text">Username</span>
+							</label>
+							<input
+								bind:value={profile.username}
+								type="text"
+								name="username"
+								id="username"
+								required
+								class="input input-primary input-bordered"
+								placeholder="Username"
+								bind:this={username}
+								on:input={() => {
+									username.setCustomValidity('')
+								}} />
+						</div>
 
 						<div class="form-control mt-5 w-full">
 							<!-- svelte-ignore a11y-label-has-associated-control -->
@@ -162,7 +163,7 @@
 											name={`urls`}
 											id={`urls`}
 											class="input input-primary input-bordered w-full"
-											placeholder="Your website URL" />
+											placeholder="Social URL" />
 										<div class="bg-primary w-max absolute right-0 top-0 p-2 h-[48px] rounded-r-lg">
 											<IconLink />
 										</div>
@@ -212,13 +213,16 @@
 									class="file-input file-input-bordered file-input-primary w-full" />
 							</div>
 
-							<div class="relative">
+							<div class="form-control mt-5 w-full relative">
+								<label class="label">
+									<span class="label-text">Category</span>
+								</label>
 								<input
 									on:click={() => (showAddCategory = true)}
 									type="text"
 									name="category-search"
 									placeholder={profile?.category?.length ? '' : 'Category'}
-									class="input input-primary input-bordered mt-5 w-full" />
+									class="input input-primary input-bordered" />
 								<span class="absolute right-0 top-1/2 text-gray-400 pr-3"
 									>({maxCategoryLabel})</span>
 								<span class="absolute flex flex-row gap-2 left-0 top-1/2 pl-5">
@@ -229,13 +233,17 @@
 									{/if}
 								</span>
 							</div>
-
-							<textarea
-								bind:value={profile.bio}
-								id="bio"
-								name="bio"
-								class="block w-full mt-5 textarea h-28 input-primary"
-								placeholder="Your bio here" />
+							<div class="form-control mt-5 w-full">
+								<label class="label">
+									<span class="label-text">Bio</span>
+								</label>
+								<textarea
+									bind:value={profile.bio}
+									id="bio"
+									name="bio"
+									class="block textarea h-28 input-primary"
+									placeholder="Your bio here" />
+							</div>
 						</div>
 
 						<div class="flex flex-row gap-2 mt-auto md:mb-4 p-3">
diff --git a/src/lib/components/Profile/Elements/UserDetails.svelte b/src/lib/components/Profile/Elements/UserDetails.svelte
index c9a08443..27f01c01 100644
--- a/src/lib/components/Profile/Elements/UserDetails.svelte
+++ b/src/lib/components/Profile/Elements/UserDetails.svelte
@@ -45,14 +45,6 @@
 		</div>
 	{/if}
 	<div class="pt-4 mb-2">
-		{#if profile.website}
-			<div class="flex gap-2 justify-center p-4">
-				<IconLink />
-				<a class="link link-info" href={profile.website} target="_blank" rel="noreferrer"
-					>{profile.website || ''}</a>
-			</div>
-		{/if}
-
 		<div class="flex gap-2 justify-center items-center p-4">
 			{#each profile.urls || [] as url, index (index)}
 				{#if url}
diff --git a/src/lib/components/Profile/Favicon.svelte b/src/lib/components/Profile/Favicon.svelte
index ae80b828..71689df8 100644
--- a/src/lib/components/Profile/Favicon.svelte
+++ b/src/lib/components/Profile/Favicon.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
 	import IconLink from '$lib/assets/icons/IconLink.svelte'
+	import { onMount } from 'svelte'
 
 	export let url: string
 	let faviconUrl = ''
 
-	async function fetchFavicon() {
+	const fetchFavicon = async () => {
 		try {
-			faviconUrl = `https://www.google.com/s2/favicons?domain=${url}`
+			faviconUrl = `https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url}&size=256`
 		} catch (error) {
 			faviconUrl = ''
 		}
 	}
 
-	import { onMount } from 'svelte'
 	onMount(fetchFavicon)
 </script>
 
 {#if faviconUrl}
 	<a class="link link-info" href={url} target="_blank" rel="noreferrer">
-		<img class='w-4 h-4' src={faviconUrl} alt="Favicon" />
+		<img class="w-10 h-10" src={faviconUrl} alt="Favicon" />
 	</a>
 {:else}
 	<a class="link link-info" href={url} target="_blank" rel="noreferrer">
diff --git a/src/lib/components/Search/ItemSearchUser.svelte b/src/lib/components/Search/ItemSearchUser.svelte
index 68f014d7..654ac354 100644
--- a/src/lib/components/Search/ItemSearchUser.svelte
+++ b/src/lib/components/Search/ItemSearchUser.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import IconLink from '$lib/assets/icons/IconLink.svelte'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
 	import { category_list } from '$lib/stores/channelStore'
+	import Favicon from '$lib/components/Profile/Favicon.svelte'
 
 	export let item: any
 </script>
@@ -31,21 +31,25 @@
 			<div class="flex items-center">
 				<a class="link link-hover flex gap-1" href="/{item.username}"
 					>@{item.username || ''}
-					<div class="text-accent font-bold">
-						<IconDrawerVerification />
-					</div>
+					{#if item.planDetails?.planTier > 1}
+						<div class="text-accent font-bold">
+							<IconDrawerVerification />
+						</div>
+					{/if}
 				</a>
 			</div>
 			<h2 class="text-md">
 				{item.bio || ''}
 			</h2>
-			{#if item.website}
-				<div class="flex gap-2">
-					<IconLink />
-					<a class="link link-info" href={item.website} target="_blank" rel="noreferrer"
-						>{item.website || ''}</a>
-				</div>
-			{/if}
+			<div class="flex gap-2 items-center">
+				{#each item.urls || [] as url, index (index)}
+					{#if url}
+						<div class="tooltip" data-tip={url}>
+							<Favicon {url} />
+						</div>
+					{/if}
+				{/each}
+			</div>
 		</div>
 	</div>
 </a>
diff --git a/src/routes/[username]/+page.server.ts b/src/routes/[username]/+page.server.ts
index 0bf15cd2..8c446722 100644
--- a/src/routes/[username]/+page.server.ts
+++ b/src/routes/[username]/+page.server.ts
@@ -36,7 +36,6 @@ export const actions = {
 		const newUser: any = {}
 		addPropertyIfDefined(data, 'displayName', newUser)
 		addPropertyIfDefined(data, 'username', newUser)
-		addPropertyIfDefined(data, 'website', newUser)
 		addPropertyIfDefined(data, 'category', newUser)
 		addPropertyIfDefined(data, 'bio', newUser)
 		addPropertyIfDefined(data, 'urls', newUser, true)
@@ -94,7 +93,7 @@ const addPropertyIfDefined = (
 	data: FormData,
 	property: string,
 	newUser: { [key: string]: any },
-	list?:boolean
+	list?: boolean
 ) => {
 	const propertyValue = list ? data.getAll(property) : data.get(property)
 	if (propertyValue !== null && propertyValue !== undefined) {

From d4bc785d45d3ed09c70dee06b32127ec319a1a48 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Fri, 22 Sep 2023 16:36:29 -0500
Subject: [PATCH 06/13] Fix: active channel cover thumbnail

---
 src/lib/components/Browse/Sections/ItemCarousel.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Browse/Sections/ItemCarousel.svelte b/src/lib/components/Browse/Sections/ItemCarousel.svelte
index 2a638010..295216c0 100644
--- a/src/lib/components/Browse/Sections/ItemCarousel.svelte
+++ b/src/lib/components/Browse/Sections/ItemCarousel.svelte
@@ -11,9 +11,9 @@
 </script>
 
 <a
-	class="swiper-slide rounded-md"
+	class="swiper-slide rounded-md bg-black h-fit"
 	href="/channel/{channel._id}"
-	style="background-image: url({bg_cover});">
+	style="background-image: url({bg_cover}); background-size: cover; background-repeat: no-repeat;">
 	<div class="flex flex-col justify-between p-3 w-full h-full">
 		<div class="flex flex-row justify-between">
 			<div class="flex gap-2 mb-3">

From 05035b001de3dcc5f743e579b26c66690367ce63 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Sun, 24 Sep 2023 19:10:22 -0500
Subject: [PATCH 07/13] Fix: ignore routing case sensitivity

---
 src/routes/[username]/+page.server.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/[username]/+page.server.ts b/src/routes/[username]/+page.server.ts
index 8c446722..7879b571 100644
--- a/src/routes/[username]/+page.server.ts
+++ b/src/routes/[username]/+page.server.ts
@@ -3,7 +3,7 @@ import { get, patch, putImage } from '$lib/api'
 import { redirect, fail, error } from '@sveltejs/kit'
 
 export const load = (async ({ params }: { params: any }) => {
-	const profile = await get(`users/search/username?username=${params.username}`)
+	const profile = await get(`users/search/username?username=${params.username.toLowerCase()}`)
 	if (profile.error) {
 		throw error(404)
 	}

From f58b3639a4f79d416c839279ed6d61d46a084cd4 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Sun, 24 Sep 2023 19:10:55 -0500
Subject: [PATCH 08/13] Chore: updated version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3fdf5882..67a869a9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.1.02",
+	"version": "0.1.03",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

From 3cc3eaeec39a3e1b606cf66dbc2e64c821389315 Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Fri, 22 Sep 2023 15:58:47 +0530
Subject: [PATCH 09/13] close drawer

---
 .../components/Profile/DrawerEditProfile.svelte    | 14 +++++++++++---
 src/lib/utils.ts                                   |  6 ++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Profile/DrawerEditProfile.svelte b/src/lib/components/Profile/DrawerEditProfile.svelte
index 8dba2043..cbdeb840 100644
--- a/src/lib/components/Profile/DrawerEditProfile.svelte
+++ b/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"
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 04179e6b..8ad8015e 100644
--- a/src/lib/utils.ts
+++ b/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)
+	}
+}
\ No newline at end of file

From 9117a32aae51dbde51efed885643399beddc2e6c Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Tue, 26 Sep 2023 12:25:39 +0530
Subject: [PATCH 10/13] scroll on mobile

---
 src/lib/components/Profile/Elements/UserDetails.svelte | 7 +++----
 src/lib/components/Profile/Favicon.svelte              | 6 +++---
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/Profile/Elements/UserDetails.svelte b/src/lib/components/Profile/Elements/UserDetails.svelte
index 27f01c01..0ccb29a4 100644
--- a/src/lib/components/Profile/Elements/UserDetails.svelte
+++ b/src/lib/components/Profile/Elements/UserDetails.svelte
@@ -44,13 +44,12 @@
 			{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>
diff --git a/src/lib/components/Profile/Favicon.svelte b/src/lib/components/Profile/Favicon.svelte
index 71689df8..e19c2d45 100644
--- a/src/lib/components/Profile/Favicon.svelte
+++ b/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}

From dcff89411d9cca6835525cc2c9059ea062be36b7 Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Tue, 26 Sep 2023 12:28:09 +0530
Subject: [PATCH 11/13] set category margin

---
 src/lib/components/Profile/Elements/UserDetails.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Profile/Elements/UserDetails.svelte b/src/lib/components/Profile/Elements/UserDetails.svelte
index 0ccb29a4..fb416e97 100644
--- a/src/lib/components/Profile/Elements/UserDetails.svelte
+++ b/src/lib/components/Profile/Elements/UserDetails.svelte
@@ -55,7 +55,7 @@
 		</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" />

From bc33edb8ec9afde3f9af66cda0d0ef2a659ca3f4 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Tue, 26 Sep 2023 03:16:22 -0500
Subject: [PATCH 12/13] Fix: added verification link

---
 src/routes/affiliate/+page.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/routes/affiliate/+page.svelte b/src/routes/affiliate/+page.svelte
index e259bf2f..79718388 100644
--- a/src/routes/affiliate/+page.svelte
+++ b/src/routes/affiliate/+page.svelte
@@ -10,8 +10,15 @@
 			<p class="mb-5 font-light text-gray-500 sm:text-xl">
 				Collaborative streaming powered by AI. Expand your reach and grow your brand.
 			</p>
-			<a class="mb-5 link link-secondary" href={env.PUBLIC_STRIPE_BILLING_URL}
-				>Manage your subscription</a>
+			<div class="flex gap-2 justify-center">
+				<span>
+					<a class="mb-5 link link-secondary" href={env.PUBLIC_STRIPE_BILLING_URL}
+						>Manage your subscription</a>
+					🔹
+					<a class="mb-5 link link-secondary" href="https://forms.gle/mBtByR6jdoJeQd367"
+						>Apply for verification</a>
+				</span>
+			</div>
 		</div>
 
 		<script async src="https://js.stripe.com/v3/pricing-table.js"></script>

From 73319a00c7b9c1bb66bb0a426e5e6c8f3b5770b0 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Thu, 28 Sep 2023 00:12:44 -0500
Subject: [PATCH 13/13] Fix: added rust lang icon and icon background

---
 src/lib/assets/svg-json/image_urls.json       |  1 +
 src/lib/assets/svg-json/web2.json             |  1 +
 .../Profile/Elements/UserDetails.svelte       | 33 +++++-----
 static/category-optimized/web2/rust-lang.svg  | 61 +++++++++++++++++++
 4 files changed, 82 insertions(+), 14 deletions(-)
 create mode 100644 static/category-optimized/web2/rust-lang.svg

diff --git a/src/lib/assets/svg-json/image_urls.json b/src/lib/assets/svg-json/image_urls.json
index cd43da8f..2b4b52c5 100644
--- a/src/lib/assets/svg-json/image_urls.json
+++ b/src/lib/assets/svg-json/image_urls.json
@@ -81,6 +81,7 @@
 	"Redux": "/category-optimized/web2/redux.svg",
 	"Ruby Gem": "/category-optimized/web2/ruby-gem.svg",
 	"Ruby": "/category-optimized/web2/ruby-programming-language.svg",
+	"Rust-Lang": "/category-optimized/web2/rust-lang.svg",
 	"Salesforce": "/category-optimized/web2/salesforce.svg",
 	"Sass": "/category-optimized/web2/sass.svg",
 	"Selenium": "/category-optimized/web2/selenium.svg",
diff --git a/src/lib/assets/svg-json/web2.json b/src/lib/assets/svg-json/web2.json
index 3bf107cb..b6e2ff59 100644
--- a/src/lib/assets/svg-json/web2.json
+++ b/src/lib/assets/svg-json/web2.json
@@ -81,6 +81,7 @@
 	"Redux": "/category-optimized/web2/redux.svg",
 	"Ruby Gem": "/category-optimized/web2/ruby-gem.svg",
 	"Ruby": "/category-optimized/web2/ruby-programming-language.svg",
+	"Rust-Lang": "/category-optimized/web2/rust-lang.svg",
 	"Salesforce": "/category-optimized/web2/salesforce.svg",
 	"Sass": "/category-optimized/web2/sass.svg",
 	"Selenium": "/category-optimized/web2/selenium.svg",
diff --git a/src/lib/components/Profile/Elements/UserDetails.svelte b/src/lib/components/Profile/Elements/UserDetails.svelte
index fb416e97..9a30760e 100644
--- a/src/lib/components/Profile/Elements/UserDetails.svelte
+++ b/src/lib/components/Profile/Elements/UserDetails.svelte
@@ -44,23 +44,28 @@
 			{profile.bio || ''}
 		</div>
 	{/if}
-	
-	<div class="pt-4 mb-2">
-		<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}
-					<Favicon {url} />
-				{/if}
-			{/each}
+
+	<div class="pt-4 mb-2 flex flex-col">
+		<div class="card bg-base-200 p-3 tooltip tooltip-left" data-tip="social">
+			<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}
+						<Favicon {url} />
+					{/if}
+				{/each}
+			</div>
 		</div>
 
 		{#if profile.category?.length}
-			<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" />
-					</div>
-				{/each}
+			<div class="card bg-base-200 p-3 mt-4 tooltip tooltip-left" data-tip="category">
+				<div class="flex gap-2 justify-center">
+					{#each profile.category as category}
+						<div class="tooltip" data-tip={category}>
+							<img src={$category_list[category]} alt="" class="h-7 w-7 m-1" />
+						</div>
+					{/each}
+				</div>
 			</div>
 		{/if}
 	</div>
diff --git a/static/category-optimized/web2/rust-lang.svg b/static/category-optimized/web2/rust-lang.svg
new file mode 100644
index 00000000..9914b263
--- /dev/null
+++ b/static/category-optimized/web2/rust-lang.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" version="1.1">
+<defs>
+<filter id="alpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
+  <feColorMatrix type="matrix" in="SourceGraphic" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+</filter>
+<image id="image7" width="50" height="50" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAABuklEQVRoge2ZvUtcURBHz2hiJ6kMKFhsonY2FllEEElpZ7PpFGSLVPo3qCBCQlYEixTBIkTSRIsUtiEkQiCxsVnWkBUUt1AQQbO6L8+x2Pb58cRrBp1T3eLOzO9w4XJ5T/Rfo3IHaPjfAW4KF7FGeBGdLqGTG6HHPAjaXdd/sNzdB8DQ2irS8yzUqLAivK5ILo4BNHpVCTlJwl6/Tacw+K6+/pyHWEJNCixye/itZQ0XsYaLWMNFrHGByMg2jG3eWpJLGdusZ0omWUQLRbYmOlma60CrX0NFuzIqX1ia66DytwstFJO2nHMib7Yk034suThG+v+EzHglpLcsuTiW9o9VmEk8lXPeWo0Kw2/RwUMkPw4HD0NnvZhHEfp+FlluhoWXSTv80WgNF7GGi1jDRazhItZwEWu4iDVcxBr3XSS7D0+PbjYKQNdhvXd60ovo3jfK2VaqDRl4sXOdocmMbFPVJ5SzrWjle9rqa/yx+vBTOgsnwK5Gv0sIbel7JKCfStJ8sAtFNHr8C+hLU55eRObzWlssI89bkEw/1FK3SO5bG9BofxJd2UOmRlOX+8cHY7iINVzEGi5ijTOjHYUYMf+9GgAAAABJRU5ErkJggg=="/>
+<mask id="mask0">
+  <g filter="url(#alpha)">
+<use xlink:href="#image7"/>
+  </g>
+</mask>
+<clipPath id="clip1">
+  <rect x="0" y="0" width="50" height="50"/>
+</clipPath>
+<g id="surface6" clip-path="url(#clip1)">
+<path style="fill:none;stroke-width:9;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 42.99625 0 C 42.99625 23.750625 23.750625 42.99625 0 42.99625 C -23.750625 42.99625 -42.99625 23.750625 -42.99625 0 C -42.99625 -23.750625 -23.750625 -42.99625 0 -42.99625 C 23.750625 -42.99625 42.99625 -23.750625 42.99625 0 Z M 42.99625 0 " transform="matrix(0.471698,0,0,0.471698,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002344 2.997813 L 50.995938 0 L 46.002344 -2.997812 Z M 46.002344 2.997813 " transform="matrix(0.471698,0,0,0.471698,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.997519 3.000706 L 50.997979 -0.00349819 L 46.002176 -3.003541 Z M 45.997519 3.000706 " transform="matrix(0.462635,0.0920237,-0.0920237,0.462635,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.99681 2.997856 L 51.003054 0.00095506 L 46.003628 -3.00159 Z M 45.99681 2.997856 " transform="matrix(0.435792,0.180511,-0.180511,0.435792,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.996693 2.999749 L 51.000589 -0.00511466 L 46.001902 -2.999516 Z M 45.996693 2.999749 " transform="matrix(0.392203,0.262061,-0.262061,0.392203,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002599 2.998133 L 51.003391 -0.000000000000000878 L 46.002599 -2.998133 Z M 46.002599 2.998133 " transform="matrix(0.333541,0.333541,-0.333541,0.333541,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.001902 2.999516 L 51.000589 0.00511466 L 45.996693 -2.999749 Z M 46.001902 2.999516 " transform="matrix(0.262061,0.392203,-0.392203,0.262061,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.003628 3.00159 L 51.003054 -0.00095506 L 45.99681 -2.997856 Z M 46.003628 3.00159 " transform="matrix(0.180511,0.435792,-0.435792,0.180511,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002176 3.003541 L 50.997979 0.00349819 L 45.997519 -3.000706 Z M 46.002176 3.003541 " transform="matrix(0.0920237,0.462635,-0.462635,0.0920237,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002344 2.997813 L 50.995938 0.000000000000007105 L 46.002344 -2.997812 Z M 46.002344 2.997813 " transform="matrix(0.000000000000000029,0.471698,-0.471698,0.000000000000000029,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.997519 3.000706 L 50.997979 -0.00349819 L 46.002176 -3.003541 Z M 45.997519 3.000706 " transform="matrix(-0.0920237,0.462635,-0.462635,-0.0920237,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.99681 2.997856 L 51.003054 0.00095506 L 46.003628 -3.00159 Z M 45.99681 2.997856 " transform="matrix(-0.180511,0.435792,-0.435792,-0.180511,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.996693 2.999749 L 51.000589 -0.00511466 L 46.001902 -2.999516 Z M 45.996693 2.999749 " transform="matrix(-0.262061,0.392203,-0.392203,-0.262061,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002599 2.998133 L 51.003391 0.000000000000014211 L 46.002599 -2.998133 Z M 46.002599 2.998133 " transform="matrix(-0.333541,0.333541,-0.333541,-0.333541,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.001902 2.999516 L 51.000589 0.00511466 L 45.996693 -2.999749 Z M 46.001902 2.999516 " transform="matrix(-0.392203,0.262061,-0.262061,-0.392203,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.003628 3.00159 L 51.003054 -0.00095506 L 45.99681 -2.997856 Z M 46.003628 3.00159 " transform="matrix(-0.435792,0.180511,-0.180511,-0.435792,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002176 3.003541 L 50.997979 0.00349819 L 45.997519 -3.000706 Z M 46.002176 3.003541 " transform="matrix(-0.462635,0.0920237,-0.0920237,-0.462635,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002344 2.997813 L 50.995937 0.000000000000007105 L 46.002344 -2.997812 Z M 46.002344 2.997813 " transform="matrix(-0.471698,0.000000000000000058,-0.000000000000000058,-0.471698,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.997519 3.000706 L 50.997979 -0.00349819 L 46.002176 -3.003541 Z M 45.997519 3.000706 " transform="matrix(-0.462635,-0.0920237,0.0920237,-0.462635,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.99681 2.997856 L 51.003054 0.00095506 L 46.003628 -3.00159 Z M 45.99681 2.997856 " transform="matrix(-0.435792,-0.180511,0.180511,-0.435792,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.996693 2.999749 L 51.000589 -0.00511466 L 46.001902 -2.999516 Z M 45.996693 2.999749 " transform="matrix(-0.392203,-0.262061,0.262061,-0.392203,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002599 2.998133 L 51.003391 0.000000000000006207 L 46.002599 -2.998133 Z M 46.002599 2.998133 " transform="matrix(-0.333541,-0.333541,0.333541,-0.333541,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.001902 2.999516 L 51.000589 0.00511466 L 45.996693 -2.999749 Z M 46.001902 2.999516 " transform="matrix(-0.262061,-0.392203,0.392203,-0.262061,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.003628 3.00159 L 51.003054 -0.00095506 L 45.99681 -2.997856 Z M 46.003628 3.00159 " transform="matrix(-0.180511,-0.435792,0.435792,-0.180511,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002176 3.003541 L 50.997979 0.00349819 L 45.997519 -3.000706 Z M 46.002176 3.003541 " transform="matrix(-0.0920237,-0.462635,0.462635,-0.0920237,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002344 2.997813 L 50.995937 0.000000000000007105 L 46.002344 -2.997812 Z M 46.002344 2.997813 " transform="matrix(-0.000000000000000087,-0.471698,0.471698,-0.000000000000000087,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.997519 3.000706 L 50.997979 -0.00349819 L 46.002176 -3.003541 Z M 45.997519 3.000706 " transform="matrix(0.0920237,-0.462635,0.462635,0.0920237,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.99681 2.997856 L 51.003054 0.00095506 L 46.003628 -3.00159 Z M 45.99681 2.997856 " transform="matrix(0.180511,-0.435792,0.435792,0.180511,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.996693 2.999749 L 51.000589 -0.00511466 L 46.001902 -2.999516 Z M 45.996693 2.999749 " transform="matrix(0.262061,-0.392203,0.392203,0.262061,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002599 2.998133 L 51.003391 0 L 46.002599 -2.998133 Z M 46.002599 2.998133 " transform="matrix(0.333541,-0.333541,0.333541,0.333541,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.001902 2.999516 L 51.000589 0.00511466 L 45.996693 -2.999749 Z M 46.001902 2.999516 " transform="matrix(0.392203,-0.262061,0.262061,0.392203,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.003628 3.00159 L 51.003054 -0.00095506 L 45.99681 -2.997856 Z M 46.003628 3.00159 " transform="matrix(0.435792,-0.180511,0.180511,0.435792,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 46.002176 3.003541 L 50.997979 0.00349819 L 45.997519 -3.000706 Z M 46.002176 3.003541 " transform="matrix(0.462635,-0.0920237,0.0920237,0.462635,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M -6.997656 -42.0025 L 0 -34.996562 L 6.997656 -42.0025 Z M -6.997656 -42.0025 " transform="matrix(0.471698,0,0,0.471698,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M -6.999474 -41.997524 L 0.00139545 -35.003381 L 7.003414 -42.001691 Z M -6.999474 -41.997524 " transform="matrix(0.145763,0.448612,-0.448612,0.145763,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M -7.001744 -41.998759 L 0.000327636 -34.997289 L 7.001798 -41.999361 Z M -7.001744 -41.998759 " transform="matrix(-0.381612,0.277257,-0.277257,-0.381612,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M -7.001798 -41.999361 L -0.000327636 -34.997289 L 7.001744 -41.998759 Z M -7.001798 -41.999361 " transform="matrix(-0.381612,-0.277257,0.277257,-0.381612,25,25)"/>
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M -7.003414 -42.001691 L -0.00139545 -35.003381 L 6.999474 -41.997524 Z M -7.003414 -42.001691 " transform="matrix(0.145763,-0.448612,0.448612,0.145763,25,25)"/>
+</g>
+</defs>
+<g id="surface1">
+<path style="fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M -8.996562 -15.000469 L 3.996719 -15.000469 C 11.996406 -15.000469 11.996406 -7.000781 3.996719 -7.000781 L -8.996562 -7.000781 Z M -40.001562 22.000156 L -0.003125 22.000156 L -0.003125 11.002656 L -8.996562 11.002656 L -8.996562 3.002969 L 0.998906 3.002969 C 11.996406 3.002969 6.000781 22.000156 15.0025 22.000156 L 40.003594 22.000156 L 40.003594 3.002969 L 33.999688 3.002969 L 33.999688 4.99875 C 33.999688 12.998438 24.997969 11.996406 23.995938 7.002813 C 23.002188 2.000938 19.002344 -1.998906 18.000313 -1.998906 C 32.997656 -9.998594 23.995938 -25.997969 11.996406 -25.997969 L -34.999688 -25.997969 L -34.999688 -15.000469 L -24.995938 -15.000469 L -24.995938 11.002656 L -40.001562 11.002656 Z M -40.001562 22.000156 " transform="matrix(0.471698,0,0,0.471698,25.235849,25.235849)"/>
+<use xlink:href="#surface6" mask="url(#mask0)"/>
+</g>
+</svg>