hover states

apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx

@@ -26,6 +26,7 @@ export const useCreateShortcutsMentionsSuggestions = (
   setOpenCreateShortcutModal: (open: boolean) => void
 ) => {
   const navigate = useNavigate();
+  const createShortcutForMention = useCreateShortcutForMention();
 
   return useMemo(
     () =>
@@ -68,40 +69,45 @@ export const useCreateShortcutsMentionsSuggestions = (
   );
 };
 
-const createShortcutForMention = (shortcut: Shortcut): MentionTriggerItem<string> => {
-  return {
-    value: shortcut.id,
-    label: shortcut.name,
-    icon: <PenWriting />,
-    secondaryContent: (
-      <MentionSecondaryContentDropdown
-        items={[
-          {
-            label: 'Edit',
-            icon: <PenWriting />,
-            value: 'edit',
-            onClick: () => {
-              console.log('edit');
+export const useCreateShortcutForMention = () => {
+  const createShortcutForMention = (shortcut: Shortcut): MentionTriggerItem<string> => {
+    return {
+      value: shortcut.id,
+      label: shortcut.name,
+      icon: <PenWriting />,
+      secondaryContent: (
+        <MentionSecondaryContentDropdown
+          items={[
+            {
+              label: 'Edit',
+              icon: <PenWriting />,
+              value: 'edit',
+              onClick: () => {
+                console.log('edit');
+              },
             },
-          },
-          {
-            label: 'Delete',
-            icon: <Trash />,
-            value: 'delete',
-            onClick: () => {
-              console.log('delete');
+            {
+              label: 'Delete',
+              icon: <Trash />,
+              value: 'delete',
+              onClick: () => {
+                console.log('delete');
+              },
             },
-          },
-        ]}
-      />
-    ),
+          ]}
+        />
+      ),
+    };
   };
+
+  return createShortcutForMention;
 };
 export const useShortcutsSuggestions = (
   shortcuts: ListShortcutsResponse['shortcuts'],
   setOpenCreateShortcutModal: (open: boolean) => void,
   mentionInputSuggestionsRef: React.RefObject<MentionInputSuggestionsRef | null>
 ): MentionInputSuggestionsProps['suggestionItems'] => {
+  const createShortcutForMention = useCreateShortcutForMention();
   return useMemo(() => {
     const shortcutsItems = shortcuts.map<MentionInputSuggestionsDropdownItem>((shortcut) => {
       return {

apps/web/src/components/ui/inputs/MentionInput/MentionSecondaryContentDropdown.tsx

@@ -17,7 +17,7 @@ export const MentionSecondaryContentDropdown = ({
       <Button
         variant={'ghost'}
         className={cn(
-          'hover:bg-item-active hidden group-data-[selected=true]/mention-list-item:flex -mr-1.5',
+          'hover:bg-item-active hidden group-hover/mention-list-item:flex group-data-[selected=true]/mention-list-item:flex -mr-1.5',
           open && 'flex!'
         )}
         prefix={<Dots />}

apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsItem.tsx

@@ -1,6 +1,5 @@
-import { Command, useCommandState } from 'cmdk';
+import { Command } from 'cmdk';
 import type React from 'react';
-import { useMount } from '@/hooks/useMount';
 import { cn } from '@/lib/utils';
 import { Popover } from '../../popover';
 import type {