From 51f2a18e8f28d6bc495f2ea6a16a6abad927191c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Tue, 12 Mar 2024 13:31:53 +0100
Subject: [PATCH 1/3] refactor(search): components

---
 .../components/search/display/Display.svelte  | 31 ++++++++
 .../{result => display/general}/Pages.svelte  |  2 -
 .../{result => display/general}/Result.svelte |  0
 .../search/display/general/Results.svelte     | 25 ++++++
 .../images/Image.svelte}                      |  0
 .../search/display/images/Images.svelte       | 52 ++++++++++++
 .../images/Preview.svelte}                    |  0
 .../images}/ShowMore.svelte                   |  2 -
 src/lib/components/search/load/Load.svelte    | 55 +++++++++----
 src/lib/components/search/load/Loads.svelte   | 64 ---------------
 .../search/load/general/LoadResult.svelte     | 14 ++++
 .../search/load/general/LoadResults.svelte    | 18 +++++
 .../search/load/{ => images}/LoadImage.svelte |  0
 .../search/load/images/LoadImages.svelte      | 24 ++++++
 .../components/search/result/Results.svelte   | 79 -------------------
 src/routes/search/+page.svelte                |  8 +-
 16 files changed, 209 insertions(+), 165 deletions(-)
 create mode 100644 src/lib/components/search/display/Display.svelte
 rename src/lib/components/search/{result => display/general}/Pages.svelte (97%)
 rename src/lib/components/search/{result => display/general}/Result.svelte (100%)
 create mode 100644 src/lib/components/search/display/general/Results.svelte
 rename src/lib/components/search/{result/ResultImage.svelte => display/images/Image.svelte} (100%)
 create mode 100644 src/lib/components/search/display/images/Images.svelte
 rename src/lib/components/search/{result/ResultImagePreview.svelte => display/images/Preview.svelte} (100%)
 rename src/lib/components/search/{result => display/images}/ShowMore.svelte (95%)
 delete mode 100644 src/lib/components/search/load/Loads.svelte
 create mode 100644 src/lib/components/search/load/general/LoadResult.svelte
 create mode 100644 src/lib/components/search/load/general/LoadResults.svelte
 rename src/lib/components/search/load/{ => images}/LoadImage.svelte (100%)
 create mode 100644 src/lib/components/search/load/images/LoadImages.svelte
 delete mode 100644 src/lib/components/search/result/Results.svelte

diff --git a/src/lib/components/search/display/Display.svelte b/src/lib/components/search/display/Display.svelte
new file mode 100644
index 00000000..721af8d7
--- /dev/null
+++ b/src/lib/components/search/display/Display.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	// components
+	import Results from '$lib/components/search/display/general/Results.svelte';
+	import Images from '$lib/components/search/display/images/Images.svelte';
+	import Error from '$lib/components/Error.svelte';
+
+	// functions
+	import { categoryFrom } from '$lib/functions/categoryFrom';
+
+	// types
+	import type { ResultType } from '$lib/types/result';
+	import { CategoryEnum } from '$lib/types/category';
+
+	// parameters
+	export let query: string;
+	export let currentPage: number;
+	export let maxPages: number;
+	export let results: ResultType[];
+
+	// variables
+	const category: string = categoryFrom(query);
+</script>
+
+<!-- todo: await deep results and offer button to switch to them -->
+{#if category === CategoryEnum.IMAGES}
+	<Images bind:query bind:maxPages bind:results />
+{:else if category !== undefined}
+	<Results bind:query bind:currentPage bind:results />
+{:else}
+	<Error statusCode={'500'} message={'Unknown category requested.'} />
+{/if}
diff --git a/src/lib/components/search/result/Pages.svelte b/src/lib/components/search/display/general/Pages.svelte
similarity index 97%
rename from src/lib/components/search/result/Pages.svelte
rename to src/lib/components/search/display/general/Pages.svelte
index bbef9291..c9adce1e 100644
--- a/src/lib/components/search/result/Pages.svelte
+++ b/src/lib/components/search/display/general/Pages.svelte
@@ -1,5 +1,3 @@
-<!-- used for general results -->
-
 <script lang="ts">
 	// parameters
 	export let query: string;
diff --git a/src/lib/components/search/result/Result.svelte b/src/lib/components/search/display/general/Result.svelte
similarity index 100%
rename from src/lib/components/search/result/Result.svelte
rename to src/lib/components/search/display/general/Result.svelte
diff --git a/src/lib/components/search/display/general/Results.svelte b/src/lib/components/search/display/general/Results.svelte
new file mode 100644
index 00000000..8cd20843
--- /dev/null
+++ b/src/lib/components/search/display/general/Results.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	// components
+	import Result from '$lib/components/search/display/general/Result.svelte';
+	import Pages from '$lib/components/search/display/general/Pages.svelte';
+
+	// types
+	import type { ResultType } from '$lib/types/result';
+
+	// parameters
+	export let query: string;
+	export let currentPage: number;
+	export let results: ResultType[];
+</script>
+
+<div class="sm:mx-auto mb-4 max-w-screen-sm">
+	<section id="results" class="mx-2 my-4 max-w-fit overflow-clip">
+		{#each results as result, i (result.URL)}
+			<Result {result} />
+			{#if i !== results.length - 1}
+				<hr class="my-2 border border-gray-200 dark:border-gray-600" />
+			{/if}
+		{/each}
+	</section>
+</div>
+<Pages bind:query bind:currentPage />
diff --git a/src/lib/components/search/result/ResultImage.svelte b/src/lib/components/search/display/images/Image.svelte
similarity index 100%
rename from src/lib/components/search/result/ResultImage.svelte
rename to src/lib/components/search/display/images/Image.svelte
diff --git a/src/lib/components/search/display/images/Images.svelte b/src/lib/components/search/display/images/Images.svelte
new file mode 100644
index 00000000..0d02b4d4
--- /dev/null
+++ b/src/lib/components/search/display/images/Images.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	// components
+	import Image from '$lib/components/search/display/images/Image.svelte';
+	import Preview from '$lib/components/search/display/images/Preview.svelte';
+	import ShowMore from '$lib/components/search/display/images/ShowMore.svelte';
+
+	// types
+	import type { ResultType } from '$lib/types/result';
+
+	// parameters
+	export let query: string;
+	export let maxPages: number;
+	export let results: ResultType[];
+
+	// variables
+	let imgResultPreview: ResultType | undefined;
+</script>
+
+<div class="w-full lg:flex px-4 py-8">
+	{#if imgResultPreview !== undefined}
+		<div id="image-preview" class="lg:hidden">
+			<Preview result={imgResultPreview} />
+		</div>
+	{/if}
+	<section
+		id="images"
+		class:tw-w-2-3={imgResultPreview !== undefined}
+		class="flex flex-wrap justify-center gap-2"
+	>
+		{#each results as result (result.URL)}
+			<div class="flex-none">
+				<Image {result} bind:imgResultPreview />
+			</div>
+		{/each}
+	</section>
+	{#if imgResultPreview !== undefined}
+		<div id="image-preview" class="hidden lg:block w-1/3">
+			<Preview result={imgResultPreview} />
+		</div>
+	{/if}
+</div>
+<ShowMore bind:query bind:maxPages />
+
+<style>
+	/* equivalent to tailwindcss lg:w-2/3 */
+	/* needed for class:<class>=<boolean> */
+	@media (min-width: 1024px) {
+		.tw-w-2-3 {
+			width: 66.666667%;
+		}
+	}
+</style>
diff --git a/src/lib/components/search/result/ResultImagePreview.svelte b/src/lib/components/search/display/images/Preview.svelte
similarity index 100%
rename from src/lib/components/search/result/ResultImagePreview.svelte
rename to src/lib/components/search/display/images/Preview.svelte
diff --git a/src/lib/components/search/result/ShowMore.svelte b/src/lib/components/search/display/images/ShowMore.svelte
similarity index 95%
rename from src/lib/components/search/result/ShowMore.svelte
rename to src/lib/components/search/display/images/ShowMore.svelte
index 92069946..bb4b1353 100644
--- a/src/lib/components/search/result/ShowMore.svelte
+++ b/src/lib/components/search/display/images/ShowMore.svelte
@@ -1,5 +1,3 @@
-<!-- used for image results -->
-
 <script lang="ts">
 	// parameters
 	export let query: string;
diff --git a/src/lib/components/search/load/Load.svelte b/src/lib/components/search/load/Load.svelte
index ecc8a9f2..9bf4a2d1 100644
--- a/src/lib/components/search/load/Load.svelte
+++ b/src/lib/components/search/load/Load.svelte
@@ -1,14 +1,41 @@
-<div class="w-full animate-pulse">
-	<div
-		class="w-max-content min-[292px]:w-[292px] h-[20px] bg-gray-800 dark:bg-gray-400 rounded-full"
-	></div>
-	<div
-		class="my-0.5 w-max-content min-[230px]:w-[218px] h-[28px] bg-hearchco-primary dark:bg-hearchco-secondary rounded-lg"
-	></div>
-	<div
-		class="my-0.5 w-max-content sm:w-[620px] h-10 text-sm bg-gray-600 dark:bg-gray-200 rounded-lg"
-	></div>
-	<div class="my-2 flex justify-end rounded-lg">
-		<div class="w-[115px] h-[15px] bg-gray-800 dark:bg-gray-400 rounded-lg"></div>
-	</div>
-</div>
+<script lang="ts">
+	// components
+	import Error from '$lib/components/Error.svelte';
+	import LoadResults from '$lib/components/search/load/general/LoadResults.svelte';
+	import LoadImages from '$lib/components/search/load/images/LoadImages.svelte';
+
+	// functions
+	import { categoryFrom } from '$lib/functions/categoryFrom';
+
+	// types
+	import { CategoryEnum } from '$lib/types/category';
+
+	// parameters
+	export let query: string;
+
+	// variables
+	const category: string = categoryFrom(query);
+</script>
+
+{#if category === CategoryEnum.IMAGES}
+	<LoadImages />
+{:else if category !== undefined}
+	<LoadResults />
+{:else}
+	<Error statusCode={'500'} message={'Unknown category requested.'} />
+{/if}
+
+<!-- this will never render -->
+{#if false}
+	<!-- needed for randomWidth to work because if classes aren't used anywhere TailwindCSS won't include them -->
+	<div class="hidden w-32"></div>
+	<div class="hidden w-36"></div>
+	<div class="hidden w-40"></div>
+	<div class="hidden w-44"></div>
+	<div class="hidden w-48"></div>
+	<div class="hidden w-52"></div>
+	<div class="hidden w-56"></div>
+	<div class="hidden w-60"></div>
+	<div class="hidden w-64"></div>
+	<div class="hidden w-72"></div>
+{/if}
diff --git a/src/lib/components/search/load/Loads.svelte b/src/lib/components/search/load/Loads.svelte
deleted file mode 100644
index 065db657..00000000
--- a/src/lib/components/search/load/Loads.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-	// components
-	import Error from '$lib/components/Error.svelte';
-	import Load from '$lib/components/search/load/Load.svelte';
-	import LoadImage from '$lib/components/search/load/LoadImage.svelte';
-
-	// functions
-	import { categoryFrom } from '$lib/functions/categoryFrom';
-
-	// types
-	import { CategoryEnum } from '$lib/types/category';
-	import { randomWidth } from '$lib/types/width';
-
-	// parameters
-	export let query: string;
-
-	// variables
-	const category: string = categoryFrom(query);
-	const numberOfResults: number = 32;
-</script>
-
-{#if category === CategoryEnum.IMAGES}
-	<div class="px-4 py-8">
-		<section id="images" class="flex flex-wrap justify-center gap-2">
-			{#each { length: numberOfResults } as _, i}
-				<div class="flex-none">
-					{#if i % 3 === 0 && i % Math.floor(2 * Math.random()) !== 0}
-						<LoadImage colored={true} width={randomWidth()} />
-					{:else}
-						<LoadImage width={randomWidth()} />
-					{/if}
-				</div>
-			{/each}
-		</section>
-	</div>
-{:else if category !== undefined}
-	<div class="sm:mx-auto mb-4 max-w-screen-sm">
-		<section id="results" class="mx-2 my-4">
-			{#each { length: numberOfResults } as _, i}
-				<Load />
-				{#if i !== numberOfResults - 1}
-					<hr class="my-2 border border-gray-200 dark:border-gray-600" />
-				{/if}
-			{/each}
-		</section>
-	</div>
-{:else}
-	<Error statusCode={'500'} message={'Unknown category requested.'} />
-{/if}
-
-<!-- this will never render -->
-{#if false}
-	<!-- needed for randomWidth to work because if classes aren't used anywhere TailwindCSS won't include them -->
-	<div class="hidden w-32"></div>
-	<div class="hidden w-36"></div>
-	<div class="hidden w-40"></div>
-	<div class="hidden w-44"></div>
-	<div class="hidden w-48"></div>
-	<div class="hidden w-52"></div>
-	<div class="hidden w-56"></div>
-	<div class="hidden w-60"></div>
-	<div class="hidden w-64"></div>
-	<div class="hidden w-72"></div>
-{/if}
diff --git a/src/lib/components/search/load/general/LoadResult.svelte b/src/lib/components/search/load/general/LoadResult.svelte
new file mode 100644
index 00000000..ecc8a9f2
--- /dev/null
+++ b/src/lib/components/search/load/general/LoadResult.svelte
@@ -0,0 +1,14 @@
+<div class="w-full animate-pulse">
+	<div
+		class="w-max-content min-[292px]:w-[292px] h-[20px] bg-gray-800 dark:bg-gray-400 rounded-full"
+	></div>
+	<div
+		class="my-0.5 w-max-content min-[230px]:w-[218px] h-[28px] bg-hearchco-primary dark:bg-hearchco-secondary rounded-lg"
+	></div>
+	<div
+		class="my-0.5 w-max-content sm:w-[620px] h-10 text-sm bg-gray-600 dark:bg-gray-200 rounded-lg"
+	></div>
+	<div class="my-2 flex justify-end rounded-lg">
+		<div class="w-[115px] h-[15px] bg-gray-800 dark:bg-gray-400 rounded-lg"></div>
+	</div>
+</div>
diff --git a/src/lib/components/search/load/general/LoadResults.svelte b/src/lib/components/search/load/general/LoadResults.svelte
new file mode 100644
index 00000000..5657779d
--- /dev/null
+++ b/src/lib/components/search/load/general/LoadResults.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	// components
+	import LoadResult from '$lib/components/search/load/general/LoadResult.svelte';
+
+	// variables
+	const numberOfResults: number = 32;
+</script>
+
+<div class="sm:mx-auto mb-4 max-w-screen-sm">
+	<section id="results" class="mx-2 my-4">
+		{#each { length: numberOfResults } as _, i}
+			<LoadResult />
+			{#if i !== numberOfResults - 1}
+				<hr class="my-2 border border-gray-200 dark:border-gray-600" />
+			{/if}
+		{/each}
+	</section>
+</div>
diff --git a/src/lib/components/search/load/LoadImage.svelte b/src/lib/components/search/load/images/LoadImage.svelte
similarity index 100%
rename from src/lib/components/search/load/LoadImage.svelte
rename to src/lib/components/search/load/images/LoadImage.svelte
diff --git a/src/lib/components/search/load/images/LoadImages.svelte b/src/lib/components/search/load/images/LoadImages.svelte
new file mode 100644
index 00000000..c8e2f8e2
--- /dev/null
+++ b/src/lib/components/search/load/images/LoadImages.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	// components
+	import LoadImage from '$lib/components/search/load/images/LoadImage.svelte';
+
+	// types
+	import { randomWidth } from '$lib/types/width';
+
+	// variables
+	const numberOfResults: number = 32;
+</script>
+
+<div class="px-4 py-8">
+	<section id="images" class="flex flex-wrap justify-center gap-2">
+		{#each { length: numberOfResults } as _, i}
+			<div class="flex-none">
+				{#if i % 3 === 0 && i % Math.floor(2 * Math.random()) !== 0}
+					<LoadImage colored={true} width={randomWidth()} />
+				{:else}
+					<LoadImage width={randomWidth()} />
+				{/if}
+			</div>
+		{/each}
+	</section>
+</div>
diff --git a/src/lib/components/search/result/Results.svelte b/src/lib/components/search/result/Results.svelte
deleted file mode 100644
index 0bc85cbe..00000000
--- a/src/lib/components/search/result/Results.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script lang="ts">
-	// components
-	import Result from '$lib/components/search/result/Result.svelte';
-	import ResultImage from '$lib/components/search/result/ResultImage.svelte';
-	import ResultImagePreview from '$lib/components/search/result/ResultImagePreview.svelte';
-	import ShowMore from '$lib/components/search/result/ShowMore.svelte';
-	import Pages from '$lib/components/search/result/Pages.svelte';
-	import Error from '$lib/components/Error.svelte';
-
-	// functions
-	import { categoryFrom } from '$lib/functions/categoryFrom';
-
-	// types
-	import type { ResultType } from '$lib/types/result';
-	import { CategoryEnum } from '$lib/types/category';
-
-	// parameters
-	export let query: string;
-	export let currentPage: number;
-	export let maxPages: number;
-	export let results: ResultType[];
-
-	let imgResultPreview: ResultType | undefined;
-
-	// variables
-	const category: string = categoryFrom(query);
-</script>
-
-<!-- todo: await deep results and offer button to switch to them -->
-{#if category === CategoryEnum.IMAGES}
-	<div class="w-full lg:flex px-4 py-8">
-		{#if imgResultPreview !== undefined}
-			<div id="image-preview" class="lg:hidden">
-				<ResultImagePreview result={imgResultPreview} />
-			</div>
-		{/if}
-		<section
-			id="images"
-			class:tw-w-2-3={imgResultPreview !== undefined}
-			class="flex flex-wrap justify-center gap-2"
-		>
-			{#each results as result (result.URL)}
-				<div class="flex-none">
-					<ResultImage {result} bind:imgResultPreview />
-				</div>
-			{/each}
-		</section>
-		{#if imgResultPreview !== undefined}
-			<div id="image-preview" class="hidden lg:block w-1/3">
-				<ResultImagePreview result={imgResultPreview} />
-			</div>
-		{/if}
-	</div>
-	<ShowMore bind:query bind:maxPages />
-{:else if category !== undefined}
-	<div class="sm:mx-auto mb-4 max-w-screen-sm">
-		<section id="results" class="mx-2 my-4 max-w-fit overflow-clip">
-			{#each results as result, i (result.URL)}
-				<Result {result} />
-				{#if i !== results.length - 1}
-					<hr class="my-2 border border-gray-200 dark:border-gray-600" />
-				{/if}
-			{/each}
-		</section>
-	</div>
-	<Pages bind:query bind:currentPage />
-{:else}
-	<Error statusCode={'500'} message={'Unknown category requested.'} />
-{/if}
-
-<style>
-	/* equivalent to tailwindcss lg:w-2/3 */
-	/* needed for class:<class>=<boolean> */
-	@media (min-width: 1024px) {
-		.tw-w-2-3 {
-			width: 66.666667%;
-		}
-	}
-</style>
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index e90932c8..f841ad94 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	// components
 	import Header from '$lib/components/Header.svelte';
-	import Loads from '$lib/components/search/load/Loads.svelte';
-	import Results from '$lib/components/search/result/Results.svelte';
+	import Load from '$lib/components/search/load/Load.svelte';
+	import Display from '$lib/components/search/display/Display.svelte';
 	import Error from '$lib/components/Error.svelte';
 
 	// types
@@ -29,9 +29,9 @@
 <Header bind:query />
 
 {#await data.streamed.results}
-	<Loads {query} />
+	<Load {query} />
 {:then results}
-	<Results bind:query bind:currentPage bind:maxPages {results} />
+	<Display bind:query bind:currentPage bind:maxPages {results} />
 {:catch err}
 	<Error statusCode={'500'} message={'Hearchco API failed.'} {err} />
 {/await}

From 08aac0251789e32dec7a9625b1cf0e284aca95b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Tue, 12 Mar 2024 17:39:26 +0100
Subject: [PATCH 2/3] fix(result): max 400 chars for description

---
 src/lib/components/search/display/general/Result.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/search/display/general/Result.svelte b/src/lib/components/search/display/general/Result.svelte
index 3084ddae..70ced87c 100644
--- a/src/lib/components/search/display/general/Result.svelte
+++ b/src/lib/components/search/display/general/Result.svelte
@@ -4,6 +4,10 @@
 
 	// parameters
 	export let result: ResultType;
+
+	// variables
+	const shortDesc: string =
+		result.Description.length > 400 ? result.Description.slice(0, 397) + '...' : result.Description;
 </script>
 
 <article id="result-{result.Rank}">
@@ -20,7 +24,7 @@
 		id="description-{result.Rank}"
 		class="my-1 text-justify text-sm text-gray-600 dark:text-gray-200"
 	>
-		{result.Description}
+		{shortDesc}
 	</p>
 	<div id="engines-{result.Rank}" class="my-2 text-right text-xs text-gray-800 dark:text-gray-400">
 		{#each result.EngineRanks as engineRank (engineRank.SearchEngine)}

From 6a7db017d9ade2fe069285c4cbc6cd189d105a56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Tue, 12 Mar 2024 18:00:49 +0100
Subject: [PATCH 3/3] fix(result): css line clamp instead of max chars

---
 src/lib/components/search/display/general/Result.svelte | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/search/display/general/Result.svelte b/src/lib/components/search/display/general/Result.svelte
index 70ced87c..46f1cd0a 100644
--- a/src/lib/components/search/display/general/Result.svelte
+++ b/src/lib/components/search/display/general/Result.svelte
@@ -4,10 +4,6 @@
 
 	// parameters
 	export let result: ResultType;
-
-	// variables
-	const shortDesc: string =
-		result.Description.length > 400 ? result.Description.slice(0, 397) + '...' : result.Description;
 </script>
 
 <article id="result-{result.Rank}">
@@ -22,9 +18,9 @@
 	</h1>
 	<p
 		id="description-{result.Rank}"
-		class="my-1 text-justify text-sm text-gray-600 dark:text-gray-200"
+		class="my-1 text-justify text-sm text-gray-600 dark:text-gray-200 line-clamp-6 hover:line-clamp-none"
 	>
-		{shortDesc}
+		{result.Description}
 	</p>
 	<div id="engines-{result.Rank}" class="my-2 text-right text-xs text-gray-800 dark:text-gray-400">
 		{#each result.EngineRanks as engineRank (engineRank.SearchEngine)}