Enable spanish and fix mobile language selector (#3454)

* Enable spanish and fix mobile language selector.

* Fix summary icons on Safari.

Author: sea-snake

src/frontend/src/lib/components/layout/Footer.svelte

@@ -2,6 +2,9 @@
   import type { HTMLAttributes } from "svelte/elements";
   import { SOURCE_CODE_URL, SUPPORT_URL } from "$lib/config";
   import { t } from "$lib/stores/locale.store";
+  import Header from "$lib/components/layout/Header.svelte";
+  import { LanguageSelector } from "$lib/components/locale";
+  import LanguageSelectorFooter from "$lib/components/locale/LanguageSelectorFooter.svelte";
 
   type Props = HTMLAttributes<HTMLElement>;
 
@@ -17,6 +20,7 @@
 >
   <div class="text-text-tertiary text-xs font-medium">© Internet Identity</div>
   <nav class="text-text-primary flex gap-4 text-xs font-semibold">
+    <LanguageSelectorFooter />
     <a
       href={SUPPORT_URL}
       target="_blank"

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

@@ -7,20 +7,24 @@
   import Button from "$lib/components/ui/Button.svelte";
   import Popover from "$lib/components/ui/Popover.svelte";
   import { ChevronDownIcon } from "@lucide/svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  const { class: className, ...props }: HTMLAttributes<HTMLElement> = $props();
 
   let buttonRef = $state<HTMLElement>();
   let isOpen = $state(false);
 </script>
 
 {#if $locales.length > 1}
   <Button
+    {...props}
     bind:element={buttonRef}
     onclick={() => (isOpen = true)}
     variant="tertiary"
     class="uppercase"
   >
     {$localeStore}
-    <ChevronDownIcon class="size-5" />
+    <ChevronDownIcon class="size-4" />
   </Button>
 {/if}
 {#if isOpen}

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

@@ -0,0 +1,62 @@
+<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";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let buttonRef = $state<HTMLElement>();
+  let isOpen = $state(false);
+</script>
+
+{#if $locales.length > 1}
+  <button
+    bind:this={buttonRef}
+    onclick={() => (isOpen = true)}
+    class="uppercase outline-0 focus-visible:underline"
+  >
+    {$localeStore}
+  </button>
+{/if}
+{#if isOpen}
+  <Popover
+    anchor={buttonRef}
+    onClose={() => (isOpen = false)}
+    direction="up"
+    align="start"
+    distance="0.5rem"
+    responsive={false}
+    class="-ml-5 !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"
+            size="sm"
+            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/ui/Popover.svelte

@@ -60,7 +60,7 @@
         popoverRef.style.left = {
           up: {
             start: `${anchorRect.left}px`,
-            center: `${anchorRect.right + anchorRect.width * 0.5 - popoverRect.width * 0.5}px`,
+            center: `${anchorRect.left + anchorRect.width * 0.5 - popoverRect.width * 0.5}px`,
             end: `${anchorRect.right - popoverRect.width}px`,
           }[align],
           right: `calc(${anchorRect.right}px + ${distance})`,

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

@@ -2,4 +2,4 @@
 export const availableLocales = ["en", "de", "es", "id"];
 
 // List of languages that are actually enabled
-export const enabledLocales = ["en"];
+export const enabledLocales = ["en", "es"];

src/frontend/src/routes/(new-styling)/+page.svelte

@@ -74,7 +74,8 @@
     <div
       class="border-border-secondary flex w-full flex-1 flex-row items-center justify-center gap-5 border-y py-3 md:justify-end md:border-0"
     >
-      <LanguageSelector />
+      <!-- TODO: Re-position language selector for now on mobile till updated design is implemented -->
+      <LanguageSelector class="max-md:absolute max-md:top-3 max-md:right-3" />
       <Button variant="secondary" href={II_DEVELOPER_DOCS_URL} target="_blank">
         {$t`For developers`}
       </Button>
@@ -205,8 +206,8 @@
         "[&_summary]:text-text-primary [&_summary]:cursor-pointer [&_summary]:font-medium [&_summary]:select-none md:[&_summary]:text-xl",
         // Summary icons
         "[&_summary_svg]:text-text-placeholder [&_summary_svg]:ml-auto [&_summary_svg]:size-6 [&_summary_svg]:shrink-0",
-        // Toggle summary icons
-        "[&_details:not(:open)_summary_svg:first-child]:hidden [&_details:open_summary_svg:last-child]:hidden",
+        // Toggle summary icons, uses [open] instead of :open due to Safari not supporting the latter
+        "[&_details:not([open])_summary_svg:first-child]:hidden [&_details[open]_summary_svg:last-child]:hidden",
         // Paragraph styling and spacing
         "[&_p]:text-text-secondary [&_p]:mb-4 [&_p]:text-base",
         // Paragraph + list spacing