Feat: fixed naming conventions and added sections page

src/lib/components/Browse/CreateChannelDrawer.svelte → src/lib/components/Browse/DrawerCreateChannel.svelte

@@ -3,7 +3,7 @@
 	import { tags, getTags } from '$lib/stores/channelStore'
 	import { onMount } from 'svelte'
 	import Tags from 'svelte-tags-input'
-	import AddCategoryDrawer from './AddCategoryDrawer.svelte'
+	import DrawerAddCategory from './DrawerAddCategory.svelte'
 	import { goto } from '$app/navigation'
 	import { post, put } from '$lib/api'
 
@@ -72,7 +72,7 @@
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div on:click={() => (showDrawer = false)} class="drawer-overlay" />
 		{#if showAddCategory}
-			<AddCategoryDrawer
+			<DrawerAddCategory
 				bind:showAddCategory
 				bind:categoryIcons
 				bind:categories={newChannel.category} />

src/lib/components/Browse/SearchBar.svelte

@@ -2,7 +2,7 @@
 	import IconCreate from '$lib/assets/icons/IconCreate.svelte'
 	import IconCross from '$lib/assets/icons/IconCross.svelte'
 	import IconSearch from '$lib/assets/icons/IconSearch.svelte'
-	import CreateChannelDrawer from './CreateChannelDrawer.svelte'
+	import DrawerCreateChannel from './DrawerCreateChannel.svelte'
 	import { current_user } from '$lib/stores/authStore'
 	import { is_login_modal_open } from '$lib/stores/helperStore'
 
@@ -48,6 +48,6 @@
 	{/if}
 
 	{#if showDrawer && !searchPage}
-		<CreateChannelDrawer bind:showDrawer />
+		<DrawerCreateChannel bind:showDrawer />
 	{/if}
 </div>

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

@@ -2,7 +2,7 @@
 	import IconDrawerLeft from '$lib/assets/icons/drawer/IconDrawerLeft.svelte'
 	import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte'
 	import { goto } from '$app/navigation'
-	import LoadingCarouselItem from '$lib/components/Browse/Sections/LoadingCarouselItem.svelte'
+	import LoadingItemCarousel from '$lib/components/Browse/Sections/LoadingItemCarousel.svelte'
 	import { onMount } from 'svelte'
 	import Swiper, { Navigation } from 'swiper'
 
@@ -71,7 +71,7 @@
 	{:else}
 		<div role="status" class="flex flex-row gap-1 animate-pulse">
 			{#each Array(5) as _, index (index)}
-				<LoadingCarouselItem />
+				<LoadingItemCarousel />
 			{/each}
 			<span class="sr-only">Loading...</span>
 		</div>

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

@@ -3,11 +3,12 @@
 	import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte'
 	import IconPlay from '$lib/assets/icons/IconPlay.svelte'
 	import { goto } from '$app/navigation'
-	import LoadingChannelItem from '$lib/components/Browse/Sections/LoadingChannelItem.svelte'
+	import LoadingItemChannel from '$lib/components/Browse/Sections/LoadingItemChannel.svelte'
 
 	export let title: string = '',
 		channels: any = undefined,
-		isLoading: boolean = false
+		isLoading: boolean = false,
+		sectionId: string = ''
 
 	let ref: any
 	$: hidden = ((channels != undefined && channels.length == 0) || channels.error) && !isLoading
@@ -34,7 +35,7 @@
 <div class="flex flex-col my-4 relative overflow-x-auto scrollbar-hide" class:hidden>
 	{#if channels && channels.length}
 		<div class="font-semibold m-3">
-			<a class="link link-secondary text-lg">{title}</a>
+			<a class="link link-secondary text-lg" href="/browse/{sectionId}">{title}</a>
 		</div>
 		<div class="flex flex-row">
 			<div class="relative flex items-center">
@@ -100,7 +101,7 @@
 		</div>
 		<div role="status" class="flex flex-row gap-1 animate-pulse ">
 			{#each Array(6) as _, index (index)}
-				<LoadingChannelItem />
+				<LoadingItemChannel />
 			{/each}
 			<span class="sr-only">Loading...</span>
 		</div>

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

@@ -4,7 +4,7 @@
 	import VirtualList from '@sveltejs/svelte-virtual-list'
 	import { techList } from '$lib/stores/channelStore'
 	import { goto } from '$app/navigation'
-	import LoadingTableItem from '$lib/components/Browse/Sections/LoadingTableItem.svelte'
+	import LoadingItemTable from '$lib/components/Browse/Sections/LoadingItemTable.svelte'
 
 	export let channels: any = [],
 		isLoading: boolean = false
@@ -83,7 +83,7 @@
 			{:else}
 				<!-- {#each Array(5) as _, index (index)} -->
 				<tr>
-					<LoadingTableItem />
+					<LoadingItemTable />
 				</tr>
 				<!-- {/each} -->
 				<span class="sr-only">Loading...</span>

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

@@ -3,11 +3,12 @@
 	import IconDrawerChevron from '$lib/assets/icons/drawer/IconDrawerChevron.svelte'
 	import IconPlay from '$lib/assets/icons/IconPlay.svelte'
 	import { goto } from '$app/navigation'
-	import LoadingChannelItem from '$lib/components/Browse/Sections/LoadingChannelItem.svelte'
+	import LoadingItemChannel from '$lib/components/Browse/Sections/LoadingItemChannel.svelte'
 
 	export let title: string = '',
 		users: any = undefined,
-		isLoading: boolean = false
+		isLoading: boolean = false,
+		sectionId: string = ''
 
 	let ref: any
 	$: hidden = ((users != undefined && users.length == 0) || users.error) && !isLoading
@@ -35,7 +36,7 @@
 	<div class="flex flex-col my-4 relative overflow-x-auto scrollbar-hide" class:hidden>
 		{#if users && users.length}
 			<div class="font-semibold m-3">
-				<a class="link link-secondary text-lg">{title}</a>
+				<a class="link link-secondary text-lg" href="/browse/{sectionId}">{title}</a>
 			</div>
 			<div class="flex flex-row">
 				<div class="relative flex items-center">
@@ -103,7 +104,7 @@
 			</div>
 			<div role="status" class="flex flex-row gap-1 animate-pulse ">
 				{#each Array(6) as _, index (index)}
-					<LoadingChannelItem />
+					<LoadingItemChannel />
 				{/each}
 				<span class="sr-only">Loading...</span>
 			</div>

src/lib/components/Channel/Chat/ChatDrawer.svelte → src/lib/components/Channel/Chat/DrawerChat.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ChatInput from '$lib/components/Channel/Chat/ChatInput.svelte'
-	import ChatMessage from '$lib/components/Channel/Chat/ChatMessage.svelte'
+	import Message from '$lib/components/Channel/Chat/Message.svelte'
 	import { channelMessage } from '$lib/stores/websocketStore'
 	import { isJsonString } from '$lib/utils'
 
@@ -10,8 +10,6 @@
 		userId: string = '',
 		username: string = ''
 
-	$: chatHistory = chatHistory
-
 	channelMessage.subscribe((value) => {
 		if (!value || !isJsonString(value)) return
 		const parsedData = JSON.parse(value)
@@ -36,7 +34,7 @@
 			</p>
 			<div class="flex flex-col-reverse p-3 grow h-80 overflow-y-auto">
 				{#each chatHistory as sender}
-					<ChatMessage bind:sender />
+					<Message bind:sender />
 				{/each}
 			</div>
 			<div class="flex flex-row mt-auto p-3 w-full">

src/lib/components/Channel/Chat/ChatMessage.svelte → src/lib/components/Channel/Chat/Message.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ChatProfileCard from '$lib/components/Channel/Chat/ChatProfileCard.svelte'
+	import ProfileCard from '$lib/components/Channel/Chat/ProfileCard.svelte'
 	export let sender: any
 	let coloredRoles: { tagColor?: any; textColor?: string }
 
@@ -29,7 +29,7 @@
 	}
 </script>
 
-<!-- <ChatProfileCard /> -->
+<!-- <ProfileCard /> -->
 
 <div class="menu">
 	<ul>

src/lib/components/Search/ItemSection.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	export let channel: any
+	function timeSince(date: string) {
+		let created: any = new Date(date)
+		let currentDate: any = new Date(Date.now())
+		var seconds = Math.floor((currentDate - created) / 1000)
+		var interval = seconds / 31536000
+		if (interval > 1) {
+			return Math.floor(interval) + ' years ago'
+		}
+		interval = seconds / 2592000
+		if (interval > 1) {
+			return Math.floor(interval) + ' months ago'
+		}
+		interval = seconds / 86400
+		if (interval > 1) {
+			return Math.floor(interval) + ' days ago'
+		}
+		interval = seconds / 3600
+		if (interval > 1) {
+			return Math.floor(interval) + ' hours ago'
+		}
+		interval = seconds / 60
+		if (interval > 1) {
+			return Math.floor(interval) + ' minutes ago'
+		}
+		return Math.floor(seconds) + ' seconds ago'
+	}
+</script>
+
+<div class="flex flex-col md:flex-row gap-4">
+	<a href={`/channel/${channel._id}`} class=" md:w-96 bg-gray-200">
+		<img
+			loading="lazy"
+			src={channel.thumbnail || 'https://via.placeholder.com/300/09f/fff.png'}
+			class="w-full max-h-64 border-none rounded shadow"
+			alt="" />
+	</a>
+
+	<div class="md:basis-96 flex-auto flex flex-col gap-2">
+		{#if Array.isArray(channel.category)}
+			<div class="flex flex-wrap gap-2">
+				{#each channel.category as cat}
+					<div class="badge badge-primary">{cat}</div>
+				{/each}
+			</div>
+		{/if}
+
+		<a href={`/channel/${channel._id}`}>
+			<h2 class="text-xl font-semibold dark:text-white">
+				{channel.title || ''}
+			</h2>
+		</a>
+
+		<p class="text-sm font-light">
+			{channel.memberCount || 0} Views - {timeSince(channel.createdAt)}
+		</p>
+
+		<a href={`/channel/${channel._id}`} class="flex items-center">
+			<div class="avatar">
+				<div class="w-8 rounded-full">
+					<img
+						loading="lazy"
+						src={channel.avatar || 'https://via.placeholder.com/300/09f/fff.png'}
+						alt="avater" />
+				</div>
+			</div>
+			<p class="ml-2 text-sm font-light text-center">{channel.createdBy || ''}</p>
+		</a>
+
+		<p class="text-sm font-light">
+			{channel.description ? channel.description.slice(0, 100) : ''}
+		</p>
+
+		{#if Array.isArray(channel.tags)}
+			<div class="flex flex-wrap gap-2">
+				{#each channel.tags as tag}
+					<div class="badge">{tag}</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>

src/lib/components/Search/SearchSection.svelte → src/lib/components/Search/ListSearch.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
 	import LastItemInViewport from '$lib/actions/LastItemInViewport'
-	import SearchItem from '$lib/components/Search/SearchItem.svelte'
-	export let channels: any = []
-	export let loadingMoreChannels: boolean = false
+	import ItemSearch from '$lib/components/Search/ItemSearch.svelte'
+	import ItemSection from '$lib/components/Search/ItemSection.svelte'
+	export let channels: any = [],
+		loadingMoreChannels: boolean = false,
+		isSearchPage: boolean = false
 </script>
 
 <div class="flex flex-col gap-4 px-4 md:px-24 justify-around">
 	{#each channels as channel}
 		{#if channel.isPrivate !== true}
-			<SearchItem {channel} />
+			{#if isSearchPage}
+				<ItemSearch {channel} />
+			{:else}
+				<ItemSection {channel} />
+			{/if}
 		{/if}
 	{:else}
 		<h2>No records found</h2>

src/lib/utils.ts

@@ -24,3 +24,30 @@ export const isJsonString = (str: string): boolean => {
 	}
 	return true
 }
+
+export const getSectionUrl = ({
+	sectionId,
+	query,
+	skip,
+	limit
+}: {
+	sectionId: string
+	query: string
+	skip: number
+	limit: number
+}): string => {
+	switch (sectionId) {
+		case 'weekly':
+			return `channels/weekly?searchQuery=${query}&skip=${skip}&limit=${limit}`
+		case 'highest-ranked':
+			return `users/highest-ranked?searchQuery=${query}&skip=${skip}&limit=${limit}`
+		case 'rising-stars':
+			return `users/rising-stars?searchQuery=${query}&skip=${skip}&limit=${limit}`
+		case 'my':
+			return `channels/me/hosted?searchQuery=${query}&skip=${skip}&limit=${limit}`
+		case 'fav':
+			return `channels/me/fav?searchQuery=${query}&skip=${skip}&limit=${limit}`
+		default:
+			return `channels?searchQuery=${query}&skip=${skip}&limit=${limit}`
+	}
+}