feat(annotator): support vertical layout for annotation editor (#2882)

apps/readest-app/src/app/reader/components/annotator/QuickActionMenu.tsx

@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 import React from 'react';
-import { MdCheck } from 'react-icons/md';
 
 import { AnnotationToolType } from '@/types/annotator';
 import { useTranslation } from '@/hooks/useTranslation';
 import { annotationToolQuickActions } from './AnnotationTools';
+import { eventDispatcher } from '@/utils/event';
 import MenuItem from '@/components/MenuItem';
 import Menu from '@/components/Menu';
 
@@ -23,6 +23,20 @@ const QuickActionMenu: React.FC<QuickActionMenuProps> = ({
 
   const handleActionClick = (action: AnnotationToolType) => {
     onActionSelect(action);
+    if (selectedAction === action) {
+      eventDispatcher.dispatch('toast', {
+        type: 'info',
+        timeout: 2000,
+        message: _('Quick action disabled'),
+      });
+    } else {
+      eventDispatcher.dispatch('toast', {
+        type: 'info',
+        timeout: 2000,
+        message: _(annotationToolQuickActions.find((btn) => btn.type === action)?.tooltip || ''),
+      });
+    }
+    setIsDropdownOpen?.(false);
   };
 
   return (
@@ -41,7 +55,8 @@ const QuickActionMenu: React.FC<QuickActionMenuProps> = ({
           key={button.type}
           label={_(button.label)}
           tooltip={_(button.tooltip)}
-          Icon={selectedAction === button.type ? MdCheck : button.Icon}
+          buttonClass={selectedAction === button.type ? 'bg-base-300/85' : ''}
+          Icon={button.Icon}
           onClick={() => handleActionClick(button.type)}
         />
       ))}