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/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte

@@ -14,12 +14,14 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingAccordion from '../setting-accordion.svelte';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingCheckboxes from '../setting-checkboxes.svelte';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-  import SettingSelect from '../setting-select.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingCheckboxes from '$lib/components/shared-components/settings/setting-checkboxes.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte

@@ -5,8 +5,10 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte

@@ -4,10 +4,12 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingAccordion from '../setting-accordion.svelte';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte

@@ -4,9 +4,9 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingSelect from '../setting-select.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte

@@ -4,11 +4,13 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingAccordion from '../setting-accordion.svelte';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-  import SettingSelect from '../setting-select.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte

@@ -4,10 +4,12 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingAccordion from '../setting-accordion.svelte';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte

@@ -4,8 +4,8 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte

@@ -5,9 +5,11 @@
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
   import ConfirmDisableLogin from '../confirm-disable-login.svelte';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte

@@ -5,8 +5,8 @@
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
   import ConfirmDisableLogin from '../confirm-disable-login.svelte';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/server/server-settings.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte

@@ -13,11 +13,13 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
   import SupportedDatetimePanel from './supported-datetime-panel.svelte';
   import SupportedVariablesPanel from './supported-variables-panel.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+  import { locale } from '$lib/stores/preferences.store';
   import type { SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
-  import * as luxon from 'luxon';
+  import { DateTime } from 'luxon';
 
   export let options: SystemConfigTemplateStorageOptionDto;
 
   const getLuxonExample = (format: string) => {
-    return luxon.DateTime.fromISO(new Date('2022-09-04T20:03:05.250').toISOString()).toFormat(format);
+    return DateTime.fromISO('2022-09-04T20:03:05.250Z', { locale: $locale }).toFormat(format);
   };
 </script>
 

web/src/lib/components/admin-page/settings/theme/theme-settings.svelte

@@ -4,8 +4,8 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingTextarea from '../setting-textarea.svelte';
+  import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
-  import SettingSelect from '$lib/components/admin-page/settings/setting-select.svelte';
   import { Colorspace, type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte

@@ -4,9 +4,11 @@
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import type { SettingsEventType } from '../admin-settings';
-  import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-  import SettingSwitch from '../setting-switch.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;

web/src/lib/components/album-page/album-options.svelte

@@ -3,10 +3,11 @@
   import type { AlbumResponseDto, UserResponseDto } from '@immich/sdk';
   import { mdiClose, mdiPlus } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
-  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
+
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   export let album: AlbumResponseDto;
   export let user: UserResponseDto;

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -24,12 +24,13 @@
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import UserAvatar from '../shared-components/user-avatar.svelte';
+  import { locale } from '$lib/stores/preferences.store';
 
   const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
 
   const shouldGroup = (currentDate: string, nextDate: string): boolean => {
-    const currentDateTime = luxon.DateTime.fromISO(currentDate);
-    const nextDateTime = luxon.DateTime.fromISO(nextDate);
+    const currentDateTime = luxon.DateTime.fromISO(currentDate, { locale: $locale });
+    const nextDateTime = luxon.DateTime.fromISO(nextDate, { locale: $locale });
 
     return currentDateTime.hasSame(nextDateTime, 'hour') || currentDateTime.toRelative() === nextDateTime.toRelative();
   };
@@ -224,7 +225,7 @@
                 class="pt-1 px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
                 title={new Date(reaction.createdAt).toLocaleDateString(undefined, timeOptions)}
               >
-                {timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
+                {timeSince(luxon.DateTime.fromISO(reaction.createdAt, { locale: $locale }))}
               </div>
             {/if}
           {:else if reaction.type === 'like'}
@@ -269,7 +270,7 @@
                   class="pt-1 px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
                   title={new Date(reaction.createdAt).toLocaleDateString(navigator.language, timeOptions)}
                 >
-                  {timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
+                  {timeSince(luxon.DateTime.fromISO(reaction.createdAt, { locale: $locale }))}
                 </div>
               {/if}
             </div>

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -443,6 +443,7 @@
       {@const assetDateTimeOriginal = asset.exifInfo?.dateTimeOriginal
         ? DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
             zone: asset.exifInfo.timeZone ?? undefined,
+            locale: $locale,
           })
         : DateTime.now()}
       <ChangeDate

web/src/lib/components/map-page/map-settings-modal.svelte

@@ -4,10 +4,10 @@
   import { Duration } from 'luxon';
   import { createEventDispatcher } from 'svelte';
   import { fly } from 'svelte/transition';
-  import SettingSelect from '../admin-page/settings/setting-select.svelte';
-  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
   import Button from '../elements/buttons/button.svelte';
   import LinkButton from '../elements/buttons/link-button.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   export let settings: MapSettings;
   let customDateRange = !!settings.dateAfter || !!settings.dateBefore;

web/src/lib/components/shared-components/change-date.svelte

@@ -3,6 +3,7 @@
   import { DateTime } from 'luxon';
   import ConfirmDialogue from './confirm-dialogue.svelte';
   import Combobox from './combobox.svelte';
+
   export let initialDate: DateTime = DateTime.now();
 
   type ZoneOption = {

web/src/lib/components/shared-components/combobox.svelte

@@ -52,7 +52,7 @@
   };
 </script>
 
-<div class="relative" use:clickOutside on:outclick={handleOutClick}>
+<div class="relative w-full" use:clickOutside on:outclick={handleOutClick}>
   <div>
     {#if isOpen}
       <div class="absolute inset-y-0 left-0 flex items-center pl-3">

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -1,8 +1,4 @@
 <script lang="ts">
-  import SettingInputField, {
-    SettingInputFieldType,
-  } from '$lib/components/admin-page/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { serverConfig } from '$lib/stores/server-config.store';
@@ -15,6 +11,8 @@
   import type { ImmichDropDownOption } from '../dropdown-button.svelte';
   import DropdownButton from '../dropdown-button.svelte';
   import { NotificationType, notificationController } from '../notification/notification';
+  import SettingInputField, { SettingInputFieldType } from '../settings/setting-input-field.svelte';
+  import SettingSwitch from '../settings/setting-switch.svelte';
 
   export let albumId: string | undefined = undefined;
   export let assetIds: string[] = [];

web/src/lib/components/shared-components/settings/setting-combobox.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
+
+  export let title: string;
+  export let comboboxPlaceholder: string;
+  export let subtitle = '';
+  export let isEdited = false;
+  export let options: ComboBoxOption[];
+  export let selectedOption: ComboBoxOption;
+  export let onSelect: (combobox: ComboBoxOption | undefined) => void;
+</script>
+
+<div class="grid grid-cols-2">
+  <div>
+    <div class="flex h-[26px] place-items-center gap-1">
+      <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
+        {title}
+      </label>
+      {#if isEdited}
+        <div
+          transition:fly={{ x: 10, duration: 200, easing: quintOut }}
+          class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
+        >
+          Unsaved change
+        </div>
+      {/if}
+    </div>
+
+    <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+  </div>
+  <div class="flex items-center">
+    <Combobox
+      {selectedOption}
+      {options}
+      placeholder={comboboxPlaceholder}
+      on:select={({ detail }) => onSelect(detail)}
+    />
+    <slot />
+  </div>
+</div>

web/src/lib/components/shared-components/settings/setting-switch.svelte

@@ -30,6 +30,7 @@
     </div>
 
     <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+    <slot />
   </div>
 
   <label class="relative inline-block h-[10px] w-[36px] flex-none">

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -16,6 +16,7 @@
   import { createEventDispatcher } from 'svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { locale } from '$lib/stores/preferences.store';
 
   export let link: SharedLinkResponseDto;
 
@@ -43,7 +44,7 @@
       return;
     }
 
-    const expiresAtDate = luxon.DateTime.fromISO(new Date(link.expiresAt).toISOString());
+    const expiresAtDate = luxon.DateTime.fromISO(new Date(link.expiresAt).toISOString(), { locale: $locale });
     const now = luxon.DateTime.now();
 
     expirationCountdown = expiresAtDate.diff(now, ['days', 'hours', 'minutes', 'seconds']).toObject();

web/src/lib/components/user-settings-page/appearance-settings.svelte

@@ -1,11 +1,62 @@
 <script lang="ts">
+  import type { ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
+  import SettingCombobox from '$lib/components/shared-components/settings/setting-combobox.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { fallbackLocale, locales } from '$lib/constants';
+  import { colorTheme, locale } from '$lib/stores/preferences.store';
+  import { findLocale } from '$lib/utils';
+  import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
-  import { colorTheme } from '../../stores/preferences.store';
-  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
 
-  export const handleToggle = () => {
+  let time = new Date();
+
+  $: formattedDate = time.toLocaleString(editedLocale, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  });
+  $: timePortion = time.toLocaleString(editedLocale, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+  $: selectedDate = `${formattedDate} ${timePortion}`;
+  $: editedLocale = findLocale($locale).code;
+  $: selectedOption = {
+    value: findLocale(editedLocale).code || fallbackLocale.code,
+    label: findLocale(editedLocale).name || fallbackLocale.name,
+  };
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      time = new Date();
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  const getAllLanguages = (): ComboBoxOption[] => {
+    return locales
+      .filter(({ code }) => Intl.NumberFormat.supportedLocalesOf(code).length > 0)
+      .map((locale) => ({
+        label: locale.name,
+        value: locale.code,
+      }));
+  };
+
+  const handleToggleColorTheme = () => {
     $colorTheme.system = !$colorTheme.system;
   };
+
+  const handleToggleLocaleBrowser = () => {
+    $locale = $locale ? undefined : fallbackLocale.code;
+  };
+
+  const handleLocaleChange = (newLocale: string | undefined) => {
+    $locale = newLocale;
+  };
 </script>
 
 <section class="my-4">
@@ -16,9 +67,31 @@
           title="Theme selection"
           subtitle="Automatically set the theme to light or dark based on your browser's system preference"
           bind:checked={$colorTheme.system}
-          on:toggle={handleToggle}
+          on:toggle={handleToggleColorTheme}
         />
       </div>
+      <div class="ml-4">
+        <SettingSwitch
+          title="Default Locale"
+          subtitle="Format dates and numbers based on your browser locale"
+          checked={$locale == undefined}
+          on:toggle={handleToggleLocaleBrowser}
+        >
+          <p class="mt-2">{selectedDate}</p>
+        </SettingSwitch>
+      </div>
+      {#if $locale !== undefined}
+        <div class="ml-4">
+          <SettingCombobox
+            comboboxPlaceholder="Searching locales..."
+            {selectedOption}
+            options={getAllLanguages()}
+            title="Custom Locale"
+            subtitle="Format dates and numbers based on the language and the region"
+            onSelect={(combobox) => handleLocaleChange(combobox?.value)}
+          />
+        </div>
+      {/if}
     </div>
   </div>
 </section>

web/src/lib/components/user-settings-page/change-password-settings.svelte

@@ -5,9 +5,12 @@
   } from '$lib/components/shared-components/notification/notification';
   import { changePassword } from '@immich/sdk';
   import { fade } from 'svelte/transition';
-  import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
-  import Button from '../elements/buttons/button.svelte';
+
+  import Button from '$lib/components/elements/buttons/button.svelte';
   import type { HttpError } from '@sveltejs/kit';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
 
   let password = '';
   let newPassword = '';

web/src/lib/components/user-settings-page/device-card.svelte

@@ -57,7 +57,7 @@
       </span>
       <div class="text-sm">
         <span class="">Last seen</span>
-        <span>{DateTime.fromISO(device.updatedAt).toRelativeCalendar(options)}</span>
+        <span>{DateTime.fromISO(device.updatedAt, { locale: $locale }).toRelativeCalendar(options)}</span>
       </div>
     </div>
     {#if !device.current}

web/src/lib/components/user-settings-page/memories-settings.svelte

@@ -6,8 +6,9 @@
   import { updateUser, type UserResponseDto } from '@immich/sdk';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
-  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
+
   import Button from '../elements/buttons/button.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   export let user: UserResponseDto;
 

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -10,13 +10,13 @@
   import { mdiCheck, mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { handleError } from '../../utils/handle-error';
-  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
   import Button from '../elements/buttons/button.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import Icon from '../elements/icon.svelte';
-  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import PartnerSelectionModal from './partner-selection-modal.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   interface PartnerSharing {
     user: UserResponseDto;

web/src/lib/components/user-settings-page/quality-settings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
   import { alwaysLoadOriginalFile } from '../../stores/preferences.store';
-  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   const handleToggle = () => {
     $alwaysLoadOriginalFile = !$alwaysLoadOriginalFile;

web/src/lib/components/user-settings-page/sidebar-settings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
   import { sidebarSettings } from '../../stores/preferences.store';
-  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 </script>
 
 <section class="my-4">

web/src/lib/components/user-settings-page/trash-settings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { fade } from 'svelte/transition';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 </script>
 
 <section class="my-4">

web/src/lib/components/user-settings-page/user-profile-settings.svelte

@@ -5,11 +5,13 @@
   } from '$lib/components/shared-components/notification/notification';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
-  import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
   import Button from '../elements/buttons/button.svelte';
   import { user } from '$lib/stores/user.store';
   import { cloneDeep } from 'lodash-es';
   import { updateUser } from '@immich/sdk';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
 
   let editedUser = cloneDeep($user);
 

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -6,7 +6,7 @@
   import { user } from '$lib/stores/user.store';
   import { oauth } from '$lib/utils';
   import { type ApiKeyResponseDto, type AuthDeviceResponseDto } from '@immich/sdk';
-  import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
+  import SettingAccordion from '../shared-components/settings/setting-accordion.svelte';
   import AppearanceSettings from './appearance-settings.svelte';
   import ChangePasswordSettings from './change-password-settings.svelte';
   import DeviceList from './device-list.svelte';