Pascal/pagination numbers fire

[Pascal-Delange]

Content

Part of preparatory work for checkmarble/marble-backend#1010.
It's a minimal downgrade of user experience, but will make things SO MUCH simpler on the backend side.

Sneak peak

Screenshots updated, see comment below

What pagination without the rank numbers could look like:
first page

later page

if first and last element have created_at in the same month

NB: to discuss in which order to write it - on those screenshots it's in the order "from [first row] to [last row]", but that's opposite to temporal order with this pagination order.

While in the case manager it would be

because the order is not based only on the case dates (also on "boosted" status).

Disclaimer

As it is, it displays french format dates even though my selected locale is "english". This is not directly related to this PR, but is a side effect of a partial handling of language/format state in the app/browser, as explained in packages/app-builder/src/utils/format.ts.

[Pascal-Delange]

Apparently this passed the "early slack design review", so pushing this for code review now.

[apognu]

Temporary since November, 2023. 😆

[Pascal-Delange]

no such thing as temporarily commented code :D

[apognu]

We might want to also display the seconds (or change the formatting some way) if the first and last elements are within the same minute.

It is quite likely that an organizaiton will have more than 25 (or even more than 50) decisions made within the same minutes, which would mean several pages would get the same pagination formatting, which in my opinion WouldBeBad.

[...] 23:48 to 23:48

[Pascal-Delange]

You're right, will add tonight (or whenever I finish the PR)

[Pascal-Delange]

• different day

• same day, different minute: you imagine it

• same day, different second

• same second

---

Ok, new version where we show more precise time if it's in the same minute is ready. If it's in the exact same second, even more compact display (and it's more likely to change from page to page)

[Pascal-Delange]

I actually hate nested ternaries, but js somehow pushes me to do it

[Pascal-Delange]

I'm getting this error however

Fixed in the next commit ?

[siiick]

I pushed commit 0e5a3035 with the following changes:

• Refactored the getStartAndEndFormatted function into a FormattedDatesRange component that handles both formatting and rendering of date ranges.
• Introduced distinct wordings for: Same second / Same day / Different days
  This allows us to render ranges like:

From 23 Apr 2025, 10:52 to 28 Apr 2025, 10:53
On 28 Apr 2025 from 10:52 to 10:53
On 28 Apr 2025 at 10:53

• Simplified the root component and clarified separation of concerns.

[Pascal-Delange]

Last iteration on design.

decisions, standard case

decisions, all in same second case

no cases matches filter

cases, standard case

cases, last page

[Pascal-Delange]

The last commit is a refactoring proposition, read it separately.
There was a formatDateTime util function, that included default presets for datetime display.
In the end, half of the places where it was used were passing some of the default props as undefined to suppress them, also the default options (timeformat: "short") are incompatible to mix with numeric formats ("year": "2-digit"...), so I figured it's really more simple and explicit to just let whoever is using the function, choose what format is reasonable for them.

[siiick]

LGTM 👍