From 02006b9458b7828563f005e742a324e3009aecd7 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Fri, 30 Aug 2024 12:17:47 +0300
Subject: [PATCH 1/4] fix: i18n globalInjection

---
 src/shared/lib/i18n/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/lib/i18n/index.ts b/src/shared/lib/i18n/index.ts
index 10f3da2..779760e 100644
--- a/src/shared/lib/i18n/index.ts
+++ b/src/shared/lib/i18n/index.ts
@@ -31,6 +31,7 @@ const getCurrentLocale = () => {
 const i18n = createI18n<[MessageSchema], 'en-US' | 'ru-RU' | 'zh-CN'>({
   legacy: false,
   locale: getCurrentLocale(),
+  globalInjection: true,
   messages: messages
 });
 

From 0d7ca45c23f1db854b34ac8d009fcb2adafafda5 Mon Sep 17 00:00:00 2001
From: mnenie <1alexpeshkov@gmail.com>
Date: Fri, 30 Aug 2024 19:23:24 +0300
Subject: [PATCH 2/4] fix: i18n import with globalInjection

---
 src/entities/board/ui/BoardPreviewCard.vue          |  5 +----
 .../board/ui/__tests__/BoardPreviewCard.spec.ts     |  8 +-------
 .../__snapshots__/BoardPreviewCard.spec.ts.snap     | 13 +------------
 src/entities/chart/ui/ChartItem.vue                 |  7 ++-----
 .../__tests__/__snapshots__/ChartItem.spec.ts.snap  |  4 ++--
 src/entities/template/ui/TemplateItem.vue           |  5 +----
 src/features/auth/ui/SignInForm.vue                 | 12 +++++-------
 src/features/auth/ui/SignUpForm.vue                 | 12 +++++-------
 src/features/boards/add-board/ui/CreationBoard.vue  |  9 +++------
 src/features/boards/add-board/ui/FormCreation.vue   | 10 ++++------
 src/features/boards/filter/ui/FilterBoards.vue      | 11 ++++-------
 src/features/filter/ui/SearchFilter.vue             |  4 +---
 src/features/kanban/ui/ChangeName.vue               |  5 +----
 src/features/kanban/ui/ChooseStatus.vue             |  7 ++-----
 src/features/members/leave-team/ui/LeaveButton.vue  |  4 +---
 src/features/plan/ui/PlanCard.vue                   |  5 +----
 .../settings/theme-switcher/ui/ThemeSwitcher.vue    |  6 ++----
 .../ui/__tests__/ThemeSwitcher.spec.ts              |  1 -
 .../__snapshots__/ThemeSwitcher.spec.ts.snap        |  2 +-
 src/layouts/ui/AppLayout.vue                        |  1 +
 src/pages/GuestsPage.vue                            | 12 +++++-------
 src/pages/MainTeamPage.vue                          | 12 +++++-------
 src/pages/MembersPage.vue                           |  7 ++-----
 src/pages/NotFoundPage.vue                          |  1 +
 src/pages/SettingsPage.vue                          |  7 ++-----
 src/pages/TemplatesPage.vue                         |  7 ++-----
 src/pages/__tests__/NotFound.spec.ts                |  2 +-
 .../__tests__/__snapshots__/NotFound.spec.ts.snap   | 12 ------------
 src/widgets/boards/ui/TeamBoards.vue                |  7 ++-----
 src/widgets/kanban/ui/ProjectSettings.vue           |  9 +++------
 src/widgets/layout/ui/footer/AppFooter.vue          |  5 +----
 .../__snapshots__/FooterWelcome.spec.ts.snap        |  2 +-
 src/widgets/layout/ui/header/HeaderMain.vue         |  7 ++-----
 src/widgets/layout/ui/header/UserMenu.vue           |  7 ++-----
 .../__tests__/__snapshots__/UserMenu.spec.ts.snap   |  4 ++--
 src/widgets/layout/ui/sidebar/AppSidebar.vue        |  4 +---
 src/widgets/layout/ui/sidebar/ProjectsList.vue      |  5 +----
 src/widgets/layout/ui/sidebar/WorkSpace.vue         |  9 +++------
 .../layout/ui/sidebar/__tests__/WorkSpace.spec.ts   |  4 ++--
 .../__tests__/__snapshots__/WorkSpace.spec.ts.snap  |  2 +-
 src/widgets/members/ui/MainWrapper.vue              | 11 ++++-------
 src/widgets/members/ui/MembersList.vue              |  7 ++-----
 src/widgets/settings/ui/SettingsElements.vue        | 11 ++++-------
 src/widgets/welcome/config/cards.ts                 |  2 +-
 src/widgets/welcome/ui/AboutSection.vue             | 11 ++++-------
 src/widgets/welcome/ui/MarketingCards.vue           | 10 +++++-----
 46 files changed, 98 insertions(+), 210 deletions(-)
 delete mode 100644 src/pages/__tests__/__snapshots__/NotFound.spec.ts.snap

diff --git a/src/entities/board/ui/BoardPreviewCard.vue b/src/entities/board/ui/BoardPreviewCard.vue
index 3ec7cd0..d7d2862 100644
--- a/src/entities/board/ui/BoardPreviewCard.vue
+++ b/src/entities/board/ui/BoardPreviewCard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import type { User} from '@/entities/user/model';
 import { UserAvatar } from '@/entities/user';
 import type { BoardPreview } from '../model';
@@ -9,8 +8,6 @@ defineProps<{
   board: BoardPreview;
 }>();
 
-const { t } = useI18n();
-
 const userPosition = computed(() => {
   return (board: BoardPreview, user: User) => {
     return (board.users.length - 1 - +user._id!) * 12;
@@ -24,7 +21,7 @@ const userPosition = computed(() => {
       <span class="text-xs">{{ board.description }}</span>
     </div>
     <div :class="$style.bottom_part">
-      <span class="text-xs"> {{ t('boards.card.date_updated') }}: May 2024</span>
+      <span class="text-xs"> {{ $t('boards.card.date_updated') }}: May 2024</span>
       <div :class="$style.users">
         <template v-for="user in board.users" :key="user._id">
           <UserAvatar
diff --git a/src/entities/board/ui/__tests__/BoardPreviewCard.spec.ts b/src/entities/board/ui/__tests__/BoardPreviewCard.spec.ts
index 01272cf..933b9ff 100644
--- a/src/entities/board/ui/__tests__/BoardPreviewCard.spec.ts
+++ b/src/entities/board/ui/__tests__/BoardPreviewCard.spec.ts
@@ -15,12 +15,6 @@ describe('tests for BoardPreviewCard.vue', () => {
       plugins: [i18n],
 
       mocks: {
-        t: (key: string) => {
-          const translations: Record<string, string> = {
-            'boards.card.date_updated': 'Date Updated (test)'
-          };
-          return translations[key];
-        },
         $router: mockRouter
       }
     },
@@ -40,7 +34,7 @@ describe('tests for BoardPreviewCard.vue', () => {
 
   it('should correctly works with i18n', () => {
     const date = wrapper.find('.bottom_part');
-    expect(date.text()).toContain('Date Updated (test)');
+    expect(date.text()).toContain('Updated: May 2024');
   });
 
   it('should redirect to "/board/1" ', async () => {
diff --git a/src/entities/board/ui/__tests__/__snapshots__/BoardPreviewCard.spec.ts.snap b/src/entities/board/ui/__tests__/__snapshots__/BoardPreviewCard.spec.ts.snap
index 54034d8..eed9b73 100644
--- a/src/entities/board/ui/__tests__/__snapshots__/BoardPreviewCard.spec.ts.snap
+++ b/src/entities/board/ui/__tests__/__snapshots__/BoardPreviewCard.spec.ts.snap
@@ -1,22 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`tests for BoardPreviewCard > should render correctly 1`] = `
-"<div class="active_board">
-  <div class="text">
-    <p class="text-base" style="font-weight: 500;">test title</p><span class="text-xs">test description</span>
-  </div>
-  <div class="bottom_part"><span class="text-xs">Date Updated (test): May 2024</span>
-    <div class="users"></div>
-  </div>
-</div>"
-`;
-
 exports[`tests for BoardPreviewCard.vue > should render correctly 1`] = `
 "<div class="active_board">
   <div class="text">
     <p class="text-base" style="font-weight: 500;">test title</p><span class="text-xs">test description</span>
   </div>
-  <div class="bottom_part"><span class="text-xs">Date Updated (test): May 2024</span>
+  <div class="bottom_part"><span class="text-xs">Updated: May 2024</span>
     <div class="users"></div>
   </div>
 </div>"
diff --git a/src/entities/chart/ui/ChartItem.vue b/src/entities/chart/ui/ChartItem.vue
index e86b708..65f2401 100644
--- a/src/entities/chart/ui/ChartItem.vue
+++ b/src/entities/chart/ui/ChartItem.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import type { Chart } from '../model';
 
 defineProps<{
   chart: Chart;
 }>();
-
-const { t } = useI18n();
 </script>
 
 <template>
   <div :class="$style.chart_container">
-    <h4 class="heading-4">{{ t(`boards.chart.${chart.titleKeyI18n}`) }}</h4>
+    <h4 class="heading-4">{{ $t(`boards.chart.${chart.titleKeyI18n}`) }}</h4>
     <p class="text-sm">
-      {{ t(`boards.chart.${chart.descriptionKeyI18n}`) }}
+      {{ $t(`boards.chart.${chart.descriptionKeyI18n}`) }}
     </p>
     <div :class="$style.chart">
       <component :is="chart.chart" />
diff --git a/src/entities/chart/ui/__tests__/__snapshots__/ChartItem.spec.ts.snap b/src/entities/chart/ui/__tests__/__snapshots__/ChartItem.spec.ts.snap
index 659b623..73befa8 100644
--- a/src/entities/chart/ui/__tests__/__snapshots__/ChartItem.spec.ts.snap
+++ b/src/entities/chart/ui/__tests__/__snapshots__/ChartItem.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`tests for ChartItem.vue  > should render correctly 1`] = `
 "<div class="chart_container">
-  <h4 class="heading-4"></h4>
-  <p class="text-sm"></p>
+  <h4 class="heading-4">boards.chart.test-title</h4>
+  <p class="text-sm">boards.chart.test-description</p>
   <div class="chart">
     <anonymous-stub></anonymous-stub>
   </div>
diff --git a/src/entities/template/ui/TemplateItem.vue b/src/entities/template/ui/TemplateItem.vue
index 0520839..838fb57 100644
--- a/src/entities/template/ui/TemplateItem.vue
+++ b/src/entities/template/ui/TemplateItem.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { UiBadge } from '@/shared/ui';
 import type { Template } from '../model';
 
 defineProps<{
   template: Template;
 }>();
-
-const { t } = useI18n();
 </script>
 
 <template>
@@ -23,7 +20,7 @@ const { t } = useI18n();
       </div>
       <div :class="$style.bottom">
         <span class="text-xs">{{ template.date }}</span>
-        <img v-tooltip.bottom-end="t('templates.user')" :src="template.user" />
+        <img v-tooltip.bottom-end="$t('templates.user')" :src="template.user" />
       </div>
     </div>
   </div>
diff --git a/src/features/auth/ui/SignInForm.vue b/src/features/auth/ui/SignInForm.vue
index 67c3ad7..bbe4a03 100644
--- a/src/features/auth/ui/SignInForm.vue
+++ b/src/features/auth/ui/SignInForm.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { toast } from 'vue-sonner';
@@ -9,7 +8,6 @@ import { Loader2 } from 'lucide-vue-next';
 import { validationRules } from '../config/validation';
 
 const validationSchema = toTypedSchema(validationRules);
-const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
   validationSchema
@@ -28,12 +26,12 @@ const onLogin = handleSubmit((values) => {
     <div :class="$style.form_container">
       <div :class="$style.form_fields">
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="email">{{ t('authentication.form.email') }}</label>
+          <label class="text-sm" for="email">{{ $t('authentication.form.email') }}</label>
           <UiInput id="email" v-model="email" :placeholder="'user@example.com'" :type="'email'" />
           <span v-if="errors.email" class="text-xs">{{ errors.email }}</span>
         </div>
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="password">{{ t('authentication.form.password') }}</label>
+          <label class="text-sm" for="password">{{ $t('authentication.form.password') }}</label>
           <UiInput
             id="password"
             v-model="password"
@@ -46,12 +44,12 @@ const onLogin = handleSubmit((values) => {
       <div :class="$style.choose_block">
         <UiButton type="submit">
           <!-- <Loader2 :class="$style.loader" /> -->
-          {{ t('authentication.login.btn') }}
+          {{ $t('authentication.login.btn') }}
         </UiButton>
         <p :class="[$style.login, 'text-sm']">
-          {{ t('authentication.login.proposal') }}
+          {{ $t('authentication.login.proposal') }}
           <span :class="$style.login_route" @click="$router.push({ name: RouteNames.registration })">
-            {{ t('authentication.login.route') }}
+            {{ $t('authentication.login.route') }}
           </span>
         </p>
       </div>
diff --git a/src/features/auth/ui/SignUpForm.vue b/src/features/auth/ui/SignUpForm.vue
index ae4a3fe..3d3a3c2 100644
--- a/src/features/auth/ui/SignUpForm.vue
+++ b/src/features/auth/ui/SignUpForm.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { toast } from 'vue-sonner';
@@ -9,7 +8,6 @@ import { Loader2 } from 'lucide-vue-next';
 import { validationRules } from '../config/validation';
 
 const validationSchema = toTypedSchema(validationRules);
-const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
   validationSchema
@@ -28,12 +26,12 @@ const onRegistration = handleSubmit((values) => {
     <div :class="$style.form_container">
       <div :class="$style.form_fields">
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="email">{{ t('authentication.form.email') }}</label>
+          <label class="text-sm" for="email">{{ $t('authentication.form.email') }}</label>
           <UiInput id="email" v-model="email" :placeholder="'user@example.com'" :type="'email'" />
           <span v-if="errors.email" class="text-xs">{{ errors.email }}</span>
         </div>
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="password">{{ t('authentication.form.password') }}</label>
+          <label class="text-sm" for="password">{{ $t('authentication.form.password') }}</label>
           <UiInput
             id="password"
             v-model="password"
@@ -46,12 +44,12 @@ const onRegistration = handleSubmit((values) => {
       <div :class="$style.choose_block">
         <UiButton type="submit">
           <!-- <Loader2 :class="$style.loader" /> -->
-          {{ t('authentication.registration.btn') }}
+          {{ $t('authentication.registration.btn') }}
         </UiButton>
         <p :class="[$style.reg, 'text-sm']">
-          {{ t('authentication.registration.proposal') }}
+          {{ $t('authentication.registration.proposal') }}
           <span :class="$style.reg_route" @click="$router.push({ name: RouteNames.login })">
-            {{ t('authentication.registration.route') }}
+            {{ $t('authentication.registration.route') }}
           </span>
         </p>
       </div>
diff --git a/src/features/boards/add-board/ui/CreationBoard.vue b/src/features/boards/add-board/ui/CreationBoard.vue
index a352a39..0dc343f 100644
--- a/src/features/boards/add-board/ui/CreationBoard.vue
+++ b/src/features/boards/add-board/ui/CreationBoard.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { UiSheet } from '@/shared/ui';
 import type { SheetElement } from '@/shared/ui';
 import FormCreation from './FormCreation.vue';
 
 const sheet = ref<SheetElement | null>(null);
 
-const { t } = useI18n();
-
 const open = () => {
   if (sheet.value) {
     sheet.value.open();
@@ -18,13 +15,13 @@ const open = () => {
 
 <template>
   <div :class="$style.creation" @click="open">
-    <span style="font-weight: 500">+ {{ t('boards.create') }}</span>
+    <span style="font-weight: 500">+ {{ $t('boards.create') }}</span>
   </div>
   <UiSheet ref="sheet">
     <template #header>
-      <p class="text-lg" style="font-weight: 500">{{ t('sheet.title') }}</p>
+      <p class="text-lg" style="font-weight: 500">{{ $t('sheet.title') }}</p>
       <span :class="[$style.desc, 'text-sm']">
-        {{ t('sheet.description') }}
+        {{ $t('sheet.description') }}
       </span>
     </template>
     <template #default>
diff --git a/src/features/boards/add-board/ui/FormCreation.vue b/src/features/boards/add-board/ui/FormCreation.vue
index c9c1585..bd80de1 100644
--- a/src/features/boards/add-board/ui/FormCreation.vue
+++ b/src/features/boards/add-board/ui/FormCreation.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { UiButton, UiInput } from '@/shared/ui';
@@ -8,7 +7,6 @@ import { Loader2 } from 'lucide-vue-next';
 import { validationRules } from '../config/validation';
 
 const validationSchema = toTypedSchema(validationRules);
-const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
   validationSchema
@@ -25,16 +23,16 @@ const create = handleSubmit((values) => {
     <div :class="$style.form_container">
       <div :class="$style.form_fields">
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="name">{{ t('sheet.form.name.label') }}</label>
-          <UiInput id="name" v-model="name" :placeholder="t('sheet.form.name.placeholder')" />
+          <label class="text-sm" for="name">{{ $t('sheet.form.name.label') }}</label>
+          <UiInput id="name" v-model="name" :placeholder="$t('sheet.form.name.placeholder')" />
           <span v-if="errors.name" class="text-xs">{{ errors.name }}</span>
         </div>
         <div :class="$style.field">
-          <label class="text-sm" for="description">{{ t('sheet.form.description.label') }}</label>
+          <label class="text-sm" for="description">{{ $t('sheet.form.description.label') }}</label>
           <UiInput
             id="description"
             v-model="description"
-            :placeholder="t('sheet.form.description.placeholder')"
+            :placeholder="$t('sheet.form.description.placeholder')"
           />
         </div>
       </div>
diff --git a/src/features/boards/filter/ui/FilterBoards.vue b/src/features/boards/filter/ui/FilterBoards.vue
index 73f40f8..86c904c 100644
--- a/src/features/boards/filter/ui/FilterBoards.vue
+++ b/src/features/boards/filter/ui/FilterBoards.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useDark } from '@vueuse/core';
 import { UiButton, UiInput } from '@/shared/ui';
 import { ArrowUpDown, Search, History } from 'lucide-vue-next';
@@ -11,8 +10,6 @@ const isDark = useDark();
 const iconColor = computed(() => {
   return isDark.value ? 'var(--zinc-300)' : 'rgb(82 82 91 / 0.9)';
 });
-
-const { t } = useI18n();
 </script>
 
 <template>
@@ -23,20 +20,20 @@ const { t } = useI18n();
         id="filter"
         ref="filterRef"
         v-model.trim="filter"
-        :placeholder="t('boards.filter.input')"
+        :placeholder="$t('boards.filter.input')"
         :class="$style.filter"
       />
     </div>
     <UiButton
-      v-tooltip.bottom="t('boards.filter.tooltips.first_sort')"
+      v-tooltip.bottom="$t('boards.filter.tooltips.first_sort')"
       :variant="'dashed'"
       style="padding: 0 12px"
     >
       <ArrowUpDown :size="17" :color="iconColor" />
-      <span style="margin-left: 6px">{{ t('boards.filter.popularity') }}</span>
+      <span style="margin-left: 6px">{{ $t('boards.filter.popularity') }}</span>
     </UiButton>
     <UiButton
-      v-tooltip.bottom="t('boards.filter.tooltips.second_sort')"
+      v-tooltip.bottom="$t('boards.filter.tooltips.second_sort')"
       :variant="'dashed'"
       style="padding: 0 12px"
     >
diff --git a/src/features/filter/ui/SearchFilter.vue b/src/features/filter/ui/SearchFilter.vue
index 1d0ffea..83fea4f 100644
--- a/src/features/filter/ui/SearchFilter.vue
+++ b/src/features/filter/ui/SearchFilter.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useDark } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
 import { UiInput, UiBadge } from '@/shared/ui';
 import { Search } from 'lucide-vue-next';
 import useFilter from '../lib/composables/useFilter';
@@ -27,7 +26,6 @@ const iconColor = computed(() => {
 });
 
 const { onToggleArea } = useFilter(inputRef, props, emit);
-const { t } = useI18n();
 </script>
 
 <template>
@@ -42,7 +40,7 @@ const { t } = useI18n();
       id="input"
       ref="inputRef"
       v-model.trim="search"
-      :placeholder="t('sidebar.input')"
+      :placeholder="$t('sidebar.input')"
       :class="$style.input_filter"
     />
     <UiBadge
diff --git a/src/features/kanban/ui/ChangeName.vue b/src/features/kanban/ui/ChangeName.vue
index 6b36c29..d216807 100644
--- a/src/features/kanban/ui/ChangeName.vue
+++ b/src/features/kanban/ui/ChangeName.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useDark } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
 import { UiBadge, UiInput } from '@/shared/ui';
 import { Check } from 'lucide-vue-next';
 
@@ -15,9 +14,7 @@ const emits = defineEmits<{
   (e: 'updateColor', color: string): void;
 }>();
 
-const { t } = useI18n();
 const isDark = useDark();
-
 const modelName = defineModel<string>();
 
 const isCurrentColor = computed(() => {
@@ -45,7 +42,7 @@ const isCurrentColor = computed(() => {
     </div>
   </div>
   <p :class="[$style.desc, 'text-sm']">
-    {{ t('kanban.configuration.name') }}
+    {{ $t('kanban.configuration.name') }}
   </p>
 </template>
 
diff --git a/src/features/kanban/ui/ChooseStatus.vue b/src/features/kanban/ui/ChooseStatus.vue
index 2fa9e6f..41fdd92 100644
--- a/src/features/kanban/ui/ChooseStatus.vue
+++ b/src/features/kanban/ui/ChooseStatus.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import type { StatusBadge } from '@/entities/board';
 import { computed } from 'vue';
+import type { StatusBadge } from '@/entities/board';
 
 defineOptions({
   inheritAttrs: false
@@ -15,8 +14,6 @@ const emits = defineEmits<{
   (e: 'updateStatus', status: StatusBadge['status']): void;
 }>();
 
-const { t } = useI18n();
-
 const activeStatus = computed(() => {
   return (s: string) => {
     return props.projStatus === s && [s, true];
@@ -38,7 +35,7 @@ const activeStatus = computed(() => {
     </div>
   </div>
   <p :class="[$style.status_p, 'text-sm']">
-    {{ t('kanban.configuration.status') }}
+    {{ $t('kanban.configuration.status') }}
   </p>
 </template>
 
diff --git a/src/features/members/leave-team/ui/LeaveButton.vue b/src/features/members/leave-team/ui/LeaveButton.vue
index 6c0bc7a..bf1842e 100644
--- a/src/features/members/leave-team/ui/LeaveButton.vue
+++ b/src/features/members/leave-team/ui/LeaveButton.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import { toast } from 'vue-sonner';
 import { RouteNames } from '@/shared/config/consts';
 import { UiButton } from '@/shared/ui';
 import { X } from 'lucide-vue-next';
 
 const router = useRouter();
-const { t } = useI18n();
 
 const leaveTeam = () => {
   toast.info('You left the team', {
@@ -20,6 +18,6 @@ const leaveTeam = () => {
 <template>
   <UiButton :variant="'destructive'" @click="leaveTeam">
     <X :size="17" style="margin-right: 6px" />
-    {{ t('members.btns.leave') }}...
+    {{ $t('members.btns.leave') }}...
   </UiButton>
 </template>
diff --git a/src/features/plan/ui/PlanCard.vue b/src/features/plan/ui/PlanCard.vue
index 5819e7b..6b0fdac 100644
--- a/src/features/plan/ui/PlanCard.vue
+++ b/src/features/plan/ui/PlanCard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { UiProgressBar } from '@/shared/ui';
 import { WandSparkles, DollarSign } from 'lucide-vue-next';
 
@@ -8,8 +7,6 @@ const props = defineProps<{
   isExpanded: boolean;
 }>();
 
-const { t } = useI18n();
-
 const planPosition = computed(() => {
   return props.isExpanded ? 'flex-start' : 'center';
 });
@@ -23,7 +20,7 @@ const iconSize = computed(() => {
       <WandSparkles :class="$style.icon" />
       <div :class="$style.plan_about">
         <div :class="$style.text">
-          <span class="text-xs">{{ t('sidebar.plan') }}</span>
+          <span class="text-xs">{{ $t('sidebar.plan') }}</span>
           <span class="text-xs">6/10</span>
         </div>
         <UiProgressBar :progress="6" />
diff --git a/src/features/settings/theme-switcher/ui/ThemeSwitcher.vue b/src/features/settings/theme-switcher/ui/ThemeSwitcher.vue
index 8e23e99..ae9eb38 100644
--- a/src/features/settings/theme-switcher/ui/ThemeSwitcher.vue
+++ b/src/features/settings/theme-switcher/ui/ThemeSwitcher.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, shallowRef } from 'vue';
 import { useColorMode } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
 import useTheme from '../lib/composables/useTheme';
 import type { ThemeBlock } from '../model';
 import { UiButton, UiRadioGroupContainer } from '@/shared/ui';
@@ -17,7 +16,6 @@ const themeBlocks = shallowRef<ThemeBlock[]>([
   { id: 2, item: SystemBlock, active: store.value === 'auto', value: 'auto' }
 ]);
 const { onNewPreferences, changeActiveTheme } = useTheme(themeBlocks);
-const { t } = useI18n();
 
 const themeAbout = computed(() => {
   return (value: string) => {
@@ -41,10 +39,10 @@ const themeAbout = computed(() => {
           :class="{ [$style.active]: theme.active }"
           @click="changeActiveTheme(theme.id)"
         />
-        <span class="text-xs">{{ themeAbout(t(`settings.theme.variants.${theme.value}`)) }}</span>
+        <span class="text-xs">{{ themeAbout($t(`settings.theme.variants.${theme.value}`)) }}</span>
       </div>
     </UiRadioGroupContainer>
-    <UiButton variant="outline" type="submit">{{ t('settings.theme.btn') }}</UiButton>
+    <UiButton variant="outline" type="submit">{{ $t('settings.theme.btn') }}</UiButton>
   </form>
 </template>
 
diff --git a/src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts b/src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts
index 243dd5b..40957f0 100644
--- a/src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts
+++ b/src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts
@@ -19,7 +19,6 @@ describe('tests for ThemeSwitcher.vue', () => {
       mocks: {
         t: (key: string) => {
           const translations: Record<string, string> = {
-            'settings.theme.btn': 'change theme',
             'settings.theme.variants.light': 'light',
             'settings.theme.variants.dark': 'dark',
             'settings.theme.variants.auto': 'system'
diff --git a/src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap b/src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap
index 9300bec..7157689 100644
--- a/src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap
+++ b/src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap
@@ -57,6 +57,6 @@ exports[`tests for ThemeSwitcher.vue > should render correctly 1`] = `
         </div>
       </div><span class="text-xs">System</span>
     </div>
-  </div><button class="text-sm button outline md" type="submit">change theme</button>
+  </div><button class="text-sm button outline md" type="submit">Update preferences</button>
 </form>"
 `;
diff --git a/src/layouts/ui/AppLayout.vue b/src/layouts/ui/AppLayout.vue
index 31e2480..a13069f 100644
--- a/src/layouts/ui/AppLayout.vue
+++ b/src/layouts/ui/AppLayout.vue
@@ -4,6 +4,7 @@ import { defineAsyncComponent } from 'vue';
 
 const { width } = useWindowSize();
 
+//TODO: jenda with mobile devices
 const NotAvailable = defineAsyncComponent(() => {
   return import('@/widgets/device/ui/NotAvailable.vue');
 });
diff --git a/src/pages/GuestsPage.vue b/src/pages/GuestsPage.vue
index 21a9b77..4384924 100644
--- a/src/pages/GuestsPage.vue
+++ b/src/pages/GuestsPage.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { shallowReactive } from 'vue';
 import { MembersList } from '@/widgets/members';
 import type { User } from '@/entities/user/model';
 
-const { t } = useI18n();
-
-const members = reactive<User[]>([
+// mocks -> after data from backend
+const members = shallowReactive<User[]>([
   { _id: '1', photoUrl: 'https://www.shadcn-vue.com/avatars/03.png', email: 'John Doe', role: 'member' },
   { _id: '2', photoUrl: 'https://www.shadcn-vue.com/avatars/04.png', email: 'Emily Johnson', role: 'member' }
 ]);
@@ -15,8 +13,8 @@ const members = reactive<User[]>([
 <template>
   <div style="width: 100%">
     <div :class="$style.about">
-      <h4 class="heading-4">{{ t('members.content.guests.title') }}</h4>
-      <p class="text-sm">{{ t('members.content.guests.description') }}</p>
+      <h4 class="heading-4">{{ $t('members.content.guests.title') }}</h4>
+      <p class="text-sm">{{ $t('members.content.guests.description') }}</p>
     </div>
     <MembersList :members />
   </div>
diff --git a/src/pages/MainTeamPage.vue b/src/pages/MainTeamPage.vue
index 4da2864..6cec513 100644
--- a/src/pages/MainTeamPage.vue
+++ b/src/pages/MainTeamPage.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { shallowReactive } from 'vue';
 import { MembersList } from '@/widgets/members';
 import type { User } from '@/entities/user/model';
 
-const { t } = useI18n();
-
-const members = reactive<User[]>([
+// mocks -> after data from backend
+const members = shallowReactive<User[]>([
   { _id: '0', photoUrl: 'https://www.shadcn-vue.com/avatars/02.png', email: 'Alex Peshkov', role: 'admin' },
   { _id: '1', photoUrl: 'https://www.shadcn-vue.com/avatars/03.png', email: 'John Doe', role: 'member' },
   { _id: '2', photoUrl: 'https://www.shadcn-vue.com/avatars/04.png', email: 'Emily Johnson', role: 'member' }
@@ -16,9 +14,9 @@ const members = reactive<User[]>([
 <template>
   <div style="width: 100%">
     <div v-once :class="$style.about">
-      <h4 class="heading-4">{{ t('members.content.all.title') }}</h4>
+      <h4 class="heading-4">{{ $t('members.content.all.title') }}</h4>
       <p class="text-sm">
-        {{ t('members.content.all.description') }}
+        {{ $t('members.content.all.description') }}
       </p>
     </div>
     <MembersList :members />
diff --git a/src/pages/MembersPage.vue b/src/pages/MembersPage.vue
index c65c461..c7b1fb7 100644
--- a/src/pages/MembersPage.vue
+++ b/src/pages/MembersPage.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
-import { useI18n } from 'vue-i18n';
 import { MainWrapper } from '@/widgets/members';
 
 useHead({
   title: 'Jenda | Members'
 });
-
-const { t } = useI18n();
 </script>
 
 <template>
   <div :class="$style.members">
     <div :class="$style.top">
-      <h4 class="heading-4">{{ t('members.title') }} (1)</h4>
+      <h4 class="heading-4">{{ $t('members.title') }} (1)</h4>
       <p class="text-sm">
-        {{ t('members.description') }}
+        {{ $t('members.description') }}
       </p>
     </div>
     <MainWrapper>
diff --git a/src/pages/NotFoundPage.vue b/src/pages/NotFoundPage.vue
index 7e2d9f8..d2f1c35 100644
--- a/src/pages/NotFoundPage.vue
+++ b/src/pages/NotFoundPage.vue
@@ -11,6 +11,7 @@ useHead({
 <template>
   <div :class="$style.container">
     <div :class="$style.items">
+      <!-- TODO: i18n  -->
       <h1>404</h1>
       <h3>Not Found</h3>
       <p>The page you were looking for can't be found</p>
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index b664436..78b0c07 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
-import { useI18n } from 'vue-i18n';
 import { SettingsElements } from '@/widgets/settings';
 
 useHead({
   title: 'Jenda | Settings'
 });
-
-const { t } = useI18n();
 </script>
 
 <template>
   <div :class="$style.settings">
-    <h4 class="heading-4">{{ t('settings.title') }}</h4>
-    <p class="text-sm">{{ t('settings.description') }}</p>
+    <h4 class="heading-4">{{ $t('settings.title') }}</h4>
+    <p class="text-sm">{{ $t('settings.description') }}</p>
   </div>
   <SettingsElements />
 </template>
diff --git a/src/pages/TemplatesPage.vue b/src/pages/TemplatesPage.vue
index 125c215..22dedda 100644
--- a/src/pages/TemplatesPage.vue
+++ b/src/pages/TemplatesPage.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
-import { useI18n } from 'vue-i18n';
 import { AllTemplates } from '@/widgets/templates';
 
 useHead({
   title: 'Jenda | Templates'
 });
-
-const { t } = useI18n();
 </script>
 
 <template>
   <div :class="$style.top">
-    <h4 class="heading-4">{{ t('templates.title') }}</h4>
-    <p class="text-sm">{{ t('templates.description') }}</p>
+    <h4 class="heading-4">{{ $t('templates.title') }}</h4>
+    <p class="text-sm">{{ $t('templates.description') }}</p>
   </div>
   <AllTemplates />
 </template>
diff --git a/src/pages/__tests__/NotFound.spec.ts b/src/pages/__tests__/NotFound.spec.ts
index fbcf742..b5c98c9 100644
--- a/src/pages/__tests__/NotFound.spec.ts
+++ b/src/pages/__tests__/NotFound.spec.ts
@@ -22,7 +22,7 @@ describe('tests for NotFoundPage.vue', () => {
   });
 
   it('should be render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.html());
   });
 
   it('should has correct head', () => {
diff --git a/src/pages/__tests__/__snapshots__/NotFound.spec.ts.snap b/src/pages/__tests__/__snapshots__/NotFound.spec.ts.snap
deleted file mode 100644
index 409a910..0000000
--- a/src/pages/__tests__/__snapshots__/NotFound.spec.ts.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tests for NotFoundPage.vue > should be render correctly 1`] = `
-"<div class="container">
-  <div class="items">
-    <h1>404</h1>
-    <h3>Not Found</h3>
-    <p>The page you were looking for can't be found</p>
-    <ui-button-stub variant="default" size="md"></ui-button-stub>
-  </div>
-</div>"
-`;
diff --git a/src/widgets/boards/ui/TeamBoards.vue b/src/widgets/boards/ui/TeamBoards.vue
index 933757b..63349bf 100644
--- a/src/widgets/boards/ui/TeamBoards.vue
+++ b/src/widgets/boards/ui/TeamBoards.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { BoardPreviewCard } from '@/entities/board';
 import type { BoardPreview } from '@/entities/board/model';
 import { CreationBoard, FilterBoards } from '@/features/boards';
 
-const { t } = useI18n();
-
 const boards = ref<BoardPreview[]>([
   {
     _id: '0',
@@ -25,8 +22,8 @@ const boards = ref<BoardPreview[]>([
   <div :class="$style.boards_inside">
     <div :class="$style.top_part">
       <div :class="$style.text">
-        <h4 class="heading-4">{{ t('boards.title') }}</h4>
-        <p class="text-sm">{{ t('boards.description') }}</p>
+        <h4 class="heading-4">{{ $t('boards.title') }}</h4>
+        <p class="text-sm">{{ $t('boards.description') }}</p>
       </div>
       <FilterBoards />
     </div>
diff --git a/src/widgets/kanban/ui/ProjectSettings.vue b/src/widgets/kanban/ui/ProjectSettings.vue
index 40999d2..ca5f387 100644
--- a/src/widgets/kanban/ui/ProjectSettings.vue
+++ b/src/widgets/kanban/ui/ProjectSettings.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, shallowReactive } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { UiButton, UiSheet } from '@/shared/ui';
 import type { SheetElement } from '@/shared/ui';
 import { Settings2 } from 'lucide-vue-next';
@@ -16,8 +15,6 @@ const open = () => {
   }
 };
 
-const { t } = useI18n();
-
 // mock data -> after data from backend
 const name = ref('Startup');
 const projColor = ref('#b156db');
@@ -43,15 +40,15 @@ const updateStatus = (status: StatusBadge['status']) => {
   </UiButton>
   <UiSheet ref="sheet">
     <template #header>
-      <p class="text-lg" style="font-weight: 500">{{ t('kanban.configuration.title') }}</p>
+      <p class="text-lg" style="font-weight: 500">{{ $t('kanban.configuration.title') }}</p>
       <span :class="[$style.desc, 'text-sm']">
-        {{ t('kanban.configuration.description') }}
+        {{ $t('kanban.configuration.description') }}
       </span>
     </template>
     <template #default>
       <ChangeName v-model="name" :name :colors :proj-color @update-color="projColor = $event" />
       <div :class="$style.users">
-        <p class="text-base">{{ t('kanban.configuration.users') }}:</p>
+        <p class="text-base">{{ $t('kanban.configuration.users') }}:</p>
         <UserAvatar style="width: 24px; height: 24px">
           <img style="width: 100%" src="https://avatars.githubusercontent.com/u/121057011?v=4" />
         </UserAvatar>
diff --git a/src/widgets/layout/ui/footer/AppFooter.vue b/src/widgets/layout/ui/footer/AppFooter.vue
index 70b0e0e..f1cdb5c 100644
--- a/src/widgets/layout/ui/footer/AppFooter.vue
+++ b/src/widgets/layout/ui/footer/AppFooter.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { redirect } from '@/shared/lib/helpers';
-
-const { t } = useI18n();
 </script>
 
 <template>
   <footer :class="$style.footer">
     <div :class="$style.container">
       <p class="text-base">
-        <span :class="$style.brand">Jenda</span> - {{ t('welcome.footer') }}
+        <span :class="$style.brand">Jenda</span> - {{ $t('welcome.footer') }}
         <a :class="$style.link" @click.prevent="redirect('https://github.com/mnenie/jenda')"> Github </a>
       </p>
     </div>
diff --git a/src/widgets/layout/ui/footer/__tests__/__snapshots__/FooterWelcome.spec.ts.snap b/src/widgets/layout/ui/footer/__tests__/__snapshots__/FooterWelcome.spec.ts.snap
index c1153a6..e07babc 100644
--- a/src/widgets/layout/ui/footer/__tests__/__snapshots__/FooterWelcome.spec.ts.snap
+++ b/src/widgets/layout/ui/footer/__tests__/__snapshots__/FooterWelcome.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`tests for FooterWelcome.vue > should be render correctly 1`] = `
 "<footer class="footer">
   <div class="container">
-    <p class="text-base"><span class="brand">Jenda</span> - footer <a class="link"> Github </a></p>
+    <p class="text-base"><span class="brand">Jenda</span> - cloud-based program for task management. The source code is available on <a class="link"> Github </a></p>
   </div>
 </footer>"
 `;
diff --git a/src/widgets/layout/ui/header/HeaderMain.vue b/src/widgets/layout/ui/header/HeaderMain.vue
index 3e9e073..0a76352 100644
--- a/src/widgets/layout/ui/header/HeaderMain.vue
+++ b/src/widgets/layout/ui/header/HeaderMain.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { UiButton } from '@/shared/ui';
 import { Link } from 'lucide-vue-next';
 import UserMenu from './UserMenu.vue';
-
-const { t } = useI18n();
 </script>
 
 <template>
@@ -22,10 +19,10 @@ const { t } = useI18n();
     </div>
     <div />
     <div :class="$style.user_section">
-      <UiButton variant="secondary" :class="$style.upgrade"> {{ t('header.upgrade') }} </UiButton>
+      <UiButton variant="secondary" :class="$style.upgrade"> {{ $t('header.upgrade') }} </UiButton>
       <UiButton variant="secondary">
         <Link :size="18" style="margin-right: 8px" />
-        <span>{{ t('header.collaboration') }}</span>
+        <span>{{ $t('header.collaboration') }}</span>
       </UiButton>
       <UserMenu />
     </div>
diff --git a/src/widgets/layout/ui/header/UserMenu.vue b/src/widgets/layout/ui/header/UserMenu.vue
index 1b4122a..5b74310 100644
--- a/src/widgets/layout/ui/header/UserMenu.vue
+++ b/src/widgets/layout/ui/header/UserMenu.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { UserAvatar } from '@/entities/user';
 import { UiDropdown, UiDropdownItem, UiDropdownShortcut } from '@/shared/ui';
 import { RouteNames } from '@/shared/config/consts';
-
-const { t } = useI18n();
 </script>
 
 <template>
@@ -19,11 +16,11 @@ const { t } = useI18n();
     </template>
     <template #content>
       <UiDropdownItem @click="$router.push({ name: RouteNames.welcome })">
-        {{ t('header.user.welcome') }}
+        {{ $t('header.user.welcome') }}
         <UiDropdownShortcut>⌘B</UiDropdownShortcut>
       </UiDropdownItem>
       <UiDropdownItem>
-        {{ t('header.user.logout') }}
+        {{ $t('header.user.logout') }}
         <UiDropdownShortcut>⇧⌘Q</UiDropdownShortcut>
       </UiDropdownItem>
     </template>
diff --git a/src/widgets/layout/ui/header/__tests__/__snapshots__/UserMenu.spec.ts.snap b/src/widgets/layout/ui/header/__tests__/__snapshots__/UserMenu.spec.ts.snap
index c899ec0..34c82d9 100644
--- a/src/widgets/layout/ui/header/__tests__/__snapshots__/UserMenu.spec.ts.snap
+++ b/src/widgets/layout/ui/header/__tests__/__snapshots__/UserMenu.spec.ts.snap
@@ -9,9 +9,9 @@ exports[`tests for UserMenu.vue > should be render correctly 1`] = `
     <div class="inside">
       <div class="header"><span class="text-sm" style="font-weight: 500;">1alexpeshkov@gmail.com</span></div>
       <div class="content">
-        <div class="item">welcome <div class="shortcut">⌘B</div>
+        <div class="item">Go to Welcome <div class="shortcut">⌘B</div>
         </div>
-        <div class="item">logout <div class="shortcut">⇧⌘Q</div>
+        <div class="item">Log out <div class="shortcut">⇧⌘Q</div>
         </div>
       </div>
     </div>
diff --git a/src/widgets/layout/ui/sidebar/AppSidebar.vue b/src/widgets/layout/ui/sidebar/AppSidebar.vue
index fc2364b..fe070b6 100644
--- a/src/widgets/layout/ui/sidebar/AppSidebar.vue
+++ b/src/widgets/layout/ui/sidebar/AppSidebar.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useDark } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
 import { UiBadge } from '@/shared/ui';
 import { links } from '../../config/links';
 import WorkSpace from './WorkSpace.vue';
@@ -28,7 +27,6 @@ const paddingExpanded = computed(() => {
 });
 
 const isDark = useDark();
-const { t } = useI18n();
 
 const iconUrl = computed(() => {
   return isDark.value ? '/icons/kanban-dark.png' : '/icons/kanban.png';
@@ -48,7 +46,7 @@ const boards = ref<Board[]>([
       <div v-if="isExpanded" :class="$style.text">
         <img :src="iconUrl" />
         <h3 class="heading-4">Jenda</h3>
-        <UiBadge>{{ t('sidebar.badge') }}</UiBadge>
+        <UiBadge>{{ $t('sidebar.badge') }}</UiBadge>
       </div>
       <AlignJustify
         v-else
diff --git a/src/widgets/layout/ui/sidebar/ProjectsList.vue b/src/widgets/layout/ui/sidebar/ProjectsList.vue
index 5beb67e..7e3aa35 100644
--- a/src/widgets/layout/ui/sidebar/ProjectsList.vue
+++ b/src/widgets/layout/ui/sidebar/ProjectsList.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import { UiButton } from '@/shared/ui';
 import type { Board } from '@/entities/board';
 import { CircleFadingPlus } from 'lucide-vue-next';
@@ -26,13 +25,11 @@ const _projects = computed(() => {
   }));
 });
 
-const { t } = useI18n();
 const isDark = useDark();
 
 const contentPosition = computed(() => {
   return props.isExpanded ? 'flex-start' : 'center';
 });
-
 const projectName = computed(() => {
   return (project: Board) => {
     return project.name.slice(0, 1);
@@ -42,7 +39,7 @@ const projectName = computed(() => {
 
 <template>
   <div :class="$style.about">
-    <p class="text-sm" :class="$style.section">{{ t('sidebar.projects') }}</p>
+    <p class="text-sm" :class="$style.section">{{ $t('sidebar.projects') }}</p>
     <CircleFadingPlus
       v-if="isExpanded"
       :size="14"
diff --git a/src/widgets/layout/ui/sidebar/WorkSpace.vue b/src/widgets/layout/ui/sidebar/WorkSpace.vue
index 67066bd..9491962 100644
--- a/src/widgets/layout/ui/sidebar/WorkSpace.vue
+++ b/src/widgets/layout/ui/sidebar/WorkSpace.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import { useDark } from '@vueuse/core';
 import { RouteNames } from '@/shared/config/consts';
 import { UiButton } from '@/shared/ui';
@@ -15,8 +14,6 @@ const props = defineProps<{
 const route = useRoute();
 const isDark = useDark();
 
-const { t } = useI18n();
-
 const isCurrentPath = (link: Link) => {
   if (route.name?.toString().startsWith(RouteNames.members)) {
     return link.pathName === RouteNames.members;
@@ -47,13 +44,13 @@ const iconColor = computed(() => {
 </script>
 
 <template>
-  <p :class="[$style.name_block, 'text-sm']">{{ t('sidebar.section') }}</p>
+  <p :class="[$style.name_block, 'text-sm']">{{ $t('sidebar.section') }}</p>
   <div :class="$style.sidebar_main_links">
     <RouterLink
       v-for="link in pathName"
       :key="link.id"
       v-tooltip.right="{
-        content: t(`sidebar.${link.title}`),
+        content: $t(`sidebar.${link.title}`),
         triggers: ['hover'],
         disabled: isExpanded
       }"
@@ -66,7 +63,7 @@ const iconColor = computed(() => {
         :style="{ padding: !isExpanded ? '0px' : '' }"
       >
         <component :is="link.icon" :size="18" :color="iconColor" />
-        <span v-show="isExpanded" class="text-sm">{{ t(`sidebar.${link.title}`) }}</span>
+        <span v-show="isExpanded" class="text-sm">{{ $t(`sidebar.${link.title}`) }}</span>
       </UiButton>
     </RouterLink>
   </div>
diff --git a/src/widgets/layout/ui/sidebar/__tests__/WorkSpace.spec.ts b/src/widgets/layout/ui/sidebar/__tests__/WorkSpace.spec.ts
index 544bda7..bd74d1b 100644
--- a/src/widgets/layout/ui/sidebar/__tests__/WorkSpace.spec.ts
+++ b/src/widgets/layout/ui/sidebar/__tests__/WorkSpace.spec.ts
@@ -21,8 +21,8 @@ describe('tests for WorkSpace.vue', () => {
       mocks: {
         t: (key: string) => {
           const translations: Record<string, string> = {
-            'sidebar.boards': 'boards',
-            'sidebar.section': 'workspace'
+            'sidebar.boards': 'Boards',
+            'sidebar.section': 'Workspace'
           };
           return translations[key];
         }
diff --git a/src/widgets/layout/ui/sidebar/__tests__/__snapshots__/WorkSpace.spec.ts.snap b/src/widgets/layout/ui/sidebar/__tests__/__snapshots__/WorkSpace.spec.ts.snap
index b35c421..7e99f62 100644
--- a/src/widgets/layout/ui/sidebar/__tests__/__snapshots__/WorkSpace.spec.ts.snap
+++ b/src/widgets/layout/ui/sidebar/__tests__/__snapshots__/WorkSpace.spec.ts.snap
@@ -18,5 +18,5 @@ exports[`tests for WorkSpace.vue > should be render correctly 1`] = `
         <path d="M5 21a2 2 0 0 1-2-2"></path>
         <path d="M3 14v1"></path>
         <path d="M3 9v1"></path>
-      </svg><span class="text-sm">boards</span></button></a></div>"
+      </svg><span class="text-sm">Boards</span></button></a></div>"
 `;
diff --git a/src/widgets/members/ui/MainWrapper.vue b/src/widgets/members/ui/MainWrapper.vue
index ddcc1a5..96b67ef 100644
--- a/src/widgets/members/ui/MainWrapper.vue
+++ b/src/widgets/members/ui/MainWrapper.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { markRaw } from 'vue';
 import { UiButton } from '@/shared/ui';
 import { RouteNames } from '@/shared/config/consts';
 import { LeaveButton } from '@/features/members/leave-team';
 
-const { t } = useI18n();
-
-const links = reactive([
+const links = markRaw([
   { id: '0', title: 'All participants', pathName: RouteNames.members + '.all', i18nKey: 'all.btn' },
   { id: '1', title: 'Guests', pathName: RouteNames.members + '.guests', i18nKey: 'guests.btn' }
 ]);
@@ -20,7 +17,7 @@ const links = reactive([
           :variant="$route.name === link.pathName ? 'outline' : 'ghost'"
           :class="{ [$style.ghost_exception]: $route.name !== link.pathName }"
         >
-          <span class="text-sm">{{ t(`members.content.${link.i18nKey}`) }}</span>
+          <span class="text-sm">{{ $t(`members.content.${link.i18nKey}`) }}</span>
         </UiButton>
       </RouterLink>
     </div>
@@ -29,7 +26,7 @@ const links = reactive([
       <div :class="$style.btns_section">
         <LeaveButton />
         <UiButton :variant="'outline'" @click="$router.push({ name: RouteNames.boards })">
-          {{ t('members.btns.view') }} (3)
+          {{ $t('members.btns.view') }} (3)
         </UiButton>
       </div>
     </div>
diff --git a/src/widgets/members/ui/MembersList.vue b/src/widgets/members/ui/MembersList.vue
index 0cd3698..4bbd757 100644
--- a/src/widgets/members/ui/MembersList.vue
+++ b/src/widgets/members/ui/MembersList.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import { UserAvatar } from '@/entities/user';
-import type { User } from '@/entities/user/model';
 import { UiBadge } from '@/shared/ui';
-import { useI18n } from 'vue-i18n';
+import type { User } from '@/entities/user/model';
 
 defineProps<{
   members: User[];
 }>();
-
-const { t } = useI18n();
 </script>
 
 <template>
@@ -20,7 +17,7 @@ const { t } = useI18n();
         </UserAvatar>
         <p class="text-sm">{{ member.email }}</p>
       </div>
-      <UiBadge :variant="'secondary'">{{ t(`members.role.${member.role}`) }}</UiBadge>
+      <UiBadge :variant="'secondary'">{{ $t(`members.role.${member.role}`) }}</UiBadge>
     </li>
   </ul>
 </template>
diff --git a/src/widgets/settings/ui/SettingsElements.vue b/src/widgets/settings/ui/SettingsElements.vue
index 3e77c25..37dcb07 100644
--- a/src/widgets/settings/ui/SettingsElements.vue
+++ b/src/widgets/settings/ui/SettingsElements.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { ThemeSwitcher } from '@/features/settings/theme-switcher';
 import { LanguageSwitcher } from '@/features/settings/lang-switcher';
-
-const { t } = useI18n();
 </script>
 
 <template>
   <div :class="$style.lang">
-    <p class="text-sm" style="font-weight: 500">{{ t('settings.lang.label') }}</p>
+    <p class="text-sm" style="font-weight: 500">{{ $t('settings.lang.label') }}</p>
     <LanguageSwitcher />
-    <span class="text-xs"> {{ t('settings.lang.about') }} </span>
+    <span class="text-xs"> {{ $t('settings.lang.about') }} </span>
   </div>
   <div :class="$style.theme">
     <div :class="$style.text">
-      <p class="text-sm" style="font-weight: 500">{{ t('settings.theme.label') }}</p>
-      <span class="text-xs">{{ t('settings.theme.about') }}</span>
+      <p class="text-sm" style="font-weight: 500">{{ $t('settings.theme.label') }}</p>
+      <span class="text-xs">{{ $t('settings.theme.about') }}</span>
     </div>
     <ThemeSwitcher />
   </div>
diff --git a/src/widgets/welcome/config/cards.ts b/src/widgets/welcome/config/cards.ts
index 24a66de..7c8bec3 100644
--- a/src/widgets/welcome/config/cards.ts
+++ b/src/widgets/welcome/config/cards.ts
@@ -1,6 +1,6 @@
 import type { MarketingCard } from '../types';
 
-export const _cards = [
+export const cardsInfo = [
   {
     id: 0,
     pagePrefix: 'kanban',
diff --git a/src/widgets/welcome/ui/AboutSection.vue b/src/widgets/welcome/ui/AboutSection.vue
index 5671080..9f12979 100644
--- a/src/widgets/welcome/ui/AboutSection.vue
+++ b/src/widgets/welcome/ui/AboutSection.vue
@@ -1,29 +1,26 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { useDark } from '@vueuse/core';
 import { UiButton } from '@/shared/ui';
 import { ArrowRight } from 'lucide-vue-next';
 import { RouteNames } from '@/shared/config/consts';
 
 const isDark = useDark();
-
-const { t } = useI18n();
 </script>
 
 <template>
   <section :class="$style.container">
     <div :class="$style.badge">
       <span style="margin-right: 3px">✨</span>
-      <span class="text-sm">{{ t('welcome.about.badge') }}</span>
+      <span class="text-sm">{{ $t('welcome.about.badge') }}</span>
       <ArrowRight :size="14" />
     </div>
-    <h1>{{ t('welcome.about.tagline') }}</h1>
+    <h1>{{ $t('welcome.about.tagline') }}</h1>
     <p class="text-lg">
-      {{ t('welcome.about.description') }}
+      {{ $t('welcome.about.description') }}
     </p>
     <div :class="$style.btns">
       <UiButton @click="$router.push({ name: RouteNames.registration })">
-        {{ t('welcome.about.btn') }}
+        {{ $t('welcome.about.btn') }}
       </UiButton>
       <UiButton variant="outline" :class="$style.btn_git">
         <img :src="!isDark ? '/icons/github.png' : '/icons/github-d.png'" />
diff --git a/src/widgets/welcome/ui/MarketingCards.vue b/src/widgets/welcome/ui/MarketingCards.vue
index 6f0288b..8fd1aa5 100644
--- a/src/widgets/welcome/ui/MarketingCards.vue
+++ b/src/widgets/welcome/ui/MarketingCards.vue
@@ -2,18 +2,18 @@
 import { computed } from 'vue';
 import { useDark } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
-import { _cards } from '../config/cards';
+import { cardsInfo } from '../config/cards';
 import type { MarketingCard } from '../types';
 import { UiCard } from '@/shared/ui';
 
 const { tm } = useI18n();
 
 const cards = computed(() => {
-  const localeArr = tm('welcome.cards') as MarketingCard[];
-  return _cards.map((card, i) => ({
+  const _arr = tm('welcome.cards') as MarketingCard[];
+  return cardsInfo.map((card, i) => ({
     ...card,
-    title: localeArr[i].title,
-    description: localeArr[i].description
+    title: _arr[i].title,
+    description: _arr[i].description
   }));
 });
 

From 63723c5b6bd1a00ef906cbd24d01bcd2e4c1b6ac Mon Sep 17 00:00:00 2001
From: mnenie <1alexpeshkov@gmail.com>
Date: Fri, 30 Aug 2024 20:20:00 +0300
Subject: [PATCH 3/4] fix: fsd directories, rersolves #45

---
 src/entities/template/index.ts                |  2 +-
 src/entities/template/model/index.ts          |  1 +
 .../{config/index.ts => model/templates.ts}   |  5 +--
 .../ui/__tests__/TemplateItem.spec.ts         |  4 +-
 .../auth/lib/composables/useTextChanging.ts   |  6 +--
 src/features/auth/model/index.ts              |  2 +
 .../auth/{config => model}/reviews.ts         |  4 +-
 .../auth/{config => model}/validation.ts      |  0
 src/features/auth/ui/BgPanel.vue              |  2 +-
 src/features/auth/ui/SignInForm.vue           |  2 +-
 src/features/auth/ui/SignUpForm.vue           |  2 +-
 src/features/boards/add-board/model/index.ts  |  1 +
 .../add-board/{config => model}/validation.ts |  0
 .../boards/add-board/ui/FormCreation.vue      |  2 +-
 .../boards/charts/lib/composables/useChart.ts | 38 +++++++++++--------
 src/features/kanban/model/index.ts            |  1 +
 .../kanban/{config => model}/validation.ts    |  0
 .../kanban/ui/add-column/FormCreation.vue     |  2 +-
 src/pages/NotFoundPage.vue                    | 30 ++++++++++-----
 src/pages/__tests__/NotFound.spec.ts          |  3 ++
 src/shared/lib/composables/useLanguage.ts     |  1 +
 src/shared/lib/i18n/locales/en-US.ts          |  5 +++
 src/shared/lib/i18n/locales/ru-RU.ts          |  5 +++
 src/shared/lib/i18n/locales/zh-CN.ts          |  5 +++
 src/widgets/boards/config/index.ts            |  1 -
 .../charts.data.ts => model/charts.ts}        |  7 ++--
 src/widgets/boards/model/index.ts             |  1 +
 .../boards/ui/Activity\320\241harts.vue"      |  2 +-
 .../layout/{config => model}/header.ts        |  4 +-
 src/widgets/layout/model/index.ts             |  2 +
 src/widgets/layout/{config => model}/links.ts |  0
 .../layout/ui/header/HeaderWelcome.vue        |  2 +-
 src/widgets/layout/ui/sidebar/AppSidebar.vue  |  8 ++--
 .../layout/ui/sidebar/ProjectsList.vue        |  4 +-
 src/widgets/templates/ui/AllTemplates.vue     |  4 +-
 .../welcome/{config => model}/cards.ts        |  4 +-
 src/widgets/welcome/model/index.ts            |  1 +
 src/widgets/welcome/ui/MarketingCards.vue     |  2 +-
 38 files changed, 104 insertions(+), 61 deletions(-)
 rename src/entities/template/{config/index.ts => model/templates.ts} (91%)
 create mode 100644 src/features/auth/model/index.ts
 rename src/features/auth/{config => model}/reviews.ts (87%)
 rename src/features/auth/{config => model}/validation.ts (100%)
 create mode 100644 src/features/boards/add-board/model/index.ts
 rename src/features/boards/add-board/{config => model}/validation.ts (100%)
 create mode 100644 src/features/kanban/model/index.ts
 rename src/features/kanban/{config => model}/validation.ts (100%)
 delete mode 100644 src/widgets/boards/config/index.ts
 rename src/widgets/boards/{config/charts.data.ts => model/charts.ts} (54%)
 create mode 100644 src/widgets/boards/model/index.ts
 rename src/widgets/layout/{config => model}/header.ts (86%)
 create mode 100644 src/widgets/layout/model/index.ts
 rename src/widgets/layout/{config => model}/links.ts (100%)
 rename src/widgets/welcome/{config => model}/cards.ts (88%)
 create mode 100644 src/widgets/welcome/model/index.ts

diff --git a/src/entities/template/index.ts b/src/entities/template/index.ts
index e05e29e..c51f0c5 100644
--- a/src/entities/template/index.ts
+++ b/src/entities/template/index.ts
@@ -1,2 +1,2 @@
 export * from './ui';
-export * from './config';
+export * from './model';
diff --git a/src/entities/template/model/index.ts b/src/entities/template/model/index.ts
index fcb073f..60394fe 100644
--- a/src/entities/template/model/index.ts
+++ b/src/entities/template/model/index.ts
@@ -1 +1,2 @@
 export * from './types';
+export * from './templates';
diff --git a/src/entities/template/config/index.ts b/src/entities/template/model/templates.ts
similarity index 91%
rename from src/entities/template/config/index.ts
rename to src/entities/template/model/templates.ts
index 8d3039e..37dbb38 100644
--- a/src/entities/template/config/index.ts
+++ b/src/entities/template/model/templates.ts
@@ -1,7 +1,6 @@
-import { shallowReactive } from 'vue';
 import type { Template } from '../model';
 
-export const _templates = shallowReactive<Template[]>([
+export const templatesInfo: Template[] = [
   {
     id: '0',
     title: 'Base Kanban',
@@ -29,4 +28,4 @@ export const _templates = shallowReactive<Template[]>([
     date: 'July 16, 2024',
     user: 'https://avatars.githubusercontent.com/u/121057011?v=4'
   }
-]);
+];
diff --git a/src/entities/template/ui/__tests__/TemplateItem.spec.ts b/src/entities/template/ui/__tests__/TemplateItem.spec.ts
index 603e655..06eeddd 100644
--- a/src/entities/template/ui/__tests__/TemplateItem.spec.ts
+++ b/src/entities/template/ui/__tests__/TemplateItem.spec.ts
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import '@/shared/lib/vitest-utils/cookiesI18n-mock';
 import i18n from '@/shared/lib/i18n';
 import TemplateItem from '../TemplateItem.vue';
-import { _templates } from '../../config';
+import { templatesInfo } from '../../model';
 
 describe('tests for TemplateItem.vue ', () => {
   const wrapper = shallowMount(TemplateItem, {
@@ -19,7 +19,7 @@ describe('tests for TemplateItem.vue ', () => {
       }
     },
     props: {
-      template: _templates[0]
+      template: templatesInfo[0]
     }
   });
 
diff --git a/src/features/auth/lib/composables/useTextChanging.ts b/src/features/auth/lib/composables/useTextChanging.ts
index ba29f50..26ee5e7 100644
--- a/src/features/auth/lib/composables/useTextChanging.ts
+++ b/src/features/auth/lib/composables/useTextChanging.ts
@@ -1,12 +1,12 @@
 import { onActivated, ref } from 'vue';
-import type { Ref } from 'vue';
 import type { Review } from '../types';
 
-export default function useTextChanging(reviews: Ref<Review[]>) {
+export default function useTextChanging(reviews: Review[]) {
+  // so, maybe Ill do with live data
   const currentIndex = ref(0);
 
   const changeReviewText = () => {
-    currentIndex.value = Math.floor(Math.random() * reviews.value.length);
+    currentIndex.value = Math.floor(Math.random() * reviews.length);
   };
   onActivated(() => {
     changeReviewText();
diff --git a/src/features/auth/model/index.ts b/src/features/auth/model/index.ts
new file mode 100644
index 0000000..23d46a4
--- /dev/null
+++ b/src/features/auth/model/index.ts
@@ -0,0 +1,2 @@
+export * from './reviews';
+export * from './validation';
diff --git a/src/features/auth/config/reviews.ts b/src/features/auth/model/reviews.ts
similarity index 87%
rename from src/features/auth/config/reviews.ts
rename to src/features/auth/model/reviews.ts
index e5676bc..ff559d6 100644
--- a/src/features/auth/config/reviews.ts
+++ b/src/features/auth/model/reviews.ts
@@ -1,7 +1,7 @@
-import { ref } from 'vue';
+import { markRaw } from 'vue';
 import type { Review } from '../lib/types';
 
-export const reviews = ref<Review[]>([
+export const reviews = markRaw<Review[]>([
   {
     id: '0',
     author: '@alexpeshkov',
diff --git a/src/features/auth/config/validation.ts b/src/features/auth/model/validation.ts
similarity index 100%
rename from src/features/auth/config/validation.ts
rename to src/features/auth/model/validation.ts
diff --git a/src/features/auth/ui/BgPanel.vue b/src/features/auth/ui/BgPanel.vue
index 6392e60..1cd1318 100644
--- a/src/features/auth/ui/BgPanel.vue
+++ b/src/features/auth/ui/BgPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useDark } from '@vueuse/core';
-import { reviews } from '../config/reviews';
+import { reviews } from '../model';
 import useTextChanging from '../lib/composables/useTextChanging';
 
 const { currentIndex } = useTextChanging(reviews);
diff --git a/src/features/auth/ui/SignInForm.vue b/src/features/auth/ui/SignInForm.vue
index bbe4a03..3f24da4 100644
--- a/src/features/auth/ui/SignInForm.vue
+++ b/src/features/auth/ui/SignInForm.vue
@@ -5,7 +5,7 @@ import { toast } from 'vue-sonner';
 import { RouteNames } from '@/shared/config/consts';
 import { UiButton, UiInput } from '@/shared/ui';
 import { Loader2 } from 'lucide-vue-next';
-import { validationRules } from '../config/validation';
+import { validationRules } from '../model';
 
 const validationSchema = toTypedSchema(validationRules);
 
diff --git a/src/features/auth/ui/SignUpForm.vue b/src/features/auth/ui/SignUpForm.vue
index 3d3a3c2..3d975d1 100644
--- a/src/features/auth/ui/SignUpForm.vue
+++ b/src/features/auth/ui/SignUpForm.vue
@@ -5,7 +5,7 @@ import { toast } from 'vue-sonner';
 import { RouteNames } from '@/shared/config/consts';
 import { UiButton, UiInput } from '@/shared/ui';
 import { Loader2 } from 'lucide-vue-next';
-import { validationRules } from '../config/validation';
+import { validationRules } from '../model';
 
 const validationSchema = toTypedSchema(validationRules);
 
diff --git a/src/features/boards/add-board/model/index.ts b/src/features/boards/add-board/model/index.ts
new file mode 100644
index 0000000..4d5ffa3
--- /dev/null
+++ b/src/features/boards/add-board/model/index.ts
@@ -0,0 +1 @@
+export * from './validation';
diff --git a/src/features/boards/add-board/config/validation.ts b/src/features/boards/add-board/model/validation.ts
similarity index 100%
rename from src/features/boards/add-board/config/validation.ts
rename to src/features/boards/add-board/model/validation.ts
diff --git a/src/features/boards/add-board/ui/FormCreation.vue b/src/features/boards/add-board/ui/FormCreation.vue
index bd80de1..cea5e15 100644
--- a/src/features/boards/add-board/ui/FormCreation.vue
+++ b/src/features/boards/add-board/ui/FormCreation.vue
@@ -4,7 +4,7 @@ import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { UiButton, UiInput } from '@/shared/ui';
 import { Loader2 } from 'lucide-vue-next';
-import { validationRules } from '../config/validation';
+import { validationRules } from '../model';
 
 const validationSchema = toTypedSchema(validationRules);
 
diff --git a/src/features/boards/charts/lib/composables/useChart.ts b/src/features/boards/charts/lib/composables/useChart.ts
index 2617f45..6d656fd 100644
--- a/src/features/boards/charts/lib/composables/useChart.ts
+++ b/src/features/boards/charts/lib/composables/useChart.ts
@@ -1,25 +1,33 @@
-import { computed, watchEffect } from 'vue';
+import { computed, effectScope, onScopeDispose, watchEffect } from 'vue';
 import { useDark } from '@vueuse/core';
 import type { ChartData, ChartOptions } from 'chart.js';
 
 export default function useChart(data: ChartData, options: ChartOptions) {
   const isDark = useDark();
 
-  const bgColor = computed(() => {
-    return isDark.value ? 'rgba(64, 64, 64, 0.9)' : 'rgb(228 228 231)';
-  });
-  const tickColor = computed(() => {
-    return isDark.value ? 'rgb(163 163 163)' : 'rgb(82 82 82)';
+  const scope = effectScope();
+
+  scope.run(() => {
+    const bgColor = computed(() => {
+      return isDark.value ? 'rgba(64, 64, 64, 0.9)' : 'rgb(228 228 231)';
+    });
+    const tickColor = computed(() => {
+      return isDark.value ? 'rgb(163 163 163)' : 'rgb(82 82 82)';
+    });
+
+    watchEffect(() => {
+      data.datasets[0].backgroundColor = bgColor.value;
+      data.datasets[0].borderColor = bgColor.value;
+      options.scales!.x!.ticks!.color = tickColor.value;
+      options.scales!.y!.ticks!.color = tickColor.value;
+      // @ts-expect-error missing type
+      options.scales!.y!.border!.color = bgColor.value;
+      // @ts-expect-error missing type
+      options.scales!.x!.border!.color = bgColor.value;
+    });
   });
 
-  watchEffect(() => {
-    data.datasets[0].backgroundColor = bgColor.value;
-    data.datasets[0].borderColor = bgColor.value;
-    options.scales!.x!.ticks!.color = tickColor.value;
-    options.scales!.y!.ticks!.color = tickColor.value;
-    // @ts-expect-error missing type
-    options.scales!.y!.border!.color = bgColor.value;
-    // @ts-expect-error missing type
-    options.scales!.x!.border!.color = bgColor.value;
+  onScopeDispose(() => {
+    scope.stop();
   });
 }
diff --git a/src/features/kanban/model/index.ts b/src/features/kanban/model/index.ts
new file mode 100644
index 0000000..4d5ffa3
--- /dev/null
+++ b/src/features/kanban/model/index.ts
@@ -0,0 +1 @@
+export * from './validation';
diff --git a/src/features/kanban/config/validation.ts b/src/features/kanban/model/validation.ts
similarity index 100%
rename from src/features/kanban/config/validation.ts
rename to src/features/kanban/model/validation.ts
diff --git a/src/features/kanban/ui/add-column/FormCreation.vue b/src/features/kanban/ui/add-column/FormCreation.vue
index 6da01d4..b1351bc 100644
--- a/src/features/kanban/ui/add-column/FormCreation.vue
+++ b/src/features/kanban/ui/add-column/FormCreation.vue
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { UiButton, UiInput } from '@/shared/ui';
-import { validationColumnRules } from '../../config/validation';
+import { validationColumnRules } from '../../model';
 
 const validationSchema = toTypedSchema(validationColumnRules);
 const { t } = useI18n();
diff --git a/src/pages/NotFoundPage.vue b/src/pages/NotFoundPage.vue
index d2f1c35..f9dce77 100644
--- a/src/pages/NotFoundPage.vue
+++ b/src/pages/NotFoundPage.vue
@@ -11,11 +11,10 @@ useHead({
 <template>
   <div :class="$style.container">
     <div :class="$style.items">
-      <!-- TODO: i18n  -->
       <h1>404</h1>
-      <h3>Not Found</h3>
-      <p>The page you were looking for can't be found</p>
-      <UiButton @click="$router.push({ name: RouteNames.boards })">Go to Home</UiButton>
+      <h3>{{ $t('not_found.title') }}</h3>
+      <p>{{ $t('not_found.description') }}</p>
+      <UiButton @click="$router.push({ name: RouteNames.boards })">{{ $t('not_found.btn') }}</UiButton>
     </div>
   </div>
 </template>
@@ -33,7 +32,7 @@ useHead({
     align-items: center;
 
     & > h1 {
-      font-size: 160px;
+      font-size: 180px;
       color: var(--zinc-800);
     }
 
@@ -53,13 +52,24 @@ useHead({
   }
 }
 
-:global(html.dark){
-  .container{
-    .items{
-      & h1, & h3{
+@media screen and (max-width: 1560px) {
+  .container {
+    .items {
+      & > h1 {
+        font-size: 160px;
+      }
+    }
+  }
+}
+
+:global(html.dark) {
+  .container {
+    .items {
+      & h1,
+      & h3 {
         color: var(--zinc-200);
       }
-      & p{
+      & p {
         color: var(--zinc-300);
       }
     }
diff --git a/src/pages/__tests__/NotFound.spec.ts b/src/pages/__tests__/NotFound.spec.ts
index b5c98c9..99a52d1 100644
--- a/src/pages/__tests__/NotFound.spec.ts
+++ b/src/pages/__tests__/NotFound.spec.ts
@@ -1,7 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
+import '@/shared/lib/vitest-utils/cookiesI18n-mock';
 import NotFound from '../NotFoundPage.vue';
 import { useHead } from '@unhead/vue';
+import i18n from '@/shared/lib/i18n';
 
 vi.mock('@unhead/vue', () => ({
   useHead: vi.fn()
@@ -15,6 +17,7 @@ const mockRouter = {
 describe('tests for NotFoundPage.vue', () => {
   const wrapper = shallowMount(NotFound, {
     global: {
+      plugins: [i18n],
       mocks: {
         $router: mockRouter
       }
diff --git a/src/shared/lib/composables/useLanguage.ts b/src/shared/lib/composables/useLanguage.ts
index 3792836..1c42d46 100644
--- a/src/shared/lib/composables/useLanguage.ts
+++ b/src/shared/lib/composables/useLanguage.ts
@@ -33,6 +33,7 @@ export function useLanguage(options: Options[], language: Ref<string>) {
       }
     );
   });
+
   onScopeDispose(() => {
     scope.stop();
   });
diff --git a/src/shared/lib/i18n/locales/en-US.ts b/src/shared/lib/i18n/locales/en-US.ts
index 67ea8a8..ca212d1 100644
--- a/src/shared/lib/i18n/locales/en-US.ts
+++ b/src/shared/lib/i18n/locales/en-US.ts
@@ -216,5 +216,10 @@ export default {
       }
     ],
     footer: 'cloud-based program for task management. The source code is available on'
+  },
+  not_found: {
+    title: 'Not Found',
+    description: "The page you were looking for can't be found",
+    btn: 'Go to Home'
   }
 };
diff --git a/src/shared/lib/i18n/locales/ru-RU.ts b/src/shared/lib/i18n/locales/ru-RU.ts
index 0ab469f..01b05cf 100644
--- a/src/shared/lib/i18n/locales/ru-RU.ts
+++ b/src/shared/lib/i18n/locales/ru-RU.ts
@@ -221,5 +221,10 @@ export default {
       }
     ],
     footer: 'облачная программа для управления задачами. Исходный код доступен на'
+  },
+  not_found: {
+    title: 'Не найдено',
+    description: 'Страница, которую вы искали, не найдена',
+    btn: 'На главную'
   }
 };
diff --git a/src/shared/lib/i18n/locales/zh-CN.ts b/src/shared/lib/i18n/locales/zh-CN.ts
index d68a90e..f4cc0a4 100644
--- a/src/shared/lib/i18n/locales/zh-CN.ts
+++ b/src/shared/lib/i18n/locales/zh-CN.ts
@@ -213,5 +213,10 @@ export default {
       }
     ],
     footer: '基于云的任务管理程序。源代码可在'
+  },
+  not_found: {
+    title: '未找到',
+    description: '找不到您要查找的页面',
+    btn: '返回首页'
   }
 };
diff --git a/src/widgets/boards/config/index.ts b/src/widgets/boards/config/index.ts
deleted file mode 100644
index 9667213..0000000
--- a/src/widgets/boards/config/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './charts.data';
diff --git a/src/widgets/boards/config/charts.data.ts b/src/widgets/boards/model/charts.ts
similarity index 54%
rename from src/widgets/boards/config/charts.data.ts
rename to src/widgets/boards/model/charts.ts
index 47d4314..84aaec4 100644
--- a/src/widgets/boards/config/charts.data.ts
+++ b/src/widgets/boards/model/charts.ts
@@ -1,18 +1,17 @@
-import { shallowRef } from 'vue';
+import { defineAsyncComponent, shallowRef } from 'vue';
 import type { Chart } from '@/entities/chart/model';
-import { ActivityBoardChart, ActivityTaskChart } from '@/features/boards';
 
 export const chartsData = shallowRef<Chart[]>([
   {
     id: '0',
     titleKeyI18n: 'title_boards',
     descriptionKeyI18n: 'description_boards',
-    chart: ActivityBoardChart
+    chart: defineAsyncComponent(() => import('@/features/boards/charts/ui/ActivityBoardChart.vue'))
   },
   {
     id: '1',
     titleKeyI18n: 'title_tasks',
     descriptionKeyI18n: 'description_tasks',
-    chart: ActivityTaskChart
+    chart: defineAsyncComponent(() => import('@/features/boards/charts/ui/ActivityTaskChart.vue'))
   }
 ]);
diff --git a/src/widgets/boards/model/index.ts b/src/widgets/boards/model/index.ts
new file mode 100644
index 0000000..f2359bf
--- /dev/null
+++ b/src/widgets/boards/model/index.ts
@@ -0,0 +1 @@
+export * from './charts';
diff --git "a/src/widgets/boards/ui/Activity\320\241harts.vue" "b/src/widgets/boards/ui/Activity\320\241harts.vue"
index 8992329..94d3db6 100644
--- "a/src/widgets/boards/ui/Activity\320\241harts.vue"
+++ "b/src/widgets/boards/ui/Activity\320\241harts.vue"
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { chartsData } from '../config';
+import { chartsData } from '../model';
 import { ChartItem } from '@/entities/chart';
 </script>
 
diff --git a/src/widgets/layout/config/header.ts b/src/widgets/layout/model/header.ts
similarity index 86%
rename from src/widgets/layout/config/header.ts
rename to src/widgets/layout/model/header.ts
index 3842107..e0dd45e 100644
--- a/src/widgets/layout/config/header.ts
+++ b/src/widgets/layout/model/header.ts
@@ -1,10 +1,10 @@
 import type { HeaderNavLink } from '../types';
 
-export const headerLinks = [
+export const headerLinks: HeaderNavLink[] = [
   { id: 0, name: 'About', pagePrefix: 'about' },
   { id: 1, name: 'Kanban', pagePrefix: 'kanban' },
   { id: 2, name: 'Members', pagePrefix: 'members' },
   { id: 3, name: 'Templates', pagePrefix: 'templates' },
   { id: 4, name: 'Collaborative', pagePrefix: 'collaborative' },
   { id: 5, name: 'Chats', pagePrefix: 'chats' }
-] satisfies HeaderNavLink[];
+];
diff --git a/src/widgets/layout/model/index.ts b/src/widgets/layout/model/index.ts
new file mode 100644
index 0000000..312f7f6
--- /dev/null
+++ b/src/widgets/layout/model/index.ts
@@ -0,0 +1,2 @@
+export * from './header';
+export * from './links';
diff --git a/src/widgets/layout/config/links.ts b/src/widgets/layout/model/links.ts
similarity index 100%
rename from src/widgets/layout/config/links.ts
rename to src/widgets/layout/model/links.ts
diff --git a/src/widgets/layout/ui/header/HeaderWelcome.vue b/src/widgets/layout/ui/header/HeaderWelcome.vue
index 0ffc67a..a119a8a 100644
--- a/src/widgets/layout/ui/header/HeaderWelcome.vue
+++ b/src/widgets/layout/ui/header/HeaderWelcome.vue
@@ -8,7 +8,7 @@ import { redirect } from '@/shared/lib/helpers';
 import { RouteNames } from '@/shared/config/consts';
 import { Globe, Moon, Sun } from 'lucide-vue-next';
 import type { Options } from '@/shared/ui/select/types';
-import { headerLinks } from '../../config/header';
+import { headerLinks } from '../../model';
 import type { HeaderNavLink } from '../../types';
 
 const isDark = useDark();
diff --git a/src/widgets/layout/ui/sidebar/AppSidebar.vue b/src/widgets/layout/ui/sidebar/AppSidebar.vue
index fe070b6..5130416 100644
--- a/src/widgets/layout/ui/sidebar/AppSidebar.vue
+++ b/src/widgets/layout/ui/sidebar/AppSidebar.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useDark } from '@vueuse/core';
-import { UiBadge } from '@/shared/ui';
-import { links } from '../../config/links';
-import WorkSpace from './WorkSpace.vue';
+import { links } from '../../model';
 import { SearchFilter } from '@/features/filter';
+import { UiBadge } from '@/shared/ui';
 import { PlanCard } from '@/features/plan';
 import { ArrowsDouble } from '@/shared/assets/icons';
-import { AlignJustify } from 'lucide-vue-next';
+import WorkSpace from './WorkSpace.vue';
 import ProjectsList from './ProjectsList.vue';
+import { AlignJustify } from 'lucide-vue-next';
 import type { Board } from '@/entities/board';
 
 const props = defineProps<{
diff --git a/src/widgets/layout/ui/sidebar/ProjectsList.vue b/src/widgets/layout/ui/sidebar/ProjectsList.vue
index 7e3aa35..48cda4a 100644
--- a/src/widgets/layout/ui/sidebar/ProjectsList.vue
+++ b/src/widgets/layout/ui/sidebar/ProjectsList.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
+import { useDark } from '@vueuse/core';
 import { UiButton } from '@/shared/ui';
-import type { Board } from '@/entities/board';
 import { CircleFadingPlus } from 'lucide-vue-next';
-import { useDark } from '@vueuse/core';
+import type { Board } from '@/entities/board';
 
 const props = defineProps<{
   boards: Board[];
diff --git a/src/widgets/templates/ui/AllTemplates.vue b/src/widgets/templates/ui/AllTemplates.vue
index 572f510..076ca2a 100644
--- a/src/widgets/templates/ui/AllTemplates.vue
+++ b/src/widgets/templates/ui/AllTemplates.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { TemplateItem, _templates } from '@/entities/template';
+import { TemplateItem, templatesInfo } from '@/entities/template';
 
 const { tm } = useI18n();
 
 const templates = computed(() => {
   const localeArr = tm('templates.items') as (typeof TemplateItem)[];
-  return _templates.map((template, index) => ({
+  return templatesInfo.map((template, index) => ({
     ...template,
     title: localeArr[index].title,
     tag: localeArr[index].tag,
diff --git a/src/widgets/welcome/config/cards.ts b/src/widgets/welcome/model/cards.ts
similarity index 88%
rename from src/widgets/welcome/config/cards.ts
rename to src/widgets/welcome/model/cards.ts
index 7c8bec3..6c45efe 100644
--- a/src/widgets/welcome/config/cards.ts
+++ b/src/widgets/welcome/model/cards.ts
@@ -1,6 +1,6 @@
 import type { MarketingCard } from '../types';
 
-export const cardsInfo = [
+export const cardsInfo: MarketingCard[] = [
   {
     id: 0,
     pagePrefix: 'kanban',
@@ -28,4 +28,4 @@ export const cardsInfo = [
     id: 4,
     pagePrefix: 'chats'
   }
-] satisfies MarketingCard[];
+];
diff --git a/src/widgets/welcome/model/index.ts b/src/widgets/welcome/model/index.ts
new file mode 100644
index 0000000..870e357
--- /dev/null
+++ b/src/widgets/welcome/model/index.ts
@@ -0,0 +1 @@
+export * from './cards';
diff --git a/src/widgets/welcome/ui/MarketingCards.vue b/src/widgets/welcome/ui/MarketingCards.vue
index 8fd1aa5..010f5e4 100644
--- a/src/widgets/welcome/ui/MarketingCards.vue
+++ b/src/widgets/welcome/ui/MarketingCards.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { useDark } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
-import { cardsInfo } from '../config/cards';
+import { cardsInfo } from '../model';
 import type { MarketingCard } from '../types';
 import { UiCard } from '@/shared/ui';
 

From 15f79c26384df34045624af15a9d78bbe0101271 Mon Sep 17 00:00:00 2001
From: mnenie <1alexpeshkov@gmail.com>
Date: Fri, 30 Aug 2024 20:43:10 +0300
Subject: [PATCH 4/4] fix: fsd structure

---
 src/features/boards/charts/{config => model}/charts.data.ts    | 0
 src/features/boards/charts/{config => model}/charts.options.ts | 0
 src/features/boards/charts/{config => model}/index.ts          | 0
 src/features/boards/charts/ui/ActivityBoardChart.vue           | 2 +-
 src/features/boards/charts/ui/ActivityTaskChart.vue            | 2 +-
 5 files changed, 2 insertions(+), 2 deletions(-)
 rename src/features/boards/charts/{config => model}/charts.data.ts (100%)
 rename src/features/boards/charts/{config => model}/charts.options.ts (100%)
 rename src/features/boards/charts/{config => model}/index.ts (100%)

diff --git a/src/features/boards/charts/config/charts.data.ts b/src/features/boards/charts/model/charts.data.ts
similarity index 100%
rename from src/features/boards/charts/config/charts.data.ts
rename to src/features/boards/charts/model/charts.data.ts
diff --git a/src/features/boards/charts/config/charts.options.ts b/src/features/boards/charts/model/charts.options.ts
similarity index 100%
rename from src/features/boards/charts/config/charts.options.ts
rename to src/features/boards/charts/model/charts.options.ts
diff --git a/src/features/boards/charts/config/index.ts b/src/features/boards/charts/model/index.ts
similarity index 100%
rename from src/features/boards/charts/config/index.ts
rename to src/features/boards/charts/model/index.ts
diff --git a/src/features/boards/charts/ui/ActivityBoardChart.vue b/src/features/boards/charts/ui/ActivityBoardChart.vue
index 1f20e32..a35a0c8 100644
--- a/src/features/boards/charts/ui/ActivityBoardChart.vue
+++ b/src/features/boards/charts/ui/ActivityBoardChart.vue
@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { Chart } from 'chart.js/auto';
 import type { ChartItem } from 'chart.js';
-import { dataBoards, options } from '../config';
+import { dataBoards, options } from '../model';
 import useChart from '../lib/composables/useChart';
 
 const chartRef = ref<ChartItem>();
diff --git a/src/features/boards/charts/ui/ActivityTaskChart.vue b/src/features/boards/charts/ui/ActivityTaskChart.vue
index 595dbdf..8fee0d3 100644
--- a/src/features/boards/charts/ui/ActivityTaskChart.vue
+++ b/src/features/boards/charts/ui/ActivityTaskChart.vue
@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { Chart } from 'chart.js/auto';
 import type { ChartItem } from 'chart.js';
-import { dataTasks, options } from '../config';
+import { dataTasks, options } from '../model';
 import useChart from '../lib/composables/useChart';
 
 const chartRef = ref<ChartItem>();