tweak(ui): expand question dock toggle area

Author: iamdavidhill

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

@@ -233,18 +233,36 @@ 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={fold}
+          onClick={(event) => {
+            event.stopPropagation()
+            fold()
+          }}
           onKeyDown={(event) => {
             if (event.key !== "Enter" && event.key !== " ") return
             event.preventDefault()
@@ -296,13 +314,14 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
         classList={{
           "mb-6": store.collapsed && picked() === 0,
         }}
-        role={store.collapsed ? "button" : undefined}
-        tabIndex={store.collapsed ? 0 : undefined}
-        onClick={fold}
+        onClick={(event) => {
+          event.stopPropagation()
+          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 { JSX } from "solid-js"
+import type { ComponentProps, JSX } from "solid-js"
 import { DockShell, DockTray } from "./dock-surface"
 
 export function DockPrompt(props: {
@@ -7,12 +7,13 @@ 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 data-slot={slot("body")}>
+      <DockShell {...(props.bodyProps ?? {})} data-slot={slot("body")}>
         <div data-slot={slot("header")}>{props.header}</div>
         <div data-slot={slot("content")}>{props.children}</div>
       </DockShell>