Merge branch 'master' into ian/gb-112-spacing-in-search-results

src/lib/components/CodeViewer/CodeViewer.svelte

@@ -94,7 +94,7 @@
 
 	type RenderedRow = (typeof rows)[0];
 
-	const applyPadding = (rows: RenderedRow[]): RenderedRow[] => {
+	const padHighlighted = (rows: RenderedRow[]): RenderedRow[] => {
 		const chunks: (RenderedRow[] | RenderedRow)[] = [];
 
 		const mergeChunk = (rows: RenderedRow[], isFirst: boolean, isLast: boolean): RenderedRow[] => {
@@ -171,7 +171,7 @@
 </script>
 
 <div class="diff-listing w-full select-text whitespace-pre font-mono">
-	{#each applyPadding(rows) as row}
+	{#each highlight.length > 0 ? padHighlighted(rows) : rows as row}
 		{@const baseNumber =
 			row.type === RowType.Equal || row.type === RowType.Deletion
 				? String(row.originalLineNumber)

src/lib/components/icons/IconChevronLeft.svelte

@@ -0,0 +1,15 @@
+<svg
+	{...$$restProps}
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	stroke-width="2"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path d="M15 6l-6 6l6 6" />
+</svg>

src/lib/components/icons/IconChevronRight.svelte

@@ -0,0 +1,15 @@
+<svg
+	{...$$restProps}
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	stroke-width="2"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path d="M9 6l6 6l-6 6" />
+</svg>

src/lib/components/icons/index.ts

@@ -14,3 +14,5 @@ export { default as IconSquareRoundedFilled } from './IconSquareRoundedFilled.sv
 export { default as IconMapPinFilled } from './IconMapPinFilled.svelte';
 export { default as IconCircleFilled } from './IconCircleFilled.svelte';
 export { default as IconCircleCancel } from './IconCircleCancel.svelte';
+export { default as IconChevronLeft } from './IconChevronLeft.svelte';
+export { default as IconChevronRight } from './IconChevronRight.svelte';

src/routes/projects/[projectId]/search/+page.svelte

@@ -1,21 +1,27 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import { search, type SearchResult } from '$lib';
+	import { IconChevronLeft, IconChevronRight } from '$lib/components/icons';
 	import { listFiles } from '$lib/sessions';
 	import { asyncDerived } from '@square/svelte-store';
+	import { IconRotateClockwise } from '$lib/components/icons';
 	import { formatDistanceToNow } from 'date-fns';
 	import { list as listDeltas } from '$lib/deltas';
 	import { CodeViewer } from '$lib/components';
 	import { page } from '$app/stores';
 	import { derived } from 'svelte/store';
+	import { goto } from '$app/navigation';
 
 	export let data: PageData;
 	const { project } = data;
 
-	const limit = 50;
+	const limit = 10;
 	const query = derived(page, (page) => page.url.searchParams.get('q'));
 	const offset = derived(page, (page) => parseInt(page.url.searchParams.get('offset') ?? '0'));
 
+	const openNextPage = () => goto(`?q=${$query}&offset=${$offset + limit}`);
+	const openPrevPage = () => goto(`?q=${$query}&offset=${$offset - limit}`);
+
 	const fetchResultData = async ({
 		sessionId,
 		projectId,
@@ -40,11 +46,12 @@
 	const { store: searchResults, state: searchState } = asyncDerived(
 		[query, project, offset],
 		async ([query, project, offset]) => {
-			if (!query || !project) return { page: [], total: 0, haveMore: false };
+			if (!query || !project) return { page: [], total: 0, haveNext: false, havePrev: false };
 			const results = await search({ projectId: project.id, query, limit, offset });
 			return {
 				page: await Promise.all(results.page.map(fetchResultData)),
-				haveMore: offset + limit < results.total,
+				haveNext: offset + limit < results.total,
+				havePrev: offset > 0,
 				total: results.total
 			};
 		},
@@ -52,17 +59,22 @@
 	);
 </script>
 
-<figure class="search-results flex h-full flex-col gap-2">
+<figure id="search-results" class="flex h-full flex-col gap-10 p-14">
 	{#if $searchState?.isLoading || $searchState?.isReloading}
-		<figcaption class="m-auto">
-			<p class="mb-2 text-xl text-[#D4D4D8]">Looking for "{$query}"...</p>
+		<figcaption>
+			<p class="mb-2 text-xl text-[#D4D4D8]">Searching for "{$query}"...</p>
 		</figcaption>
+
+		<div class="mx-auto">
+			<IconRotateClockwise class="h-20 w-20 animate-spin" />
+		</div>
 	{:else if $searchState?.isError}
-		<figcaption class="m-auto">
+		<figcaption>
 			<p class="mb-2 text-xl text-[#D4D4D8]">Error searching for "{$query}"</p>
 		</figcaption>
 	{:else if $searchState?.isLoaded}
 		<figcaption class="mx-14 mb-10 mt-14">
+
 			{#if $searchResults.total > 0}
 				<p class="mb-2 text-xl text-[#D4D4D8]">Results for "{$query}"</p>
 				<p class="text-lg text-[#717179]">{$searchResults.total} change instances</p>
@@ -71,10 +83,10 @@
 			{/if}
 		</figcaption>
 
-		<ul class="px-14 flex-auto overflow-auto">
+		<ul class="-mr-14 flex flex-auto flex-col gap-6 overflow-auto">
 			{#each $searchResults.page as { doc, deltas, filepath, highlight }}
 				{@const timestamp = deltas[deltas.length - 1].timestampMs}
-				<li class="mt-6">
+				<li class="mr-14">
 					<div class="flex flex-col gap-2">
 						<p class="flex justify-between text-lg">
 							<span>{filepath}</span>
@@ -89,5 +101,24 @@
 				</li>
 			{/each}
 		</ul>
+
+		<nav class="mx-auto flex rounded-md border border-zinc-700 text-zinc-400">
+			<button
+				on:click={openPrevPage}
+				disabled={!$searchResults.havePrev}
+				class:text-zinc-50={$searchResults.havePrev}
+				class="h-9 w-9"
+			>
+				<IconChevronLeft class="ml-1 h-5 w-6" />
+			</button>
+			<button
+				on:click={openNextPage}
+				disabled={!$searchResults.haveNext}
+				class:text-zinc-50={$searchResults.haveNext}
+				class="h-9 w-9 border-l border-zinc-700"
+			>
+				<IconChevronRight class="ml-1 h-5 w-6" />
+			</button>
+		</nav>
 	{/if}
 </figure>