858: Added daterange popover by az2924 · Pull Request #845 · tahminator/codebloom

az2924 · 2026-03-08T23:58:14Z

858 Description of changes

Checklist before review

I have done a thorough self-review of the PR
Copilot has reviewed my latest changes, and all comments have been fixed and/or closed.
If I have made database changes, I have made sure I followed all the db repo rules listed in the wiki here. (check if no db changes)
All tests have passed
I have successfully deployed this PR to staging
I have done manual QA in both dev (and staging if possible) and attached screenshots below.

Screenshots

Dev

Staging

az2924 · 2026-03-08T23:58:20Z

/staging

github-actions · 2026-03-08T23:58:44Z

Available PR Commands

/ai - Triggers all AI review commands at once
/review - AI review of the PR changes
/describe - AI-powered description of the PR
/improve - AI-powered suggestions
/deploy - Deploy to staging

See: https://github.com/tahminator/codebloom/wiki/CI-Commands

github-actions · 2026-03-08T23:59:42Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Date Range Label The `dateRangeLabel` uses "now" as a placeholder if either `startDate` or `endDate` is undefined while the other is present. For example, if only `endDate` is set, it will display "Viewing submissions from now to [endDate]". Verify if this specific wording ("now") is the desired behavior for partial date ranges, or if a different phrasing would be more intuitive for users. const dateRangeLabel = (startDate \|\| endDate) && `Viewing submissions from ${startDate ? d(startDate).format("MMM D, YYYY") : "now"} to ${endDate ? d(endDate).format("MMM D, YYYY") : "now"}`; Mobile UX On mobile, the clock icon is displayed without a tooltip, unlike the desktop version. Confirm if this is the intended user experience for mobile, or if there should be a different way to convey the active date range information to the user on smaller screens. {dateRangeLabel && ( <Flex pos="absolute" bg="teal.7" w={22} h={22} top={-8} right={-8} bd="2px solid var(--mantine-color-dark-7)" align="center" justify="center" style={{ borderRadius: "50%", pointerEvents: "none" }} data-testid="date-range-clock-icon-mobile" > <IconClock size={13} color="white" stroke={2.5} /> </Flex> )}

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx

az2924 · 2026-03-09T21:26:25Z

/deploy

az2924 · 2026-03-13T04:51:01Z

/deploy

az2924 · 2026-03-13T05:01:04Z

/deploy

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx

az2924 · 2026-03-15T17:39:19Z

/deploy

github-actions · 2026-03-15T17:40:53Z

Title

858: Added daterange popover

PR Type

Enhancement

Description

Adds visual indicator for active date filters.
Displays formatted date range in tooltip.
Integrates indicator into user submissions page.
Extends tests for date range indicator visibility.

Diagram Walkthrough

flowchart LR
  UserSubmissions.tsx -- "Uses" --> DateRangeIndicator.tsx
  UserSubmissions.tsx -- "Provides dates from" --> DateRangePopover.tsx
  DateRangeIndicator.tsx -- "Displays status of" --> DateRangePopover.tsx

File Walkthrough

Relevant files

Enhancement

DateRangeIndicator.tsx `New Date Range Filter Indicator Component` js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Introduced `DateRangeIndicator` component to visually signal active date filters. Displays a clock icon with a green background when `startDate` or `endDate` are present. Formats the selected date range for display within a tooltip. Adjusts pointer events for mobile viewports to prevent tooltip interaction.	+70/-0
UserSubmissions.tsx `Integrate Date Range Indicator into User Submissions` js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx Integrated the new `DateRangeIndicator` component into the `UserSubmissions` page. Refactored the `FilterDropdown` logic into a `filterDropdown` constant for reusability. Positioned the `DateRangeIndicator` alongside the `FilterDropdown` for both desktop and mobile layouts. Ensured the indicator receives `startDate` and `endDate` from the `useUserSubmissionsQuery` hook.	+33/-50

Tests

UserSubmissions.test.tsx `Update User Submissions Tests for Date Range Indicator` js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.test.tsx Mocked `useUserSubmissionsQuery` to control `startDate` and `endDate` values for testing. Added new test cases to verify the conditional rendering of `DateRangeIndicator`. Ensured `DateRangeIndicator` renders correctly when `startDate`, `endDate`, or both are set. Confirmed `DateRangeIndicator` does not render when no date range is active.	+79/-1

github-actions · 2026-03-15T17:41:10Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ Add-better-indicator-that-date-range-is-enabled-31d7c85563aa80089b3ecf52a426288b - PR Code Verified Compliant requirements: Add a better indicator that a date range is enabled. The indicator should show when a date range is active. The indicator should display the selected date range. The indicator should be visually distinct. The indicator should be positioned appropriately. Handle mobile and desktop layouts for the indicator. Ensure proper test coverage for the indicator's behavior. Requires further human verification: Visual verification of the indicator's appearance and positioning on both desktop and mobile. Functional verification of the tooltip on desktop. Functional verification that the indicator appears/disappears correctly when date ranges are set/cleared.
⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Styling/Positioning The `DateRangeIndicator` uses `position: absolute` with negative `top` and `right` values. While this achieves the desired overlay effect, it's important to ensure it doesn't cause layout shifts or overlap with other elements, especially if the parent `FilterDropdown`'s size or position changes, or if the `FilterDropdown` is placed in different contexts. pos="absolute" top={-8} right={-8} bg="green.8" Accessibility For the mobile version, the `pointerEvents: "none"` on the icon means it's not interactive and the tooltip is not present. Ensure that users relying on assistive technologies can still understand that a filter is active and what the filter is, even if they can't interact with the icon directly on mobile. An `aria-label` on the icon might be beneficial for mobile. border: "2px solid white",

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx

github-actions · 2026-03-17T01:23:50Z

Title

858: Added daterange popover

PR Type

Enhancement

Description

Implement DateRangeIndicator component.
Display active date filters on user submissions.
Integrate indicator with FilterDropdown.
Update tests for date range visibility.

Diagram Walkthrough

flowchart LR
  UserSubmissions["UserSubmissions Component"] --> FilterDropdown["FilterDropdown Component"];
  UserSubmissions --> DateRangeIndicator["DateRangeIndicator Component"];
  FilterDropdown --> DateRangePopover["DateRangePopover Component"];
  DateRangeIndicator -- "Displays active range" --> UserSubmissions;
  UserSubmissions -- "startDate, endDate" --> DateRangeIndicator;
  UserSubmissions -- "startDate, endDate, setStartDate, setEndDate" --> DateRangePopover;

File Walkthrough

Relevant files

Enhancement

DateRangeIndicator.tsx `New component for displaying active date range filter` js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Introduced a new `DateRangeIndicator` component to visually represent active date filters. Formats and displays the selected `startDate` and `endDate` as a human-readable string. Renders an `IconClock` with a green background, positioned absolutely, with a `Tooltip` on desktop. Uses `useMediaQuery` to adjust behavior for mobile devices, disabling `pointerEvents` for the icon.	+70/-0

Tests

UserSubmissions.test.tsx `Update tests for DateRangeIndicator visibility` js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.test.tsx Added comprehensive mocking for the `useUserSubmissionsQuery` hook to control test data. Introduced `BASE_QUERY_RESULT` to standardize mock return values for the query hook. Added `vi.clearAllMocks()` in `afterEach` to ensure test isolation. Implemented new test cases to verify the conditional rendering of `DateRangeIndicator` based on `startDate` and `endDate` values.	+78/-0

Ui integration

UserSubmissions.tsx `Integrate DateRangeIndicator into UserSubmissions view` js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx Imported the new `DateRangeIndicator` component. Integrated `DateRangeIndicator` into the `UserSubmissions` component, positioning it relative to the `FilterDropdown`. Passed `startDate` and `endDate` from the `useUserSubmissionsQuery` hook to the `DateRangeIndicator`. Refactored the `FilterDropdown` and `DateRangeIndicator` into a `filterDropdown` variable to reduce code duplication for mobile and desktop views.	+33/-50

github-actions · 2026-03-17T01:24:04Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis
⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Styling Complexity The `DateRangeIndicator` component uses a significant number of inline style properties within the `style` prop of the `Box` component. While the guidelines allow inline styles for less complicated cases, this particular instance has many properties. Consider if some of these styles could be better managed using Mantine's `sx` prop for cleaner separation or, if complexity grows, a dedicated `.module.css` file. style={{ zIndex: 10, borderRadius: "50%", border: "2px solid white", pointerEvents: isMobile ? "none" : "auto", alignItems: "center", justifyContent: "center", flexShrink: 0, }}

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx

github-actions · 2026-03-17T04:19:07Z

Commit Validation Failed

The following commits do not start with the required Notion ID 858:

816: Added markdown file for auto-approval github script

Please rebase and update your commit messages.
All messages should be of the following format: 858: Example commit

858: Redid tests 858: Resolved warnings 858: Resolved tests

az2924 · 2026-03-17T04:19:57Z

/deploy

github-actions · 2026-03-17T04:21:37Z

Title

858: Added daterange popover

PR Type

Enhancement

Description

Add date range filter indicator.
Display active date range in tooltip.
Refactor submission filter UI.
Update tests with hook mocking.

Diagram Walkthrough

flowchart LR
  UserSubmissions["UserSubmissions Component"] --> FilterDropdown["FilterDropdown (Filters)"]
  FilterDropdown --> DateRangePopover["DateRangePopover (Set Dates)"]
  FilterDropdown -- "displays when active" --> DateRangeIndicator["DateRangeIndicator (Clock Icon)"]
  DateRangeIndicator -- "shows details on hover" --> Tooltip["Tooltip (Formatted Date Range)"]

File Walkthrough

Relevant files

Enhancement

DateRangeIndicator.tsx `New component for date range filter indication` js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Introduces the new `DateRangeIndicator` React component. Displays a clock icon when a `startDate` or `endDate` is active. Formats and displays the active date range in a `Tooltip` on desktop. Adapts the display for mobile, showing only the icon without a tooltip.	+70/-0
UserSubmissions.tsx `Integrate date range indicator into submissions UI` js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx Imports and integrates the new `DateRangeIndicator` component. Refactors the `FilterDropdown` rendering logic into a reusable constant. Positions the `DateRangeIndicator` within the filter dropdown for both mobile and desktop views.	+33/-50

Tests

UserSubmissions.test.tsx `Update submission tests with hook mocking and indicator tests` js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.test.tsx Mocks the `useUserSubmissionsQuery` hook for isolated component testing. Adds new test cases to verify the `DateRangeIndicator`'s visibility based on `startDate` and `endDate` props. Updates existing tests to use the mocked query hook instead of direct API handlers. Clears all mocks after each test to ensure a clean testing environment.	+102/-15

github-actions · 2026-03-17T04:21:55Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ Add-better-indicator-that-date-range-is-enabled-31d7c85563aa80089b3ecf52a426288b - PR Code Verified Compliant requirements: Add a better indicator that a date range filter is enabled. The indicator is visible when a date range is applied. The indicator shows the selected date range via tooltip. The indicator is integrated with the existing filter dropdown. The indicator handles mobile responsiveness. Requires further human verification: Visually verify the indicator's position and appearance on both desktop and mobile. Verify tooltip functionality on desktop. Verify that the indicator correctly appears/disappears when a date range is applied/cleared.
⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Minor Redundancy The `DateRangeIndicator` function signature uses `Readonly<DateRangeIndicatorProps>`. Since the `DateRangeIndicatorProps` interface already defines its properties as `readonly`, the `Readonly` utility type here is redundant. It's a minor stylistic point. export default function DateRangeIndicator({ startDate, endDate, }: Readonly<DateRangeIndicatorProps>) {

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx

az2924 · 2026-03-17T15:58:54Z

/deploy

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx

az2924 · 2026-03-17T18:54:22Z

/deploy

github-actions · 2026-03-17T18:55:45Z

Title

858: Added daterange popover

PR Type

Enhancement

Description

Adds DateRangeIndicator component.
Displays active date filter status visually.
Integrates indicator into user submissions page.
Updates tests for date range indicator rendering.

File Walkthrough

Relevant files

Enhancement

DateRangeIndicator.tsx `Adds a visual indicator for active date range filters` js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Introduces a new `DateRangeIndicator` React component. Displays a clock icon with a tooltip showing the active date range. Formats `startDate` and `endDate` into a human-readable string for the tooltip. Conditionally renders the indicator only when a date range is active.	+66/-0
UserSubmissions.tsx Integrates `DateRangeIndicator` and refactors filter dropdown js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx Imports and integrates the new `DateRangeIndicator` component. Refactors the filter dropdown rendering logic into a reusable `filterDropdown` JSX variable. Ensures the `DateRangeIndicator` is displayed alongside the filter dropdown for both desktop and mobile views.	+33/-50

Tests

UserSubmissions.test.tsx `Enhances UserSubmissions tests for date range indicator and query mocking` js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.test.tsx Implements mocking for `useUserSubmissionsQuery` to isolate component tests. Adds new test cases to verify the `DateRangeIndicator`'s visibility based on various date range filter states. Refactors existing test blocks to utilize the mocked `useUserSubmissionsQuery` for consistent test data.	+102/-15

github-actions · 2026-03-17T18:56:04Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ Add-better-indicator-that-date-range-is-enabled-31d7c85563aa80089b3ecf52a426288b - PR Code Verified Compliant requirements: Add a better indicator that a date range is enabled. The indicator should be visible when a date range filter is active. The indicator should provide details about the active date range. The implementation should be consistent across desktop and mobile. Requires further human verification: Manual QA in dev/staging. Visual check of the indicator's positioning and appearance on different screen sizes and with various date ranges.
⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Visual Overlap The `DateRangeIndicator` uses absolute positioning (`pos="absolute"`, `top={-8}`, `right={-8}`) and `zIndex: 10`. While this creates the desired overlay effect, it's important to verify through manual QA that it doesn't visually overlap or get clipped by other elements in various scenarios, such as when the filter dropdown is open, on different screen sizes, or with long filter button names. pos="absolute" top={-8} right={-8} bg="green.8" c="white" w={22} h={22} display="flex" style={{ zIndex: 10, borderRadius: "50%", border: "2px solid white", alignItems: "center", justifyContent: "center", flexShrink: 0, }}

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx

github-actions bot reviewed Mar 9, 2026

View reviewed changes

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx Outdated Show resolved Hide resolved

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx Outdated Show resolved Hide resolved

az2924 force-pushed the 858 branch 2 times, most recently from bb9b9b3 to 40cd8ff Compare March 9, 2026 21:26

az2924 force-pushed the 858 branch 2 times, most recently from e3ff6c0 to ad85664 Compare March 13, 2026 04:50

angelayu0530 reviewed Mar 14, 2026

View reviewed changes

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx Show resolved Hide resolved

az2924 force-pushed the 858 branch 2 times, most recently from 78a7c1b to 0810fb7 Compare March 15, 2026 17:39

github-actions bot reviewed Mar 15, 2026

View reviewed changes

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Outdated Show resolved Hide resolved

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Show resolved Hide resolved

az2924 force-pushed the 858 branch from 0810fb7 to 2db8359 Compare March 17, 2026 01:22

github-actions bot reviewed Mar 17, 2026

View reviewed changes

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Outdated Show resolved Hide resolved

az2924 force-pushed the 858 branch from 0ad396d to 3a143e9 Compare March 17, 2026 04:19

858: Added daterange popover

267e0af

858: Redid tests 858: Resolved warnings 858: Resolved tests

az2924 force-pushed the 858 branch from 3a143e9 to 267e0af Compare March 17, 2026 04:19

github-actions bot reviewed Mar 17, 2026

View reviewed changes

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Show resolved Hide resolved

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Outdated Show resolved Hide resolved

tahminator requested changes Mar 17, 2026

View reviewed changes

858: Resolved comments

551175f

github-actions bot reviewed Mar 17, 2026

View reviewed changes

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Show resolved Hide resolved

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx Show resolved Hide resolved

Conversation

az2924 commented Mar 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

858

Description of changes

Checklist before review

Screenshots

Dev

Staging

Uh oh!

az2924 commented Mar 8, 2026

Uh oh!

github-actions bot commented Mar 8, 2026

Available PR Commands

Uh oh!

github-actions bot commented Mar 8, 2026

PR Reviewer Guide 🔍

Uh oh!

Uh oh!

Uh oh!

az2924 commented Mar 9, 2026

Uh oh!

az2924 commented Mar 13, 2026

Uh oh!

az2924 commented Mar 13, 2026

Uh oh!

Uh oh!

az2924 commented Mar 15, 2026

Uh oh!

github-actions bot commented Mar 15, 2026

Title

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

github-actions bot commented Mar 15, 2026

PR Reviewer Guide 🔍

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 17, 2026

Title

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

github-actions bot commented Mar 17, 2026

PR Reviewer Guide 🔍

Uh oh!

Uh oh!

github-actions bot commented Mar 17, 2026

Commit Validation Failed

Uh oh!

az2924 commented Mar 17, 2026

Uh oh!

github-actions bot commented Mar 17, 2026

Title

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

github-actions bot commented Mar 17, 2026

PR Reviewer Guide 🔍

Uh oh!

Uh oh!

Uh oh!

az2924 commented Mar 17, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

az2924 commented Mar 17, 2026

Uh oh!

github-actions bot commented Mar 17, 2026

Title

PR Type

Description

az2924 commented Mar 8, 2026 •

edited

Loading