Standardize on 'en', not 'en-US' as a language code, but register both

src/hooks.server.ts

@@ -33,10 +33,13 @@ export const handleError = Sentry.handleErrorWithSentry();
 /** @type {import('@sveltejs/kit').Handle} */
 async function language({ event, resolve }) {
   const lang =
-    event.request.headers.get("accept-language")?.split(",")[0] ?? "en-US";
+    event.request.headers.get("accept-language")?.split(",")[0] ?? "en";
 
-  if (lang) {
-    locale.set(lang);
+  // use en.json for en-US and such
+  const [language, ...tags] = lang.split("-");
+
+  if (language) {
+    locale.set(language);
   }
 
   return resolve(event, {

src/lib/components/documents/Access.svelte

@@ -30,7 +30,7 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
 
-  import type { Access } from "@/lib/api/types";
+  import type { Access } from "$lib/api/types";
   import type { Level } from "$lib/components/inputs/AccessLevel.svelte";
 
   export let level: Level;

src/lib/components/documents/BulkActions.svelte

@@ -42,12 +42,12 @@ Most actual actions are deferred to their own forms, so this is more of a switch
   const selected: Readable<Document[]> = getContext("selected");
 
   const actions: Record<Action, ActionDetail> = {
-    share: [$_("bulk.actions.share"), Share16],
-    edit: [$_("bulk.actions.edit"), Pencil16],
-    data: [$_("bulk.actions.data"), Tag16],
-    project: [$_("bulk.actions.project"), FileDirectory16],
-    reprocess: [$_("bulk.actions.reprocess"), IssueReopened16],
-    delete: [$_("bulk.actions.delete"), Alert16],
+    share: ["bulk.actions.share", Share16],
+    edit: ["bulk.actions.edit", Pencil16],
+    data: ["bulk.actions.data", Tag16],
+    project: ["bulk.actions.project", FileDirectory16],
+    reprocess: ["bulk.actions.reprocess", IssueReopened16],
+    delete: ["bulk.actions.delete", Alert16],
   };
 
   let visible: Nullable<Action> = null;
@@ -76,7 +76,7 @@ Most actual actions are deferred to their own forms, so this is more of a switch
     }}
   >
     <svelte:component this={icon} slot="start" />
-    {label}
+    {$_(label)}
   </SidebarItem>
 {/each}
 

src/lib/i18n/index.js

@@ -1,6 +1,7 @@
 import { browser } from "$app/environment";
 import { init, register } from "svelte-i18n";
 import { LANGUAGES } from "@/config/config.js";
+import { getLanguage } from "../utils/language";
 
 const defaultLocale = "en";
 
@@ -10,7 +11,13 @@ LANGUAGES.forEach(([name, code, flag]) => {
   }
 });
 
+// handle two-part locales
+register("en-US", () => import("@/langs/json/en.json"));
+register("en-GB", () => import("@/langs/json/en.json"));
+
 init({
   fallbackLocale: defaultLocale,
-  initialLocale: browser ? window.navigator.language : defaultLocale,
+  initialLocale: browser
+    ? getLanguage(window.navigator?.language ?? defaultLocale)
+    : defaultLocale,
 });

src/lib/utils/language.ts

@@ -0,0 +1,6 @@
+// handle language parsing here so we can test it
+
+export function getLanguage(code: string, fallback: string = "en") {
+  const [language, ...tags] = code.split("-");
+  return language || fallback;
+}

src/lib/utils/tests/language.test.ts

@@ -0,0 +1,19 @@
+import { describe, test, expect } from "vitest";
+import { getLanguage } from "../language";
+
+// code, expected
+const languages = [
+  ["en", "en"],
+  ["en-US", "en"],
+  ["en-GB", "en"],
+  ["es", "es"],
+  ["--", "en"],
+];
+
+describe("language", () => {
+  test("split language codes", () => {
+    for (const [code, expected] of languages) {
+      expect(getLanguage(code as string)).toEqual(expected);
+    }
+  });
+});

src/routes/+layout.ts

@@ -1,14 +1,18 @@
 import { browser } from "$app/environment";
 import { locale, waitLocale } from "svelte-i18n";
+import { getLanguage } from "$lib/utils/language";
 
 import "$lib/i18n/index.js"; // Import to initialize. Important :)
 
 export const trailingSlash = "always";
 
 export async function load() {
   if (browser) {
-    const language =
-      localStorage.getItem("dc-locale") || window.navigator.language;
+    const lang = localStorage.getItem("dc-locale") || window.navigator.language;
+
+    // use en.json for en-US and such
+    const language = getLanguage(lang, "en");
+
     locale.set(language);
   }
   await waitLocale();