From c7023dab1d189bc0880887207e991c5064588a43 Mon Sep 17 00:00:00 2001
From: Benedikt Ortwein <benedikt@MacBookPro.fritz.box>
Date: Wed, 10 Sep 2025 21:50:48 +0200
Subject: [PATCH] feat(currency): add dynamic currency list with locale support
 (closes #49, #59, #75, #83)

- Implemented utility to list currencies using Intl API with fallback set

- Integrated locale detection (navigator.language) for proper labels
---
 .../src/components/forms/ConfigForm.svelte    | 32 ++++++------
 app/frontend/src/lib/utils/currencies.ts      | 51 +++++++++++++++++++
 2 files changed, 66 insertions(+), 17 deletions(-)
 create mode 100644 app/frontend/src/lib/utils/currencies.ts

diff --git a/app/frontend/src/components/forms/ConfigForm.svelte b/app/frontend/src/components/forms/ConfigForm.svelte
index 80ec3e4b..17e4799e 100644
--- a/app/frontend/src/components/forms/ConfigForm.svelte
+++ b/app/frontend/src/components/forms/ConfigForm.svelte
@@ -12,23 +12,21 @@
 	});
 
 	import { config, type Config } from '$lib/stores/config';
+	import { listCurrencies } from '$lib/utils/currencies';
 
 	let localConfig: Config[] = $state([]);
 
+	const userLocale = navigator.language || 'en';
+	
+  	const currencyOptions = listCurrencies(userLocale);
+
 	const dateFormatOptions = [
 		{ value: 'dd/MM/yyyy', label: 'dd/MM/yyyy (e.g., 31/12/2000)' },
 		{ value: 'MM/dd/yyyy', label: 'MM/dd/yyyy (e.g., 12/25/2000)' },
 		{ value: 'yyyy-MM-dd', label: 'yyyy-MM-dd (e.g., 2000-12-31)' },
 		{ value: 'dd MMM, yyyy', label: 'dd MMM, yyyy (e.g., 31 Dec, 2000)' }
 	];
-
-	const currencyOptions = [
-		{ value: 'INR', label: 'INR (₹)' },
-		{ value: 'USD', label: 'USD ($)' },
-		{ value: 'EUR', label: 'EUR (€)' },
-		{ value: 'GBP', label: 'GBP (£)' }
-	];
-
+	
 	const uomOptions = [
 		{ value: 'metric', label: 'Metric' },
 		{ value: 'imperial', label: 'Imperial' }
@@ -76,15 +74,15 @@
 					{/each}
 				</select>
 			{:else if item.key === 'currency'}
-				<select
-					id={item.key}
-					bind:value={item.value}
-					class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
-				>
-					{#each currencyOptions as option}
-						<option value={option.value}>{option.label}</option>
-					{/each}
-				</select>
+			<select
+				id={item.key}
+				bind:value={item.value}
+				class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+			>
+				{#each currencyOptions as option}
+				<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
 			{:else if item.key === 'unitOfMeasure'}
 				<select
 					id={item.key}
diff --git a/app/frontend/src/lib/utils/currencies.ts b/app/frontend/src/lib/utils/currencies.ts
new file mode 100644
index 00000000..3f75bcca
--- /dev/null
+++ b/app/frontend/src/lib/utils/currencies.ts
@@ -0,0 +1,51 @@
+// Utility for currency listing/formatting using the Intl API.
+
+interface CurrencyOption {
+value: string; // ISO-4217 code (e.g., "EUR") 
+label: string; // Localized name with code and symbol 
+symbol: string; // Display symbol (€, $, …)   
+}
+
+const FALLBACK_CURRENCIES = [
+  "USD","EUR","GBP","JPY","CNY","INR","AUD","CAD","CHF","HKD","SEK","NOK","DKK",
+  "PLN","CZK","HUF","TRY","BRL","ZAR","MXN","AED","SAR","ILS","KRW","TWD","SGD",
+  "NZD","THB","MYR","IDR","PHP","CLP","COP","ARS","PEN","VND","RON","BGN","HRK",
+  "ISK","KWD","QAR","BHD","RUB","UAH","GHS","NGN","KES"
+];
+
+function getSupportedCurrencyCodes(): string[] {
+  // Prefer runtime-supported values; fall back to a curated list.
+  if (typeof Intl.supportedValuesOf === "function") {
+    return Intl.supportedValuesOf("currency") as string[];
+  }
+  return [...FALLBACK_CURRENCIES];
+}
+
+
+export function listCurrencies(locale = "en"): CurrencyOption[] {
+  const codes = getSupportedCurrencyCodes();
+
+  const dn = new Intl.DisplayNames(locale, { type: "currency" });
+  const safeName = (c: string) => (dn.of(c) ?? c);
+
+  return codes
+    .map((code) => {
+      const symbol = extractSymbol(code, locale);
+      const name = safeName(code);
+      return {
+        value: code,
+        label: `${name} (${code}) – ${symbol}`,
+        symbol
+      };
+    })
+    .sort((a, b) => a.label.localeCompare(b.label, locale));
+}
+
+function extractSymbol(currency: string, locale = "en"): string {
+  const nf = new Intl.NumberFormat(locale, { style: "currency", currency });
+  const parts = nf.formatToParts(0);
+  const sym = parts.find((p) => p.type === "currency")?.value;
+return (sym ?? nf.format(0).replace(/[\d\s.,\-+]/g, "").trim()) || currency;
+}
+
+