Bugfix of pointer-event disabling logic on panes (#2118)

* Fix pointer-event logic depending on open panes, etc

* Little KclTextEditorPane style tweaks

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Rerun CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/ModelingSidebar/ModelingPane.tsx

@@ -1,5 +1,6 @@
 import { useStore } from 'useStore'
 import styles from './ModelingPane.module.css'
+import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 
 export interface ModelingPaneProps
   extends React.PropsWithChildren,
@@ -29,18 +30,21 @@ export const ModelingPane = ({
   detailsTestId,
   ...props
 }: ModelingPaneProps) => {
+  const { settings } = useSettingsAuthContext()
+  const onboardingStatus = settings.context.app.onboardingStatus
   const { buttonDownInStream } = useStore((s) => ({
     buttonDownInStream: s.buttonDownInStream,
   }))
+  const pointerEventsCssClass =
+    buttonDownInStream || onboardingStatus.current === 'camera'
+      ? 'pointer-events-none '
+      : 'pointer-events-auto '
   return (
     <section
       {...props}
       data-testid={detailsTestId}
       className={
-        (buttonDownInStream ? 'pointer-events-none ' : 'pointer-events-auto ') +
-        styles.panel +
-        ' group ' +
-        (className || '')
+        pointerEventsCssClass + styles.panel + ' group ' + (className || '')
       }
     >
       <ModelingPaneHeader title={title} Menu={Menu} />

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -15,19 +15,18 @@ interface ModelingSidebarProps {
 }
 
 export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
-  const { buttonDownInStream, openPanes } = useStore((s) => ({
+  const { settings } = useSettingsAuthContext()
+  const onboardingStatus = settings.context.app.onboardingStatus
+  const { openPanes, buttonDownInStream } = useStore((s) => ({
     buttonDownInStream: s.buttonDownInStream,
     openPanes: s.openPanes,
   }))
-  const { settings } = useSettingsAuthContext()
-  const {
-    app: { onboardingStatus },
-  } = settings.context
-
   const pointerEventsCssClass =
-    buttonDownInStream || onboardingStatus.current === 'camera'
+    buttonDownInStream ||
+    onboardingStatus.current === 'camera' ||
+    openPanes.length === 0
       ? 'pointer-events-none '
-      : 'pointer-events-auto'
+      : 'pointer-events-auto '
 
   return (
     <Resizable
@@ -41,8 +40,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
       handleClasses={{
         right:
           (openPanes.length === 0 ? 'hidden ' : 'block ') +
-          'translate-x-1/2 hover:bg-chalkboard-10 hover:dark:bg-chalkboard-110 bg-transparent transition-colors duration-75 transition-ease-out delay-100 ' +
-          pointerEventsCssClass,
+          'translate-x-1/2 hover:bg-chalkboard-10 hover:dark:bg-chalkboard-110 bg-transparent transition-colors duration-75 transition-ease-out delay-100 ',
       }}
     >
       <div className={styles.grid + ' flex-1'}>
@@ -118,6 +116,7 @@ function ModelingSidebarSection({
     >
       <Tab.List
         className={
+          'pointer-events-auto ' +
           (alignButtons === 'start'
             ? 'justify-start self-start'
             : 'justify-end self-end') +

src/index.css

@@ -135,9 +135,13 @@ code {
   overflow: auto;
 }
 
+#code-mirror-override .cm-gutter {
+  @apply select-none;
+}
+
 #code-mirror-override .cm-activeLine,
 #code-mirror-override .cm-activeLineGutter {
-  @apply bg-primary/20;
+  @apply bg-primary/10;
 }
 
 .dark #code-mirror-override .cm-activeLine,