v2.29 - Fix Slide Selector, Reposition Block Lab

Author: imjustinliao

frontend/src/components/app/views/BlocksView.tsx

@@ -165,9 +165,40 @@ export function BlocksView() {
 
   return (
     <div style={{ padding: "40px", maxWidth: "720px", margin: "0 auto", width: "100%", flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
-      <h2 style={{ fontFamily: FONTS.sans, fontSize: "28px", fontWeight: 600, color: COLORS.textPrimary, marginBottom: "6px", flexShrink: 0 }}>
-        Blocks
-      </h2>
+      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "12px", marginBottom: "6px", flexShrink: 0 }}>
+        <h2 style={{ fontFamily: FONTS.sans, fontSize: "28px", fontWeight: 600, color: COLORS.textPrimary, margin: 0 }}>
+          Blocks
+        </h2>
+        <Link
+          href="/block-lab"
+          title="Block Lab — Component showcase"
+          aria-label="Block Lab — Component showcase"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 28,
+            height: 28,
+            borderRadius: "50%",
+            color: COLORS.textTertiary,
+            transition: "color 0.15s ease, background 0.15s ease",
+            flexShrink: 0,
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = COLORS.accent
+            e.currentTarget.style.background = COLORS.accentDim
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = COLORS.textTertiary
+            e.currentTarget.style.background = "transparent"
+          }}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4M12 8h.01" />
+          </svg>
+        </Link>
+      </div>
       <p style={{ color: COLORS.iconDefault, fontSize: "14px", fontFamily: FONTS.sans, marginBottom: "16px", flexShrink: 0 }}>
         All your explorations in one place.
       </p>
@@ -210,32 +241,6 @@ export function BlocksView() {
           )
         })}
       </div>
-
-      {/* Block Lab link */}
-      <Link
-        href="/block-lab"
-        style={{
-          flexShrink: 0,
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          padding: "12px 16px",
-          marginTop: 8,
-          borderRadius: 10,
-          border: `1px solid ${COLORS.border}`,
-          background: "transparent",
-          color: COLORS.textTertiary,
-          fontFamily: FONTS.sans,
-          fontSize: 13,
-          textDecoration: "none",
-          transition: "background 0.15s, color 0.15s",
-        }}
-        onMouseEnter={(e) => { e.currentTarget.style.background = COLORS.hover; e.currentTarget.style.color = COLORS.textPrimary }}
-        onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = COLORS.textTertiary }}
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
-        Block Lab — Component showcase
-      </Link>
     </div>
   )
 }

frontend/src/components/blocks/TextbookRenderer.tsx

@@ -228,8 +228,6 @@ const TOC_BAR_HEIGHT = 3.5
 const TOC_SECTION_WIDTH = 38
 const TOC_SUBSECTION_WIDTH = 22
 const TOC_BAR_GAP = 12
-const TOC_PERSPECTIVE = 200
-const TOC_MAX_ROTATE_DEG = 60
 const TOC_STRIP_WIDTH = 56
 
 /** Scroll main content to a TOC entry (section or subsection). */
@@ -270,6 +268,10 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
     const [isHoveringStrip, setIsHoveringStrip] = useState(false)
     const rafRef = useRef<number>(0)
     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(() => {
@@ -310,23 +312,29 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
         const onScroll = () => {
             cancelAnimationFrame(rafRef.current)
             rafRef.current = requestAnimationFrame(computeFractional)
+            /* Clear click lock after scroll animation settles */
+            if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current)
+            scrollTimeoutRef.current = setTimeout(() => setClickedIdx(null), 600)
         }
 
         computeFractional()
         container.addEventListener("scroll", onScroll, { passive: true })
         return () => {
             container.removeEventListener("scroll", onScroll)
             cancelAnimationFrame(rafRef.current)
+            if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current)
         }
     }, [entries, contentScrollRef])
 
     const activeEntryIndex = useMemo(() => {
         if (!activeEntryId) return -1
         return entries.findIndex((entry) => entry.id === activeEntryId)
     }, [activeEntryId, entries])
-    const visualFractionalIndex = activeEntryIndex >= 0 ? activeEntryIndex : fractionalIndex
+    const visualFractionalIndex = clickedIdx !== null ? clickedIdx : activeEntryIndex >= 0 ? activeEntryIndex : fractionalIndex
 
-    const handleBarClick = useCallback((entry: TocEntry) => {
+    const handleBarClick = useCallback((entry: TocEntry, idx: number) => {
+        setClickedIdx(idx)
+        if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current)
         scrollContentToEntry(entry, contentScrollRef)
     }, [contentScrollRef])
 
@@ -338,13 +346,42 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
         if (Math.abs(wheelAccRef.current) >= threshold) {
             const direction = wheelAccRef.current > 0 ? 1 : -1
             wheelAccRef.current = 0
-            const currentIdx = Math.round(visualFractionalIndex)
+            const currentIdx = clickedIdx !== null ? clickedIdx : Math.round(visualFractionalIndex)
             const nextIdx = Math.max(0, Math.min(entries.length - 1, currentIdx + direction))
             if (entries[nextIdx]) {
+                setClickedIdx(nextIdx)
+                if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current)
                 scrollContentToEntry(entries[nextIdx], contentScrollRef)
             }
         }
-    }, [visualFractionalIndex, entries, contentScrollRef])
+    }, [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
 
@@ -376,6 +413,9 @@ 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,
@@ -400,7 +440,7 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
                     boxShadow: stripShadow,
                     backdropFilter: "blur(16px)",
                     WebkitBackdropFilter: "blur(16px)",
-                    opacity: isHoveringStrip ? 1 : 0,
+                    opacity: isHoveringStrip ? 1 : 0.5,
                     transition: "opacity 0.3s ease",
                     pointerEvents: "none",
                 }}
@@ -451,7 +491,7 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
                                 transition: "transform 0.4s cubic-bezier(0.23,1,0.32,1)",
                                 cursor: "pointer",
                             }}
-                            onClick={() => handleBarClick(entry)}
+                            onClick={() => handleBarClick(entry, idx)}
                             onMouseEnter={() => setHoveredIdx(idx)}
                             onMouseLeave={() => setHoveredIdx(null)}
                             onMouseDown={(e) => e.preventDefault()}
@@ -468,8 +508,7 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
                     right: 0,
                     bottom: 0,
                     width: TOC_STRIP_WIDTH - 8,
-                    transformStyle: "preserve-3d",
-                    perspective: TOC_PERSPECTIVE,
+                    overflow: "hidden",
                     pointerEvents: "none",
                 }}
             >
@@ -479,30 +518,25 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
                     const isSection = entry.isSection
                     const barWidth = isSection ? TOC_SECTION_WIDTH : TOC_SUBSECTION_WIDTH
 
-                    /* 3D cylinder rotation */
-                    const rotateDeg = Math.min(absOffset * 16, TOC_MAX_ROTATE_DEG) * Math.sign(offset)
                     /* Position: offset from active entry (active = center) */
                     const yFromCenter = offset * rowStep
 
                     const isActive = absOffset < 0.5
                     const isHovered = hoveredIdx === idx
 
-                    /* Opacity: when not hovering strip, only active bar visible;
-                       on hover, all nearby bars revealed clearly */
+                    /* Opacity: non-hover shows dimmed bars (image 1); hover shows all bars evenly (image 2) */
                     const opacity = isActive
                         ? 1
-                        : isHoveringStrip
-                            ? Math.max(0.15, 1 - absOffset * 0.18)
-                            : Math.max(0, 0.1 - absOffset * 0.025)
+                        : isHoveringStrip ? 0.55 : 0.3
 
                     /* Color: gold active, bright on hover, muted otherwise */
                     const barColor = isActive
                         ? "#C47500"
                         : isHovered
                             ? (isDark ? "rgba(255,255,255,0.75)" : "rgba(0,0,0,0.55)")
                             : isDark
-                                ? `rgba(255,255,255,${Math.max(0.08, opacity * 0.55)})`
-                                : `rgba(0,0,0,${Math.max(0.06, opacity * 0.45)})`
+                                ? "rgba(255,255,255,0.5)"
+                                : "rgba(0,0,0,0.4)"
 
                     /* Hover: bar grows wider + thicker */
                     const hoverWidthBoost = isHovered ? 10 : 0
@@ -527,7 +561,7 @@ export const SessionFloatingTOC = React.memo(function SessionFloatingTOC(props:
                                 borderRadius: 2,
                                 background: barColor,
                                 boxShadow: barShadow,
-                                transform: `translateY(${yFromCenter - TOC_BAR_HEIGHT / 2}px) rotateX(${rotateDeg}deg)`,
+                                transform: `translateY(${yFromCenter - TOC_BAR_HEIGHT / 2}px)`,
                                 transition: "transform 0.4s cubic-bezier(0.23,1,0.32,1), opacity 0.35s, width 0.2s ease, height 0.2s ease, background 0.25s, box-shadow 0.25s",
                                 opacity,
                                 transformOrigin: "center center",