feat: show annotation create time and various other UI fixes (#1412)

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { FiSearch } from 'react-icons/fi';
 import { FiCopy } from 'react-icons/fi';
 import { PiHighlighterFill } from 'react-icons/pi';
@@ -26,6 +26,7 @@ import { useTextSelector } from '../../hooks/useTextSelector';
 import { getPopupPosition, getPosition, Position, TextSelection } from '@/utils/sel';
 import { eventDispatcher } from '@/utils/event';
 import { findTocItemBS } from '@/utils/toc';
+import { throttle } from '@/utils/throttle';
 import { HIGHLIGHT_COLOR_HEX } from '@/services/constants';
 import AnnotationPopup from './AnnotationPopup';
 import WiktionaryPopup from './WiktionaryPopup';
@@ -78,13 +79,17 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const annotPopupHeight = useResponsiveSize(44);
   const androidSelectionHandlerHeight = 0;
 
-  const handleDismissPopup = () => {
-    setSelection(null);
-    setShowAnnotPopup(false);
-    setShowWiktionaryPopup(false);
-    setShowWikipediaPopup(false);
-    setShowDeepLPopup(false);
-  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleDismissPopup = useCallback(
+    throttle(() => {
+      setSelection(null);
+      setShowAnnotPopup(false);
+      setShowWiktionaryPopup(false);
+      setShowWikipediaPopup(false);
+      setShowDeepLPopup(false);
+    }, 500),
+    [],
+  );
 
   const handleDismissPopupAndSelection = () => {
     handleDismissPopup();

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

@@ -69,16 +69,18 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
               className={clsx(
                 'w-4 p-0 text-center leading-none',
                 style === 'highlight' &&
-                  (selectedStyle === 'highlight' ? `bg-${selectedColor}-400` : `bg-gray-300`),
+                  (selectedStyle === 'highlight'
+                    ? `bg-${selectedColor}-300 pt-[2px]`
+                    : `bg-gray-300 pt-[2px]`),
                 (style === 'underline' || style === 'squiggly') &&
                   'text-gray-300 underline decoration-2',
                 style === 'underline' &&
                   (selectedStyle === 'underline'
-                    ? `decoration-${selectedColor}-400`
+                    ? `decoration-${selectedColor}-300`
                     : `decoration-gray-300`),
                 style === 'squiggly' &&
                   (selectedStyle === 'squiggly'
-                    ? `decoration-wavy decoration-${selectedColor}-400`
+                    ? `decoration-wavy decoration-${selectedColor}-300`
                     : `decoration-gray-300 decoration-wavy`),
               )}
             >
@@ -100,10 +102,10 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
             key={color}
             onClick={() => handleSelectColor(color)}
             style={{ width: size16, height: size16 }}
-            className={clsx(`rounded-full p-0`, selectedColor !== color && `bg-${color}-400`)}
+            className={clsx(`rounded-full p-0`, selectedColor !== color && `bg-${color}-300`)}
           >
             {selectedColor === color && (
-              <FaCheckCircle size={size16} className={clsx(`fill-${color}-400`)} />
+              <FaCheckCircle size={size16} className={clsx(`fill-${color}-300`)} />
             )}
           </button>
         ))}