Add a close button to sidebar panes (#3038)

* Add a close button to sidebar panes

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

* Rerun CI

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

* Fix up dark mode look and feel

---------

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

src/components/ModelingSidebar/ModelingPane.tsx

@@ -1,6 +1,8 @@
 import styles from './ModelingPane.module.css'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useModelingContext } from 'hooks/useModelingContext'
+import { ActionButton } from 'components/ActionButton'
+import Tooltip from 'components/Tooltip'
 
 export interface ModelingPaneProps
   extends React.PropsWithChildren,
@@ -8,16 +10,32 @@ export interface ModelingPaneProps
   title: string
   Menu?: React.ReactNode | React.FC
   detailsTestId?: string
+  onClose: () => void
 }
 
 export const ModelingPaneHeader = ({
   title,
   Menu,
-}: Pick<ModelingPaneProps, 'title' | 'Menu'>) => {
+  onClose,
+}: Pick<ModelingPaneProps, 'title' | 'Menu' | 'onClose'>) => {
   return (
     <div className={styles.header}>
       <div className="flex gap-2 items-center flex-1">{title}</div>
       {Menu instanceof Function ? <Menu /> : Menu}
+      <ActionButton
+        Element="button"
+        iconStart={{
+          icon: 'close',
+          iconClassName: '!text-current',
+          bgClassName: 'bg-transparent dark:bg-transparent',
+        }}
+        className="!p-0 !bg-transparent hover:text-primary border-transparent dark:!border-transparent hover:!border-primary dark:hover:!border-chalkboard-70 !outline-none"
+        onClick={onClose}
+      >
+        <Tooltip position="bottom-right" delay={750}>
+          Close
+        </Tooltip>
+      </ActionButton>
     </div>
   )
 }
@@ -29,6 +47,7 @@ export const ModelingPane = ({
   className,
   Menu,
   detailsTestId,
+  onClose,
   ...props
 }: ModelingPaneProps) => {
   const { settings } = useSettingsAuthContext()
@@ -51,7 +70,7 @@ export const ModelingPane = ({
         (className || '')
       }
     >
-      <ModelingPaneHeader title={title} Menu={Menu} />
+      <ModelingPaneHeader title={title} Menu={Menu} onClose={onClose} />
       <div className="relative w-full">{children}</div>
     </section>
   )