layout: fix nested toc items not expanded in very long toc list, closes #1625 (#1629)

apps/readest-app/next.config.mjs

@@ -32,16 +32,18 @@ const nextConfig = {
   // Configure assetPrefix or else the server won't properly resolve your assets.
   assetPrefix: '',
   reactStrictMode: true,
-  transpilePackages: [
-    'i18next-browser-languagedetector',
-    'react-i18next',
-    'i18next',
-    '@ducanh2912/next-pwa',
-    '@tauri-apps',
-    'highlight.js',
-    'foliate-js',
-    'marked',
-  ],
+  transpilePackages: !isDev
+    ? [
+        'i18next-browser-languagedetector',
+        'react-i18next',
+        'i18next',
+        '@ducanh2912/next-pwa',
+        '@tauri-apps',
+        'highlight.js',
+        'foliate-js',
+        'marked',
+      ]
+    : [],
   async headers() {
     return [
       {

apps/readest-app/package.json

@@ -37,7 +37,7 @@
     "upload": "NEXT_PUBLIC_APP_PLATFORM=web opennextjs-cloudflare build && opennextjs-cloudflare upload",
     "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts",
     "check:optional-chaining": "count=$(grep -rno '\\?\\.[a-zA-Z_$]' .next/static/chunks/* out/_next/static/chunks/* | wc -l); if [ \"$count\" -gt 0 ]; then echo '❌ Optional chaining found in output!'; exit 1; else echo '✅ No optional chaining found.'; fi",
-    "check:all": "npm run check:optional-chaining",
+    "check:all": "pnpm check:optional-chaining",
     "build-check": "pnpm build && pnpm build-web && pnpm check:all"
   },
   "dependencies": {

apps/readest-app/src/app/reader/components/sidebar/TOCView.tsx

@@ -117,7 +117,7 @@ const TOCView: React.FC<{
         resizeObserver.disconnect();
       }
     };
-  }, []);
+  }, [expandedItems]);
 
   const activeHref = useMemo(() => progress?.sectionHref || null, [progress?.sectionHref]);
   const flatItems = useFlattenedTOC(toc, expandedItems);
@@ -213,7 +213,11 @@ const TOCView: React.FC<{
   }, [flatItems, scrollToActiveItem]);
 
   return flatItems.length > 256 ? (
-    <div className='rounded' data-overlayscrollbars-initialize='' ref={containerRef}>
+    <div
+      className='virtual-list rounded pt-2'
+      data-overlayscrollbars-initialize=''
+      ref={containerRef}
+    >
       <VirtualList
         ref={vitualListRef}
         outerRef={listOuterRef}
@@ -233,7 +237,7 @@ const TOCView: React.FC<{
       </VirtualList>
     </div>
   ) : (
-    <div className='rounded pt-2' ref={staticListRef}>
+    <div className='static-list rounded pt-2' ref={staticListRef}>
       {flatItems.map((flatItem, index) => (
         <StaticListRow
           key={`static-row-${index}`}