Carlos Florêncio
81 lines
2.8 KiB
Markdown
81 lines
2.8 KiB
Markdown
---
|
|
id: "01-quick-chat-elevation"
|
|
title: "Add Quick Chat elevation"
|
|
status: done
|
|
wave: 1
|
|
depends_on: []
|
|
plan: "plan.md"
|
|
spec: "../../specs/ui/quick-chat-elevation.md"
|
|
---
|
|
|
|
# Task 01: Add Quick Chat elevation
|
|
|
|
## Acceptance
|
|
|
|
1. Tablet and desktop Quick Chat opens above a subtle non-transparent backdrop while retaining its
|
|
existing panel shadow, size, position, content, and close behavior.
|
|
2. Closing Quick Chat removes the backdrop and restores the page; the existing mobile Quick Chat
|
|
entry, full-screen composition, close control, and no-overflow behavior remain intact.
|
|
|
|
## Verification
|
|
|
|
```bash
|
|
cd apps && pnpm install --frozen-lockfile
|
|
pnpm --filter @kandev/web run typecheck
|
|
pnpm --dir web e2e:run --project chromium tests/chat/quick-chat.spec.ts -- --grep "elevation"
|
|
pnpm --dir web e2e:run --project mobile-chrome tests/chat/mobile-quick-chat-entry.spec.ts
|
|
```
|
|
|
|
The E2E test is written and run RED before changing the overlay class, then rerun GREEN after the
|
|
minimal frontend change. The final E2E commands use the managed runner so the production Vite build
|
|
is refreshed before browser verification.
|
|
|
|
## Files likely touched
|
|
|
|
- `apps/web/components/quick-chat/quick-chat-modal.tsx`
|
|
- `apps/web/e2e/tests/chat/quick-chat.spec.ts`
|
|
|
|
Existing mobile coverage used as evidence:
|
|
|
|
- `apps/web/e2e/tests/chat/mobile-quick-chat-entry.spec.ts`
|
|
|
|
## Dependencies
|
|
|
|
None. Reuse the existing `DialogOverlay`, Quick Chat modal, helpers, and mobile entry coverage.
|
|
|
|
## Parallelism
|
|
|
|
Sequential. The test and the one-line overlay change describe the same rendered contract and must
|
|
be verified together.
|
|
|
|
## Inputs
|
|
|
|
- `docs/specs/ui/quick-chat-elevation.md`
|
|
- `docs/plans/quick-chat-elevation/plan.md`
|
|
- `apps/web/AGENTS.md`
|
|
- `.agents/skills/tdd/SKILL.md`
|
|
- `.agents/skills/e2e/SKILL.md`
|
|
- `.agents/skills/mobile-parity/SKILL.md`
|
|
|
|
## Risks
|
|
|
|
- Do not replace the transparent overlay globally; the change is scoped to Quick Chat and should
|
|
not alter other dialogs or the separate new-chat picker.
|
|
- Avoid changing phone geometry: the full-screen panel covers the backdrop by design.
|
|
|
|
## Results
|
|
|
|
- Added the desktop rendered contract test in `apps/web/e2e/tests/chat/quick-chat.spec.ts`.
|
|
- Confirmed RED before the production change: the overlay computed to `rgba(0, 0, 0, 0)`.
|
|
- Changed only the Quick Chat overlay class from `bg-transparent` to `bg-black/20`; the existing
|
|
`shadow-2xl` panel and mobile full-screen layout remain unchanged.
|
|
- Typecheck passed.
|
|
- Focused desktop E2E passed (1 test) and existing mobile entry E2E passed (4 tests).
|
|
- Managed desktop/mobile PR screenshot capture passed; generated assets remain ignored in
|
|
`apps/web/.pr-assets/` for PR publication.
|
|
|
|
## Output contract
|
|
|
|
Report the RED and GREEN E2E evidence, changed files, exact verification results, blockers or
|
|
residual risks, and update this task plus `plan.md` to `done` when implementation is complete.
|