Improve filtering

src/components/Selection.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ChipGroup from './ChipGroup.svelte'
 	import Chip from './Chip.svelte'
+	import { get_comparison_score, normalize_text } from '$lib/client/utils'
 
 	type Props = {
 		title?: string
@@ -26,18 +27,17 @@
 
 	const id = $props.id()
 
-	let suggestions = $derived(
-		selected_items.length >= max ? [] : allowed_items.filter(is_suggestion),
-	)
-
-	let suggestions_element = $state<HTMLDivElement | null>(null)
-
-	function is_suggestion(allowed_item: string) {
-		return (
-			!selected_items.includes(allowed_item) &&
-			allowed_item.toLowerCase().includes(item.trim().toLowerCase())
-		)
-	}
+	let suggestions = $derived.by(() => {
+		if (selected_items.length >= max) return []
+		const q = item.trim()
+		if (!q) return []
+		return allowed_items
+			.filter((a) => !selected_items.includes(a))
+			.map((a) => ({ a, r: get_comparison_score(a, q) }))
+			.filter((x) => x.r > 0)
+			.sort((x, y) => y.r - x.r || x.a.localeCompare(y.a))
+			.map((x) => x.a)
+	})
 
 	function is_valid(item: string) {
 		return (
@@ -62,6 +62,8 @@
 		active_index = 0
 	}
 
+	let suggestions_element = $state<HTMLDivElement | null>(null)
+
 	function handle_blur(e: FocusEvent) {
 		const is_suggestion_click = suggestions_element?.contains(e.relatedTarget as Node)
 		if (!is_suggestion_click) show_suggestions = false

src/lib/client/utils.ts

@@ -17,6 +17,26 @@ export function pluralize(count: number, forms: { one: string; other: string })
 	return word.replace('{count}', String(count))
 }
 
+/**
+ * Removes accents from letters and transforms to lowercase
+ */
+export function normalize_text(txt: string) {
+	return txt
+		.toLowerCase()
+		.normalize('NFD')
+		.replace(/\p{Diacritic}/gu, '')
+}
+
+export function get_comparison_score(value: string, query: string) {
+	if (!query) return -1
+	const v = normalize_text(value)
+	const q = normalize_text(query)
+	if (v === q) return 3
+	if (v.startsWith(q)) return 2
+	if (v.includes(q)) return 1
+	return 0
+}
+
 export const resize_textarea: Attachment = (textarea) => {
 	if (!(textarea instanceof HTMLTextAreaElement)) return
 

src/routes/categories/+page.svelte

@@ -5,7 +5,7 @@
 	import MetaData from '$components/MetaData.svelte'
 	import SearchFilter from '$components/SearchFilter.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
-	import { filter_by_tag, pluralize } from '$lib/client/utils'
+	import { filter_by_tag, normalize_text, pluralize } from '$lib/client/utils'
 
 	let { data } = $props()
 
@@ -14,7 +14,7 @@
 	let searched_categories = $derived(
 		search
 			? data.categories.filter((category) =>
-					category.name.toLowerCase().includes(search.toLowerCase()),
+					normalize_text(category.name).includes(normalize_text(search)),
 				)
 			: data.categories,
 	)

src/routes/category-implications/+page.svelte

@@ -4,7 +4,7 @@
 	import MetaData from '$components/MetaData.svelte'
 	import SearchFilter from '$components/SearchFilter.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
-	import { pluralize } from '$lib/client/utils'
+	import { normalize_text, pluralize } from '$lib/client/utils'
 
 	let { data } = $props()
 
@@ -25,14 +25,10 @@
 
 	let filtered_implications = $derived(
 		search
-			? displayed_implications.filter(
-					(implication) =>
-						implication.assumptions.some((prop) =>
-							prop.toLowerCase().includes(search.toLowerCase()),
-						) ||
-						implication.conclusions.some((prop) =>
-							prop.toLowerCase().includes(search.toLowerCase()),
-						),
+			? displayed_implications.filter((implication) =>
+					[...implication.assumptions, ...implication.conclusions].some(
+						(prop) => normalize_text(prop).includes(normalize_text(search)),
+					),
 				)
 			: displayed_implications,
 	)

src/routes/category-properties/+page.svelte

@@ -2,7 +2,7 @@
 	import MetaData from '$components/MetaData.svelte'
 	import SearchFilter from '$components/SearchFilter.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
-	import { pluralize } from '$lib/client/utils'
+	import { normalize_text, pluralize } from '$lib/client/utils'
 	import { get_property_url } from '$lib/commons/property.url'
 
 	let { data } = $props()
@@ -13,10 +13,11 @@
 		search
 			? data.grouped_properties.filter(
 					(property) =>
-						property.id.toLowerCase().includes(search.toLowerCase()) ||
-						property.dual_property_id
-							?.toLowerCase()
-							.includes(search.toLowerCase()),
+						normalize_text(property.id).includes(normalize_text(search)) ||
+						(!!property.dual_property_id &&
+							normalize_text(property.dual_property_id).includes(
+								normalize_text(search),
+							)),
 				)
 			: data.grouped_properties,
 	)