From c9613ad88c9685871cb00c723c9de119b969dab8 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Sat, 28 Dec 2024 23:31:21 +0300
Subject: [PATCH 1/7] feat: add bundle analyzer

---
 core/client/package.json   |  2 ++
 core/client/vite.config.ts |  6 ++++++
 pnpm-lock.yaml             | 12 ++++++++++++
 3 files changed, 20 insertions(+)

diff --git a/core/client/package.json b/core/client/package.json
index 137a8a96..a6bfed18 100644
--- a/core/client/package.json
+++ b/core/client/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview",
     "test:unit": "vitest",
     "build-only": "vite build",
+    "debug:build": "NODE_OPTIONS='--inspect-brk' pnpm run build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --fix",
     "stylelint": "npx stylelint **/*.scss --fix",
@@ -84,6 +85,7 @@
     "lint-staged": "^15.2.7",
     "npm-run-all2": "^6.2.0",
     "prettier": "^3.2.5",
+    "sonda": "0.7.0",
     "storybook": "^8.1.10",
     "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0",
diff --git a/core/client/vite.config.ts b/core/client/vite.config.ts
index 8b04a399..917d0341 100644
--- a/core/client/vite.config.ts
+++ b/core/client/vite.config.ts
@@ -6,6 +6,7 @@ import UnpluginVueRouterExtend from 'unplugin-vue-router-extend/vite'
 import UnpluginVueRouter from 'unplugin-vue-router/vite'
 import { defineConfig } from 'vite'
 import vueDevTools from 'vite-plugin-vue-devtools'
+// import Sonda from 'sonda/vite'
 import type { TreeNode } from 'unplugin-vue-router'
 
 const routeMap = new Map<string, TreeNode>()
@@ -27,6 +28,7 @@ export default defineConfig({
     }),
     vueDevTools(),
     UnoCSS(),
+    // Sonda(),
     vue(),
   ],
   resolve: {
@@ -34,6 +36,10 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  build: {
+    // only with sonda active
+    // sourcemap: true,
+  },
   css: {
     preprocessorOptions: {
       scss: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 243d839b..b2c2623f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -219,6 +219,9 @@ importers:
       prettier:
         specifier: ^3.2.5
         version: 3.4.1
+      sonda:
+        specifier: 0.7.0
+        version: 0.7.0
       storybook:
         specifier: ^8.1.10
         version: 8.4.6(prettier@3.4.1)
@@ -4255,6 +4258,9 @@ packages:
     resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
     engines: {node: '>=18'}
 
+  sonda@0.7.0:
+    resolution: {integrity: sha512-JKdTOWEbQGB4EbBfl77uOpG2/PHviIj8/Mum8DXVKEHZZQaO+pg/eX4TOSY3RCKSD3vmalt777Xf3JcmjG16Bg==}
+
   sortablejs@1.14.0:
     resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
 
@@ -9383,6 +9389,12 @@ snapshots:
       ansi-styles: 6.2.1
       is-fullwidth-code-point: 5.0.0
 
+  sonda@0.7.0:
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+      open: 10.1.0
+
   sortablejs@1.14.0: {}
 
   source-map-js@1.2.1: {}

From 62d362147aba3d81a361865b4575a173f52e665c Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Sun, 29 Dec 2024 22:32:10 +0300
Subject: [PATCH 2/7] feat: add workspace popover

---
 core/client/src/app/providers/router/index.ts |  6 +-
 core/client/src/entities/workspace/index.ts   |  1 +
 .../src/entities/workspace/model/index.ts     |  1 +
 .../workspace/model/workspace.store.ts        | 27 ++++++
 .../src/features/filter/ui/SearchFilter.vue   |  6 +-
 core/client/src/shared/ui/index.ts            |  1 +
 .../src/shared/ui/popover/UiPopover.vue       | 15 +++
 .../shared/ui/popover/UiPopoverContent.vue    | 48 ++++++++++
 .../shared/ui/popover/UiPopoverTrigger.vue    | 11 +++
 core/client/src/shared/ui/popover/index.ts    |  4 +
 .../src/widgets/dialogs/ui/HotkeysDialog.vue  | 14 +--
 .../src/widgets/dialogs/ui/ShareDialog.vue    | 14 +--
 .../widgets/layout/header/ui/HeaderMain.vue   | 12 ++-
 .../widgets/layout/sidebar/ui/InfoMenu.vue    |  7 +-
 .../layout/sidebar/ui/IntegrationItems.vue    |  4 +-
 .../layout/sidebar/ui/ProjectsList.vue        |  4 +-
 .../widgets/layout/sidebar/ui/WorkSpace.vue   |  2 +-
 .../layout/sidebar/ui/WorkSpaceChooser.vue    | 13 ++-
 .../__snapshots__/WorkSpace.spec.ts.snap      |  2 +-
 core/client/src/widgets/workspace/index.ts    |  1 +
 .../widgets/workspace/ui/WorkspaceMenu.vue    | 93 +++++++++++++++++++
 core/client/src/widgets/workspace/ui/index.ts |  1 +
 22 files changed, 252 insertions(+), 35 deletions(-)
 create mode 100644 core/client/src/entities/workspace/index.ts
 create mode 100644 core/client/src/entities/workspace/model/index.ts
 create mode 100644 core/client/src/entities/workspace/model/workspace.store.ts
 create mode 100644 core/client/src/shared/ui/popover/UiPopover.vue
 create mode 100644 core/client/src/shared/ui/popover/UiPopoverContent.vue
 create mode 100644 core/client/src/shared/ui/popover/UiPopoverTrigger.vue
 create mode 100644 core/client/src/shared/ui/popover/index.ts
 create mode 100644 core/client/src/widgets/workspace/index.ts
 create mode 100644 core/client/src/widgets/workspace/ui/WorkspaceMenu.vue
 create mode 100644 core/client/src/widgets/workspace/ui/index.ts

diff --git a/core/client/src/app/providers/router/index.ts b/core/client/src/app/providers/router/index.ts
index 94f1fe4d..6798d93b 100644
--- a/core/client/src/app/providers/router/index.ts
+++ b/core/client/src/app/providers/router/index.ts
@@ -10,9 +10,9 @@ export const router = createRouter({
 
 router.beforeEach((to, from) => {
   // Needs to add guard auth logic in router
-  if (to.meta.requiresAuth === true) {
-    return router.push({ name: 'sign-in' })
-  }
+  // if (to.meta.requiresAuth === true) {
+  //   return router.push({ name: 'sign-in' })
+  // }
 })
 
 router.beforeEach(layoutResolverMiddleware)
diff --git a/core/client/src/entities/workspace/index.ts b/core/client/src/entities/workspace/index.ts
new file mode 100644
index 00000000..116e6686
--- /dev/null
+++ b/core/client/src/entities/workspace/index.ts
@@ -0,0 +1 @@
+export * from './model'
diff --git a/core/client/src/entities/workspace/model/index.ts b/core/client/src/entities/workspace/model/index.ts
new file mode 100644
index 00000000..5f9ee99b
--- /dev/null
+++ b/core/client/src/entities/workspace/model/index.ts
@@ -0,0 +1 @@
+export * from './workspace.store'
diff --git a/core/client/src/entities/workspace/model/workspace.store.ts b/core/client/src/entities/workspace/model/workspace.store.ts
new file mode 100644
index 00000000..27aa80ce
--- /dev/null
+++ b/core/client/src/entities/workspace/model/workspace.store.ts
@@ -0,0 +1,27 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { User } from '@/entities/user'
+
+interface BaseTestWorkspace {
+  _id: string
+  name: string
+  img: string | Blob
+  link: string
+  status: 'active' | 'archive'
+  members: User[]
+}
+
+export const useWorkspaceStore = defineStore('workspace', () => {
+  const workspace = ref({
+    _id: '0',
+    name: 'Example.io',
+    img: 'https://avatars.githubusercontent.com/u/185750893?s=100&v=4',
+    link: 'https://jenda-app-mnenie.com/example.io',
+    status: 'active',
+    members: [],
+  } as BaseTestWorkspace)
+
+  return {
+    workspace,
+  }
+})
diff --git a/core/client/src/features/filter/ui/SearchFilter.vue b/core/client/src/features/filter/ui/SearchFilter.vue
index a80daff5..a3e7da7f 100644
--- a/core/client/src/features/filter/ui/SearchFilter.vue
+++ b/core/client/src/features/filter/ui/SearchFilter.vue
@@ -46,11 +46,11 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     >
       <div
         i-lucide-search
-        class="text-neutral-800 dark:text-neutral-200 !w-16px !h-16px 2xl:(!w-4 !h-4)"
+        class="text-neutral-800 dark:text-neutral-200 2xl:(!w-4 !h-4)"
         :class="[
           isExpanded
-            ? 'mr-1'
-            : 'absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 h-4 w-4',
+            ? 'mr-1 !w-15px !h-15px'
+            : 'absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 !h-16px !w-16px',
         ]"
       />
       <span
diff --git a/core/client/src/shared/ui/index.ts b/core/client/src/shared/ui/index.ts
index 039d75c8..1de70ec3 100644
--- a/core/client/src/shared/ui/index.ts
+++ b/core/client/src/shared/ui/index.ts
@@ -8,5 +8,6 @@ export * from './dropdown-menu'
 export * from './form'
 export * from './input'
 export * from './pin-input'
+export * from './popover'
 export * from './select'
 export * from './shimmer-button'
diff --git a/core/client/src/shared/ui/popover/UiPopover.vue b/core/client/src/shared/ui/popover/UiPopover.vue
new file mode 100644
index 00000000..1a5873a3
--- /dev/null
+++ b/core/client/src/shared/ui/popover/UiPopover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/core/client/src/shared/ui/popover/UiPopoverContent.vue b/core/client/src/shared/ui/popover/UiPopoverContent.vue
new file mode 100644
index 00000000..3f52e161
--- /dev/null
+++ b/core/client/src/shared/ui/popover/UiPopoverContent.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border border-neutral-200 bg-white p-2 px-3 text-neutral-950 shadow outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:(border-neutral-700 bg-neutral-800 text-neutral-50)',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/core/client/src/shared/ui/popover/UiPopoverTrigger.vue b/core/client/src/shared/ui/popover/UiPopoverTrigger.vue
new file mode 100644
index 00000000..22f4772a
--- /dev/null
+++ b/core/client/src/shared/ui/popover/UiPopoverTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/core/client/src/shared/ui/popover/index.ts b/core/client/src/shared/ui/popover/index.ts
new file mode 100644
index 00000000..c9459bf9
--- /dev/null
+++ b/core/client/src/shared/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as UiPopover } from './UiPopover.vue'
+export { default as UiPopoverContent } from './UiPopoverContent.vue'
+export { default as UiPopoverTrigger } from './UiPopoverTrigger.vue'
+export { PopoverAnchor } from 'radix-vue'
diff --git a/core/client/src/widgets/dialogs/ui/HotkeysDialog.vue b/core/client/src/widgets/dialogs/ui/HotkeysDialog.vue
index f69a619b..45ced5ce 100644
--- a/core/client/src/widgets/dialogs/ui/HotkeysDialog.vue
+++ b/core/client/src/widgets/dialogs/ui/HotkeysDialog.vue
@@ -20,16 +20,18 @@ const badges = [
   { system: 'cmd/ctrl', key: 'X' },
 ] as const
 
+const model = defineModel<boolean>('open')
+
 const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
 </script>
 
 <template>
   <DefineTemplate v-slot="{ data }">
-    <UiBadge variant="secondary" class="px-1.5 py-0.5 flex items-center justify-center text-xs">
+    <UiBadge variant="secondary" class="px-1.5 py-0.5 flex items-center justify-center text-sm 2xl:text-xs">
       {{ data }}
     </UiBadge>
   </DefineTemplate>
-  <UiDialog v-bind="$attrs">
+  <UiDialog v-bind="$attrs" v-model:open="model">
     <UiDialogTrigger as-child>
       <slot />
     </UiDialogTrigger>
@@ -38,9 +40,9 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
         <UiDialogTitle>{{ $t('dialogs.hotkeys.title') }}</UiDialogTitle>
       </UiDialogHeader>
       <UiAlert variant="warning" class="mb-2">
-        <I18nT keypath="dialogs.hotkeys.alert" tag="span" class="text-sm">
+        <I18nT keypath="dialogs.hotkeys.alert" tag="span" class="text-13px 2xl:text-sm">
           <template #badge>
-            <UiBadge variant="outline" class="px-1.5 py-0 text-xs">
+            <UiBadge variant="outline" class="px-1.5 py-0 text-sm 2xl:text-xs">
               cmd/ctrl
             </UiBadge>
           </template>
@@ -49,9 +51,9 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
       <div class="flex flex-col items-start space-y-3">
         <div v-for="badge, idx in badges" :key="idx" class="flex items-center space-x-1">
           <ReuseTemplate :data="badge.system" />
-          <span class="text-sm">+</span>
+          <span class="text-13px 2xl:text-sm">+</span>
           <ReuseTemplate :data="badge.key" />
-          <span class="text-sm">- {{ $t('dialogs.hotkeys.badges', idx) }}</span>
+          <span class="text-13px 2xl:text-sm">- {{ $t('dialogs.hotkeys.badges', idx) }}</span>
         </div>
       </div>
     </UiDialogContent>
diff --git a/core/client/src/widgets/dialogs/ui/ShareDialog.vue b/core/client/src/widgets/dialogs/ui/ShareDialog.vue
index 4e8147a0..8d8ae64f 100644
--- a/core/client/src/widgets/dialogs/ui/ShareDialog.vue
+++ b/core/client/src/widgets/dialogs/ui/ShareDialog.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ShareLink } from '@/features/share'
 import {
-  ShimmerButton,
   UiButton,
   UiDialog,
   UiDialogClose,
@@ -12,19 +11,14 @@ import {
   UiDialogTitle,
   UiDialogTrigger,
 } from '@/shared/ui'
+
+const model = defineModel<boolean>('open')
 </script>
 
 <template>
-  <UiDialog>
+  <UiDialog v-model:open="model">
     <UiDialogTrigger as-child>
-      <ShimmerButton shimmer-size="2px">
-        <div i-hugeicons-link-04 class="text-neutral-900 dark:text-neutral-100 w-16px h-16px 2xl:(w-4 h-4)" />
-        <span
-          class="whitespace-pre-wrap text-center text-neutral-800 dark:text-neutral-100 text-sm fw500"
-        >
-          {{ $t('header.share') }}
-        </span>
-      </ShimmerButton>
+      <slot />
     </UiDialogTrigger>
     <UiDialogContent class="sm:max-w-md">
       <UiDialogHeader>
diff --git a/core/client/src/widgets/layout/header/ui/HeaderMain.vue b/core/client/src/widgets/layout/header/ui/HeaderMain.vue
index 28fde523..3e8290c6 100644
--- a/core/client/src/widgets/layout/header/ui/HeaderMain.vue
+++ b/core/client/src/widgets/layout/header/ui/HeaderMain.vue
@@ -8,6 +8,7 @@ import { type User, UserAvatar } from '@/entities/user'
 import { useLayoutPaths } from '@/shared/composables'
 import { links } from '@/shared/constants'
 import { HotkeysDialog, ShareDialog } from '@/widgets/dialogs'
+import { ShimmerButton } from '@/shared/ui'
 
 const props = defineProps<{
   projects: Board[]
@@ -101,7 +102,16 @@ const { active } = useLayoutPaths(links, _projects)
           </UserAvatar>
         </template>
       </div>
-      <ShareDialog />
+      <ShareDialog>
+        <ShimmerButton shimmer-size="2px">
+          <div i-hugeicons-link-04 class="text-neutral-900 dark:text-neutral-100 w-16px h-16px 2xl:(w-4 h-4)" />
+          <span
+            class="whitespace-pre-wrap text-center text-neutral-800 dark:text-neutral-100 text-sm fw500"
+          >
+            {{ $t('header.share') }}
+          </span>
+        </ShimmerButton>
+      </ShareDialog>
       <div
         v-tooltip="{ content: $t('header.navigator.messages'), trigger: ['hover'], distance: 7 }"
         i-hugeicons-message-multiple-01
diff --git a/core/client/src/widgets/layout/sidebar/ui/InfoMenu.vue b/core/client/src/widgets/layout/sidebar/ui/InfoMenu.vue
index f432e019..1c9c7d0f 100644
--- a/core/client/src/widgets/layout/sidebar/ui/InfoMenu.vue
+++ b/core/client/src/widgets/layout/sidebar/ui/InfoMenu.vue
@@ -35,12 +35,17 @@ const [DifineTemplate, ReuseTemplate] = createReusableTemplate()
   <UiDropdownMenu direction="right">
     <UiDropdownMenuTrigger as-child>
       <UiButton
+        v-tooltip.right="{
+          content: $t(`sidebar.help.title'`),
+          triggers: ['hover'],
+          disabled: isExpanded,
+        }"
         variant="ghost"
         class="w-full gap-2 shadow-none py-0 px-2 transition-all duration-200 ease justify-between mb-1"
         :class="[isExpanded ? 'justify-between' : 'justify-center p-0']"
       >
         <div class="flex items-center gap-2">
-          <div i-hugeicons-mortarboard-02 class="!w-16px !h-16px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-300" />
+          <div i-hugeicons-mortarboard-02 class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-300" />
           <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">
             {{ $t('sidebar.help.title') }}
           </span>
diff --git a/core/client/src/widgets/layout/sidebar/ui/IntegrationItems.vue b/core/client/src/widgets/layout/sidebar/ui/IntegrationItems.vue
index 3dd4b896..a0197e6f 100644
--- a/core/client/src/widgets/layout/sidebar/ui/IntegrationItems.vue
+++ b/core/client/src/widgets/layout/sidebar/ui/IntegrationItems.vue
@@ -22,7 +22,7 @@ const { isExpanded } = expanded.getExpanded()
     :class="[isExpanded ? 'px-2' : 'px-1']"
   >
     <p
-      class="text-neutral-500 dark:text-neutral-400 text-xs capitalize text-ellipsis
+      class="text-neutral-500 dark:text-neutral-400 text-sm 2xl:text-xs capitalize text-ellipsis
         whitespace-nowrap overflow-hidden"
     >
       {{ $t('sidebar.integrations') }}
@@ -43,7 +43,7 @@ const { isExpanded } = expanded.getExpanded()
         <Icon
           :inline="true"
           :icon="icon"
-          class="!w-16px !h-16px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-200"
+          class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-200"
           :class="[idx === 2 && '!w-3.6 !h-3.6 !text-#fc4714']"
         />
         <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">{{ name }}</span>
diff --git a/core/client/src/widgets/layout/sidebar/ui/ProjectsList.vue b/core/client/src/widgets/layout/sidebar/ui/ProjectsList.vue
index ffefb3e2..fc0e9cbf 100644
--- a/core/client/src/widgets/layout/sidebar/ui/ProjectsList.vue
+++ b/core/client/src/widgets/layout/sidebar/ui/ProjectsList.vue
@@ -50,7 +50,7 @@ function changeShowList() {
         @click="changeShowList"
       />
       <p
-        class="text-neutral-500 dark:text-neutral-400 text-xs capitalize text-ellipsis whitespace-nowrap overflow-hidden"
+        class="text-neutral-500 dark:text-neutral-400 text-sm 2xl:text-xs capitalize text-ellipsis whitespace-nowrap overflow-hidden"
       >
         {{ $t('sidebar.projects') }}
       </p>
@@ -84,7 +84,7 @@ function changeShowList() {
       >
         <div
           i-jenda-custom-project
-          class="w-17px h-17px rounded flex justify-center items-center"
+          class="w-16px h-16px rounded flex justify-center items-center"
           :style="{ color: project.color }"
         />
         <span
diff --git a/core/client/src/widgets/layout/sidebar/ui/WorkSpace.vue b/core/client/src/widgets/layout/sidebar/ui/WorkSpace.vue
index d0638979..4afcce25 100644
--- a/core/client/src/widgets/layout/sidebar/ui/WorkSpace.vue
+++ b/core/client/src/widgets/layout/sidebar/ui/WorkSpace.vue
@@ -58,7 +58,7 @@ const contentPosition = computed(() => {
         :style="{ padding: !isExpanded ? '0px' : '', justifyContent: contentPosition }"
       >
         <div class="flex items-center gap-2">
-          <Icon :icon="link.icon" class="!w-16px !h-16px 2xl:(!w-4 !h-4) text-neutral-900 dark:text-neutral-200" />
+          <Icon :icon="link.icon" class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-900 dark:text-neutral-200" />
           <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">{{ $t(`sidebar.${link.name}`) }}</span>
         </div>
         <UiBadge v-if="link.id === 1 && isExpanded" variant="solid" class="px-5px py-0 text-xs rounded-md">
diff --git a/core/client/src/widgets/layout/sidebar/ui/WorkSpaceChooser.vue b/core/client/src/widgets/layout/sidebar/ui/WorkSpaceChooser.vue
index d9e6249e..d41d60ee 100644
--- a/core/client/src/widgets/layout/sidebar/ui/WorkSpaceChooser.vue
+++ b/core/client/src/widgets/layout/sidebar/ui/WorkSpaceChooser.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useExpanded } from '@/shared/composables'
 import { UiBadge } from '@/shared/ui'
+import { WorkspaceMenu } from '@/widgets/workspace'
 
 const expandedComposable = useExpanded()
 
@@ -20,11 +21,13 @@ const { isExpanded, onToggleArea } = expandedComposable.getExpanded()
         v-show="isExpanded"
         class="flex items-center gap-px"
       >
-        <div
-          class="w-36px h-36px h-full bg-neutral-100 border border-solid border-neutral-200 rounded-lg flex items-center justify-center mr-1.5 cursor-pointer"
-        >
-          <img src="https://avatars.githubusercontent.com/u/185750893?s=100&v=4" class="object-cover w-full rounded-lg" />
-        </div>
+        <WorkspaceMenu>
+          <div
+            class="w-36px h-36px h-full bg-neutral-100 border border-solid border-neutral-200 rounded-lg flex items-center justify-center mr-1.5 cursor-pointer"
+          >
+            <img src="https://avatars.githubusercontent.com/u/185750893?s=100&v=4" class="object-cover w-full rounded-lg" />
+          </div>
+        </WorkspaceMenu>
         <div class="flex flex-col mt-1">
           <div class="flex items-center gap-1 whitespace-nowrap">
             <UiBadge variant="outline" class="px-1 py-1 h-12px text-8px rounded">
diff --git a/core/client/src/widgets/layout/sidebar/ui/__tests__/__snapshots__/WorkSpace.spec.ts.snap b/core/client/src/widgets/layout/sidebar/ui/__tests__/__snapshots__/WorkSpace.spec.ts.snap
index c50a0253..34e2bfbd 100644
--- a/core/client/src/widgets/layout/sidebar/ui/__tests__/__snapshots__/WorkSpace.spec.ts.snap
+++ b/core/client/src/widgets/layout/sidebar/ui/__tests__/__snapshots__/WorkSpace.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`tests for WorkSpace.vue > should be render correctly 1`] = `
 "<div class="flex flex-col gap-5px justify-start mb-20px"><a class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"><button class="btn btn-secondary h-34px w-full gap-2 shadow-none py-0 px-2 transition-all duration-200 ease !bg-neutral-200/40 dark:!bg-neutral-700/50" style="justify-content: space-between;">
       <!--v-if-->
-      <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="!w-16px !h-16px !2xl:w-4 !2xl:h-4 text-neutral-900 dark:text-neutral-200" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">Boards</span></div>
+      <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="!w-15px !h-15px !2xl:w-4 !2xl:h-4 text-neutral-900 dark:text-neutral-200" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">Boards</span></div>
       <!--v-if-->
     </button></a></div>"
 `;
diff --git a/core/client/src/widgets/workspace/index.ts b/core/client/src/widgets/workspace/index.ts
new file mode 100644
index 00000000..ed584959
--- /dev/null
+++ b/core/client/src/widgets/workspace/index.ts
@@ -0,0 +1 @@
+export * from './ui'
diff --git a/core/client/src/widgets/workspace/ui/WorkspaceMenu.vue b/core/client/src/widgets/workspace/ui/WorkspaceMenu.vue
new file mode 100644
index 00000000..3ba41a4b
--- /dev/null
+++ b/core/client/src/widgets/workspace/ui/WorkspaceMenu.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { createReusableTemplate } from '@vueuse/core'
+import {
+  UiBadge,
+  UiButton,
+  UiPopover,
+  UiPopoverContent,
+  UiPopoverTrigger,
+} from '@/shared/ui'
+import { ShareDialog } from '@/widgets/dialogs'
+import { useWorkspaceStore } from '@/entities/workspace'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const isDialogOpen = ref<boolean>(false)
+const isPopoverOpen = ref<boolean>(false)
+
+const workspaceStore = useWorkspaceStore()
+const { workspace } = storeToRefs(workspaceStore)
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ icon, data, isSettings }">
+    <UiButton
+      size="sm"
+      variant="ghost"
+      :class="
+        cn('w-full justify-start px-2 focus:ring-0', isSettings && 'mt-2')"
+      @click="isPopoverOpen = false"
+    >
+      <span v-if="!isSettings" :class="cn(icon, 'w-4 h-4 text-neutral-700 dark:text-neutral-300')" />
+      <div
+        v-else
+        class="w-4 h-4 bg-neutral-100 border border-solid border-neutral-200 rounded-full flex items-center justify-center cursor-pointer"
+      >
+        <img :src="workspace.img as string" class="object-cover w-full rounded-lg" />
+      </div>
+      <p class="text-neutral-700 dark:text-neutral-300">
+        {{ data }}
+      </p>
+    </UiButton>
+  </DefineTemplate>
+  <UiPopover v-bind="$attrs" v-model:open="isPopoverOpen" :modal="false">
+    <UiPopoverTrigger as-child>
+      <slot />
+    </UiPopoverTrigger>
+    <UiPopoverContent side="bottom" align="start" class="px-1">
+      <div class="relative w-full h-full">
+        <div class="flex items-center justify-between gap-1 mb-6 px-2">
+          <div class="flex flex-col gap-0.5 mt-1">
+            <p class="text-base !fw600 dark:text-neutral-100">
+              {{ workspace.name }}
+            </p>
+            <div class="flex items-center gap-0.5">
+              <UiBadge variant="secondary" class="shadow-none px-1 py-0 text-8px">
+                FREE
+              </UiBadge>
+              <UiBadge variant="secondary" class="shadow-none px-1 py-0 text-8px">
+                <span class="text-blue-500 dark:text-blue-400">{{ workspace.status }}</span>
+              </UiBadge>
+              <span class="text-11px mx-1 2xl:text-xs text-neutral-500 dark:text-neutral-400">
+                •
+              </span>
+              <p class="text-11px 2xl:text-xs text-neutral-500 dark:text-neutral-400">
+                {{ workspace.members.length }} участников
+              </p>
+            </div>
+          </div>
+          <div class="flex items-center gap-1.5">
+            <span i-lucide-check class="w-5 h-5 text-blue-500 dark:text-blue-400" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-1">
+          <p class="px-2 text-xs text-neutral-700 dark:text-neutral-300 mb-1">
+            Управление
+          </p>
+          <ReuseTemplate data="Тарифы и оплата" icon="i-lucide-credit-card" @click="$router.push({ name: 'welcome' })" />
+          <ReuseTemplate data="Пригласить в проект" icon="i-hugeicons-link-04" @click="isDialogOpen = true" />
+          <ReuseTemplate data="Команда" icon="i-hugeicons-user-group" @click="$router.push({ name: 'members' })" />
+          <ReuseTemplate :is-settings="true" data="Поменять информацию" @click="$router.push({ name: 'settings' })" />
+        </div>
+      </div>
+    </UiPopoverContent>
+  </UiPopover>
+  <ShareDialog v-model:open="isDialogOpen" />
+</template>
diff --git a/core/client/src/widgets/workspace/ui/index.ts b/core/client/src/widgets/workspace/ui/index.ts
new file mode 100644
index 00000000..dc5cf3e2
--- /dev/null
+++ b/core/client/src/widgets/workspace/ui/index.ts
@@ -0,0 +1 @@
+export { default as WorkspaceMenu } from './WorkspaceMenu.vue'

From c6de7fa5fdc6c8f30e944739da00e76e5b48f155 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Sun, 29 Dec 2024 23:43:46 +0300
Subject: [PATCH 3/7] feat: add i18n to popover and custom plural rules

---
 .../workspace/model/workspace.store.ts        |  2 ++
 core/client/src/shared/libs/i18n/index.ts     | 22 ++++++++++---------
 .../src/shared/libs/i18n/locales/en-US.ts     | 10 +++++++++
 .../src/shared/libs/i18n/locales/index.ts     |  3 +++
 .../src/shared/libs/i18n/locales/ru-RU.ts     | 12 ++++++++++
 .../src/shared/libs/i18n/locales/zh-CN.ts     | 10 +++++++++
 core/client/src/shared/libs/i18n/plurals.ts   | 14 ++++++++++++
 .../shared/libs/vee-validate/rules/index.ts   |  3 +++
 .../layout/sidebar/ui/WorkSpaceChooser.vue    |  9 ++++++--
 .../widgets/workspace/ui/WorkspaceMenu.vue    | 22 ++++++++++---------
 10 files changed, 85 insertions(+), 22 deletions(-)
 create mode 100644 core/client/src/shared/libs/i18n/locales/index.ts
 create mode 100644 core/client/src/shared/libs/i18n/plurals.ts
 create mode 100644 core/client/src/shared/libs/vee-validate/rules/index.ts

diff --git a/core/client/src/entities/workspace/model/workspace.store.ts b/core/client/src/entities/workspace/model/workspace.store.ts
index 27aa80ce..2d5a5209 100644
--- a/core/client/src/entities/workspace/model/workspace.store.ts
+++ b/core/client/src/entities/workspace/model/workspace.store.ts
@@ -9,6 +9,7 @@ interface BaseTestWorkspace {
   link: string
   status: 'active' | 'archive'
   members: User[]
+  plan: 'FREE' | 'PREMIUM'
 }
 
 export const useWorkspaceStore = defineStore('workspace', () => {
@@ -19,6 +20,7 @@ export const useWorkspaceStore = defineStore('workspace', () => {
     link: 'https://jenda-app-mnenie.com/example.io',
     status: 'active',
     members: [],
+    plan: 'FREE',
   } as BaseTestWorkspace)
 
   return {
diff --git a/core/client/src/shared/libs/i18n/index.ts b/core/client/src/shared/libs/i18n/index.ts
index 3a9d4df6..50d6465b 100644
--- a/core/client/src/shared/libs/i18n/index.ts
+++ b/core/client/src/shared/libs/i18n/index.ts
@@ -1,12 +1,8 @@
 import { computed } from 'vue'
 import { createI18n } from 'vue-i18n'
-
-import en from '../vee-validate/rules/en'
-import ru from '../vee-validate/rules/ru'
-import zh from '../vee-validate/rules/zh'
-import enLocale from './locales/en-US'
-import ruLocale from './locales/ru-RU'
-import zhLocale from './locales/zh-CN'
+import { enZod, ruZod, zhZod } from '../vee-validate/rules'
+import { enLocale, ruLocale, zhLocale } from './locales'
+import { customPluralRule } from './plurals'
 
 export type MessageSchema = typeof enLocale
 
@@ -14,19 +10,19 @@ const messages = {
   'en-US': {
     ...enLocale,
     errors: {
-      ...en,
+      ...enZod,
     },
   },
   'ru-RU': {
     ...ruLocale,
     errors: {
-      ...ru,
+      ...ruZod,
     },
   },
   'zh-CN': {
     ...zhLocale,
     errors: {
-      ...zh,
+      ...zhZod,
     },
   },
 }
@@ -46,6 +42,12 @@ const i18n = createI18n<[MessageSchema], 'en-US' | 'ru-RU' | 'zh-CN'>({
   legacy: false,
   locale: getCurrentLocale.value,
   globalInjection: true,
+  pluralRules: {
+    'ru-RU': {
+      // @ts-expect-error i18n shema
+      customPluralRule,
+    },
+  },
   messages,
 })
 
diff --git a/core/client/src/shared/libs/i18n/locales/en-US.ts b/core/client/src/shared/libs/i18n/locales/en-US.ts
index 4d7e2785..f7fa48f3 100644
--- a/core/client/src/shared/libs/i18n/locales/en-US.ts
+++ b/core/client/src/shared/libs/i18n/locales/en-US.ts
@@ -444,4 +444,14 @@ export default {
     name: 'Name',
     url: 'URL handle',
   },
+  workspace: {
+    popover: {
+      members: '{n} members',
+      section: 'Management',
+      pay: 'Plans and Billing',
+      invite: 'Invite to Project',
+      team: 'Team',
+      settings: 'Change Information',
+    },
+  },
 }
diff --git a/core/client/src/shared/libs/i18n/locales/index.ts b/core/client/src/shared/libs/i18n/locales/index.ts
new file mode 100644
index 00000000..7dc8bfe2
--- /dev/null
+++ b/core/client/src/shared/libs/i18n/locales/index.ts
@@ -0,0 +1,3 @@
+export { default as enLocale } from './en-US'
+export { default as ruLocale } from './ru-RU'
+export { default as zhLocale } from './zh-CN'
diff --git a/core/client/src/shared/libs/i18n/locales/ru-RU.ts b/core/client/src/shared/libs/i18n/locales/ru-RU.ts
index 49851264..99dc76cb 100644
--- a/core/client/src/shared/libs/i18n/locales/ru-RU.ts
+++ b/core/client/src/shared/libs/i18n/locales/ru-RU.ts
@@ -445,4 +445,16 @@ export default {
     name: 'Название',
     url: 'Удобная ссылка',
   },
+  workspace: {
+    popover: {
+      members: '{n} участников | {n} участник | {n} участника',
+      section: 'Управление',
+      pay: 'Тарифы и оплата',
+      invite: 'Пригласить в проект',
+      team: 'Команда',
+      settings: 'Поменять информацию',
+      active: 'Активно',
+      archive: 'В архиве',
+    },
+  },
 }
diff --git a/core/client/src/shared/libs/i18n/locales/zh-CN.ts b/core/client/src/shared/libs/i18n/locales/zh-CN.ts
index 002d733d..990392a9 100644
--- a/core/client/src/shared/libs/i18n/locales/zh-CN.ts
+++ b/core/client/src/shared/libs/i18n/locales/zh-CN.ts
@@ -417,4 +417,14 @@ export default {
     name: '名称',
     url: '自定义链接',
   },
+  workspace: {
+    popover: {
+      members: '{n} 成员',
+      section: '管理',
+      pay: '套餐与付款',
+      invite: '邀请加入项目',
+      team: '团队',
+      settings: '更改信息',
+    },
+  },
 }
diff --git a/core/client/src/shared/libs/i18n/plurals.ts b/core/client/src/shared/libs/i18n/plurals.ts
new file mode 100644
index 00000000..552febad
--- /dev/null
+++ b/core/client/src/shared/libs/i18n/plurals.ts
@@ -0,0 +1,14 @@
+export function customPluralRule<T extends number>(choice: T, choicesLength: T): number {
+  if (choice === 0) {
+    return 0
+  }
+  const teen = choice > 10 && choice < 20
+  const endsWithOne = choice % 10 === 1
+  if (!teen && endsWithOne) {
+    return 1
+  }
+  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
+    return 2
+  }
+  return choicesLength < 4 ? 2 : 3
+}
diff --git a/core/client/src/shared/libs/vee-validate/rules/index.ts b/core/client/src/shared/libs/vee-validate/rules/index.ts
new file mode 100644
index 00000000..6bc12aef
--- /dev/null
+++ b/core/client/src/shared/libs/vee-validate/rules/index.ts
@@ -0,0 +1,3 @@
+export { default as enZod } from './en'
+export { default as ruZod } from './ru'
+export { default as zhZod } from './zh'
diff --git a/core/client/src/widgets/layout/sidebar/ui/WorkSpaceChooser.vue b/core/client/src/widgets/layout/sidebar/ui/WorkSpaceChooser.vue
index d41d60ee..2622afce 100644
--- a/core/client/src/widgets/layout/sidebar/ui/WorkSpaceChooser.vue
+++ b/core/client/src/widgets/layout/sidebar/ui/WorkSpaceChooser.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useWorkspaceStore } from '@/entities/workspace'
 import { useExpanded } from '@/shared/composables'
 import { UiBadge } from '@/shared/ui'
 import { WorkspaceMenu } from '@/widgets/workspace'
@@ -6,6 +8,9 @@ import { WorkspaceMenu } from '@/widgets/workspace'
 const expandedComposable = useExpanded()
 
 const { isExpanded, onToggleArea } = expandedComposable.getExpanded()
+
+const workspaceStore = useWorkspaceStore()
+const { workspace } = storeToRefs(workspaceStore)
 </script>
 
 <template>
@@ -31,14 +36,14 @@ const { isExpanded, onToggleArea } = expandedComposable.getExpanded()
         <div class="flex flex-col mt-1">
           <div class="flex items-center gap-1 whitespace-nowrap">
             <UiBadge variant="outline" class="px-1 py-1 h-12px text-8px rounded">
-              FREE
+              {{ workspace.plan }}
             </UiBadge>
             <p class="text-xs -mt-px text-neutral-700 dark:text-neutral-300">
               {{ $t('sidebar.section') }}
             </p>
           </div>
           <p class="text-lg 2xl:text-base !fw600 dark:text-neutral-100">
-            Example.io
+            {{ workspace.name }}
           </p>
         </div>
       </div>
diff --git a/core/client/src/widgets/workspace/ui/WorkspaceMenu.vue b/core/client/src/widgets/workspace/ui/WorkspaceMenu.vue
index 3ba41a4b..180def9c 100644
--- a/core/client/src/widgets/workspace/ui/WorkspaceMenu.vue
+++ b/core/client/src/widgets/workspace/ui/WorkspaceMenu.vue
@@ -43,7 +43,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
         <img :src="workspace.img as string" class="object-cover w-full rounded-lg" />
       </div>
       <p class="text-neutral-700 dark:text-neutral-300">
-        {{ data }}
+        {{ $t(`workspace.popover.${data}`) }}
       </p>
     </UiButton>
   </DefineTemplate>
@@ -60,31 +60,33 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
             </p>
             <div class="flex items-center gap-0.5">
               <UiBadge variant="secondary" class="shadow-none px-1 py-0 text-8px">
-                FREE
+                {{ workspace.plan }}
               </UiBadge>
               <UiBadge variant="secondary" class="shadow-none px-1 py-0 text-8px">
-                <span class="text-blue-500 dark:text-blue-400">{{ workspace.status }}</span>
+                <span class="text-blue-500">
+                  {{ $t(`workspace.popover.${workspace.status}`) }}
+                </span>
               </UiBadge>
               <span class="text-11px mx-1 2xl:text-xs text-neutral-500 dark:text-neutral-400">
                 •
               </span>
               <p class="text-11px 2xl:text-xs text-neutral-500 dark:text-neutral-400">
-                {{ workspace.members.length }} участников
+                {{ $t('workspace.popover.members', workspace.members.length) }}
               </p>
             </div>
           </div>
           <div class="flex items-center gap-1.5">
-            <span i-lucide-check class="w-5 h-5 text-blue-500 dark:text-blue-400" />
+            <span i-lucide-check class="w-5 h-5 text-blue-500" />
           </div>
         </div>
         <div class="flex flex-col gap-1">
           <p class="px-2 text-xs text-neutral-700 dark:text-neutral-300 mb-1">
-            Управление
+            {{ $t('workspace.popover.section') }}
           </p>
-          <ReuseTemplate data="Тарифы и оплата" icon="i-lucide-credit-card" @click="$router.push({ name: 'welcome' })" />
-          <ReuseTemplate data="Пригласить в проект" icon="i-hugeicons-link-04" @click="isDialogOpen = true" />
-          <ReuseTemplate data="Команда" icon="i-hugeicons-user-group" @click="$router.push({ name: 'members' })" />
-          <ReuseTemplate :is-settings="true" data="Поменять информацию" @click="$router.push({ name: 'settings' })" />
+          <ReuseTemplate data="pay" icon="i-lucide-credit-card" @click="$router.push({ name: 'welcome' })" />
+          <ReuseTemplate data="invite" icon="i-hugeicons-link-04" @click="isDialogOpen = true" />
+          <ReuseTemplate data="team" icon="i-hugeicons-user-group" @click="$router.push({ name: 'members' })" />
+          <ReuseTemplate :is-settings="true" data="settings" @click="$router.push({ name: 'settings' })" />
         </div>
       </div>
     </UiPopoverContent>

From d3c7c63141ad9fc530d08266d6fbc1943ec30f33 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Mon, 30 Dec 2024 14:27:38 +0300
Subject: [PATCH 4/7] feat(popover): add tests and shortcuts

---
 .../client/src/shared/ui/__docs__/Popover.mdx | 20 ++++++++++
 core/client/src/shared/ui/_shortcuts/index.ts |  2 +
 .../src/shared/ui/_shortcuts/popover.ts       | 10 +++++
 .../shared/ui/popover/UiPopover.stories.ts    | 39 +++++++++++++++++++
 .../shared/ui/popover/UiPopoverContent.vue    |  2 +-
 .../ui/popover/__tests__/MockComponent.vue    | 21 ++++++++++
 .../ui/popover/__tests__/UiPopover.spec.ts    | 29 ++++++++++++++
 core/client/uno.config.ts                     |  1 +
 8 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 core/client/src/shared/ui/__docs__/Popover.mdx
 create mode 100644 core/client/src/shared/ui/_shortcuts/popover.ts
 create mode 100644 core/client/src/shared/ui/popover/UiPopover.stories.ts
 create mode 100644 core/client/src/shared/ui/popover/__tests__/MockComponent.vue
 create mode 100644 core/client/src/shared/ui/popover/__tests__/UiPopover.spec.ts

diff --git a/core/client/src/shared/ui/__docs__/Popover.mdx b/core/client/src/shared/ui/__docs__/Popover.mdx
new file mode 100644
index 00000000..4f484d65
--- /dev/null
+++ b/core/client/src/shared/ui/__docs__/Popover.mdx
@@ -0,0 +1,20 @@
+{/* Popover.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as PopoverStories from '../popover/UiPopover.stories';
+
+<Meta of={PopoverStories} name="Docs" />
+
+# UiPopover
+
+The **UiPopover** component displays a content in a portal to the user — such as a set of actions or functions — triggered by a button.
+
+### Components:
+
+`UiPopover`, `UiPopoverTrigger`, `UiPopoverContent`
+
+<Canvas of={PopoverStories.DefaultPopover} />
+
+### Props
+
+refs: https://www.radix-vue.com/components/popover
diff --git a/core/client/src/shared/ui/_shortcuts/index.ts b/core/client/src/shared/ui/_shortcuts/index.ts
index e094e053..1a4c4016 100644
--- a/core/client/src/shared/ui/_shortcuts/index.ts
+++ b/core/client/src/shared/ui/_shortcuts/index.ts
@@ -7,6 +7,7 @@ import { form } from './form'
 import { input } from './input'
 import { pinInput } from './pin-input'
 import { select } from './select'
+import { popover } from './popover'
 import type { Preset, StaticShortcutMap } from '@unocss/core'
 
 export const shortcuts = [
@@ -19,4 +20,5 @@ export const shortcuts = [
   ...dialog,
   ...pinInput,
   ...form,
+  ...popover,
 ] as Exclude<Preset['shortcuts'], undefined | StaticShortcutMap>
diff --git a/core/client/src/shared/ui/_shortcuts/popover.ts b/core/client/src/shared/ui/_shortcuts/popover.ts
new file mode 100644
index 00000000..11f707f4
--- /dev/null
+++ b/core/client/src/shared/ui/_shortcuts/popover.ts
@@ -0,0 +1,10 @@
+type PopoverPrefix = 'popover'
+
+export const staticPopover: Record<`${PopoverPrefix}-${string}` | PopoverPrefix, string> = {
+  'popover': '',
+  'popover-content': 'z-50 w-72 rounded-md border border-neutral-200 bg-white p-2 px-3 text-neutral-950 shadow outline-none dark:(border-neutral-700 bg-neutral-800 text-neutral-50)',
+}
+
+export const popover = [
+  staticPopover,
+]
diff --git a/core/client/src/shared/ui/popover/UiPopover.stories.ts b/core/client/src/shared/ui/popover/UiPopover.stories.ts
new file mode 100644
index 00000000..328cbdb3
--- /dev/null
+++ b/core/client/src/shared/ui/popover/UiPopover.stories.ts
@@ -0,0 +1,39 @@
+import { PopoverRoot } from 'radix-vue'
+import { UiButton } from '../button'
+import {
+  UiPopover,
+  UiPopoverContent,
+  UiPopoverTrigger,
+} from './index'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiPopover',
+  component: UiPopover,
+} as Meta<typeof UiPopover>
+
+const Template: StoryFn<typeof UiPopover> = args => ({
+  components: {
+    PopoverRoot,
+    UiPopover,
+    UiPopoverContent,
+    UiPopoverTrigger,
+    UiButton,
+  },
+  setup() {
+    return { args }
+  },
+  template: `
+  <div style="padding: 60px">
+    <PopoverRoot>
+      <UiPopoverTrigger>
+        <UiButton>Open</UiButton>
+      </UiPopover>
+      <UiPopoverContent>
+        hello
+      </UiPopoverContent>
+    </PopoverRoot>
+  </div>`,
+})
+
+export const DefaultPopover: StoryFn<typeof UiPopover> = Template.bind({})
diff --git a/core/client/src/shared/ui/popover/UiPopoverContent.vue b/core/client/src/shared/ui/popover/UiPopoverContent.vue
index 3f52e161..f2e53bc8 100644
--- a/core/client/src/shared/ui/popover/UiPopoverContent.vue
+++ b/core/client/src/shared/ui/popover/UiPopoverContent.vue
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'z-50 w-72 rounded-md border border-neutral-200 bg-white p-2 px-3 text-neutral-950 shadow outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:(border-neutral-700 bg-neutral-800 text-neutral-50)',
+          'popover-content data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         )
       "
diff --git a/core/client/src/shared/ui/popover/__tests__/MockComponent.vue b/core/client/src/shared/ui/popover/__tests__/MockComponent.vue
new file mode 100644
index 00000000..2a254820
--- /dev/null
+++ b/core/client/src/shared/ui/popover/__tests__/MockComponent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useEmitAsProps } from 'radix-vue'
+import { UiPopover, UiPopoverContent, UiPopoverTrigger } from '..'
+import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+</script>
+
+<template>
+  <UiPopover
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+  >
+    <UiPopoverTrigger>
+      Open popover
+    </UiPopoverTrigger>
+    <UiPopoverContent>
+      Some popover content
+    </UiPopoverContent>
+  </UiPopover>
+</template>
diff --git a/core/client/src/shared/ui/popover/__tests__/UiPopover.spec.ts b/core/client/src/shared/ui/popover/__tests__/UiPopover.spec.ts
new file mode 100644
index 00000000..115c20e0
--- /dev/null
+++ b/core/client/src/shared/ui/popover/__tests__/UiPopover.spec.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MockComponent from './MockComponent.vue'
+
+describe('tests for UiPopover', () => {
+  const wrapper = mount(MockComponent, {
+    props: {
+      defaultOpen: true,
+      modal: false,
+    },
+  })
+  it('should render correctly', () => {
+    expect(wrapper.html())
+  })
+
+  it('should pass props to PopoverRoot', () => {
+    const root = wrapper.findComponent({ name: 'PopoverRoot' })
+    expect(root.props('defaultOpen')).toBe(true)
+    expect(root.props('modal')).toBe(false)
+  })
+
+  it('should emit events correctly', () => {
+    wrapper.vm.$emit('openChange', true)
+    expect(wrapper.emitted('openChange')).toBeTruthy()
+    expect(wrapper.emitted('openChange')?.[0]).toEqual([true])
+  })
+})
+
+// more tests: https://github.com/unovue/radix-vue/blob/main/packages/radix-vue/src/Popover/Popover.test.ts
diff --git a/core/client/uno.config.ts b/core/client/uno.config.ts
index 8f772a94..4fac8fed 100644
--- a/core/client/uno.config.ts
+++ b/core/client/uno.config.ts
@@ -64,6 +64,7 @@ export default defineConfig({
     './src/shared/ui/_shortcuts/dialog.ts',
     './src/shared/ui/_shortcuts/pin-input.ts',
     './src/shared/ui/_shortcuts/form.ts',
+    './src/shared/ui/_shortcuts/popover.ts',
     './src/shared/ui/_shortcuts/index.ts',
   ],
   content: {

From 2221f64b8c65d19a90b366ba612e5d8bb9a73f99 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Mon, 30 Dec 2024 20:39:42 +0300
Subject: [PATCH 5/7] feat: add workspace chooser

---
 core/client/src/app/providers/router/index.ts |  6 +-
 core/client/src/entities/workspace/index.ts   |  1 +
 .../src/entities/workspace/model/index.ts     |  1 +
 .../src/entities/workspace/model/types.ts     | 13 ++++
 .../entities/workspace/ui/ChoosingButton.vue  | 30 ++++++++++
 .../client/src/entities/workspace/ui/index.ts |  1 +
 .../src/features/auth/common/ui/LogoFile.vue  |  4 +-
 .../features/auth/common/ui/PrivacyPolicy.vue |  6 +-
 .../features/auth/sign-in/ui/SignInForm.vue   |  4 ++
 .../auth/sign-in/ui/WorkspaceChanger.vue      | 59 +++++++++++++++++++
 .../src/features/auth/sign-in/ui/index.ts     |  3 +-
 .../features/auth/sign-up/ui/ConfirmForm.vue  |  4 +-
 .../features/auth/sign-up/ui/HandleLogo.vue   |  4 +-
 .../auth/sign-up/ui/WorkspaceForm.vue         |  6 +-
 core/client/src/layouts/ui/AuthLayout.vue     |  5 +-
 .../auth/{sign-in.vue => sign-in/index.vue}   |  0
 .../src/pages/auth/sign-in/workspace.vue      | 43 ++++++++++++++
 .../src/pages/auth/sign-up/workspace.vue      |  8 +--
 .../src/shared/libs/i18n/locales/en-US.ts     | 37 +++++++-----
 .../src/shared/libs/i18n/locales/ru-RU.ts     | 37 +++++++-----
 .../src/shared/libs/i18n/locales/zh-CN.ts     | 37 +++++++-----
 .../src/widgets/auth/ui/AuthContainer.vue     |  3 +-
 .../src/widgets/auth/ui/ConfirmSection.vue    |  2 -
 .../src/widgets/auth/ui/WorkspaceChoosing.vue | 27 +++++++++
 ...spaceSection.vue => WorkspaceCreating.vue} |  7 +--
 .../widgets/auth/ui/WorkspaceLogoChooser.vue  |  4 +-
 core/client/src/widgets/auth/ui/index.ts      |  5 +-
 core/client/typed-router.d.ts                 |  3 +-
 core/client/uno.config.ts                     |  2 +-
 29 files changed, 279 insertions(+), 83 deletions(-)
 create mode 100644 core/client/src/entities/workspace/model/types.ts
 create mode 100644 core/client/src/entities/workspace/ui/ChoosingButton.vue
 create mode 100644 core/client/src/entities/workspace/ui/index.ts
 create mode 100644 core/client/src/features/auth/sign-in/ui/WorkspaceChanger.vue
 rename core/client/src/pages/auth/{sign-in.vue => sign-in/index.vue} (100%)
 create mode 100644 core/client/src/pages/auth/sign-in/workspace.vue
 create mode 100644 core/client/src/widgets/auth/ui/WorkspaceChoosing.vue
 rename core/client/src/widgets/auth/ui/{WorkspaceSection.vue => WorkspaceCreating.vue} (76%)

diff --git a/core/client/src/app/providers/router/index.ts b/core/client/src/app/providers/router/index.ts
index 6798d93b..94f1fe4d 100644
--- a/core/client/src/app/providers/router/index.ts
+++ b/core/client/src/app/providers/router/index.ts
@@ -10,9 +10,9 @@ export const router = createRouter({
 
 router.beforeEach((to, from) => {
   // Needs to add guard auth logic in router
-  // if (to.meta.requiresAuth === true) {
-  //   return router.push({ name: 'sign-in' })
-  // }
+  if (to.meta.requiresAuth === true) {
+    return router.push({ name: 'sign-in' })
+  }
 })
 
 router.beforeEach(layoutResolverMiddleware)
diff --git a/core/client/src/entities/workspace/index.ts b/core/client/src/entities/workspace/index.ts
index 116e6686..551001f1 100644
--- a/core/client/src/entities/workspace/index.ts
+++ b/core/client/src/entities/workspace/index.ts
@@ -1 +1,2 @@
 export * from './model'
+export * from './ui'
diff --git a/core/client/src/entities/workspace/model/index.ts b/core/client/src/entities/workspace/model/index.ts
index 5f9ee99b..14b7db98 100644
--- a/core/client/src/entities/workspace/model/index.ts
+++ b/core/client/src/entities/workspace/model/index.ts
@@ -1 +1,2 @@
+export * from './types'
 export * from './workspace.store'
diff --git a/core/client/src/entities/workspace/model/types.ts b/core/client/src/entities/workspace/model/types.ts
new file mode 100644
index 00000000..9d0a4808
--- /dev/null
+++ b/core/client/src/entities/workspace/model/types.ts
@@ -0,0 +1,13 @@
+import type { User } from '@/entities/user'
+
+export interface BaseTestWorkspace {
+  _id: string
+  name: string
+  img: string | Blob
+  link: string
+  status: 'active' | 'archive'
+  members: User[]
+  plan: 'FREE' | 'PREMIUM'
+}
+
+export type ChoosingWorkspaceItem = Pick<BaseTestWorkspace, '_id' | 'name' | 'status' | 'plan'>
diff --git a/core/client/src/entities/workspace/ui/ChoosingButton.vue b/core/client/src/entities/workspace/ui/ChoosingButton.vue
new file mode 100644
index 00000000..2d6124ac
--- /dev/null
+++ b/core/client/src/entities/workspace/ui/ChoosingButton.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ChoosingWorkspaceItem } from '../model'
+import { UiBadge, UiButton } from '@/shared/ui'
+
+defineProps<{
+  item: ChoosingWorkspaceItem
+}>()
+
+const emit = defineEmits<{
+  (e: 'choose', id: string): void
+}>()
+</script>
+
+<template>
+  <UiButton
+    variant="dashed"
+    class="hover:(border-neutral-500 !bg-white dark:!bg-neutral-800) focus:border-neutral-500 justify-between"
+    @click.prevent="emit('choose', item._id)"
+  >
+    {{ item.name }}
+    <div class="flex items-center gap-1.5">
+      <UiBadge variant="soft" class="px-1 py-0 text-xs">
+        {{ item.plan }}
+      </UiBadge>
+      <UiBadge variant="soft" class="px-1 py-0 text-xs">
+        {{ item.status }}
+      </UiBadge>
+    </div>
+  </UiButton>
+</template>
diff --git a/core/client/src/entities/workspace/ui/index.ts b/core/client/src/entities/workspace/ui/index.ts
new file mode 100644
index 00000000..4920d1fd
--- /dev/null
+++ b/core/client/src/entities/workspace/ui/index.ts
@@ -0,0 +1 @@
+export { default as ChoosingButton } from './ChoosingButton.vue'
diff --git a/core/client/src/features/auth/common/ui/LogoFile.vue b/core/client/src/features/auth/common/ui/LogoFile.vue
index 7b10ae85..7e1afed4 100644
--- a/core/client/src/features/auth/common/ui/LogoFile.vue
+++ b/core/client/src/features/auth/common/ui/LogoFile.vue
@@ -11,7 +11,7 @@ const isDark = useDark()
 <template>
   <div
     v-if="width > 1100"
-    class="absolute top-24px left-32px flex items-center gap-1.5 cursor-pointer"
+    class="absolute z-99 top-24px left-32px flex items-center gap-1.5 cursor-pointer"
     @click="$router.push('/')"
   >
     <img
@@ -24,7 +24,7 @@ const isDark = useDark()
   </div>
   <div
     v-else
-    class="absolute left-150px top-30px flex items-center gap-1.5 cursor-pointer max-w-700px
+    class="absolute z-99 left-150px top-30px flex items-center gap-1.5 cursor-pointer max-w-700px
         max-[890px]:left-80px max-[580px]:!left-20px max-[520px]:(!left-15px !top-15px)"
   >
     <div
diff --git a/core/client/src/features/auth/common/ui/PrivacyPolicy.vue b/core/client/src/features/auth/common/ui/PrivacyPolicy.vue
index efa651f1..6275d2fa 100644
--- a/core/client/src/features/auth/common/ui/PrivacyPolicy.vue
+++ b/core/client/src/features/auth/common/ui/PrivacyPolicy.vue
@@ -11,10 +11,6 @@ const privacyItems = tm('authentication.privacy') as string[]
 const maxWidth = computed(() => {
   return locale.value === 'ru-RU' ? '400px' : '320px'
 })
-
-const privacyChangingItem = computed(() =>
-  route.name === 'sign-in' ? privacyItems[1] : privacyItems[0],
-)
 </script>
 
 <template>
@@ -22,7 +18,7 @@ const privacyChangingItem = computed(() =>
     class="pt-2.5 text-sm text-center text-neutral-500 my-0 mx-auto select-none dark:text-neutral-400"
     :style="{ maxWidth }"
   >
-    {{ privacyChangingItem }}
+    {{ privacyItems[0] }}
     <a
       href="https://github.com/mnenie/jenda"
       target="_blank"
diff --git a/core/client/src/features/auth/sign-in/ui/SignInForm.vue b/core/client/src/features/auth/sign-in/ui/SignInForm.vue
index 79629c7f..56c7f4df 100644
--- a/core/client/src/features/auth/sign-in/ui/SignInForm.vue
+++ b/core/client/src/features/auth/sign-in/ui/SignInForm.vue
@@ -3,6 +3,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { createReusableTemplate } from '@vueuse/core'
 import { useField, useForm } from 'vee-validate'
 import { toast } from 'vue-sonner'
+import { useRouter } from 'vue-router/auto'
 import {
   UiButton,
   UiFormField,
@@ -25,9 +26,12 @@ const { handleSubmit, errors } = useForm({
 const { value: email } = useField<string>('email')
 const { value: password } = useField<string | number>('password')
 
+const router = useRouter()
+
 const onLogin = handleSubmit((values) => {
   // on login event
   toast.warning('Jenda in dev mode and temporarily unavailable')
+  router.push({ name: 'sign-in-workspace' })
 })
 
 const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
diff --git a/core/client/src/features/auth/sign-in/ui/WorkspaceChanger.vue b/core/client/src/features/auth/sign-in/ui/WorkspaceChanger.vue
new file mode 100644
index 00000000..1d861767
--- /dev/null
+++ b/core/client/src/features/auth/sign-in/ui/WorkspaceChanger.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router/auto'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useField, useForm } from 'vee-validate'
+import { ChoosingButton, type ChoosingWorkspaceItem } from '@/entities/workspace'
+import { UiButton, UiFormField, UiFormLabel, UiFormMessage } from '@/shared/ui'
+import { z } from '@/shared/libs/vee-validate'
+
+defineProps<{
+  workspaces: ChoosingWorkspaceItem[]
+}>()
+
+const validationSchema = toTypedSchema(
+  z.object({
+    workspace: z.string().min(1),
+  }),
+)
+
+const { handleSubmit, errors } = useForm({
+  validationSchema,
+})
+const { value: workspace } = useField<string>('workspace')
+
+const router = useRouter()
+function handleWorkspaceChoose(id: string) {
+  // console.log(id)
+  workspace.value = id
+}
+
+const onChanger = handleSubmit((values) => {
+  router.push({ name: 'boards' })
+})
+</script>
+
+<template>
+  <form @submit.prevent="onChanger">
+    <div class="grid gap-6">
+      <UiFormField v-auto-animate class="flex flex-col gap-3">
+        <UiFormLabel
+          for="workspaces"
+        >
+          {{ $t('authentication.workspace.choosing.label') }}
+        </UiFormLabel>
+        <div class="flex flex-col gap-3 max-h-200px overflow-auto">
+          <ChoosingButton
+            v-for="w in workspaces"
+            :key="w._id"
+            :item="w"
+            @choose="handleWorkspaceChoose(w._id)"
+          />
+        </div>
+        <UiFormMessage v-if="errors.workspace" :content="errors.workspace" />
+      </UiFormField>
+      <UiButton type="submit">
+        {{ $t('authentication.workspace.route') }}
+      </UiButton>
+    </div>
+  </form>
+</template>
diff --git a/core/client/src/features/auth/sign-in/ui/index.ts b/core/client/src/features/auth/sign-in/ui/index.ts
index 48744dd8..c5b6efeb 100644
--- a/core/client/src/features/auth/sign-in/ui/index.ts
+++ b/core/client/src/features/auth/sign-in/ui/index.ts
@@ -1,3 +1,4 @@
 import SignInForm from './SignInForm.vue'
+import WorkspaceChanger from './WorkspaceChanger.vue'
 
-export { SignInForm }
+export { SignInForm, WorkspaceChanger }
diff --git a/core/client/src/features/auth/sign-up/ui/ConfirmForm.vue b/core/client/src/features/auth/sign-up/ui/ConfirmForm.vue
index 22895e44..daead415 100644
--- a/core/client/src/features/auth/sign-up/ui/ConfirmForm.vue
+++ b/core/client/src/features/auth/sign-up/ui/ConfirmForm.vue
@@ -3,7 +3,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { useField, useForm } from 'vee-validate'
 import { useRouter } from 'vue-router/auto'
 import { toast } from 'vue-sonner'
-import { z } from 'zod'
+import { z } from '@/shared/libs/vee-validate'
 import { UiButton, UiFormField, UiFormMessage, UiPinInput, UiPinInputGroup, UiPinInputInput } from '@/shared/ui'
 
 const formSchema = toTypedSchema(z.object({
@@ -22,7 +22,7 @@ const { value: pin } = useField<string[]>('pin')
 const router = useRouter()
 
 const onConfirm = handleSubmit((values) => {
-  router.push({ name: 'workspace' })
+  router.push({ name: 'sign-up-workspace' })
 })
 
 function onResend() {
diff --git a/core/client/src/features/auth/sign-up/ui/HandleLogo.vue b/core/client/src/features/auth/sign-up/ui/HandleLogo.vue
index caa31251..456b335c 100644
--- a/core/client/src/features/auth/sign-up/ui/HandleLogo.vue
+++ b/core/client/src/features/auth/sign-up/ui/HandleLogo.vue
@@ -9,10 +9,10 @@ const { openFileChooser, reset } = inject(authWorkspaceKey)!
 <template>
   <div class="flex items-center gap-2">
     <UiButton size="sm" variant="outline" @click="openFileChooser($event)">
-      {{ $t('authentication.workspace.logo.btn', 1) }}
+      {{ $t('authentication.workspace.creating.logo.btn', 1) }}
     </UiButton>
     <UiButton size="sm" variant="outline" class="!text-red-500" @click="reset">
-      {{ $t('authentication.workspace.logo.btn', 2) }}
+      {{ $t('authentication.workspace.creating.logo.btn', 2) }}
     </UiButton>
   </div>
 </template>
diff --git a/core/client/src/features/auth/sign-up/ui/WorkspaceForm.vue b/core/client/src/features/auth/sign-up/ui/WorkspaceForm.vue
index 4b925bda..9f01bf62 100644
--- a/core/client/src/features/auth/sign-up/ui/WorkspaceForm.vue
+++ b/core/client/src/features/auth/sign-up/ui/WorkspaceForm.vue
@@ -3,7 +3,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { createReusableTemplate } from '@vueuse/core'
 import { useField, useForm } from 'vee-validate'
 import { useRouter } from 'vue-router/auto'
-import { z } from 'zod'
+import { z } from '@/shared/libs/vee-validate'
 import { UiButton, UiFormField, UiFormLabel, UiFormMessage, UiInput } from '@/shared/ui'
 
 const validationSchema = toTypedSchema(
@@ -35,7 +35,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
       <UiFormLabel
         :for="field"
       >
-        {{ $t(`authentication.workspace.form.${field}.label`) }}
+        {{ $t(`authentication.workspace.creating.form.${field}.label`) }}
       </UiFormLabel>
       <component :is="$slots.default" />
       <UiFormMessage v-if="error" :content="error" />
@@ -48,7 +48,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
           <UiInput
             id="name"
             v-model="name"
-            :placeholder="$t('authentication.workspace.form.name.placeholder')"
+            :placeholder="$t('authentication.workspace.creating.form.name.placeholder')"
           />
         </ReuseTemplate>
         <ReuseTemplate field="url" :error="errors.url">
diff --git a/core/client/src/layouts/ui/AuthLayout.vue b/core/client/src/layouts/ui/AuthLayout.vue
index 4c2a8bdd..58ccc9bf 100644
--- a/core/client/src/layouts/ui/AuthLayout.vue
+++ b/core/client/src/layouts/ui/AuthLayout.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { BgPanel } from '@/features/auth/common'
+import { BgPanel, LogoFile } from '@/features/auth/common'
 </script>
 
 <template>
-  <div class="h-dvh w-full flex">
+  <div class="h-dvh w-full flex relative">
+    <LogoFile />
     <slot />
     <BgPanel />
   </div>
diff --git a/core/client/src/pages/auth/sign-in.vue b/core/client/src/pages/auth/sign-in/index.vue
similarity index 100%
rename from core/client/src/pages/auth/sign-in.vue
rename to core/client/src/pages/auth/sign-in/index.vue
diff --git a/core/client/src/pages/auth/sign-in/workspace.vue b/core/client/src/pages/auth/sign-in/workspace.vue
new file mode 100644
index 00000000..055601b7
--- /dev/null
+++ b/core/client/src/pages/auth/sign-in/workspace.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { shallowReactive } from 'vue'
+import { useHead } from '@unhead/vue'
+import type { ChoosingWorkspaceItem } from '@/entities/workspace'
+import { LayoutsEnum } from '@/layouts/model'
+import { WorkspaceChoosing } from '@/widgets/auth'
+import { WorkspaceChanger } from '@/features/auth/sign-in'
+
+definePage({
+  meta: {
+    layout: LayoutsEnum.auth,
+    requiresAuth: true,
+  },
+  name: 'sign-in-workspace',
+})
+
+useHead({
+  title: 'Sign In | Choose your workspace',
+})
+
+const workspaces = shallowReactive<ChoosingWorkspaceItem[]>([
+  {
+    _id: '1',
+    name: 'Workspace 1',
+    plan: 'FREE',
+    status: 'active',
+  },
+  {
+    _id: '2',
+    name: 'Workspace 2',
+    plan: 'PREMIUM',
+    status: 'active',
+  },
+])
+</script>
+
+<template>
+  <div class="auth-page">
+    <WorkspaceChoosing>
+      <WorkspaceChanger :workspaces />
+    </WorkspaceChoosing>
+  </div>
+</template>
diff --git a/core/client/src/pages/auth/sign-up/workspace.vue b/core/client/src/pages/auth/sign-up/workspace.vue
index dd6fb98f..7e850f39 100644
--- a/core/client/src/pages/auth/sign-up/workspace.vue
+++ b/core/client/src/pages/auth/sign-up/workspace.vue
@@ -2,14 +2,14 @@
 import { useHead } from '@unhead/vue'
 import { WorkspaceForm } from '@/features/auth/sign-up'
 import { LayoutsEnum } from '@/layouts/model'
-import { WorkspaceLogoChooser, WorkspaceSection } from '@/widgets/auth'
+import { WorkspaceCreating, WorkspaceLogoChooser } from '@/widgets/auth'
 
 definePage({
   meta: {
     layout: LayoutsEnum.auth,
     requiresAuth: true,
   },
-  name: 'workspace',
+  name: 'sign-up-workspace',
 })
 
 useHead({
@@ -19,13 +19,13 @@ useHead({
 
 <template>
   <div class="auth-page">
-    <WorkspaceSection>
+    <WorkspaceCreating>
       <template #logo>
         <WorkspaceLogoChooser />
       </template>
       <template #form>
         <WorkspaceForm />
       </template>
-    </WorkspaceSection>
+    </WorkspaceCreating>
   </div>
 </template>
diff --git a/core/client/src/shared/libs/i18n/locales/en-US.ts b/core/client/src/shared/libs/i18n/locales/en-US.ts
index f7fa48f3..2f702ba2 100644
--- a/core/client/src/shared/libs/i18n/locales/en-US.ts
+++ b/core/client/src/shared/libs/i18n/locales/en-US.ts
@@ -179,7 +179,7 @@ export default {
     login: {
       title: 'Welcome back',
       description: 'Enter your info below to sign in your account',
-      btn: 'Sign In with Email',
+      btn: 'Continue',
       proposal: 'Don\'t have an account?',
       route: 'Sign Up Now',
     },
@@ -199,22 +199,29 @@ export default {
       route: 'Resend',
     },
     workspace: {
-      title: 'Create your workspace',
-      logo: {
-        label: 'Choose a logo for your workspace',
-        btn: 'Choose image | Delete',
-        description: '*.png, *.jpeg files up to 10MB at least 400px by 400px',
-      },
-      alert: 'Remember, if you don’t choose a logo, jenda will automatically generate one for you',
-      form: {
-        name: {
-          label: 'Name',
-          placeholder: 'Enter your workspace name',
+      creating: {
+        title: 'Create your workspace',
+        logo: {
+          label: 'Choose a logo for your workspace',
+          btn: 'Choose image | Delete',
+          description: '*.png, *.jpeg files up to 10MB at least 400px by 400px',
         },
-        url: {
-          label: 'Custom link',
+        alert: 'Remember, if you don’t choose a logo, jenda will automatically generate one for you',
+        form: {
+          name: {
+            label: 'Name',
+            placeholder: 'Enter your workspace name',
+          },
+          url: {
+            label: 'Custom link',
+          },
         },
       },
+      choosing: {
+        title: 'Choose a workspace',
+        description: 'The more your team engages with Jenda, the more dynamic your workspaces become. | Jenda transforms collaboration in shared workspaces—from organizing projects and managing tasks to centralizing discussions and building efficient workflows.',
+        label: 'Available workspaces',
+      },
       route: 'Continue',
     },
     form: {
@@ -232,7 +239,7 @@ export default {
     ],
     back: 'To Home',
     auth_alert:
-      'authorization via google will be replaced with gitlab after 28.12.2024',
+      'authorization via google will be replaced with gitlab after 28.02.2025',
   },
   kanban: {
     sorting: {
diff --git a/core/client/src/shared/libs/i18n/locales/ru-RU.ts b/core/client/src/shared/libs/i18n/locales/ru-RU.ts
index 99dc76cb..07d66aec 100644
--- a/core/client/src/shared/libs/i18n/locales/ru-RU.ts
+++ b/core/client/src/shared/libs/i18n/locales/ru-RU.ts
@@ -182,7 +182,7 @@ export default {
     login: {
       title: 'С возвращением',
       description: 'Введите свои данные ниже, чтобы войти в свой аккаунт',
-      btn: 'Войти',
+      btn: 'Продолжить',
       proposal: 'Ещё нет аккаунта?',
       route: 'Зарегистрируйтесь',
     },
@@ -202,22 +202,29 @@ export default {
       route: 'Отправить повторно',
     },
     workspace: {
-      title: 'Создайте воркспейс',
-      logo: {
-        label: 'Выберите логотип',
-        btn: 'Выбрать картинку | Удалить',
-        description: '*.png, *.jpeg до 10 МБ, размером не менее 400 x 400 пикселей',
-      },
-      alert: 'Помните, если вы не выберете лого, то jenda автоматически создаст его для вас',
-      form: {
-        name: {
-          label: 'Название',
-          placeholder: 'Введите название',
+      creating: {
+        title: 'Создайте воркспейс',
+        logo: {
+          label: 'Выберите логотип',
+          btn: 'Выбрать картинку | Удалить',
+          description: '*.png, *.jpeg до 10 МБ, размером не менее 400 x 400 пикселей',
         },
-        url: {
-          label: 'Удобная ссылка',
+        alert: 'Помните, если вы не выберете лого, то jenda автоматически создаст его для вас',
+        form: {
+          name: {
+            label: 'Название',
+            placeholder: 'Введите название',
+          },
+          url: {
+            label: 'Удобная ссылка',
+          },
         },
       },
+      choosing: {
+        title: 'Выберите воркспейс',
+        description: 'Чем активнее ваша команда использует Jenda, тем эффективнее становятся ваши рабочие пространства. | Jenda преображает совместную работу в общих рабочих пространствах. От организации проектов и управления задачами до объединения обсуждений и создания эффективных процессов.',
+        label: 'Доступные воркспейсы',
+      },
       route: 'Продолжить',
     },
     form: {
@@ -235,7 +242,7 @@ export default {
     ],
     back: 'На главную',
     auth_alert:
-      'aвторизация через google будет заменена на gitlab после 28.12.2024',
+      'aвторизация через google будет заменена на gitlab после 28.02.2025',
   },
   kanban: {
     sorting: {
diff --git a/core/client/src/shared/libs/i18n/locales/zh-CN.ts b/core/client/src/shared/libs/i18n/locales/zh-CN.ts
index 990392a9..2e8809e3 100644
--- a/core/client/src/shared/libs/i18n/locales/zh-CN.ts
+++ b/core/client/src/shared/libs/i18n/locales/zh-CN.ts
@@ -175,7 +175,7 @@ export default {
       description: '请输入下面的信息以登录您的帐户',
       btn: '用电子邮件登录',
       proposal: '还没有帐户？',
-      route: '立即注册',
+      route: '立即登录',
     },
     registration: {
       title: '开始使用',
@@ -193,22 +193,29 @@ export default {
       route: '重新发送',
     },
     workspace: {
-      title: '创建工作区',
-      logo: {
-        label: '为您的工作区选择一个标志',
-        btn: '选择图片 | 删除',
-        description: '文件 *.png, *.jpeg，最大 10MB，尺寸至少为 400x400 像素',
-      },
-      alert: '请记住，如果您未选择标志，Jenda 将自动为您生成一个',
-      form: {
-        name: {
-          label: '名称',
-          placeholder: '输入您的工作区名称',
+      creating: {
+        title: '创建工作区',
+        logo: {
+          label: '为您的工作区选择一个标志',
+          btn: '选择图片 | 删除',
+          description: '文件 *.png, *.jpeg，最大 10MB，尺寸至少为 400x400 像素',
         },
-        url: {
-          label: '自定义链接',
+        alert: '请记住，如果您未选择标志，Jenda 将自动为您生成一个',
+        form: {
+          name: {
+            label: '名称',
+            placeholder: '输入您的工作区名称',
+          },
+          url: {
+            label: '自定义链接',
+          },
         },
       },
+      choosing: {
+        title: '选择工作空间',
+        description: '您的团队使用 Jenda 越积极，您的工作空间就会越高效。| Jenda 改变了在共享工作空间中的协作方式——从项目组织和任务管理到集中讨论和创建高效工作流程。',
+        label: '可用的工作空间',
+      },
       route: '立即登录',
     },
     form: {
@@ -219,7 +226,7 @@ export default {
     line: '或继续使用',
     privacy: ['点击继续即表示您同意我们的', '点击登录即表示您同意我们的', '服务条款', '和', '隐私政策。'],
     back: '回到首页',
-    auth_alert: '通过 google 的授权将在 2024 年 12 月 28 日后被 gitlab 替代',
+    auth_alert: '通过 google 的授权将在 2025 年 02 月 28 日后被 gitlab 替代',
   },
   kanban: {
     sorting: {
diff --git a/core/client/src/widgets/auth/ui/AuthContainer.vue b/core/client/src/widgets/auth/ui/AuthContainer.vue
index 63225847..eb57e576 100644
--- a/core/client/src/widgets/auth/ui/AuthContainer.vue
+++ b/core/client/src/widgets/auth/ui/AuthContainer.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router/auto'
-import { LogoFile, PrivacyPolicy } from '@/features/auth/common'
+import { PrivacyPolicy } from '@/features/auth/common'
 import { GoogleOauth } from '@/features/auth/oauth'
 import { UiAlert } from '@/shared/ui'
 
@@ -35,7 +35,6 @@ const alertString = computed(() => {
     class="auth-slot-container"
   >
     <div class="h-full w-full flex flex-col justify-center items-center mx-auto">
-      <LogoFile />
       <div
         class="form-container"
       >
diff --git a/core/client/src/widgets/auth/ui/ConfirmSection.vue b/core/client/src/widgets/auth/ui/ConfirmSection.vue
index c524ddb9..f0a7f6d2 100644
--- a/core/client/src/widgets/auth/ui/ConfirmSection.vue
+++ b/core/client/src/widgets/auth/ui/ConfirmSection.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { LogoFile } from '@/features/auth/common'
 import { UiAlert } from '@/shared/ui'
 </script>
 
@@ -8,7 +7,6 @@ import { UiAlert } from '@/shared/ui'
     class="auth-slot-container"
   >
     <div class="h-full w-full flex flex-col justify-center items-center mx-auto">
-      <LogoFile />
       <div
         class="form-container"
       >
diff --git a/core/client/src/widgets/auth/ui/WorkspaceChoosing.vue b/core/client/src/widgets/auth/ui/WorkspaceChoosing.vue
new file mode 100644
index 00000000..f38f0f34
--- /dev/null
+++ b/core/client/src/widgets/auth/ui/WorkspaceChoosing.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { PrivacyPolicy } from '@/features/auth/common'
+</script>
+
+<template>
+  <div
+    class="auth-slot-container"
+  >
+    <div class="h-full w-full flex flex-col justify-center items-center mx-auto">
+      <div
+        class="form-container"
+      >
+        <h2 class="text-3xl fw-600 max-[580px]:text-2xl mb-2">
+          {{ $t('authentication.workspace.choosing.title') }}
+        </h2>
+        <p class="text-neutral-500 dark:text-neutral-300">
+          {{ $t('authentication.workspace.choosing.description', 1) }}
+        </p>
+        <p class="mb-6 max-w-100% text-neutral-500 dark:text-neutral-300">
+          {{ $t('authentication.workspace.choosing.description', 2) }}
+        </p>
+        <slot />
+        <PrivacyPolicy />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/core/client/src/widgets/auth/ui/WorkspaceSection.vue b/core/client/src/widgets/auth/ui/WorkspaceCreating.vue
similarity index 76%
rename from core/client/src/widgets/auth/ui/WorkspaceSection.vue
rename to core/client/src/widgets/auth/ui/WorkspaceCreating.vue
index 8cc5468e..a57fd816 100644
--- a/core/client/src/widgets/auth/ui/WorkspaceSection.vue
+++ b/core/client/src/widgets/auth/ui/WorkspaceCreating.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { LogoFile, PrivacyPolicy } from '@/features/auth/common'
+import { PrivacyPolicy } from '@/features/auth/common'
 import { UiAlert } from '@/shared/ui'
 </script>
 
@@ -8,12 +8,11 @@ import { UiAlert } from '@/shared/ui'
     class="auth-slot-container"
   >
     <div class="h-full w-full flex flex-col justify-center items-center mx-auto">
-      <LogoFile />
       <div
         class="form-container"
       >
         <h2 class="text-3xl fw-600 max-[580px]:text-2xl mb-6">
-          {{ $t('authentication.workspace.title') }}
+          {{ $t('authentication.workspace.creating.title') }}
         </h2>
         <div class="mb-4">
           <slot name="logo" />
@@ -21,7 +20,7 @@ import { UiAlert } from '@/shared/ui'
         <UiAlert
           variant="warning"
           closable
-          :content="$t('authentication.workspace.alert')"
+          :content="$t('authentication.workspace.creating.alert')"
           class="max-w-98% mb-6 mt-2 max-[520px]:mb-1.5"
         />
         <slot name="form" />
diff --git a/core/client/src/widgets/auth/ui/WorkspaceLogoChooser.vue b/core/client/src/widgets/auth/ui/WorkspaceLogoChooser.vue
index 57a060d6..d2de6e81 100644
--- a/core/client/src/widgets/auth/ui/WorkspaceLogoChooser.vue
+++ b/core/client/src/widgets/auth/ui/WorkspaceLogoChooser.vue
@@ -44,11 +44,11 @@ provide(authWorkspaceKey, {
     />
     <div class="flex flex-col gap-2">
       <span class="text-sm text-neutral-500 dark:text-neutral-400">
-        {{ $t('authentication.workspace.logo.label') }}
+        {{ $t('authentication.workspace.creating.logo.label') }}
       </span>
       <HandleLogo />
       <span class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
-        {{ $t('authentication.workspace.logo.description') }}
+        {{ $t('authentication.workspace.creating.logo.description') }}
       </span>
     </div>
   </div>
diff --git a/core/client/src/widgets/auth/ui/index.ts b/core/client/src/widgets/auth/ui/index.ts
index 129285e6..c7206972 100644
--- a/core/client/src/widgets/auth/ui/index.ts
+++ b/core/client/src/widgets/auth/ui/index.ts
@@ -1,6 +1,7 @@
 import AuthContainer from './AuthContainer.vue'
 import ConfirmSection from './ConfirmSection.vue'
 import WorkspaceLogoChooser from './WorkspaceLogoChooser.vue'
-import WorkspaceSection from './WorkspaceSection.vue'
+import WorkspaceCreating from './WorkspaceCreating.vue'
+import WorkspaceChoosing from './WorkspaceChoosing.vue'
 
-export { AuthContainer, ConfirmSection, WorkspaceLogoChooser, WorkspaceSection }
+export { AuthContainer, ConfirmSection, WorkspaceChoosing, WorkspaceCreating, WorkspaceLogoChooser }
diff --git a/core/client/typed-router.d.ts b/core/client/typed-router.d.ts
index ee0e2a02..79e070ab 100644
--- a/core/client/typed-router.d.ts
+++ b/core/client/typed-router.d.ts
@@ -22,9 +22,10 @@ declare module 'vue-router/auto-routes' {
     'not-found': RouteRecordInfo<'not-found', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
     'analytics': RouteRecordInfo<'analytics', '/analytics', Record<never, never>, Record<never, never>>,
     'sign-in': RouteRecordInfo<'sign-in', '/auth/sign-in', Record<never, never>, Record<never, never>>,
+    'sign-in-workspace': RouteRecordInfo<'sign-in-workspace', '/auth/sign-in/workspace', Record<never, never>, Record<never, never>>,
     'sign-up': RouteRecordInfo<'sign-up', '/auth/sign-up', Record<never, never>, Record<never, never>>,
     'confirm': RouteRecordInfo<'confirm', '/auth/sign-up/confirm', Record<never, never>, Record<never, never>>,
-    'workspace': RouteRecordInfo<'workspace', '/auth/sign-up/workspace', Record<never, never>, Record<never, never>>,
+    'sign-up-workspace': RouteRecordInfo<'sign-up-workspace', '/auth/sign-up/workspace', Record<never, never>, Record<never, never>>,
     'boards': RouteRecordInfo<'boards', '/boards', Record<never, never>, Record<never, never>>,
     'board-id': RouteRecordInfo<'board-id', '/boards/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'members': RouteRecordInfo<'members', '/members', Record<never, never>, Record<never, never>>,
diff --git a/core/client/uno.config.ts b/core/client/uno.config.ts
index 4fac8fed..424cf73f 100644
--- a/core/client/uno.config.ts
+++ b/core/client/uno.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
       },
       collections: {
         'lucid': () => import('@iconify-json/lucide/icons.json').then(i => i.default),
-        'hero': () => import('@iconify-json/hugeicons/icons.json').then(i => i.default),
+        'huge': () => import('@iconify-json/hugeicons/icons.json').then(i => i.default),
         'jenda-custom': {
           'file-import': () => fs.readFile('./src/shared/assets/icons/custom-jenda/import.svg', 'utf-8'),
           'project': () => fs.readFile('./src/shared/assets/icons/custom-jenda/project.svg', 'utf-8'),

From b624e248cebb9949fcb5684fc74dc4b06626e8c9 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Mon, 30 Dec 2024 20:50:39 +0300
Subject: [PATCH 6/7] fix: paragraph color

---
 core/client/src/app/providers/router/index.ts            | 6 +++---
 core/client/src/features/auth/sign-up/ui/ConfirmForm.vue | 2 +-
 core/client/src/widgets/auth/ui/AuthContainer.vue        | 2 +-
 core/client/src/widgets/auth/ui/ConfirmSection.vue       | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/core/client/src/app/providers/router/index.ts b/core/client/src/app/providers/router/index.ts
index 94f1fe4d..6798d93b 100644
--- a/core/client/src/app/providers/router/index.ts
+++ b/core/client/src/app/providers/router/index.ts
@@ -10,9 +10,9 @@ export const router = createRouter({
 
 router.beforeEach((to, from) => {
   // Needs to add guard auth logic in router
-  if (to.meta.requiresAuth === true) {
-    return router.push({ name: 'sign-in' })
-  }
+  // if (to.meta.requiresAuth === true) {
+  //   return router.push({ name: 'sign-in' })
+  // }
 })
 
 router.beforeEach(layoutResolverMiddleware)
diff --git a/core/client/src/features/auth/sign-up/ui/ConfirmForm.vue b/core/client/src/features/auth/sign-up/ui/ConfirmForm.vue
index daead415..61d3fbb8 100644
--- a/core/client/src/features/auth/sign-up/ui/ConfirmForm.vue
+++ b/core/client/src/features/auth/sign-up/ui/ConfirmForm.vue
@@ -54,7 +54,7 @@ function onResend() {
       </UiPinInput>
       <UiFormMessage v-if="errors.pin" :content="errors.pin" />
     </UiFormField>
-    <p class="text-sm text-neutral-400 mt-2">
+    <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
       {{ $t('authentication.form.otp') }}
     </p>
     <UiButton type="submit" class="w-full mt-4 mb-2">
diff --git a/core/client/src/widgets/auth/ui/AuthContainer.vue b/core/client/src/widgets/auth/ui/AuthContainer.vue
index eb57e576..09569480 100644
--- a/core/client/src/widgets/auth/ui/AuthContainer.vue
+++ b/core/client/src/widgets/auth/ui/AuthContainer.vue
@@ -49,7 +49,7 @@ const alertString = computed(() => {
         <h2 class="text-3xl fw-600 max-[580px]:text-2xl">
           {{ title }}
         </h2>
-        <p class="text-sm pb-5 text-neutral-400 mt--1.5">
+        <p class="text-sm pb-5 text-neutral-500 dark:text-neutral-400 mt--1.5">
           {{ info }}
         </p>
 
diff --git a/core/client/src/widgets/auth/ui/ConfirmSection.vue b/core/client/src/widgets/auth/ui/ConfirmSection.vue
index f0a7f6d2..5dcd2b22 100644
--- a/core/client/src/widgets/auth/ui/ConfirmSection.vue
+++ b/core/client/src/widgets/auth/ui/ConfirmSection.vue
@@ -13,7 +13,7 @@ import { UiAlert } from '@/shared/ui'
         <h2 class="text-3xl fw-600 max-[580px]:text-2xl">
           {{ $t('authentication.confirm.title') }}
         </h2>
-        <p class="text-sm pb-5 text-neutral-400 mt--1.5">
+        <p class="text-sm pb-5 text-neutral-500 dark:text-neutral-400 mt--1.5">
           {{ $t('authentication.confirm.description') }}
         </p>
         <UiAlert

From c522d644a31a8757609e626290aff35440087b76 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Mon, 30 Dec 2024 20:51:30 +0300
Subject: [PATCH 7/7] fix: route guards for production

---
 core/client/src/app/providers/router/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/client/src/app/providers/router/index.ts b/core/client/src/app/providers/router/index.ts
index 6798d93b..94f1fe4d 100644
--- a/core/client/src/app/providers/router/index.ts
+++ b/core/client/src/app/providers/router/index.ts
@@ -10,9 +10,9 @@ export const router = createRouter({
 
 router.beforeEach((to, from) => {
   // Needs to add guard auth logic in router
-  // if (to.meta.requiresAuth === true) {
-  //   return router.push({ name: 'sign-in' })
-  // }
+  if (to.meta.requiresAuth === true) {
+    return router.push({ name: 'sign-in' })
+  }
 })
 
 router.beforeEach(layoutResolverMiddleware)