refactor(web): improve temporal format functions #422

JeanMeijer · 2025-11-10T22:07:31Z

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

Authentication
Calendar UI
Data/API
Docs

Testing

Manual testing performed
Cross-browser testing (if UI changes)
Mobile responsiveness verified (if UI changes)

Checklist

I’ve read the CONTRIBUTING guide
My code works and is understandable and follows the project's style guidelines
I have performed a self-review of my code
I have commented my code, particularly in complex areas
I have updated the documentation
Any dependent changes are merged and published

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

Refactored date/time formatting to a single utils module and updated components to use it, improving consistency across timezones, locales, and 12/24-hour formats. Also simplified the current-time indicator API and display.

Refactors
- Added formatTime and format helpers in lib/utils/format with overloads for ZonedDateTime, Instant, PlainTime, and PlainDate.
- Replaced direct @formkit/tempo usage in DateInput, TimeInput, TimeFormatPicker, and current-time indicator with the new helpers.
- useCurrentTimeIndicator now returns { position, visible, label } and uses formatTime.
- DateInput uses Temporal for “this year” checks and the new format helper; TimeFormatPicker uses useMemo for current time.
Migration
- Update consumers of useCurrentTimeIndicator to indicator.position, indicator.visible, and indicator.label.
- Import and use "@/lib/utils/format" helpers instead of formatting directly in components.

^{Written for commit 8fbe0f7. Summary will update automatically on new commits.}

vercel · 2025-11-10T22:07:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
analog	Ready	Preview	Comment	Nov 13, 2025 1:22am

coderabbitai · 2025-11-10T22:07:40Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

cubic-dev-ai

2 issues found across 6 files

Prompt for AI agents (all 2 issues)


Understand the root cause of the following 2 issues and fix them.


<file name="apps/web/src/components/calendar/timeline/time-indicator.tsx">

<violation number="1" location="apps/web/src/components/calendar/timeline/time-indicator.tsx:47">
Rule violated: **Define custom utilities, variants and plugins using v4 directives; use @apply in components**

`z-1000` is a custom Tailwind utility but no `@utility` definition exists, so Tailwind will drop it. Restore the arbitrary value or define the utility via v4 directives to keep the label above surrounding elements.</violation>
</file>

<file name="apps/web/src/lib/utils/format.ts">

<violation number="1" location="apps/web/src/lib/utils/format.ts:66">
`Tempo.format` should use the caller’s time zone when formatting a `Temporal.PlainTime`; hard-coding UTC breaks formatting for non-UTC zones.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

cubic-dev-ai · 2025-11-10T22:19:37Z

apps/web/src/components/calendar/timeline/time-indicator.tsx

        <div className="absolute flex h-4 w-20 items-center justify-end border-r border-transparent">
-          <p className="z-[1000] pe-2 text-[10px] font-medium text-red-500/80 tabular-nums sm:pe-4 sm:text-xs">
-            {formattedTime}
+          <p className="z-1000 pe-2 text-[10px] font-medium text-red-500/80 tabular-nums sm:pe-4 sm:text-xs">


Rule violated: Define custom utilities, variants and plugins using v4 directives; use @apply in components

z-1000 is a custom Tailwind utility but no @utility definition exists, so Tailwind will drop it. Restore the arbitrary value or define the utility via v4 directives to keep the label above surrounding elements.

Prompt for AI agents

Address the following comment on apps/web/src/components/calendar/timeline/time-indicator.tsx at line 47: <comment>`z-1000` is a custom Tailwind utility but no `@utility` definition exists, so Tailwind will drop it. Restore the arbitrary value or define the utility via v4 directives to keep the label above surrounding elements.</comment> <file context> @@ -32,20 +32,20 @@ export function TimeIndicator({ date }: TimeIndicatorProps) { <div className="absolute flex h-4 w-20 items-center justify-end border-r border-transparent"> - - {formattedTime} + + {indicator.label} </file context>

Suggested change

apps/web/src/lib/utils/format.ts

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

cubic-dev-ai

No issues found across 1 file

wip

8ac2374

cubic-dev-ai bot reviewed Nov 10, 2025

View reviewed changes

JeanMeijer changed the title ~~refactor(web): improve formatting functions~~ refactor(web): improve temporal format functions Nov 13, 2025

Update apps/web/src/lib/utils/format.ts

8fbe0f7

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

vercel bot deployed to Preview November 13, 2025 01:23 View deployment

cubic-dev-ai bot reviewed Nov 13, 2025

View reviewed changes

JeanMeijer merged commit 70bd4af into main Nov 13, 2025
8 checks passed

JeanMeijer deleted the refactor/format-date branch November 13, 2025 01:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

refactor(web): improve temporal format functions #422

refactor(web): improve temporal format functions #422

Uh oh!

JeanMeijer commented Nov 10, 2025 •

edited by cubic-dev-ai bot

Loading

Uh oh!

vercel bot commented Nov 10, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 10, 2025 •

edited

Loading

Review skipped

Other AI code review bot(s) detected

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

cubic-dev-ai bot Nov 10, 2025 •

edited

Loading

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<p className="z-1000 pe-2 text-[10px] font-medium text-red-500/80 tabular-nums sm:pe-4 sm:text-xs">
	<p className="z-[1000] pe-2 text-[10px] font-medium text-red-500/80 tabular-nums sm:pe-4 sm:text-xs">

Uh oh!

refactor(web): improve temporal format functions #422

refactor(web): improve temporal format functions #422

Uh oh!

Conversation

JeanMeijer commented Nov 10, 2025 • edited by cubic-dev-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots / Recordings

Type of Change

Related Areas

Testing

Checklist

Notes

Summary by cubic

Uh oh!

vercel bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Other AI code review bot(s) detected

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

JeanMeijer commented Nov 10, 2025 •

edited by cubic-dev-ai bot

Loading

vercel bot commented Nov 10, 2025 •

edited

Loading

coderabbitai bot commented Nov 10, 2025 •

edited

Loading

cubic-dev-ai bot Nov 10, 2025 •

edited

Loading