tweak(ui): restore questions progress indicator

pull/15697/head
David Hill 2026-03-02 12:08:37 +00:00
parent 81a61f8dbd
commit b286c0ae3f
2 changed files with 75 additions and 1 deletions

View File

@ -233,6 +233,12 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
setStore("editing", false)
}
const jump = (tab: number) => {
if (store.sending) return
setStore("tab", tab)
setStore("editing", false)
}
return (
<DockPrompt
kind="question"
@ -252,7 +258,32 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
}}
>
<div data-slot="question-header-title">{summary()}</div>
<div class="ml-auto">
<div data-slot="question-progress" class="ml-auto">
<For each={questions()}>
{(_, i) => (
<button
type="button"
data-slot="question-progress-segment"
data-active={i() === store.tab}
data-answered={
(store.answers[i()]?.length ?? 0) > 0 ||
(store.customOn[i()] === true && (store.custom[i()] ?? "").trim().length > 0)
}
disabled={store.sending}
onMouseDown={(event) => {
event.preventDefault()
event.stopPropagation()
}}
onClick={(event) => {
event.stopPropagation()
jump(i())
}}
aria-label={`${language.t("ui.tool.questions")} ${i() + 1}`}
/>
)}
</For>
</div>
<div>
<IconButton
data-action="session-question-toggle-button"
icon="chevron-down"

View File

@ -808,6 +808,49 @@
min-width: 0;
}
[data-slot="question-progress"] {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
[data-slot="question-progress-segment"] {
width: 16px;
height: 16px;
padding: 0;
border: 0;
background: transparent;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
touch-action: manipulation;
&::after {
content: "";
width: 16px;
height: 2px;
border-radius: 999px;
background-color: var(--icon-weak-base);
transition: background-color 0.2s ease;
}
&[data-active="true"]::after {
background-color: var(--icon-strong-base);
}
&[data-answered="true"]::after {
background-color: var(--icon-interactive-base);
}
&:disabled {
cursor: not-allowed;
opacity: 0.6;
}
}
[data-slot="question-content"] {
display: flex;
flex-direction: column;