From a941255a58efdadccfa926a4cd898658814a00df Mon Sep 17 00:00:00 2001
From: Rob B <computerguy440+gh@gmail.com>
Date: Tue, 3 Sep 2024 16:58:12 -0400
Subject: [PATCH] Simplify language selector implementation

---
 .../first-time-setup/LanguageSelector.svelte  | 40 +++++--------------
 1 file changed, 10 insertions(+), 30 deletions(-)

diff --git a/frontend/src/lib/components/modals/first-time-setup/LanguageSelector.svelte b/frontend/src/lib/components/modals/first-time-setup/LanguageSelector.svelte
index 7ff909f1..6b159c9e 100644
--- a/frontend/src/lib/components/modals/first-time-setup/LanguageSelector.svelte
+++ b/frontend/src/lib/components/modals/first-time-setup/LanguageSelector.svelte
@@ -5,51 +5,31 @@
 
   let languages: string[] = Object.keys(i18n);
 
-  type DropdownItem = {
-    value: string;
-    label: string;
-  };
-
-  function prepLocale(locale: string) {
-    return {
-      value: locale,
-      label: localeName(locale),
-    };
-  }
-
-  let dropdownItemData = languages.map(prepLocale);
-  
   function localeName(locale: string) {
     if (!locale) return 'N/A';
     return new Intl.DisplayNames([locale], { type: 'language' }).of(locale) ?? `Error:${locale}`;
   }
-
-  async function languageSelectChanged(selection: CustomEvent<DropdownItem>) {
-    $language = selection.detail.value;
-  }
 </script>
 
-<!-- TODO the formatting on this is totally botched, isn't going vertical, is starting open? -->
 <Select
   name="languageCombobox"
-  class="w-full h-15"
+  class="w-full"
   buttonClass="bg-surface-200-700-token px-4 text-sm"
   itemActiveClass="!bg-surface-300/20"
   itemClass="bg-surface-50-900-token"
-  items={dropdownItemData}
+  items={languages}
   menuClass="bg-surface-50-900-token"
 
-  value={prepLocale($language) ?? 'UNSET'}
-  on:change={languageSelectChanged}
+  bind:value={$language}
 >
   <svelte:fragment slot="item" let:item>
-    <span>{item.label}</span>
+    <span>{localeName(item)}</span>
   </svelte:fragment>
   <!-- TODO: dynamic flags 
-    <svelte:fragment slot="itemTrail" let:item>
-      <span slot="lead" class="h-5 w-5 block">
-        {localeFlag(item.value)}
-      </span>
-    </svelte:fragment>
-    -->
+  <svelte:fragment slot="itemTrail" let:item>
+    <span slot="lead" class="h-5 w-5 block">
+      {localeFlag(item.value)}
+    </span>
+  </svelte:fragment>
+  -->
 </Select>
\ No newline at end of file