feat: add header and features in welcome, refactor: useLanguage compo…

…sable

src/app/providers/router/index.ts

@@ -77,7 +77,16 @@ const routes = [
     }
   },
   {
-    name: '404',
+    name: RouteNames.welcome,
+    path: '/welcome',
+    component: () => import('@/pages/Home.vue'),
+    meta: {
+      layout: LayoutsEnum.welcome,
+      requiresAuth: true
+    }
+  },
+  {
+    name: RouteNames.error,
     path: '/:pathMatch(.*)*',
     component: () => import('@/pages/404.vue'),
     meta: {

src/features/kanban/ui/ChooseStatus.vue

@@ -87,6 +87,9 @@ const activeStatus = computed(() => {
       background-color: var(--zinc-600);
       border: 1px solid var(--zinc-600);
     }
+    .active {
+      border: 1px solid var(--zinc-300);
+    }
   }
 }
 </style>

src/features/settings/lang-switcher/ui/LanguageSwitcher.vue

@@ -1,42 +1,17 @@
 <script setup lang="ts">
+import { ref, shallowReactive } from 'vue';
+import { useLanguage } from '@/shared/lib/composables';
 import { UiSelect } from '@/shared/ui';
-import { ref, shallowReactive, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useCookies } from '@vueuse/integrations/useCookies';
 import type { Options } from '@/shared/ui/select/types';
 
-const { locale } = useI18n();
-
 const options = shallowReactive<Options[]>([
   { name: 'English', value: 'en-US' },
   { name: 'Русский', value: 'ru-RU' },
   { name: '简体中文', value: 'zh-CN' }
 ]);
-
-const cookies = useCookies();
-
 const language = ref('');
 
-// TODO: think to way of computed property intead
-watch(
-  () => locale.value,
-  () => {
-    const selectedOptionByValue = options.find((option) => option.value === locale.value);
-    selectedOptionByValue ? (language.value = selectedOptionByValue.name) : '';
-
-    watch(
-      () => language.value,
-      (name) => {
-        const selectedOptionByName = options.find((option) => option.name === name);
-        if (selectedOptionByName) {
-          locale.value = selectedOptionByName.value;
-          cookies.set('i18n', selectedOptionByName.value);
-        }
-      }
-    );
-  },
-  { immediate: true }
-);
+useLanguage(options, language);
 </script>
 
 <template>

src/pages/Home.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { HeaderWelcome } from '@/widgets/layout';
+</script>
+
+<template>
+ <HeaderWelcome />
+</template>

src/shared/config/consts.ts

@@ -7,5 +7,6 @@ export enum RouteNames {
   members = 'members',
   templates = 'templates',
   favorites = 'favorites',
+  welcome = 'welcome',
   error = 'error'
 }

src/shared/lib/composables/index.ts

@@ -0,0 +1 @@
+export * from './useLanguage';

src/shared/lib/composables/useLanguage.ts

@@ -0,0 +1,40 @@
+import { effectScope, onUnmounted, watch } from 'vue';
+import type { Ref } from 'vue';
+import type { Options } from '@/shared/ui/select/types';
+import { useCookies } from '@vueuse/integrations/useCookies';
+import { useI18n } from 'vue-i18n';
+
+export function useLanguage(options: Options[], language: Ref<string>) {
+  const scope = effectScope();
+
+  const cookies = useCookies();
+  const { locale } = useI18n();
+
+  scope.run(() => {
+    // TODO: think to way of computed property instead
+    // So anyway the problem in nested watchers is solved, issue #11
+    watch(
+      () => locale.value,
+      (newLocale) => {
+        const selectedOption = options.find((option) => option.value === newLocale);
+        if (selectedOption) {
+          language.value = selectedOption.name;
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => language.value,
+      (newLanguage) => {
+        const selectedOption = options.find((option) => option.name === newLanguage);
+        if (selectedOption) {
+          locale.value = selectedOption.value;
+          cookies.set('i18n', selectedOption.value);
+        }
+      }
+    );
+  });
+  onUnmounted(() => {
+    scope.stop();
+  });
+}

src/shared/lib/i18n/locales/en-US.ts

@@ -177,5 +177,12 @@ export default {
       clear: 'Clear the board',
       update: 'Apply changes'
     }
+  },
+  welcome: {
+    header: {
+      links: ['About', 'Kanban', 'Members', 'Collaborative', 'Chats', 'Plans'],
+      login: 'Log In',
+      reg: 'Get started'
+    }
   }
 };

src/shared/lib/i18n/locales/ru-RU.ts

@@ -182,5 +182,12 @@ export default {
       clear: 'Очистить доску',
       update: 'Применить изменения'
     }
+  },
+  welcome: {
+    header: {
+      links: ['О нас', 'Канбан', 'Участники', 'Совместная работа', 'Чаты', 'Планы'],
+      login: 'Войти',
+      reg: 'Зарегистрироваться'
+    }
   }
 };

src/shared/lib/i18n/locales/zh-CN.ts

@@ -176,5 +176,12 @@ export default {
       clear: '清空看板',
       update: '应用更改'
     }
+  },
+  welcome: {
+    header: {
+      links: ['关于我们', '看板', '成员', '协作', '聊天', '计划'],
+      login: '登录',
+      reg: '注册'
+    }
   }
 };

src/shared/ui/button/UiButton.vue

@@ -152,7 +152,7 @@ withDefaults(
     color: var(--zinc-100);
 
     @include on-hover {
-      background-color: var(--zinc-700);
+      background-color: rgba(var(--zinc-rgb-600), 0.4);
     }
   }
 

src/shared/ui/dropdown/UiDropdown.vue

@@ -30,7 +30,7 @@ defineSlots<{
     </div>
     <Transition name="dropdown">
       <div v-if="isOpen" :class="$style.inside">
-        <div :class="$style.header">
+        <div v-if="$slots.header" :class="$style.header">
           <slot name="header" />
         </div>
         <div :class="$style.content" @click="onDropdownContent">