feat(web): add an option to change the date formats (#7174)

* feat: add an option to change the date formats

* pr feedback

* fix: change title

* fix: show list supported by the browser

* fix: tests

* fix: dates

* fix: check only if locale is set

* fix: better fallback value

* fix: fallback

* fix: fallback

* feat: add default locale option

* refactor: shared components

* refactor: shared components

* prepare for svelte 5

* don't use relative paths

* refactor: fallback value

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* fix: parsing store

* fix: lint

* refactor: locales

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/constants.ts

@@ -95,3 +95,147 @@ export enum Theme {
   LIGHT = 'light',
   DARK = 'dark',
 }
+
+export const fallbackLocale = {
+  code: 'en-US',
+  name: 'English (US)',
+};
+
+export const locales = [
+  { code: 'af-ZA', name: 'Afrikaans (South Africa)' },
+  { code: 'sq-AL', name: 'Albanian (Albania)' },
+  { code: 'ar-DZ', name: 'Arabic (Algeria)' },
+  { code: 'ar-BH', name: 'Arabic (Bahrain)' },
+  { code: 'ar-EG', name: 'Arabic (Egypt)' },
+  { code: 'ar-IQ', name: 'Arabic (Iraq)' },
+  { code: 'ar-JO', name: 'Arabic (Jordan)' },
+  { code: 'ar-KW', name: 'Arabic (Kuwait)' },
+  { code: 'ar-LB', name: 'Arabic (Lebanon)' },
+  { code: 'ar-LY', name: 'Arabic (Libya)' },
+  { code: 'ar-MA', name: 'Arabic (Morocco)' },
+  { code: 'ar-OM', name: 'Arabic (Oman)' },
+  { code: 'ar-QA', name: 'Arabic (Qatar)' },
+  { code: 'ar-SA', name: 'Arabic (Saudi Arabia)' },
+  { code: 'ar-SY', name: 'Arabic (Syria)' },
+  { code: 'ar-TN', name: 'Arabic (Tunisia)' },
+  { code: 'ar-AE', name: 'Arabic (United Arab Emirates)' },
+  { code: 'ar-YE', name: 'Arabic (Yemen)' },
+  { code: 'hy-AM', name: 'Armenian (Armenia)' },
+  { code: 'az-AZ', name: 'Azerbaijani (Azerbaijan)' },
+  { code: 'eu-ES', name: 'Basque (Spain)' },
+  { code: 'be-BY', name: 'Belarusian (Belarus)' },
+  { code: 'bn-IN', name: 'Bengali (India)' },
+  { code: 'bs-BA', name: 'Bosnian (Bosnia and Herzegovina)' },
+  { code: 'bg-BG', name: 'Bulgarian (Bulgaria)' },
+  { code: 'ca-ES', name: 'Catalan (Spain)' },
+  { code: 'zh-CN', name: 'Chinese (China)' },
+  { code: 'zh-HK', name: 'Chinese (Hong Kong SAR China)' },
+  { code: 'zh-MO', name: 'Chinese (Macao SAR China)' },
+  { code: 'zh-SG', name: 'Chinese (Singapore)' },
+  { code: 'zh-TW', name: 'Chinese (Taiwan)' },
+  { code: 'hr-HR', name: 'Croatian (Croatia)' },
+  { code: 'cs-CZ', name: 'Czech (Czech Republic)' },
+  { code: 'da-DK', name: 'Danish (Denmark)' },
+  { code: 'nl-BE', name: 'Dutch (Belgium)' },
+  { code: 'nl-NL', name: 'Dutch (Netherlands)' },
+  { code: 'en-AU', name: 'English (Australia)' },
+  { code: 'en-BZ', name: 'English (Belize)' },
+  { code: 'en-CA', name: 'English (Canada)' },
+  { code: 'en-IE', name: 'English (Ireland)' },
+  { code: 'en-JM', name: 'English (Jamaica)' },
+  { code: 'en-NZ', name: 'English (New Zealand)' },
+  { code: 'en-PH', name: 'English (Philippines)' },
+  { code: 'en-ZA', name: 'English (South Africa)' },
+  { code: 'en-TT', name: 'English (Trinidad and Tobago)' },
+  { code: 'en-VI', name: 'English (U.S. Virgin Islands)' },
+  { code: 'en-GB', name: 'English (United Kingdom)' },
+  { code: 'en-US', name: 'English (United States)' },
+  { code: 'en-ZW', name: 'English (Zimbabwe)' },
+  { code: 'et-EE', name: 'Estonian (Estonia)' },
+  { code: 'fo-FO', name: 'Faroese (Faroe Islands)' },
+  { code: 'fi-FI', name: 'Finnish (Finland)' },
+  { code: 'fr-BE', name: 'French (Belgium)' },
+  { code: 'fr-CA', name: 'French (Canada)' },
+  { code: 'fr-FR', name: 'French (France)' },
+  { code: 'fr-LU', name: 'French (Luxembourg)' },
+  { code: 'fr-MC', name: 'French (Monaco)' },
+  { code: 'fr-CH', name: 'French (Switzerland)' },
+  { code: 'gl-ES', name: 'Galician (Spain)' },
+  { code: 'ka-GE', name: 'Georgian (Georgia)' },
+  { code: 'de-AT', name: 'German (Austria)' },
+  { code: 'de-DE', name: 'German (Germany)' },
+  { code: 'de-LI', name: 'German (Liechtenstein)' },
+  { code: 'de-LU', name: 'German (Luxembourg)' },
+  { code: 'de-CH', name: 'German (Switzerland)' },
+  { code: 'el-GR', name: 'Greek (Greece)' },
+  { code: 'gu-IN', name: 'Gujarati (India)' },
+  { code: 'he-IL', name: 'Hebrew (Israel)' },
+  { code: 'hi-IN', name: 'Hindi (India)' },
+  { code: 'hu-HU', name: 'Hungarian (Hungary)' },
+  { code: 'is-IS', name: 'Icelandic (Iceland)' },
+  { code: 'id-ID', name: 'Indonesian (Indonesia)' },
+  { code: 'it-IT', name: 'Italian (Italy)' },
+  { code: 'it-CH', name: 'Italian (Switzerland)' },
+  { code: 'ja-JP', name: 'Japanese (Japan)' },
+  { code: 'kn-IN', name: 'Kannada (India)' },
+  { code: 'kk-KZ', name: 'Kazakh (Kazakhstan)' },
+  { code: 'kok-IN', name: 'Konkani (India)' },
+  { code: 'ko-KR', name: 'Korean (South Korea)' },
+  { code: 'lv-LV', name: 'Latvian (Latvia)' },
+  { code: 'lt-LT', name: 'Lithuanian (Lithuania)' },
+  { code: 'mk-MK', name: 'Macedonian (Macedonia)' },
+  { code: 'ms-BN', name: 'Malay (Brunei)' },
+  { code: 'ms-MY', name: 'Malay (Malaysia)' },
+  { code: 'ml-IN', name: 'Malayalam (India)' },
+  { code: 'mt-MT', name: 'Maltese (Malta)' },
+  { code: 'mr-IN', name: 'Marathi (India)' },
+  { code: 'mn-MN', name: 'Mongolian (Mongolia)' },
+  { code: 'se-NO', name: 'Northern Sami (Norway)' },
+  { code: 'nb-NO', name: 'Norwegian Bokmål (Norway)' },
+  { code: 'nn-NO', name: 'Norwegian Nynorsk (Norway)' },
+  { code: 'fa-IR', name: 'Persian (Iran)' },
+  { code: 'pl-PL', name: 'Polish (Poland)' },
+  { code: 'pt-BR', name: 'Portuguese (Brazil)' },
+  { code: 'pt-PT', name: 'Portuguese (Portugal)' },
+  { code: 'pa-IN', name: 'Punjabi (India)' },
+  { code: 'ro-RO', name: 'Romanian (Romania)' },
+  { code: 'ru-RU', name: 'Russian (Russia)' },
+  { code: 'sr-BA', name: 'Serbian (Bosnia and Herzegovina)' },
+  { code: 'sr-CS', name: 'Serbian (Serbia And Montenegro)' },
+  { code: 'sk-SK', name: 'Slovak (Slovakia)' },
+  { code: 'sl-SI', name: 'Slovenian (Slovenia)' },
+  { code: 'es-AR', name: 'Spanish (Argentina)' },
+  { code: 'es-BO', name: 'Spanish (Bolivia)' },
+  { code: 'es-CL', name: 'Spanish (Chile)' },
+  { code: 'es-CO', name: 'Spanish (Colombia)' },
+  { code: 'es-CR', name: 'Spanish (Costa Rica)' },
+  { code: 'es-DO', name: 'Spanish (Dominican Republic)' },
+  { code: 'es-EC', name: 'Spanish (Ecuador)' },
+  { code: 'es-SV', name: 'Spanish (El Salvador)' },
+  { code: 'es-GT', name: 'Spanish (Guatemala)' },
+  { code: 'es-HN', name: 'Spanish (Honduras)' },
+  { code: 'es-MX', name: 'Spanish (Mexico)' },
+  { code: 'es-NI', name: 'Spanish (Nicaragua)' },
+  { code: 'es-PA', name: 'Spanish (Panama)' },
+  { code: 'es-PY', name: 'Spanish (Paraguay)' },
+  { code: 'es-PE', name: 'Spanish (Peru)' },
+  { code: 'es-PR', name: 'Spanish (Puerto Rico)' },
+  { code: 'es-ES', name: 'Spanish (Spain)' },
+  { code: 'es-UY', name: 'Spanish (Uruguay)' },
+  { code: 'es-VE', name: 'Spanish (Venezuela)' },
+  { code: 'sw-KE', name: 'Swahili (Kenya)' },
+  { code: 'sv-FI', name: 'Swedish (Finland)' },
+  { code: 'sv-SE', name: 'Swedish (Sweden)' },
+  { code: 'syr-SY', name: 'Syriac (Syria)' },
+  { code: 'ta-IN', name: 'Tamil (India)' },
+  { code: 'te-IN', name: 'Telugu (India)' },
+  { code: 'th-TH', name: 'Thai (Thailand)' },
+  { code: 'tn-ZA', name: 'Tswana (South Africa)' },
+  { code: 'tr-TR', name: 'Turkish (Turkey)' },
+  { code: 'uk-UA', name: 'Ukrainian (Ukraine)' },
+  { code: 'uz-UZ', name: 'Uzbek (Uzbekistan)' },
+  { code: 'vi-VN', name: 'Vietnamese (Vietnam)' },
+  { code: 'cy-GB', name: 'Welsh (United Kingdom)' },
+  { code: 'xh-ZA', name: 'Xhosa (South Africa)' },
+  { code: 'zu-ZA', name: 'Zulu (South Africa)' },
+];