feat: add workspace popover

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)

core/client/src/entities/workspace/index.ts

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

core/client/src/entities/workspace/model/index.ts

@@ -0,0 +1 @@
+export * from './workspace.store'

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

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

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'

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>

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>

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>

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'

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>

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>

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

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>

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>

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

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

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

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>"
 `;

core/client/src/widgets/workspace/index.ts

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