fix: shadcn bug, refactor: header components

core/client/src/features/share/index.ts

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

core/client/src/features/share/ui/ShareLink.vue

@@ -1,14 +1,57 @@
 <script setup lang="ts">
-import { ShimmerButton } from '@/shared/ui'
+import {
+  ShimmerButton,
+  UiButton,
+  UiDialog,
+  UiDialogClose,
+  UiDialogContent,
+  UiDialogDescription,
+  UiDialogFooter,
+  UiDialogHeader,
+  UiDialogTitle,
+  UiDialogTrigger,
+  UiInput,
+} from '@/shared/ui'
 </script>
 
 <template>
-  <ShimmerButton shimmer-size="2px">
-    <div i-hugeicons-user-multiple-02 class="text-neutral-900 dark:text-neutral-100 text-sm" />
-    <span
-      class="whitespace-pre-wrap text-center text-neutral-800 dark:text-neutral-100 text-sm fw500"
-    >
-      {{ $t('header.share') }}
-    </span>
-  </ShimmerButton>
+  <UiDialog>
+    <UiDialogTrigger as-child>
+      <ShimmerButton shimmer-size="2px">
+        <div i-hugeicons-link-04 class="text-neutral-900 dark:text-neutral-100 text-base" />
+        <span
+          class="whitespace-pre-wrap text-center text-neutral-800 dark:text-neutral-100 text-sm fw500"
+        >
+          {{ $t('header.share') }}
+        </span>
+      </ShimmerButton>
+    </UiDialogTrigger>
+    <UiDialogContent class="sm:max-w-md">
+      <UiDialogHeader>
+        <UiDialogTitle>Share link</UiDialogTitle>
+        <UiDialogDescription>
+          Anyone who has this link will be able to view this.
+        </UiDialogDescription>
+      </UiDialogHeader>
+      <div class="flex items-center space-x-2">
+        <div class="grid flex-1 gap-2">
+          <UiInput
+            default-value="https://shadcn-vue.com/docs/installation"
+            readonly
+            class="select-none pointer-events-none focus:ring-0"
+          />
+        </div>
+        <UiButton type="submit" size="sm" class="px-3">
+          <div i-hugeicons-copy-02 class="w-4 h-4 dark:text-neutral-900" />
+        </UiButton>
+      </div>
+      <UiDialogFooter class="sm:justify-start">
+        <UiDialogClose as-child>
+          <UiButton type="button" variant="secondary">
+            Cancel
+          </UiButton>
+        </UiDialogClose>
+      </UiDialogFooter>
+    </UiDialogContent>
+  </UiDialog>
 </template>

core/client/src/features/share/ui/index.ts

@@ -0,0 +1 @@
+export { default as ShareLink } from './ShareLink.vue'

core/client/src/shared/ui/_shortcuts/button.ts

@@ -4,7 +4,7 @@ export const staticBtn: Record<`${ButtonPrefix}-${string}` | ButtonPrefix, strin
   'btn': 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:(outline-none ring-1 ring-neutral-950) disabled:(pointer-events-none opacity-50) [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300',
 
   'btn-default': 'bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:(bg-neutral-50 text-neutral-900 hover:bg-neutral-50/90)',
-  'btn-secondary': 'bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:(bg-#2e2e2e text-neutral-50 hover:bg-neutral-800/80)',
+  'btn-secondary': 'bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:(bg-#2e2e2e text-neutral-50 hover:bg-#2e2e2e/80)',
   'btn-outline': 'border border-solid border-neutral-200 bg-white shadow-sm hover:(bg-neutral-100 text-neutral-900) dark:(border-neutral-700 bg-neutral-800 hover:bg-neutral-700/20 hover:text-neutral-50)',
   'btn-ghost': 'bg-transparent hover:(bg-neutral-100 text-neutral-900) dark:(hover:bg-neutral-700/40 hover:text-neutral-50)',
   'btn-dashed': 'border border-dashed border-neutral-200 bg-white shadow-sm hover:(bg-neutral-100 text-neutral-900) dark:(border-neutral-700 bg-neutral-800 hover:bg-neutral-700/20 hover:text-neutral-50)',

core/client/src/shared/ui/_shortcuts/dialog.ts

@@ -2,8 +2,8 @@ type DialogPrefix = 'dialog'
 
 export const staticDialog: Record<`${DialogPrefix}-${string}` | DialogPrefix, string> = {
   'dialog': '',
-  'dialog-overlay': 'fixed inset-0 z-50 bg-black/30',
-  'dialog-content': 'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg dark:(border-neutral-800 bg-neutral-800)',
+  'dialog-overlay': 'fixed inset-0 z-999 bg-black/30',
+  'dialog-content': 'fixed left-1/2 top-1/2 z-1000 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg dark:(border-neutral-800 bg-neutral-800)',
   'dialog-close': 'absolute right-4 top-4 w-4 h-4 flex items-center justify-center rounded-sm opacity-70 ring-offset-0 transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 disabled:pointer-events-none dark:(ring-offset-0 focus:ring-0)',
   'dialog-title': 'text-lg font-semibold leading-none tracking-tight',
   'dialog-description': 'text-sm text-neutral-500 dark:text-neutral-400',

core/client/src/shared/ui/dialog/UiDialogContent.vue

@@ -28,15 +28,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DialogOverlay
       :class="cn(
         'dialog-overlay',
-        '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]:fade-out-0 data-[state=open]:fade-in-0',
       )"
     />
     <DialogContent
       v-bind="forwarded"
       :class="
         cn(
-          'dialog-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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+          'dialog-content duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2',
           props.class,
         )"
     >
@@ -45,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         :class="cn(
           'dialog-close',
-          'data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400',
+          'bg-transparent data-[state=open]:text-neutral-500 dark:data-[state=open]:text-neutral-400',
         )"
       >
         <div i-lucide-x class="w-4 h-4" />

core/client/src/shared/ui/shimmer-button/ShimmerButton.vue

@@ -23,7 +23,6 @@ withDefaults(defineProps<ShimmerButtonProps>(), {
     :class="
       cn(
         'btn btn-secondary z-0 relative overflow-hidden h-8 rounded-md px-3 dark:hover:bg-#2e2e2e',
-        'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px',
         $props.class,
       )
     "

core/client/src/widgets/layout/ui/header/HeaderMain.vue

@@ -2,8 +2,8 @@
 import type { Board } from '@/entities/board'
 import type { ProjectLink } from '@/shared/config/types-shared'
 import { type User, UserAvatar } from '@/entities/user'
+import { ShareLink } from '@/features/share'
 import { useLayoutPaths } from '@/shared/lib/composables'
-import { ShimmerButton } from '@/shared/ui'
 import { Icon } from '@iconify/vue'
 import { computed, shallowReactive, toRef } from 'vue'
 import { links } from '../../model'
@@ -73,14 +73,7 @@ const { active } = useLayoutPaths(links, _projects)
           </UserAvatar>
         </template>
       </div>
-      <ShimmerButton shimmer-size="2px">
-        <div i-hugeicons-user-multiple-02 class="text-neutral-900 dark:text-neutral-100 text-sm" />
-        <span
-          class="whitespace-pre-wrap text-center text-neutral-800 dark:text-neutral-100 text-sm fw500"
-        >
-          {{ $t('header.share') }}
-        </span>
-      </ShimmerButton>
+      <ShareLink />
       <div
         v-tooltip="{ content: $t('header.navigator.messages'), trigger: ['hover'], distance: 7 }"
         i-hugeicons-message-multiple-01

core/client/src/widgets/layout/ui/header/UserMenu.vue

@@ -17,7 +17,7 @@ import {
       <div class="flex items-center justify-center h-17px">
         <div
           i-lucide-ellipsis-vertical
-          class="text-base text-neutral-500 dark:text-neutral-400"
+          class="cursor-pointer text-base text-neutral-500 dark:text-neutral-400"
         />
       </div>
     </UiDropdownMenuTrigger>