fix: load languages in an exported function

src/lib/components/chat/Settings/General.svelte

 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { createEventDispatcher, onMount, getContext } from 'svelte';
-	import { languages } from '$lib/i18n';
+	import { getLanguages } from '$lib/i18n';
 	const dispatch = createEventDispatcher();
 
 	import { models, user } from '$lib/stores';
@@ -16,7 +16,7 @@
 	// General
 	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
 	let theme = 'dark';
-	// TODO: Get these dynamically from the i18n module
+	let languages = [];
 	let lang = $i18n.language;
 	let notificationEnabled = false;
 	let system = '';
@@ -69,6 +69,7 @@
 
 	onMount(async () => {
 		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
+		languages = await getLanguages();
 
 		theme = localStorage.theme ?? 'dark';
 		notificationEnabled = settings.notificationEnabled ?? false;

src/lib/i18n/index.ts

@@ -51,7 +51,7 @@ i18next
 			lookupLocalStorage: 'locale'
 		},
 		fallbackLng: {
-			default: ['en-US']
+			default: ['en']
 		},
 		ns: 'translation',
 		interpolation: {
@@ -62,6 +62,9 @@ i18next
 const i18n = createI18nStore(i18next);
 const isLoadingStore = createIsLoadingStore(i18next);
 
-export const languages = (await import(`./locales/languages.json`)).default;
+export const getLanguages = async () => {
+	const languages = (await import(`./locales/languages.json`)).default;
+	return languages;
+};
 export default i18n;
 export const isLoading = isLoadingStore;

src/lib/i18n/locales/languages.json

 [
 	{
-		"title": "English",
-		"code": "en-US"
+		"code": "en",
+		"title": "English"
 	},
 	{
-		"title": "فارسی",
-		"code": "fa"
+		"code": "fa",
+		"title": "فارسی"
 	},
 	{
-		"title": "Deutsch",
-		"code": "de"
+		"code": "de",
+		"title": "Deutsch"
 	},
 	{
-		"title": "French",
-		"code": "fr"
+		"code": "fr",
+		"title": "French"
 	},
 	{
-		"title": "Ukrainian",
-		"code": "uk"
+		"code": "uk",
+		"title": "Ukrainian"
 	}
 ]