feat: FIT-155: Playground preview only mode (#7604)

Author: bmartel

web/apps/playground/src/atoms/configAtoms.ts

@@ -1,11 +1,19 @@
 import { atom } from "jotai";
+import { getQueryParams } from "../utils/query";
 
 export const defaultConfig = "<View>\n  <!-- Paste your XML config here -->\n</View>";
 
 export const configAtom = atom<string>(defaultConfig);
 export const loadingAtom = atom<boolean>(false);
 export const errorAtom = atom<string | null>(null);
-export const interfacesAtom = atom<string[]>(["side-column"]);
+export const interfacesAtom = atom<string[]>([]);
 export const showPreviewAtom = atom<boolean>(true);
 export const sampleTaskAtom = atom<any>({});
 export const annotationAtom = atom<any>([]);
+export const modeAtom = atom<"preview" | "editor" | "">("editor");
+export const displayModeAtom = atom<"preview" | "all">(() => {
+  const params = getQueryParams();
+  const mode = params.get("mode");
+  if (mode === "preview") return "preview";
+  return "all";
+});

web/apps/playground/src/components/PlaygroundApp/PlaygroundApp.tsx

@@ -1,18 +1,18 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import type { MouseEvent } from "react";
-import { useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { ToastProvider, ToastViewport } from "@humansignal/ui/lib/toast/toast";
 import { cnm } from "@humansignal/shad/utils";
 import { PreviewPanel } from "../PreviewPanel";
-import { configAtom, loadingAtom, errorAtom, interfacesAtom } from "../../atoms/configAtoms";
+import { EditorPanel } from "../EditorPanel";
+import { TopBar } from "./TopBar";
+import { configAtom, loadingAtom, errorAtom, interfacesAtom, displayModeAtom } from "../../atoms/configAtoms";
 import {
   getQueryParams,
   replaceBrTagsWithNewlines,
   getInterfacesFromParams,
   throwUnlessXmlLike,
 } from "../../utils/query";
-import { TopBar } from "./TopBar";
-import { EditorPanel } from "../EditorPanel";
 import styles from "./PlaygroundApp.module.scss";
 
 const DEFAULT_EDITOR_WIDTH_PERCENT = 50;
@@ -24,6 +24,7 @@ export const PlaygroundApp = () => {
   const setLoading = useSetAtom(loadingAtom);
   const setError = useSetAtom(errorAtom);
   const setInterfaces = useSetAtom(interfacesAtom);
+  const displayMode = useAtomValue(displayModeAtom);
   const [editorWidth, setEditorWidth] = useState(DEFAULT_EDITOR_WIDTH_PERCENT);
   const dragging = useRef(false);
 
@@ -118,26 +119,34 @@ export const PlaygroundApp = () => {
     >
       <ToastProvider>
         {/* Minimal top bar */}
-        <TopBar />
+        {displayMode !== "preview" && <TopBar />}
         {/* Editor/Preview split */}
         <div className="flex flex-1 min-h-0 min-w-0 relative">
           {/* Editor Panel */}
-          <EditorPanel editorWidth={editorWidth} />
+          {displayMode !== "preview" && <EditorPanel editorWidth={editorWidth} />}
           {/* Resizable Divider */}
-          <div
-            className="w-2 cursor-col-resize bg-neutral-emphasis hover:bg-primary-border active:bg-primary-border transition-colors duration-100 z-10"
-            onMouseDown={(e: MouseEvent) => {
-              if (e.button !== 0) return;
-              e.preventDefault();
-              dragging.current = true;
-            }}
-            onDoubleClick={handleDividerDoubleClick}
-            role="separator"
-            aria-orientation="vertical"
-            tabIndex={-1}
-          />
+          {displayMode !== "preview" && (
+            <div
+              className="w-2 cursor-col-resize bg-neutral-emphasis hover:bg-primary-border active:bg-primary-border transition-colors duration-100 z-10"
+              onMouseDown={(e: MouseEvent) => {
+                if (e.button !== 0) return;
+                e.preventDefault();
+                dragging.current = true;
+              }}
+              onDoubleClick={handleDividerDoubleClick}
+              role="separator"
+              aria-orientation="vertical"
+              tabIndex={-1}
+            />
+          )}
+
           {/* Preview Panel */}
-          <div className="flex flex-col min-w-0 h-full" style={previewPanelStyle}>
+          <div
+            className={cnm("flex flex-col min-w-0 h-full", {
+              "flex-row flex-1 w-full": displayMode !== "all",
+            })}
+            style={previewPanelStyle}
+          >
             <div className="flex-1 min-h-0 min-w-0">
               <PreviewPanel />
             </div>

web/apps/playground/src/components/PreviewPanel/PreviewPanel.tsx

@@ -10,6 +10,7 @@ import {
   interfacesAtom,
   annotationAtom,
   sampleTaskAtom,
+  displayModeAtom,
 } from "../../atoms/configAtoms";
 import { onSnapshot } from "mobx-state-tree";
 
@@ -29,6 +30,7 @@ export const PreviewPanel: FC<PreviewPanelProps> = memo(
     const interfaces = useAtomValue(interfacesAtom);
     const setAnnotation = useSetAtom(annotationAtom);
     const setSampleTask = useSetAtom(sampleTaskAtom);
+    const displayMode = useAtomValue(displayModeAtom);
     const [showPreview, setShowPreview] = useAtom(showPreviewAtom);
     const rootRef = useRef<HTMLDivElement>(null);
     const lsfInstance = useRef<any>(null);
@@ -82,7 +84,7 @@ export const PreviewPanel: FC<PreviewPanelProps> = memo(
             settings: {
               forceBottomPanel: true,
               collapsibleBottomPanel: true,
-              defaultCollapsedBottomPanel: true,
+              defaultCollapsedBottomPanel: displayMode === "all",
               fullscreen: false,
             },
             onStorageInitialized: (LS: any) => {
@@ -93,7 +95,7 @@ export const PreviewPanel: FC<PreviewPanelProps> = memo(
 
                 const annotation = as.selected;
                 if (annotation) {
-                  snapshotDisposer = onSnapshot(annotation, (snapshot) => {
+                  snapshotDisposer = onSnapshot(annotation, () => {
                     setAnnotation(annotation.serializeAnnotation());
                   });
                 }