Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR implements the MVP for the Now view's task management functionality. It introduces components for displaying available tasks and focused tasks, along with supporting hooks and utilities for state management and localStorage persistence.
Key Changes:
- Added task selection and focus functionality with localStorage persistence
- Created comprehensive test coverage for new components (
AvailableTasks,FocusedTask,TaskSelector) and hooks (useAvailableTasks) - Refactored
NowViewto remove placeholder animation code and integrate the new task selector
Reviewed Changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
packages/web/src/views/Now/view/NowViewContent.tsx |
New component wrapping the TaskSelector in a centered layout |
packages/web/src/views/Now/utils/focused-task-storage.util.ts |
Utility functions for managing focused task ID in localStorage with error handling |
packages/web/src/views/Now/hooks/useFocusedTask.ts |
Hook managing focused task state with storage persistence and cross-tab synchronization |
packages/web/src/views/Now/hooks/useAvailableTasks.ts |
Hook loading and filtering available tasks from today's task list |
packages/web/src/views/Now/hooks/useAvailableTasks.test.ts |
Comprehensive test coverage for useAvailableTasks hook |
packages/web/src/views/Now/components/TaskSelector/TaskSelector.tsx |
Component conditionally rendering either FocusedTask or AvailableTasks based on state |
packages/web/src/views/Now/components/TaskSelector/TaskSelector.test.tsx |
Comprehensive test coverage for TaskSelector component |
packages/web/src/views/Now/components/FocusedTask/FocusedTask.tsx |
Component displaying the currently focused task title |
packages/web/src/views/Now/components/FocusedTask/FocusedTask.test.tsx |
Comprehensive test coverage for FocusedTask component |
packages/web/src/views/Now/components/AvailableTasks/AvailableTasks.tsx |
Component displaying list of available tasks with keyboard accessibility |
packages/web/src/views/Now/components/AvailableTasks/AvailableTasks.test.tsx |
Comprehensive test coverage for AvailableTasks component |
packages/web/src/views/Now/NowView.tsx |
Refactored to replace placeholder content with NowViewContent component |
packages/web/src/views/Now/NowView.test.tsx |
Removed redundant test for placeholder content |
packages/web/src/common/constants/storage.constants.ts |
Added FOCUSED_TASK_ID constant for localStorage key |
packages/web/src/views/Now/components/AvailableTasks/AvailableTasks.tsx
Outdated
Show resolved
Hide resolved
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
tyler-dane
force-pushed
the
feat/1237-now-mvp
branch
from
64cf06d to
fb0afd1
Compare
packages/web/src/views/Now/components/FocusedTask/FocusedTask.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Now/components/AvailableTasks/AvailableTasks.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Now/components/TaskSelector/TaskSelector.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Now/components/FocusedTask/FocusedTask.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Now/components/TaskSelector/TaskSelector.test.tsx
Show resolved
Hide resolved
packages/web/src/views/Now/components/TaskSelector/TaskSelector.test.tsx
Show resolved
Hide resolved
packages/web/src/views/Now/components/TaskSelector/TaskSelector.test.tsx
Show resolved
Hide resolved
…ge key - Added `FocusedTask`, `AvailableTasks`, and `TaskSelector` components to improve task selection and display in the Now view. - Introduced `NowViewContent` to encapsulate task-related UI elements. - Updated storage constants to include `FOCUSED_TASK_ID` for managing focused task state. - Refactored `NowView` to utilize the new components, streamlining the rendering logic and enhancing user experience.
- Added useAvailableTasks hook to manage and filter tasks based on their status and creation date. - Implemented unit tests for useAvailableTasks to ensure correct functionality, including loading tasks, filtering out completed tasks, and handling storage changes. - Enhanced task management by ensuring tasks are sorted by creation date and reloaded upon relevant storage events.
- Added useFocusedTask hook to manage the focused task state, including loading from and saving to local storage. - Introduced utility functions for getting, setting, and clearing the focused task ID in local storage. - Enhanced task management by ensuring the focused task is updated based on storage changes and task availability.
…ehavior - Introduced comprehensive tests for the TaskSelector component to validate its rendering based on focused and available tasks. - Implemented scenarios for task selection via mouse and keyboard interactions, ensuring correct state updates. - Added tests for handling empty states when no tasks are available, enhancing overall test coverage for task management functionality.
…edTask tests - Removed the redundant test for rendering the main content in NowView. - Introduced new unit tests for AvailableTasks and FocusedTask components, covering rendering, task selection, and accessibility features. - Enhanced overall test coverage for task management functionality in the Now view.
…lection - Added tests to verify auto-focus functionality on the first incomplete task when no task is focused. - Implemented scenarios to ensure no auto-focus occurs when a task is already focused or when no tasks are available. - Updated existing tests to validate task selection behavior through user interactions, ensuring correct state updates. - Enhanced overall test coverage for the TaskSelector component, improving reliability in task management functionality.
- Implemented onCompleteTask prop in FocusedTask component to handle task completion. - Enhanced FocusedTask tests to verify rendering and completion behavior. - Updated TaskSelector to manage task completion and navigation to the next task. - Added tests for task completion scenarios, ensuring correct state updates and storage interactions.
…lify hook - Deleted focused-task-storage utility functions to streamline focused task management. - Updated useFocusedTask hook to eliminate unnecessary storage interactions and improve clarity. - Adjusted tests to reflect changes in focused task handling, ensuring accurate behavior when no task is focused.
- Introduced useTaskFocus hook to manage auto-focusing on the first incomplete task when no task is currently focused. - Updated TaskSelector component to utilize the new hook, simplifying the focus management logic. - Added comprehensive tests for useTaskFocus to validate auto-focus behavior under various scenarios, ensuring correct task selection and state updates.
…e with TaskSelector - Introduced AllTasksCompleted component to display a message when all tasks are completed. - Updated TaskSelector to render AllTasksCompleted when there are no available tasks but completed tasks exist. - Enhanced useAvailableTasks hook to track all tasks and determine if all tasks are completed. - Added tests for AllTasksCompleted and updated TaskSelector tests to verify new behavior.
…ted tests - Deleted AvailableTasks component and its test file to streamline task management. - Updated TaskSelector to remove dependency on AvailableTasks, simplifying the component structure. - Ensured that task selection logic is maintained while enhancing overall code clarity.
…ronization - Implemented a custom event to facilitate same-tab synchronization when tasks are saved to local storage. - Updated useAvailableTasks hook to listen for the new custom event, ensuring tasks are reloaded appropriately for the current date. - Enhanced cross-tab synchronization by maintaining the existing storage event listener for task updates.
- Updated NowView to include shortcuts for navigating between tasks, displaying nowShortcuts alongside global shortcuts. - Enhanced FocusedTask component to support previous and next task navigation through new props. - Implemented task cycling functionality in TaskSelector, allowing users to navigate tasks seamlessly. - Introduced useNowViewShortcuts hook to manage keyboard shortcuts for task navigation. - Added tests for the new task cycling functionality and ensured existing tests reflect the updated behavior.
…ection - Added AvailableTasks component to display a list of selectable tasks. - Integrated AvailableTasks into TaskSelector for improved task management. - Updated useAvailableTasks hook to track all tasks and filter available tasks for today. - Enhanced TaskSelector tests to cover new AvailableTasks functionality and ensure correct rendering behavior.
tyler-dane
force-pushed
the
feat/1237-now-mvp
branch
from
0f0f419 to
42ba3b2
Compare
packages/web/src/views/Now/components/TaskSelector/TaskSelector.tsx
Outdated
Show resolved
Hide resolved
- Enhanced button styles in FocusedTask component for better visual feedback. - Changed button classes to include rounded-full, padding, and transition effects for hover and focus states. - Improved accessibility with consistent focus ring and background effects.
- Introduced unit tests for the AvailableTasks component to verify rendering and interaction behavior. - Ensured tests cover scenarios for rendering task buttons, handling task selection, and displaying appropriate messages when no tasks are available. - Improved accessibility by validating aria-labels for task buttons.
…anagement - Updated TaskSelector to filter incomplete tasks and determine navigation direction based on fresh data. - Improved logic for focusing on the next or previous task, ensuring correct task selection even with array order differences. - Added fallbacks for task focus to enhance user experience when navigating through tasks.
- Introduced a constant for the custom event name "compass.tasks.saved" to improve code readability. - Defined an interface for the event detail to facilitate same-tab synchronization when tasks are saved to localStorage. - Updated the saveTasksToStorage function to use the new event structure for dispatching the custom event. - Modified the useAvailableTasks hook to utilize the new event type for handling task synchronization.
- Updated test cases in TaskSelector.test.tsx to use getByRole for selecting task elements, improving accessibility and code clarity. - Removed unnecessary chaining of methods for task element retrieval, streamlining the test logic.
…props - Modified AllTasksCompleted tests to include future props in MemoryRouter for improved compatibility with upcoming React features. - Ensured that the tests accurately reflect the rendering behavior of the AllTasksCompleted component with the new router configuration.
5 tasks
packages/web/src/views/Now/components/TaskSelector/TaskSelector.tsx
Outdated
Show resolved
Hide resolved
…e into TaskSelector - Implemented getIncompleteTasksSorted function to filter and sort incomplete tasks by creation date, using array index as a tie-breaker for identical timestamps. - Updated TaskSelector and useAvailableTasks hook to utilize the new sorting function, improving code clarity and reducing redundancy. - Removed outdated filtering logic from TaskSelector and useAvailableTasks, enhancing maintainability.
This was referenced Nov 15, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a minimal implementation of the Now view. Lots of this code will be cleaned up in the sub-issues in #1237
Closes #1243