fix(i18n): numbers, units, dates and order in the UI language, and after a switch (E30 S3)

Every locale formatter takes the language as an argument. Under the React
Compiler a formatter that read the i18n singleton was memoized on its other
arguments, so a card kept "2 hr 4 min" after a switch to Hungarian; plexLang()
had the same flaw and left Plex queries in the old language. Components now
take the language from useTranslation, and the signature makes forgetting it
a type error.

- ratings, file sizes, stream stats: the language's decimal mark ("8,3")
- view and subscriber counts compact in the language ("1,2 E")
- seconds as the language's unit ("6 mp") in the sliders and the stats
- a person's birth and death dates as dates, not ISO strings
- A-Z lists by the shown name in the language's alphabet (compareText),
  the tag catalog re-sorted by its translated names
- lint local/locale-format (was date-format) also refuses Intl.NumberFormat
  outside lib/format.ts, localeCompare, and a component reading the language
  off the i18n singleton

frontend/src/lib/columnSort.test.ts

@@ -27,37 +27,51 @@ const columns = [
 
 describe("sortRows", () => {
   it("returns the same array reference when there is no sort", () => {
-    expect(sortRows(rows, columns, null)).toBe(rows);
+    expect(sortRows(rows, columns, null, "en")).toBe(rows);
   });
 
   it("returns the input unchanged for a column that has no sortValue", () => {
-    expect(sortRows(rows, columns, { key: "nosort", dir: "asc" })).toBe(rows);
+    expect(sortRows(rows, columns, { key: "nosort", dir: "asc" }, "en")).toBe(rows);
   });
 
   it("sorts numbers by numeric difference, not string order", () => {
     // string order would put "100" before "30"; numeric must not.
-    const asc = sortRows(rows, columns, { key: "views", dir: "asc" }).map((r) => r.views);
+    const asc = sortRows(rows, columns, { key: "views", dir: "asc" }, "en").map((r) => r.views);
     expect(asc).toEqual([5, 30, 100]);
-    const desc = sortRows(rows, columns, { key: "views", dir: "desc" }).map((r) => r.views);
+    const desc = sortRows(rows, columns, { key: "views", dir: "desc" }, "en").map((r) => r.views);
     expect(desc).toEqual([100, 30, 5]);
   });
 
   it("sorts strings with locale compare, ascending and descending", () => {
-    expect(sortRows(rows, columns, { key: "name", dir: "asc" }).map((r) => r.name)).toEqual([
+    expect(sortRows(rows, columns, { key: "name", dir: "asc" }, "en").map((r) => r.name)).toEqual([
       "alpha",
       "beta",
       "gamma",
     ]);
-    expect(sortRows(rows, columns, { key: "name", dir: "desc" }).map((r) => r.name)).toEqual([
+    expect(sortRows(rows, columns, { key: "name", dir: "desc" }, "en").map((r) => r.name)).toEqual([
       "gamma",
       "beta",
       "alpha",
     ]);
   });
 
+  // E30 S3: text sorts in the UI language's alphabet, not the browser's — Hungarian puts "Ö" after
+  // "O" and "Cs" after "Cu". Both languages are asserted and differ, so a bare `localeCompare` (one
+  // runtime locale for both) cannot pass on any machine.
+  it("sorts text in the UI language's alphabet", () => {
+    const words = ["Zorró", "Ötödik", "oroszlán", "Csillag", "Életrajzi", "Cukor"].map((name) => ({
+      name,
+      views: 0,
+    }));
+    const by = (lang: string) =>
+      sortRows(words, columns, { key: "name", dir: "asc" }, lang).map((r) => r.name);
+    expect(by("hu")).toEqual(["Cukor", "Csillag", "Életrajzi", "oroszlán", "Ötödik", "Zorró"]);
+    expect(by("en")).toEqual(["Csillag", "Cukor", "Életrajzi", "oroszlán", "Ötödik", "Zorró"]);
+  });
+
   it("does not mutate the input array", () => {
     const before = rows.map((r) => r.name);
-    sortRows(rows, columns, { key: "name", dir: "asc" });
+    sortRows(rows, columns, { key: "name", dir: "asc" }, "en");
     expect(rows.map((r) => r.name)).toEqual(before);
   });
 });