Add leading persistent row support

libris · Jan 17, 2025 · d735c49 · d735c49
1 parent 209ea16
commit d735c49
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 9 deletions.
diff --git a/packages/supersearch/src/lib/components/SuperSearch.svelte b/packages/supersearch/src/lib/components/SuperSearch.svelte
@@ -38,6 +38,7 @@
 		resultItem?: Snippet<
 			[ResultItem, (cellIndex: number) => string, (cellIndex: number) => boolean, number]
 		>;
+		leadingPersistentRow?: Snippet<[(cellIndex: number) => string, (cellIndex: number) => boolean]>;
 		defaultRow?: number;
 		toggleWithKeyboardShortcut?: boolean;
 		debouncedWait?: number;
@@ -61,6 +62,7 @@
 		closeAction: closeActionSnippet,
 		closeActionMediaQueryString = 'max-width: 640px', // defines when the back/close action should be visible (only shown when expanded)
 		resultItem = fallbackResultItem,
+		leadingPersistentRow,
 		toggleWithKeyboardShortcut = false,
 		defaultRow = 0,
 		debouncedWait = 300
@@ -450,13 +452,22 @@
 			{@render submitAction()}
 		</div>
 		<nav class="supersearch-suggestions">
-			{#if search.data}
-				{@const resultItems =
-					(Array.isArray(search.paginatedData) &&
-						search.paginatedData.map((page) => page.items).flat()) ||
-					search.data?.items}
-				<div id={`${id}-grid`} role="grid">
-					{#each resultItems as item, rowIndex}
+			<div id={`${id}-grid`} role="grid">
+				{#if leadingPersistentRow}
+					<div role="row" class:focused={activeRowIndex === 0}>
+						{@render leadingPersistentRow(
+							(colIndex: number) => `${id}-result-item-0x${colIndex}`,
+							(colIndex: number) => activeRowIndex === 0 && colIndex === activeColIndex
+						)}
+					</div>
+				{/if}
+				{#if search.data}
+					{@const resultItems =
+						(Array.isArray(search.paginatedData) &&
+							search.paginatedData.map((page) => page.items).flat()) ||
+						search.data?.items}
+					{#each resultItems as item, index}
+						{@const rowIndex = index + (leadingPersistentRow ? 1 : 0)}
 						<div role="row" class:focused={activeRowIndex === rowIndex}>
 							{@render resultItem?.(
 								item,
@@ -466,8 +477,8 @@
 							)}
 						</div>
 					{/each}
-				</div>
-			{/if}
+				{/if}
+			</div>
 			{#if search.isLoading}
 				Loading...
 			{:else if search.hasMorePaginatedData}

diff --git a/packages/supersearch/src/routes/+page.svelte b/packages/supersearch/src/routes/+page.svelte
@@ -68,6 +68,16 @@
 					<img src={clearIconSvg} width={16} height={16} alt="" />
 				</button>
 			{/snippet}
+			{#snippet leadingPersistentRow(getCellId, isFocusedCell)}
+				<div class="persistent-item" data-testid="persistent-item">
+					<a
+						href={`/test1#${getCellId(0)}`}
+						role="gridcell"
+						id={getCellId(0)}
+						class:focused-cell={isFocusedCell(0)}>Show all results</a
+					>
+				</div>
+			{/snippet}
 			{#snippet resultItem(item, getCellId, isFocusedCell, rowIndex)}
 				<div class="result-item" data-test-id="result-item">
 					<div role="gridcell">
@@ -191,6 +201,19 @@
 		padding-left: 44px;
 	}
 
+	.persistent-item {
+		display: flex;
+		min-width: 480px;
+
+		& a {
+			display: flex;
+			flex: 1;
+			align-items: center;
+			min-height: 44px;
+			text-align: left;
+		}
+	}
+
 	.result-item {
 		display: flex;
 		align-items: flex-start;