From c4f263b7d14d195ea29dc41e0f038e7f80b30f37 Mon Sep 17 00:00:00 2001
From: Serg <s.frontend.dev@gmail.com>
Date: Thu, 1 May 2025 04:47:04 +1000
Subject: [PATCH 1/5] fix: layout fixes

---
 src/components/BuyTokensDialog.vue   |   5 +
 src/components/NavigationWrapper.vue |   1 +
 src/components/nodes/NodesTable.vue  |   2 -
 src/views/AppSidebar.vue             |   2 +-
 src/views/Login.vue                  | 153 ++++++++++++++-------------
 src/views/Options.vue                |  38 ++++++-
 6 files changed, 122 insertions(+), 79 deletions(-)

diff --git a/src/components/BuyTokensDialog.vue b/src/components/BuyTokensDialog.vue
index a37eb1ef0..b01c67f41 100644
--- a/src/components/BuyTokensDialog.vue
+++ b/src/components/BuyTokensDialog.vue
@@ -104,6 +104,9 @@ export default {
     }
   },
   methods: {
+    closeDialog() {
+      this.show = false
+    },
     openLink(link) {
       if (link.startsWith('U')) {
         this.$router.push({
@@ -113,6 +116,8 @@ export default {
       } else {
         window.open(link, '_blank', 'resizable,scrollbars,status,noopener')
       }
+
+      this.closeDialog()
     }
   }
 }
diff --git a/src/components/NavigationWrapper.vue b/src/components/NavigationWrapper.vue
index b1551ea60..76ccef909 100644
--- a/src/components/NavigationWrapper.vue
+++ b/src/components/NavigationWrapper.vue
@@ -34,6 +34,7 @@
     </v-container>
   </div>
 </template>
+
 <script setup lang="ts">
 import AppToolbarCentered from '@/components/AppToolbarCentered.vue'
 import { computed, useSlots } from 'vue'
diff --git a/src/components/nodes/NodesTable.vue b/src/components/nodes/NodesTable.vue
index 69003301d..99a86c066 100644
--- a/src/components/nodes/NodesTable.vue
+++ b/src/components/nodes/NodesTable.vue
@@ -180,8 +180,6 @@ export default defineComponent({
 .nodes-table {
   margin-left: -24px;
   margin-right: -24px;
-  width: 100%;
-  max-width: unset !important;
 
   &__info {
     :deep(a) {
diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
index 5d67ee9ea..d6bc1191a 100644
--- a/src/views/AppSidebar.vue
+++ b/src/views/AppSidebar.vue
@@ -33,7 +33,7 @@
             src="/img/adamant-logo-transparent-512x512.png"
             draggable="false"
           />
-          <router-view v-show="!showLogo" :key="route.path" />
+          <router-view v-show="!showLogo" :key="route.path" :sidebarLayoutRef="sidebarLayoutRef" />
         </div>
       </component>
     </div>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index de673bb0c..d88a16181 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,98 +1,103 @@
 <template>
-  <v-row justify="center" no-gutters :class="`${className} pa-4`">
-    <container>
-      <div :class="`${className}__buttons`">
-        <div class="text-right">
-          <language-switcher :prepend-icon="mdiChevronRight" />
-        </div>
-        <div :class="`${className}__settings-button`">
-          <v-btn @click="$router.push('/options/nodes')" icon variant="plain" :size="32">
-            <v-icon :icon="mdiCog" />
-          </v-btn>
+  <component :is="layout">
+    <v-row justify="center" no-gutters :class="className">
+      <container>
+        <div :class="`${className}__buttons`">
+          <div class="text-right">
+            <language-switcher :prepend-icon="mdiChevronRight" />
+          </div>
+          <div :class="`${className}__settings-button`">
+            <v-btn @click="$router.push('/options/nodes')" icon variant="plain" :size="32">
+              <v-icon :icon="mdiCog" />
+            </v-btn>
+          </div>
         </div>
-      </div>
 
-      <v-sheet class="text-center mt-4" color="transparent">
-        <logo style="width: 300px" />
+        <v-sheet class="text-center mt-4" color="transparent">
+          <logo style="width: 300px" />
 
-        <h1 :class="`${className}__title`">
-          {{ t('login.brand_title') }}
-        </h1>
-        <h2 :class="`${className}__subtitle`" class="hidden-sm-and-down mt-4">
-          {{ t('login.subheader') }}
-        </h2>
-      </v-sheet>
+          <h1 :class="`${className}__title`">
+            {{ t('login.brand_title') }}
+          </h1>
+          <h2 :class="`${className}__subtitle`" class="hidden-sm-and-down mt-4">
+            {{ t('login.subheader') }}
+          </h2>
+        </v-sheet>
 
-      <v-sheet v-if="!isLoginViaPassword" class="text-center mt-4" color="transparent">
-        <v-row justify="center" no-gutters>
-          <v-col sm="8" md="8" lg="8">
-            <login-form
-              ref="loginForm"
-              v-model="passphrase"
-              @login="onLogin"
-              @error="onLoginError"
-            />
-          </v-col>
-        </v-row>
+        <v-sheet v-if="!isLoginViaPassword" class="text-center mt-4" color="transparent">
+          <v-row justify="center" no-gutters>
+            <v-col sm="8" md="8" lg="8">
+              <login-form
+                ref="loginForm"
+                v-model="passphrase"
+                @login="onLogin"
+                @error="onLoginError"
+              />
+            </v-col>
+          </v-row>
 
-        <v-row justify="center" class="mt-4" no-gutters>
-          <v-col cols="auto">
-            <v-btn
-              class="ma-2"
-              :title="t('login.scan_qr_code_button_tooltip')"
-              icon
-              variant="text"
-              size="x-small"
-              :class="`${className}__icon`"
-              @click="showQrcodeScanner = true"
-            >
-              <icon><qr-code-scan-icon /></icon>
-            </v-btn>
-          </v-col>
-
-          <v-col cols="auto">
-            <qrcode-capture @detect="onDetectQrcode" @error="onDetectQrcodeError">
+          <v-row justify="center" class="mt-4" no-gutters>
+            <v-col cols="auto">
               <v-btn
                 class="ma-2"
-                :title="t('login.login_by_qr_code_tooltip')"
+                :title="t('login.scan_qr_code_button_tooltip')"
                 icon
                 variant="text"
                 size="x-small"
                 :class="`${className}__icon`"
+                @click="showQrcodeScanner = true"
               >
-                <icon><file-icon /></icon>
+                <icon><qr-code-scan-icon /></icon>
               </v-btn>
-            </qrcode-capture>
-          </v-col>
-        </v-row>
-      </v-sheet>
+            </v-col>
 
-      <v-row v-if="!isLoginViaPassword" justify="center" class="mt-8">
-        <v-col sm="8" md="8" lg="8">
-          <passphrase-generator @copy="onCopyPassphrase" />
-        </v-col>
-      </v-row>
+            <v-col cols="auto">
+              <qrcode-capture @detect="onDetectQrcode" @error="onDetectQrcodeError">
+                <v-btn
+                  class="ma-2"
+                  :title="t('login.login_by_qr_code_tooltip')"
+                  icon
+                  variant="text"
+                  size="x-small"
+                  :class="`${className}__icon`"
+                >
+                  <icon><file-icon /></icon>
+                </v-btn>
+              </qrcode-capture>
+            </v-col>
+          </v-row>
+        </v-sheet>
 
-      <v-sheet v-if="isLoginViaPassword" class="text-center mt-6" color="transparent">
-        <v-row no-gutters justify="center">
+        <v-row v-if="!isLoginViaPassword" justify="center" class="mt-8">
           <v-col sm="8" md="8" lg="8">
-            <login-password-form v-model="password" @login="onLogin" @error="onLoginError" />
+            <passphrase-generator @copy="onCopyPassphrase" />
           </v-col>
         </v-row>
-      </v-sheet>
-
-      <qrcode-scanner-dialog
-        v-if="showQrcodeScanner"
-        v-model="showQrcodeScanner"
-        @scan="onScanQrcode"
-      />
-    </container>
-  </v-row>
+
+        <v-sheet v-if="isLoginViaPassword" class="text-center mt-6" color="transparent">
+          <v-row no-gutters justify="center">
+            <v-col sm="8" md="8" lg="8">
+              <login-password-form v-model="password" @login="onLogin" @error="onLoginError" />
+            </v-col>
+          </v-row>
+        </v-sheet>
+
+        <qrcode-scanner-dialog
+          v-if="showQrcodeScanner"
+          v-model="showQrcodeScanner"
+          @scan="onScanQrcode"
+        />
+      </container>
+    </v-row>
+  </component>
 </template>
 
 <script>
 import { nextTick, defineComponent, computed, ref } from 'vue'
 import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+import { mdiCog, mdiChevronRight } from '@mdi/js'
+import { useRoute } from 'vue-router'
 
 import QrcodeCapture from '@/components/QrcodeCapture.vue'
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
@@ -105,8 +110,6 @@ import FileIcon from '@/components/icons/common/File.vue'
 import LoginPasswordForm from '@/components/LoginPasswordForm.vue'
 import Logo from '@/components/icons/common/Logo.vue'
 import { navigateByURI } from '@/router/navigationGuard'
-import { useI18n } from 'vue-i18n'
-import { mdiCog, mdiChevronRight } from '@mdi/js'
 
 export default defineComponent({
   components: {
@@ -127,12 +130,15 @@ export default defineComponent({
     const showQrcodeScanner = ref(false)
     const logo = '/img/adamant-logo-transparent-512x512.png'
     const store = useStore()
+    const route = useRoute()
     const { t } = useI18n()
     const className = 'login-page'
     const loginForm = ref(null)
 
     const isLoginViaPassword = computed(() => store.getters['options/isLoginViaPassword'])
 
+    const layout = computed(() => route.meta.layout || 'default')
+
     const onDetectQrcode = (passphrase) => {
       onScanQrcode(passphrase)
     }
@@ -181,6 +187,7 @@ export default defineComponent({
       loginForm,
       mdiCog,
       mdiChevronRight,
+      layout,
       onDetectQrcode,
       onDetectQrcodeError,
       onLogin,
diff --git a/src/views/Options.vue b/src/views/Options.vue
index cafa9e6ea..93041c856 100644
--- a/src/views/Options.vue
+++ b/src/views/Options.vue
@@ -189,15 +189,16 @@
 </template>
 
 <script>
+import { mdiChevronRight, mdiChevronDown, mdiLogoutVariant } from '@mdi/js'
+
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import CurrencySwitcher from '@/components/CurrencySwitcher.vue'
 import PasswordSetDialog from '@/components/PasswordSetDialog.vue'
 import { clearDb, db as isIDBSupported } from '@/lib/idb'
-import scrollPosition from '@/mixins/scrollPosition'
 import { resetPinia } from '@/plugins/pinia'
-import { mdiChevronRight, mdiChevronDown, mdiLogoutVariant } from '@mdi/js'
 import NavigationWrapper from '@/components/NavigationWrapper.vue'
 import { useSavedScroll } from '@/hooks/useSavedScroll'
+import { nextTick } from 'vue'
 
 export default {
   components: {
@@ -206,7 +207,13 @@ export default {
     CurrencySwitcher,
     PasswordSetDialog
   },
-  mixins: [scrollPosition],
+  props: {
+    sidebarLayoutRef: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
   setup() {
     const { hasView } = useSavedScroll()
 
@@ -220,6 +227,19 @@ export default {
   data: () => ({
     passwordDialog: false
   }),
+  mounted() {
+    nextTick(() => {
+      if (this.sidebarLayoutRef) {
+        const scrollTopValue = Number(localStorage.getItem('optionsScrollTop')) || 0
+        this.sidebarLayoutRef.scrollTo({
+          top: scrollTopValue
+        })
+      }
+    })
+  },
+  beforeUnmount() {
+    localStorage.setItem('optionsScrollTop', this.sidebarLayoutRef?.scrollTop || 0)
+  },
   computed: {
     className: () => 'settings-view',
     stayLoggedIn() {
@@ -315,11 +335,23 @@ export default {
         value: true
       })
     },
+    onKeydownHandler(e) {
+      if (e.key === 'Escape') {
+        if (this.passwordDialog) {
+          e.stopPropagation()
+          this.passwordDialog = false
+
+          window.removeEventListener('keydown', this.onKeydownHandler, true)
+        }
+      }
+    },
     onCheckStayLoggedIn() {
       if (!this.stayLoggedIn) {
         isIDBSupported
           .then(() => {
             this.passwordDialog = true
+
+            window.addEventListener('keydown', this.onKeydownHandler, true)
           })
           .catch(() => {
             this.$store.dispatch('snackbar/show', {

From 90fddb06f5ab09dd32f7bb4a52d351a1dcbc613c Mon Sep 17 00:00:00 2001
From: Serg <s.frontend.dev@gmail.com>
Date: Sun, 4 May 2025 17:31:57 +1000
Subject: [PATCH 2/5] fix: review fix

---
 src/components/BuyTokensDialog.vue   | 109 +++++++++++----------
 src/components/PasswordSetDialog.vue |  15 ++-
 src/store/modules/options/index.js   |   6 +-
 src/views/Login.vue                  | 135 +++++++++++----------------
 src/views/Options.vue                |  33 ++++---
 5 files changed, 139 insertions(+), 159 deletions(-)

diff --git a/src/components/BuyTokensDialog.vue b/src/components/BuyTokensDialog.vue
index b01c67f41..63d20d0ca 100644
--- a/src/components/BuyTokensDialog.vue
+++ b/src/components/BuyTokensDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="show" width="320" :class="className">
+  <v-dialog v-model="show" width="320">
     <v-card>
       <v-card-title class="a-text-header">
         {{ $t('home.buy_tokens_btn') }}
@@ -56,69 +56,68 @@
   </v-dialog>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
 import validateAddress from '@/lib/validateAddress'
+import { websiteUriToOnion } from '@/lib/uri'
+
 import AdamantIcon from '@/components/icons/common/Adamant.vue'
 import CoingeckoIcon from '@/components/icons/common/Coingecko.vue'
 import CoinmarketcapIcon from '@/components/icons/common/Coinmarketcap.vue'
 import ExchangerIcon from '@/components/icons/common/Exchanger.vue'
 import Icon from '@/components/icons/BaseIcon.vue'
-import { websiteUriToOnion } from '@/lib/uri'
 
-export default {
-  components: {
-    AdamantIcon,
-    CoingeckoIcon,
-    CoinmarketcapIcon,
-    ExchangerIcon,
-    Icon
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
   },
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: true
-    },
-    adamantAddress: {
-      type: String,
-      default: undefined,
-      validator: (v) => validateAddress('ADM', v)
-    }
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    className: () => 'buy-tokens-dialog',
-    admLink() {
-      return websiteUriToOnion(
-        this.adamantAddress
-          ? `${this.$t('home.buy_tokens_btn_link')}?wallet=${this.adamantAddress}`
-          : `${this.$t('home.buy_tokens_btn_link')}`
-      )
-    },
-    show: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.$emit('update:modelValue', value)
-      }
-    }
+  adamantAddress: {
+    type: String,
+    default: undefined,
+    validator: (v) => validateAddress('ADM', v)
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { t } = useI18n()
+const router = useRouter()
+
+const show = computed({
+  get() {
+    return props.modelValue
   },
-  methods: {
-    closeDialog() {
-      this.show = false
-    },
-    openLink(link) {
-      if (link.startsWith('U')) {
-        this.$router.push({
-          name: 'Chat',
-          params: { partnerId: link }
-        })
-      } else {
-        window.open(link, '_blank', 'resizable,scrollbars,status,noopener')
-      }
-
-      this.closeDialog()
-    }
+  set(value) {
+    emit('update:modelValue', value)
   }
+})
+
+const admLink = computed(() =>
+  websiteUriToOnion(
+    props.adamantAddress
+      ? `${t('home.buy_tokens_btn_link')}?wallet=${props.adamantAddress}`
+      : `${t('home.buy_tokens_btn_link')}`
+  )
+)
+
+const closeDialog = () => {
+  show.value = false
+}
+
+const openLink = (link) => {
+  if (link.startsWith('U')) {
+    router.push({
+      name: 'Chat',
+      params: { partnerId: link }
+    })
+  } else {
+    window.open(link, '_blank', 'resizable,scrollbars,status,noopener')
+  }
+
+  closeDialog()
 }
 </script>
diff --git a/src/components/PasswordSetDialog.vue b/src/components/PasswordSetDialog.vue
index 852c581b5..6700001a3 100644
--- a/src/components/PasswordSetDialog.vue
+++ b/src/components/PasswordSetDialog.vue
@@ -8,7 +8,7 @@
       <v-divider class="a-divider" />
 
       <v-card-text class="pa-4">
-<!--     Todo: check src/components/LoginForm.vue component and consider the possibility to move common code to new component  -->
+        <!--     Todo: check src/components/LoginForm.vue component and consider the possibility to move common code to new component  -->
         <v-text-field
           v-model="password"
           color="primary"
@@ -73,7 +73,6 @@ import { UserPasswordArticleLink } from '@/lib/constants'
 import { saveState } from '@/lib/idb/state'
 import { mdiEye, mdiEyeOff } from '@mdi/js'
 
-
 export default {
   props: {
     modelValue: {
@@ -83,6 +82,18 @@ export default {
   },
   emits: ['password', 'update:modelValue'],
   setup() {
+    const onKeydownHandler = (e) => {
+      if (e.key === 'Escape') {
+        if (this.show) {
+          e.stopPropagation()
+          this.togglePasswordVisibility()
+
+          window.removeEventListener('keydown', onKeydownHandler, true)
+        }
+      }
+    }
+
+    window.addEventListener('keydown', onKeydownHandler, true)
 
     return {
       mdiEye,
diff --git a/src/store/modules/options/index.js b/src/store/modules/options/index.js
index 243b99853..351a3dad5 100644
--- a/src/store/modules/options/index.js
+++ b/src/store/modules/options/index.js
@@ -12,11 +12,13 @@ const state = () => ({
   currentWallet: Cryptos.ADM, // current Wallet Tab on Account view (this is not an option)
   useSocketConnection: true,
   suppressWarningOnAddressesNotification: false,
-  currentRate: Rates.USD
+  currentRate: Rates.USD,
+  scrollTopPosition: 0
 })
 
 const getters = {
-  isLoginViaPassword: (state) => state.stayLoggedIn
+  isLoginViaPassword: (state) => state.stayLoggedIn,
+  scrollTopPosition: (state) => state.scrollTopPosition
 }
 
 const mutations = {
diff --git a/src/views/Login.vue b/src/views/Login.vue
index d88a16181..ff3b989f6 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -27,7 +27,7 @@
         <v-sheet v-if="!isLoginViaPassword" class="text-center mt-4" color="transparent">
           <v-row justify="center" no-gutters>
             <v-col sm="8" md="8" lg="8">
-              <login-form
+              <LoginForm
                 ref="loginForm"
                 v-model="passphrase"
                 @login="onLogin"
@@ -92,8 +92,8 @@
   </component>
 </template>
 
-<script>
-import { nextTick, defineComponent, computed, ref } from 'vue'
+<script setup>
+import { nextTick, computed, ref } from 'vue'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 import { mdiCog, mdiChevronRight } from '@mdi/js'
@@ -111,92 +111,61 @@ import LoginPasswordForm from '@/components/LoginPasswordForm.vue'
 import Logo from '@/components/icons/common/Logo.vue'
 import { navigateByURI } from '@/router/navigationGuard'
 
-export default defineComponent({
-  components: {
-    LanguageSwitcher,
-    PassphraseGenerator,
-    LoginForm,
-    QrcodeScannerDialog,
-    QrcodeCapture,
-    Icon,
-    QrCodeScanIcon,
-    FileIcon,
-    LoginPasswordForm,
-    Logo
-  },
-  setup() {
-    const passphrase = ref('')
-    const password = ref('')
-    const showQrcodeScanner = ref(false)
-    const logo = '/img/adamant-logo-transparent-512x512.png'
-    const store = useStore()
-    const route = useRoute()
-    const { t } = useI18n()
-    const className = 'login-page'
-    const loginForm = ref(null)
+const store = useStore()
+const route = useRoute()
+const { t } = useI18n()
 
-    const isLoginViaPassword = computed(() => store.getters['options/isLoginViaPassword'])
+const className = 'login-page'
+const passphrase = ref('')
+const password = ref('')
+const showQrcodeScanner = ref(false)
+const loginForm = ref(null)
 
-    const layout = computed(() => route.meta.layout || 'default')
+const isLoginViaPassword = computed(() => store.getters['options/isLoginViaPassword'])
+const layout = computed(() => route.meta.layout || 'default')
 
-    const onDetectQrcode = (passphrase) => {
-      onScanQrcode(passphrase)
-    }
-    const onDetectQrcodeError = (err) => {
-      passphrase.value = ''
-      store.dispatch('snackbar/show', {
-        message: t('login.invalid_qr_code')
-      })
-      console.warn(err)
-    }
-    const onLogin = () => {
-      if (!store.state.chat.isFulfilled) {
-        store.commit('chat/createAdamantChats')
-        store.dispatch('chat/loadChats').then(() => store.dispatch('startInterval'))
-      } else {
-        store.dispatch('startInterval')
-      }
+const onDetectQrcode = (passphrase) => {
+  onScanQrcode(passphrase)
+}
 
-      navigateByURI()
-    }
-    const onLoginError = (errorMessage) => {
-      store.dispatch('snackbar/show', {
-        message: errorMessage,
-        timeout: 3000
-      })
-    }
-    const onCopyPassphrase = () => {
-      store.dispatch('snackbar/show', {
-        message: t('home.copied'),
-        timeout: 2000
-      })
-    }
-    const onScanQrcode = (value) => {
-      passphrase.value = value
-      nextTick(() => loginForm.value.submit())
-    }
+const onDetectQrcodeError = (err) => {
+  passphrase.value = ''
+  store.dispatch('snackbar/show', {
+    message: t('login.invalid_qr_code')
+  })
+  console.warn(err)
+}
 
-    return {
-      passphrase,
-      password,
-      showQrcodeScanner,
-      logo,
-      className,
-      isLoginViaPassword,
-      t,
-      loginForm,
-      mdiCog,
-      mdiChevronRight,
-      layout,
-      onDetectQrcode,
-      onDetectQrcodeError,
-      onLogin,
-      onLoginError,
-      onCopyPassphrase,
-      onScanQrcode
-    }
+const onLogin = () => {
+  if (!store.state.chat.isFulfilled) {
+    store.commit('chat/createAdamantChats')
+    store.dispatch('chat/loadChats').then(() => store.dispatch('startInterval'))
+  } else {
+    store.dispatch('startInterval')
   }
-})
+  navigateByURI()
+}
+
+const onLoginError = (errorMessage) => {
+  store.dispatch('snackbar/show', {
+    message: errorMessage,
+    timeout: 3000
+  })
+}
+
+const onCopyPassphrase = () => {
+  store.dispatch('snackbar/show', {
+    message: t('home.copied'),
+    timeout: 2000
+  })
+}
+
+const onScanQrcode = (value) => {
+  passphrase.value = value
+  nextTick(() => {
+    loginForm.value.submit()
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Options.vue b/src/views/Options.vue
index 93041c856..e21a28435 100644
--- a/src/views/Options.vue
+++ b/src/views/Options.vue
@@ -210,7 +210,6 @@ export default {
   props: {
     sidebarLayoutRef: {
       type: Object,
-      required: false,
       default: null
     }
   },
@@ -229,22 +228,34 @@ export default {
   }),
   mounted() {
     nextTick(() => {
-      if (this.sidebarLayoutRef) {
-        const scrollTopValue = Number(localStorage.getItem('optionsScrollTop')) || 0
+      if (this.sidebarLayoutRef && this.scrollTopPosition) {
         this.sidebarLayoutRef.scrollTo({
-          top: scrollTopValue
+          top: this.scrollTopPosition
         })
       }
     })
   },
   beforeUnmount() {
-    localStorage.setItem('optionsScrollTop', this.sidebarLayoutRef?.scrollTop || 0)
+    if (this.sidebarLayoutRef) {
+      this.scrollTopPosition = this.sidebarLayoutRef.scrollTop || 0
+    }
   },
   computed: {
     className: () => 'settings-view',
     stayLoggedIn() {
       return this.$store.state.options.stayLoggedIn
     },
+    scrollTopPosition: {
+      get() {
+        return this.$store.state.options.scrollTopPosition
+      },
+      set(value) {
+        this.$store.commit('options/updateOption', {
+          key: 'scrollTopPosition',
+          value
+        })
+      }
+    },
     sendMessageOnEnter: {
       get() {
         return this.$store.state.options.sendMessageOnEnter
@@ -335,23 +346,11 @@ export default {
         value: true
       })
     },
-    onKeydownHandler(e) {
-      if (e.key === 'Escape') {
-        if (this.passwordDialog) {
-          e.stopPropagation()
-          this.passwordDialog = false
-
-          window.removeEventListener('keydown', this.onKeydownHandler, true)
-        }
-      }
-    },
     onCheckStayLoggedIn() {
       if (!this.stayLoggedIn) {
         isIDBSupported
           .then(() => {
             this.passwordDialog = true
-
-            window.addEventListener('keydown', this.onKeydownHandler, true)
           })
           .catch(() => {
             this.$store.dispatch('snackbar/show', {

From d91640d1fbdb698d4b71b080c6c277fc522d7682 Mon Sep 17 00:00:00 2001
From: Serg <s.frontend.dev@gmail.com>
Date: Mon, 5 May 2025 13:23:30 +1000
Subject: [PATCH 3/5] fix: review fix

---
 src/components/BuyTokensDialog.vue | 20 +++++++++++---------
 src/router/navigationGuard.js      |  2 +-
 src/views/AppSidebar.vue           |  3 ++-
 src/views/Login.vue                | 27 ++++++++++++++++-----------
 src/views/Options.vue              | 11 ++++-------
 5 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/components/BuyTokensDialog.vue b/src/components/BuyTokensDialog.vue
index 63d20d0ca..3ee84a02d 100644
--- a/src/components/BuyTokensDialog.vue
+++ b/src/components/BuyTokensDialog.vue
@@ -2,7 +2,7 @@
   <v-dialog v-model="show" width="320">
     <v-card>
       <v-card-title class="a-text-header">
-        {{ $t('home.buy_tokens_btn') }}
+        {{ t('home.buy_tokens_btn') }}
       </v-card-title>
 
       <v-divider class="a-divider" />
@@ -14,7 +14,7 @@
               <icon><exchanger-icon /></icon>
             </template>
 
-            <v-list-item-title>{{ $t('home.buy_tokens_exchanger') }}</v-list-item-title>
+            <v-list-item-title>{{ t('home.buy_tokens_exchanger') }}</v-list-item-title>
           </v-list-item>
 
           <v-list-item avatar @click="openLink(admLink)">
@@ -22,7 +22,7 @@
               <icon><adamant-icon /></icon>
             </template>
 
-            <v-list-item-title>{{ $t('home.buy_tokens_anonymously') }}</v-list-item-title>
+            <v-list-item-title>{{ t('home.buy_tokens_anonymously') }}</v-list-item-title>
           </v-list-item>
 
           <v-list-item
@@ -34,7 +34,7 @@
             </template>
 
             <v-list-item-title>{{
-              $t('home.exchanges_on', { aggregator: 'CoinMarketCap' })
+              t('home.exchanges_on', { aggregator: 'CoinMarketCap' })
             }}</v-list-item-title>
           </v-list-item>
 
@@ -47,7 +47,7 @@
             </template>
 
             <v-list-item-title>{{
-              $t('home.exchanges_on', { aggregator: 'CoinGecko' })
+              t('home.exchanges_on', { aggregator: 'CoinGecko' })
             }}</v-list-item-title>
           </v-list-item>
         </v-list>
@@ -56,7 +56,7 @@
   </v-dialog>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -78,11 +78,13 @@ const props = defineProps({
   adamantAddress: {
     type: String,
     default: undefined,
-    validator: (v) => validateAddress('ADM', v)
+    validator: (v: string) => validateAddress('ADM', v)
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
 
 const { t } = useI18n()
 const router = useRouter()
@@ -108,7 +110,7 @@ const closeDialog = () => {
   show.value = false
 }
 
-const openLink = (link) => {
+const openLink = (link: string) => {
   if (link.startsWith('U')) {
     router.push({
       name: 'Chat',
diff --git a/src/router/navigationGuard.js b/src/router/navigationGuard.js
index 3806bc467..2174aaa45 100644
--- a/src/router/navigationGuard.js
+++ b/src/router/navigationGuard.js
@@ -11,7 +11,7 @@ import { AllCryptos } from '@/lib/constants/cryptos'
  *
  * @param {function} next Resolves the hook (redirect to Chats)
  */
-export function navigateByURI(next) {
+export function navigateByURI(next = null) {
   const contact = parseURIasAIP()
 
   if (contact.address) {
diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
index d6bc1191a..cad80dcbd 100644
--- a/src/views/AppSidebar.vue
+++ b/src/views/AppSidebar.vue
@@ -33,12 +33,13 @@
             src="/img/adamant-logo-transparent-512x512.png"
             draggable="false"
           />
-          <router-view v-show="!showLogo" :key="route.path" :sidebarLayoutRef="sidebarLayoutRef" />
+          <router-view v-show="!showLogo" :key="route.path" />
         </div>
       </component>
     </div>
   </div>
 </template>
+
 <script lang="ts" setup>
 import { useRoute } from 'vue-router'
 import { computed, useTemplateRef, ref, provide } from 'vue'
diff --git a/src/views/Login.vue b/src/views/Login.vue
index ff3b989f6..c7fb11d2d 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -7,7 +7,7 @@
             <language-switcher :prepend-icon="mdiChevronRight" />
           </div>
           <div :class="`${className}__settings-button`">
-            <v-btn @click="$router.push('/options/nodes')" icon variant="plain" :size="32">
+            <v-btn @click="navigateToNodes" icon variant="plain" :size="32">
               <v-icon :icon="mdiCog" />
             </v-btn>
           </div>
@@ -27,7 +27,7 @@
         <v-sheet v-if="!isLoginViaPassword" class="text-center mt-4" color="transparent">
           <v-row justify="center" no-gutters>
             <v-col sm="8" md="8" lg="8">
-              <LoginForm
+              <login-form
                 ref="loginForm"
                 v-model="passphrase"
                 @login="onLogin"
@@ -92,12 +92,12 @@
   </component>
 </template>
 
-<script setup>
-import { nextTick, computed, ref } from 'vue'
+<script setup lang="ts">
+import { nextTick, computed, ref, useTemplateRef } from 'vue'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 import { mdiCog, mdiChevronRight } from '@mdi/js'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import QrcodeCapture from '@/components/QrcodeCapture.vue'
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
@@ -113,22 +113,27 @@ import { navigateByURI } from '@/router/navigationGuard'
 
 const store = useStore()
 const route = useRoute()
+const router = useRouter()
 const { t } = useI18n()
 
 const className = 'login-page'
 const passphrase = ref('')
 const password = ref('')
 const showQrcodeScanner = ref(false)
-const loginForm = ref(null)
+const loginForm = useTemplateRef<InstanceType<typeof LoginForm> | null>('loginForm')
 
 const isLoginViaPassword = computed(() => store.getters['options/isLoginViaPassword'])
 const layout = computed(() => route.meta.layout || 'default')
 
-const onDetectQrcode = (passphrase) => {
+const navigateToNodes = () => {
+  router.push('/options/nodes')
+}
+
+const onDetectQrcode = (passphrase: string) => {
   onScanQrcode(passphrase)
 }
 
-const onDetectQrcodeError = (err) => {
+const onDetectQrcodeError = (err: unknown) => {
   passphrase.value = ''
   store.dispatch('snackbar/show', {
     message: t('login.invalid_qr_code')
@@ -146,7 +151,7 @@ const onLogin = () => {
   navigateByURI()
 }
 
-const onLoginError = (errorMessage) => {
+const onLoginError = (errorMessage: string) => {
   store.dispatch('snackbar/show', {
     message: errorMessage,
     timeout: 3000
@@ -160,10 +165,10 @@ const onCopyPassphrase = () => {
   })
 }
 
-const onScanQrcode = (value) => {
+const onScanQrcode = (value: string) => {
   passphrase.value = value
   nextTick(() => {
-    loginForm.value.submit()
+    loginForm.value?.submit()
   })
 }
 </script>
diff --git a/src/views/Options.vue b/src/views/Options.vue
index e21a28435..171b06227 100644
--- a/src/views/Options.vue
+++ b/src/views/Options.vue
@@ -189,6 +189,7 @@
 </template>
 
 <script>
+import { nextTick, inject } from 'vue'
 import { mdiChevronRight, mdiChevronDown, mdiLogoutVariant } from '@mdi/js'
 
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
@@ -198,7 +199,7 @@ import { clearDb, db as isIDBSupported } from '@/lib/idb'
 import { resetPinia } from '@/plugins/pinia'
 import NavigationWrapper from '@/components/NavigationWrapper.vue'
 import { useSavedScroll } from '@/hooks/useSavedScroll'
-import { nextTick } from 'vue'
+import { sidebarLayoutKey } from '@/lib/constants'
 
 export default {
   components: {
@@ -207,17 +208,13 @@ export default {
     CurrencySwitcher,
     PasswordSetDialog
   },
-  props: {
-    sidebarLayoutRef: {
-      type: Object,
-      default: null
-    }
-  },
   setup() {
     const { hasView } = useSavedScroll()
+    const sidebarLayoutRef = inject(sidebarLayoutKey)
 
     return {
       hasView,
+      sidebarLayoutRef,
       mdiChevronDown,
       mdiChevronRight,
       mdiLogoutVariant

From f067767f75aa9e6753a659b1174ed72925cfd17a Mon Sep 17 00:00:00 2001
From: Serg <s.frontend.dev@gmail.com>
Date: Sat, 10 May 2025 14:39:57 +1000
Subject: [PATCH 4/5] fix: passwordSetDialog component to composition api

---
 src/components/PasswordSetDialog.vue | 175 +++++++++++++--------------
 1 file changed, 84 insertions(+), 91 deletions(-)

diff --git a/src/components/PasswordSetDialog.vue b/src/components/PasswordSetDialog.vue
index 6700001a3..a849ad70d 100644
--- a/src/components/PasswordSetDialog.vue
+++ b/src/components/PasswordSetDialog.vue
@@ -2,7 +2,7 @@
   <v-dialog v-model="show" width="500">
     <v-card>
       <v-card-title class="a-text-header">
-        {{ $t('login_via_password.popup_title') }}
+        {{ t('login_via_password.popup_title') }}
       </v-card-title>
 
       <v-divider class="a-divider" />
@@ -17,8 +17,8 @@
           class="a-input"
           :type="showPassword ? 'text' : 'password'"
           variant="underlined"
-          :label="$t('login_via_password.enter_password')"
-          :name="Date.now()"
+          :label="t('login_via_password.enter_password')"
+          :name="Date.now().toString()"
           @keyup.enter="submit"
         >
           <template #append-inner>
@@ -35,8 +35,8 @@
         </v-text-field>
 
         <div class="a-text-regular-enlarged">
-          {{ $t('login_via_password.article_hint') }}
-          <a @click="openLink(userPasswordAgreementLink)">{{ $t('login_via_password.article') }}</a
+          {{ t('login_via_password.article_hint') }}
+          <a @click="openLink(userPasswordAgreementLink)">{{ t('login_via_password.article') }}</a
           >.
         </div>
       </v-card-text>
@@ -45,7 +45,7 @@
         <v-spacer />
 
         <v-btn variant="text" class="a-btn-regular" @click="show = false">
-          {{ $t('transfer.confirm_cancel') }}
+          {{ t('transfer.confirm_cancel') }}
         </v-btn>
 
         <v-btn
@@ -61,100 +61,93 @@
             size="24"
             class="mr-4"
           />
-          {{ $t('login_via_password.popup_confirm_text') }}
+          {{ t('login_via_password.popup_confirm_text') }}
         </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import { mdiEye, mdiEyeOff } from '@mdi/js'
+import { useI18n } from 'vue-i18n'
+
 import { UserPasswordArticleLink } from '@/lib/constants'
 import { saveState } from '@/lib/idb/state'
-import { mdiEye, mdiEyeOff } from '@mdi/js'
 
-export default {
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: true
-    }
-  },
-  emits: ['password', 'update:modelValue'],
-  setup() {
-    const onKeydownHandler = (e) => {
-      if (e.key === 'Escape') {
-        if (this.show) {
-          e.stopPropagation()
-          this.togglePasswordVisibility()
-
-          window.removeEventListener('keydown', onKeydownHandler, true)
-        }
-      }
-    }
-
-    window.addEventListener('keydown', onKeydownHandler, true)
-
-    return {
-      mdiEye,
-      mdiEyeOff
-    }
-  },
-  data: () => ({
-    password: '',
-    showSpinner: false,
-    disabledButton: false,
-    userPasswordAgreementLink: UserPasswordArticleLink,
-    showPassword: false
-  }),
-  computed: {
-    show: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.$emit('update:modelValue', value)
-      }
-    },
-    isValidForm() {
-      return this.password.length > 0
-    }
-  },
-  methods: {
-    openLink(link) {
-      window.open(link, '_blank', 'resizable,scrollbars,status,noopener')
-    },
-    submit() {
-      if (!this.isValidForm) {
-        return
-      }
-      this.disabledButton = true
-      this.showSpinner = true
-
-      this.$store
-        .dispatch('setPassword', this.password)
-        .then((encodedPassword) => {
-          this.password = ''
-
-          this.$emit('password', encodedPassword)
-
-          return encodedPassword
-        })
-        .then(() => {
-          return saveState(this.$store)
-        })
-        .catch((err) => {
-          console.error(err)
-        })
-        .finally(() => {
-          this.disabledButton = false
-          this.showSpinner = false
-          this.show = false
-        })
-    },
-    togglePasswordVisibility() {
-      this.showPassword = !this.showPassword
-    }
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'password', value: string): void
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const store = useStore()
+const { t } = useI18n()
+
+const password = ref('')
+const showSpinner = ref(false)
+const disabledButton = ref(false)
+const showPassword = ref(false)
+const userPasswordAgreementLink = UserPasswordArticleLink
+
+const show = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const isValidForm = computed(() => password.value.length > 0)
+
+const openLink = (link: string) => {
+  window.open(link, '_blank', 'resizable,scrollbars,status,noopener')
+}
+
+const togglePasswordVisibility = () => {
+  showPassword.value = !showPassword.value
+}
+
+const submit = () => {
+  if (!isValidForm.value) return
+
+  disabledButton.value = true
+  showSpinner.value = true
+
+  store
+    .dispatch('setPassword', password.value)
+    .then((encodedPassword) => {
+      password.value = ''
+      emit('password', encodedPassword)
+
+      return encodedPassword
+    })
+    .then(() => saveState(store))
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      disabledButton.value = false
+      showSpinner.value = false
+      show.value = false
+    })
+}
+
+const onKeydownHandler = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && show.value) {
+    e.stopPropagation()
+    show.value = false
+    window.removeEventListener('keydown', onKeydownHandler, true)
   }
 }
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeydownHandler, true)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKeydownHandler, true)
+})
 </script>

From d983e02cd9b69de8c5a41a2116c06025ddc08220 Mon Sep 17 00:00:00 2001
From: Serg <s.frontend.dev@gmail.com>
Date: Wed, 14 May 2025 15:05:47 +1000
Subject: [PATCH 5/5] refactor: convert Options to composition api

---
 src/components/AChat/AChatForm.vue           |   2 +-
 src/components/Chat/Chat.vue                 |   2 +-
 src/components/Chat/ChatMenu.vue             |   2 +-
 src/components/Chat/Chats.vue                |  54 +--
 src/components/PasswordSetDialog.vue         |  22 +-
 src/main.ts                                  |   2 +-
 src/stores/{chat-state.ts => modal-state.ts} |   8 +
 src/views/AppSidebar.vue                     |  73 +++-
 src/views/Chat.vue                           |   5 +-
 src/views/Options.vue                        | 421 +++++++++----------
 10 files changed, 305 insertions(+), 286 deletions(-)
 rename src/stores/{chat-state.ts => modal-state.ts} (86%)

diff --git a/src/components/AChat/AChatForm.vue b/src/components/AChat/AChatForm.vue
index 9c237d39f..125fdb145 100644
--- a/src/components/AChat/AChatForm.vue
+++ b/src/components/AChat/AChatForm.vue
@@ -47,7 +47,7 @@ import { computed, nextTick } from 'vue'
 import ChatEmojis from '@/components/Chat/ChatEmojis.vue'
 import { isMobile } from '@/lib/display-mobile'
 import { mdiSend } from '@mdi/js'
-import { useChatStateStore } from '@/stores/chat-state'
+import { useChatStateStore } from '@/stores/modal-state'
 
 export default {
   components: { ChatEmojis },
diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index a892feab4..187091e16 100644
--- a/src/components/Chat/Chat.vue
+++ b/src/components/Chat/Chat.vue
@@ -307,7 +307,7 @@ import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import { useChatsSpinner } from '@/hooks/useChatsSpinner'
 import ProgressIndicator from '@/components/ProgressIndicator.vue'
-import { useChatStateStore } from '@/stores/chat-state'
+import { useChatStateStore } from '@/stores/modal-state'
 
 const validationErrors = {
   emptyMessage: 'EMPTY_MESSAGE',
diff --git a/src/components/Chat/ChatMenu.vue b/src/components/Chat/ChatMenu.vue
index 8c4fc5222..a5d944109 100644
--- a/src/components/Chat/ChatMenu.vue
+++ b/src/components/Chat/ChatMenu.vue
@@ -61,7 +61,7 @@ import CryptoIcon from '@/components/icons/CryptoIcon.vue'
 import IconBox from '@/components/icons/IconBox.vue'
 import UploadFile from '../UploadFile.vue'
 import { mdiFile, mdiImage, mdiPlusCircleOutline } from '@mdi/js'
-import { useChatStateStore } from '@/stores/chat-state'
+import { useChatStateStore } from '@/stores/modal-state'
 import type { FileData } from '@/lib/files'
 import { CoinSymbol } from '@/store/modules/wallets/types'
 
diff --git a/src/components/Chat/Chats.vue b/src/components/Chat/Chats.vue
index 2e5228348..c566cf55c 100644
--- a/src/components/Chat/Chats.vue
+++ b/src/components/Chat/Chats.vue
@@ -91,8 +91,7 @@ import {
   ref,
   watch
 } from 'vue'
-import { useChatStateStore } from '@/stores/chat-state'
-import { storeToRefs } from 'pinia'
+import { useChatStateStore } from '@/stores/modal-state'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 import { useChatsSpinner } from '@/hooks/useChatsSpinner'
@@ -111,51 +110,30 @@ const props = withDefaults(
 )
 
 const store = useStore()
+const chatStateStore = useChatStateStore()
 const router = useRouter()
+const route = useRoute()
 const { t } = useI18n()
 const showSpinner = useChatsSpinner()
-const route = useRoute()
-const chatStateStore = useChatStateStore()
 
 const className = 'chats-view'
 
-const {
-  actionsDropdownMessageId,
-  isShowPartnerInfoDialog,
-  isShowFreeTokensDialog,
-  isChatMenuOpen,
-  isEmojiPickerOpen
-} = storeToRefs(chatStateStore)
 const { setShowChatStartDialog } = chatStateStore
 
+const isShowChatStartDialog = computed({
+  get: () => chatStateStore.isShowChatStartDialog,
+  set: (value) => setShowChatStartDialog(value)
+})
+
 const lastPartnerId = ref<string | null>(null)
 const savedRoute = ref(null)
 const loading = ref(false)
 const noMoreChats = ref(false)
 const loadingSeparator = ref<InstanceType<typeof ChatPreview>[]>([])
-
 const chatPagePartnerId = computed(() => {
   // We assume partnerId to always be a string
   return route.params.partnerId as string
 })
-const isSnackbarShowing = computed(() => store.state.snackbar.show)
-const noActiveNodesDialog = computed(() => store.state.chat.noActiveNodesDialog)
-const isShowChatStartDialog = computed({
-  get: () => chatStateStore.isShowChatStartDialog,
-  set: (value) => setShowChatStartDialog(value)
-})
-const canPressEscape = computed(() => {
-  return (
-    !noActiveNodesDialog.value &&
-    !isShowChatStartDialog.value &&
-    !isShowFreeTokensDialog.value &&
-    !isSnackbarShowing.value &&
-    !isShowPartnerInfoDialog.value &&
-    !isChatMenuOpen.value &&
-    !isEmojiPickerOpen.value &&
-    actionsDropdownMessageId.value === -1
-  )
-})
 const isFulfilled = computed(() => store.state.chat.isFulfilled)
 const lastMessages = computed(() => store.getters['chat/lastMessages'])
 const separatorIndex = computed(() => {
@@ -189,13 +167,11 @@ onBeforeMount(() => {
 })
 
 onMounted(() => {
-  document.addEventListener('keydown', onKeydownHandler)
   setShowChatStartDialog(props.showNewContact)
   attachScrollListener()
 })
 
 onBeforeUnmount(() => {
-  document.removeEventListener('keydown', onKeydownHandler)
   destroyScrollListener()
 })
 
@@ -213,20 +189,6 @@ const checkIsActive = (contactId: string) => {
   return route.name !== 'Chats' && contactId === lastPartnerId.value
 }
 
-const onKeydownHandler = (e: KeyboardEvent) => {
-  if (canPressEscape.value) {
-    if (e.key === 'Escape') {
-      if (route.query.from?.includes('chats')) {
-        router.push(route.query.from as string)
-        return
-      }
-      router.push({
-        name: 'Chats'
-      })
-    }
-  }
-}
-
 const openChat = (partnerId: string, messageText?: string) => {
   router.push({
     name: 'Chat',
diff --git a/src/components/PasswordSetDialog.vue b/src/components/PasswordSetDialog.vue
index a849ad70d..b3defb08f 100644
--- a/src/components/PasswordSetDialog.vue
+++ b/src/components/PasswordSetDialog.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
 import { mdiEye, mdiEyeOff } from '@mdi/js'
 import { useI18n } from 'vue-i18n'
@@ -97,7 +97,9 @@ const userPasswordAgreementLink = UserPasswordArticleLink
 
 const show = computed({
   get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value)
+  set: (value) => {
+    emit('update:modelValue', value)
+  }
 })
 
 const isValidForm = computed(() => password.value.length > 0)
@@ -134,20 +136,4 @@ const submit = () => {
       show.value = false
     })
 }
-
-const onKeydownHandler = (e: KeyboardEvent) => {
-  if (e.key === 'Escape' && show.value) {
-    e.stopPropagation()
-    show.value = false
-    window.removeEventListener('keydown', onKeydownHandler, true)
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', onKeydownHandler, true)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', onKeydownHandler, true)
-})
 </script>
diff --git a/src/main.ts b/src/main.ts
index a1f5faab0..a64e78ca3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -22,7 +22,7 @@ import 'dayjs/locale/ru'
 
 const app = createApp(App)
 
-app.config.globalProperties.appVersion = packageJSON.version
+app.provide('appVersion', packageJSON.version)
 
 app.use(router)
 app.use(store)
diff --git a/src/stores/chat-state.ts b/src/stores/modal-state.ts
similarity index 86%
rename from src/stores/chat-state.ts
rename to src/stores/modal-state.ts
index b31e8b473..8704a0d6f 100644
--- a/src/stores/chat-state.ts
+++ b/src/stores/modal-state.ts
@@ -5,6 +5,7 @@ export const useChatStateStore = defineStore('chatState', () => {
   const isShowChatStartDialog = ref(false)
   const isShowPartnerInfoDialog = ref(false)
   const isShowFreeTokensDialog = ref(false)
+  const isShowSetPasswordDialog = ref(false)
   const isChatMenuOpen = ref(false)
   const isEmojiPickerOpen = ref(false)
   const actionsDropdownMessageId = ref<number | string>(-1)
@@ -21,6 +22,10 @@ export const useChatStateStore = defineStore('chatState', () => {
     isShowFreeTokensDialog.value = value
   }
 
+  const setShowSetPasswordDialog = (value: boolean) => {
+    isShowSetPasswordDialog.value = value
+  }
+
   const setChatMenuOpen = (value: boolean) => {
     isChatMenuOpen.value = value
   }
@@ -37,6 +42,7 @@ export const useChatStateStore = defineStore('chatState', () => {
     setShowChatStartDialog(false)
     setShowPartnerInfoDialog(false)
     setShowFreeTokensDialog(false)
+    setShowSetPasswordDialog(false)
     setChatMenuOpen(false)
     setEmojiPickerOpen(false)
     setActionsDropdownMessageId(-1)
@@ -47,6 +53,7 @@ export const useChatStateStore = defineStore('chatState', () => {
     isShowChatStartDialog,
     isShowPartnerInfoDialog,
     isShowFreeTokensDialog,
+    isShowSetPasswordDialog,
     isChatMenuOpen,
     isEmojiPickerOpen,
 
@@ -54,6 +61,7 @@ export const useChatStateStore = defineStore('chatState', () => {
     setShowChatStartDialog,
     setShowPartnerInfoDialog,
     setShowFreeTokensDialog,
+    setShowSetPasswordDialog,
     setChatMenuOpen,
     setEmojiPickerOpen,
     $reset
diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
index cad80dcbd..faf1143c0 100644
--- a/src/views/AppSidebar.vue
+++ b/src/views/AppSidebar.vue
@@ -41,12 +41,19 @@
 </template>
 
 <script lang="ts" setup>
-import { useRoute } from 'vue-router'
-import { computed, useTemplateRef, ref, provide } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { computed, useTemplateRef, ref, provide, onMounted, onBeforeUnmount } from 'vue'
 import { useStore } from 'vuex'
 import LeftSide from '@/components/LeftSide.vue'
 import { useScreenSize } from '@/hooks/useScreenSize'
 import { sidebarLayoutKey } from '@/lib/constants'
+import { useChatStateStore } from '@/stores/modal-state'
+import { storeToRefs } from 'pinia'
+
+const store = useStore()
+const chatStateStore = useChatStateStore()
+const route = useRoute()
+const router = useRouter()
 
 const sidebarLayoutRef = useTemplateRef('sidebarLayout')
 
@@ -67,9 +74,6 @@ const classes = {
 
 const layout = computed(() => route.meta.layout || 'default')
 
-const route = useRoute()
-const store = useStore()
-
 const SAVED_WIDTH_KEY = 'aside_width'
 
 const asideRef = useTemplateRef('aside')
@@ -145,7 +149,66 @@ if (SAVED_WIDTH_KEY) {
     asideWidth.value = value
   }
 }
+
+const {
+  actionsDropdownMessageId,
+  isShowPartnerInfoDialog,
+  isShowFreeTokensDialog,
+  isShowSetPasswordDialog,
+  isChatMenuOpen,
+  isEmojiPickerOpen
+} = storeToRefs(chatStateStore)
+const { setShowChatStartDialog } = chatStateStore
+const isSnackbarShowing = computed(() => store.state.snackbar.show)
+const noActiveNodesDialog = computed(() => store.state.chat.noActiveNodesDialog)
+const isShowChatStartDialog = computed({
+  get: () => chatStateStore.isShowChatStartDialog,
+  set: (value) => setShowChatStartDialog(value)
+})
+
+const canPressEscape = computed(() => {
+  return (
+    !noActiveNodesDialog.value &&
+    !isShowChatStartDialog.value &&
+    !isShowFreeTokensDialog.value &&
+    !isShowSetPasswordDialog.value &&
+    !isSnackbarShowing.value &&
+    !isShowPartnerInfoDialog.value &&
+    !isChatMenuOpen.value &&
+    !isEmojiPickerOpen.value &&
+    actionsDropdownMessageId.value === -1
+  )
+})
+
+const onKeydownHandler = (e: KeyboardEvent) => {
+  if (canPressEscape.value && e.key === 'Escape') {
+    if (route.query.from?.includes('chats')) {
+      router.push(route.query.from as string)
+      return
+    }
+
+    const parentRoute = route.matched.length > 1 ? route.matched.at(-2) : null
+
+    if (parentRoute) {
+      router.push({
+        name: parentRoute.name,
+        params: { ...route.params }
+      })
+
+      return
+    }
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeydownHandler)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', onKeydownHandler)
+})
 </script>
+
 <style lang="scss" scoped>
 @use 'sass:map';
 @use 'vuetify/settings';
diff --git a/src/views/Chat.vue b/src/views/Chat.vue
index beab4a594..b183aaf36 100644
--- a/src/views/Chat.vue
+++ b/src/views/Chat.vue
@@ -22,13 +22,14 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+
 import Chat from '@/components/Chat/Chat.vue'
 import PartnerInfo from '@/components/PartnerInfo.vue'
 import partnerName from '@/mixins/partnerName'
 import ProgressIndicator from '@/components/ProgressIndicator.vue'
 import { useScreenSize } from '@/hooks/useScreenSize'
-import { computed } from 'vue'
-import { useChatStateStore } from '@/stores/chat-state'
+import { useChatStateStore } from '@/stores/modal-state'
 
 export default {
   components: {
diff --git a/src/views/Options.vue b/src/views/Options.vue
index 171b06227..54b70a01d 100644
--- a/src/views/Options.vue
+++ b/src/views/Options.vue
@@ -1,15 +1,15 @@
 <template>
-  <options-wrapper :class="className">
+  <navigation-wrapper :class="className">
     <router-view v-if="hasView" />
     <template v-else>
       <!-- General -->
       <h3 :class="`${className}__title a-text-caption`" class="mt-4 mb-4">
-        {{ $t('options.general_title') }}
+        {{ t('options.general_title') }}
       </h3>
       <v-row align="center" no-gutters>
         <v-col cols="6">
           <v-list-subheader :class="`${className}__label`">
-            {{ $t('options.language_label') }}
+            {{ t('options.language_label') }}
           </v-list-subheader>
         </v-col>
         <v-col cols="6" class="text-right">
@@ -17,7 +17,7 @@
         </v-col>
         <v-col cols="6">
           <v-list-subheader :class="`${className}__label`">
-            {{ $t('options.currency_label') }}
+            {{ t('options.currency_label') }}
           </v-list-subheader>
         </v-col>
         <v-col cols="6" class="text-right">
@@ -26,7 +26,7 @@
         <v-col cols="12">
           <v-checkbox
             v-model="darkTheme"
-            :label="$t('options.dark_theme')"
+            :label="t('options.dark_theme')"
             color="grey darken-1"
             density="comfortable"
             hide-details
@@ -36,12 +36,12 @@
 
       <!-- Security -->
       <h3 :class="`${className}__title a-text-caption`" class="mt-6 mb-6">
-        {{ $t('options.security_title') }}
+        {{ t('options.security_title') }}
       </h3>
       <v-row align="center" no-gutters>
         <v-col cols="12" a-text-regular-enlarged>
           <v-checkbox
-            :label="$t('options.stay_logged_in')"
+            :label="t('options.stay_logged_in')"
             color="grey darken-1"
             :modelValue="stayLoggedIn"
             density="comfortable"
@@ -50,129 +50,129 @@
           />
 
           <div class="a-text-explanation-enlarged">
-            {{ $t('options.stay_logged_in_tooltip') }}
+            {{ t('options.stay_logged_in_tooltip') }}
           </div>
 
-          <password-set-dialog v-model="passwordDialog" @password="onSetPassword" />
+          <password-set-dialog v-model="isPasswordDialogDisplayed" @password="onSetPassword" />
         </v-col>
       </v-row>
 
       <!-- Chats -->
       <h3 :class="`${className}__title a-text-caption`" class="mt-6 mb-6">
-        {{ $t('options.chats_title') }}
+        {{ t('options.chats_title') }}
       </h3>
       <v-row align="center" no-gutters>
         <v-col cols="12">
           <v-checkbox
             v-model="sendMessageOnEnter"
-            :label="$t('options.send_on_enter')"
+            :label="t('options.send_on_enter')"
             color="grey darken-1"
             density="comfortable"
             hide-details
           />
 
           <div class="a-text-explanation-enlarged">
-            {{ $t('options.send_on_enter_tooltip') }}
+            {{ t('options.send_on_enter_tooltip') }}
           </div>
         </v-col>
 
         <v-col cols="12" class="mt-6">
           <v-checkbox
             v-model="formatMessages"
-            :label="$t('options.format_messages')"
+            :label="t('options.format_messages')"
             color="grey darken-1"
             density="comfortable"
             hide-details
           />
 
           <div class="a-text-explanation-enlarged">
-            {{ $t('options.format_messages_tooltip') }}
+            {{ t('options.format_messages_tooltip') }}
           </div>
         </v-col>
 
         <v-col cols="12" class="mt-6">
           <v-checkbox
             v-model="useFullDate"
-            :label="$t('options.use_full_date')"
+            :label="t('options.use_full_date')"
             color="grey darken-1"
             density="comfortable"
             hide-details
           />
 
           <div class="a-text-explanation-enlarged">
-            {{ $t('options.use_full_date_tooltip') }}
+            {{ t('options.use_full_date_tooltip') }}
           </div>
         </v-col>
       </v-row>
 
       <!-- Notifications -->
       <h3 :class="`${className}__title a-text-caption`" class="mt-6 mb-6">
-        {{ $t('options.notification_title') }}
+        {{ t('options.notification_title') }}
       </h3>
       <v-row align="center" no-gutters>
         <v-col cols="12">
           <v-checkbox
             v-model="allowSoundNotifications"
-            :label="$t('options.enable_sound')"
+            :label="t('options.enable_sound')"
             color="grey darken-1"
             density="comfortable"
             hide-details
           />
 
           <div class="a-text-explanation-enlarged">
-            {{ $t('options.enable_sound_tooltip') }}
+            {{ t('options.enable_sound_tooltip') }}
           </div>
         </v-col>
         <v-col cols="12" class="mt-6">
           <v-checkbox
             v-model="allowPushNotifications"
-            :label="$t('options.enable_push')"
+            :label="t('options.enable_push')"
             color="grey darken-1"
             density="comfortable"
             hide-details
           />
 
           <div class="a-text-explanation-enlarged">
-            {{ $t('options.enable_push_tooltip') }}
+            {{ t('options.enable_push_tooltip') }}
           </div>
         </v-col>
       </v-row>
 
       <!-- Actions -->
       <h3 :class="`${className}__title a-text-caption`" class="mt-6 mb-6">
-        {{ $t('options.actions') }}
+        {{ t('options.actions') }}
       </h3>
       <v-row no-gutters>
         <v-col cols="12">
           <v-list class="actions-list">
             <v-list-item
-              :title="$t('options.nodes_list')"
+              :title="t('options.nodes_list')"
               :append-icon="mdiChevronRight"
-              @click="$router.push('/options/nodes')"
+              @click="router.push('/options/nodes')"
             />
 
             <v-list-item
-              :title="$t('options.wallets_list')"
+              :title="t('options.wallets_list')"
               :append-icon="mdiChevronRight"
-              @click="$router.push('/options/wallets')"
+              @click="router.push('/options/wallets')"
             />
 
             <v-list-item
-              :title="$t('options.export_keys.title')"
+              :title="t('options.export_keys.title')"
               :append-icon="mdiChevronRight"
-              @click="$router.push('/options/export-keys')"
+              @click="router.push('/options/export-keys')"
             />
 
             <v-list-item
-              :title="$t('options.vote_for_delegates_button')"
+              :title="t('options.vote_for_delegates_button')"
               :append-icon="mdiChevronRight"
-              @click="$router.push('/votes')"
+              @click="router.push('/votes')"
             />
 
             <v-divider />
 
             <v-list-item
-              :title="$t('bottom.exit_button')"
+              :title="t('bottom.exit_button')"
               :append-icon="mdiLogoutVariant"
               @click="logout"
             />
@@ -181,16 +181,20 @@
       </v-row>
       <v-row no-gutters>
         <div :class="`${className}__version_info ml-auto`">
-          {{ $t('options.version') }} {{ $root.appVersion }}
+          {{ t('options.version') }} {{ appVersion }}
         </div>
       </v-row>
     </template>
-  </options-wrapper>
+  </navigation-wrapper>
 </template>
 
-<script>
-import { nextTick, inject } from 'vue'
+<script setup lang="ts">
+import { nextTick, inject, computed, onBeforeUnmount, onMounted, Ref } from 'vue'
 import { mdiChevronRight, mdiChevronDown, mdiLogoutVariant } from '@mdi/js'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useTheme } from 'vuetify'
 
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import CurrencySwitcher from '@/components/CurrencySwitcher.vue'
@@ -200,194 +204,189 @@ import { resetPinia } from '@/plugins/pinia'
 import NavigationWrapper from '@/components/NavigationWrapper.vue'
 import { useSavedScroll } from '@/hooks/useSavedScroll'
 import { sidebarLayoutKey } from '@/lib/constants'
+import { useChatStateStore } from '@/stores/modal-state'
 
-export default {
-  components: {
-    OptionsWrapper: NavigationWrapper,
-    LanguageSwitcher,
-    CurrencySwitcher,
-    PasswordSetDialog
+const store = useStore()
+const chatStateStore = useChatStateStore()
+const router = useRouter()
+const { t } = useI18n()
+const theme = useTheme()
+
+const className = 'settings-view'
+
+const { hasView } = useSavedScroll()
+
+const appVersion = inject('appVersion')
+const sidebarLayoutRef = inject<Ref>(sidebarLayoutKey)
+
+const isPasswordDialogDisplayed = computed({
+  get() {
+    return chatStateStore.isShowSetPasswordDialog
   },
-  setup() {
-    const { hasView } = useSavedScroll()
-    const sidebarLayoutRef = inject(sidebarLayoutKey)
-
-    return {
-      hasView,
-      sidebarLayoutRef,
-      mdiChevronDown,
-      mdiChevronRight,
-      mdiLogoutVariant
-    }
+  set(value) {
+    chatStateStore.setShowSetPasswordDialog(value)
+  }
+})
+
+const stayLoggedIn = computed(() => {
+  return store.state.options.stayLoggedIn
+})
+
+const scrollTopPosition = computed({
+  get() {
+    return store.state.options.scrollTopPosition
   },
-  data: () => ({
-    passwordDialog: false
-  }),
-  mounted() {
-    nextTick(() => {
-      if (this.sidebarLayoutRef && this.scrollTopPosition) {
-        this.sidebarLayoutRef.scrollTo({
-          top: this.scrollTopPosition
-        })
-      }
+  set(value) {
+    store.commit('options/updateOption', {
+      key: 'scrollTopPosition',
+      value
     })
+  }
+})
+
+const sendMessageOnEnter = computed({
+  get() {
+    return store.state.options.sendMessageOnEnter
   },
-  beforeUnmount() {
-    if (this.sidebarLayoutRef) {
-      this.scrollTopPosition = this.sidebarLayoutRef.scrollTop || 0
-    }
+  set(value) {
+    store.commit('options/updateOption', {
+      key: 'sendMessageOnEnter',
+      value
+    })
+  }
+})
+
+const formatMessages = computed({
+  get() {
+    return store.state.options.formatMessages
   },
-  computed: {
-    className: () => 'settings-view',
-    stayLoggedIn() {
-      return this.$store.state.options.stayLoggedIn
-    },
-    scrollTopPosition: {
-      get() {
-        return this.$store.state.options.scrollTopPosition
-      },
-      set(value) {
-        this.$store.commit('options/updateOption', {
-          key: 'scrollTopPosition',
-          value
-        })
-      }
-    },
-    sendMessageOnEnter: {
-      get() {
-        return this.$store.state.options.sendMessageOnEnter
-      },
-      set(value) {
-        this.$store.commit('options/updateOption', {
-          key: 'sendMessageOnEnter',
-          value
-        })
-      }
-    },
-    formatMessages: {
-      get() {
-        return this.$store.state.options.formatMessages
-      },
-      set(value) {
-        this.$store.commit('options/updateOption', {
-          key: 'formatMessages',
-          value
-        })
-      }
-    },
-    useFullDate: {
-      get() {
-        return this.$store.state.options.useFullDate
-      },
-      set(value) {
-        this.$store.commit('options/updateOption', {
-          key: 'useFullDate',
-          value
-        })
-      }
-    },
-    allowSoundNotifications: {
-      get() {
-        return this.$store.state.options.allowSoundNotifications
-      },
-      set(value) {
-        this.$store.commit('options/updateOption', {
-          key: 'allowSoundNotifications',
-          value
-        })
-      }
-    },
-    allowTabNotifications: {
-      get() {
-        return this.$store.state.options.allowTabNotifications
-      },
-      set(value) {
-        this.$store.commit('options/updateOption', {
-          key: 'allowTabNotifications',
-          value
-        })
-      }
-    },
-    allowPushNotifications: {
-      get() {
-        return this.$store.state.options.allowPushNotifications
-      },
-      set(value) {
-        this.$store.commit('options/updateOption', {
-          key: 'allowPushNotifications',
-          value
-        })
-      }
-    },
-    darkTheme: {
-      get() {
-        return this.$store.state.options.darkTheme
-      },
-      set(isDarkTheme) {
-        this.$store.commit('options/updateOption', {
-          key: 'darkTheme',
-          value: isDarkTheme
-        })
+  set(value) {
+    store.commit('options/updateOption', {
+      key: 'formatMessages',
+      value
+    })
+  }
+})
 
-        this.$vuetify.theme.global.name = isDarkTheme ? 'dark' : 'light'
-      }
-    },
-    isLoginViaPassword() {
-      return this.$store.getters['options/isLoginViaPassword']
-    }
+const useFullDate = computed({
+  get() {
+    return store.state.options.useFullDate
   },
-  methods: {
-    onSetPassword() {
-      this.$store.commit('options/updateOption', {
-        key: 'stayLoggedIn',
-        value: true
+  set(value) {
+    store.commit('options/updateOption', {
+      key: 'useFullDate',
+      value
+    })
+  }
+})
+
+const allowSoundNotifications = computed({
+  get() {
+    return store.state.options.allowSoundNotifications
+  },
+  set(value) {
+    store.commit('options/updateOption', {
+      key: 'allowSoundNotifications',
+      value
+    })
+  }
+})
+
+const allowPushNotifications = computed({
+  get() {
+    return store.state.options.allowPushNotifications
+  },
+  set(value) {
+    store.commit('options/updateOption', {
+      key: 'allowPushNotifications',
+      value
+    })
+  }
+})
+
+const darkTheme = computed({
+  get() {
+    return store.state.options.darkTheme
+  },
+  set(isDarkTheme) {
+    store.commit('options/updateOption', {
+      key: 'darkTheme',
+      value: isDarkTheme
+    })
+
+    theme.global.name.value = isDarkTheme ? 'dark' : 'light'
+  }
+})
+
+const isLoginViaPassword = computed(() => store.getters['options/isLoginViaPassword'])
+
+const onSetPassword = () => {
+  store.commit('options/updateOption', {
+    key: 'stayLoggedIn',
+    value: true
+  })
+}
+
+const onCheckStayLoggedIn = () => {
+  if (!stayLoggedIn.value) {
+    isIDBSupported
+      .then(() => {
+        isPasswordDialogDisplayed.value = true
       })
-    },
-    onCheckStayLoggedIn() {
-      if (!this.stayLoggedIn) {
-        isIDBSupported
-          .then(() => {
-            this.passwordDialog = true
-          })
-          .catch(() => {
-            this.$store.dispatch('snackbar/show', {
-              message: this.$t('options.idb_not_supported'),
-              timeout: 5000
-            })
-          })
-      } else {
-        clearDb().then(() => {
-          this.$store.commit('options/updateOption', {
-            key: 'stayLoggedIn',
-            value: false
-          })
-
-          this.$store.commit('resetPassword')
+      .catch(() => {
+        store.dispatch('snackbar/show', {
+          message: t('options.idb_not_supported'),
+          timeout: 5000
         })
-      }
-    },
-    logout() {
-      resetPinia()
-      this.$store.dispatch('stopInterval')
-      this.$store.dispatch('logout')
-
-      if (this.isLoginViaPassword) {
-        return clearDb()
-          .catch((err) => {
-            console.error(err)
-          })
-          .finally(() => {
-            // turn off `loginViaPassword` option
-            this.$store.commit('options/updateOption', { key: 'stayLoggedIn', value: false })
-
-            this.$router.push('/')
-          })
-      } else {
-        return Promise.resolve(this.$router.push('/'))
-      }
-    }
+      })
+  } else {
+    clearDb().then(() => {
+      store.commit('options/updateOption', {
+        key: 'stayLoggedIn',
+        value: false
+      })
+
+      store.commit('resetPassword')
+    })
+  }
+}
+
+const logout = () => {
+  resetPinia()
+  store.dispatch('stopInterval')
+  store.dispatch('logout')
+
+  if (isLoginViaPassword.value) {
+    return clearDb()
+      .catch((err) => {
+        console.error(err)
+      })
+      .finally(() => {
+        // turn off `loginViaPassword` option
+        store.commit('options/updateOption', { key: 'stayLoggedIn', value: false })
+
+        router.push('/')
+      })
+  } else {
+    return Promise.resolve(router.push('/'))
   }
 }
+
+onMounted(() => {
+  nextTick(() => {
+    if (sidebarLayoutRef && scrollTopPosition) {
+      sidebarLayoutRef.value.scrollTo({
+        top: scrollTopPosition
+      })
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  if (sidebarLayoutRef) {
+    scrollTopPosition.value = sidebarLayoutRef.value.scrollTop || 0
+  }
+})
 </script>
 
 <style lang="scss" scoped>