feat: add clear to search history

greymass · Nov 5, 2024 · 813f32d · 813f32d
1 parent 4a6c2c1
commit 813f32d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 38 deletions.
diff --git a/src/lib/components/input/search.svelte b/src/lib/components/input/search.svelte
@@ -7,7 +7,7 @@
 	import { preventDefault } from '$lib/utils';
 	import { goto } from '$app/navigation';
 	import { fade, scale } from 'svelte/transition';
-	import { ArrowLeftRight, Box, Key, SearchIcon, UserSearch } from 'lucide-svelte';
+	import { ArrowLeftRight, Box, Key, SearchIcon, UserSearch, X } from 'lucide-svelte';
 	import { SearchHistory } from '$lib/state/search.svelte';
 	import Button from '$lib/components/button/button.svelte';
 	import { Stack } from '$lib/components/layout';
@@ -31,7 +31,7 @@
 	let selectedIndex: number | undefined = $state();
 
 	const searchHistory = new SearchHistory();
-	const history = searchHistory.get();
+	const history = $derived(searchHistory.get());
 
 	const searchType = $derived.by(() => {
 		/* eslint-disable @typescript-eslint/no-unused-vars */
@@ -126,7 +126,7 @@
 			}
 
 			if (selectedIndex !== undefined && event.key === 'Enter') {
-				goTosearchHistory(history[selectedIndex].result);
+				goToSearchHistory(history[selectedIndex].result);
 			}
 		}
 	}
@@ -144,7 +144,7 @@
 		searchValue = '';
 	}
 
-	function goTosearchHistory(url: string) {
+	function goToSearchHistory(url: string) {
 		goto(url);
 		closeSearch();
 	}
@@ -214,49 +214,60 @@
 
 				{#if history.length}
 					<div class="px-2">
-						<div class="table-styles grid grid-cols-2">
+						<div class="table-styles grid grid-cols-3">
 							<div class="table-head-styles col-span-full grid grid-cols-subgrid">
 								<span class="pl-2">Recent</span>
 								<span>Type</span>
+								<button class="justify-self-end" onclick={() => searchHistory.clear()}>Clear</button
+								>
 							</div>
 
 							{#each history as item, index}
-								<a
+								<div
 									class="table-row-background col-span-full grid grid-cols-subgrid items-center
 									justify-items-start border-y border-neutral-300/10
 									border-transparent border-b-transparent
 									focus:border-skyBlue-500
 									focus:outline-none"
-									href={item.result}
-									onclick={closeSearch}
 									data-active={index === selectedIndex}
 								>
-									<div
-										class="table-cell-styles ml-2 flex items-center gap-2 font-mono tabular-nums"
+									<a
+										class="col-span-2 grid grid-cols-subgrid items-center"
+										href={item.result}
+										onclick={closeSearch}
 									>
-										{#if item.searchType === 'account'}
-											<UserSearch class="size-4" />
-											<span>{item.searchValue}</span>
-										{:else if item.searchType === 'block'}
-											<Box class="size-4" />
-											<span>{item.searchValue}</span>
-										{:else if item.searchType === 'key'}
-											<Key class="size-4" />
-											<span class="max-w-[12ch] truncate">
-												{item.searchValue}
-											</span>
-										{:else if item.searchType === 'transaction'}
-											<ArrowLeftRight class="size-4" />
-											<span class="max-w-[13ch] truncate">
-												{truncateCenter(item.searchValue)}
-											</span>
-										{/if}
-									</div>
+										<div
+											class="table-cell-styles ml-2 flex items-center gap-2 font-mono tabular-nums"
+										>
+											{#if item.searchType === 'account'}
+												<UserSearch class="size-4" />
+												<span>{item.searchValue}</span>
+											{:else if item.searchType === 'block'}
+												<Box class="size-4" />
+												<span>{item.searchValue}</span>
+											{:else if item.searchType === 'key'}
+												<Key class="size-4" />
+												<span class="max-w-[12ch] truncate">
+													{item.searchValue}
+												</span>
+											{:else if item.searchType === 'transaction'}
+												<ArrowLeftRight class="size-4" />
+												<span class="max-w-[13ch] truncate">
+													{truncateCenter(item.searchValue)}
+												</span>
+											{/if}
+										</div>
 
-									<span class="align-center text-base font-medium capitalize text-mineShaft-200/60"
-										>{item.searchType}</span
-									>
-								</a>
+										<span
+											class="align-center text-base font-medium capitalize text-mineShaft-200/60"
+											>{item.searchType}</span
+										>
+									</a>
+
+									<button class="justify-self-end" onclick={() => searchHistory.remove(index)}>
+										<X class="align-center justify-self-end text-mineShaft-200/60" />
+									</button>
+								</div>
 							{/each}
 						</div>
 					</div>

diff --git a/src/lib/state/search.svelte.ts b/src/lib/state/search.svelte.ts
@@ -6,10 +6,9 @@ type SearchResult = {
 	searchValue: string;
 };
 
-const maxHistoryLength = 10;
-
 export class SearchHistory {
-	history = $state<SearchResult[]>([]) as SearchResult[];
+	private history = $state<SearchResult[]>([]) as SearchResult[];
+	maxHistoryLength = 10;
 	storageKey = 'searchHistory';
 
 	constructor() {
@@ -35,13 +34,16 @@ export class SearchHistory {
 
 	add(s: SearchResult) {
 		this.history.unshift(s);
-		if (history.length > maxHistoryLength) {
-			this.history.splice(maxHistoryLength);
+		if (history.length > this.maxHistoryLength) {
+			this.history.splice(this.maxHistoryLength);
 		}
 		this.saveHistory();
 	}
 
-	// remove() {}
+	remove(i: number) {
+		this.history.splice(i, 1);
+		this.saveHistory();
+	}
 
 	get(): SearchResult[] {
 		return this.history;