Add language selector and put languages behind flag.

Author: sea-snake

src/frontend/src/lib/components/locale/LanguageSelector.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import {
+    availableBrowserLocale,
+    locales,
+    localeStore,
+  } from "$lib/stores/locale.store";
+  import Button from "$lib/components/ui/Button.svelte";
+  import Popover from "$lib/components/ui/Popover.svelte";
+  import { ChevronDownIcon } from "@lucide/svelte";
+
+  let buttonRef = $state<HTMLElement>();
+  let isOpen = $state(false);
+</script>
+
+{#if locales.length > 1}
+  <Button
+    bind:element={buttonRef}
+    onclick={() => (isOpen = true)}
+    variant="tertiary"
+    class="uppercase"
+  >
+    {$localeStore}
+    <ChevronDownIcon size="1.25rem" />
+  </Button>
+{/if}
+{#if isOpen}
+  <Popover
+    anchor={buttonRef}
+    onClose={() => (isOpen = false)}
+    direction="down"
+    align="start"
+    distance="0.25rem"
+    class="!w-18 !p-1.5"
+  >
+    <ul class="flex flex-col">
+      {#each locales as locale}
+        <li class="contents">
+          <Button
+            onclick={() => {
+              isOpen = false;
+              // Switch back to locale auto-detection if locale matches browser
+              if (locale === availableBrowserLocale) {
+                localeStore.reset();
+              } else {
+                localeStore.set(locale);
+              }
+            }}
+            variant="tertiary"
+            class={[
+              "justify-start text-start uppercase",
+              locale === $localeStore &&
+                "[ul:not(:hover)_&]:bg-bg-primary_hover",
+            ]}
+          >
+            {locale}
+          </Button>
+        </li>
+      {/each}
+    </ul>
+  </Popover>
+{/if}

src/frontend/src/lib/components/locale/index.ts

@@ -1,3 +1,4 @@
 import Trans from "$lib/components/locale/Trans.svelte";
+import LanguageSelector from "$lib/components/locale/LanguageSelector.svelte";
 
-export { Trans };
+export { Trans, LanguageSelector };

src/frontend/src/lib/components/ui/Popover.svelte

@@ -14,6 +14,7 @@
     direction?: Direction;
     align?: Align;
     distance?: string;
+    responsive?: boolean;
   };
 
   let {
@@ -25,6 +26,7 @@
     distance = "0px",
     children,
     class: className,
+    responsive = true,
     ...props
   }: Props = $props();
 
@@ -83,7 +85,7 @@
 
 <svelte:window bind:innerWidth={windowWidth} />
 
-{#if windowWidth >= MOBILE_BREAKPOINT}
+{#if windowWidth >= MOBILE_BREAKPOINT || !responsive}
   <div
     class="fixed inset-0 z-10"
     role="presentation"

src/frontend/src/lib/constants/locale.constants.ts

@@ -1,2 +1,5 @@
 // First locale is default directly defined in svelte components
 export const availableLocales = ["en", "de", "es", "id"];
+
+// List of languages that are actually enabled
+export const enabledLocales = ["en"];

src/frontend/src/lib/locales/de.po

@@ -113,6 +113,11 @@ export const LARGE_GOOGLE_BUTTON = createFeatureFlagStore(
   },
 );
 
+export const ENABLE_ALL_LOCALES = createFeatureFlagStore(
+  "ENABLE_ALL_LOCALES",
+  false,
+);
+
 export default {
   DOMAIN_COMPATIBILITY,
   OPENID_AUTHENTICATION,
@@ -121,4 +126,5 @@ export default {
   CONTINUE_FROM_ANOTHER_DEVICE,
   AUTH_FLOW_UPDATES,
   LARGE_GOOGLE_BUTTON,
+  ENABLE_ALL_LOCALES,
 } as Record<string, FeatureFlagStore>;

src/frontend/src/lib/locales/en.po

@@ -4,16 +4,24 @@ import { writableStored } from "./writable.store";
 import { building } from "$app/environment";
 import { i18n } from "@lingui/core";
 import { MacroMessageDescriptor, ChoiceOptions } from "@lingui/core/macro";
-import { availableLocales } from "$lib/constants/locale.constants";
+import {
+  availableLocales,
+  enabledLocales,
+} from "$lib/constants/locale.constants";
+import { ENABLE_ALL_LOCALES } from "$lib/state/featureFlags";
+
+export const locales = get(ENABLE_ALL_LOCALES)
+  ? availableLocales
+  : enabledLocales;
 
 export const browserLocales = building
-  ? [availableLocales[0]] // Fallback during SSG
+  ? [locales[0]] // Fallback during SSG
   : (navigator.languages ?? [navigator.language ?? availableLocales[0]]);
 export const availableBrowserLocale =
   // Exact match
-  browserLocales.find((ul) => availableLocales.includes(ul)) ??
+  browserLocales.find((ul) => locales.includes(ul)) ??
   // Language-only match
-  availableLocales.find((al) =>
+  locales.find((al) =>
     browserLocales.some((ul) => ul.split("-")[0] === al.split("-")[0]),
   ) ??
   // Fallback
@@ -37,7 +45,6 @@ export const localeStore: LocaleStore = {
     const validLocale = availableLocales.includes(locale)
       ? locale
       : availableLocales[0];
-    console.log("validLocale", validLocale, locale);
     const { messages } = await import(`$lib/locales/${validLocale}.po`);
     i18n.loadAndActivate({ locale: locale, messages });
   },
@@ -55,14 +62,14 @@ export const localeStore: LocaleStore = {
     internalStore.set(locale);
   },
   reset: async () => {
-    const { messages } = await import(`$lib/locales/${availableLocales[0]}.po`);
-    i18n.loadAndActivate({ locale: availableLocales[0], messages });
+    const { messages } = await import(
+      `$lib/locales/${availableBrowserLocale}.po`
+    );
+    i18n.loadAndActivate({ locale: availableBrowserLocale, messages });
     internalStore.set(null);
   },
 };
 
-console.log("local", localeStore);
-
 // Derives based on localeStore so that translations update on language change
 export const t = derived(
   localeStore,