localization: templates, fix: bugs

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);
       }
     }
   }

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;
 }

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" />

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'
   }
 ]);

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);
       }

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>

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>

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);
+        }
       }
     }
   }

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 {

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';
 });

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();

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);
     }

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