Implement dynamic pluralization for click counter label

[nabarvn]

Current Behavior

The AnalyticsBadge component in link-details-column.tsx shows "clicks" as the label regardless of the count value. For example, when there is only 1 click, it still displays "1 clicks" which is grammatically incorrect.

Expected Behavior

The label should dynamically change based on the count:

• When count = 1: Should display "1 click"
• When count = 0 or > 1: Should display "{number} clicks"

Proposed Solution

Replace the current label rendering:

{label && (
  <span className="hidden md:inline-block">&nbsp;{label}</span>
)}

with:

{label && (
  <span className="hidden md:inline-block">
    &nbsp;{label.slice(0, -1)}{value !== 1 && 's'}
  </span>
)}

Contribution

I would like to work on this issue and submit a pull request with the potential fix. Please let me know if this approach sounds reasonable or if you have any suggestions for improvement.

[linear[bot]]

ENG-876 Implement dynamic pluralization for click counter label

[unrenamed]

@nabarvn Good catch! This should ideally be encapsulated in a utility function like pluralize. The function can also accept an optional plural?: string parameter to accommodate words that have custom plural forms without the standard s.

cc @steven-tey

[steven-tey]

Great idea, let's move this into a reusable function 👍

[nabarvn]

@unrenamed Thanks for the valuable suggestion!

[nabarvn]

Great idea, let's move this into a reusable function 👍

Roger that - is it okay if I add the reusable function in apps/web/lib/analytics/utils.ts?

[steven-tey]

sure thing!

[nabarvn]

@steven-tey Appreciate you. 🤝