79 lines
4.8 KiB
Markdown
79 lines
4.8 KiB
Markdown
# Tasks: Copy Link Feature
|
|
|
|
**Feature Branch**: `006-copy-link-feature` | **Date**: 2025-10-13 | **Plan**: [D:/Coding/unisono/specs/006-copy-link-feature/plan.md](D:/Coding/unisono/specs/006-copy-link-feature/plan.md)
|
|
|
|
## Summary
|
|
|
|
This document outlines the tasks required to implement the "Copy Link" feature, which enables users to copy session URLs from the response and result pages with visual feedback. Tasks are organized by user story to facilitate independent development and testing.
|
|
|
|
## Implementation Strategy
|
|
|
|
The feature will be delivered incrementally, focusing on completing each user story as a self-contained, testable unit. User Story 1 (Response Page) will be prioritized first, followed by User Story 2 (Result Page). Testing will be integrated throughout the development process.
|
|
|
|
## Dependencies
|
|
|
|
- **User Story 1 (US1)**: No external dependencies beyond existing project setup.
|
|
- **User Story 2 (US2)**: Depends on the completion of the `CopyLinkButton` component from US1.
|
|
|
|
## Phases
|
|
|
|
### Phase 1: Setup Tasks
|
|
|
|
No specific setup tasks are required beyond the existing project setup, as this feature integrates into the current frontend architecture.
|
|
|
|
### Phase 2: Foundational Tasks
|
|
|
|
No foundational tasks are required that block all user stories, as core dependencies (React, Material-UI) are already in place.
|
|
|
|
### Phase 3: User Story 1 - Share Session Link from Response Page (Priority: P1)
|
|
|
|
**Goal**: Implement the "Copy Link" button on the session response page, allowing users to copy the session URL and receive visual feedback.
|
|
|
|
**Independent Test**: Navigate to a session response page, click the "Copy Link" button, and verify the URL is copied to the clipboard and the animation plays correctly.
|
|
|
|
- [x] T001 [US1]: Create `frontend/src/components/CopyLinkButton.tsx` component with basic structure and Material-UI button. [P]
|
|
- [x] T002 [US1]: Implement `copyToClipboard` utility function in `CopyLinkButton.tsx` using `navigator.clipboard.writeText`. [P]
|
|
- [x] T003 [US1]: Implement icon animation logic (link to green check, then back) within `CopyLinkButton.tsx` using React state and Material-UI icons. [P]
|
|
- [x] T004 [US1]: Write unit tests for `frontend/src/components/CopyLinkButton.tsx` covering copy functionality, icon changes, and animation states. [P]
|
|
- [x] T005 [US1]: Integrate `CopyLinkButton` into `frontend/src/pages/SessionPage.tsx` next to the session topic. [P]
|
|
- [x] T006 [US1]: Write integration tests for `frontend/src/pages/SessionPage.tsx` to verify the `CopyLinkButton`'s presence and functionality. [P]
|
|
|
|
**Checkpoint**: User Story 1 is complete and independently testable.
|
|
|
|
### Phase 4: User Story 2 - Share Session Link from Result Page (Priority: P1)
|
|
|
|
**Goal**: Implement the "Copy Link" button on the session result page, allowing users to copy the session URL and receive visual feedback.
|
|
|
|
**Independent Test**: Navigate to a session result page, click the "Copy Link" button, and verify the URL is copied to the clipboard and the animation plays correctly.
|
|
|
|
- [x] T007 [US2]: Integrate `CopyLinkButton` into `frontend/src/components/ResultsDisplay.tsx` next to the session topic. [P]
|
|
- [x] T008 [US2]: Write integration tests for `frontend/src/components/ResultsDisplay.tsx` to verify the `CopyLinkButton`'s presence and functionality. [P]
|
|
|
|
**Checkpoint**: User Story 2 is complete and independently testable.
|
|
|
|
### Phase 5: Polish & Cross-Cutting Concerns
|
|
|
|
- [x] T009: Implement graceful degradation for browsers that do not support the Clipboard API (e.g., display a fallback message or a text input for manual copying). [P]
|
|
- [x] T010: Ensure consistent styling and positioning of the "Copy Link" button across both response and result pages, adhering to Material-UI guidelines. [P]
|
|
- [x] T011: Run `npm run lint` and `tsc` in the `frontend` directory to ensure code quality and type correctness. [P]
|
|
- [x] T012: Ensure consistent positioning of the "Copy Link" button when the session topic is not displayed or is empty. [P]
|
|
|
|
## Parallel Execution Examples
|
|
|
|
**Within User Story 1 (US1)**:
|
|
- T001, T002, T003, T004 can be developed in parallel as they focus on the `CopyLinkButton` component in isolation.
|
|
- T005 and T006 can be developed in parallel after T001-T004 are complete, focusing on integration into `SessionPage.tsx`.
|
|
|
|
**Within User Story 2 (US2)**:
|
|
- T007 and T008 can be developed in parallel, focusing on integration into `ResultsDisplay.tsx`.
|
|
|
|
## Summary of Tasks
|
|
|
|
- **Total Tasks**: 11
|
|
- **Tasks for US1**: 6
|
|
- **Tasks for US2**: 2
|
|
- **Tasks for Polish & Cross-Cutting Concerns**: 3
|
|
- **Parallel Opportunities**: High, especially within component development and integration for each user story.
|
|
- **Independent Test Criteria**: Each user story has clear, independently verifiable test criteria as outlined in its respective phase.
|
|
- **Suggested MVP Scope**: User Story 1 (Share Session Link from Response Page) provides core value and can be released independently.
|