Make stream clickable when panes are collapsed (#1209)

* Make stream clickable when panes are collapsed

* Tweak UI test

e2e/playwright/flow-tests.spec.ts

@@ -5,7 +5,6 @@ import { v4 as uuidv4 } from 'uuid'
 import { getUtils } from './test-utils'
 import waitOn from 'wait-on'
 import { Themes } from '../../src/lib/theme'
-import { platform } from '@tauri-apps/api/os'
 
 /*
 debug helper: unfortunately we do rely on exact coord mouse clicks in a few places
@@ -712,7 +711,7 @@ test('Can extrude from the command bar', async ({ page, context }) => {
 
   // Click to select face and set distance
   await u.openAndClearDebugPanel()
-  await page.getByText('|> line([25.1, 0.41], %)').click()
+  await page.getByText('|> startProfileAt([-6.95, 4.98], %)').click()
   await u.waitForCmdReceive('select_add')
   await u.closeDebugPanel()
   await page.getByRole('button', { name: 'Continue' }).click()

src/App.tsx

@@ -172,11 +172,8 @@ export function App() {
       <ModalContainer />
       <Resizable
         className={
-          'h-full flex flex-col flex-1 z-10 my-5 ml-5 pr-1 transition-opacity transition-duration-75 ' +
-          (buttonDownInStream || onboardingStatus === 'camera'
-            ? ' pointer-events-none '
-            : ' ') +
-          paneOpacity
+          'pointer-events-none h-full flex flex-col flex-1 z-10 my-5 ml-5 pr-1 transition-opacity transition-duration-75 ' +
+          +paneOpacity
         }
         defaultSize={{
           width: '550px',
@@ -188,10 +185,16 @@ export function App() {
         maxHeight={'auto'}
         handleClasses={{
           right:
-            'hover:bg-liquid-30/40 dark:hover:bg-liquid-10/40 bg-transparent transition-colors duration-100 transition-ease-out delay-100',
+            'hover:bg-chalkboard-10/50 bg-transparent transition-colors duration-75 transition-ease-out delay-100 ' +
+            (buttonDownInStream || onboardingStatus === 'camera'
+              ? 'pointer-events-none '
+              : 'pointer-events-auto'),
         }}
       >
-        <div id="code-pane" className="h-full flex flex-col justify-between">
+        <div
+          id="code-pane"
+          className="h-full flex flex-col justify-between pointer-events-none"
+        >
           <CollapsiblePanel
             title="Code"
             icon={faCode}

src/components/CollapsiblePanel.tsx

@@ -60,7 +60,9 @@ export const CollapsiblePanel = ({
     <details
       {...props}
       data-testid={detailsTestId}
-      className={styles.panel + ' group ' + (className || '')}
+      className={
+        styles.panel + ' pointer-events-auto group ' + (className || '')
+      }
     >
       <PanelHeader
         title={title}