immich/web/src/lib/components/user-settings-page/app-settings.svelte

<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 { fallbackLang, fallbackLocale, langs, locales } from '$lib/constants';
  import {
    alwaysLoadOriginalFile,
    colorTheme,
    lang,
    locale,
    loopVideo,
    playVideoThumbnailOnHover,
    showDeleteModal,
    sidebarSettings,
  } from '$lib/stores/preferences.store';
  import { findLocale } from '$lib/utils';
  import { onMount } from 'svelte';
  import { fade } from 'svelte/transition';
  import { t, locale as i18nLocale, init } from 'svelte-i18n';
  import { get } from 'svelte/store';

  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 handleLanguageChange = async (newLang: string | undefined) => {
    newLang = newLang || fallbackLang;
    $lang = newLang;

    const previousLang = get(i18nLocale);

    if (newLang === 'dev') {
      await init({ fallbackLocale: 'dev', initialLocale: 'dev' });
    } else if (previousLang == 'dev' && newLang !== 'dev') {
      await init({ fallbackLocale: 'en-US', initialLocale: newLang });
    }
    $i18nLocale = newLang;
  };

  const handleLocaleChange = (newLocale: string | undefined) => {
    if (newLocale) {
      $locale = newLocale;
    }
  };
</script>

<section class="my-4">
  <div in:fade={{ duration: 500 }}>
    <div class="ml-4 mt-4 flex flex-col gap-4">
      <div class="ml-4">
        <SettingSwitch
          title={$t('theme_selection')}
          subtitle={$t('theme_selection_description')}
          bind:checked={$colorTheme.system}
          on:toggle={handleToggleColorTheme}
        />
      </div>

      <div class="ml-4">
        <SettingCombobox
          comboboxPlaceholder={$t('language')}
          {selectedOption}
          options={langs.map((lang) => ({ label: lang.name, value: lang.code }))}
          title={$t('language')}
          subtitle={$t('language_setting_description')}
          onSelect={(combobox) => handleLanguageChange(combobox?.value)}
        />
      </div>

      <div class="ml-4">
        <SettingSwitch
          title={$t('default_locale')}
          subtitle={$t('default_locale_description')}
          checked={$locale == undefined}
          on:toggle={handleToggleLocaleBrowser}
        >
          <p class="mt-2 dark:text-gray-400">{selectedDate}</p>
        </SettingSwitch>
      </div>
      {#if $locale !== undefined}
        <div class="ml-4">
          <SettingCombobox
            comboboxPlaceholder={$t('searching_locales')}
            {selectedOption}
            options={getAllLanguages()}
            title={$t('custom_locale')}
            subtitle={$t('custom_locale_description')}
            onSelect={(combobox) => handleLocaleChange(combobox?.value)}
          />
        </div>
      {/if}

      <div class="ml-4">
        <SettingSwitch
          title={$t('display_original_photos')}
          subtitle={$t('display_original_photos_setting_description')}
          bind:checked={$alwaysLoadOriginalFile}
          on:toggle={() => ($alwaysLoadOriginalFile = !$alwaysLoadOriginalFile)}
        />
      </div>
      <div class="ml-4">
        <SettingSwitch
          title="Play video thumbnail on hover"
          subtitle={$t('video_hover_setting_description')}
          bind:checked={$playVideoThumbnailOnHover}
          on:toggle={() => ($playVideoThumbnailOnHover = !$playVideoThumbnailOnHover)}
        />
      </div>
      <div class="ml-4">
        <SettingSwitch
          title={$t('loop_videos')}
          subtitle={$t('loop_videos_description')}
          bind:checked={$loopVideo}
          on:toggle={() => ($loopVideo = !$loopVideo)}
        />
      </div>

      <div class="ml-4">
        <SettingSwitch
          title={$t('permanent_deletion_warning')}
          subtitle={$t('permanent_deletion_warning_setting_description')}
          bind:checked={$showDeleteModal}
        />
      </div>

      <div class="ml-4">
        <SettingSwitch
          title={$t('people')}
          subtitle={$t('people_sidebar_description')}
          bind:checked={$sidebarSettings.people}
        />
      </div>
      <div class="ml-4">
        <SettingSwitch
          title={$t('sharing')}
          subtitle={$t('sharing_sidebar_description')}
          bind:checked={$sidebarSettings.sharing}
        />
      </div>
    </div>
  </div>
</section>