Add a temporary hack for customization modal

Author: Garrett Jones

components/language-chooser/svelte/language-chooser-svelte/src/lib/CustomizationModal.svelte

@@ -9,8 +9,10 @@
 
   let {
     languageChooser,
+    _languageChooser,
   }: {
     languageChooser: SvelteViewModel<LanguageChooserViewModel>;
+    _languageChooser: LanguageChooserViewModel;
   } = $props();
 
   let isCreatingUnlisted = $state(false);
@@ -36,7 +38,7 @@
   let onOk = $state(() => {});
 
   function submitUnlisted(name: string, region: IRegion) {
-    languageChooser.submitUnlistedLanguageModal({ name, region });
+    _languageChooser.submitUnlistedLanguageModal({ name, region });
     modal.close();
   }
 
@@ -45,7 +47,7 @@
     region?: IRegion,
     dialect?: string
   ) {
-    languageChooser.submitCustomizeLangaugeModal({ script, region, dialect });
+    _languageChooser.submitCustomizeLangaugeModal({ script, region, dialect });
     modal.close();
   }
 </script>

components/language-chooser/svelte/language-chooser-svelte/src/lib/LanguageChooser.svelte

@@ -18,7 +18,10 @@
     onOk: (orthography: IOrthography, languageTag?: string) => void;
   } = $props();
 
-  const viewModel = useViewModel(new LanguageChooserViewModel());
+  // HACK: Accessing the original _viewModel gets around bugs in useViewModel.
+  // useViewModel is broken and needs redesign.
+  const _viewModel = new LanguageChooserViewModel();
+  const viewModel = useViewModel(_viewModel);
 
   let orthography: IOrthography = $derived({
     language: viewModel.selectedLanguage,
@@ -73,11 +76,7 @@
         >
           <button
             class="card-body text-left"
-            onclick={() => {
-              console.log(viewModel.onCustomizeButtonClicked);
-              console.log(viewModel.displayName);
-              viewModel.onCustomizeButtonClicked();
-            }}
+            onclick={() => _viewModel.onCustomizeButtonClicked()}
           >
             <p class="card-title uppercase">
               {#if viewModel.selectedLanguage}
@@ -128,4 +127,4 @@
   </div>
 </div>
 
-<CustomizationModal languageChooser={viewModel} />
+<CustomizationModal languageChooser={viewModel} _languageChooser={_viewModel} />