v2.30 - Fix Slide Selector

Author: imjustinliao

frontend/src/components/blocks/TextbookRenderer.tsx

@@ -270,8 +270,6 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
     const wheelAccRef = useRef(0)
     const [clickedIdx, setClickedIdx] = useState<number | null>(null)
     const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-    const dragRef = useRef<{ startY: number; startIdx: number } | null>(null)
-    const dragIdxRef = useRef<number | null>(null)
 
     /* Compute fractional index from main content scroll position */
     useEffect(() => {
@@ -292,21 +290,19 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
                 }
             }
 
-            const scrollY = container.scrollTop
-            const viewportMid = scrollY + container.clientHeight * 0.3
-
-            let frac = 0
-            for (let i = 0; i < positions.length - 1; i++) {
-                if (viewportMid >= positions[i] && viewportMid < positions[i + 1]) {
-                    const range = positions[i + 1] - positions[i]
-                    frac = range > 0 ? i + (viewportMid - positions[i]) / range : i
+            /* Active = last entry whose heading is at or above the viewport reference point.
+               Each entry "owns" the range from its heading down to the next entry's heading.
+               Reference = viewport top + small offset so once a heading scrolls past the
+               top area the indicator switches to it. */
+            const refPoint = container.scrollTop + 100
+            let activeIdx = 0
+            for (let i = positions.length - 1; i >= 0; i--) {
+                if (refPoint >= positions[i]) {
+                    activeIdx = i
                     break
                 }
-                if (i === positions.length - 2 && viewportMid >= positions[i + 1]) {
-                    frac = positions.length - 1
-                }
             }
-            setFractionalIndex(frac)
+            setFractionalIndex(activeIdx)
         }
 
         const onScroll = () => {
@@ -356,33 +352,6 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
         }
     }, [visualFractionalIndex, clickedIdx, entries, contentScrollRef])
 
-    /* iOS picker drag: pointer down/move/up on strip to scroll through entries */
-    const handleDragStart = useCallback((e: React.PointerEvent) => {
-        const idx = clickedIdx ?? Math.round(fractionalIndex)
-        dragRef.current = { startY: e.clientY, startIdx: idx }
-        dragIdxRef.current = idx
-        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
-    }, [clickedIdx, fractionalIndex])
-
-    const handleDragMove = useCallback((e: React.PointerEvent) => {
-        if (!dragRef.current) return
-        const deltaY = e.clientY - dragRef.current.startY
-        if (Math.abs(deltaY) < 5) return
-        const step = TOC_BAR_HEIGHT + TOC_BAR_GAP
-        const deltaIdx = Math.round(-deltaY / step)
-        const newIdx = Math.max(0, Math.min(entries.length - 1, dragRef.current.startIdx + deltaIdx))
-        if (entries[newIdx] && newIdx !== dragIdxRef.current) {
-            dragIdxRef.current = newIdx
-            setClickedIdx(newIdx)
-            scrollContentToEntry(entries[newIdx], contentScrollRef)
-        }
-    }, [entries, contentScrollRef])
-
-    const handleDragEnd = useCallback(() => {
-        dragRef.current = null
-        dragIdxRef.current = null
-    }, [])
-
     if (entries.length < 2) return null
 
     const rowStep = TOC_BAR_HEIGHT + TOC_BAR_GAP
@@ -413,9 +382,6 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
             onMouseEnter={() => setIsHoveringStrip(true)}
             onMouseLeave={() => { setIsHoveringStrip(false); setHoveredIdx(null) }}
             onWheel={handleWheel}
-            onPointerDown={handleDragStart}
-            onPointerMove={handleDragMove}
-            onPointerUp={handleDragEnd}
             style={{
                 position: "fixed",
                 right: 0,
@@ -440,7 +406,7 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
                     boxShadow: stripShadow,
                     backdropFilter: "blur(16px)",
                     WebkitBackdropFilter: "blur(16px)",
-                    opacity: isHoveringStrip ? 1 : 0.5,
+                    opacity: isHoveringStrip ? 1 : 0,
                     transition: "opacity 0.3s ease",
                     pointerEvents: "none",
                 }}

frontend/src/components/layout/Footer.tsx

@@ -110,7 +110,7 @@ const fontStyle: React.CSSProperties = {
   color: "#FFFFFF",
 }
 
-const APP_ROUTE_PREFIXES = ["/app", "/session", "/blocks", "/documents", "/feedback", "/profile", "/settings"]
+const APP_ROUTE_PREFIXES = ["/app", "/session", "/blocks", "/block-lab", "/documents", "/feedback", "/profile", "/settings"]
 
 function isAppRoutePath(path: string): boolean {
   return APP_ROUTE_PREFIXES.some((p) => path.startsWith(p))