unisono/specs/006-copy-link-feature/tasks.md

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

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.

• T001 [US1]: Create frontend/src/components/CopyLinkButton.tsx component with basic structure and Material-UI button. [P]
• T002 [US1]: Implement copyToClipboard utility function in CopyLinkButton.tsx using navigator.clipboard.writeText. [P]
• T003 [US1]: Implement icon animation logic (link to green check, then back) within CopyLinkButton.tsx using React state and Material-UI icons. [P]
• T004 [US1]: Write unit tests for frontend/src/components/CopyLinkButton.tsx covering copy functionality, icon changes, and animation states. [P]
• T005 [US1]: Integrate CopyLinkButton into frontend/src/pages/SessionPage.tsx next to the session topic. [P]
• 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.

• T007 [US2]: Integrate CopyLinkButton into frontend/src/components/ResultsDisplay.tsx next to the session topic. [P]
• 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

• 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]
• T010: Ensure consistent styling and positioning of the "Copy Link" button across both response and result pages, adhering to Material-UI guidelines. [P]
• T011: Run npm run lint and tsc in the frontend directory to ensure code quality and type correctness. [P]
• 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.