feat(annotator): support rendering vertical annotation bubbles (#2801)

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { BookNote } from '@/types/book';
 import { useEnv } from '@/context/EnvContext';
 import { useBookDataStore } from '@/store/bookDataStore';
@@ -31,7 +31,11 @@ const AnnotationNotes: React.FC<AnnotationNotesProps> = ({
   const { setHoveredBookKey } = useReaderStore();
   const { setSideBarVisible } = useSidebarStore();
   const config = getConfig(bookKey);
-  const maxSize = useResponsiveSize(300);
+  const maxSize = useResponsiveSize(150);
+
+  const sortedNotes = useMemo(() => {
+    return [...notes].sort((a, b) => b.updatedAt - a.updatedAt);
+  }, [notes]);
 
   const handleShowAnnotation = (note: BookNote) => {
     if (!note.id) return;
@@ -51,10 +55,7 @@ const AnnotationNotes: React.FC<AnnotationNotesProps> = ({
 
   return (
     <div
-      className={clsx(
-        'annotation-notes absolute flex overflow-y-auto rounded-lg text-white shadow-lg',
-        'flex-col',
-      )}
+      className={clsx('annotation-notes absolute flex rounded-lg text-white')}
       style={{
         ...(isVertical
           ? {
@@ -62,35 +63,61 @@ const AnnotationNotes: React.FC<AnnotationNotesProps> = ({
               left: `${triangleDir === 'right' ? `${popupWidth + 16}px` : undefined}`,
               height: `${popupHeight}px`,
               maxWidth: `${maxSize}px`,
+              overflowX: 'auto',
             }
           : {
               top: triangleDir === 'up' ? undefined : `${popupHeight + 16}px`,
               bottom: triangleDir === 'up' ? `${popupHeight + 16}px` : undefined,
               width: `${popupWidth}px`,
               maxHeight: `${maxSize}px`,
+              overflowY: 'auto',
             }),
         scrollbarWidth: 'thin',
       }}
     >
-      <div className={clsx('flex gap-4', isVertical ? 'h-full flex-row' : 'flex-col')}>
-        {notes.map((note, index) => (
+      <div
+        className={clsx('flex gap-4', isVertical ? 'h-full flex-row' : 'flex-col')}
+        style={
+          isVertical
+            ? {
+                display: 'grid',
+                gridAutoFlow: 'column',
+                gridAutoColumns: 'max-content',
+                minWidth: 'min-content',
+                height: `${popupHeight}px`,
+                maxHeight: `${popupHeight}px`,
+              }
+            : {}
+        }
+      >
+        {sortedNotes.map((note, index) => (
           <div
             role='none'
             key={note.id || index}
             onClick={() => handleShowAnnotation?.(note)}
-            className='cursor-pointer rounded-lg bg-gray-600 p-4 shadow-md transition-colors'
+            className={clsx('cursor-pointer rounded-lg bg-gray-600 shadow-lg transition-colors')}
+            style={
+              isVertical
+                ? {
+                    minWidth: 'max-content',
+                    height: `${popupHeight}px`,
+                    maxHeight: `${popupHeight}px`,
+                  }
+                : {}
+            }
           >
             {note.note && (
               <div
                 dir='auto'
                 className={clsx(
-                  'hyphens-auto text-justify font-sans text-sm text-white',
+                  'm-4 hyphens-auto text-justify font-sans text-sm text-white',
                   isVertical && 'writing-vertical-rl',
                 )}
                 style={
                   isVertical
                     ? {
                         fontFeatureSettings: "'vrt2' 1, 'vert' 1",
+                        minWidth: 'max-content',
                       }
                     : {}
                 }