From 89b233e51b580fba9dae2f7ed15f90cb62184b70 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 11 Jan 2025 13:59:47 +0800
Subject: [PATCH] code refactor

---
 src/DesktopApp.vue                            |  4 ++--
 src/MobileApp.vue                             | 12 +++++------
 src/components/common/MapView.vue             | 10 +++++-----
 src/components/common/PinCodeInput.vue        |  8 ++++----
 src/components/desktop/BtnVerticalGroup.vue   |  2 +-
 src/components/desktop/ColorSelect.vue        |  6 +++---
 src/components/desktop/ConfirmDialog.vue      | 14 ++++++-------
 src/components/desktop/IconSelect.vue         |  8 ++++----
 src/components/desktop/SnackBar.vue           | 10 +++++-----
 src/components/desktop/StepsBar.vue           |  2 +-
 .../desktop/SwitchToMobileDialog.vue          |  2 +-
 src/components/mobile/ColorSelectionSheet.vue | 20 +++++++++----------
 src/components/mobile/IconSelectionSheet.vue  | 20 +++++++++----------
 src/components/mobile/InformationSheet.vue    | 12 +++++------
 src/components/mobile/MapSheet.vue            | 12 +++++------
 src/components/mobile/NumberPadSheet.vue      | 12 +++++------
 src/components/mobile/PasscodeInputSheet.vue  | 20 +++++++++----------
 src/components/mobile/PasswordInputSheet.vue  | 20 +++++++++----------
 src/components/mobile/PinCodeInputSheet.vue   | 18 ++++++++---------
 src/lib/ui/mobile.ts                          |  2 +-
 src/stores/exchangeRates.ts                   |  4 ++--
 src/stores/overview.ts                        | 10 +++++-----
 src/stores/setting.ts                         |  6 +++---
 src/stores/user.ts                            |  4 ++--
 src/views/desktop/MainLayout.vue              | 18 ++++++++---------
 25 files changed, 128 insertions(+), 128 deletions(-)

diff --git a/src/DesktopApp.vue b/src/DesktopApp.vue
index 1fd43ad1..ed2ab007 100644
--- a/src/DesktopApp.vue
+++ b/src/DesktopApp.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 
 import { useTheme } from 'vuetify';
 import { register } from 'register-service-worker';
@@ -46,7 +46,7 @@ const userStore = useUserStore();
 const tokensStore = useTokensStore();
 const exchangeRatesStore = useExchangeRatesStore();
 
-const showNotification: Ref<boolean> = ref(false);
+const showNotification = ref<boolean>(false);
 
 const currentNotificationContent = computed<string | null>(() => rootStore.currentNotification);
 
diff --git a/src/MobileApp.vue b/src/MobileApp.vue
index 92833d26..723f7a7a 100644
--- a/src/MobileApp.vue
+++ b/src/MobileApp.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 
 import type { Notification, Actions, Dialog, Popover, Popup, Sheet } from 'framework7/types';
 import { f7ready } from 'framework7-vue';
@@ -36,7 +36,7 @@ const userStore = useUserStore();
 const tokensStore = useTokensStore();
 const exchangeRatesStore = useExchangeRatesStore();
 
-const f7params: Ref<object> = ref({
+const f7params = ref<object>({
     name: 'ezBookkeeping',
     theme: 'ios',
     colors: {
@@ -100,11 +100,11 @@ const f7params: Ref<object> = ref({
     }
 });
 
-const notification: Ref<Notification.Notification | null> = ref(null);
+const notification = ref<Notification.Notification | null>(null);
 
-const isDarkMode: Ref<boolean | undefined> = ref(undefined);
-const hasPushPopupBackdrop: Ref<boolean | undefined> = ref(undefined);
-const hasBackdrop: Ref<boolean | undefined> = ref(undefined);
+const isDarkMode = ref<boolean | undefined>(undefined);
+const hasPushPopupBackdrop = ref<boolean | undefined>(undefined);
+const hasBackdrop = ref<boolean | undefined>(undefined);
 const currentNotificationContent = computed<string | null>(() => rootStore.currentNotification);
 
 function isiOSHomeScreenMode(): boolean {
diff --git a/src/components/common/MapView.vue b/src/components/common/MapView.vue
index 240dc76e..d8d3069b 100644
--- a/src/components/common/MapView.vue
+++ b/src/components/common/MapView.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed, useTemplateRef } from 'vue';
+import { ref, computed, useTemplateRef } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -27,12 +27,12 @@ const props = defineProps<{
 const { tt, getCurrentLanguageInfo } = useI18n();
 
 const mapContainer = useTemplateRef<HTMLElement>('mapContainer');
-const mapInstance: Ref<MapInstance | null> = ref(createMapInstance());
-const initCenter: Ref<MapPosition> = ref({
+const mapInstance = ref<MapInstance | null>(createMapInstance());
+const initCenter = ref<MapPosition>({
     latitude: 0,
     longitude: 0
 });
-const zoomLevel: Ref<number> = ref(1);
+const zoomLevel = ref<number>(1);
 
 const mapSupported = computed<boolean>(() => {
     return !!mapInstance.value;
@@ -56,7 +56,7 @@ const finalMapStyle = computed<Record<string, unknown>>(() => {
     return styles;
 });
 
-function initMapView() {
+function initMapView(): void {
     let isFirstInit = false;
     let centerChanged = false;
 
diff --git a/src/components/common/PinCodeInput.vue b/src/components/common/PinCodeInput.vue
index d3240512..823f8048 100644
--- a/src/components/common/PinCodeInput.vue
+++ b/src/components/common/PinCodeInput.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed, watch, useTemplateRef } from 'vue';
+import { ref, computed, watch, useTemplateRef } from 'vue';
 
 interface PinCode {
     value: string;
@@ -38,11 +38,11 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'pincode:confirm', value: string): void
+    (e: 'update:modelValue', value: string): void;
+    (e: 'pincode:confirm', value: string): void;
 }>();
 
-const codes: Ref<PinCode[]> = ref([]);
+const codes = ref<PinCode[]>([]);
 const pinCodeInputs = useTemplateRef<HTMLInputElement[]>('pin-code-input');
 
 const finalPinCode = computed<string>(() => {
diff --git a/src/components/desktop/BtnVerticalGroup.vue b/src/components/desktop/BtnVerticalGroup.vue
index 9ca9c618..81819f6b 100644
--- a/src/components/desktop/BtnVerticalGroup.vue
+++ b/src/components/desktop/BtnVerticalGroup.vue
@@ -25,7 +25,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: unknown): void
+    (e: 'update:modelValue', value: unknown): void;
 }>();
 
 const value = computed<unknown>({
diff --git a/src/components/desktop/ColorSelect.vue b/src/components/desktop/ColorSelect.vue
index e856ca10..11b86e79 100644
--- a/src/components/desktop/ColorSelect.vue
+++ b/src/components/desktop/ColorSelect.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed, useTemplateRef, nextTick } from 'vue';
+import { ref, computed, useTemplateRef, nextTick } from 'vue';
 
 import type { ColorValue, ColorInfo } from '@/core/color.ts';
 import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
@@ -61,7 +61,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: ColorValue): void
+    (e: 'update:modelValue', value: ColorValue): void;
 }>();
 
 const icons = {
@@ -70,7 +70,7 @@ const icons = {
 };
 
 const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
-const itemPerRow: Ref<number> = ref(props.columnCount || 7);
+const itemPerRow = ref<number>(props.columnCount || 7);
 
 const allColorRows = computed<ColorInfo[][]>(() => {
     return getColorsInRows(props.allColorInfos, itemPerRow.value);
diff --git a/src/components/desktop/ConfirmDialog.vue b/src/components/desktop/ConfirmDialog.vue
index 2aa2f1ff..ea72fca5 100644
--- a/src/components/desktop/ConfirmDialog.vue
+++ b/src/components/desktop/ConfirmDialog.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -29,20 +29,20 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:show', value: boolean): void
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt } = useI18n();
 
-const showState: Ref<boolean> = ref(false);
-const titleContent: Ref<string> = ref(props.title || tt('global.app.title'));
-const textContent: Ref<string> = ref(props.text || '');
-const finalColor: Ref<string> = ref(props.color || 'primary');
+const showState = ref<boolean>(false);
+const titleContent = ref<string>(props.title || tt('global.app.title'));
+const textContent = ref<string>(props.text || '');
+const finalColor = ref<string>(props.color || 'primary');
 
 let resolveFunc: ((value?: unknown) => void) | null = null;
 let rejectFunc: ((reason?: unknown) => void) | null = null;
 
-function open(titleOrText: string, textOrOptions: string | Record<string, unknown>, options: Record<string, unknown>) {
+function open(titleOrText: string, textOrOptions: string | Record<string, unknown>, options: Record<string, unknown>): Promise<unknown> {
     showState.value = true;
 
     if (isString(textOrOptions)) { // second parameter is text
diff --git a/src/components/desktop/IconSelect.vue b/src/components/desktop/IconSelect.vue
index 64e093e5..f5f51740 100644
--- a/src/components/desktop/IconSelect.vue
+++ b/src/components/desktop/IconSelect.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed, useTemplateRef, nextTick } from 'vue';
+import { ref, computed, useTemplateRef, nextTick } from 'vue';
 
 import type { ColorValue } from '@/core/color.ts';
 import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
@@ -60,7 +60,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
+    (e: 'update:modelValue', value: string): void;
 }>();
 
 const icons = {
@@ -68,13 +68,13 @@ const icons = {
 };
 
 const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
-const itemPerRow: Ref<number> = ref(props.columnCount || 7);
+const itemPerRow = ref<number>(props.columnCount || 7);
 
 const allIconRows = computed<IconInfoWithId[][]>(() => {
     return getIconsInRows(props.allIconInfos, itemPerRow.value);
 });
 
-const icon = computed({
+const icon = computed<string>({
     get: () => props.modelValue,
     set: (value: string) => emit('update:modelValue', value)
 });
diff --git a/src/components/desktop/SnackBar.vue b/src/components/desktop/SnackBar.vue
index b2412c37..40e19af4 100644
--- a/src/components/desktop/SnackBar.vue
+++ b/src/components/desktop/SnackBar.vue
@@ -9,20 +9,20 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
 import { isObject } from '@/lib/common.ts';
 
 const emit = defineEmits<{
-    (e: 'update:show', value: boolean): void
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt, te } = useI18n();
 
-const showState: Ref<boolean> = ref(false);
-const messageContent: Ref<string> = ref('');
+const showState= ref<boolean>(false);
+const messageContent = ref<string>('');
 
 function showMessage(message: string, options: Record<string, unknown>): void {
     showState.value = true;
@@ -35,7 +35,7 @@ function showError(error: string | { message: string }): void {
     if (isObject(error) && (error as { message: string }).message) {
         messageContent.value = te((error as { message: string }).message);
     } else {
-        messageContent.value = te(error);
+        messageContent.value = te(error as string);
     }
 }
 
diff --git a/src/components/desktop/StepsBar.vue b/src/components/desktop/StepsBar.vue
index d2b22a83..a32276db 100644
--- a/src/components/desktop/StepsBar.vue
+++ b/src/components/desktop/StepsBar.vue
@@ -60,7 +60,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'step:change', stepName: string): void
+    (e: 'step:change', stepName: string): void;
 }>();
 
 const isClickable = computed<boolean>(() => {
diff --git a/src/components/desktop/SwitchToMobileDialog.vue b/src/components/desktop/SwitchToMobileDialog.vue
index dd3c3917..954bad30 100644
--- a/src/components/desktop/SwitchToMobileDialog.vue
+++ b/src/components/desktop/SwitchToMobileDialog.vue
@@ -41,7 +41,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:show', value: boolean): void
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt } = useI18n();
diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue
index d99fc385..b01943be 100644
--- a/src/components/mobile/ColorSelectionSheet.vue
+++ b/src/components/mobile/ColorSelectionSheet.vue
@@ -29,14 +29,14 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
 import type { ColorValue, ColorInfo } from '@/core/color.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getColorsInRows } from '@/lib/color.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: ColorValue;
@@ -46,34 +46,34 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: ColorValue): void
-    (e: 'update:show', value: boolean): void
+    (e: 'update:modelValue', value: ColorValue): void;
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt } = useI18n();
 
-const currentValue: Ref<ColorValue> = ref(props.modelValue);
-const itemPerRow: Ref<number> = ref(props.columnCount || 7);
+const currentValue = ref<ColorValue>(props.modelValue);
+const itemPerRow = ref<number>(props.columnCount || 7);
 
 const allColorRows = computed<ColorInfo[][]>(() => {
     return getColorsInRows(props.allColorInfos, itemPerRow.value);
 });
 
-function onColorClicked(colorInfo: ColorInfo) {
+function onColorClicked(colorInfo: ColorInfo): void {
     currentValue.value = colorInfo.color;
     emit('update:modelValue', currentValue.value);
 }
 
-function hasSelectedIcon(row: ColorInfo[]) {
+function hasSelectedIcon(row: ColorInfo[]): boolean {
     return arrayContainsFieldValue(row, 'id', currentValue.value);
 }
 
-function onSheetOpen(event: { $el: HTMLElement }) {
+function onSheetOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
     scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item');
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     emit('update:show', false);
 }
 </script>
diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue
index 0bb129b4..476e22e9 100644
--- a/src/components/mobile/IconSelectionSheet.vue
+++ b/src/components/mobile/IconSelectionSheet.vue
@@ -29,14 +29,14 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
 import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getIconsInRows } from '@/lib/icon.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: string;
@@ -47,14 +47,14 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'update:show', value: boolean): void
+    (e: 'update:modelValue', value: string): void;
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt } = useI18n();
 
-const currentValue: Ref<string> = ref(props.modelValue);
-const itemPerRow: Ref<number> = ref(props.columnCount || 7);
+const currentValue = ref<string>(props.modelValue);
+const itemPerRow = ref<number>(props.columnCount || 7);
 
 const allIconRows = computed<IconInfoWithId[][]>(() => {
     return getIconsInRows(props.allIconInfos, itemPerRow.value);
@@ -70,20 +70,20 @@ const heightClass = computed<string>(() => {
     }
 });
 
-function onIconClicked(iconInfo: IconInfoWithId) {
+function onIconClicked(iconInfo: IconInfoWithId): void {
     currentValue.value = iconInfo.id;
     emit('update:modelValue', currentValue.value);
 }
 
-function hasSelectedIcon(row: IconInfoWithId[]) {
+function hasSelectedIcon(row: IconInfoWithId[]): boolean {
     return arrayContainsFieldValue(row, 'id', currentValue.value);
 }
 
-function onSheetOpen(event: { $el: HTMLElement }) {
+function onSheetOpen(event: { $el: Framework7Dom }): void {
     scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item');
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     emit('update:show', false);
 }
 </script>
diff --git a/src/components/mobile/InformationSheet.vue b/src/components/mobile/InformationSheet.vue
index 7c70435d..b81b6019 100644
--- a/src/components/mobile/InformationSheet.vue
+++ b/src/components/mobile/InformationSheet.vue
@@ -41,17 +41,17 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:show', value: boolean): void
-    (e: 'info:copied'): void
+    (e: 'update:show', value: boolean): void;
+    (e: 'info:copied'): void;
 }>();
 
 const { tt } = useI18n();
 
-const iconCopyToClipboard = useTemplateRef('copyToClipboardIcon');
+const iconCopyToClipboard = useTemplateRef<unknown>('copyToClipboardIcon');
 
 let clipboardHolder: ClipboardHolder | null = null;
 
-function makeCopyToClipboardClickable() {
+function makeCopyToClipboardClickable(): void {
     if (clipboardHolder) {
         return;
     }
@@ -67,11 +67,11 @@ function makeCopyToClipboardClickable() {
     }
 }
 
-function close() {
+function close(): void {
     emit('update:show', false);
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     close();
 }
 
diff --git a/src/components/mobile/MapSheet.vue b/src/components/mobile/MapSheet.vue
index 8f80c2d4..b9dc6f3c 100644
--- a/src/components/mobile/MapSheet.vue
+++ b/src/components/mobile/MapSheet.vue
@@ -46,8 +46,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: MapPosition | undefined): void,
-    (e: 'update:show', value: boolean): void
+    (e: 'update:modelValue', value: MapPosition | undefined): void;
+    (e: 'update:show', value: boolean): void;
 }>();
 
 const { tt } = useI18n();
@@ -63,21 +63,21 @@ const geoLocation = computed<MapPosition | undefined>({
     }
 });
 
-function save() {
+function save(): void {
     emit('update:show', false);
 }
 
-function close() {
+function close(): void {
     emit('update:show', false);
 }
 
-function onSheetOpen() {
+function onSheetOpen(): void {
     if (map.value) {
         map.value.initMapView();
     }
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     close();
 }
 </script>
diff --git a/src/components/mobile/NumberPadSheet.vue b/src/components/mobile/NumberPadSheet.vue
index 666b9d23..722f5748 100644
--- a/src/components/mobile/NumberPadSheet.vue
+++ b/src/components/mobile/NumberPadSheet.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helper.js';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
@@ -95,13 +95,13 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: number): void,
-    (e: 'update:show', value: boolean): void
+    (e: 'update:modelValue', value: number): void;
+    (e: 'update:show', value: boolean): void;
 }>();
 
-const previousValue: Ref<string> = ref('');
-const currentSymbol: Ref<string> = ref('');
-const currentValue: Ref<string> = ref(getStringValue(props.modelValue));
+const previousValue = ref<string>('');
+const currentSymbol = ref<string>('');
+const currentValue = ref<string>(getStringValue(props.modelValue));
 
 const decimalSeparator = computed<string>(() => getCurrentDecimalSeparator(userStore));
 
diff --git a/src/components/mobile/PasscodeInputSheet.vue b/src/components/mobile/PasscodeInputSheet.vue
index 509de012..20df2bb5 100644
--- a/src/components/mobile/PasscodeInputSheet.vue
+++ b/src/components/mobile/PasscodeInputSheet.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -51,16 +51,16 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'update:show', value: boolean): void
-    (e: 'passcode:confirm', value: string): void
+    (e: 'update:modelValue', value: string): void;
+    (e: 'update:show', value: boolean): void;
+    (e: 'passcode:confirm', value: string): void;
 }>();
 
 const { tt } = useI18n();
 
-const currentPasscode: Ref<string> = ref('');
+const currentPasscode = ref<string>('');
 
-function confirm() {
+function confirm(): void {
     if (!currentPasscode.value || props.confirmDisabled) {
         return;
     }
@@ -69,19 +69,19 @@ function confirm() {
     emit('passcode:confirm', currentPasscode.value);
 }
 
-function cancel() {
+function cancel(): void {
     close();
 }
 
-function close() {
+function close(): void {
     emit('update:show', false);
 }
 
-function onSheetOpen() {
+function onSheetOpen(): void {
     currentPasscode.value = '';
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     close();
 }
 </script>
diff --git a/src/components/mobile/PasswordInputSheet.vue b/src/components/mobile/PasswordInputSheet.vue
index 360fce2d..9513fb4d 100644
--- a/src/components/mobile/PasswordInputSheet.vue
+++ b/src/components/mobile/PasswordInputSheet.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -53,16 +53,16 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'update:show', value: boolean): void
-    (e: 'password:confirm', value: string): void
+    (e: 'update:modelValue', value: string): void;
+    (e: 'update:show', value: boolean): void;
+    (e: 'password:confirm', value: string): void;
 }>();
 
 const { tt } = useI18n();
 
-const currentPassword: Ref<string> = ref('');
+const currentPassword = ref<string>('');
 
-function confirm() {
+function confirm(): void {
     if (!currentPassword.value || props.confirmDisabled) {
         return;
     }
@@ -71,19 +71,19 @@ function confirm() {
     emit('password:confirm', currentPassword.value);
 }
 
-function cancel() {
+function cancel(): void {
     close();
 }
 
-function close() {
+function close(): void {
     emit('update:show', false);
 }
 
-function onSheetOpen() {
+function onSheetOpen(): void {
     currentPassword.value = '';
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     close();
 }
 </script>
diff --git a/src/components/mobile/PinCodeInputSheet.vue b/src/components/mobile/PinCodeInputSheet.vue
index 3feceff8..63595d5a 100644
--- a/src/components/mobile/PinCodeInputSheet.vue
+++ b/src/components/mobile/PinCodeInputSheet.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
@@ -41,20 +41,20 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'update:show', value: boolean): void
-    (e: 'pincode:confirm', value: string): void
+    (e: 'update:modelValue', value: string): void;
+    (e: 'update:show', value: boolean): void;
+    (e: 'pincode:confirm', value: string): void;
 }>();
 
 const { tt } = useI18n();
 
-const currentPinCode: Ref<string> = ref('');
+const currentPinCode = ref<string>('');
 
 const currentPinCodeValid = computed<boolean>(() => {
     return currentPinCode.value?.length === 6 || false;
 });
 
-function confirm() {
+function confirm(): void {
     if (!currentPinCodeValid.value || props.confirmDisabled) {
         return;
     }
@@ -63,15 +63,15 @@ function confirm() {
     emit('pincode:confirm', currentPinCode.value);
 }
 
-function cancel() {
+function cancel(): void {
     emit('update:show', false);
 }
 
-function onSheetOpen() {
+function onSheetOpen(): void {
     currentPinCode.value = '';
 }
 
-function onSheetClosed() {
+function onSheetClosed(): void {
     cancel();
 }
 </script>
diff --git a/src/lib/ui/mobile.ts b/src/lib/ui/mobile.ts
index 4225bc68..4c00c3d2 100644
--- a/src/lib/ui/mobile.ts
+++ b/src/lib/ui/mobile.ts
@@ -8,7 +8,7 @@ import { isEnableAnimate } from '../settings.ts';
 // @ts-expect-error the above file is migrating to ts
 import { translateError } from '@/locales/helper.js';
 
-interface Framework7Dom {
+export interface Framework7Dom {
     length: number;
     [index: number]: Element;
     find: (selector?: string) => Framework7Dom;
diff --git a/src/stores/exchangeRates.ts b/src/stores/exchangeRates.ts
index 1206c5c7..3412c65c 100644
--- a/src/stores/exchangeRates.ts
+++ b/src/stores/exchangeRates.ts
@@ -1,4 +1,4 @@
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
 
 import type { LatestExchangeRate, LatestExchangeRateResponse } from '@/models/exchange_rate.ts';
@@ -32,7 +32,7 @@ function clearExchangeRatesFromLocalStorage(): void {
 }
 
 export const useExchangeRatesStore = defineStore('exchangeRates', () => {
-    const latestExchangeRates: Ref<LatestExchangeRates> = ref(getExchangeRatesFromLocalStorage());
+    const latestExchangeRates = ref<LatestExchangeRates>(getExchangeRatesFromLocalStorage());
 
     const exchangeRatesLastUpdateTime = computed<number | null>(() => {
         const exchangeRates = latestExchangeRates.value || {};
diff --git a/src/stores/overview.ts b/src/stores/overview.ts
index b38b236b..818a4a5c 100644
--- a/src/stores/overview.ts
+++ b/src/stores/overview.ts
@@ -1,4 +1,4 @@
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
 
 import { useSettingsStore } from './setting.ts';
@@ -101,7 +101,7 @@ export const useOverviewStore = defineStore('overview', () => {
     const userStore = useUserStore();
     const exchangeRatesStore = useExchangeRatesStore();
 
-    const transactionDataRange: Ref<TransactionDataRange> = ref({
+    const transactionDataRange = ref<TransactionDataRange>({
         today: {
             startTime: getTodayFirstUnixTime(),
             endTime: getTodayLastUnixTime()
@@ -164,12 +164,12 @@ export const useOverviewStore = defineStore('overview', () => {
         }
     });
 
-    const transactionOverviewOptions: Ref<TransactionOverviewOptions> = ref({
+    const transactionOverviewOptions = ref<TransactionOverviewOptions>({
         loadLast11Months: false
     });
 
-    const transactionOverviewData: Ref<TransactionAmountsResponse> = ref({});
-    const transactionOverviewStateInvalid: Ref<boolean> = ref(true);
+    const transactionOverviewData = ref<TransactionAmountsResponse>({});
+    const transactionOverviewStateInvalid = ref<boolean>(true);
 
     const transactionOverview = computed<TransactionOverviewResponse>(() => {
         const overviewData = transactionOverviewData.value;
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
index 596367f9..a01662c4 100644
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -1,4 +1,4 @@
-import { type Ref, ref } from 'vue';
+import { ref } from 'vue';
 import { defineStore } from 'pinia';
 
 import type { ApplicationSettings, LocaleDefaultSettings } from '@/core/setting.ts';
@@ -11,8 +11,8 @@ import {
 } from '@/lib/settings.ts';
 
 export const useSettingsStore = defineStore('settings', () => {
-    const appSettings: Ref<ApplicationSettings> = ref(getApplicationSettings());
-    const localeDefaultSettings: Ref<LocaleDefaultSettings> = ref(getLocaleDefaultSettings());
+    const appSettings = ref<ApplicationSettings>(getApplicationSettings());
+    const localeDefaultSettings = ref<LocaleDefaultSettings>(getLocaleDefaultSettings());
 
     function setTheme(value: string): void {
         updateApplicationSettingsValue('theme', value);
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 3d5593d0..8e8f6861 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -1,4 +1,4 @@
-import { type Ref, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
 
 import { useSettingsStore } from './setting.ts';
@@ -33,7 +33,7 @@ import services from '@/lib/services.ts';
 
 export const useUserStore = defineStore('user', () => {
     const settingsStore = useSettingsStore();
-    const currentUserBasicInfo: Ref<UserBasicInfo | null> = ref(getCurrentUserInfo());
+    const currentUserBasicInfo = ref<UserBasicInfo | null>(getCurrentUserInfo());
 
     const currentUserNickname = computed<string | null>(() => {
         const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
diff --git a/src/views/desktop/MainLayout.vue b/src/views/desktop/MainLayout.vue
index f2bd8f95..d2101884 100644
--- a/src/views/desktop/MainLayout.vue
+++ b/src/views/desktop/MainLayout.vue
@@ -194,7 +194,7 @@
 <script setup lang="ts">
 import SnackBar from '@/components/desktop/SnackBar.vue';
 
-import { type Ref, ref, computed, useTemplateRef } from 'vue';
+import { ref, computed, useTemplateRef } from 'vue';
 
 import { useDisplay } from 'vuetify';
 import { useTheme } from 'vuetify';
@@ -272,11 +272,11 @@ const icons = {
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
-const logouting: Ref<boolean> = ref(false);
-const isVerticalNavScrolled: Ref<boolean> = ref(false);
-const showVerticalOverlayMenu: Ref<boolean> = ref(false);
-const showLoading: Ref<boolean> = ref(false);
-const showMobileQrCode: Ref<boolean> = ref(false);
+const logouting = ref<boolean>(false);
+const isVerticalNavScrolled = ref<boolean>(false);
+const showVerticalOverlayMenu = ref<boolean>(false);
+const showLoading = ref<boolean>(false);
+const showMobileQrCode = ref<boolean>(false);
 
 const mdAndDown = computed<boolean>(() => {
     return display.mdAndDown.value;
@@ -315,16 +315,16 @@ const isEnableApplicationLock = computed<boolean>(() => {
     return settingsStore.appSettings.applicationLock;
 });
 
-function handleNavScroll(e: Event) {
+function handleNavScroll(e: Event): void {
     isVerticalNavScrolled.value = (e.target as HTMLElement).scrollTop > 0;
 }
 
-function lock() {
+function lock(): void {
     rootStore.lock();
     router.replace('/unlock');
 }
 
-function logout() {
+function logout(): void {
     logouting.value = true;
     showLoading.value = true;