fix: no padding top for bookmark ribbon (#851)

apps/readest-app/src/app/reader/components/BooksGrid.tsx

@@ -27,7 +27,7 @@ interface BooksGridProps {
 const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
   const { appService } = useEnv();
   const { getConfig, getBookData } = useBookDataStore();
-  const { getProgress, getViewState, getViewSettings } = useReaderStore();
+  const { getProgress, getViewState, getViewSettings, hoveredBookKey } = useReaderStore();
   const { isSideBarVisible, sideBarBookKey } = useSidebarStore();
   const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useSettingsStore();
   const gridTemplate = getGridTemplate(bookKeys.length, window.innerWidth / window.innerHeight);
@@ -73,7 +73,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
               !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window',
             )}
           >
-            {isBookmarked && <Ribbon width={`${horizontalGapPercent}%`} />}
+            {isBookmarked && !hoveredBookKey && <Ribbon width={`${horizontalGapPercent}%`} />}
             <HeaderBar
               bookKey={bookKey}
               bookTitle={book.title}

apps/readest-app/src/app/reader/components/Ribbon.tsx

@@ -5,22 +5,24 @@ interface RibbonProps {
   width: string;
 }
 
-const Ribbon: React.FC<RibbonProps> = ({ width }) => {
+const Ribbon: React.FC<RibbonProps> = ({}) => {
   return (
     <div
-      className={clsx('absolute inset-0 z-10 flex h-11 justify-center')}
-      style={{ width: width }}
+      className={clsx(
+        'fixed inset-0 z-10 flex w-8 justify-center sm:w-6',
+        'h-[calc(env(safe-area-inset-top)+44px)]',
+      )}
     >
       <svg
-        stroke='currentColor'
-        fill='currentColor'
-        strokeWidth='0'
-        version='1'
-        viewBox='0 0 20 45'
-        enableBackground='new 0 0 20 45'
+        width='100%'
+        height='100%'
+        preserveAspectRatio='none'
+        viewBox='0 0 100 100'
         xmlns='http://www.w3.org/2000/svg'
+        shapeRendering='geometricPrecision'
+        imageRendering='optimizeQuality'
       >
-        <path fill='#F44336' d='M 20 45 L 10 35 L 0 45 L 0 0 L 20 0'></path>
+        <polygon fill='#F44336' points='100 100, 50 78, 0 100, 0 0, 100 0' />
       </svg>
     </div>
   );