From 8f4b899effcca7316a760b16773ebdc781215591 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 31 Aug 2022 12:18:39 +1000
Subject: Improve search suggestions

Don't show multiple suggestions for the same node
Prioritise common-names
Place suggestions from prefix-search before substring-search
Add coloring to search-string matched-part and canonical-name-part
---
 src/components/SearchModal.vue | 15 ++++++++-------
 src/lib.ts                     |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 5d6345e..01db1ab 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -15,8 +15,9 @@
 				@click="resolveSearch(sugg.canonicalName || sugg.name)">
 				<div class="grow overflow-hidden whitespace-nowrap text-ellipsis">
 					<span>{{suggDisplayStrings[idx][0]}}</span>
-					<span class="font-bold">{{suggDisplayStrings[idx][1]}}</span>
+					<span class="font-bold text-lime-600">{{suggDisplayStrings[idx][1]}}</span>
 					<span>{{suggDisplayStrings[idx][2]}}</span>
+					<span class="text-stone-500">{{suggDisplayStrings[idx][3]}}</span>
 				</div>
 				<info-icon class="hover:cursor-pointer my-auto w-5 h-5"
 					@click.stop="onInfoIconClick(sugg.canonicalName || sugg.name)"/>
@@ -90,22 +91,22 @@ export default defineComponent({
 				color: this.uiOpts.textColor,
 			};
 		},
-		suggDisplayStrings(): [string, string, string][] {
-			let result: [string, string, string][] = [];
+		suggDisplayStrings(): [string, string, string, string][] {
+			let result: [string, string, string, string][] = [];
 			let input = this.suggsInput.toLowerCase();
 			// For each SearchSugg
 			for (let sugg of this.searchSuggs){
 				let idx = sugg.name.indexOf(input);
 				// Split suggestion text into parts before/within/after an input match
-				let strings: [string, string, string];
+				let strings: [string, string, string, string];
 				if (idx != -1){
-					strings = [sugg.name.substring(0, idx), input, sugg.name.substring(idx + input.length)];
+					strings = [sugg.name.substring(0, idx), input, sugg.name.substring(idx + input.length), ''];
 				} else {
-					strings = [input, '', ''];
+					strings = [input, '', '', ''];
 				}
 				// Indicate any distinct canonical-name
 				if (sugg.canonicalName != null){
-					strings[2] += ` (aka ${sugg.canonicalName})`;
+					strings[3] = ` (aka ${sugg.canonicalName})`;
 				}
 				//
 				result.push(strings);
diff --git a/src/lib.ts b/src/lib.ts
index 821a2e1..bee7d6b 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -140,7 +140,7 @@ export function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions {
 	let bgColor = '#292524',
 		bgColorLight = '#44403c', bgColorDark = '#1c1917',
 		bgColorLight2 = '#57534e', bgColorDark2 = '#0e0c0b',
-		bgColorAlt = '#f5f5f4', bgColorAltDark = '#a8a29e';
+		bgColorAlt = '#f5f5f4', bgColorAltDark = '#d6d3d1';
 	let altColor = '#a3e623', altColorDark = '#65a30d';
 	let accentColor = '#f59e0b';
 	let scrollGap = getScrollBarWidth();
-- 
cgit v1.2.3