refactor: remove collapsible editors and update breakpoint styles. (#113)

Author: knightedcodemonkey

playwright/helpers/app-test-helpers.ts

@@ -305,10 +305,8 @@ export const getActiveStylesEditorLineNumber = async (page: Page) => {
     .then(text => text.trim())
 }
 
-export const getCollapseButton = (
-  page: Page,
-  panelName: 'component' | 'styles' | 'preview',
-) => page.locator(`#collapse-${panelName}`)
+export const getCollapseButton = (page: Page, panelName: 'preview') =>
+  page.locator(`#collapse-${panelName}`)
 
 export const getToolsButton = (page: Page, panelName: 'component' | 'styles') =>
   page.locator(`#tools-${panelName}`)
@@ -564,7 +562,7 @@ export const connectByotWithSingleRepo = async (
 
 export const expectCollapseButtonState = async (
   page: Page,
-  panelName: 'component' | 'styles' | 'preview',
+  panelName: 'preview',
   {
     axis,
     direction,

playwright/layout-panels.spec.ts

@@ -162,49 +162,32 @@ test('expanded component and styles can shrink consistently in fixed layout', as
 test('panel collapse axis and direction match fixed layout', async ({ page }) => {
   await waitForInitialRender(page)
   await expect(page.getByRole('main')).toHaveClass(/app-grid--preview-right/)
+  await expect(page.locator('#collapse-component')).toHaveCount(0)
+  await expect(page.locator('#collapse-styles')).toHaveCount(0)
 
-  await expectCollapseButtonState(page, 'component', {
-    axis: 'vertical',
-    direction: 'none',
-    collapsed: false,
-  })
-  await expectCollapseButtonState(page, 'styles', {
-    axis: 'vertical',
-    direction: 'none',
-    collapsed: false,
-  })
   await expectCollapseButtonState(page, 'preview', {
     axis: 'horizontal',
     direction: 'right',
     collapsed: false,
   })
 })
 
-test('prevents collapsing all three panels at once', async ({ page }) => {
+test('preview panel can collapse and expand', async ({ page }) => {
   await waitForInitialRender(page)
-  const componentPanel = page.locator('#editor-panel-component')
-  const stylesPanel = page.locator('#editor-panel-styles')
-
-  await getCollapseButton(page, 'component').click()
-  await page.getByRole('button', { name: 'Open tab app.css' }).click()
-  await getCollapseButton(page, 'styles').click()
+  const previewPanel = page.locator('#preview-panel')
 
-  await expect(componentPanel).toHaveClass(/panel--collapsed-vertical/)
-  await expect(stylesPanel).toHaveClass(/panel--collapsed-vertical/)
+  await getCollapseButton(page, 'preview').click()
+  await expect(previewPanel).toHaveClass(/panel--collapsed-horizontal/)
 
   await expectCollapseButtonState(page, 'preview', {
     axis: 'horizontal',
     direction: 'right',
-    collapsed: false,
-    disabled: true,
+    collapsed: true,
+    disabled: false,
   })
-  await expect(getCollapseButton(page, 'preview')).toHaveAttribute(
-    'title',
-    'At least one panel must remain expanded.',
-  )
 
-  await page.getByRole('button', { name: 'Open tab App.tsx' }).click()
-  await getCollapseButton(page, 'component').click()
+  await getCollapseButton(page, 'preview').click()
+  await expect(previewPanel).not.toHaveClass(/panel--collapsed-horizontal/)
   await expectCollapseButtonState(page, 'preview', {
     axis: 'horizontal',
     direction: 'right',
@@ -215,25 +198,25 @@ test('prevents collapsing all three panels at once', async ({ page }) => {
 
 test('does not persist panel collapse state across reload', async ({ page }) => {
   await waitForInitialRender(page)
-  const componentPanel = page.locator('#editor-panel-component')
+  const previewPanel = page.locator('#preview-panel')
 
-  await getCollapseButton(page, 'component').click()
-  await expect(componentPanel).toHaveClass(/panel--collapsed-vertical/)
-  await expectCollapseButtonState(page, 'component', {
-    axis: 'vertical',
-    direction: 'none',
+  await getCollapseButton(page, 'preview').click()
+  await expect(previewPanel).toHaveClass(/panel--collapsed-horizontal/)
+  await expectCollapseButtonState(page, 'preview', {
+    axis: 'horizontal',
+    direction: 'right',
     collapsed: true,
   })
 
   await page.reload()
   await waitForInitialRender(page)
 
-  await expect(componentPanel).not.toHaveClass(
+  await expect(previewPanel).not.toHaveClass(
     /panel--collapsed-horizontal|panel--collapsed-vertical/,
   )
-  await expectCollapseButtonState(page, 'component', {
-    axis: 'vertical',
-    direction: 'none',
+  await expectCollapseButtonState(page, 'preview', {
+    axis: 'horizontal',
+    direction: 'right',
     collapsed: false,
   })
 })

playwright/workspace-tabs.spec.ts

@@ -414,8 +414,6 @@ test('active tab remains source of truth for visible editor panel', async ({ pag
   ).toHaveAttribute('aria-current', 'true')
   await expect(componentPanel).not.toHaveAttribute('hidden', '')
   await expect(stylesPanel).toHaveAttribute('hidden', '')
-
-  await page.locator('#collapse-component').click()
   await page.getByRole('button', { name: 'Open tab app.css' }).click()
 
   await expect(page.getByRole('button', { name: 'Open tab app.css' })).toHaveAttribute(

src/app.js

@@ -379,8 +379,6 @@ const {
   compactAiControlsUi,
   appGrid,
   previewPanel,
-  componentEditorPanel,
-  stylesEditorPanel,
   panelCollapseButtons,
   editorKinds,
   editorPanelsByKind,

src/index.html

@@ -383,23 +383,6 @@ <h2 id="editor-header-component" class="panel-header__title-with-status">
                 </svg>
               </h2>
               <div class="controls controls--quick-actions panel-header-quick-actions">
-                <button
-                  class="panel-collapse-toggle"
-                  id="collapse-component"
-                  type="button"
-                  data-panel-collapse="component"
-                  data-collapse-axis="vertical"
-                  data-collapsed="false"
-                  aria-expanded="true"
-                  aria-controls="editor-panel-content-component"
-                  aria-label="Collapse editor panel"
-                  title="Collapse editor panel"
-                >
-                  <svg viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="m6 9 6 6 6-6"></path>
-                  </svg>
-                  <span class="panel-collapse-toggle__label">Collapse</span>
-                </button>
                 <button
                   class="icon-button editor-tools-toggle"
                   id="tools-component"
@@ -515,23 +498,6 @@ <h2 id="editor-header-styles" class="panel-header__title-with-status">
                 </svg>
               </h2>
               <div class="controls controls--quick-actions panel-header-quick-actions">
-                <button
-                  class="panel-collapse-toggle"
-                  id="collapse-styles"
-                  type="button"
-                  data-panel-collapse="styles"
-                  data-collapse-axis="vertical"
-                  data-collapsed="false"
-                  aria-expanded="true"
-                  aria-controls="editor-panel-content-styles"
-                  aria-label="Collapse editor panel"
-                  title="Collapse editor panel"
-                >
-                  <svg viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="m6 9 6 6 6-6"></path>
-                  </svg>
-                  <span class="panel-collapse-toggle__label">Collapse</span>
-                </button>
                 <button
                   class="icon-button editor-tools-toggle"
                   id="tools-styles"

src/modules/app-core/layout-diagnostics-setup.js

@@ -2,8 +2,6 @@ const createLayoutDiagnosticsSetup = ({
   compactAiControlsUi,
   appGrid,
   previewPanel,
-  componentEditorPanel,
-  stylesEditorPanel,
   panelCollapseButtons,
   editorKinds,
   editorPanelsByKind,
@@ -20,19 +18,15 @@ const createLayoutDiagnosticsSetup = ({
   cssEditor,
 }) => {
   const getPanelCollapseAxis = panelName => {
-    if (compactAiControlsUi.isCompactViewport()) {
+    if (panelName !== 'preview') {
       return 'vertical'
     }
 
-    if (panelName === 'preview') {
-      return 'horizontal'
-    }
-
-    if (panelName === 'component' || panelName === 'styles') {
+    if (compactAiControlsUi.isCompactViewport()) {
       return 'vertical'
     }
 
-    return 'vertical'
+    return 'horizontal'
   }
 
   const getPanelCollapseDirection = panelName => {
@@ -45,20 +39,10 @@ const createLayoutDiagnosticsSetup = ({
       return 'right'
     }
 
-    if (panelName === 'component') {
-      return 'left'
-    }
-
-    if (panelName === 'styles') {
-      return 'right'
-    }
-
     return 'right'
   }
 
   const panelCollapseState = {
-    component: false,
-    styles: false,
     preview: false,
   }
 
@@ -91,19 +75,7 @@ const createLayoutDiagnosticsSetup = ({
     }
   }
 
-  const normalizePanelCollapseState = () => {
-    const collapsedPanels = Object.entries(panelCollapseState)
-      .filter(([, isCollapsed]) => isCollapsed)
-      .map(([panelName]) => panelName)
-
-    if (collapsedPanels.length === Object.keys(panelCollapseState).length) {
-      panelCollapseState.preview = false
-    }
-  }
-
   const syncPanelCollapseButtons = () => {
-    const collapsedCount = Object.values(panelCollapseState).filter(Boolean).length
-
     for (const button of panelCollapseButtons) {
       const panelName = button.dataset.panelCollapse
       if (!panelName || !Object.hasOwn(panelCollapseState, panelName)) {
@@ -114,57 +86,26 @@ const createLayoutDiagnosticsSetup = ({
       const direction = getPanelCollapseDirection(panelName)
       const isCollapsed = panelCollapseState[panelName] === true
       const panelTitle = `${panelName.charAt(0).toUpperCase()}${panelName.slice(1)}`
-      const canCollapse = isCollapsed || collapsedCount < 2
 
       button.dataset.collapseAxis = axis
       button.dataset.collapseDirection = direction
       button.dataset.collapsed = isCollapsed ? 'true' : 'false'
       button.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true')
-      button.disabled = !canCollapse
-      button.setAttribute('aria-disabled', canCollapse ? 'false' : 'true')
+      button.disabled = false
+      button.setAttribute('aria-disabled', 'false')
       button.setAttribute(
         'aria-label',
         `${isCollapsed ? 'Expand' : 'Collapse'} ${panelTitle.toLowerCase()} panel`,
       )
       button.setAttribute(
         'title',
-        canCollapse
-          ? `${isCollapsed ? 'Expand' : 'Collapse'} ${panelTitle.toLowerCase()} panel`
-          : 'At least one panel must remain expanded.',
+        `${isCollapsed ? 'Expand' : 'Collapse'} ${panelTitle.toLowerCase()} panel`,
       )
     }
   }
 
   const applyPanelCollapseState = () => {
-    normalizePanelCollapseState()
-
     const previewAxis = getPanelCollapseAxis('preview')
-    const componentAxis = getPanelCollapseAxis('component')
-    const stylesAxis = getPanelCollapseAxis('styles')
-
-    if (componentEditorPanel) {
-      const isCollapsed = panelCollapseState.component
-      componentEditorPanel.classList.toggle(
-        'panel--collapsed-vertical',
-        isCollapsed && componentAxis === 'vertical',
-      )
-      componentEditorPanel.classList.toggle(
-        'panel--collapsed-horizontal',
-        isCollapsed && componentAxis === 'horizontal',
-      )
-    }
-
-    if (stylesEditorPanel) {
-      const isCollapsed = panelCollapseState.styles
-      stylesEditorPanel.classList.toggle(
-        'panel--collapsed-vertical',
-        isCollapsed && stylesAxis === 'vertical',
-      )
-      stylesEditorPanel.classList.toggle(
-        'panel--collapsed-horizontal',
-        isCollapsed && stylesAxis === 'horizontal',
-      )
-    }
 
     if (previewPanel) {
       const isCollapsed = panelCollapseState.preview
@@ -183,25 +124,12 @@ const createLayoutDiagnosticsSetup = ({
       panelCollapseState.preview && previewAxis === 'horizontal',
     )
     appGrid.classList.toggle('app-grid--preview-collapsed', panelCollapseState.preview)
-    appGrid.classList.toggle(
-      'app-grid--component-collapsed',
-      panelCollapseState.component,
-    )
-    appGrid.classList.toggle('app-grid--styles-collapsed', panelCollapseState.styles)
-    appGrid.classList.toggle(
-      'app-grid--component-collapsed-horizontal',
-      panelCollapseState.component && componentAxis === 'horizontal',
-    )
-    appGrid.classList.toggle(
-      'app-grid--styles-collapsed-horizontal',
-      panelCollapseState.styles && stylesAxis === 'horizontal',
-    )
 
     syncPanelCollapseButtons()
   }
 
   const togglePanelCollapse = panelName => {
-    if (!Object.hasOwn(panelCollapseState, panelName)) {
+    if (panelName !== 'preview') {
       return
     }
 

src/styles/ai-controls.css

@@ -1029,7 +1029,7 @@
   accent-color: var(--accent);
 }
 
-@media (max-width: 1090px) {
+@media (width <= 1090px) {
   .app-grid-layout-controls {
     flex-wrap: nowrap;
   }
@@ -1045,7 +1045,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .app-grid-layout-controls {
     flex-wrap: nowrap;
   }

src/styles/base.css

@@ -200,7 +200,7 @@ body {
   color: var(--shell-text);
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   body {
     height: auto;
     min-height: 100dvh;

src/styles/diagnostics.css

@@ -217,7 +217,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .diagnostics-drawer {
     top: auto;
     right: 24px;

src/styles/dialogs-overlays.css

@@ -87,7 +87,7 @@
   outline-offset: 1px;
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .panel-header-main-actions .controls,
   .controls--actions {
     justify-content: flex-start;
@@ -128,7 +128,7 @@
   transform: translateY(0);
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .app-toast {
     left: 12px;
     right: 12px;