fix: handle hydration missing menu and style

#258

Author: pionxzh

src/main.tsx

@@ -16,13 +16,14 @@ function main() {
         styleEl.id = 'sentinel-css'
         document.head.append(styleEl)
 
-        const injectionWeakMap = new WeakMap()
+        const injectionMap = new Map<HTMLElement, HTMLElement>()
 
-        sentinel.on('nav', (nav) => {
-            if (injectionWeakMap.has(nav)) return
-            injectionWeakMap.set(nav, true)
+        const injectNavMenu = (nav: HTMLElement) => {
+            if (injectionMap.has(nav)) return
 
             const container = getMenuContainer()
+            injectionMap.set(nav, container)
+
             const chatList = nav.querySelector(':scope > div.overflow-y-auto, :scope > div.overflow-y-hidden')
             if (chatList) {
                 chatList.after(container)
@@ -31,7 +32,21 @@ function main() {
                 // fallback to the bottom of the nav
                 nav.append(container)
             }
-        })
+        }
+
+        sentinel.on('nav', injectNavMenu)
+
+        setInterval(() => {
+            injectionMap.forEach((container, nav) => {
+                if (!nav.isConnected) {
+                    container.remove()
+                    injectionMap.delete(nav)
+                }
+            })
+
+            const navList = Array.from(document.querySelectorAll('nav')).filter(nav => !injectionMap.has(nav))
+            navList.forEach(injectNavMenu)
+        }, 300)
 
         // Support for share page
         if (isSharePage()) {

vite.config.ts

@@ -73,6 +73,17 @@ export default defineConfig({
                     ['jszip', cdn.jsdelivr('JSZip', 'dist/jszip.min.js')],
                     ['html2canvas', cdn.jsdelivr('html2canvas', 'dist/html2canvas.min.js')],
                 ],
+                cssSideEffects() {
+                    return (e) => {
+                        const o = document.createElement('style')
+                        o.textContent = e
+                        document.head.append(o)
+                        setInterval(() => {
+                            if (o.isConnected) return
+                            document.head.append(o)
+                        }, 300)
+                    }
+                },
             },
             server: {
                 open: true,