Use Sites.Index on /sites

[aerosol]

Changes

This PR switches /sites listing to use Sites.Index from #6124

Scrivener dependency gets removed, defaults to traffic sort descending.

@sanne-san whenever you have time, please have a look at the commits I mentioned you on.

I'll add another PR on top of it, where per user/team sort criteria preferences will be remembered on each setting.

Tests

• Automated tests have been added
• This PR does not require tests

Changelog

• Entry has been added to changelog
• This PR does not make a user-facing change

Documentation

• Docs have been updated
• This change does not need a documentation update

Dark mode

• The UI has been tested both in dark and light mode
• This PR does not change the UI

[ukutaht]

Haven't done a full code review but some visual stuff I noticed (cc @sanne-san):

1. We should provide UI feedback immediately when dropdown item is clicked and page is loading. The most minimal thing that would work: 0f129a6. Try with socket.enableLatencySim(500).

2. The search input has 38px height, sort dropdown 42px and "Add Site" button 40px. I think there are multiple issues here. From a cursory look we've mostly standardized on 40px inputs and buttons. But <.filter_bar> is using a custom input that has a different size. Buttons have their own issue: the secondary and danger button styles are 2px higher compared to primary style because they use broders. I think it's an overall consistency issue but just very noticeable here since we're mixing three different sizes side-by-side.

3. I'm struggling to propose something concrete about this but I'm thinking maybe there's something better than using "Visitors, high to low", "Name, A-Z" as the dropdown copy. Maybe up/down arrow icons or something as a visual indicator would be better. Not sure, more of an open-ended thought to play around with this.

[github-actions]

Preview environment👷🏼‍♀️🏗️
PR-6143

[sanne-san]

@ukutaht thanks for noticing these – I had a bit of a rushed look yesterday, my bad. Fixed all the issues. On #3, I changed it to "Most visitors" and "Fewest visitors" for now, as we also agreed upon in the card. It's less ambiguous than arrows, but if we'll add more options (pageviews, conversion, etc.) we might have to switch to arrows anyway. Wdyt?

I also switched from using the button css to using dedicated css for the dropdown. It's largely the same but diverges in a few ways (e.g. if the dropdown has a width that is wider than its content, it was now centering all content rather than content on the left and chevron on the right). I'm not sure but I think decoupling these styles altogether makes sense? I also ensured that the dropdown menu min-width equals the width of the trigger. It works, but not sure it's the right pattern.

[aerosol]

From my point of view it's ready, pinning (+CRM), migration and persistence of choice included. Review(s) appreciated @plausible/developers

[ukutaht]

@sanne-san looks good!

I also switched from using the button css to using dedicated css for the dropdown. It's largely the same but diverges in a few ways (e.g. if the dropdown has a width that is wider than its content, it was now centering all content rather than content on the left and chevron on the right). I'm not sure but I think decoupling these styles altogether makes sense?

makes sense to me

also ensured that the dropdown menu min-width equals the width of the trigger. It works, but not sure it's the right pattern.

The implementation itself is sound but the way it's patching Prima is quite hacky and error-prone IMO. Matching the trigger size is a common pattern for dropdowns so I'm thinking it would be best to add it as an option to Prima itself.

Not a blocker for this PR

[ukutaht]

@sanne-san I've added this to Prima now. Upgrade to 0.2.6 to get access to it. See example "Match Trigger Width" here.

[aerosol]

@ukutaht added a series of commits addressing your remarks, including a new migration for storing sort preferences. Upon approval I'll extract to separate PR. I've also simplified LV/index interactions and state maintenance. Let me know if that looks any better please.