feat(web): add view select component#1183
Merged
tyler-dane merged 20 commits intomainfrom Nov 3, 2025
Merged
Conversation
tyler-dane
changed the title
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the TodayButton component and improves Calendar header layout while adding a new SelectView component for view navigation. The changes consolidate duplicate "Today" button implementations and introduce a view switcher dropdown.
- Refactored TodayButton to accept props and use consistent styling across Day and Calendar views
- Added new SelectView component with dropdown for switching between Now, Day, and Week views
- Updated Calendar header layout to better position navigation elements
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/web/src/views/Day/components/TaskList/TaskListHeader.tsx | Updated import path for CircleIcon from local to shared components |
| packages/web/src/views/Calendar/components/TodayButton/styled.ts | Removed styled-components implementation (entire file deleted) |
| packages/web/src/views/Calendar/components/TodayButton/index.ts | Removed barrel export file (entire file deleted) |
| packages/web/src/views/Calendar/components/TodayButton/TodayButton.tsx | Refactored from simple component to accept props (navigateToToday, isToday) with new button styling |
| packages/web/src/views/Calendar/components/Header/styled.ts | Adjusted layout padding: removed padding from HeaderRow, added padding-left to HeaderLabel, added align-items to RightGroup |
| packages/web/src/views/Calendar/components/Header/Header.tsx | Integrated SelectView component, moved SidebarIcon outside StyledLeftGroup, updated TodayButton usage |
| packages/web/src/components/SelectView/SelectView.tsx | New dropdown component for switching between Now/Day/Week views with keyboard shortcut hints |
| packages/web/src/components/SelectView/SelectView.test.tsx | Comprehensive test suite for SelectView component |
| packages/web/src/components/Icons/CircleIcon.tsx | Removed unused React import |
packages/web/src/views/Day/components/TaskList/TaskListHeader.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Day/components/TaskList/TaskListHeader.tsx
Outdated
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.
Comments suppressed due to low confidence (1)
packages/web/src/components/Icons/CircleIcon.tsx:1
- The React import was removed, which is correct for React 17+ with the new JSX transform. However, ensure your tsconfig.json has 'jsx': 'react-jsx' configured to support this.
tyler-dane
force-pushed
the
feat/1103-view-select
branch
from
1d49b82 to
d85dbb6
Compare
…lize it - Introduced CircleIcon component for consistent icon usage. - Updated TodayButton to use CircleIcon and improved its structure by passing props for navigation and visibility. - Removed unused TodayButton index and styled files to streamline the component structure.
- Moved SidebarIcon and TooltipWrapper into the StyledLeftGroup for improved structure. - Removed unnecessary padding from StyledHeaderRow and added padding-left to StyledHeaderLabel for better alignment. - Enhanced code readability by simplifying the Header component's JSX structure.
…igation - Added SelectView component to allow users to switch between Now, Day, and Week views. - Integrated SelectView into the Header component, enabling navigation through route changes. - Implemented dropdown behavior with shortcut hints for each option. - Created comprehensive tests for SelectView to ensure correct rendering and functionality.
- Implemented a test to verify that the dropdown closes when the ESC key is pressed. - Refactored SelectView to utilize Floating UI for improved dropdown behavior and interactions. - Enhanced accessibility by managing dropdown state with keyboard interactions.
- Removed unnecessary React import from SelectView test file. - Simplified the getCurrentView function in SelectView by eliminating redundant return statement. - Updated TaskListHeader to integrate TodayButton and streamline the layout for navigation buttons.
…kListHeader - Added optional props `displayLabel` and `buttonClassName` to SelectView for improved customization of the button's label and styling. - Updated TaskListHeader to utilize SelectView, allowing navigation to different views with a dynamic label based on the current date header. - Streamlined the button's appearance and functionality for better user experience.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…kListHeader - Added optional props `displayLabel` and `buttonClassName` to SelectView for improved customization of the button's label and styling. - Updated TaskListHeader to utilize SelectView, allowing navigation to different views with a dynamic label based on the current date header. - Streamlined the button's appearance and functionality for better user experience.
…e for headings - Refactored tests in TaskContextMenu and TaskListHeader to replace heading elements with button elements for better accessibility and interaction. - Updated assertions to verify button text content instead of heading text content, ensuring consistency in UI testing. - Enhanced test clarity by matching button roles with aria attributes for improved semantic structure.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
- Removed onSelect props from SelectView, replacing them with direct navigation calls using useNavigate. - Updated tests to reflect the new navigation logic, ensuring they verify route changes instead of callback invocations. - Enhanced the SelectView component for cleaner integration and improved user experience.
…essibility - Updated TaskListHeader to wrap the SelectView component in an h2 element, enhancing semantic structure and accessibility. - Ensured that the heading is announced by screen readers, improving the user experience for assistive technology users.
- Cleaned up the StyledHeaderRow component by removing an unnecessary comment while maintaining the existing alignment properties. - This change enhances code readability without altering functionality.
…igation - Updated SelectView component to use a combobox role for improved accessibility and interaction. - Implemented keyboard navigation for options using Arrow keys, Enter, and Space, enhancing user experience. - Refactored option rendering to use div elements instead of buttons, aligning with accessibility best practices. - Updated tests to reflect changes in the component's structure and functionality, ensuring comprehensive coverage.
…obox for accessibility - Changed the role of the heading button in TaskListHeader and TaskContextMenu tests from "button" to "combobox" to align with accessibility best practices. - Updated test assertions to reflect the new role, ensuring accurate verification of UI elements.
- Removed the index parameter from the handleOptionClick function in SelectView, streamlining the function signature. - Updated all calls to handleOptionClick to reflect the new signature, enhancing code clarity and maintainability.
- Changed the button role in SelectView tests from "combobox" to "button" to align with the updated component structure. - Adjusted the role in the SelectView component from "listbox" to "menu" for improved accessibility. - Ensured all related tests reflect these changes, enhancing the overall clarity and maintainability of the code.
- Updated the dropdown class in SelectView to use 'inset-inline-end-0' for better alignment. - This change enhances the visual layout of the dropdown, ensuring it appears correctly in relation to other UI elements.
- Introduced a unique ID for the dropdown in SelectView to improve accessibility. - Updated aria attributes for better screen reader support, including aria-controls and aria-label. - Changed test role assertions from "combobox" to "button" for consistency with the updated component structure in TaskListHeader and TaskContextMenu tests. - Ensured all related tests reflect these changes, enhancing clarity and maintainability.
tyler-dane
force-pushed
the
feat/1103-view-select
branch
from
327cb29 to
3aaf6f5
Compare
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
1 participant
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.
Closes #1110