feat(reader): tap notch area to scroll to top in scrolled mode, closes #3474 (#3510)

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

@@ -31,20 +31,28 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
 }) => {
   const _ = useTranslation();
   const { appService } = useEnv();
-  const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
+  const { hoveredBookKey, getView, setHoveredBookKey } = useReaderStore();
   const { systemUIVisible, statusBarHeight } = useThemeStore();
   const topInset = Math.max(
     gridInsets.top,
     appService?.isAndroidApp && systemUIVisible ? statusBarHeight / 2 : 0,
   );
 
+  const handleNotchClick = () => {
+    if (isScrolled) {
+      getView(bookKey)?.renderer.scrollToAnchor?.(0, 'anchor', true);
+    }
+  };
+
   return (
     <>
       <div
         className={clsx(
-          'absolute left-0 right-0 top-0 z-10',
+          'notch-area absolute left-0 right-0 top-0 z-10',
           isScrolled && !isVertical && 'bg-base-100',
         )}
+        role='none'
+        onClick={handleNotchClick}
         style={{
           height: `${topInset}px`,
         }}

apps/readest-app/src/types/view.ts

@@ -81,7 +81,7 @@ export interface FoliateView extends HTMLElement {
     goTo?: (params: { index: number; anchor?: number | RangeAnchor }) => void;
     setStyles?: (css: string) => void;
     getContents: () => { doc: Document; index?: number; overlayer?: unknown }[];
-    scrollToAnchor?: (anchor: number | Range) => void;
+    scrollToAnchor?: (anchor: number | Range, reason?: string, smooth?: boolean) => void;
     addEventListener: (
       type: string,
       listener: EventListener,