Make the "True Retention" table pretty

[rbrownwsws]

This is an attempt to make the "True Retention" table in the Stats screen prettier.

Based on the dissucssion in the forum here:
https://forums.ankiweb.net/t/lets-make-the-true-retention-table-look-better/53084

Dark	Light

N.B. At the moment this PR still contains the vestigial remains of the Young/Mature/All/Summary variant seen here:

I've just removed the radio button for the extra table at the moment.
We may want to fully remove this and tidy the code up a bit if you are happy with the design.

I think these design related questions need to be discussed before considering merging:

1. Do you approve of the general design? (It has only been a few people of the forum discussing it so far)
2. Do you approve of the text for the column labels & radio buttons?
3. Do you approve of the colours/ styling? (I'm not exactly a UI design expert so I've made some pretty arbitrary choices)

As a specific thing when reviewing the code:
Have I added the new translation strings correctly? It seems to work, but I have not done it before in Anki.

[Expertium]

Maybe show Count in white (black for light mode), not in gray?

[rbrownwsws]

I cannot get the checks to pass because the formatter is choking on my .svelte files and I'm not sure why (maybe prettier 2.x is too old?).

I tried updating prettier in package.json to:

"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.2",

Running ./ninja format still fails

Creating a .prettierrc and running Prettier directly works but reformats A LOT of files, which makes me think ./ninja format is doing something else I do not understand.

I'm afraid I don't understand your build system well enough to get it working.

[Expertium]

@Luc-Mcgrady can you help?

[rbrownwsws]

From a little more digging found out about dprint

I think it is using its own version of prettier and ignoring what is in package.json.

This is unfortunate because they have not released a new version of the prettier plugin for quite a while now (from months before the Svelte 5 release).

I guess the only thing I could do is run prettier manually and then override the check by excluding my .svelte files in .dprint.json until the dprint prettier plugin is updated.

[abdnh]

@rbrownwsws The simplest solution is probably to avoid using #snippet and @render for now. I hit the same issue in #3574

[Expertium]

So will "All time" be included or not? It's inconsistent in the screenshots.

A Discord user said that "All time" would be nice to have.

[rbrownwsws]

@Expertium

So will "All time" be included or not? It's inconsistent in the screenshots.

It is shown when you select "all history" at the top of the Stats screen:

I just forgot to click "all history" again after changing to the Light theme for the screenshots.

[rbrownwsws]

@abdnh

The simplest solution is probably to avoid using #snippet and @render for now

That would be sad. {#snippet} works quite nicely here.
I guess I can just put all the row data into an array and use {#each} instead in this case.

At some point @dae might want to consider moving away from dprint.
The dprint-plugin-prettier CI has been failing for about 3 months now, which suggests it is not very actively maintained.

[rbrownwsws]

Yay! Checks pass. 🎉

[dae]

Thanks for looking into this Ross! I went down the rabbit hole of updating the prettier plugin and ran out of time 😅 I'll circle back to a review of this tomorrow.

[dae]

Thanks Ross! I think both the UI and your code look good, and the UI works well on a phone screen. Just a few minor tweaks to request:

[dae]

Thank you! 🚀