📱 fix: Mention Touch UX and MCP Tool UI Consistency (#11627)

* refactor: Reorganize imports in MCPTools component

- Updated import statements in MCPTools.tsx for improved clarity and maintainability.
- Moved `useAgentPanelContext` import above others and adjusted the order of `PermissionTypes` and `Permissions` imports to enhance readability.

* chore: imports

* refactor: Update MCPToolItem component props and styles

- Added new props: onToggleDefer, onToggleSelect, and onToggleProgrammatic for improved functionality.
- Adjusted class names for DropdownMenuLabel and text spans to enhance visual consistency and clarity.
- Increased width of DropdownMenuContent for better layout.

* refactor: Update DropdownMenu styles for improved visual consistency

- Changed background color of DropdownMenuContent and DropdownMenuSubContent from secondary to primary for better alignment with design standards.
- Updated text color to ensure readability against the new background, enhancing overall user experience.

* refactor: Update Mention component styles and interaction handling

- Increased ROW_HEIGHT in Mention and PromptsCommand components for improved layout consistency.
- Enhanced MentionItem component with touch event handling to improve mobile interaction experience.
- Updated button styles to ensure better visual alignment and responsiveness.

* refactor: Enhance MentionItem component event handling and button attributes

- Updated the onClick prop type in MentionItem to support both mouse and touch events, improving mobile interaction.
- Added a button type attribute for better accessibility and compliance with HTML standards.
- Refined event handling to ensure consistent behavior across different input methods.

* refactor: Add button type attribute to MentionItem for improved accessibility

- Added a type="button" attribute to the MentionItem component to enhance accessibility and compliance with HTML standards.
- This change ensures better interaction behavior across different input methods.

* refactor: Simplify MentionItem event handling for improved clarity

- Removed touch event handling from the MentionItem component, streamlining the onClick prop to only accept mouse events.
- This change simplifies the interaction logic, enhancing maintainability while retaining functionality for mouse interactions.

packages/client/src/components/DropdownMenu.tsx

@@ -30,7 +30,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'text-popover-foreground max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-40 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border-light bg-surface-secondary p-1 shadow-md 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',
+          'max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-40 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border-medium bg-surface-primary p-1 text-text-primary shadow-md 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',
           className,
         )}
         {...props}
@@ -198,7 +198,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'text-popover-foreground origin-(--radix-dropdown-menu-content-transform-origin) z-40 min-w-[8rem] overflow-hidden rounded-md border border-border-medium bg-surface-secondary p-1 shadow-lg 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',
+        'origin-(--radix-dropdown-menu-content-transform-origin) z-40 min-w-[8rem] overflow-hidden rounded-md border border-border-medium bg-surface-primary p-1 text-text-primary shadow-lg 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',
         className,
       )}
       {...props}