Persist Interactive Docs state across page navigation

GitOrigin-RevId: 8a8f85c171f30b76b7a8068cb355068aff50f072

Author: neewamp

quine-browser/src/main/scala/com/thatdot/quine/webapp/components/HybridViewsRenderer.scala

@@ -13,8 +13,17 @@ object HybridViewsRenderer {
     flex := "1",
     div(
       cls := "h-100",
-      display <-- renderStrategy.map({
-        case RenderAlwaysMountedPage => "block"
+      position := "absolute",
+      top := "0",
+      left := "0",
+      right := "0",
+      bottom := "0",
+      visibility <-- renderStrategy.map({
+        case RenderAlwaysMountedPage => "visible"
+        case RenderRegularlyMountedPages => "hidden"
+      }),
+      pointerEvents <-- renderStrategy.map({
+        case RenderAlwaysMountedPage => "auto"
         case RenderRegularlyMountedPages => "none"
       }),
       alwaysRenderedView,

quine-browser/src/main/scala/com/thatdot/quine/webapp/views/QuineOssViews.scala

@@ -19,19 +19,66 @@ class QuineOssViews(
 ) {
   val staticViews: Signal[HtmlElement] = SplitRender(router.currentPageSignal)
     .collectStatic(ExplorerUi)(div(): HtmlElement)
-    .collectStatic(DocsV1)(DocsV1View(options))
-    .collectStatic(DocsV2)(DocsV2View(options))
+    .collectStatic(DocsV1)(div(): HtmlElement)
+    .collectStatic(DocsV2)(div(): HtmlElement)
     .collectStatic(Metrics)(MetricsView(routes, queryMethod))
     .collectStatic(Streams)(StreamsView(options))
     .collectStatic(Landing)(LandingView(routes))
     .signal
 
+  val alwaysMountedWrapper: HtmlElement = div(
+    cls := "h-100",
+    position := "relative",
+    div(
+      cls := "h-100",
+      display <-- router.currentPageSignal.map {
+        case ExplorerUi => "block"
+        case _ => "none"
+      },
+      ExplorationUiView(options = options, routes = routes),
+    ),
+    div(
+      position := "absolute",
+      top := "0",
+      left := "0",
+      right := "0",
+      bottom := "0",
+      overflow := "auto",
+      visibility <-- router.currentPageSignal.map {
+        case DocsV1 => "visible"
+        case _ => "hidden"
+      },
+      pointerEvents <-- router.currentPageSignal.map {
+        case DocsV1 => "auto"
+        case _ => "none"
+      },
+      DocsV1View(options),
+    ),
+    div(
+      position := "absolute",
+      top := "0",
+      left := "0",
+      right := "0",
+      bottom := "0",
+      overflow := "auto",
+      visibility <-- router.currentPageSignal.map {
+        case DocsV2 => "visible"
+        case _ => "hidden"
+      },
+      pointerEvents <-- router.currentPageSignal.map {
+        case DocsV2 => "auto"
+        case _ => "none"
+      },
+      DocsV2View(options),
+    ),
+  )
+
   val views: HtmlElement =
     HybridViewsRenderer(
-      alwaysRenderedView = ExplorationUiView(options = options, routes = routes),
+      alwaysRenderedView = alwaysMountedWrapper,
       regularlyRenderedViews = staticViews,
       renderStrategy = router.currentPageSignal.map({
-        case ExplorerUi => RenderAlwaysMountedPage
+        case ExplorerUi | DocsV1 | DocsV2 => RenderAlwaysMountedPage
         case _ => RenderRegularlyMountedPages
       }),
     )