Feat: updated to daisyui 3.1.0

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
@@ -53,7 +53,7 @@
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.9",
 		"animate.css": "^4.1.1",
-		"daisyui": "^2.52.0",
+		"daisyui": "^3.1.0",
 		"nprogress": "^0.2.0",
 		"playwright-e2e-coverage-report": "^1.0.28",
 		"svelte-tags-input": "^5.0.0",

src/app.css

@@ -6,4 +6,8 @@
     html {
         font-family: 'Montserrat', sans-serif;
     }
-}
+}
+/* temporary fix */
+.tooltip:before {
+    color: white;
+}

src/lib/components/Browse/DrawerAddCategory.svelte

@@ -88,78 +88,80 @@
 	})
 </script>
 
-<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">
-		<div class="relative">
-			<div class="flex gap-1 input input-primary">
-				<div class="flex flex-row gap-2 items-center left-0">
-					{#if categories?.length}
-						{#each categories as icon}
-							<img
-								src={$category_list[icon]}
-								alt=""
-								class="h-5 w-5 cursor-pointer"
-								on:click={() => removeCategory(icon)} />
-						{/each}
-					{/if}
-				</div>
+<div class="flex 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">
+			<div class="relative">
+				<div class="flex gap-1 input input-primary">
+					<div class="flex flex-row gap-2 items-center left-0">
+						{#if categories?.length}
+							{#each categories as icon}
+								<img
+									src={$category_list[icon]}
+									alt=""
+									class="h-5 w-5 cursor-pointer"
+									on:click={() => removeCategory(icon)} />
+							{/each}
+						{/if}
+					</div>
 
-				<input
-					type="text"
-					bind:value={searchQuery}
-					on:input={() => searchCategory()}
-					name=""
-					class="grow md:ml-4 md:mr-12 focus:outline-0 max-w-[8rem] bg-base-100 md:max-w-xs"
-					placeholder={categories?.length ? '' : 'Category'}
-					autocomplete="off" />
+					<input
+						type="text"
+						bind:value={searchQuery}
+						on:input={() => searchCategory()}
+						name=""
+						class="grow md:ml-4 md:mr-12 focus:outline-0 max-w-[8rem] bg-base-100 md:max-w-xs"
+						placeholder={categories?.length ? '' : 'Category'}
+						autocomplete="off" />
+				</div>
+				<span class="absolute right-0 top-1/4 text-gray-400 pr-3">({maxCategoryLabel})</span>
 			</div>
-			<span class="absolute right-0 top-1/4 text-gray-400 pr-3">({maxCategoryLabel})</span>
-		</div>
 
-		<div class="tabs tabs-boxed mt-5">
-			{#each tabs as tab}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<span class="tab" class:tab-active={activeTab == tab} on:click={() => setActiveTab(tab)}
-					>{tab}</span>
-			{/each}
-		</div>
-
-		<div class="flex flex-col grow h-80 overflow-y-scroll mt-5">
-			{#if renderingAssets.length}
-				{#each renderingAssets as [name, image_url]}
+			<div class="tabs tabs-boxed mt-5">
+				{#each tabs as tab}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<label
-						class="cursor-pointer flex items-center gap-2 pb-2"
-						on:click={() => toggleCategory(name, image_url)}>
-						<input
-							type="checkbox"
-							checked={categories.includes(name)}
-							class="checkbox checkbox-primary"
-							disabled={categories.length === maxCategory && !categories.includes(name)} />
-						<img src={image_url} alt="" class="h-7 w-7 m-1" />
-						<span class="label-text">{name}</span>
-					</label>
+					<span class="tab" class:tab-active={activeTab == tab} on:click={() => setActiveTab(tab)}
+						>{tab}</span>
 				{/each}
-			{:else if searchQuery != ''}
-				<div class="alert flex justify-center">
-					<IconInfo />
-					<p>No results for the search query</p>
-				</div>
-			{:else}
-				<div class="flex justify-center w-full">
-					<progress class="progress w-full" />
-				</div>
-			{/if}
+			</div>
+
+			<div class="flex flex-col grow h-80 overflow-y-scroll mt-5">
+				{#if renderingAssets.length}
+					{#each renderingAssets as [name, image_url]}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<label
+							class="cursor-pointer flex items-center gap-2 pb-2"
+							on:click={() => toggleCategory(name, image_url)}>
+							<input
+								type="checkbox"
+								checked={categories.includes(name)}
+								class="checkbox checkbox-primary"
+								disabled={categories.length === maxCategory && !categories.includes(name)} />
+							<img src={image_url} alt="" class="h-7 w-7 m-1" />
+							<span class="label-text">{name}</span>
+						</label>
+					{/each}
+				{:else if searchQuery != ''}
+					<div class="alert flex justify-center">
+						<IconInfo />
+						<p>No results for the search query</p>
+					</div>
+				{:else}
+					<div class="flex justify-center w-full">
+						<progress class="progress w-full" />
+					</div>
+				{/if}
+			</div>
 		</div>
-	</div>
 
-	<div class="flex flex-row mt-auto gap-2 md:mb-4 p-3">
-		<button
-			type="button"
-			class="btn btn-default grow"
-			on:click={() => ((categories = []), (showAddCategory = false))}>Cancel</button>
-		<button type="button" class="btn btn-primary grow" on:click={() => (showAddCategory = false)}
-			>Add</button>
+		<div class="flex flex-row mt-auto gap-2 md:mb-4 p-3">
+			<button
+				type="button"
+				class="btn btn-neutral text-white grow"
+				on:click={() => ((categories = []), (showAddCategory = false))}>Cancel</button>
+			<button type="button" class="btn btn-primary grow" on:click={() => (showAddCategory = false)}
+				>Add</button>
+		</div>
 	</div>
 </div>

src/lib/components/Browse/DrawerCreateChannel.svelte

@@ -96,7 +96,7 @@
 			<DrawerAddCategory bind:showAddCategory bind:categories={newChannel.category} />
 		{:else}
 			<form
-				class="flex m-5"
+				class="flex h-full p-5"
 				action="?/create-channel"
 				method="post"
 				use:enhance={({ data }) => {
@@ -204,21 +204,18 @@
 									on:invalid={onValidation} />
 							{/if}
 						</div>
-						<!-- <div class="flex flex-row mt-5 ">
-							<input
-								bind:checked={newChannel.isPrivate}
-								type="checkbox"
-								class="checkbox checkbox-primary mr-3" /> Private
-						</div> -->
 					</div>
 
 					<div class="flex flex-row gap-2 mt-auto md:mb-4 p-3">
-						<button type="button" class="btn btn-default grow" on:click={() => toggleDrawer()}
-							>Cancel</button>
+						<button
+							type="button"
+							class="btn btn-neutral text-white grow"
+							on:click={() => toggleDrawer()}>Cancel</button>
 						<button
 							type="submit"
 							disabled={isLoadingChannel}
-							class="btn btn-primary grow {isLoadingChannel ? 'loading' : ''}">Add</button>
+							class="btn btn-primary text-white grow {isLoadingChannel ? 'loading' : ''}"
+							>Add</button>
 					</div>
 				</div>
 			</form>

src/lib/components/Browse/SearchBar.svelte

@@ -20,7 +20,7 @@
 					type="search"
 					placeholder="Search channels"
 					class="input input-bordered input-primary w-96" />
-				<button class="btn btn-square">
+				<button class="btn btn-square btn-neutral text-white">
 					<IconSearch />
 				</button>
 			</div>
@@ -38,7 +38,8 @@
 				}
 			}}>
 			<IconCreate />
-			Create a channel</label>
+			Create a channel
+		</label>
 	</div>
 
 	{#if showDrawer}

src/lib/components/Browse/Sections/ItemCarousel.svelte

@@ -22,7 +22,7 @@
 				<div class="dropdown dropdown-bottom">
 					<label
 						for=""
-						class="btn btn-sm rounded-md font-medium gap-2 text-white border-none"
+						class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none"
 						tabindex="-1">
 						<IconViewers />
 						{channel.memberCount || '0'}

src/lib/components/Browse/Sections/ItemChannel.svelte

@@ -5,7 +5,7 @@
 	export let channel: any = {}
 </script>
 
-<ul class="menu shrink-0 mt-6 bg-base-100 rounded-md">
+<ul class="p-4 bg-base-100 hover:bg-base-300 shrink-0 mt-6 rounded-md">
 	<li>
 		<a
 			class="flex flex-col w-[20rem] md:w-[25rem] rounded-md items-stretch"
@@ -22,7 +22,7 @@
 						<div class="dropdown dropdown-bottom">
 							<label
 								for=""
-								class="btn btn-sm rounded-md font-medium gap-2 text-white border-none"
+								class="btn btn-sm rounded-md font-medium gap-2 btn-neutral text-white border-none"
 								tabindex="-1">
 								<IconViewers />
 								{channel.memberCount || '0'}

src/lib/components/Browse/Sections/ItemUser.svelte

@@ -4,7 +4,7 @@
 	export let user: any = {}
 </script>
 
-<ul class="menu shrink-0 bg-base-100 rounded-md">
+<ul class="p-4 bg-base-100 hover:bg-base-300 shrink-0 rounded-md">
 	<li>
 		<a class="rounded-md" href="/profile/{user.username}">
 			<div class="text-center space-y-3 w-[200px]">

src/lib/components/Browse/Sections/SectionCarousel.svelte

@@ -39,7 +39,7 @@
 
 	onMount(async () => {
 		channels.then((data: any) => {
-			if(data.length){
+			if (data.length) {
 				initSwiper()
 				isMounted = true
 			}
@@ -60,7 +60,7 @@
 {:then value}
 	{#if value?.length > 0}
 		<div class={'relative p-1 transition-opacity ease-in duration-100 ' + swiperClass}>
-			<div class="btn btn-square p-2 btn-prev absolute top-2/4 left-1 z-10 ml-3">
+			<div class="btn btn-neutral text-white p-2 btn-prev btn-square absolute top-2/4 left-1 z-10 ml-3">
 				<IconDrawerLeft />
 			</div>
 			<div class="swiper carousel !pt-10 mx-8">
@@ -70,7 +70,7 @@
 					{/each}
 				</div>
 			</div>
-			<div class="btn btn-square z-10 p-2 btn-next absolute top-2/4 right-1 mr-3">
+			<div class="btn btn-neutral text-white z-10 p-2 btn-next btn-square absolute top-2/4 right-1 mr-3">
 				<IconDrawerChevron />
 			</div>
 		</div>

src/lib/components/Browse/Sections/SectionChannel.svelte

@@ -49,7 +49,7 @@
 			</div>
 			<div class="flex flex-row">
 				<div class="relative flex items-center ml-3">
-					<div class="absolute btn btn-square p-2 left-0 z-10" on:click={prev}>
+					<div class="absolute btn btn-neutral btn-prev btn-square text-white p-2 left-0 z-10" on:click={prev}>
 						<IconDrawerLeft />
 					</div>
 				</div>
@@ -69,7 +69,7 @@
 				</div>
 
 				<div class="relative flex items-center mr-3">
-					<div class="absolute btn btn-square p-2 right-0 z-10" on:click={next}>
+					<div class="absolute btn btn-neutral btn-next btn-square text-white p-2 right-0 z-10" on:click={next}>
 						<IconDrawerChevron />
 					</div>
 				</div>

src/lib/components/Browse/Sections/SectionTable.svelte

@@ -6,13 +6,15 @@
 	import LastItemInViewport from '$lib/actions/LastItemInViewport'
 	import { get } from '$lib/api'
 
-	export let channels: any = []
+	export let channels: any = [],
+		profileId: string = ''
 
 	let skip = 100
 	let limit = 100
 	let moreChannels: any[] = []
-	async function loadMore(): Promise<void> {
-		const infiniteChannels = await get(`channels?skip=${skip}&limit=${limit}`)
+	const loadMore = async () => {
+		let endpoint = profileId ? `channels/user?userId=${profileId}?` : 'channels?'
+		const infiniteChannels = await get(`${endpoint}skip=${skip}&limit=${limit}`)
 		if (infiniteChannels?.length) {
 			moreChannels = [...moreChannels, ...infiniteChannels]
 			skip += limit

src/lib/components/Browse/Sections/SectionUser.svelte

@@ -48,7 +48,9 @@
 			</div>
 			<div class="flex flex-row">
 				<div class="relative flex items-center ml-3">
-					<div class="absolute btn btn-square p-2 left-0 z-10" on:click={prev}>
+					<div
+						class="absolute btn btn-square btn-neutral text-white p-2 left-0 z-10"
+						on:click={prev}>
 						<IconDrawerLeft />
 					</div>
 				</div>
@@ -62,7 +64,9 @@
 				</div>
 
 				<div class="relative flex items-center mr-3">
-					<div class="absolute btn btn-square p-2 right-0 z-10" on:click={next}>
+					<div
+						class="absolute btn btn-square btn-neutral text-white p-2 right-0 z-10"
+						on:click={next}>
 						<IconDrawerChevron />
 					</div>
 				</div>

src/lib/components/Channel/Chat/ChatInput.svelte

@@ -163,28 +163,36 @@
 
 <form class="rounded-lg bg-base-200 p-2 w-full relative">
 	<button
-		class="btn tooltip font-normal normal-case {!isHost
+		class="btn text-white border-none tooltip font-normal normal-case {!isHost
 			? 'no-animation'
-			: ''} {channel.isAiChatEnabled ? 'btn-primary' : ''}"
+			: ''} {channel.isAiChatEnabled ? 'btn-primary' : 'btn-neutral'}"
 		data-tip="AI"
 		on:click={() => {
 			if (isHost) toggleAIChat()
 		}}>
 		<IconChatAI />
 		<span class="sr-only">Enable AI</span>
 	</button>
-	<button disabled type="button" class="btn tooltip font-normal normal-case" data-tip="Emoji">
+	<button
+		disabled
+		type="button"
+		class="btn btn-neutral text-white border-none tooltip font-normal normal-case"
+		data-tip="Emoji">
 		<IconChatEmoji />
 		<span class="sr-only">Add emoji</span>
 	</button>
-	<button disabled type="button" class="btn tooltip font-normal normal-case" data-tip="GIF">
+	<button
+		disabled
+		type="button"
+		class="btn btn-neutral text-white border-none tooltip font-normal normal-case"
+		data-tip="GIF">
 		<IconChatGif />
 		<span class="sr-only">Add GIF</span>
 	</button>
 	<button
 		disabled
 		type="button"
-		class="btn tooltip font-normal normal-case"
+		class="btn btn-neutral text-white border-none tooltip font-normal normal-case"
 		data-tip="Code snippet">
 		<IconChatCode />
 		<span class="sr-only">Add code snippet</span>