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] 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'