@lobehub/lobehub 2.0.0-next.188 → 2.0.0-next.189

package/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/List/Item/useDropdownMenu.tsx

@@ -1,7 +1,7 @@
 import { Icon, type MenuProps } from '@lobehub/ui';
 import { App } from 'antd';
 import { ExternalLink, LucideCopy, PencilLine, Trash, Wand2 } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { isDesktop } from '@/const/version';
@@ -17,7 +17,7 @@ interface TopicItemDropdownMenuProps {
 export const useTopicItemDropdownMenu = ({
   id,
   toggleEditing,
-}: TopicItemDropdownMenuProps): MenuProps['items'] => {
+}: TopicItemDropdownMenuProps): (() => MenuProps['items']) => {
   const { t } = useTranslation(['topic', 'common']);
   const { modal } = App.useApp();
 
@@ -30,7 +30,7 @@ export const useTopicItemDropdownMenu = ({
     s.removeTopic,
   ]);
 
-  return useMemo(() => {
+  return useCallback(() => {
     if (!id) return [];
 
     return [

package/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/Actions.tsx

@@ -1,25 +1,16 @@
-import { ActionIcon, Dropdown, type MenuProps } from '@lobehub/ui';
+import { ActionIcon, type DropdownItem, DropdownMenu } from '@lobehub/ui';
 import { MoreHorizontalIcon } from 'lucide-react';
 import { memo } from 'react';
 
 interface ActionProps {
-  dropdownMenu: MenuProps['items'];
+  dropdownMenu: DropdownItem[] | (() => DropdownItem[]);
 }
 
 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={dropdownMenu}>
       <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/index.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, Icon } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { TreeDownRightIcon } from '@lobehub/ui/icons';
 import { cssVar } from 'antd-style';
 import { memo, useCallback } from 'react';
@@ -46,23 +46,15 @@ const ThreadItem = memo<ThreadItemProps>(({ title, id }) => {
 
   return (
     <>
-      <Dropdown
-        menu={{
-          items: dropdownMenu,
-        }}
-        trigger={['contextMenu']}
-      >
-        <NavItem
-          actions={<Actions dropdownMenu={dropdownMenu} />}
-          active={active && !isInAgentSubRoute}
-          disabled={editing}
-          icon={
-            <Icon color={cssVar.colorTextDescription} icon={TreeDownRightIcon} size={'small'} />
-          }
-          onClick={handleClick}
-          title={title}
-        />
-      </Dropdown>
+      <NavItem
+        actions={<Actions dropdownMenu={dropdownMenu} />}
+        active={active && !isInAgentSubRoute}
+        contextMenuItems={dropdownMenu}
+        disabled={editing}
+        icon={<Icon color={cssVar.colorTextDescription} icon={TreeDownRightIcon} size={'small'} />}
+        onClick={handleClick}
+        title={title}
+      />
       <Editing id={id} title={title} toggleEditing={toggleEditing} />
     </>
   );

package/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/useDropdownMenu.tsx

@@ -1,7 +1,7 @@
 import { Icon, type MenuProps } from '@lobehub/ui';
 import { App } from 'antd';
 import { PencilLine, Trash } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
@@ -14,13 +14,13 @@ interface ThreadItemDropdownMenuProps {
 export const useThreadItemDropdownMenu = ({
   id,
   toggleEditing,
-}: ThreadItemDropdownMenuProps): MenuProps['items'] => {
+}: ThreadItemDropdownMenuProps): (() => MenuProps['items']) => {
   const { t } = useTranslation(['thread', 'common']);
   const { modal } = App.useApp();
 
   const [removeThread] = useChatStore((s) => [s.removeThread]);
 
-  return useMemo(() => {
+  return useCallback(() => {
     return [
       {
         icon: <Icon icon={PencilLine} />,

package/src/app/[variants]/(main)/community/(detail)/assistant/features/Sidebar/ActionButton/AddAgent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { App, Dropdown } from 'antd';
+import { Button, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStaticStyles } from 'antd-style';
 import { ChevronDownIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -17,10 +17,17 @@ import { useHomeStore } from '@/store/home';
 import { useDetailContext } from '../../DetailProvider';
 
 const styles = createStaticStyles(({ css }) => ({
-  button: css`
-    button {
-      width: 100%;
-    }
+  buttonGroup: css`
+    width: 100%;
+  `,
+  menuButton: css`
+    padding-inline: 8px;
+    border-start-start-radius: 0 !important;
+    border-end-start-radius: 0 !important;
+  `,
+  primaryButton: css`
+    border-start-end-radius: 0 !important;
+    border-end-end-radius: 0 !important;
   `,
 }));
 
@@ -127,28 +134,41 @@ const AddAgent = memo<{ mobile?: boolean }>(({ mobile }) => {
     }
   };
 
+  const menuItems = [
+    {
+      key: 'addAgent',
+      label: t('assistants.addAgent'),
+      onClick: handleAddAgent,
+    },
+  ];
+
   return (
-    <Dropdown.Button
-      className={styles.button}
-      icon={<Icon icon={ChevronDownIcon} />}
-      loading={isLoading}
-      menu={{
-        items: [
-          {
-            key: 'addAgent',
-            label: t('assistants.addAgent'),
-            onClick: handleAddAgent,
-          },
-        ],
-      }}
-      onClick={handleAddAgentAndConverse}
-      overlayStyle={{ minWidth: 267 }}
-      size={'large'}
-      style={{ flex: 1, width: 'unset' }}
-      type={'primary'}
-    >
-      {t('assistants.addAgentAndConverse')}
-    </Dropdown.Button>
+    <Flexbox className={styles.buttonGroup} gap={0} horizontal>
+      <Button
+        block
+        className={styles.primaryButton}
+        loading={isLoading}
+        onClick={handleAddAgentAndConverse}
+        size={'large'}
+        style={{ flex: 1, width: 'unset' }}
+        type={'primary'}
+      >
+        {t('assistants.addAgentAndConverse')}
+      </Button>
+      <DropdownMenu
+        items={menuItems}
+        popupProps={{ style: { minWidth: 267 } }}
+        triggerProps={{ disabled: isLoading }}
+      >
+        <Button
+          className={styles.menuButton}
+          disabled={isLoading}
+          icon={<Icon icon={ChevronDownIcon} />}
+          size={'large'}
+          type={'primary'}
+        />
+      </DropdownMenu>
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/community/(detail)/user/features/UserAgentCard.tsx

@@ -4,6 +4,7 @@ import {
   Tag as AntTag,
   Avatar,
   Block,
+  DropdownMenu,
   Flexbox,
   Icon,
   Tag,
@@ -11,7 +12,7 @@ import {
   Tooltip,
   TooltipGroup,
 } from '@lobehub/ui';
-import { App, Dropdown } from 'antd';
+import { App } from 'antd';
 import { createStaticStyles, cx } from 'antd-style';
 import {
   AlertTriangle,
@@ -258,14 +259,14 @@ const UserAgentCard = memo<UserAgentCardProps>(
         width={'100%'}
       >
         {isOwner && (
-          <Dropdown menu={{ items: menuItems }} trigger={['click']}>
+          <DropdownMenu items={menuItems}>
             <div
               className={cx('more-button', styles.moreButton)}
               onClick={(e) => e.stopPropagation()}
             >
               <Icon icon={MoreVerticalIcon} size={16} style={{ cursor: 'pointer' }} />
             </div>
-          </Dropdown>
+          </DropdownMenu>
         )}
         <Flexbox
           align={'flex-start'}

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/List/Item/Actions.tsx

@@ -1,25 +1,16 @@
-import { ActionIcon, Dropdown, type MenuProps } from '@lobehub/ui';
+import { ActionIcon, type DropdownItem, DropdownMenu } from '@lobehub/ui';
 import { MoreHorizontalIcon } from 'lucide-react';
 import { memo } from 'react';
 
 interface ActionProps {
-  dropdownMenu: MenuProps['items'];
+  dropdownMenu: DropdownItem[] | (() => DropdownItem[]);
 }
 
 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={dropdownMenu}>
       <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/List/Item/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Dropdown, Flexbox, Icon, Skeleton, Tag } from '@lobehub/ui';
+import { ActionIcon, Flexbox, Icon, Skeleton, Tag } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { MessageSquareDashed, Star } from 'lucide-react';
 import { Suspense, memo, useCallback } from 'react';
@@ -92,34 +92,28 @@ const TopicItem = memo<TopicItemProps>(({ id, title, fav, active, threadId }) =>
 
   return (
     <Flexbox style={{ position: 'relative' }}>
-      <Dropdown
-        menu={{
-          items: dropdownMenu,
-        }}
-        trigger={['contextMenu']}
-      >
-        <NavItem
-          actions={<Actions dropdownMenu={dropdownMenu} />}
-          active={active && !threadId && !isInAgentSubRoute}
-          disabled={editing}
-          icon={
-            <ActionIcon
-              color={fav ? cssVar.colorWarning : undefined}
-              fill={fav ? cssVar.colorWarning : 'transparent'}
-              icon={Star}
-              onClick={(e) => {
-                e.stopPropagation();
-                favoriteTopic(id, !fav);
-              }}
-              size={'small'}
-            />
-          }
-          loading={isLoading}
-          onClick={handleClick}
-          onDoubleClick={handleDoubleClick}
-          title={title}
-        />
-      </Dropdown>
+      <NavItem
+        actions={<Actions dropdownMenu={dropdownMenu} />}
+        active={active && !threadId && !isInAgentSubRoute}
+        contextMenuItems={dropdownMenu}
+        disabled={editing}
+        icon={
+          <ActionIcon
+            color={fav ? cssVar.colorWarning : undefined}
+            fill={fav ? cssVar.colorWarning : 'transparent'}
+            icon={Star}
+            onClick={(e) => {
+              e.stopPropagation();
+              favoriteTopic(id, !fav);
+            }}
+            size={'small'}
+          />
+        }
+        loading={isLoading}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        title={title}
+      />
       <Editing id={id} title={title} toggleEditing={toggleEditing} />
       {active && (
         <Suspense

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/List/Item/useDropdownMenu.tsx

@@ -1,7 +1,7 @@
 import { Icon, type MenuProps } from '@lobehub/ui';
 import { App } from 'antd';
 import { ExternalLink, LucideCopy, PencilLine, Trash, Wand2 } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { isDesktop } from '@/const/version';
@@ -17,7 +17,7 @@ interface TopicItemDropdownMenuProps {
 export const useTopicItemDropdownMenu = ({
   id,
   toggleEditing,
-}: TopicItemDropdownMenuProps): MenuProps['items'] => {
+}: TopicItemDropdownMenuProps): (() => MenuProps['items']) => {
   const { t } = useTranslation(['topic', 'common']);
   const { modal } = App.useApp();
 
@@ -30,7 +30,7 @@ export const useTopicItemDropdownMenu = ({
     s.removeTopic,
   ]);
 
-  return useMemo(() => {
+  return useCallback(() => {
     if (!id) return [];
 
     return [

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/Actions.tsx

@@ -1,25 +1,16 @@
-import { ActionIcon, Dropdown, type MenuProps } from '@lobehub/ui';
+import { ActionIcon, type DropdownItem, DropdownMenu } from '@lobehub/ui';
 import { MoreHorizontalIcon } from 'lucide-react';
 import { memo } from 'react';
 
 interface ActionProps {
-  dropdownMenu: MenuProps['items'];
+  dropdownMenu: DropdownItem[] | (() => DropdownItem[]);
 }
 
 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={dropdownMenu}>
       <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/index.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, Icon } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { TreeDownRightIcon } from '@lobehub/ui/icons';
 import { cssVar } from 'antd-style';
 import { memo, useCallback } from 'react';
@@ -46,23 +46,15 @@ const ThreadItem = memo<ThreadItemProps>(({ title, id }) => {
 
   return (
     <>
-      <Dropdown
-        menu={{
-          items: dropdownMenu,
-        }}
-        trigger={['contextMenu']}
-      >
-        <NavItem
-          actions={<Actions dropdownMenu={dropdownMenu} />}
-          active={active && !isInAgentSubRoute}
-          disabled={editing}
-          icon={
-            <Icon color={cssVar.colorTextDescription} icon={TreeDownRightIcon} size={'small'} />
-          }
-          onClick={handleClick}
-          title={title}
-        />
-      </Dropdown>
+      <NavItem
+        actions={<Actions dropdownMenu={dropdownMenu} />}
+        active={active && !isInAgentSubRoute}
+        contextMenuItems={dropdownMenu}
+        disabled={editing}
+        icon={<Icon color={cssVar.colorTextDescription} icon={TreeDownRightIcon} size={'small'} />}
+        onClick={handleClick}
+        title={title}
+      />
       <Editing id={id} title={title} toggleEditing={toggleEditing} />
     </>
   );

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/useDropdownMenu.tsx

@@ -1,7 +1,7 @@
 import { Icon, type MenuProps } from '@lobehub/ui';
 import { App } from 'antd';
 import { PencilLine, Trash } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
@@ -14,13 +14,13 @@ interface ThreadItemDropdownMenuProps {
 export const useThreadItemDropdownMenu = ({
   id,
   toggleEditing,
-}: ThreadItemDropdownMenuProps): MenuProps['items'] => {
+}: ThreadItemDropdownMenuProps): (() => MenuProps['items']) => {
   const { t } = useTranslation(['thread', 'common']);
   const { modal } = App.useApp();
 
   const [removeThread] = useChatStore((s) => [s.removeThread]);
 
-  return useMemo(() => {
+  return useCallback(() => {
     return [
       {
         icon: <Icon icon={PencilLine} />,

package/src/app/[variants]/(main)/group/profile/features/AgentBuilder/TopicSelector.tsx

@@ -1,6 +1,4 @@
-import { ActionIcon, Tag } from '@lobehub/ui';
-import { Dropdown } from 'antd';
-import type { ItemType } from 'antd/es/menu/interface';
+import { ActionIcon, DropdownMenu, type DropdownMenuCheckboxItem, Tag } from '@lobehub/ui';
 import { Clock3Icon, PlusIcon } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -32,15 +30,23 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
     [topics, activeTopicId],
   );
 
-  const items = useMemo<ItemType[]>(
+  const items = useMemo<DropdownMenuCheckboxItem[]>(
     () =>
       (topics || []).map((topic) => ({
+        checked: topic.id === activeTopicId,
+        closeOnClick: true,
         key: topic.id,
         label: topic.title,
-        onClick: () => switchTopic(topic.id),
+        onCheckedChange: (checked) => {
+          if (checked) {
+            switchTopic(topic.id);
+          }
+        },
+        type: 'checkbox',
       })),
-    [topics, t, switchTopic],
+    [topics, switchTopic, activeTopicId],
   );
+  const isEmpty = !topics || topics.length === 0;
 
   return (
     <NavHeader
@@ -53,22 +59,14 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
             size={DESKTOP_HEADER_ICON_SIZE}
             title={t('actions.addNewTopic')}
           />
-          <Dropdown
-            disabled={!topics || topics.length === 0}
-            menu={{
-              items,
-              selectedKeys: activeTopicId ? [activeTopicId] : [],
-            }}
-            overlayStyle={{
-              maxHeight: 600,
-              minWidth: 200,
-              overflowY: 'auto',
-            }}
+          <DropdownMenu
+            items={items}
             placement="bottomRight"
-            trigger={['click']}
+            popupProps={{ style: { maxHeight: 600, minWidth: 200, overflowY: 'auto' } }}
+            triggerProps={{ disabled: isEmpty }}
           >
-            <ActionIcon disabled={!topics || topics.length === 0} icon={Clock3Icon} />
-          </Dropdown>
+            <ActionIcon disabled={isEmpty} icon={Clock3Icon} />
+          </DropdownMenu>
         </>
       }
       showTogglePanelButton={false}

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/AgentGroupItem/index.tsx

@@ -1,6 +1,6 @@
 import { GROUP_CHAT_URL } from '@lobechat/const';
 import type { SidebarAgentItem } from '@lobechat/types';
-import { ActionIcon, Dropdown, Icon, type MenuProps } from '@lobehub/ui';
+import { ActionIcon, Icon } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { Loader2, PinIcon } from 'lucide-react';
 import { type CSSProperties, type DragEvent, memo, useCallback, useMemo } from 'react';
@@ -85,7 +85,7 @@ const GroupItem = memo<GroupItemProps>(({ item, style, className }) => {
     return <GroupAvatar avatars={(avatar as any) || []} size={22} />;
   }, [isUpdating, avatar]);
 
-  const dropdownMenu: MenuProps['items'] = useDropdownMenu({
+  const dropdownMenu = useDropdownMenu({
     group: undefined,
     id,
     openCreateGroupModal: () => {}, // Groups don't need this
@@ -97,29 +97,23 @@ const GroupItem = memo<GroupItemProps>(({ item, style, className }) => {
 
   return (
     <>
-      <Dropdown
-        menu={{
-          items: dropdownMenu,
-        }}
-        trigger={['contextMenu']}
-      >
-        <Link aria-label={id} to={groupUrl}>
-          <NavItem
-            actions={<Actions dropdownMenu={dropdownMenu} />}
-            className={className}
-            disabled={editing || isUpdating}
-            draggable={!editing && !isUpdating}
-            extra={pinIcon}
-            icon={avatarIcon}
-            key={id}
-            onDoubleClick={handleDoubleClick}
-            onDragEnd={handleDragEnd}
-            onDragStart={handleDragStart}
-            style={style}
-            title={displayTitle}
-          />
-        </Link>
-      </Dropdown>
+      <Link aria-label={id} to={groupUrl}>
+        <NavItem
+          actions={<Actions dropdownMenu={dropdownMenu} />}
+          className={className}
+          contextMenuItems={dropdownMenu}
+          disabled={editing || isUpdating}
+          draggable={!editing && !isUpdating}
+          extra={pinIcon}
+          icon={avatarIcon}
+          key={id}
+          onDoubleClick={handleDoubleClick}
+          onDragEnd={handleDragEnd}
+          onDragStart={handleDragStart}
+          style={style}
+          title={displayTitle}
+        />
+      </Link>
       <Editing id={id} title={displayTitle} toggleEditing={toggleEditing} />
     </>
   );

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/AgentItem/index.tsx

@@ -1,6 +1,6 @@
 import { SESSION_CHAT_URL } from '@lobechat/const';
 import type { SidebarAgentItem } from '@lobechat/types';
-import { ActionIcon, Dropdown, Icon, type MenuProps } from '@lobehub/ui';
+import { ActionIcon, Icon } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { Loader2, PinIcon } from 'lucide-react';
 import { type CSSProperties, type DragEvent, memo, useCallback, useMemo } from 'react';
@@ -96,7 +96,7 @@ const AgentItem = memo<AgentItemProps>(({ item, style, className }) => {
     return <Avatar avatar={typeof avatar === 'string' ? avatar : undefined} />;
   }, [isUpdating, avatar]);
 
-  const dropdownMenu: MenuProps['items'] = useDropdownMenu({
+  const dropdownMenu = useDropdownMenu({
     group: undefined, // TODO: pass group from parent if needed
     id,
     openCreateGroupModal: handleOpenCreateGroupModal,
@@ -108,30 +108,25 @@ const AgentItem = memo<AgentItemProps>(({ item, style, className }) => {
 
   return (
     <>
-      <Dropdown
-        menu={{
-          items: dropdownMenu,
-        }}
-        trigger={['contextMenu']}
-      >
-        <Link aria-label={id} to={agentUrl}>
-          <NavItem
-            actions={<Actions dropdownMenu={dropdownMenu} />}
-            className={className}
-            disabled={editing || isUpdating}
-            draggable={!editing && !isUpdating}
-            extra={pinIcon}
-            icon={avatarIcon}
-            key={id}
-            loading={isLoading}
-            onDoubleClick={handleDoubleClick}
-            onDragEnd={handleDragEnd}
-            onDragStart={handleDragStart}
-            style={style}
-            title={displayTitle}
-          />
-        </Link>
-      </Dropdown>
+      <Link aria-label={id} to={agentUrl}>
+        <NavItem
+          actions={<Actions dropdownMenu={dropdownMenu} />}
+          className={className}
+          contextMenuItems={dropdownMenu}
+          disabled={editing || isUpdating}
+          draggable={!editing && !isUpdating}
+          extra={pinIcon}
+          icon={avatarIcon}
+          key={id}
+          loading={isLoading}
+          onDoubleClick={handleDoubleClick}
+          onDragEnd={handleDragEnd}
+          onDragStart={handleDragStart}
+          style={style}
+          title={displayTitle}
+        />
+      </Link>
+
       <Editing
         avatar={typeof avatar === 'string' ? avatar : undefined}
         id={id}