feat-mobile: add lang and theme settings

packages/mobile/lib/contexts/dashboard/constants/settings-route-meta.constant.ts

@@ -1,12 +1,26 @@
 import { SETTINGS_ICON_SVG } from '@lib/auxiliary/icon'
 import features from '../../../../features/features'
-import { ChangePasswordView } from '../../../../views/dashboard/drawers/profile/views/settings'
+import { ChangePasswordView, LanguageView, ThemeView } from '../../../../views/dashboard/drawers/profile/views/settings'
 import { SettingsRoute } from '../../../routers'
 import { SettingsCategory } from '../enums'
 
-const { security } = features.settings
+const { general, security } = features.settings
 
 export const SETTINGS_ROUTE_META = {
+    [SettingsRoute.Theme]: {
+        name: `views.settings.${SettingsRoute.Theme}.title`,
+        category: SettingsCategory.General,
+        enabled: general?.[SettingsRoute.Theme]?.enabled,
+        icon: SETTINGS_ICON_SVG[SettingsRoute.Theme],
+        view: ThemeView,
+    },
+    [SettingsRoute.Language]: {
+        name: `views.settings.${SettingsRoute.Language}.title`,
+        category: SettingsCategory.General,
+        enabled: general?.[SettingsRoute.Language]?.enabled,
+        icon: SETTINGS_ICON_SVG[SettingsRoute.Language],
+        view: LanguageView,
+    },
     [SettingsRoute.ChangePassword]: {
         name: `views.settings.${SettingsRoute.ChangePassword}.title`,
         category: SettingsCategory.Security,

packages/mobile/views/dashboard/drawers/profile/ProfileDrawer.svelte

@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import { appSettings } from '@core/app'
     import { localize } from '@core/i18n'
     import { Drawer } from '../../../../components'
     import { SETTINGS_ROUTE_META } from '../../../../lib/contexts/dashboard'
@@ -21,6 +22,7 @@
     let activeRouter: ProfileRouter | SettingsRouter = $profileRouter
 
     $: $profileRoute, $settingsRoute, (setTitle(), setAllowBack(), setActiveRouter())
+    $: $appSettings.language, setTitle()
 
     function setActiveRouter(): void {
         if ($profileRoute === ProfileRoute.Settings) {

packages/mobile/views/dashboard/drawers/profile/views/settings/views/LanguageView.svelte

@@ -0,0 +1,16 @@
+<script lang="typescript">
+    import { Radio } from 'shared/components'
+    import { appSettings } from '@core/app'
+    import { SUPPORTED_LOCALES, setLanguage } from '@core/i18n'
+
+    let appLanguage: string = SUPPORTED_LOCALES[$appSettings.language]
+
+    $: languageList = Object.values(SUPPORTED_LOCALES).map((locale) => ({ value: locale, label: locale }))
+    $: appLanguage, setLanguage({ value: appLanguage })
+</script>
+
+<div class="flex flex-col overflow-y-auto">
+    {#each languageList as language}
+        <Radio value={language.value} bind:group={appLanguage} label={language.label} classes="p-2" />
+    {/each}
+</div>

packages/mobile/views/dashboard/drawers/profile/views/settings/views/ThemeView.svelte

@@ -0,0 +1,22 @@
+<script lang="typescript">
+    import { Radio, Text, Icon } from 'shared/components'
+    import { AppTheme, appSettings, shouldBeDarkMode } from '@core/app'
+    import { localize } from '@core/i18n'
+
+    let appTheme: AppTheme = $appSettings.theme
+
+    $: $appSettings.theme = appTheme
+    $: $appSettings.darkMode = shouldBeDarkMode($appSettings.theme)
+</script>
+
+<div class="flex flex-col">
+    <Radio value={'light'} bind:group={appTheme} label={localize('general.lightTheme')} classes="p-2" />
+    <Radio value={'dark'} bind:group={appTheme} label={localize('general.darkTheme')} classes="p-2" />
+    <Radio value={'system'} bind:group={appTheme} label={localize('general.systemTheme')} classes="p-2" />
+    {#if appTheme === 'system'}
+        <div class="flex flex-row items-center mb-5">
+            <Icon icon="info" classes="mr-3 fill-current text-black dark:text-white" />
+            <Text fontSize="14" lineHeight="5">{localize('views.settings.theme.advice')}</Text>
+        </div>
+    {/if}
+</div>

packages/mobile/views/dashboard/drawers/profile/views/settings/views/index.js

@@ -1,2 +1,4 @@
 export { default as ChangePasswordView } from './ChangePasswordView.svelte'
+export { default as LanguageView } from './LanguageView.svelte'
+export { default as ThemeView } from './ThemeView.svelte'
 export { default as SettingsIndexView } from './SettingsIndexView.svelte'