Improved search suggestions & history

materialious/src/lib/components/Search.svelte

@@ -151,31 +151,31 @@
 				</div>
 				{#if $interfaceSearchSuggestionsStore}
 					{#each suggestionsForSearch as suggestion, index (index)}
-						<li>
-							<a
+						<li class="no-padding">
+							<button
 								onclick={() => {
 									search = suggestion;
 									onSubmit();
 								}}
+								class="transparent suggestion"
 								class:selected={index === selectedSuggestionIndex}
-								href={resolve(`/search/[search]`, { search: encodeURIComponent(suggestion) })}
 							>
 								<div>{suggestion}</div>
-							</a>
+							</button>
 						</li>
 					{/each}
 				{/if}
 				{#if !suggestionsForSearch.length && $interfaceSearchHistoryEnabled}
 					{#each $searchHistoryStore as history (history)}
-						<li>
-							<a
+						<li class="no-padding">
+							<button
 								onclick={() => {
 									search = history;
 								}}
-								href={resolve(`/search/[search]`, { search: encodeURIComponent(history) })}
+								class="transparent suggestion"
 							>
 								<div>{history}</div>
-							</a>
+							</button>
 						</li>
 					{/each}
 				{/if}
@@ -192,6 +192,17 @@
 	.selected {
 		background-color: var(--surface-variant);
 	}
+
+	button.suggestion {
+		width: 100%;
+		box-sizing: content-box;
+		justify-content: flex-start;
+	}
+
+	li:hover {
+		background-color: transparent;
+	}
+
 	@media screen and (max-width: 1140px) {
 		.search {
 			width: 100%;

materialious/src/lib/search.ts

@@ -33,11 +33,18 @@ export function goToSearch(searchValue: string) {
 
 	goto(resolve(`/search/[search]`, { search: encodeURIComponent(searchTrimmed) }));
 
-	if (get(interfaceSearchHistoryEnabled) && !get(searchHistoryStore).includes(searchTrimmed)) {
+	if (get(interfaceSearchHistoryEnabled)) {
 		const pastHistory = get(searchHistoryStore);
-		if (pastHistory.length > 15) {
+
+		const index = pastHistory.indexOf(searchTrimmed);
+		if (index !== -1) {
+			pastHistory.splice(index, 1);
+		}
+
+		if (pastHistory.length >= 15) {
 			pastHistory.pop();
 		}
+
 		searchHistoryStore.set([searchTrimmed, ...pastHistory]);
 	}
 }