frontend: use only date-fns to display time for the user

[nicoschmdt]

fix: #1074

Summary by Sourcery

Replace javascript-time-ago with date-fns for relative time display in frontend components and clean up related dependencies.

Enhancements:

• Use date-fns formatDistanceToNow for displaying relative times in ethernet interface and version chooser components.

Chores:

• Remove javascript-time-ago and its type definitions from frontend dependencies.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Replaces javascript-time-ago with date-fns’s formatDistanceToNow for relative time display in Ethernet InterfaceCard and VersionCard components, and removes now-unused time-ago dependencies from the frontend package.json.

Class diagram for InterfaceCard and VersionCard time display changes

classDiagram
  class InterfaceCard {
    +getLeaseExpiryText(expiresAt Date) string
    +getLeaseExpiryClass(lease DHCPServerLease) string
  }

  class VersionCard {
    +asTimeAgo(value string) string
    +shortSha(value string) string
  }

  class DateFns {
    +formatDistanceToNow(date Date, options Object) string
  }

  InterfaceCard ..> DateFns : uses
  VersionCard ..> DateFns : uses

Loading

File-Level Changes

Change	Details	Files
Switch relative time formatting in the Ethernet interface lease display to date-fns.	Replace javascript-time-ago imports with a named import of formatDistanceToNow from date-fns. Remove TimeAgo locale initialization and instance creation. Change lease expiry formatting to use formatDistanceToNow(expiresAt, { addSuffix: true }) for human-readable relative times.	core/frontend/src/components/ethernet/InterfaceCard.vue
Switch relative time formatting in the Version chooser card to date-fns.	Replace javascript-time-ago imports with a named import of formatDistanceToNow from date-fns. Remove TimeAgo locale initialization and instance creation. Change asTimeAgo helper to use formatDistanceToNow(new Date(Date.parse(value)), { addSuffix: true }) for relative build times.	core/frontend/src/components/version-chooser/VersionCard.vue
Clean up unused time-ago-related dependencies.	Remove @types/timeago from devDependencies. Remove javascript-time-ago from dependencies.	core/frontend/package.json

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#1074	Replace usage of javascript-time-ago/timeago in the frontend with date-fns for displaying relative time to the user.	✅
#1074	Remove timeago/javascript-time-ago-related dependencies and types from the frontend package configuration.	✅
#1074	Standardize on a single time-display library across all relevant parts of the project (including replacing momentjs in solarsurfer).	❌	The diff only updates Vue components in the core frontend to use date-fns and removes javascript-time-ago dependencies. There are no changes related to solarsurfer or replacing momentjs.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• You now duplicate formatDistanceToNow(..., { addSuffix: true }) logic in multiple components; consider extracting a small shared helper (e.g. asTimeAgo(date: Date | string)) to keep formatting consistent and make future changes easier.
• In VersionCard.asTimeAgo, you can simplify and harden the parsing by using const date = new Date(value) and returning a fallback if isNaN(date.getTime()), so invalid timestamps don’t propagate into formatDistanceToNow.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- You now duplicate `formatDistanceToNow(..., { addSuffix: true })` logic in multiple components; consider extracting a small shared helper (e.g. `asTimeAgo(date: Date | string)`) to keep formatting consistent and make future changes easier.
- In `VersionCard.asTimeAgo`, you can simplify and harden the parsing by using `const date = new Date(value)` and returning a fallback if `isNaN(date.getTime())`, so invalid timestamps don’t propagate into `formatDistanceToNow`.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}