feat: frontend autocomplete is diacritics/ligatures insensitive (#6169)

Co-authored-by: Pierre <pierre@debian.zabi.ovh>
Co-authored-by: Michael Genson <genson.michael@gmail.com>
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/composables/use-utils.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, test } from "vitest";
+import { normalize, normalizeFilter } from "./use-utils";
+
+describe("test normalize", () => {
+  test("base case", () => {
+    expect(normalize("banana")).not.toEqual(normalize("Potatoes"));
+  });
+  test("diacritics", () => {
+    expect(normalize("Rátàtôuile")).toEqual("ratatouile");
+  });
+  test("ligatures", () => {
+    expect(normalize("IJ")).toEqual("ij");
+    expect(normalize("æ")).toEqual("ae");
+    expect(normalize("œ")).toEqual("oe");
+    expect(normalize("ff")).toEqual("ff");
+    expect(normalize("fi")).toEqual("fi");
+    expect(normalize("st")).toEqual("st");
+  });
+});
+
+describe("test normalize filter", () => {
+  test("base case", () => {
+    const patternA = "Escargots persillés";
+    const patternB = "persillés";
+
+    expect(normalizeFilter(patternA, patternB)).toBeTruthy();
+    expect(normalizeFilter(patternB, patternA)).toBeFalsy();
+  });
+  test("normalize", () => {
+    const value = "Cœur de bœuf";
+    const query = "coeur";
+    expect(normalizeFilter(value, query)).toBeTruthy();
+  });
+});

frontend/composables/use-utils.ts

@@ -1,4 +1,5 @@
 import { useDark, useToggle } from "@vueuse/core";
+import type { FilterFunction } from "vuetify";
 
 export const useToggleDarkMode = () => {
   const isDark = useDark();
@@ -18,6 +19,38 @@ export const titleCase = function (str: string) {
     .join(" ");
 };
 
+const replaceAllBuilder = (map: Map<string, string>): ((str: string) => string) => {
+  const re = new RegExp(Array.from(map.keys()).join("|"), "gi");
+  return str => str.replace(re, matched => map.get(matched)!);
+};
+
+const normalizeLigatures = replaceAllBuilder(new Map([
+  ["œ", "oe"],
+  ["æ", "ae"],
+  ["ij", "ij"],
+  ["ff", "ff"],
+  ["fi", "fi"],
+  ["fl", "fl"],
+  ["st", "st"],
+]));
+
+export const normalize = (str: string) => {
+  if (!str) {
+    return "";
+  }
+
+  let normalized = str.normalize("NFKD").toLowerCase();
+  normalized = normalized.replace(/\p{Diacritic}/gu, "");
+  normalized = normalizeLigatures(normalized);
+  return normalized;
+};
+
+export const normalizeFilter: FilterFunction = (value: string, query: string) => {
+  const normalizedValue = normalize(value);
+  const normalizeQuery = normalize(query);
+  return normalizedValue.includes(normalizeQuery);
+};
+
 export function uuid4() {
   return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
     (parseInt(c) ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (parseInt(c) / 4)))).toString(16),