polishing

src/lib/client/components/images/ImageCarousel.svelte

@@ -13,6 +13,7 @@
 	let index: number = 0;
 	const imagesData: HTMLImgAttributes[] = imageUrls.map((imageUrl, index) => {
 		return {
+			loading: 'lazy',
 			src: imageUrl,
 			alt: imagesAlt
 				? imagesAlt

src/lib/client/components/layout/Navbar.svelte

@@ -10,7 +10,7 @@
 
 <Navbar class="sticky top-0 z-50">
 	<div class="flex space-x-4">
-		<NavBrand>
+		<NavBrand href="/">
 			<img src="/favicon.png" class="mr-3 h-6 sm:h-9 rounded-md" alt="Dexbooru Logo" />
 			<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"
 				>Dexbooru</span

src/lib/client/components/posts/container/PostContainer.svelte

@@ -48,7 +48,7 @@
 	<div id="post-container-body" class="space-y-4 mb-5">
 		<div id="post-container-title" class="flex justify-between">
 			<p class="text-4xl dark:text-white">{postContainerTitle}</p>
-			<Searchbar queryHandler={onPostSearch} placeholder="Search by keyword(s)" />
+			<Searchbar queryInputHandler={onPostSearch} placeholder="Search by keyword(s)" />
 		</div>
 
 		<PostGrid />

src/lib/client/components/reusable/Searchbar.svelte

@@ -6,17 +6,25 @@
 	export let width: string = '300px';
 	export let isGlobal: boolean = false;
 	export let placeholder: string;
-	export let queryHandler: (query: string) => void;
+	export let queryInputHandler: (query: string) => void;
+	export let queryChangeHandler: ((query: string) => void) | null = null;
 
 	const optionalProps: Record<string, string> = {};
 	if (inputElementId) {
 		optionalProps.id = inputElementId;
 	}
 
-	const onInput = (event: Event) => {
+	const handleOnInput = (event: Event) => {
 		const inputTarget = event.target as HTMLInputElement;
 		if (inputTarget.value.length > 0) {
-			queryHandler(inputTarget.value);
+			queryInputHandler(inputTarget.value);
+		}
+	};
+
+	const handleOnChange = (event: Event) => {
+		const inputTarget = event.target as HTMLInputElement;
+		if (queryChangeHandler) {
+			queryChangeHandler(inputTarget.value);
 		}
 	};
 </script>
@@ -25,5 +33,11 @@
 	<div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
 		<SearchOutline class="w-4 h-4" />
 	</div>
-	<Input {...optionalProps} on:input={onInput} class="ps-10" {placeholder} />
+	<Input
+		{...optionalProps}
+		on:input={handleOnInput}
+		on:input={handleOnChange}
+		class="ps-10"
+		{placeholder}
+	/>
 </div>

src/lib/client/components/search/GlobalSearchModal.svelte

@@ -45,6 +45,12 @@
 		}
 	}, true);
 
+	const clearResultsOnEmptyQuery = (query: string) => {
+		if (query.length === 0) {
+			currentSearchResults = null;
+		}
+	};
+
 	const debouncedFetchQueryResults = debounce(async (query: string) => {
 		searchResultsLoading = true;
 		queryStore.set(query);
@@ -71,7 +77,8 @@
 			isGlobal
 			width="100%"
 			placeholder="Enter your search query"
-			queryHandler={debouncedFetchQueryResults}
+			queryInputHandler={debouncedFetchQueryResults}
+			queryChangeHandler={clearResultsOnEmptyQuery}
 		/>
 		{#if searchResultsLoading}
 			<Spinner color="pink" class="absolute top-2 right-2" size="7" />

src/lib/client/components/search/SearchResultsContainer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { IAppSearchResult } from '$lib/shared/types/search';
 	import { TabItem, Tabs } from 'flowbite-svelte';
+	import { slide } from 'svelte/transition';
 	import LabelTable from '../tables/LabelTable.svelte';
 	import PostTable from '../tables/PostTable.svelte';
 	import UserTable from '../tables/UserTable.svelte';
@@ -16,33 +17,35 @@
 	}
 </script>
 
-<Tabs style="underline">
-	<TabItem open title="Tags">
-		{#if tags && tags.length > 0}
-			<LabelTable labels={tags} labelType="tags" />
-		{:else}
-			<p>No tags were found matching that query</p>
-		{/if}
-	</TabItem>
-	<TabItem title="Artists">
-		{#if artists && artists.length > 0}
-			<LabelTable labels={artists} labelType="artists" />
-		{:else}
-			<p>No artists were found matching that query</p>
-		{/if}
-	</TabItem>
-	<TabItem title="Posts">
-		{#if posts && posts.length > 0}
-			<PostTable {posts} />
-		{:else}
-			<p>No posts were found matching that query</p>
-		{/if}
-	</TabItem>
-	<TabItem title="Users">
-		{#if users && users.length > 0}
-			<UserTable {users} />
-		{:else}
-			<p>No users were found matching that query</p>
-		{/if}
-	</TabItem>
-</Tabs>
+<div in:slide out:slide>
+	<Tabs style="underline">
+		<TabItem open title="Tags">
+			{#if tags && tags.length > 0}
+				<LabelTable labels={tags} labelType="tag" />
+			{:else}
+				<p>No tags were found matching that query</p>
+			{/if}
+		</TabItem>
+		<TabItem title="Artists">
+			{#if artists && artists.length > 0}
+				<LabelTable labels={artists} labelType="artist" />
+			{:else}
+				<p>No artists were found matching that query</p>
+			{/if}
+		</TabItem>
+		<TabItem title="Posts">
+			{#if posts && posts.length > 0}
+				<PostTable {posts} />
+			{:else}
+				<p>No posts were found matching that query</p>
+			{/if}
+		</TabItem>
+		<TabItem title="Users">
+			{#if users && users.length > 0}
+				<UserTable {users} />
+			{:else}
+				<p>No users were found matching that query</p>
+			{/if}
+		</TabItem>
+	</Tabs>
+</div>

src/lib/client/components/tables/LabelTable.svelte

@@ -10,7 +10,7 @@
 	} from 'flowbite-svelte';
 
 	export let labels: IAppSearchResult['tags'] | IAppSearchResult['artists'];
-	export let labelType: 'tags' | 'artists';
+	export let labelType: 'tag' | 'artist';
 </script>
 
 <Table hoverable>
@@ -28,7 +28,7 @@
 				<TableBodyCell>{label.name}</TableBodyCell>
 				<TableBodyCell>
 					<a
-						href="/{labelType}/{label.name}"
+						href="/posts/{labelType}/{label.name}"
 						class="font-medium text-primary-600 hover:underline dark:text-primary-500"
 						>Related posts</a
 					>

src/lib/client/components/tables/PostTable.svelte

@@ -10,8 +10,6 @@
 		TableHead,
 		TableHeadCell
 	} from 'flowbite-svelte';
-	import HighlightedText from '../reusable/HighlightedText.svelte';
-	import { queryStore } from '$lib/client/stores/search';
 
 	export let posts: IAppSearchResult['posts'];
 </script>
@@ -30,11 +28,9 @@
 		{#each posts || [] as post}
 			<TableBodyRow>
 				<TableBodyCell>{post.id}</TableBodyCell>
-				<TableBodyCell tdClass="px-1 py-4 whitespace-wrap font-medium"
-					>
-					<HighlightedText fullText={post.description} query={$queryStore} />
-				</TableBodyCell
-				>
+				<TableBodyCell tdClass="px-1 py-4 whitespace-wrap font-medium">
+					{post.description}
+				</TableBodyCell>
 				<TableBodyCell>{formatDate(new Date(post.createdAt))}</TableBodyCell>
 				<TableBodyCell class="text-center">
 					<Avatar

src/routes/+layout.svelte

@@ -6,7 +6,6 @@
 	import GlobalSearchModal from '$lib/client/components/search/GlobalSearchModal.svelte';
 	import { TOAST_DEFAULT_OPTIONS } from '$lib/client/constants/toasts';
 	import {
-		destroyDocumentEventListeners,
 		getDeviceDetectionDataFromWindow,
 		registerDocumentEventListeners
 	} from '$lib/client/helpers/dom';
@@ -20,7 +19,7 @@
 	import { authenticatedUserStore } from '$lib/client/stores/users';
 	import type { IUserNotifications } from '$lib/shared/types/notifcations';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
-	import { onDestroy, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import '../app.postcss';
 
 	authenticatedUserStore.set($page.data.user || null);

src/routes/posts/[postId]/+page.svelte

@@ -8,7 +8,11 @@
 	import type { PageData } from './$types';
 
 	export let data: PageData;
-	const { post } = data;
+	let { post } = data;
+
+	$: {
+		post = data.post;
+	}
 </script>
 
 <svelte:head>