Added a label to add last used date on each group

[JAHANWEE]

Date: 6 Nov 2025

Developer Name: @JAHANWEE

---

Issue Ticket Number

• Closes Group Page Revamp — Accurate Member Count & Last Added Date #1023

Description

• Last used label added on the group card, displaying the last used date of each group
• Used a tooltip to maintain consistency while displaying dates
• Business requirement: Date format intentionally does not include weekday (e.g., "12 Nov 2025" instead of "Thu, 12 Nov 2025").

Documentation Updated?

• Yes
• No

Under Feature Flag

• Yes
• No

Database Changes

• Yes
• No

Breaking Changes

• Yes
• No

Development Tested?

• Yes
• No

Screenshots

Screenshot 1

Test Coverage

Screenshot 1

Additional Notes

• As discussed with Ankush, we will be dropping weekday from the date format here.
• Note: The timestamp discrepancy observed during manual testing in the Chrome console was due to using a UNIX timestamp in seconds (e.g., 1699778432), while new Date() expects milliseconds. In the actual code, timestamps are already in milliseconds, so the function produces the correct date.
• Have noticed fullDateString and shortDateString being repeated several times in the codebase, will make a fresh PR for the cleanup of the code, and will also move the tests from group.test.js to util.test.js accordingly.
• A follow-up issue has been created to:
  • Consolidate all date utilities,
  • Add an includeWeekday option to support both format styles,
  • Move the unit tests accordingly.
• This avoids blocking the current feature while still ensuring the future cleanup is tracked.

[coderabbitai]

Important

Review skipped

Auto incremental 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.

Summary by CodeRabbit

• New Features

  • Group cards now display a last-used timestamp to help you identify recently active groups
  • Hover over the timestamp to view full date-time and timezone information for detailed usage history

• Style

  • Updated group card design with new last-used badge styling and enhanced tooltip interactions

Walkthrough

Changes add a "last-used" feature to group cards. The lastUsedOnMs field is computed from group timestamp data, rendered as a formatted date element with an interactive tooltip displaying full datetime information, and styled with hover-triggered display behavior.

Changes

Cohort / File(s)	Summary
Data layer groups/script.js	Computes lastUsedOnMs from group.lastUsedOn.seconds (or _seconds) in milliseconds and includes it in the aggregated group object stored in dataStore.groups alongside existing fields.
Presentation layer groups/createElements.js	Adds UI element card__last-used to group card markup. Populates with formatted short date (weekday, year, month, day) and tooltip span showing full date-time when group.lastUsedOnMs is provided; hides element if absent.
Styling groups/style.css	Introduces new CSS classes (.card__last-used, .tooltip-container, .tooltip) and hover rule (.tooltip-container:hover .tooltip) to style the last-used badge and tooltip system with positioning, typography, and transition behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Straightforward timestamp conversion without complex logic
• Conditional rendering pattern with clear intent
• Standard CSS tooltip implementation with hover interaction
• No architectural changes or control flow modifications

Poem

🐰 A timestamp whispers on each card so bright,
Last-used dates now dance into sight!
Hover reveals the tale so true,
Tooltips bloom in morning dew. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding a last-used date label to group cards.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly relates to the changeset, describing the addition of a 'last used' label on group cards with specific implementation details about date formatting and tooltip usage.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[korbit-ai]

I was unable to write a description for this pull request. This could be because I only found files I can't scan.

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Inconsistent null checking in timestamp conversion ▹ view
	Inline Complex Data Transformation ▹ view
	Duplicated Date Formatting Logic ▹ view

Files scanned

​

File Path	Reviewed
groups/script.js	✅
groups/createElements.js	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

[coderabbitai]

Actionable comments posted: 3

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3116697 and 7357588.

📒 Files selected for processing (3)

• groups/createElements.js (2 hunks)
• groups/script.js (1 hunks)
• groups/style.css (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

groups/createElements.js (1)

groups/script.js (1)

• group (278-278)

🔇 Additional comments (2)

groups/script.js (1)

199-204: Unnecessary defensive check; .seconds property never populated.

The code checks for both seconds and _seconds, but groups are loaded from the REST API endpoint (/discord-actions/groups) which consistently returns Firestore Timestamps in serialized format with _seconds. The seconds property (without underscore) is never populated. The check is valid defensive programming but the first condition is dead code and can be removed.

Simplify to check only _seconds:

const lastUsedOnMs =
  group?.lastUsedOn?._seconds != null
    ? group.lastUsedOn._seconds * 1000
    : undefined;

groups/createElements.js (1)

47-67: Consider making locale configurable for internationalization.

The date formatting uses a hardcoded 'en-US' locale in both the short and long date formats. For a more internationalized user experience, consider using the browser's locale or making this configurable.

You could use the browser's default locale by omitting the locale parameter or using navigator.language:

-const shortFormatted = new Intl.DateTimeFormat('en-US', {
+const shortFormatted = new Intl.DateTimeFormat(navigator.language, {
   weekday: 'short',
   year: 'numeric',
   month: 'short',
   day: 'numeric',
 }).format(date);

And similarly for the tooltip formatting at line 58.

⛔ Skipped due to learnings

Learnt from: AnujChhikara
Repo: Real-Dev-Squad/website-dashboard PR: 976
File: components/request-card/utils.js:15-27
Timestamp: 2025-04-14T12:08:38.070Z
Learning: Date formatting functions in the website-dashboard project should consistently use 'en-US' locale for Intl.DateTimeFormat to maintain formatting consistency.