fix: hide preview chrome in source view (#1556)

* fix: hide preview chrome in source view

* fix: keep source-view edit controls

apps/web/src/components/FileViewer.tsx

@@ -5121,6 +5121,7 @@ function HtmlViewer({
     return t('fileViewer.deployLinkPreparingLabel');
   };
   const boardAvailable = mode === 'preview' && source !== null;
+  const showPreviewToolbarControls = mode === 'preview';
 
   return (
     <div className="viewer html-viewer">
@@ -5152,7 +5153,7 @@ function HtmlViewer({
               {t('fileViewer.source')}
             </button>
           </div>
-          {effectiveDeck ? (
+          {showPreviewToolbarControls && effectiveDeck ? (
             <span
               className="deck-nav"
               role="group"
@@ -5190,41 +5191,83 @@ function HtmlViewer({
           ) : null}
         </div>
         <div className="viewer-toolbar-actions">
-          <div className="palette-tweaks-anchor">
+          {showPreviewToolbarControls ? (
-            <button
+            <>
-              type="button"
+              <div className="palette-tweaks-anchor">
-              className={`viewer-action${selectedPalette || palettePopoverOpen ? ' active' : ''}`}
+                <button
-              data-testid="palette-tweaks-toggle"
+                  type="button"
-              title="Tweaks"
+                  className={`viewer-action${selectedPalette || palettePopoverOpen ? ' active' : ''}`}
-              aria-haspopup="dialog"
+                  data-testid="palette-tweaks-toggle"
-              aria-expanded={palettePopoverOpen}
+                  title="Tweaks"
-              onClick={() => setPalettePopoverOpen((v) => !v)}
+                  aria-haspopup="dialog"
-            >
+                  aria-expanded={palettePopoverOpen}
-              <Icon name="tweaks" size={13} />
+                  onClick={() => setPalettePopoverOpen((v) => !v)}
-              <span>Tweaks</span>
+                >
-              {selectedPalette ? (
+                  <Icon name="tweaks" size={13} />
-                <span
+                  <span>Tweaks</span>
-                  className="palette-tweaks-badge"
+                  {selectedPalette ? (
-                  aria-hidden
+                    <span
-                  style={{
+                      className="palette-tweaks-badge"
-                    backgroundColor:
+                      aria-hidden
-                      selectedPalette === 'coral' ? '#ff5a3c' :
+                      style={{
-                      selectedPalette === 'electric' ? '#7c3aed' :
+                        backgroundColor:
-                      selectedPalette === 'acid-forest' ? '#16a34a' :
+                          selectedPalette === 'coral' ? '#ff5a3c' :
-                      selectedPalette === 'risograph' ? '#e11d48' :
+                          selectedPalette === 'electric' ? '#7c3aed' :
-                      '#0a0a0a',
+                          selectedPalette === 'acid-forest' ? '#16a34a' :
-                  }}
+                          selectedPalette === 'risograph' ? '#e11d48' :
+                          '#0a0a0a',
+                      }}
+                    />
+                  ) : null}
+                </button>
+                <PaletteTweaks
+                  open={palettePopoverOpen}
+                  selected={selectedPalette}
+                  onChange={setSelectedPalette}
+                  onPreview={setPreviewPalette}
+                  onClose={() => setPalettePopoverOpen(false)}
                 />
-              ) : null}
+              </div>
-            </button>
+              <button
-            <PaletteTweaks
+                className={`viewer-action${drawOverlayOpen ? ' active' : ''}`}
-              open={palettePopoverOpen}
+                type="button"
-              selected={selectedPalette}
+                data-testid="draw-overlay-toggle"
-              onChange={setSelectedPalette}
+                title={t('fileViewer.draw')}
-              onPreview={setPreviewPalette}
+                aria-pressed={drawOverlayOpen}
-              onClose={() => setPalettePopoverOpen(false)}
+                onClick={() => {
-            />
+                  const next = !drawOverlayOpen;
-          </div>
+                  if (!next) {
+                    setDrawOverlayOpen(false);
+                    return;
+                  }
+                  const activateDraw = () => {
+                    setBoardMode(false);
+                    clearBoardComposer();
+                    setInspectMode(false);
+                    setDrawOverlayMode('draw');
+                    setMode('preview');
+                    setDrawOverlayOpen(true);
+                  };
+                  if (manualEditMode) {
+                    void exitManualEditModeAfterFlush().then((ok) => {
+                      if (ok) activateDraw();
+                    });
+                    return;
+                  }
+                  activateDraw();
+                }}
+              >
+                <Icon name="draw" size={13} />
+                <span>{t('fileViewer.draw')}</span>
+              </button>
+              <span className="viewer-divider" aria-hidden />
+              <PreviewViewportControls
+                viewport={previewViewport}
+                onViewport={setPreviewViewport}
+                t={t}
+              />
+            </>
+          ) : null}
           <button
             className={`viewer-action${manualEditMode ? ' active' : ''}`}
             type="button"
@@ -5248,44 +5291,6 @@ function HtmlViewer({
             <Icon name="edit" size={13} />
             <span>{t('fileViewer.edit')}</span>
           </button>
-          <button
-            className={`viewer-action${drawOverlayOpen ? ' active' : ''}`}
-            type="button"
-            data-testid="draw-overlay-toggle"
-            title={t('fileViewer.draw')}
-            aria-pressed={drawOverlayOpen}
-            onClick={() => {
-              const next = !drawOverlayOpen;
-              if (!next) {
-                setDrawOverlayOpen(false);
-                return;
-              }
-              const activateDraw = () => {
-                setBoardMode(false);
-                clearBoardComposer();
-                setInspectMode(false);
-                setDrawOverlayMode('draw');
-                setMode('preview');
-                setDrawOverlayOpen(true);
-              };
-              if (manualEditMode) {
-                void exitManualEditModeAfterFlush().then((ok) => {
-                  if (ok) activateDraw();
-                });
-                return;
-              }
-              activateDraw();
-            }}
-          >
-            <Icon name="draw" size={13} />
-            <span>{t('fileViewer.draw')}</span>
-          </button>
-          <span className="viewer-divider" aria-hidden />
-          <PreviewViewportControls
-            viewport={previewViewport}
-            onViewport={setPreviewViewport}
-            t={t}
-          />
           <span className="viewer-divider" aria-hidden />
           <button
             type="button"

apps/web/tests/components/FileViewer.test.tsx

@@ -414,6 +414,49 @@ describe('FileViewer SVG artifacts', () => {
     expect(markup).not.toContain('data-od-render-mode="url-load"');
   });
 
+  it('hides preview-only toolbar controls when switching an HTML deck to source view', async () => {
+    const file = baseFile({
+      name: 'deck.html',
+      path: 'deck.html',
+      mime: 'text/html',
+      kind: 'html',
+      artifactManifest: {
+        version: 1,
+        kind: 'html',
+        title: 'Deck',
+        entry: 'deck.html',
+        renderer: 'html',
+        exports: ['html'],
+      },
+    });
+
+    const { container } = render(
+      <FileViewer
+        projectId="project-1"
+        file={file}
+        isDeck
+        liveHtml={'<html><body><section class="slide">one</section><section class="slide">two</section></body></html>'}
+      />,
+    );
+
+    expect(container.querySelector('.deck-nav')).toBeTruthy();
+    expect(container.querySelector('.palette-tweaks-anchor')).toBeTruthy();
+    expect(container.querySelector('.viewer-viewport-switcher')).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: /^source$/i }));
+
+    await waitFor(() => {
+      expect(container.querySelector('.deck-nav')).toBeNull();
+      expect(container.querySelector('.palette-tweaks-anchor')).toBeNull();
+      expect(container.querySelector('.viewer-viewport-switcher')).toBeNull();
+      expect(screen.getByTestId('manual-edit-mode-toggle')).toBeTruthy();
+      expect(screen.queryByTestId('draw-overlay-toggle')).toBeNull();
+      expect(screen.queryByTestId('palette-tweaks-toggle')).toBeNull();
+      expect(screen.getByRole('button', { name: /zoom out/i })).toBeTruthy();
+      expect(screen.getByRole('button', { name: /zoom in/i })).toBeTruthy();
+    });
+  });
+
   it('shows Cloudflare Pages as a deploy action without requiring a project name input', async () => {
     const file = baseFile({
       name: 'index.html',