Redesign of language selector #100 (#101)

* feat: add new language selector in footer, add pirate language * fix: translations in title bar not updating * chore: refactor into separate component * fix: update translate url * fix: update pirate translation to use "ship" instead of "plank" for platform a very very necessary change
2026-07-24 17:03:00 +10:00 · 2025-06-08 10:33:41 +10:00
parent 29c8e70852
commit 50bdc44c33
8 changed files with 633 additions and 91 deletions
@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <Listbox v-model="wiredLocale" as="div">
+      <ListboxLabel class="block text-sm/6 font-medium text-zinc-400">{{
+        $t("selectLanguage")
+      }}</ListboxLabel>
+      <div class="relative mt-2">
+        <ListboxButton
+          class="grid w-full cursor-default grid-cols-1 rounded-md bg-zinc-900 py-1.5 pr-2 pl-3 text-left text-zinc-300 outline-1 -outline-offset-1 outline-zinc-700 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
+        >
+          <span class="col-start-1 row-start-1 flex items-center gap-3 pr-6">
+            <span alt="" class="-mt-0.5 shrink-0 rounded-full">{{
+              localeToEmoji(wiredLocale)
+            }}</span>
+            <span class="block truncate">{{
+              currentLocaleInformation?.name ?? wiredLocale
+            }}</span>
+          </span>
+          <ChevronUpDownIcon
+            class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4"
+            aria-hidden="true"
+          />
+        </ListboxButton>
+
+        <transition
+          leave-active-class="transition ease-in duration-100"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+        >
+          <ListboxOptions
+            class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
+          >
+            <ListboxOption
+              v-for="listLocale in locales"
+              :key="listLocale.code"
+              v-slot="{ active, selected }"
+              as="template"
+              :value="listLocale.code"
+            >
+              <li
+                :class="[
+                  active
+                    ? 'bg-blue-600 text-white outline-hidden'
+                    : 'text-zinc-300',
+                  'relative cursor-default py-2 pr-9 pl-3 select-none',
+                ]"
+              >
+                <div class="flex items-center">
+                  <span class="-mt-0.5 shrink-0 rounded-full">
+                    {{ localeToEmoji(listLocale.code) }}
+                  </span>
+                  <span
+                    :class="[
+                      selected ? 'font-semibold' : 'font-normal',
+                      'ml-3 block truncate',
+                    ]"
+                    >{{ listLocale.name }}</span
+                  >
+                </div>
+
+                <span
+                  v-if="selected"
+                  :class="[
+                    active ? 'text-white' : 'text-blue-600',
+                    'absolute inset-y-0 right-0 flex items-center pr-4',
+                  ]"
+                >
+                  <CheckIcon class="size-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ListboxOption>
+          </ListboxOptions>
+        </transition>
+      </div>
+    </Listbox>
+    <NuxtLink
+      class="mt-1 transition text-blue-500 hover:text-blue-600 text-sm"
+      to="https://translate.droposs.org/projects/drop/"
+      target="_blank"
+    >
+      <i18n-t
+        keypath="helpUsTranslate"
+        tag="span"
+        scope="global"
+        class="inline-flex items-center gap-x-1 hover:underline"
+      >
+        <template #arrow>
+          <ArrowTopRightOnSquareIcon class="size-4" />
+        </template>
+      </i18n-t>
+    </NuxtLink>
+
+    <DevOnly
+      ><h1 class="mt-3 text-sm text-gray-500">{{ $t("welcome") }}</h1>
+    </DevOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Listbox,
+  ListboxButton,
+  ListboxLabel,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/vue";
+import { ChevronUpDownIcon } from "@heroicons/vue/16/solid";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+
+const { locales, locale, setLocale } = useI18n();
+
+function localeToEmoji(local: string): string {
+  switch (local) {
+    case "en":
+    case "en-gb":
+    case "en-ca":
+    case "en-au":
+    case "en-us": {
+      return "🇺🇸";
+    }
+    case "en-pirate": {
+      return "🏴‍☠️";
+    }
+
+    default: {
+      return "❓";
+    }
+  }
+}
+
+const wiredLocale = computed({
+  get() {
+    return locale.value;
+  },
+  set(v) {
+    setLocale(v);
+  },
+});
+const currentLocaleInformation = computed(() =>
+  locales.value.find((e) => e.code == wiredLocale.value),
+);
+</script>