From 0e422b5a8fcecc026c3451edd00dcaa5332f8f82 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 5 Jan 2025 19:11:09 +0800
Subject: [PATCH] migrate settings store to composition API and typescript

---
 src/DesktopApp.vue                            |   2 +-
 src/MobileApp.vue                             |   2 +-
 src/components/desktop/AmountInput.vue        |   2 +-
 src/components/desktop/PieChart.vue           |   2 +-
 src/components/desktop/TrendsChart.vue        |   2 +-
 src/components/mobile/PieChart.vue            |   2 +-
 src/components/mobile/TrendsBarChart.vue      |   2 +-
 src/core/setting.ts                           |  92 ++++++
 src/lib/i18n.js                               |   4 +-
 src/lib/settings.ts                           | 311 +++---------------
 src/stores/index.js                           |   2 +-
 src/stores/overview.js                        |   2 +-
 src/stores/setting.js                         | 156 ---------
 src/stores/setting.ts                         | 187 +++++++++++
 src/stores/statistics.js                      |   2 +-
 src/stores/transaction.js                     |   2 +-
 src/stores/user.js                            |   2 +-
 src/views/desktop/ExchangeRatesPage.vue       |   2 +-
 src/views/desktop/ForgetPasswordPage.vue      |   2 +-
 src/views/desktop/HomePage.vue                |   2 +-
 src/views/desktop/LoginPage.vue               |   2 +-
 src/views/desktop/MainLayout.vue              |   2 +-
 src/views/desktop/ResetPasswordPage.vue       |   2 +-
 src/views/desktop/SignupPage.vue              |   2 +-
 src/views/desktop/UnlockPage.vue              |   2 +-
 src/views/desktop/VerifyEmailPage.vue         |   2 +-
 src/views/desktop/accounts/ListPage.vue       |   2 +-
 .../accounts/list/dialogs/EditDialog.vue      |   2 +-
 .../app/settings/tabs/AppBasicSettingTab.vue  |   2 +-
 .../app/settings/tabs/AppLockSettingTab.vue   |   2 +-
 .../settings/tabs/AppStatisticsSettingTab.vue |   2 +-
 .../cards/AccountFilterSettingsCard.vue       |   2 +-
 .../cards/CategoryFilterSettingsCard.vue      |   2 +-
 .../cards/MonthlyIncomeAndExpenseCard.vue     |   2 +-
 .../desktop/statistics/TransactionPage.vue    |   2 +-
 src/views/desktop/transactions/ListPage.vue   |   2 +-
 .../list/dialogs/BatchReplaceDialog.vue       |   2 +-
 .../transactions/list/dialogs/EditDialog.vue  |   2 +-
 .../list/dialogs/ImportDialog.vue             |   2 +-
 .../settings/tabs/UserBasicSettingTab.vue     |   2 +-
 .../tabs/UserDataManagementSettingTab.vue     |   2 +-
 .../settings/tabs/UserSecuritySettingTab.vue  |   2 +-
 src/views/mobile/ApplicationLockPage.vue      |   2 +-
 src/views/mobile/ExchangeRatesPage.vue        |   2 +-
 src/views/mobile/HomePage.vue                 |   2 +-
 src/views/mobile/LoginPage.vue                |   2 +-
 src/views/mobile/SettingsPage.vue             |   2 +-
 src/views/mobile/SignupPage.vue               |   2 +-
 src/views/mobile/UnlockPage.vue               |   2 +-
 src/views/mobile/accounts/EditPage.vue        |   2 +-
 src/views/mobile/accounts/ListPage.vue        |   2 +-
 .../settings/AccountFilterSettingsPage.vue    |   2 +-
 .../settings/CategoryFilterSettingsPage.vue   |   2 +-
 .../mobile/settings/PageSettingsPage.vue      |   2 +-
 .../mobile/settings/TextSizeSettingsPage.vue  |   2 +-
 src/views/mobile/statistics/SettingsPage.vue  |   2 +-
 .../mobile/statistics/TransactionPage.vue     |   2 +-
 .../mobile/transactions/AmountFilterPage.vue  |   2 +-
 src/views/mobile/transactions/EditPage.vue    |   2 +-
 src/views/mobile/transactions/ListPage.vue    |   2 +-
 src/views/mobile/users/DataManagementPage.vue |   2 +-
 src/views/mobile/users/UserProfilePage.vue    |   2 +-
 62 files changed, 376 insertions(+), 488 deletions(-)
 create mode 100644 src/core/setting.ts
 delete mode 100644 src/stores/setting.js
 create mode 100644 src/stores/setting.ts

diff --git a/src/DesktopApp.vue b/src/DesktopApp.vue
index 03fff19f..9057dba0 100644
--- a/src/DesktopApp.vue
+++ b/src/DesktopApp.vue
@@ -21,7 +21,7 @@ import { register } from 'register-service-worker';
 
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTokensStore } from '@/stores/token.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
diff --git a/src/MobileApp.vue b/src/MobileApp.vue
index 746bd3fa..01fdd938 100644
--- a/src/MobileApp.vue
+++ b/src/MobileApp.vue
@@ -10,7 +10,7 @@ import routes from './router/mobile.js';
 
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTokensStore } from '@/stores/token.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
diff --git a/src/components/desktop/AmountInput.vue b/src/components/desktop/AmountInput.vue
index 1bdad5d9..4d0d2a32 100644
--- a/src/components/desktop/AmountInput.vue
+++ b/src/components/desktop/AmountInput.vue
@@ -31,7 +31,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 
 import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
diff --git a/src/components/desktop/PieChart.vue b/src/components/desktop/PieChart.vue
index 458943fb..2a0fcb41 100644
--- a/src/components/desktop/PieChart.vue
+++ b/src/components/desktop/PieChart.vue
@@ -7,7 +7,7 @@
 import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 
 import { DEFAULT_ICON_COLOR, DEFAULT_CHART_COLORS } from '@/consts/color.ts';
diff --git a/src/components/desktop/TrendsChart.vue b/src/components/desktop/TrendsChart.vue
index f1fc6ea8..d89dfdf3 100644
--- a/src/components/desktop/TrendsChart.vue
+++ b/src/components/desktop/TrendsChart.vue
@@ -7,7 +7,7 @@
 import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 
 import { DateRangeScene } from '@/core/datetime.ts';
diff --git a/src/components/mobile/PieChart.vue b/src/components/mobile/PieChart.vue
index 04007bb8..1d87d03f 100644
--- a/src/components/mobile/PieChart.vue
+++ b/src/components/mobile/PieChart.vue
@@ -78,7 +78,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 
 import { DEFAULT_ICON_COLOR, DEFAULT_CHART_COLORS } from '@/consts/color.ts';
diff --git a/src/components/mobile/TrendsBarChart.vue b/src/components/mobile/TrendsBarChart.vue
index 53a3eb47..ee69c380 100644
--- a/src/components/mobile/TrendsBarChart.vue
+++ b/src/components/mobile/TrendsBarChart.vue
@@ -90,7 +90,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 
 import { DateRangeScene } from '@/core/datetime.ts';
diff --git a/src/core/setting.ts b/src/core/setting.ts
new file mode 100644
index 00000000..bb6c5f7a
--- /dev/null
+++ b/src/core/setting.ts
@@ -0,0 +1,92 @@
+import { WeekDay } from './datetime.ts';
+import { TimezoneTypeForStatistics } from './timezone.ts';
+import { CurrencySortingType } from './currency.ts';
+import {
+    CategoricalChartType,
+    TrendChartType,
+    ChartDataType,
+    ChartSortingType,
+    DEFAULT_CATEGORICAL_CHART_DATA_RANGE,
+    DEFAULT_TREND_CHART_DATA_RANGE
+} from './statistics.ts';
+import { DEFAULT_CURRENCY_CODE } from '@/consts/currency.ts';
+
+export type ApplicationSettingKey = string;
+export type ApplicationSettingValue = string | number | boolean | Record<string, ApplicationSettingSubValue>;
+export type ApplicationSettingSubValue = string | number | boolean | Record<string, boolean> | Record<string, number>;
+
+export interface BaseApplicationSetting {
+    [key: ApplicationSettingKey]: ApplicationSettingValue;
+}
+
+export interface ApplicationSettings extends BaseApplicationSetting {
+    theme: string;
+    fontSize: number;
+    timeZone: string;
+    debug: boolean;
+    applicationLock: boolean;
+    applicationLockWebAuthn: boolean;
+    autoUpdateExchangeRatesData: boolean;
+    autoSaveTransactionDraft: string;
+    autoGetCurrentGeoLocation: boolean;
+    showAmountInHomePage: boolean;
+    timezoneUsedForStatisticsInHomePage: number;
+    itemsCountInTransactionListPage: number;
+    showTotalAmountInTransactionListPage: boolean;
+    showTagInTransactionListPage: boolean;
+    showAccountBalance: boolean;
+    currencySortByInExchangeRatesPage: number;
+    statistics: {
+        defaultChartDataType: number;
+        defaultTimezoneType: number;
+        defaultAccountFilter: Record<string, boolean>;
+        defaultTransactionCategoryFilter: Record<string, boolean>;
+        defaultSortingType: number;
+        defaultCategoricalChartType: number;
+        defaultCategoricalChartDataRangeType: number;
+        defaultTrendChartType: number;
+        defaultTrendChartDataRangeType: number;
+    };
+    animate: boolean;
+}
+
+export interface LocaleDefaultSettings {
+    currency: string;
+    firstDayOfWeek: number;
+}
+
+export const DEFAULT_APPLICATION_SETTINGS: ApplicationSettings = {
+    theme: 'auto',
+    fontSize: 1,
+    timeZone: '',
+    debug: false,
+    applicationLock: false,
+    applicationLockWebAuthn: false,
+    autoUpdateExchangeRatesData: true,
+    autoSaveTransactionDraft: 'disabled',
+    autoGetCurrentGeoLocation: false,
+    showAmountInHomePage: true,
+    timezoneUsedForStatisticsInHomePage: TimezoneTypeForStatistics.Default.type,
+    itemsCountInTransactionListPage: 15,
+    showTotalAmountInTransactionListPage: true,
+    showTagInTransactionListPage: true,
+    showAccountBalance: true,
+    currencySortByInExchangeRatesPage: CurrencySortingType.Default.type,
+    statistics: {
+        defaultChartDataType: ChartDataType.Default.type,
+        defaultTimezoneType: TimezoneTypeForStatistics.Default.type,
+        defaultAccountFilter: {},
+        defaultTransactionCategoryFilter: {},
+        defaultSortingType: ChartSortingType.Default.type,
+        defaultCategoricalChartType: CategoricalChartType.Default.type,
+        defaultCategoricalChartDataRangeType: DEFAULT_CATEGORICAL_CHART_DATA_RANGE.type,
+        defaultTrendChartType: TrendChartType.Default.type,
+        defaultTrendChartDataRangeType: DEFAULT_TREND_CHART_DATA_RANGE.type,
+    },
+    animate: true
+};
+
+export const DEFAULT_LOCALE_SETTINGS: LocaleDefaultSettings = {
+    currency: DEFAULT_CURRENCY_CODE,
+    firstDayOfWeek: WeekDay.DefaultFirstDay.type
+};
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 1defafa4..a9d33718 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -1508,8 +1508,8 @@ function setLanguage(i18nGlobal, locale, force) {
     }
 
     return {
-        defaultCurrency: defaultCurrency,
-        defaultFirstDayOfWeek: defaultFirstDayOfWeek
+        currency: defaultCurrency,
+        firstDayOfWeek: defaultFirstDayOfWeek
     };
 }
 
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
index c8e3704c..16564192 100644
--- a/src/lib/settings.ts
+++ b/src/lib/settings.ts
@@ -1,57 +1,20 @@
-import { TimezoneTypeForStatistics } from '@/core/timezone.ts';
-import { CurrencySortingType } from '@/core/currency.ts';
+import type {
+    ApplicationSettingKey,
+    ApplicationSettingValue,
+    ApplicationSettingSubValue,
+    BaseApplicationSetting,
+    ApplicationSettings,
+    LocaleDefaultSettings
+} from '@/core/setting.ts';
+
 import {
-    CategoricalChartType,
-    TrendChartType,
-    ChartDataType,
-    ChartSortingType,
-    DEFAULT_CATEGORICAL_CHART_DATA_RANGE,
-    DEFAULT_TREND_CHART_DATA_RANGE
-} from '@/core/statistics.ts';
-import { isObject } from './common.ts';
+    DEFAULT_APPLICATION_SETTINGS,
+    DEFAULT_LOCALE_SETTINGS
+} from '@/core/setting.ts';
 
 const settingsLocalStorageKey: string = 'ebk_app_settings';
 
-export type ApplicationSettingKey = string;
-export type ApplicationSettingValue = string | number | boolean | Record<string, ApplicationSettingSubValue>;
-export type ApplicationSettingSubValue = string | number | boolean | Record<string, boolean> | Record<string, number>;
-
-export interface ApplicationSettings {
-    [key: ApplicationSettingKey]: ApplicationSettingValue;
-}
-
-const defaultSettings: ApplicationSettings = {
-    theme: 'auto',
-    fontSize: 1,
-    timeZone: '',
-    debug: false,
-    applicationLock: false,
-    applicationLockWebAuthn: false,
-    autoUpdateExchangeRatesData: true,
-    autoSaveTransactionDraft: 'disabled',
-    autoGetCurrentGeoLocation: false,
-    showAmountInHomePage: true,
-    timezoneUsedForStatisticsInHomePage: TimezoneTypeForStatistics.Default.type,
-    itemsCountInTransactionListPage: 15,
-    showTotalAmountInTransactionListPage: true,
-    showTagInTransactionListPage: true,
-    showAccountBalance: true,
-    currencySortByInExchangeRatesPage: CurrencySortingType.Default.type,
-    statistics: {
-        defaultChartDataType: ChartDataType.Default.type,
-        defaultTimezoneType: TimezoneTypeForStatistics.Default.type,
-        defaultAccountFilter: {},
-        defaultTransactionCategoryFilter: {},
-        defaultSortingType: ChartSortingType.Default.type,
-        defaultCategoricalChartType: CategoricalChartType.Default.type,
-        defaultCategoricalChartDataRangeType: DEFAULT_CATEGORICAL_CHART_DATA_RANGE.type,
-        defaultTrendChartType: TrendChartType.Default.type,
-        defaultTrendChartDataRangeType: DEFAULT_TREND_CHART_DATA_RANGE.type,
-    },
-    animate: true
-};
-
-function getOriginalSettings(): ApplicationSettings {
+function getStoredApplicationSettings(): BaseApplicationSetting {
     try {
         const storageData = localStorage.getItem(settingsLocalStorageKey) || '{}';
         return JSON.parse(storageData);
@@ -61,62 +24,52 @@ function getOriginalSettings(): ApplicationSettings {
     }
 }
 
-function getFinalSettings(): ApplicationSettings {
-    const originalSettings = getOriginalSettings();
+export function getApplicationSettings(): ApplicationSettings {
+    const storedApplicationSettings = getStoredApplicationSettings();
 
-    for (const key in originalSettings) {
-        if (!Object.prototype.hasOwnProperty.call(originalSettings, key)) {
+    for (const key in storedApplicationSettings) {
+        if (!Object.prototype.hasOwnProperty.call(storedApplicationSettings, key)) {
             continue;
         }
 
-        if (typeof(defaultSettings[key]) === 'object') {
-            originalSettings[key] = Object.assign({}, defaultSettings[key], originalSettings[key]);
+        if (typeof(DEFAULT_APPLICATION_SETTINGS[key]) === 'object') {
+            storedApplicationSettings[key] = Object.assign({}, DEFAULT_APPLICATION_SETTINGS[key], storedApplicationSettings[key]);
         }
     }
 
-    return Object.assign({}, defaultSettings, originalSettings);
+    return Object.assign({}, DEFAULT_APPLICATION_SETTINGS, storedApplicationSettings);
 }
 
-function setSettings(settings: ApplicationSettings): void {
+export function getLocaleDefaultSettings(): LocaleDefaultSettings {
+    return Object.assign({}, DEFAULT_LOCALE_SETTINGS);
+}
+
+function updateApplicationSettings(settings: ApplicationSettings): void {
     const storageData = JSON.stringify(settings);
     return localStorage.setItem(settingsLocalStorageKey, storageData);
 }
 
-function getOption(key: ApplicationSettingKey): ApplicationSettingValue | undefined {
-    return getFinalSettings()[key];
-}
-
-function getSubOption(key: ApplicationSettingKey, subKey: ApplicationSettingKey): ApplicationSettingSubValue | undefined {
-    const options = getFinalSettings()[key];
-
-    if (!isObject(options)) {
-        return undefined;
-    }
-
-    return (options as Record<string, ApplicationSettingSubValue>)[subKey];
-}
-
-function setOption(key: ApplicationSettingKey, value: ApplicationSettingValue): void {
-    if (!Object.prototype.hasOwnProperty.call(defaultSettings, key)) {
+export function updateApplicationSettingsValue(key: ApplicationSettingKey, value: ApplicationSettingValue): void {
+    if (!Object.prototype.hasOwnProperty.call(DEFAULT_APPLICATION_SETTINGS, key)) {
         return;
     }
 
-    const settings = getFinalSettings();
+    const settings = getApplicationSettings();
     settings[key] = value;
 
-    return setSettings(settings);
+    return updateApplicationSettings(settings);
 }
 
-function setSubOption(key: ApplicationSettingKey, subKey: ApplicationSettingKey, value: ApplicationSettingSubValue): void {
-    if (!Object.prototype.hasOwnProperty.call(defaultSettings, key)) {
+export function updateApplicationSettingsSubValue(key: ApplicationSettingKey, subKey: ApplicationSettingKey, value: ApplicationSettingSubValue): void {
+    if (!Object.prototype.hasOwnProperty.call(DEFAULT_APPLICATION_SETTINGS, key)) {
         return;
     }
 
-    if (!Object.prototype.hasOwnProperty.call(defaultSettings[key], subKey)) {
+    if (!Object.prototype.hasOwnProperty.call(DEFAULT_APPLICATION_SETTINGS[key], subKey)) {
         return;
     }
 
-    const settings = getFinalSettings();
+    const settings = getApplicationSettings();
     let options = settings[key];
 
     if (!options) {
@@ -126,211 +79,23 @@ function setSubOption(key: ApplicationSettingKey, subKey: ApplicationSettingKey,
     (options as Record<string, ApplicationSettingSubValue>)[subKey] = value;
     settings[key] = options;
 
-    return setSettings(settings);
+    return updateApplicationSettings(settings);
 }
 
 export function isEnableDebug(): boolean {
-    return getOption('debug') as boolean;
+    return getApplicationSettings().debug;
 }
 
 export function getTheme(): string {
-    return getOption('theme') as string;
-}
-
-export function setTheme(value: string): void {
-    return setOption('theme', value);
-}
-
-export function getFontSize(): number {
-    return getOption('fontSize') as number;
-}
-
-export function setFontSize(value: number): void {
-    return setOption('fontSize', value);
-}
-
-export function getTimeZone(): string {
-    return getOption('timeZone') as string;
-}
-
-export function setTimeZone(value: string): void {
-    return setOption('timeZone', value);
+    return getApplicationSettings().theme;
 }
 
 export function isEnableApplicationLock(): boolean {
-    return getOption('applicationLock') as boolean;
-}
-
-export function setEnableApplicationLock(value: boolean): void {
-    return setOption('applicationLock', value);
-}
-
-export function isEnableApplicationLockWebAuthn(): boolean {
-    return getOption('applicationLockWebAuthn') as boolean;
-}
-
-export function setEnableApplicationLockWebAuthn(value: boolean): void {
-    return setOption('applicationLockWebAuthn', value);
-}
-
-export function isAutoUpdateExchangeRatesData(): boolean {
-    return getOption('autoUpdateExchangeRatesData') as boolean;
-}
-
-export function setAutoUpdateExchangeRatesData(value: boolean): void {
-    setOption('autoUpdateExchangeRatesData', value);
-}
-
-export function getAutoSaveTransactionDraft(): boolean {
-    return getOption('autoSaveTransactionDraft') as boolean;
-}
-
-export function setAutoSaveTransactionDraft(value: boolean): void {
-    setOption('autoSaveTransactionDraft', value);
-}
-
-export function isAutoGetCurrentGeoLocation(): boolean {
-    return getOption('autoGetCurrentGeoLocation') as boolean;
-}
-
-export function setAutoGetCurrentGeoLocation(value: boolean): void {
-    setOption('autoGetCurrentGeoLocation', value);
-}
-
-export function isShowAmountInHomePage(): boolean {
-    return getOption('showAmountInHomePage') as boolean;
-}
-
-export function setShowAmountInHomePage(value: boolean): void {
-    setOption('showAmountInHomePage', value);
-}
-
-export function getTimezoneUsedForStatisticsInHomePage(): number {
-    return getOption('timezoneUsedForStatisticsInHomePage') as number;
-}
-
-export function setTimezoneUsedForStatisticsInHomePage(value: number): void {
-    setOption('timezoneUsedForStatisticsInHomePage', value);
-}
-
-export function getItemsCountInTransactionListPage(): number {
-    return getOption('itemsCountInTransactionListPage') as number;
-}
-
-export function setItemsCountInTransactionListPage(value: number): void {
-    setOption('itemsCountInTransactionListPage', value);
-}
-
-export function isShowTotalAmountInTransactionListPage(): boolean {
-    return getOption('showTotalAmountInTransactionListPage') as boolean;
-}
-
-export function setShowTotalAmountInTransactionListPage(value: boolean): void {
-    setOption('showTotalAmountInTransactionListPage', value);
-}
-
-export function isShowTagInTransactionListPage(): boolean {
-    return getOption('showTagInTransactionListPage') as boolean;
-}
-
-export function setShowTagInTransactionListPage(value: boolean): void {
-    setOption('showTagInTransactionListPage', value);
-}
-
-export function isShowAccountBalance(): boolean {
-    return getOption('showAccountBalance') as boolean;
-}
-
-export function setShowAccountBalance(value: boolean): void {
-    setOption('showAccountBalance', value);
-}
-
-export function getCurrencySortByInExchangeRatesPage(): number {
-    return getOption('currencySortByInExchangeRatesPage') as number;
-}
-
-export function setCurrencySortByInExchangeRatesPage(value: number): void {
-    setOption('currencySortByInExchangeRatesPage', value);
-}
-
-export function getStatisticsDefaultChartDataType(): number {
-    return getSubOption('statistics', 'defaultChartDataType') as number;
-}
-
-export function setStatisticsDefaultChartDataType(value: number): void {
-    setSubOption('statistics', 'defaultChartDataType', value);
-}
-
-export function getStatisticsDefaultTimezoneType(): number {
-    return getSubOption('statistics', 'defaultTimezoneType') as number;
-}
-
-export function setStatisticsDefaultTimezoneType(value: number): void {
-    setSubOption('statistics', 'defaultTimezoneType', value);
-}
-
-export function getStatisticsDefaultAccountFilter(): Record<string, boolean> {
-    return getSubOption('statistics', 'defaultAccountFilter') as Record<string, boolean>;
-}
-
-export function setStatisticsDefaultAccountFilter(value: Record<string, boolean>): void {
-    setSubOption('statistics', 'defaultAccountFilter', value);
-}
-
-export function getStatisticsDefaultTransactionCategoryFilter(): Record<string, boolean> {
-    return getSubOption('statistics', 'defaultTransactionCategoryFilter') as Record<string, boolean>;
-}
-
-export function setStatisticsDefaultTransactionCategoryFilter(value: Record<string, boolean>): void {
-    setSubOption('statistics', 'defaultTransactionCategoryFilter', value);
-}
-
-export function getStatisticsSortingType(): number {
-    return getSubOption('statistics', 'defaultSortingType') as number;
-}
-
-export function setStatisticsSortingType(value: number): void {
-    setSubOption('statistics', 'defaultSortingType', value);
-}
-
-export function getStatisticsDefaultCategoricalChartType(): number {
-    return getSubOption('statistics', 'defaultCategoricalChartType') as number;
-}
-
-export function setStatisticsDefaultCategoricalChartType(value: number): void {
-    setSubOption('statistics', 'defaultCategoricalChartType', value);
-}
-
-export function getStatisticsDefaultCategoricalChartDataRange(): number {
-    return getSubOption('statistics', 'defaultCategoricalChartDataRangeType') as number;
-}
-
-export function setStatisticsDefaultCategoricalChartDataRange(value: number): void {
-    setSubOption('statistics', 'defaultCategoricalChartDataRangeType', value);
-}
-
-export function getStatisticsDefaultTrendChartType(): number {
-    return getSubOption('statistics', 'defaultTrendChartType') as number;
-}
-
-export function setStatisticsDefaultTrendChartType(value: number): void {
-    setSubOption('statistics', 'defaultTrendChartType', value);
-}
-
-export function getStatisticsDefaultTrendChartDataRange(): number {
-    return getSubOption('statistics', 'defaultTrendChartDataRangeType') as number;
-}
-
-export function setStatisticsDefaultTrendChartDataRange(value: number): void {
-    setSubOption('statistics', 'defaultTrendChartDataRangeType', value);
+    return getApplicationSettings().applicationLock;
 }
 
 export function isEnableAnimate(): boolean {
-    return getOption('animate') as boolean;
-}
-
-export function setEnableAnimate(value: boolean) {
-    return setOption('animate', value);
+    return getApplicationSettings().animate;
 }
 
 export function clearSettings(): void {
diff --git a/src/stores/index.js b/src/stores/index.js
index ec48e215..1ca50a27 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-import { useSettingsStore } from './setting.js';
+import { useSettingsStore } from './setting.ts';
 import { useUserStore } from './user.js';
 import { useAccountsStore } from './account.js';
 import { useTransactionCategoriesStore } from './transactionCategory.js';
diff --git a/src/stores/overview.js b/src/stores/overview.js
index c783a33d..54ceeb55 100644
--- a/src/stores/overview.js
+++ b/src/stores/overview.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from './user.js';
 import { useExchangeRatesStore } from './exchangeRates.js';
 
diff --git a/src/stores/setting.js b/src/stores/setting.js
deleted file mode 100644
index 672f9040..00000000
--- a/src/stores/setting.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import { defineStore } from 'pinia';
-
-import { WeekDay } from '@/core/datetime.ts';
-import { DEFAULT_CURRENCY_CODE } from '@/consts/currency.ts';
-import * as settings from '@/lib/settings.ts';
-
-export const useSettingsStore = defineStore('settings', {
-    state: () => ({
-        appSettings: {
-            theme: settings.getTheme(),
-            fontSize: settings.getFontSize(),
-            timeZone: settings.getTimeZone(),
-            applicationLock: settings.isEnableApplicationLock(),
-            applicationLockWebAuthn: settings.isEnableApplicationLockWebAuthn(),
-            autoUpdateExchangeRatesData: settings.isAutoUpdateExchangeRatesData(),
-            autoSaveTransactionDraft: settings.getAutoSaveTransactionDraft(),
-            autoGetCurrentGeoLocation: settings.isAutoGetCurrentGeoLocation(),
-            showAmountInHomePage: settings.isShowAmountInHomePage(),
-            timezoneUsedForStatisticsInHomePage: settings.getTimezoneUsedForStatisticsInHomePage(),
-            itemsCountInTransactionListPage: settings.getItemsCountInTransactionListPage(),
-            showTotalAmountInTransactionListPage: settings.isShowTotalAmountInTransactionListPage(),
-            showTagInTransactionListPage: settings.isShowTagInTransactionListPage(),
-            showAccountBalance: settings.isShowAccountBalance(),
-            currencySortByInExchangeRatesPage: settings.getCurrencySortByInExchangeRatesPage(),
-            statistics: {
-                defaultChartDataType: settings.getStatisticsDefaultChartDataType(),
-                defaultTimezoneType: settings.getStatisticsDefaultTimezoneType(),
-                defaultAccountFilter: settings.getStatisticsDefaultAccountFilter(),
-                defaultTransactionCategoryFilter: settings.getStatisticsDefaultTransactionCategoryFilter(),
-                defaultSortingType: settings.getStatisticsSortingType(),
-                defaultCategoricalChartType: settings.getStatisticsDefaultCategoricalChartType(),
-                defaultCategoricalChartDataRangeType: settings.getStatisticsDefaultCategoricalChartDataRange(),
-                defaultTrendChartType: settings.getStatisticsDefaultTrendChartType(),
-                defaultTrendChartDataRangeType: settings.getStatisticsDefaultTrendChartDataRange(),
-            },
-            animate: settings.isEnableAnimate()
-        },
-        localeDefaultSettings: {
-            currency: DEFAULT_CURRENCY_CODE,
-            firstDayOfWeek: WeekDay.DefaultFirstDay.type
-        }
-    }),
-    actions: {
-        setTheme(value) {
-            settings.setTheme(value);
-            this.appSettings.theme = value;
-        },
-        setFontSize(value) {
-            settings.setFontSize(value);
-            this.appSettings.fontSize = value;
-        },
-        setTimeZone(value) {
-            settings.setTimeZone(value);
-            this.appSettings.timeZone = value;
-        },
-        setEnableApplicationLock(value) {
-            settings.setEnableApplicationLock(value);
-            this.appSettings.applicationLock = value;
-        },
-        setEnableApplicationLockWebAuthn(value) {
-            settings.setEnableApplicationLockWebAuthn(value);
-            this.appSettings.applicationLockWebAuthn = value;
-        },
-        setAutoUpdateExchangeRatesData(value) {
-            settings.setAutoUpdateExchangeRatesData(value);
-            this.appSettings.autoUpdateExchangeRatesData = value;
-        },
-        setAutoSaveTransactionDraft(value) {
-            settings.setAutoSaveTransactionDraft(value);
-            this.appSettings.autoSaveTransactionDraft = value;
-        },
-        setAutoGetCurrentGeoLocation(value) {
-            settings.setAutoGetCurrentGeoLocation(value);
-            this.appSettings.autoGetCurrentGeoLocation = value;
-        },
-        setShowAmountInHomePage(value) {
-            settings.setShowAmountInHomePage(value);
-            this.appSettings.showAmountInHomePage = value;
-        },
-        setTimezoneUsedForStatisticsInHomePage(value) {
-            settings.setTimezoneUsedForStatisticsInHomePage(value);
-            this.appSettings.timezoneUsedForStatisticsInHomePage = value;
-        },
-        setItemsCountInTransactionListPage(value) {
-            settings.setItemsCountInTransactionListPage(value);
-            this.appSettings.itemsCountInTransactionListPage = value;
-        },
-        setShowTotalAmountInTransactionListPage(value) {
-            settings.setShowTotalAmountInTransactionListPage(value);
-            this.appSettings.showTotalAmountInTransactionListPage = value;
-        },
-        setShowTagInTransactionListPage(value) {
-            settings.setShowTagInTransactionListPage(value);
-            this.appSettings.showTagInTransactionListPage = value;
-        },
-        setShowAccountBalance(value) {
-            settings.setShowAccountBalance(value);
-            this.appSettings.showAccountBalance = value;
-        },
-        setCurrencySortByInExchangeRatesPage(value) {
-            settings.setCurrencySortByInExchangeRatesPage(value);
-            this.appSettings.currencySortByInExchangeRatesPage = value;
-        },
-        setStatisticsDefaultChartDataType(value) {
-            settings.setStatisticsDefaultChartDataType(value);
-            this.appSettings.statistics.defaultChartDataType = value;
-        },
-        setStatisticsDefaultTimezoneType(value) {
-            settings.setStatisticsDefaultTimezoneType(value);
-            this.appSettings.statistics.defaultTimezoneType = value;
-        },
-        setStatisticsDefaultAccountFilter(value) {
-            settings.setStatisticsDefaultAccountFilter(value);
-            this.appSettings.statistics.defaultAccountFilter = value;
-        },
-        setStatisticsDefaultTransactionCategoryFilter(value) {
-            settings.setStatisticsDefaultTransactionCategoryFilter(value);
-            this.appSettings.statistics.defaultTransactionCategoryFilter = value;
-        },
-        setStatisticsSortingType(value) {
-            settings.setStatisticsSortingType(value);
-            this.appSettings.statistics.defaultSortingType = value;
-        },
-        setStatisticsDefaultCategoricalChartType(value) {
-            settings.setStatisticsDefaultCategoricalChartType(value);
-            this.appSettings.statistics.defaultCategoricalChartType = value;
-        },
-        setStatisticsDefaultCategoricalChartDateRange(value) {
-            settings.setStatisticsDefaultCategoricalChartDataRange(value);
-            this.appSettings.statistics.defaultCategoricalChartDataRangeType = value;
-        },
-        setStatisticsDefaultTrendChartType(value) {
-            settings.setStatisticsDefaultTrendChartType(value);
-            this.appSettings.statistics.defaultTrendChartType = value;
-        },
-        setStatisticsDefaultTrendChartDateRange(value) {
-            settings.setStatisticsDefaultTrendChartDataRange(value);
-            this.appSettings.statistics.defaultTrendChartDataRangeType = value;
-        },
-        setEnableAnimate(value) {
-            settings.setEnableAnimate(value);
-            this.appSettings.animate = value;
-        },
-        clearAppSettings() {
-            settings.clearSettings();
-        },
-        updateLocalizedDefaultSettings(localeDefaultSettings) {
-            if (!localeDefaultSettings) {
-                return;
-            }
-
-            this.localeDefaultSettings.currency = localeDefaultSettings.defaultCurrency;
-            this.localeDefaultSettings.firstDayOfWeek = localeDefaultSettings.defaultFirstDayOfWeek;
-        }
-    }
-});
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
new file mode 100644
index 00000000..9f1c9823
--- /dev/null
+++ b/src/stores/setting.ts
@@ -0,0 +1,187 @@
+import { type Ref, ref } from 'vue';
+import { defineStore } from 'pinia';
+
+import type { ApplicationSettings, LocaleDefaultSettings } from '@/core/setting.ts';
+import {
+    getApplicationSettings,
+    getLocaleDefaultSettings,
+    updateApplicationSettingsValue,
+    updateApplicationSettingsSubValue,
+    clearSettings
+} from '@/lib/settings.ts';
+
+export const useSettingsStore = defineStore('settings', () => {
+    const appSettings: Ref<ApplicationSettings> = ref(getApplicationSettings());
+    const localeDefaultSettings: Ref<LocaleDefaultSettings> = ref(getLocaleDefaultSettings());
+
+    function setTheme(value: string): void {
+        updateApplicationSettingsValue('theme', value);
+        appSettings.value.theme = value;
+    }
+
+    function setFontSize(value: number): void {
+        updateApplicationSettingsValue('fontSize', value);
+        appSettings.value.fontSize = value;
+    }
+
+    function setTimeZone(value: string): void {
+        updateApplicationSettingsValue('timeZone', value);
+        appSettings.value.timeZone = value;
+    }
+
+    function setEnableApplicationLock(value: boolean): void {
+        updateApplicationSettingsValue('applicationLock', value);
+        appSettings.value.applicationLock = value;
+    }
+
+    function setEnableApplicationLockWebAuthn(value: boolean): void {
+        updateApplicationSettingsValue('applicationLockWebAuthn', value);
+        appSettings.value.applicationLockWebAuthn = value;
+    }
+
+    function setAutoUpdateExchangeRatesData(value: boolean): void {
+        updateApplicationSettingsValue('autoUpdateExchangeRatesData', value);
+        appSettings.value.autoUpdateExchangeRatesData = value;
+    }
+
+    function setAutoSaveTransactionDraft(value: string): void {
+        updateApplicationSettingsValue('autoSaveTransactionDraft', value);
+        appSettings.value.autoSaveTransactionDraft = value;
+    }
+
+    function setAutoGetCurrentGeoLocation(value: boolean): void {
+        updateApplicationSettingsValue('autoGetCurrentGeoLocation', value);
+        appSettings.value.autoGetCurrentGeoLocation = value;
+    }
+
+    function setShowAmountInHomePage(value: boolean): void {
+        updateApplicationSettingsValue('showAmountInHomePage', value);
+        appSettings.value.showAmountInHomePage = value;
+    }
+
+    function setTimezoneUsedForStatisticsInHomePage(value: number): void {
+        updateApplicationSettingsValue('timezoneUsedForStatisticsInHomePage', value);
+        appSettings.value.timezoneUsedForStatisticsInHomePage = value;
+    }
+
+    function setItemsCountInTransactionListPage(value: number): void {
+        updateApplicationSettingsValue('itemsCountInTransactionListPage', value);
+        appSettings.value.itemsCountInTransactionListPage = value;
+    }
+
+    function setShowTotalAmountInTransactionListPage(value: boolean): void {
+        updateApplicationSettingsValue('showTotalAmountInTransactionListPage', value);
+        appSettings.value.showTotalAmountInTransactionListPage = value;
+    }
+
+    function setShowTagInTransactionListPage(value: boolean): void {
+        updateApplicationSettingsValue('showTagInTransactionListPage', value);
+        appSettings.value.showTagInTransactionListPage = value;
+    }
+
+    function setShowAccountBalance(value: boolean): void {
+        updateApplicationSettingsValue('showAccountBalance', value);
+        appSettings.value.showAccountBalance = value;
+    }
+
+    function setCurrencySortByInExchangeRatesPage(value: number): void {
+        updateApplicationSettingsValue('currencySortByInExchangeRatesPage', value);
+        appSettings.value.currencySortByInExchangeRatesPage = value;
+    }
+
+    function setStatisticsDefaultChartDataType(value: number): void {
+        updateApplicationSettingsSubValue('statistics', 'defaultChartDataType', value);
+        appSettings.value.statistics.defaultChartDataType = value;
+    }
+
+    function setStatisticsDefaultTimezoneType(value: number): void {
+        updateApplicationSettingsSubValue('statistics', 'defaultTimezoneType', value);
+        appSettings.value.statistics.defaultTimezoneType = value;
+    }
+
+    function setStatisticsDefaultAccountFilter(value: Record<string, boolean>): void {
+        updateApplicationSettingsSubValue('statistics', 'defaultAccountFilter', value);
+        appSettings.value.statistics.defaultAccountFilter = value;
+    }
+
+    function setStatisticsDefaultTransactionCategoryFilter(value: Record<string, boolean>): void {
+        updateApplicationSettingsSubValue('statistics', 'defaultTransactionCategoryFilter', value);
+        appSettings.value.statistics.defaultTransactionCategoryFilter = value;
+    }
+
+    function setStatisticsSortingType(value: number): void {
+        updateApplicationSettingsSubValue('statistics', 'defaultSortingType', value);
+        appSettings.value.statistics.defaultSortingType = value;
+    }
+
+    function setStatisticsDefaultCategoricalChartType(value: number): void {
+        updateApplicationSettingsSubValue('statistics', 'defaultCategoricalChartType', value);
+        appSettings.value.statistics.defaultCategoricalChartType = value;
+    }
+
+    function setStatisticsDefaultCategoricalChartDateRange(value: number): void {
+        updateApplicationSettingsSubValue('statistics', 'defaultCategoricalChartDataRangeType', value);
+        appSettings.value.statistics.defaultCategoricalChartDataRangeType = value;
+    }
+
+    function setStatisticsDefaultTrendChartType(value: number): void {
+        updateApplicationSettingsSubValue('statistics', 'defaultTrendChartType', value);
+        appSettings.value.statistics.defaultTrendChartType = value;
+    }
+
+    function setStatisticsDefaultTrendChartDateRange(value: number): void {
+        updateApplicationSettingsSubValue('statistics', 'defaultTrendChartDataRangeType', value);
+        appSettings.value.statistics.defaultTrendChartDataRangeType = value;
+    }
+
+    function setEnableAnimate(value: boolean): void {
+        updateApplicationSettingsValue('animate', value);
+        appSettings.value.animate = value;
+    }
+
+    function clearAppSettings(): void {
+        clearSettings();
+        appSettings.value = getApplicationSettings();
+    }
+
+    function updateLocalizedDefaultSettings(newLocaleDefaultSettings: LocaleDefaultSettings) {
+        if (!newLocaleDefaultSettings) {
+            return;
+        }
+
+        localeDefaultSettings.value.currency = newLocaleDefaultSettings.currency;
+        localeDefaultSettings.value.firstDayOfWeek = newLocaleDefaultSettings.firstDayOfWeek;
+    }
+
+    return {
+        appSettings,
+        localeDefaultSettings,
+        setTheme,
+        setFontSize,
+        setTimeZone,
+        setEnableApplicationLock,
+        setEnableApplicationLockWebAuthn,
+        setAutoUpdateExchangeRatesData,
+        setAutoSaveTransactionDraft,
+        setAutoGetCurrentGeoLocation,
+        setShowAmountInHomePage,
+        setTimezoneUsedForStatisticsInHomePage,
+        setItemsCountInTransactionListPage,
+        setShowTotalAmountInTransactionListPage,
+        setShowTagInTransactionListPage,
+        setShowAccountBalance,
+        setCurrencySortByInExchangeRatesPage,
+        setStatisticsDefaultChartDataType,
+        setStatisticsDefaultTimezoneType,
+        setStatisticsDefaultAccountFilter,
+        setStatisticsDefaultTransactionCategoryFilter,
+        setStatisticsSortingType,
+        setStatisticsDefaultCategoricalChartType,
+        setStatisticsDefaultCategoricalChartDateRange,
+        setStatisticsDefaultTrendChartType,
+        setStatisticsDefaultTrendChartDateRange,
+        setEnableAnimate,
+        clearAppSettings,
+        updateLocalizedDefaultSettings
+    };
+});
diff --git a/src/stores/statistics.js b/src/stores/statistics.js
index df2afe69..0708f8e0 100644
--- a/src/stores/statistics.js
+++ b/src/stores/statistics.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-import { useSettingsStore } from './setting.js';
+import { useSettingsStore } from './setting.ts';
 import { useUserStore } from './user.js';
 import { useAccountsStore } from './account.js';
 import { useTransactionCategoriesStore } from './transactionCategory.js';
diff --git a/src/stores/transaction.js b/src/stores/transaction.js
index e57130c1..0d231dfe 100644
--- a/src/stores/transaction.js
+++ b/src/stores/transaction.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-import { useSettingsStore } from './setting.js';
+import { useSettingsStore } from './setting.ts';
 import { useUserStore } from './user.js';
 import { useAccountsStore } from './account.js';
 import { useTransactionCategoriesStore } from './transactionCategory.js';
diff --git a/src/stores/user.js b/src/stores/user.js
index b9906e70..e9026842 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-import { useSettingsStore } from './setting.js';
+import { useSettingsStore } from './setting.ts';
 
 import userState from '@/lib/userstate.ts';
 import services from '@/lib/services.ts';
diff --git a/src/views/desktop/ExchangeRatesPage.vue b/src/views/desktop/ExchangeRatesPage.vue
index 184e75b8..d2d08442 100644
--- a/src/views/desktop/ExchangeRatesPage.vue
+++ b/src/views/desktop/ExchangeRatesPage.vue
@@ -137,7 +137,7 @@
 import { useDisplay } from 'vuetify';
 
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
diff --git a/src/views/desktop/ForgetPasswordPage.vue b/src/views/desktop/ForgetPasswordPage.vue
index f8b56010..5bed1956 100644
--- a/src/views/desktop/ForgetPasswordPage.vue
+++ b/src/views/desktop/ForgetPasswordPage.vue
@@ -110,7 +110,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue
index 1ccd2f9a..4d5861d4 100644
--- a/src/views/desktop/HomePage.vue
+++ b/src/views/desktop/HomePage.vue
@@ -191,7 +191,7 @@ import IncomeExpenseOverviewCard from './overview/cards/IncomeExpenseOverviewCar
 import MonthlyIncomeAndExpenseCard from './overview/cards/MonthlyIncomeAndExpenseCard.vue';
 
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useOverviewStore } from '@/stores/overview.js';
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index 96815cdf..e5f41b12 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -172,7 +172,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
diff --git a/src/views/desktop/MainLayout.vue b/src/views/desktop/MainLayout.vue
index 3f01cb6a..99725d41 100644
--- a/src/views/desktop/MainLayout.vue
+++ b/src/views/desktop/MainLayout.vue
@@ -198,7 +198,7 @@ import { useRoute } from 'vue-router';
 
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
diff --git a/src/views/desktop/ResetPasswordPage.vue b/src/views/desktop/ResetPasswordPage.vue
index 40fafe7b..cdb08298 100644
--- a/src/views/desktop/ResetPasswordPage.vue
+++ b/src/views/desktop/ResetPasswordPage.vue
@@ -135,7 +135,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue
index 2559c847..412f359e 100644
--- a/src/views/desktop/SignupPage.vue
+++ b/src/views/desktop/SignupPage.vue
@@ -239,7 +239,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
index b4b7dbaa..398cb9ae 100644
--- a/src/views/desktop/UnlockPage.vue
+++ b/src/views/desktop/UnlockPage.vue
@@ -111,7 +111,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTokensStore } from '@/stores/token.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
diff --git a/src/views/desktop/VerifyEmailPage.vue b/src/views/desktop/VerifyEmailPage.vue
index 111c148b..23e12a66 100644
--- a/src/views/desktop/VerifyEmailPage.vue
+++ b/src/views/desktop/VerifyEmailPage.vue
@@ -114,7 +114,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
diff --git a/src/views/desktop/accounts/ListPage.vue b/src/views/desktop/accounts/ListPage.vue
index 468a6c65..bab335f2 100644
--- a/src/views/desktop/accounts/ListPage.vue
+++ b/src/views/desktop/accounts/ListPage.vue
@@ -260,7 +260,7 @@ import EditDialog from './list/dialogs/EditDialog.vue';
 import { useDisplay } from 'vuetify';
 
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
diff --git a/src/views/desktop/accounts/list/dialogs/EditDialog.vue b/src/views/desktop/accounts/list/dialogs/EditDialog.vue
index 48edc7ec..2dc2dd1e 100644
--- a/src/views/desktop/accounts/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/accounts/list/dialogs/EditDialog.vue
@@ -197,7 +197,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.js';
 
 import { AccountType, AccountCategory } from '@/core/account.ts';
diff --git a/src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue b/src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue
index a5d874e4..23eac58c 100644
--- a/src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue
+++ b/src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue
@@ -207,7 +207,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useOverviewStore } from '@/stores/overview.js';
diff --git a/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue b/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
index a5b46817..0e5e350a 100644
--- a/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
+++ b/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
@@ -62,7 +62,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 
diff --git a/src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue b/src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue
index fb182bd7..677d4d7f 100644
--- a/src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue
+++ b/src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue
@@ -126,7 +126,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 
 import { DateRangeScene } from '@/core/datetime.ts';
 import { StatisticsAnalysisType } from '@/core/statistics.ts';
diff --git a/src/views/desktop/common/cards/AccountFilterSettingsCard.vue b/src/views/desktop/common/cards/AccountFilterSettingsCard.vue
index 51bebdc1..ebf6cd03 100644
--- a/src/views/desktop/common/cards/AccountFilterSettingsCard.vue
+++ b/src/views/desktop/common/cards/AccountFilterSettingsCard.vue
@@ -147,7 +147,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
diff --git a/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue b/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue
index d1570c0b..532967de 100644
--- a/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue
+++ b/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue
@@ -144,7 +144,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
diff --git a/src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue b/src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue
index f35a7eb4..5eb8c018 100644
--- a/src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue
+++ b/src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue
@@ -28,7 +28,7 @@
 import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 
 import { TransactionType } from '@/core/transaction.ts';
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index d6139fd6..9b23c06c 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -317,7 +317,7 @@
 import { useDisplay, useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue
index 5e28e15e..3c167d5f 100644
--- a/src/views/desktop/transactions/ListPage.vue
+++ b/src/views/desktop/transactions/ListPage.vue
@@ -587,7 +587,7 @@ import TransactionTagFilterSettingsCard from '@/views/desktop/common/cards/Trans
 import { useDisplay } from 'vuetify';
 
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
diff --git a/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue b/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
index e41637f3..4f1039d1 100644
--- a/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
@@ -172,7 +172,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
diff --git a/src/views/desktop/transactions/list/dialogs/EditDialog.vue b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
index 3c60fcfa..94dfa125 100644
--- a/src/views/desktop/transactions/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
@@ -391,7 +391,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
diff --git a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
index 59a556f7..637143cb 100644
--- a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
@@ -596,7 +596,7 @@
 import BatchReplaceDialog from './BatchReplaceDialog.vue';
 
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
diff --git a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
index 99a4084c..f50a7117 100644
--- a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
@@ -332,7 +332,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useOverviewStore } from '@/stores/overview.js';
diff --git a/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue b/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
index 7b1dc3d0..4877e5fd 100644
--- a/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
@@ -159,7 +159,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 
 import { isEquals } from '@/lib/common.ts';
diff --git a/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue b/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
index ac860d8a..f810665a 100644
--- a/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
@@ -131,7 +131,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTokensStore } from '@/stores/token.js';
 
diff --git a/src/views/mobile/ApplicationLockPage.vue b/src/views/mobile/ApplicationLockPage.vue
index 5b7d235b..b5ee9fbb 100644
--- a/src/views/mobile/ApplicationLockPage.vue
+++ b/src/views/mobile/ApplicationLockPage.vue
@@ -37,7 +37,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 
diff --git a/src/views/mobile/ExchangeRatesPage.vue b/src/views/mobile/ExchangeRatesPage.vue
index 076c595f..03086653 100644
--- a/src/views/mobile/ExchangeRatesPage.vue
+++ b/src/views/mobile/ExchangeRatesPage.vue
@@ -92,7 +92,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
diff --git a/src/views/mobile/HomePage.vue b/src/views/mobile/HomePage.vue
index 2710a175..7f4d2814 100644
--- a/src/views/mobile/HomePage.vue
+++ b/src/views/mobile/HomePage.vue
@@ -202,7 +202,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.js';
 import { useOverviewStore } from '@/stores/overview.js';
diff --git a/src/views/mobile/LoginPage.vue b/src/views/mobile/LoginPage.vue
index 9f1699c6..abb0d3aa 100644
--- a/src/views/mobile/LoginPage.vue
+++ b/src/views/mobile/LoginPage.vue
@@ -184,7 +184,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
diff --git a/src/views/mobile/SettingsPage.vue b/src/views/mobile/SettingsPage.vue
index c58c086c..12cffb1d 100644
--- a/src/views/mobile/SettingsPage.vue
+++ b/src/views/mobile/SettingsPage.vue
@@ -73,7 +73,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useOverviewStore } from '@/stores/overview.js';
diff --git a/src/views/mobile/SignupPage.vue b/src/views/mobile/SignupPage.vue
index b927b090..296226e7 100644
--- a/src/views/mobile/SignupPage.vue
+++ b/src/views/mobile/SignupPage.vue
@@ -177,7 +177,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
diff --git a/src/views/mobile/UnlockPage.vue b/src/views/mobile/UnlockPage.vue
index 55248d75..316ee418 100644
--- a/src/views/mobile/UnlockPage.vue
+++ b/src/views/mobile/UnlockPage.vue
@@ -67,7 +67,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTokensStore } from '@/stores/token.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
diff --git a/src/views/mobile/accounts/EditPage.vue b/src/views/mobile/accounts/EditPage.vue
index a80ec235..a16ff1bd 100644
--- a/src/views/mobile/accounts/EditPage.vue
+++ b/src/views/mobile/accounts/EditPage.vue
@@ -489,7 +489,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 
diff --git a/src/views/mobile/accounts/ListPage.vue b/src/views/mobile/accounts/ListPage.vue
index 76aa314e..25e8e8c9 100644
--- a/src/views/mobile/accounts/ListPage.vue
+++ b/src/views/mobile/accounts/ListPage.vue
@@ -175,7 +175,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
diff --git a/src/views/mobile/settings/AccountFilterSettingsPage.vue b/src/views/mobile/settings/AccountFilterSettingsPage.vue
index cc3ec6da..45cb0f90 100644
--- a/src/views/mobile/settings/AccountFilterSettingsPage.vue
+++ b/src/views/mobile/settings/AccountFilterSettingsPage.vue
@@ -133,7 +133,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
diff --git a/src/views/mobile/settings/CategoryFilterSettingsPage.vue b/src/views/mobile/settings/CategoryFilterSettingsPage.vue
index 10d82650..e0b20d0a 100644
--- a/src/views/mobile/settings/CategoryFilterSettingsPage.vue
+++ b/src/views/mobile/settings/CategoryFilterSettingsPage.vue
@@ -140,7 +140,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
diff --git a/src/views/mobile/settings/PageSettingsPage.vue b/src/views/mobile/settings/PageSettingsPage.vue
index cfe1eb49..193254b7 100644
--- a/src/views/mobile/settings/PageSettingsPage.vue
+++ b/src/views/mobile/settings/PageSettingsPage.vue
@@ -66,7 +66,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useOverviewStore } from '@/stores/overview.js';
 
diff --git a/src/views/mobile/settings/TextSizeSettingsPage.vue b/src/views/mobile/settings/TextSizeSettingsPage.vue
index edb0e0aa..7cd91abe 100644
--- a/src/views/mobile/settings/TextSizeSettingsPage.vue
+++ b/src/views/mobile/settings/TextSizeSettingsPage.vue
@@ -113,7 +113,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 
 import { FontSize } from '@/core/font.ts';
diff --git a/src/views/mobile/statistics/SettingsPage.vue b/src/views/mobile/statistics/SettingsPage.vue
index 3e278749..b1a4687e 100644
--- a/src/views/mobile/statistics/SettingsPage.vue
+++ b/src/views/mobile/statistics/SettingsPage.vue
@@ -79,7 +79,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 
 import { DateRangeScene } from '@/core/datetime.ts';
 import { StatisticsAnalysisType } from '@/core/statistics.ts';
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index 4cfee4dd..17e486a5 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -325,7 +325,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
diff --git a/src/views/mobile/transactions/AmountFilterPage.vue b/src/views/mobile/transactions/AmountFilterPage.vue
index 3ceb7579..f3921ec3 100644
--- a/src/views/mobile/transactions/AmountFilterPage.vue
+++ b/src/views/mobile/transactions/AmountFilterPage.vue
@@ -53,7 +53,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useTransactionsStore } from '@/stores/transaction.js';
 
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index 844dad8d..dcaee810 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -430,7 +430,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index ed962f2e..47555bbe 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -521,7 +521,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
diff --git a/src/views/mobile/users/DataManagementPage.vue b/src/views/mobile/users/DataManagementPage.vue
index 3b7a0f8f..45951441 100644
--- a/src/views/mobile/users/DataManagementPage.vue
+++ b/src/views/mobile/users/DataManagementPage.vue
@@ -76,7 +76,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 
 import { isDataExportingEnabled } from '@/lib/server_settings.ts';
diff --git a/src/views/mobile/users/UserProfilePage.vue b/src/views/mobile/users/UserProfilePage.vue
index d44e39b6..cb061385 100644
--- a/src/views/mobile/users/UserProfilePage.vue
+++ b/src/views/mobile/users/UserProfilePage.vue
@@ -334,7 +334,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useOverviewStore } from '@/stores/overview.js';