Sfoglia il codice sorgente

tweak(ui): restore questions progress indicator

David Hill 1 mese fa
parent
commit
b286c0ae3f

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

@@ -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"

+ 43 - 0
packages/ui/src/components/message-part.css

@@ -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;