tweak(ui): improve collpase area

Author: iamdavidhill

packages/app/src/pages/session/composer/session-question-dock.tsx

@@ -233,36 +233,18 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
     setStore("editing", false)
   }
 
-  const click = (target: EventTarget | null) => {
-    if (store.sending) return
-    if (!(target instanceof Node)) {
-      fold()
-      return
-    }
-
-    const list = root?.querySelector('[data-slot="question-options"]')
-    if (list instanceof HTMLElement && list.contains(target)) return
-    fold()
-  }
-
   return (
     <DockPrompt
       kind="question"
       ref={(el) => (root = el)}
-      bodyProps={{
-        onClick: (event) => click(event.target),
-      }}
       header={
         <div
           data-action="session-question-toggle"
           class="flex flex-1 min-w-0 items-center gap-2 cursor-default select-none"
           role="button"
           tabIndex={0}
           style={{ margin: "0 -10px", padding: "0 0 0 10px" }}
-          onClick={(event) => {
-            event.stopPropagation()
-            fold()
-          }}
+          onClick={fold}
           onKeyDown={(event) => {
             if (event.key !== "Enter" && event.key !== " ") return
             event.preventDefault()
@@ -314,14 +296,13 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
         classList={{
           "mb-6": store.collapsed && picked() === 0,
         }}
-        onClick={(event) => {
-          event.stopPropagation()
-          fold()
-        }}
+        role={store.collapsed ? "button" : undefined}
+        tabIndex={store.collapsed ? 0 : undefined}
+        onClick={fold}
         onKeyDown={(event) => {
+          if (!store.collapsed) return
           if (event.key !== "Enter" && event.key !== " ") return
           event.preventDefault()
-          event.stopPropagation()
           fold()
         }}
       >

packages/ui/src/components/dock-prompt.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, JSX } from "solid-js"
+import type { JSX } from "solid-js"
 import { DockShell, DockTray } from "./dock-surface"
 
 export function DockPrompt(props: {
@@ -7,13 +7,12 @@ export function DockPrompt(props: {
   children: JSX.Element
   footer: JSX.Element
   ref?: (el: HTMLDivElement) => void
-  bodyProps?: Omit<ComponentProps<"div">, "children">
 }) {
   const slot = (name: string) => `${props.kind}-${name}`
 
   return (
     <div data-component="dock-prompt" data-kind={props.kind} ref={props.ref}>
-      <DockShell {...(props.bodyProps ?? {})} data-slot={slot("body")}>
+      <DockShell data-slot={slot("body")}>
         <div data-slot={slot("header")}>{props.header}</div>
         <div data-slot={slot("content")}>{props.children}</div>
       </DockShell>