fix: sort by exact match first

This commit is contained in:
JovannMC 2025-05-28 22:36:35 +03:00
parent dee3a0bf3b
commit 0ef38fa9db
No known key found for this signature in database
1 changed files with 18 additions and 6 deletions

View File

@ -92,6 +92,8 @@
}; };
const filteredData = $derived.by(() => { const filteredData = $derived.by(() => {
const normalize = (str: string) => str.replace(/^\./, "").toLowerCase();
// if no query, return formats for current category // if no query, return formats for current category
if (!searchQuery) { if (!searchQuery) {
return { return {
@ -103,13 +105,13 @@
: [], : [],
}; };
} }
const searchLower = searchQuery.toLowerCase(); const searchLower = normalize(searchQuery);
// find all categories that have formats matching the search query // find all categories that have formats matching the search query
const matchingCategories = availableCategories.filter((cat) => const matchingCategories = availableCategories.filter((cat) =>
categories[cat].formats.some( categories[cat].formats.some(
(format) => (format) =>
format.toLowerCase().includes(searchLower) && normalize(format).includes(searchLower) &&
shouldShowFormat(format, cat), shouldShowFormat(format, cat),
), ),
); );
@ -125,7 +127,7 @@
return categories[cat].formats return categories[cat].formats
.filter( .filter(
(format) => (format) =>
format.toLowerCase().includes(searchLower) && normalize(format).includes(searchLower) &&
shouldShowFormat(format, cat), shouldShowFormat(format, cat),
) )
.map((format) => ({ format, category: cat })); .map((format) => ({ format, category: cat }));
@ -143,13 +145,23 @@
} }
// return formats only from the current category that match the search // return formats only from the current category that match the search
const filteredFormats = currentCategory let filteredFormats = currentCategory
? categories[currentCategory].formats.filter( ? categories[currentCategory].formats.filter(
(format) => (format) =>
format.toLowerCase().includes(searchLower) && normalize(format).includes(searchLower) &&
shouldShowFormat(format, currentCategory || ""), shouldShowFormat(format, currentCategory || ""),
) )
: []; : [];
// sorting exact match first, then others
filteredFormats = filteredFormats.sort((a, b) => {
const aExact = normalize(a) === searchLower;
const bExact = normalize(b) === searchLower;
if (aExact && !bExact) return -1;
if (!aExact && bExact) return 1;
return 0;
});
return { return {
categories: categories:
matchingCategories.length > 0 matchingCategories.length > 0
@ -274,7 +286,7 @@
bind:this={dropdown} bind:this={dropdown}
> >
<button <button
class="relative flex items-center justify-center w-full font-display px-3 py-3.5 bg-button rounded-full overflow-hidden cursor-pointer focus:!outline-none class="relative flex items-center justify-center w-full font-display px-3 py-3.5 bg-button rounded-full overflow-hidden cursor-pointer focus:!outline-none
{disabled ? 'opacity-50 cursor-auto' : 'cursor-pointer'}" {disabled ? 'opacity-50 cursor-auto' : 'cursor-pointer'}"
onclick={() => clickDropdown()} onclick={() => clickDropdown()}
onmouseenter={() => (hover = true)} onmouseenter={() => (hover = true)}