feat: add currency setting with fiat conversion, display prices in user's preferred currency

js/components/pages/page-settings.js

@@ -50,6 +50,12 @@ class PageSettings extends HTMLElement {
             i18n.setLocale(e.target.value)
         })
 
+        // Currency select
+        this.querySelector('#currency-select')?.addEventListener('change', (e) => {
+            this.setCurrency(e.target.value)
+            this.showToast(t('settings.currencyChanged'))
+        })
+
         // Clear favorites
         this.querySelector('#clear-favorites')?.addEventListener('click', () => {
             if (confirm(t('settings.confirmClearFavorites'))) {
@@ -93,6 +99,15 @@ class PageSettings extends HTMLElement {
         return localStorage.getItem('theme') || 'system'
     }
 
+    getCurrentCurrency() {
+        return localStorage.getItem('dgray_currency') || 'USD'
+    }
+
+    setCurrency(currency) {
+        localStorage.setItem('dgray_currency', currency)
+        window.dispatchEvent(new CustomEvent('currency-changed', { detail: { currency } }))
+    }
+
     showToast(message) {
         const existing = document.querySelector('.settings-toast')
         existing?.remove()
@@ -152,6 +167,15 @@ class PageSettings extends HTMLElement {
                                 <option value="fr" ${currentLang === 'fr' ? 'selected' : ''}>Français</option>
                             </select>
                         </div>
+
+                        <div class="setting-item">
+                            <label for="currency-select">${t('settings.currency')}</label>
+                            <select id="currency-select">
+                                <option value="USD" ${this.getCurrentCurrency() === 'USD' ? 'selected' : ''}>USD ($)</option>
+                                <option value="EUR" ${this.getCurrentCurrency() === 'EUR' ? 'selected' : ''}>EUR (€)</option>
+                                <option value="CHF" ${this.getCurrentCurrency() === 'CHF' ? 'selected' : ''}>CHF</option>
+                            </select>
+                        </div>
                     </section>
 
                     <!-- Account -->