fix(ui): separate prompt usage help from prompt list (#3891)
This commit is contained in:
Carlos Florêncio
@@ -502,56 +502,58 @@ export function PromptsSettings() {
|
||||
onSave={showCreate ? handleCreate : handleUpdate}
|
||||
onDiscard={resetForm}
|
||||
>
|
||||
<div className="rounded-lg border border-border/70 bg-muted/30 p-4 text-xs text-muted-foreground">
|
||||
<Trans i18nKey="settings:promptMentionHelp" values={{ token: PROMPT_MENTION_TOKEN }}>
|
||||
Use <span className="font-medium text-foreground">{PROMPT_MENTION_TOKEN}</span> in the
|
||||
chat input to insert a prompt’s content. Prompts are matched by name and expanded in
|
||||
place.
|
||||
</Trans>
|
||||
</div>
|
||||
<SettingsGroup
|
||||
title={t("settings:promptsCustomHeading")}
|
||||
contentClassName="space-y-6 divide-y-0"
|
||||
action={
|
||||
<Button
|
||||
onClick={startCreate}
|
||||
disabled={isBusy || isEditing || showCreate}
|
||||
className={settingsActionClassName()}
|
||||
data-testid="prompt-create-button"
|
||||
>
|
||||
{t("settings:promptAdd")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{showCreate && (
|
||||
<PromptCreateForm
|
||||
formState={formState}
|
||||
onFormChange={(patch) => setFormState((prev) => ({ ...prev, ...patch }))}
|
||||
onCancel={resetForm}
|
||||
isBusy={isBusy}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<PromptListContent
|
||||
promptsLoaded={promptsLoaded}
|
||||
prompts={prompts}
|
||||
editingId={editingId}
|
||||
editingRef={editingRef}
|
||||
formState={formState}
|
||||
onFormChange={(patch) => setFormState((prev) => ({ ...prev, ...patch }))}
|
||||
onStartEditing={startEditing}
|
||||
onOpenDelete={openDeleteDialog}
|
||||
onDeleteCancel={closeDeleteDialog}
|
||||
onDeleteConfirm={confirmDelete}
|
||||
onCancel={resetForm}
|
||||
isBusy={isBusy}
|
||||
showCreate={showCreate}
|
||||
isFinePointer={isFinePointer}
|
||||
deleteTargetId={deleteTarget?.id ?? null}
|
||||
/>
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-lg border border-border/70 bg-muted/30 p-4 text-xs text-muted-foreground">
|
||||
<Trans i18nKey="settings:promptMentionHelp" values={{ token: PROMPT_MENTION_TOKEN }}>
|
||||
Use <span className="font-medium text-foreground">{PROMPT_MENTION_TOKEN}</span> in the
|
||||
chat input to insert a prompt’s content. Prompts are matched by name and expanded in
|
||||
place.
|
||||
</Trans>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
<SettingsGroup
|
||||
title={t("settings:promptsCustomHeading")}
|
||||
contentClassName="space-y-6 divide-y-0"
|
||||
action={
|
||||
<Button
|
||||
onClick={startCreate}
|
||||
disabled={isBusy || isEditing || showCreate}
|
||||
className={settingsActionClassName()}
|
||||
data-testid="prompt-create-button"
|
||||
>
|
||||
{t("settings:promptAdd")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{showCreate && (
|
||||
<PromptCreateForm
|
||||
formState={formState}
|
||||
onFormChange={(patch) => setFormState((prev) => ({ ...prev, ...patch }))}
|
||||
onCancel={resetForm}
|
||||
isBusy={isBusy}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<PromptListContent
|
||||
promptsLoaded={promptsLoaded}
|
||||
prompts={prompts}
|
||||
editingId={editingId}
|
||||
editingRef={editingRef}
|
||||
formState={formState}
|
||||
onFormChange={(patch) => setFormState((prev) => ({ ...prev, ...patch }))}
|
||||
onStartEditing={startEditing}
|
||||
onOpenDelete={openDeleteDialog}
|
||||
onDeleteCancel={closeDeleteDialog}
|
||||
onDeleteConfirm={confirmDelete}
|
||||
onCancel={resetForm}
|
||||
isBusy={isBusy}
|
||||
showCreate={showCreate}
|
||||
isFinePointer={isFinePointer}
|
||||
deleteTargetId={deleteTarget?.id ?? null}
|
||||
/>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
</div>
|
||||
</SettingsPageTemplate>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -169,6 +169,37 @@ Required structure: three visible tabs, expanded sections, concise row descripti
|
||||
Copy and ASCII spacing are illustrative. The work-order copy table is the English starting point.
|
||||
Maps to AC-UI-SETTINGS-COMPOSITION-002.1 through .6, -003.1 through .6, -004.1 through .5, and -005.1 through .7.
|
||||
|
||||
### UI-08: Prompt usage help spacing, desktop and phone
|
||||
|
||||
Entry: `/settings/prompts`, page loaded with custom prompts.
|
||||
|
||||
```text
|
||||
Before, desktop:
|
||||
[ @name usage hint ]
|
||||
Custom prompts [Add prompt]
|
||||
|
||||
After, desktop:
|
||||
[ @name usage hint ]
|
||||
|
||||
Custom prompts [Add prompt]
|
||||
[ prompt list ]
|
||||
|
||||
Before, phone:
|
||||
[ @name usage hint ]
|
||||
Custom prompts
|
||||
[Add prompt]
|
||||
|
||||
After, phone:
|
||||
[ @name usage hint ]
|
||||
|
||||
Custom prompts
|
||||
[Add prompt]
|
||||
[ prompt list ]
|
||||
```
|
||||
|
||||
The page remains the single scroll owner. The 24px separation is required by the existing settings spacing contract. Phone keeps the existing stacked group action.
|
||||
This preview describes the affected region; other page content is omitted. Maps to AC-UI-SETTINGS-COMPOSITION-001.1.
|
||||
|
||||
## Tests and E2E
|
||||
|
||||
Task 06 owns the exact commands and scenarios for the refinement.
|
||||
@@ -186,8 +217,9 @@ The work order also requires every modified existing E2E consumer to run and rec
|
||||
- [x] [Task 05: System, account, and plugin settings](task-05-system-account.md)
|
||||
|
||||
- [x] [Task 06: Concise help and header tabs](task-06-concise-help-and-tabs.md)
|
||||
- [x] [Task 07: Prompt usage help spacing](task-07-prompt-usage-spacing.md)
|
||||
|
||||
Tasks 01 through 05 are complete. Task 06 follows them sequentially. No delegation is authorized.
|
||||
Tasks 01 through 06 are complete. Task 07 records the completed prompt-spacing follow-up.
|
||||
|
||||
## Verification results
|
||||
|
||||
@@ -284,3 +316,7 @@ Do not overlap these E2E commands or use worker overrides.
|
||||
- Shared spacing can affect specialized editors. Retain and document their inner geometry.
|
||||
- Brief descriptions can omit decision-critical exclusions. Keep those visible and move only secondary detail.
|
||||
- Existing E2E selectors reference card structure. Preserve semantic assertions and migrate affected selectors together.
|
||||
|
||||
## Task 07 results
|
||||
|
||||
The prompts page now applies the established 24px settings-group gap between its `@name` usage hint and Custom prompts group. A temporary capture produced desktop and phone screenshots; the capture spec was removed afterward. Commit hooks passed, and the PR body publishes the compressed screenshots from its orphan media ref.
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: "07-prompt-usage-spacing"
|
||||
title: "Separate prompt usage help"
|
||||
status: complete
|
||||
wave: 7
|
||||
depends_on:
|
||||
- 06-concise-help-and-tabs
|
||||
plan: "plan.md"
|
||||
requirements:
|
||||
- REQ-UI-SETTINGS-COMPOSITION-001
|
||||
acceptance_criteria:
|
||||
- AC-UI-SETTINGS-COMPOSITION-001.1
|
||||
system_design:
|
||||
- ../../specs/ui/system-design/settings-composition.md
|
||||
---
|
||||
|
||||
# Task 07: Separate prompt usage help
|
||||
|
||||
## Summary
|
||||
|
||||
Add the settings group's standard 24px gap between the prompt-reference hint and the Custom prompts heading and action.
|
||||
|
||||
## In scope
|
||||
|
||||
- Keep the hint and prompt group in their existing page order.
|
||||
- Apply the shared group spacing on desktop and phone.
|
||||
- Preserve prompt list, editor, save, and delete behavior.
|
||||
|
||||
## Out of scope
|
||||
|
||||
- Changing prompt-reference behavior, prompt content, localization, or persistence.
|
||||
- Rearranging other content on the Prompts settings page.
|
||||
|
||||
## Acceptance
|
||||
|
||||
- The `@name` hint has the existing 24px settings-group separation from the Custom prompts heading and Add prompt action.
|
||||
- Desktop and phone retain the existing inline page flow, with the phone group action stacked below its heading.
|
||||
|
||||
## ASCII UI preview
|
||||
|
||||
UI-08 is the affected region of `/settings/prompts`. The before view is supported by the user-provided desktop screenshot and source; the after views were captured at desktop and phone sizes.
|
||||
|
||||
```text
|
||||
Before, desktop:
|
||||
[ @name usage hint ]
|
||||
Custom prompts [Add prompt]
|
||||
|
||||
Before, phone:
|
||||
[ @name usage hint ]
|
||||
Custom prompts
|
||||
[Add prompt]
|
||||
|
||||
After, desktop:
|
||||
[ @name usage hint ]
|
||||
|
||||
Custom prompts [Add prompt]
|
||||
[ prompt list ]
|
||||
|
||||
After, phone:
|
||||
[ @name usage hint ]
|
||||
|
||||
Custom prompts
|
||||
[Add prompt]
|
||||
[ prompt list ]
|
||||
```
|
||||
|
||||
The page remains the scroll owner. The gap uses the existing `space-y-6` settings spacing token. No new surface, control, or navigation is added. Maps to AC-UI-SETTINGS-COMPOSITION-001.1.
|
||||
|
||||
## Verification
|
||||
|
||||
- `CAPTURE_PR_ASSETS=1 pnpm e2e:run --host tests/settings/prompt-spacing-capture.spec.ts`: passed, one disposable capture scenario; desktop and phone screenshots were inspected and published in PR #3891. The temporary spec was removed after capture.
|
||||
- Commit hooks: passed formatting, changed-file lint, i18n guards, and commit-message validation.
|
||||
- `git diff --check`: passed.
|
||||
|
||||
## Results
|
||||
|
||||
The usage hint and prompt group now have the 24px separation defined by the existing Settings Composition system design. Prompt behavior and persistence are unchanged.
|
||||
Reference in New Issue
Block a user