feat(web): add infinite calendar views and display items#449
Open
JeanMeijer wants to merge 1 commit intomainfrom
Open
feat(web): add infinite calendar views and display items#449JeanMeijer wants to merge 1 commit intomainfrom
JeanMeijer wants to merge 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
24 issues found across 280 files
Note: This PR contains a large number of files. cubic only reviews up to 75 files per PR, so some files may not have been reviewed.
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="apps/web/src/components/calendar/header/calendar-picker/calendar-picker.tsx">
<violation number="1" location="apps/web/src/components/calendar/header/calendar-picker/calendar-picker.tsx:51">
P1: Rule violated: **CSS variable naming and usage conventions (Tailwind v4 namespaces)**
CSS variable name "--calendar-color" violates the Tailwind v4 token namespace rule. Use an allowed namespace such as --color-* for design tokens (rule: CSS variable naming and usage conventions).</violation>
</file>
<file name="apps/web/src/components/calendar/display-item/augmented-item.tsx">
<violation number="1" location="apps/web/src/components/calendar/display-item/augmented-item.tsx:13">
P1: Rule violated: **CSS variable naming and usage conventions (Tailwind v4 namespaces)**
CSS variable names must use an approved namespace (e.g., --color-*) per the “CSS variable naming and usage conventions (Tailwind v4 namespaces)” rule. `--item-color` and `--item-stripe-color` are un-namespaced tokens and violate the rule.</violation>
</file>
<file name="apps/web/src/components/calendar/event/drag-preview.tsx">
<violation number="1" location="apps/web/src/components/calendar/event/drag-preview.tsx:20">
P1: Rule violated: **CSS variable naming and usage conventions (Tailwind v4 namespaces)**
Rename the CSS variable to an allowed Tailwind v4 token namespace (e.g., --color-*) per the CSS variable naming convention rule.</violation>
</file>
<file name="apps/web/src/app/globals.css">
<violation number="1" location="apps/web/src/app/globals.css:51">
P1: Rule violated: **Define custom utilities, variants and plugins using v4 directives; use @apply in components**
Use the Tailwind v4 `@variant` directive for custom variants; `@custom-variant` is deprecated under the rule’s v4 directive requirement.</violation>
</file>
<file name="apps/web/src/components/calendar/event/draggable-week-event.tsx">
<violation number="1" location="apps/web/src/components/calendar/event/draggable-week-event.tsx:138">
P1: Bug: `!columnIndex` is a falsy check that incorrectly rejects column index `0` as invalid. `calculateColumnIndex` returns `null` for out-of-bounds and a number (including `0`) for valid columns. Use a strict null check instead.</violation>
</file>
<file name="apps/web/src/components/calendar/header/calendar-navigation.tsx">
<violation number="1" location="apps/web/src/components/calendar/header/calendar-navigation.tsx:24">
P3: "use memo" is not a recognized directive and is a no-op string statement, so it adds dead code and can mislead readers into thinking memoization is applied. Remove it (or use React.memo if memoization is intended).</violation>
</file>
<file name="apps/web/src/components/calendar/event/use-horizontal-resizable.tsx">
<violation number="1" location="apps/web/src/components/calendar/event/use-horizontal-resizable.tsx:111">
P2: relativeX is never initialized on resize start, so ending a resize without movement reports a negative delta. Initialize relativeX on start (or handle the no-move case) to avoid incorrect resize deltas.</violation>
</file>
<file name="apps/web/src/components/calendar/flows/create-event/create-event-attendee-dialog.tsx">
<violation number="1" location="apps/web/src/components/calendar/flows/create-event/create-event-attendee-dialog.tsx:18">
P3: "use memo" is not a valid React/Next.js directive and does nothing here. It adds dead code and implies memoization that doesn’t exist. Remove it or implement actual memoization (e.g., React.memo).</violation>
</file>
<file name="apps/web/src/components/calendar/flows/update-event/update-recurring-event-dialog.tsx">
<violation number="1" location="apps/web/src/components/calendar/flows/update-event/update-recurring-event-dialog.tsx:18">
P3: "use memo" is not a recognized React directive and does nothing inside the component body, so the new line is a no-op and misleading. Remove it or replace with actual memoization logic (e.g., wrapping the component with React.memo).</violation>
</file>
<file name="apps/web/src/components/calendar/flows/delete-event/delete-event-attendee-dialog.tsx">
<violation number="1" location="apps/web/src/components/calendar/flows/delete-event/delete-event-attendee-dialog.tsx:18">
P2: "use memo" is a no-op string literal and not a valid React/Next.js directive. It won’t memoize the component and just adds dead code. Remove it (or replace with a real memoization pattern if needed).</violation>
</file>
<file name="apps/web/src/components/app-sidebar.tsx">
<violation number="1" location="apps/web/src/components/app-sidebar.tsx:20">
P3: This "use memo" directive is not a recognized React/Next directive and sits inside the component body, so it has no effect (and may trip no-unused-expressions). Remove it or replace with actual memoization (e.g., React.memo).</violation>
</file>
<file name="apps/web/src/components/calendar/month-view/infinite-month-view-provider.tsx">
<violation number="1" location="apps/web/src/components/calendar/month-view/infinite-month-view-provider.tsx:43">
P1: Use the context Provider component; rendering the context object directly will not pass the value to consumers and will fail at runtime.</violation>
</file>
<file name="apps/web/src/components/calendar/display-item/draggable.tsx">
<violation number="1" location="apps/web/src/components/calendar/display-item/draggable.tsx:38">
P1: Local drag handlers shadow the prop callbacks and then call themselves, causing infinite recursion and preventing the passed-in handlers from ever running. Rename the internal handlers and call the props instead (e.g., `handleDragStart` -> `onDragStart`).</violation>
</file>
<file name="apps/web/src/components/calendar/context/container-provider.tsx">
<violation number="1" location="apps/web/src/components/calendar/context/container-provider.tsx:38">
P1: Render the context provider (`ContainerContext.Provider`) instead of the context object, otherwise the value is never provided to children.</violation>
</file>
<file name="apps/web/src/components/calendar/month-view/infinite-month-view.tsx">
<violation number="1" location="apps/web/src/components/calendar/month-view/infinite-month-view.tsx:20">
P3: Standalone string literal inside the component is a no-op. If memoization is intended, this needs a real memoization mechanism (e.g., React.memo/useMemo); otherwise remove the line to avoid dead code.</violation>
</file>
<file name="apps/web/src/components/calendar/event/draggable-month-event.tsx">
<violation number="1" location="apps/web/src/components/calendar/event/draggable-month-event.tsx:142">
P3: The `"use memo"` string is a no-op inside the component body and does not memoize anything. Remove it (or wrap the component with `React.memo` if memoization is intended) to avoid misleading code and potential lint failures.</violation>
</file>
<file name="apps/web/src/components/calendar/event/use-draggable.tsx">
<violation number="1" location="apps/web/src/components/calendar/event/use-draggable.tsx:30">
P3: The "use memo" directive is a no-op and not a valid React directive. It adds dead code and can mislead readers; remove it or replace with actual memoization if intended.</violation>
<violation number="2" location="apps/web/src/components/calendar/event/use-draggable.tsx:68">
P2: onDragEnd should mirror onDragStart/onDrag and return early when disabled or no container ref; otherwise it can fire callbacks with invalid drag state.</violation>
</file>
<file name="apps/web/src/components/calendar/display-item/task-item.tsx">
<violation number="1" location="apps/web/src/components/calendar/display-item/task-item.tsx:23">
P2: Provide an accessible label for the checkbox so assistive tech can identify which task it represents.</violation>
</file>
<file name="apps/web/src/components/calendar/agenda-view/agenda-view.tsx">
<violation number="1" location="apps/web/src/components/calendar/agenda-view/agenda-view.tsx:11">
P3: `"use memo"` is not a valid React/Next.js directive and is a no-op string expression. If memoization is intended, use `React.memo` or `useMemo`; otherwise remove this line to avoid confusing dead code.</violation>
<violation number="2" location="apps/web/src/components/calendar/agenda-view/agenda-view.tsx:14">
P2: The empty-state overlay is now always visible because `AgendaViewEmpty` is always rendered and the wrapper no longer has hiding/conditional logic. This will display “No items found” even when items exist. Render the empty state conditionally (e.g., when `items.length === 0`) or reintroduce a hide/show mechanism.</violation>
</file>
<file name="apps/web/src/components/calendar/display-item/draggable-task-item.tsx">
<violation number="1" location="apps/web/src/components/calendar/display-item/draggable-task-item.tsx:39">
P2: Only set the dragging event id after verifying the container exists; otherwise a missing container leaves the store stuck in a dragging state.</violation>
</file>
<file name="apps/web/src/components/calendar/event/event-item.tsx">
<violation number="1" location="apps/web/src/components/calendar/event/event-item.tsx:98">
P2: Avoid calling `selectAction` on both `onMouseDown` and `onClick`; a single click currently triggers the selection logic twice, which can result in duplicate `LOAD` events and redundant selection updates.</violation>
</file>
<file name="apps/web/src/components/calendar/event/use-vertical-resizable.tsx">
<violation number="1" location="apps/web/src/components/calendar/event/use-vertical-resizable.tsx:97">
P2: Clamp the resized height (and derived top offset) to a minimum so dragging the top handle past the bottom can’t create negative heights and inverted event durations.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
apps/web/src/components/calendar/header/calendar-picker/calendar-picker.tsx
Show resolved
Hide resolved
| timelineWidth, | ||
| }); | ||
|
|
||
| if (!columnIndex) { |
Contributor
There was a problem hiding this comment.
P1: Bug: !columnIndex is a falsy check that incorrectly rejects column index 0 as invalid. calculateColumnIndex returns null for out-of-bounds and a number (including 0) for valid columns. Use a strict null check instead.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/src/components/calendar/event/draggable-week-event.tsx, line 138:
<comment>Bug: `!columnIndex` is a falsy check that incorrectly rejects column index `0` as invalid. `calculateColumnIndex` returns `null` for out-of-bounds and a number (including `0`) for valid columns. Use a strict null check instead.</comment>
<file context>
@@ -0,0 +1,324 @@
+ timelineWidth,
+ });
+
+ if (!columnIndex) {
+ return;
+ }
</file context>
| className, | ||
| ...props | ||
| }: InfiniteMonthViewProps) { | ||
| "use memo"; |
Contributor
There was a problem hiding this comment.
P3: Standalone string literal inside the component is a no-op. If memoization is intended, this needs a real memoization mechanism (e.g., React.memo/useMemo); otherwise remove the line to avoid dead code.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/src/components/calendar/month-view/infinite-month-view.tsx, line 20:
<comment>Standalone string literal inside the component is a no-op. If memoization is intended, this needs a real memoization mechanism (e.g., React.memo/useMemo); otherwise remove the line to avoid dead code.</comment>
<file context>
@@ -0,0 +1,79 @@
+ className,
+ ...props
+}: InfiniteMonthViewProps) {
+ "use memo";
+
+ const containerRef = React.useRef<HTMLDivElement>(null);
</file context>
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.
Description
Briefly describe what you did and why.
Screenshots / Recordings
Add screenshots or recordings here to help reviewers understand your changes.
Type of Change
Related Areas
Testing
Checklist
Notes
(Optional) Add anything else you'd like to share.
By submitting, I confirm I understand and stand behind this code. If AI was used, I’ve reviewed and verified everything myself.
Summary by cubic
Adds infinite-scrolling calendar views and a new display item system. Events, tasks, and journeys render consistently with drag/resize interactions and smoother navigation.
New Features
Migration
Written for commit cb9bcbe. Summary will update on new commits.