From 4c4de2990b808a90c1f43d62ce2b1e47ab2c3d88 Mon Sep 17 00:00:00 2001
From: chrox <chrox.huang@gmail.com>
Date: Thu, 14 Nov 2024 17:48:08 +0100
Subject: [PATCH] Various fixes on Webview2

---
 apps/readest-app/package.json                 |  6 +-
 apps/readest-app/src-tauri/tauri.conf.json    |  2 +-
 .../app/library/components/LibraryHeader.tsx  |  2 +-
 apps/readest-app/src/app/library/page.tsx     |  4 +-
 .../app/reader/components/sidebar/Content.tsx | 77 +++++++++++++------
 .../reader/components/sidebar/SearchBar.tsx   |  2 +-
 .../src/components/WindowButtons.tsx          |  8 +-
 apps/readest-app/src/store/readerStore.ts     |  4 +-
 apps/readest-app/src/styles/globals.css       |  9 +++
 apps/readest-app/src/utils/toc.ts             |  4 +-
 10 files changed, 78 insertions(+), 40 deletions(-)

diff --git a/apps/readest-app/package.json b/apps/readest-app/package.json
index a832ca25..e6831e85 100644
--- a/apps/readest-app/package.json
+++ b/apps/readest-app/package.json
@@ -13,7 +13,11 @@
     "copy-pdfjs-fonts": "dotenv -- cross-var cpx \"%PDFJS_FONTS_PATH%/{cmaps,standard_fonts}/*\" ./public/vendor/pdfjs",
     "copy-pdfjs-css": "dotenv -- cross-var cpx \"%PDFJS_STYLE_PATH%/{annotation_layer_builder,text_layer_builder}.css\" ./public/vendor/pdfjs",
     "copy-pdfjs": "pnpm copy-pdfjs-js && pnpm copy-pdfjs-fonts && pnpm copy-pdfjs-css",
-    "setup-pdfjs": "pnpm prepare-public-vendor && pnpm copy-pdfjs"
+    "setup-pdfjs": "pnpm prepare-public-vendor && pnpm copy-pdfjs",
+    "build-win-x64": "tauri build --target i686-pc-windows-msvc --bundles nsis",
+    "build-win-arm64": "tauri build --target aarch64-pc-windows-msvc --bundles nsis",
+    "build-linux-x64": "tauri build --target x86_64-unknown-linux-gnu --bundles appimage",
+    "build-macos-universial": "tauri build -t universal-apple-darwin --bundles dmg"
   },
   "dependencies": {
     "@tauri-apps/api": "2.1.1",
diff --git a/apps/readest-app/src-tauri/tauri.conf.json b/apps/readest-app/src-tauri/tauri.conf.json
index b338fd58..724e0bc0 100644
--- a/apps/readest-app/src-tauri/tauri.conf.json
+++ b/apps/readest-app/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Readest",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "identifier": "com.bilingify.digest",
   "build": {
     "frontendDist": "../out",
diff --git a/apps/readest-app/src/app/library/components/LibraryHeader.tsx b/apps/readest-app/src/app/library/components/LibraryHeader.tsx
index af1017e2..fbc14d36 100644
--- a/apps/readest-app/src/app/library/components/LibraryHeader.tsx
+++ b/apps/readest-app/src/app/library/components/LibraryHeader.tsx
@@ -56,7 +56,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
         isTrafficLightVisible ? 'pl-16' : 'pl-2',
       )}
     >
-      <div className='flex items-center justify-between'>
+      <div className='flex items-center justify-between space-x-6'>
         <div className='sm:w relative flex w-full items-center pl-4'>
           <span className='absolute left-8 text-gray-500'>
             <FaSearch className='h-4 w-4' />
diff --git a/apps/readest-app/src/app/library/page.tsx b/apps/readest-app/src/app/library/page.tsx
index 41bc990b..cfd72cb4 100644
--- a/apps/readest-app/src/app/library/page.tsx
+++ b/apps/readest-app/src/app/library/page.tsx
@@ -77,13 +77,13 @@ const LibraryPage = () => {
   }
 
   return (
-    <div className='rounded-window min-h-screen select-none bg-gray-100'>
+    <div className='rounded-window min-h-screen select-none overflow-hidden bg-gray-100'>
       <LibraryHeader
         isSelectMode={isSelectMode}
         onImportBooks={handleImportBooks}
         onToggleSelectMode={handleToggleSelectMode}
       />
-      <div className='flex-grow pt-12'>
+      <div className='flex-grow'>
         {loading || libraryBooks.length > 0 ? (
           <div className='hero-content h-full overflow-y-auto px-2 py-4'>
             <Spinner loading={loading} />
diff --git a/apps/readest-app/src/app/reader/components/sidebar/Content.tsx b/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
index bf017162..59ef290c 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { BookDoc } from '@/libs/document';
 import TOCView from './TOCView';
@@ -11,30 +11,59 @@ const SidebarContent: React.FC<{
   bookDoc: BookDoc;
   sideBarBookKey: string;
   onTabChange: (tab: string) => void;
-}> = ({ activeTab, bookDoc, sideBarBookKey, onTabChange }) => (
-  <>
-    <div
-      className={clsx(
-        'sidebar-content flex min-h-0 flex-grow flex-col',
-        'font-sans text-sm font-light shadow-inner',
-      )}
-    >
-      <div className='overflow-y-auto'>
-        {activeTab === 'toc' && bookDoc.toc && (
-          <TOCView toc={bookDoc.toc} bookKey={sideBarBookKey} />
-        )}
-        {activeTab === 'annotations' && (
-          <BooknoteView type='annotation' toc={bookDoc.toc} bookKey={sideBarBookKey} />
-        )}
-        {activeTab === 'bookmarks' && (
-          <BooknoteView type='bookmark' toc={bookDoc.toc} bookKey={sideBarBookKey} />
+}> = ({ activeTab, bookDoc, sideBarBookKey, onTabChange }) => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    let scrollTimeout: ReturnType<typeof setTimeout>;
+    const showScrollbar = () => {
+      container.classList.remove('hidden-scrollbar');
+    };
+    const hideScrollbar = () => {
+      container.classList.add('hidden-scrollbar');
+    };
+
+    hideScrollbar();
+    const handleScroll = () => {
+      showScrollbar();
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(hideScrollbar, 2000);
+    };
+    container.addEventListener('scroll', handleScroll);
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+      clearTimeout(scrollTimeout);
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        className={clsx(
+          'sidebar-content flex min-h-0 flex-grow flex-col',
+          'font-sans text-sm font-normal shadow-inner',
         )}
+      >
+        <div ref={scrollContainerRef} className='scroll-container overflow-y-auto'>
+          {activeTab === 'toc' && bookDoc.toc && (
+            <TOCView toc={bookDoc.toc} bookKey={sideBarBookKey} />
+          )}
+          {activeTab === 'annotations' && (
+            <BooknoteView type='annotation' toc={bookDoc.toc} bookKey={sideBarBookKey} />
+          )}
+          {activeTab === 'bookmarks' && (
+            <BooknoteView type='bookmark' toc={bookDoc.toc} bookKey={sideBarBookKey} />
+          )}
+        </div>
       </div>
-    </div>
-    <div className='flex-shrink-0'>
-      <TabNavigation activeTab={activeTab} onTabChange={onTabChange} />
-    </div>
-  </>
-);
+      <div className='flex-shrink-0'>
+        <TabNavigation activeTab={activeTab} onTabChange={onTabChange} />
+      </div>
+    </>
+  );
+};
 
 export default SidebarContent;
diff --git a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
index 1da261e4..c4e4a254 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
@@ -31,7 +31,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
 
   const queuedSearchTerm = useRef('');
   const isSearchPending = useRef(false);
-  const searchTimeout = useRef<NodeJS.Timeout | null>(null);
+  const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     handleSearchTermChange(searchTerm);
diff --git a/apps/readest-app/src/components/WindowButtons.tsx b/apps/readest-app/src/components/WindowButtons.tsx
index aeffad31..1a7c2f54 100644
--- a/apps/readest-app/src/components/WindowButtons.tsx
+++ b/apps/readest-app/src/components/WindowButtons.tsx
@@ -27,11 +27,7 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
   const handleMouseDown = async (e: MouseEvent) => {
     const target = e.target as HTMLElement;
 
-    if (
-      target.closest('#titlebar-minimize') ||
-      target.closest('#titlebar-maximize') ||
-      target.closest('#titlebar-close')
-    ) {
+    if (target !== e.currentTarget) {
       return;
     }
 
@@ -80,7 +76,7 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
     <div
       ref={parentRef}
       className={clsx(
-        'window-buttons flex h-8 items-center justify-end space-x-2 pl-6',
+        'window-buttons flex h-8 items-center justify-end space-x-2',
         showClose || showMaximize || showMinimize ? 'visible' : 'hidden',
         className,
       )}
diff --git a/apps/readest-app/src/store/readerStore.ts b/apps/readest-app/src/store/readerStore.ts
index d1c799cd..51d7967a 100644
--- a/apps/readest-app/src/store/readerStore.ts
+++ b/apps/readest-app/src/store/readerStore.ts
@@ -272,7 +272,9 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
         console.log('Loading book', key);
         const { book: loadedBookDoc } = await new DocumentLoader(file).open();
         const bookDoc = loadedBookDoc as BookDoc;
-        updateTocID(bookDoc.toc);
+        if (bookDoc.toc) {
+          updateTocID(bookDoc.toc);
+        }
         set((state) => ({
           booksData: {
             ...state.booksData,
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index abca7faf..82109af6 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -175,3 +175,12 @@ foliate-view {
   max-height: 48px;
   visibility: visible;
 }
+
+.scroll-container {
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}
+
+.scroll-container.hidden-scrollbar {
+  scrollbar-width: none;
+}
diff --git a/apps/readest-app/src/utils/toc.ts b/apps/readest-app/src/utils/toc.ts
index 6864b94d..8979eadc 100644
--- a/apps/readest-app/src/utils/toc.ts
+++ b/apps/readest-app/src/utils/toc.ts
@@ -17,9 +17,7 @@ export const findParentPath = (toc: TOCItem[], href: string): TOCItem[] => {
 
 export const updateTocID = (items: TOCItem[], index = 0): number => {
   items.forEach((item) => {
-    if (item.id === undefined) {
-      item.id = index++;
-    }
+    item.id ??= index++;
     if (item.subitems) {
       index = updateTocID(item.subitems, index);
     }