From e14e11b5422499b0215f2730141676e9f48fccb8 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Sat, 20 Jul 2024 23:26:15 +0300
Subject: [PATCH] localization: templates, fix: bugs

---
 src/entities/board/ui/BoardPreviewCard.vue    | 13 +--
 src/entities/chart/model/types.ts             |  4 +-
 src/entities/chart/ui/ChartItem.vue           |  7 +-
 src/entities/template/config/index.ts         |  8 +-
 src/entities/template/ui/TemplateItem.vue     | 11 ++-
 .../boards/add-board/ui/CreationBoard.vue     |  9 ++-
 .../boards/add-board/ui/FormCreation.vue      | 16 ++--
 .../boards/filter/ui/FilterBoards.vue         | 22 +++++-
 src/features/filter/ui/SearchFilter.vue       |  3 +
 src/features/plan/ui/PlanCard.vue             |  3 +-
 .../lang-switcher/ui/LanguageSwitcher.vue     |  2 +-
 src/pages/Templates.vue                       | 13 +--
 src/shared/lib/i18n/index.ts                  |  6 +-
 src/shared/lib/i18n/locales/en-US.ts          | 62 +++++++++++++++
 src/shared/lib/i18n/locales/ru-RU.ts          | 64 ++++++++++++++-
 src/shared/lib/i18n/locales/zh-CN.ts          | 79 +++++++++++++++++++
 src/shared/ui/input/UiInput.vue               |  2 +-
 src/shared/ui/sheet/UiSheet.vue               | 18 +++--
 src/widgets/boards/config/charts.data.ts      | 10 +--
 src/widgets/boards/ui/TeamBoards.vue          |  9 ++-
 src/widgets/templates/ui/AllTemplates.vue     | 17 +++-
 21 files changed, 324 insertions(+), 54 deletions(-)
 create mode 100644 src/shared/lib/i18n/locales/zh-CN.ts

diff --git a/src/entities/board/ui/BoardPreviewCard.vue b/src/entities/board/ui/BoardPreviewCard.vue
index a062c4e..d067bd6 100644
--- a/src/entities/board/ui/BoardPreviewCard.vue
+++ b/src/entities/board/ui/BoardPreviewCard.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import type { UserType } from '@/entities/user/model';
-import type { BoardPreview } from '../model';
 import { UserAvatar } from '@/entities/user';
-import { computed } from 'vue';
+import type { BoardPreview } from '../model';
 
 defineProps<{
   board: BoardPreview;
 }>();
 
+const { t } = useI18n();
+
 const userPosition = computed(() => {
   return (board: BoardPreview, user: UserType) => {
     return (board.users.length - 1 - +user._id!) * 12;
@@ -21,7 +24,7 @@ const userPosition = computed(() => {
       <span class="text-xs">{{ board.description }}</span>
     </div>
     <div :class="$style.bottom_part">
-      <span class="text-xs"> 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
@@ -102,9 +105,9 @@ const userPosition = computed(() => {
       }
     }
 
-    .bottom_part{
+    .bottom_part {
       & > span {
-        color: var(--zinc-300)
+        color: var(--zinc-300);
       }
     }
   }
diff --git a/src/entities/chart/model/types.ts b/src/entities/chart/model/types.ts
index cd12ce6..6702352 100644
--- a/src/entities/chart/model/types.ts
+++ b/src/entities/chart/model/types.ts
@@ -2,7 +2,7 @@ import type { Component } from 'vue';
 
 export interface Chart {
   id: string;
-  title: string;
-  description: string;
+  titleKeyI18n: string;
+  descriptionKeyI18n: string;
   chart: Component;
 }
diff --git a/src/entities/chart/ui/ChartItem.vue b/src/entities/chart/ui/ChartItem.vue
index a1af796..e86b708 100644
--- a/src/entities/chart/ui/ChartItem.vue
+++ b/src/entities/chart/ui/ChartItem.vue
@@ -1,16 +1,19 @@
 <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">{{ chart.title }}</h4>
+    <h4 class="heading-4">{{ t(`boards.chart.${chart.titleKeyI18n}`) }}</h4>
     <p class="text-sm">
-      {{ chart.description }}
+      {{ t(`boards.chart.${chart.descriptionKeyI18n}`) }}
     </p>
     <div :class="$style.chart">
       <component :is="chart.chart" />
diff --git a/src/entities/template/config/index.ts b/src/entities/template/config/index.ts
index 724b87e..8d3039e 100644
--- a/src/entities/template/config/index.ts
+++ b/src/entities/template/config/index.ts
@@ -1,7 +1,7 @@
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 import type { Template } from '../model';
 
-export const templates = reactive<Template[]>([
+export const _templates = shallowReactive<Template[]>([
   {
     id: '0',
     title: 'Base Kanban',
@@ -17,7 +17,7 @@ export const templates = reactive<Template[]>([
     img: 'https://storage.weeek.net/templates/tm/development-and-product/roadmap.png',
     tag: 'New',
     description: `Create a project based on our "Roadmap" template`,
-    date: 'June 12, 2024',
+    date: 'June 18, 2024',
     user: 'https://avatars.githubusercontent.com/u/121057011?v=4'
   },
   {
@@ -26,7 +26,7 @@ export const templates = reactive<Template[]>([
     img: 'https://storage.weeek.net/templates/tm/development-and-product/web-development.png',
     tag: 'New',
     description: `Create a basic project with "Web Development" template`,
-    date: 'June 12, 2024',
+    date: 'July 16, 2024',
     user: 'https://avatars.githubusercontent.com/u/121057011?v=4'
   }
 ]);
diff --git a/src/entities/template/ui/TemplateItem.vue b/src/entities/template/ui/TemplateItem.vue
index d458da7..0520839 100644
--- a/src/entities/template/ui/TemplateItem.vue
+++ b/src/entities/template/ui/TemplateItem.vue
@@ -1,10 +1,13 @@
 <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>
@@ -20,7 +23,7 @@ defineProps<{
       </div>
       <div :class="$style.bottom">
         <span class="text-xs">{{ template.date }}</span>
-        <img v-tooltip.bottom-end="'creator'" :src="template.user" />
+        <img v-tooltip.bottom-end="t('templates.user')" :src="template.user" />
       </div>
     </div>
   </div>
@@ -60,6 +63,7 @@ defineProps<{
   }
   .main_content {
     padding: 15px;
+    width: 100%;
 
     .text {
       display: flex;
@@ -77,6 +81,7 @@ defineProps<{
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
 
     & img {
       width: 20px;
@@ -93,10 +98,10 @@ defineProps<{
     &:hover {
       border-color: var(--zinc-400);
     }
-    .img_wrapper{
+    .img_wrapper {
       border-color: var(--zinc-600);
     }
-    .main_content{
+    .main_content {
       & span {
         color: var(--zinc-200);
       }
diff --git a/src/features/boards/add-board/ui/CreationBoard.vue b/src/features/boards/add-board/ui/CreationBoard.vue
index aaf4682..2342ae1 100644
--- a/src/features/boards/add-board/ui/CreationBoard.vue
+++ b/src/features/boards/add-board/ui/CreationBoard.vue
@@ -1,11 +1,14 @@
 <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();
@@ -15,13 +18,13 @@ const open = () => {
 
 <template>
   <div :class="$style.creation" @click="open">
-    <span style="font-weight: 500">+ Create new board</span>
+    <span style="font-weight: 500">+ {{ t('boards.create') }}</span>
   </div>
   <UiSheet ref="sheet">
     <template #header>
-      <p class="text-lg" style="font-weight: 500">Create board</p>
+      <p class="text-lg" style="font-weight: 500">{{ t('sheet.title') }}</p>
       <span :class="[$style.desc, 'text-sm']">
-        The new board will allow you to create tasks for solving them.
+        {{ 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 59fbc21..2557fd9 100644
--- a/src/features/boards/add-board/ui/FormCreation.vue
+++ b/src/features/boards/add-board/ui/FormCreation.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { UiButton, UiInput } from '@/shared/ui';
+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';
 import { Loader2 } from 'lucide-vue-next';
 import { validationRules } from '../config/validation';
-import { useField, useForm } from 'vee-validate';
-import { ref } from 'vue';
 
 const validationSchema = toTypedSchema(validationRules);
+const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
   validationSchema
@@ -23,16 +25,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">Board name</label>
-          <UiInput id="name" v-model="name" :placeholder="'e.g. Nice board'" />
+          <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">Board description</label>
+          <label class="text-sm" for="description">{{ t('sheet.form.description.label') }}</label>
           <UiInput
             id="description"
             v-model="description"
-            :placeholder="'e.g. development board for our company'"
+            :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 6784f06..73f40f8 100644
--- a/src/features/boards/filter/ui/FilterBoards.vue
+++ b/src/features/boards/filter/ui/FilterBoards.vue
@@ -1,5 +1,6 @@
 <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';
@@ -10,6 +11,8 @@ const isDark = useDark();
 const iconColor = computed(() => {
   return isDark.value ? 'var(--zinc-300)' : 'rgb(82 82 91 / 0.9)';
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -20,15 +23,23 @@ const iconColor = computed(() => {
         id="filter"
         ref="filterRef"
         v-model.trim="filter"
-        :placeholder="'Filter boards...'"
+        :placeholder="t('boards.filter.input')"
         :class="$style.filter"
       />
     </div>
-    <UiButton v-tooltip.bottom="'Sort boards by popularity'" :variant="'dashed'" style="padding: 0 12px">
+    <UiButton
+      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">By popularity</span>
+      <span style="margin-left: 6px">{{ t('boards.filter.popularity') }}</span>
     </UiButton>
-    <UiButton v-tooltip.bottom="'Show recent boards'" :variant="'dashed'" style="padding: 0 12px">
+    <UiButton
+      v-tooltip.bottom="t('boards.filter.tooltips.second_sort')"
+      :variant="'dashed'"
+      style="padding: 0 12px"
+    >
       <History :size="17" :color="iconColor" />
     </UiButton>
   </div>
@@ -69,6 +80,9 @@ const iconColor = computed(() => {
     .filter_container {
       .filter {
         background-color: rgba(var(--zinc-rgb-600), 0.4);
+        &::placeholder {
+          color: var(--zinc-200);
+        }
       }
     }
   }
diff --git a/src/features/filter/ui/SearchFilter.vue b/src/features/filter/ui/SearchFilter.vue
index 1031895..98a0d83 100644
--- a/src/features/filter/ui/SearchFilter.vue
+++ b/src/features/filter/ui/SearchFilter.vue
@@ -106,6 +106,9 @@ const { t } = useI18n();
   .search_container {
     .input_filter {
       background-color: transparent;
+      &::placeholder {
+        color: var(--zinc-200);
+      }
     }
     .badge {
       & span {
diff --git a/src/features/plan/ui/PlanCard.vue b/src/features/plan/ui/PlanCard.vue
index 7b60db5..5df1328 100644
--- a/src/features/plan/ui/PlanCard.vue
+++ b/src/features/plan/ui/PlanCard.vue
@@ -9,9 +9,10 @@ const props = defineProps<{
   isExpanded: boolean;
 }>();
 
-const isDark = useDark();
 const { t } = useI18n();
 
+const isDark = useDark();
+
 const planPosition = computed(() => {
   return props.isExpanded ? 'flex-start' : 'center';
 });
diff --git a/src/features/settings/lang-switcher/ui/LanguageSwitcher.vue b/src/features/settings/lang-switcher/ui/LanguageSwitcher.vue
index 5f9e522..36d456e 100644
--- a/src/features/settings/lang-switcher/ui/LanguageSwitcher.vue
+++ b/src/features/settings/lang-switcher/ui/LanguageSwitcher.vue
@@ -10,7 +10,7 @@ const { locale } = useI18n();
 const options = shallowReactive<Options[]>([
   { name: 'English', value: 'en-US' },
   { name: 'Русский', value: 'ru-RU' },
-  { name: '简体中文', value: 'zn-CN' }
+  { name: '简体中文', value: 'zh-CN' }
 ]);
 
 const cookies = useCookies();
diff --git a/src/pages/Templates.vue b/src/pages/Templates.vue
index afbb8a6..125c215 100644
--- a/src/pages/Templates.vue
+++ b/src/pages/Templates.vue
@@ -1,16 +1,19 @@
 <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 v-once :class="$style.top">
-    <h4 class="heading-4">Templates</h4>
-    <p class="text-sm">Choose one of the available templates to create your project</p>
+  <div :class="$style.top">
+    <h4 class="heading-4">{{ t('templates.title') }}</h4>
+    <p class="text-sm">{{ t('templates.description') }}</p>
   </div>
   <AllTemplates />
 </template>
@@ -27,8 +30,8 @@ useHead({
   }
 }
 
-:global(html.dark){
-  .top{
+:global(html.dark) {
+  .top {
     & > p {
       color: var(--zinc-300);
     }
diff --git a/src/shared/lib/i18n/index.ts b/src/shared/lib/i18n/index.ts
index c324a60..10f3da2 100644
--- a/src/shared/lib/i18n/index.ts
+++ b/src/shared/lib/i18n/index.ts
@@ -2,6 +2,7 @@ import { createI18n } from 'vue-i18n';
 import { useCookies } from '@vueuse/integrations/useCookies';
 import enLocale from './locales/en-US';
 import ruLocale from './locales/ru-RU';
+import zhLocale from './locales/zh-CN';
 
 type MessageSchema = typeof enLocale;
 
@@ -11,6 +12,9 @@ const messages = {
   },
   'ru-RU': {
     ...ruLocale
+  },
+  'zh-CN': {
+    ...zhLocale
   }
 };
 const cookies = useCookies();
@@ -24,7 +28,7 @@ const getCurrentLocale = () => {
   return 'en-US';
 };
 
-const i18n = createI18n<[MessageSchema], 'en-US' | 'ru-RU'>({
+const i18n = createI18n<[MessageSchema], 'en-US' | 'ru-RU' | 'zh-CN'>({
   legacy: false,
   locale: getCurrentLocale(),
   messages: messages
diff --git a/src/shared/lib/i18n/locales/en-US.ts b/src/shared/lib/i18n/locales/en-US.ts
index 05f56ec..418f03b 100644
--- a/src/shared/lib/i18n/locales/en-US.ts
+++ b/src/shared/lib/i18n/locales/en-US.ts
@@ -13,5 +13,67 @@ export default {
     upgrade: 'Upgrade "Pro"',
     collaboration: 'Invite members',
     name: 'Test Workspace'
+  },
+  boards: {
+    title: 'Boards in this team',
+    description: 'All your active boards are located here, which you can switch to and work on',
+    create: 'Create new board',
+    filter: {
+      input: 'Filter boards...',
+      popularity: 'By popularity',
+      tooltips: {
+        first_sort: 'Sort boards by popularity',
+        second_sort: 'Show recent boards'
+      }
+    },
+    card: {
+      date_updated: 'Updated'
+    },
+    chart: {
+      title_boards: 'Сreated boards',
+      description_boards: 'Create, share, work, and then analyze your activity on Jenda',
+      title_tasks: 'Your tasks',
+      description_tasks: 'Solve and complete the tasks you started'
+    }
+  },
+  templates: {
+    title: 'Templates',
+    description: 'Choose one of the available templates to create your project',
+    user: 'creator',
+    items: [
+      {
+        title: 'Base Kanban',
+        tag: 'Recommended',
+        description: 'Create a basic project with "Base Kanban" template',
+        date: 'June 12, 2024'
+      },
+      {
+        title: 'Roadmap',
+        tag: 'New',
+        description: 'Create a project based on our "Roadmap" template',
+        date: 'June 18, 2024'
+      },
+      {
+        title: 'Web Development',
+        tag: 'New',
+        description: 'Create a basic project with "Web Development" template',
+        date: 'July 16, 2024'
+      }
+    ]
+  },
+  sheet: {
+    title: 'Create board',
+    description: 'The new board will allow you to create tasks for solving them.',
+    form: {
+      name: {
+        label: 'Board name',
+        placeholder: 'e.g. "Jenda"'
+      },
+      description: {
+        label: 'Board description',
+        placeholder: 'e.g. development board for our company'
+      },
+      submit: 'Create board'
+    }
   }
 };
diff --git a/src/shared/lib/i18n/locales/ru-RU.ts b/src/shared/lib/i18n/locales/ru-RU.ts
index e669aac..e1a8fe3 100644
--- a/src/shared/lib/i18n/locales/ru-RU.ts
+++ b/src/shared/lib/i18n/locales/ru-RU.ts
@@ -1,6 +1,6 @@
 export default {
   sidebar: {
-    badge: 'бесплатно',
+    badge: 'free',
     input: 'Поиск',
     section: 'рабочее пространство',
     boards: 'Доски',
@@ -13,5 +13,67 @@ export default {
     upgrade: 'Обновите до "Pro"',
     collaboration: 'Пригласить участников',
     name: 'Тестовое рабочее пространство'
+  },
+  boards: {
+    title: 'Доски в этой команде',
+    description: 'Все ваши активные доски находятся здесь, вы можете переключаться и работать с ними',
+    create: 'Создать новую доску',
+    filter: {
+      input: 'Найти доску...',
+      popularity: 'По популярности',
+      tooltips: {
+        first_sort: 'Сортировать доски по популярности',
+        second_sort: 'Последние доски'
+      }
+    },
+    card: {
+      date_updated: 'Обновлено'
+    },
+    chart: {
+      title_boards: 'Созданные доски',
+      description_boards: 'Создавайте, делитесь, а затем анализируйте свою активность на Jenda',
+      title_tasks: 'Ваши задачи',
+      description_tasks: 'Решайте и завершайте начатые задачи'
+    }
+  },
+  templates: {
+    title: 'Шаблоны',
+    description: 'Выберите один из доступных шаблонов, чтобы создать ваш проект',
+    user: 'создатель',
+    items: [
+      {
+        title: 'Базовый шаблон',
+        tag: 'Рекомендуемый',
+        description: 'Создайте базовый проект с помощью шаблона "Базовый шаблон"',
+        date: '12 июня 2024'
+      },
+      {
+        title: 'Дорожная карта',
+        tag: 'Новый',
+        description: 'Создайте проект на основе нашего шаблона "Дорожная карта"',
+        date: '18 июня 2024'
+      },
+      {
+        title: 'Веб-разработка',
+        tag: 'Новый',
+        description: 'Создайте базовый проект с помощью шаблона "Веб-разработка"',
+        date: '16 июля 2024'
+      }
+    ]
+  },
+  sheet: {
+    title: 'Создать доску',
+    description: 'Новая доска позволит вам создавать задачи для их решения.',
+    form: {
+      name: {
+        label: 'Название доски',
+        placeholder: 'например, "Jenda"'
+      },
+      description: {
+        label: 'Описание доски',
+        placeholder: 'например, доска для разработки нашей компании'
+      },
+      submit: 'Создать доску'
+    }
   }
 };
diff --git a/src/shared/lib/i18n/locales/zh-CN.ts b/src/shared/lib/i18n/locales/zh-CN.ts
new file mode 100644
index 0000000..5a798af
--- /dev/null
+++ b/src/shared/lib/i18n/locales/zh-CN.ts
@@ -0,0 +1,79 @@
+export default {
+  sidebar: {
+    badge: '免费',
+    input: '搜索',
+    section: '工作区',
+    boards: '看板',
+    templates: '模板',
+    members: '成员',
+    settings: '设置',
+    plan: '升级你的计划'
+  },
+  header: {
+    upgrade: '升级到“专业版”',
+    collaboration: '邀请成员',
+    name: '测试工作区'
+  },
+  boards: {
+    title: '此团队的看板',
+    description: '所有活动中的看板都在这里，你可以切换并进行操作',
+    create: '创建新看板',
+    filter: {
+      input: '筛选看板...',
+      popularity: '按热门排序',
+      tooltips: {
+        first_sort: '按热门排序看板',
+        second_sort: '显示最近的看板'
+      }
+    },
+    card: {
+      date_updated: '更新时间'
+    },
+    chart: {
+      title_boards: '创建的看板',
+      description_boards: '在 Jenda 上创建、分享、工作，然后分析你的活动',
+      title_tasks: '你的任务',
+      description_tasks: '解决并完成你开始的任务'
+    }
+  },
+  templates: {
+    title: '模板',
+    description: '选择一个可用模板来创建您的项目',
+    user: '创建者',
+    items: [
+      {
+        title: '基础看板',
+        tag: '推荐',
+        description: '使用 "基础看板" 模板创建一个基本项目',
+        date: '2024年6月12日'
+      },
+      {
+        title: '路线图',
+        tag: '新',
+        description: '基于我们的 "路线图" 模板创建一个项目',
+        date: '2024年6月18日'
+      },
+      {
+        title: '网页开发',
+        tag: '新',
+        description: '使用 "网页开发" 模板创建一个基本项目',
+        date: '2024年7月16日'
+      }
+    ]
+  },
+  sheet: {
+    title: '创建看板',
+    description: '新看板将允许你创建任务以进行解决。',
+    form: {
+      name: {
+        label: '看板名称',
+        placeholder: '例如 “Jenda”'
+      },
+      description: {
+        label: '看板描述',
+        placeholder: '例如 我们公司的开发看板'
+      },
+      submit: '创建看板'
+    }
+  }
+};
diff --git a/src/shared/ui/input/UiInput.vue b/src/shared/ui/input/UiInput.vue
index 7a22f58..6a38155 100644
--- a/src/shared/ui/input/UiInput.vue
+++ b/src/shared/ui/input/UiInput.vue
@@ -70,7 +70,7 @@ const emit = defineEmits(['update:modelValue']);
     background-color: rgba(var(--zinc-rgb-700), 0.8);
 
     &::placeholder {
-      color: var(--zinc-200);
+      color: var(--zinc-300);
     }
   }
 }
diff --git a/src/shared/ui/sheet/UiSheet.vue b/src/shared/ui/sheet/UiSheet.vue
index 8bd84e5..e6e6ff8 100644
--- a/src/shared/ui/sheet/UiSheet.vue
+++ b/src/shared/ui/sheet/UiSheet.vue
@@ -176,14 +176,14 @@ defineExpose({ open, close });
     display: none;
   }
 
-  .sheet_header{
+  .sheet_header {
     display: flex;
     flex-direction: column;
     gap: 6px;
     padding: 5px 0px;
     margin-bottom: 20px;
 
-    .header_icon{
+    .header_icon {
       cursor: pointer;
       color: var(--zinc-600);
       position: absolute;
@@ -191,18 +191,26 @@ defineExpose({ open, close });
       top: 15px;
       transition: color 0.1s ease-in;
 
-      &:hover{
+      &:hover {
         color: var(--zinc-900);
       }
     }
   }
 }
 
-:global(html.dark){
+:global(html.dark) {
   .sheet {
-    .sheet_content{
+    .sheet_content {
       background-color: rgba(var(--zinc-rgb-800), 1);
     }
+    .sheet_header {
+      .header_icon {
+        color: var(--zinc-400);
+        &:hover {
+          color: var(--zinc-300);
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/widgets/boards/config/charts.data.ts b/src/widgets/boards/config/charts.data.ts
index 3b1c001..47d4314 100644
--- a/src/widgets/boards/config/charts.data.ts
+++ b/src/widgets/boards/config/charts.data.ts
@@ -1,18 +1,18 @@
+import { shallowRef } from 'vue';
 import type { Chart } from '@/entities/chart/model';
 import { ActivityBoardChart, ActivityTaskChart } from '@/features/boards';
-import { shallowRef } from 'vue';
 
 export const chartsData = shallowRef<Chart[]>([
   {
     id: '0',
-    title: 'Сreated boards',
-    description: 'Create, share, work, and then analyze your activity on Jenda',
+    titleKeyI18n: 'title_boards',
+    descriptionKeyI18n: 'description_boards',
     chart: ActivityBoardChart
   },
   {
     id: '1',
-    title: 'Your tasks',
-    description: 'Solve and complete the tasks you started',
+    titleKeyI18n: 'title_tasks',
+    descriptionKeyI18n: 'description_tasks',
     chart: ActivityTaskChart
   }
 ]);
diff --git a/src/widgets/boards/ui/TeamBoards.vue b/src/widgets/boards/ui/TeamBoards.vue
index 26fec03..edf4c9a 100644
--- a/src/widgets/boards/ui/TeamBoards.vue
+++ b/src/widgets/boards/ui/TeamBoards.vue
@@ -1,8 +1,11 @@
 <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';
-import { ref } from 'vue';
+
+const { t } = useI18n();
 
 const boards = ref<BoardPreview[]>([
   {
@@ -22,8 +25,8 @@ const boards = ref<BoardPreview[]>([
   <div :class="$style.boards_inside">
     <div :class="$style.top_part">
       <div :class="$style.text">
-        <h4 class="heading-4">Boards in this team</h4>
-        <p class="text-sm">All your active boards are located here, which you can switch to and work on</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/templates/ui/AllTemplates.vue b/src/widgets/templates/ui/AllTemplates.vue
index f9e353b..572f510 100644
--- a/src/widgets/templates/ui/AllTemplates.vue
+++ b/src/widgets/templates/ui/AllTemplates.vue
@@ -1,5 +1,20 @@
 <script setup lang="ts">
-import { TemplateItem, templates } from '@/entities/template';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { TemplateItem, _templates } from '@/entities/template';
+
+const { tm } = useI18n();
+
+const templates = computed(() => {
+  const localeArr = tm('templates.items') as (typeof TemplateItem)[];
+  return _templates.map((template, index) => ({
+    ...template,
+    title: localeArr[index].title,
+    tag: localeArr[index].tag,
+    description: localeArr[index].description,
+    date: localeArr[index].date
+  }));
+});
 </script>
 
 <template>