Implement "floating windows" style UI (#224)

* Basic transparent pane styling

* HTML and static asset cleanup

* Convert to collapsibles

* Polish up DebugPanel

* Add hotkey support, remove allotment

* Remove allotment css dependency

* Merge in from main

* Add a different resizable package

* Fix tsc errors introduced by merge

* Stream has to have at least z-index of 0

* App header has to be above stream z-index

* Applied z-index to the wrong element

* Scrollable logs, disable UI while dragging

* Fix test errors from importing CSS Modules in Jest

* Persist open panes configuration

* Style tweaks and fix camera step in onboarding

* Kurt review, make click-drag handler declarative

src/components/CollapsiblePanel.tsx

@@ -0,0 +1,57 @@
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import { ActionIcon } from './ActionIcon'
+import styles from './CollapsiblePanel.module.css'
+
+export interface CollapsiblePanelProps
+  extends React.PropsWithChildren,
+    React.HTMLAttributes<HTMLDetailsElement> {
+  title: string
+  icon?: IconDefinition
+  open?: boolean
+  iconClassNames?: {
+    bg?: string
+    icon?: string
+  }
+}
+
+export const PanelHeader = ({
+  title,
+  icon,
+  iconClassNames,
+}: CollapsiblePanelProps) => {
+  return (
+    <summary className={styles.header}>
+      <ActionIcon
+        icon={icon}
+        bgClassName={
+          'bg-chalkboard-30 dark:bg-chalkboard-90 group-open:bg-chalkboard-80 rounded ' +
+          (iconClassNames?.bg || '')
+        }
+        iconClassName={
+          'text-chalkboard-90 dark:text-chalkboard-40 group-open:text-liquid-10 ' +
+          (iconClassNames?.icon || '')
+        }
+      />
+      {title}
+    </summary>
+  )
+}
+
+export const CollapsiblePanel = ({
+  title,
+  icon,
+  children,
+  className,
+  iconClassNames,
+  ...props
+}: CollapsiblePanelProps) => {
+  return (
+    <details
+      {...props}
+      className={styles.panel + ' group ' + (className || '')}
+    >
+      <PanelHeader title={title} icon={icon} iconClassNames={iconClassNames} />
+      {children}
+    </details>
+  )
+}