refactor: responsiveness.

Author: knightedcodemonkey

src/app.js

@@ -36,6 +36,9 @@ const aiChatStatus = document.getElementById('ai-chat-status')
 const aiChatRate = document.getElementById('ai-chat-rate')
 const aiChatRepository = document.getElementById('ai-chat-repository')
 const aiChatMessages = document.getElementById('ai-chat-messages')
+const viewControlsToggle = document.getElementById('view-controls-toggle')
+const viewControlsDrawer = document.getElementById('view-controls-drawer')
+const aiControlsToggle = document.getElementById('ai-controls-toggle')
 const appGridLayoutButtons = document.querySelectorAll('[data-app-grid-layout]')
 const appThemeButtons = document.querySelectorAll('[data-app-theme]')
 const editorToolsButtons = document.querySelectorAll('[data-editor-tools-toggle]')
@@ -84,6 +87,7 @@ let pendingClearAction = null
 let suppressEditorChangeSideEffects = false
 let hasAppliedReactModeDefault = false
 const clipboardSupported = Boolean(navigator.clipboard?.writeText)
+const aiAssistantFeatureEnabled = isAiAssistantFeatureEnabled()
 
 const previewBackground = createPreviewBackgroundController({
   previewBgColorInput,
@@ -102,6 +106,66 @@ const { applyAppGridLayout, applyTheme, getInitialAppGridLayout, getInitialTheme
   layoutTheme
 
 const compactViewportMediaQuery = window.matchMedia('(max-width: 900px)')
+const stackedRailMediaQuery = window.matchMedia('(max-width: 1090px)')
+let stackedRailViewControlsOpen = false
+let compactAiControlsOpen = false
+
+const isStackedRailViewport = () => stackedRailMediaQuery.matches
+
+const setStackedRailViewControlsOpen = isOpen => {
+  if (!(viewControlsToggle instanceof HTMLButtonElement) || !viewControlsDrawer) {
+    return
+  }
+
+  if (!isStackedRailViewport()) {
+    stackedRailViewControlsOpen = false
+    viewControlsToggle.setAttribute('aria-expanded', 'false')
+    viewControlsDrawer.removeAttribute('hidden')
+    return
+  }
+
+  stackedRailViewControlsOpen = Boolean(isOpen)
+  viewControlsToggle.setAttribute(
+    'aria-expanded',
+    stackedRailViewControlsOpen ? 'true' : 'false',
+  )
+
+  if (stackedRailViewControlsOpen) {
+    viewControlsDrawer.removeAttribute('hidden')
+    return
+  }
+
+  viewControlsDrawer.setAttribute('hidden', '')
+}
+
+const setCompactAiControlsOpen = isOpen => {
+  if (!(aiControlsToggle instanceof HTMLButtonElement) || !githubAiControls) {
+    return
+  }
+
+  if (!aiAssistantFeatureEnabled) {
+    compactAiControlsOpen = false
+    aiControlsToggle.setAttribute('hidden', '')
+    aiControlsToggle.setAttribute('aria-expanded', 'false')
+    githubAiControls.removeAttribute('data-compact-open')
+    githubAiControls.setAttribute('hidden', '')
+    return
+  }
+
+  aiControlsToggle.removeAttribute('hidden')
+
+  if (!isCompactViewport()) {
+    compactAiControlsOpen = false
+    aiControlsToggle.setAttribute('aria-expanded', 'false')
+    githubAiControls.removeAttribute('data-compact-open')
+    githubAiControls.removeAttribute('hidden')
+    return
+  }
+
+  compactAiControlsOpen = Boolean(isOpen)
+  aiControlsToggle.setAttribute('aria-expanded', compactAiControlsOpen ? 'true' : 'false')
+  githubAiControls.dataset.compactOpen = compactAiControlsOpen ? 'true' : 'false'
+}
 
 const getCurrentLayout = () => {
   if (appGrid.classList.contains('app-grid--preview-right')) {
@@ -405,8 +469,6 @@ const {
   updateUiIssueIndicators,
 } = diagnosticsUi
 
-const aiAssistantFeatureEnabled = isAiAssistantFeatureEnabled()
-
 const githubAiContextState = {
   token: null,
   selectedRepository: null,
@@ -1074,6 +1136,10 @@ for (const button of appGridLayoutButtons) {
     }
     applyAppGridLayout(nextLayout)
     applyPanelCollapseState()
+
+    if (isStackedRailViewport()) {
+      setStackedRailViewControlsOpen(false)
+    }
   })
 }
 
@@ -1084,9 +1150,72 @@ for (const button of appThemeButtons) {
       return
     }
     applyTheme(nextTheme)
+
+    if (isStackedRailViewport()) {
+      setStackedRailViewControlsOpen(false)
+    }
   })
 }
 
+if (viewControlsToggle instanceof HTMLButtonElement) {
+  viewControlsToggle.addEventListener('click', () => {
+    if (!isStackedRailViewport()) {
+      return
+    }
+
+    if (isCompactViewport()) {
+      setCompactAiControlsOpen(false)
+    }
+
+    setStackedRailViewControlsOpen(!stackedRailViewControlsOpen)
+  })
+}
+
+if (aiControlsToggle instanceof HTMLButtonElement) {
+  aiControlsToggle.addEventListener('click', () => {
+    if (!isCompactViewport()) {
+      return
+    }
+
+    setStackedRailViewControlsOpen(false)
+    setCompactAiControlsOpen(!compactAiControlsOpen)
+  })
+}
+
+document.addEventListener('click', event => {
+  const clickTarget = event.target
+  if (!(clickTarget instanceof Node)) {
+    return
+  }
+
+  if (isStackedRailViewport() && stackedRailViewControlsOpen) {
+    if (
+      !viewControlsDrawer?.contains(clickTarget) &&
+      !viewControlsToggle?.contains(clickTarget)
+    ) {
+      setStackedRailViewControlsOpen(false)
+    }
+  }
+
+  if (isCompactViewport() && compactAiControlsOpen) {
+    if (
+      !githubAiControls.contains(clickTarget) &&
+      !aiControlsToggle?.contains(clickTarget)
+    ) {
+      setCompactAiControlsOpen(false)
+    }
+  }
+})
+
+document.addEventListener('keydown', event => {
+  if (event.key !== 'Escape') {
+    return
+  }
+
+  setStackedRailViewControlsOpen(false)
+  setCompactAiControlsOpen(false)
+})
+
 for (const button of editorToolsButtons) {
   button.addEventListener('click', () => {
     const panelName = button.dataset.editorToolsToggle
@@ -1112,6 +1241,11 @@ for (const button of panelCollapseButtons) {
 
 const handleCompactViewportChange = () => {
   applyPanelCollapseState()
+  setCompactAiControlsOpen(false)
+}
+
+const handleStackedRailViewportChange = () => {
+  setStackedRailViewControlsOpen(false)
 }
 
 if (typeof compactViewportMediaQuery.addEventListener === 'function') {
@@ -1120,6 +1254,12 @@ if (typeof compactViewportMediaQuery.addEventListener === 'function') {
   compactViewportMediaQuery.onchange = handleCompactViewportChange
 }
 
+if (typeof stackedRailMediaQuery.addEventListener === 'function') {
+  stackedRailMediaQuery.addEventListener('change', handleStackedRailViewportChange)
+} else {
+  stackedRailMediaQuery.onchange = handleStackedRailViewportChange
+}
+
 window.addEventListener('beforeunload', () => {
   clearComponentLintRecheckTimer()
   clearStylesLintRecheckTimer()
@@ -1131,6 +1271,8 @@ applyAppGridLayout(getInitialAppGridLayout(), { persist: false })
 applyTheme(getInitialTheme(), { persist: false })
 applyEditorToolsVisibility()
 applyPanelCollapseState()
+setStackedRailViewControlsOpen(false)
+setCompactAiControlsOpen(false)
 syncAiChatTokenVisibility(githubAiContextState.token)
 
 updateRenderButtonVisibility()