Change design of lists in web UI #32881

Gargron · 2024-11-13T22:26:34Z

This should make creating and managing lists a lot more pleasant.

Peek.2024-11-16.15-19.mp4

app/javascript/svg-icons/squiggly_arrow.svg

ThisIsMissEm · 2024-11-14T21:08:28Z

What's the "show replies to" thing? That kind of makes it sounds like the list may be public? Maybe "Show in the list replies to"

ThisIsMissEm · 2024-11-14T21:09:51Z

On the profile list modal, maybe it makes sense to have a footer of "Manage all your lists here" type thing? Since the list management UI is buried under the [...] next to the username above the composer.

ThisIsMissEm · 2024-11-14T21:10:52Z

Also, are we being consistent in the placement of the action buttons in modals? I think some are at the bottom, some are in the header like here? It may be good to pick one and stick with it.

ThisIsMissEm · 2024-11-14T21:12:35Z

And final question: what happens if I click a username whilst managing a list? Does that give me a profile overview modal or something, or does it wipe out the fact that I'm managing a list at the moment and jump me to their profile page?

ClearlyClaire · 2024-11-19T10:09:56Z

What's the "show replies to" thing? That kind of makes it sounds like the list may be public? Maybe "Show in the list replies to"

It's the same thing as we currently have, which allows you to chose which replies appear in the list for you:

I'm not sure how this makes it sound like the list may be public?

app/javascript/styles/mastodon/components.scss

renchap

First review purely looking at the code, I did not try to run it

app/javascript/mastodon/features/list_adder/index.tsx

app/javascript/mastodon/features/lists/index.tsx

app/javascript/styles/mastodon/components.scss

ClearlyClaire

I have not fully reviewed the code, but barring the CSS bugs I posted, the UX is a clear improvement.

I do have some (mostly technical) worry about the Add @name to lists modal though: checking/unchecking a list is immediately applied, which is not entirely obvious, and is also likely to be expensive, especially with #32930. It might make more sense to apply the changes in batch after a “Done” button is pressed or something.

ThisIsMissEm · 2024-11-19T12:24:35Z

What's the "show replies to" thing? That kind of makes it sounds like the list may be public? Maybe "Show in the list replies to"

It's the same thing as we currently have, which allows you to chose which replies appear in the list for you:

I'm not sure how this makes it sound like the list may be public?

I think it could definitely do with a clearer label. I was certainly confused by this when looking at it (I don't use lists much personally)

ClearlyClaire · 2024-11-19T12:43:56Z

Maybe instead of “Show replies from list members to”, have “Include replies from list members to”?

Gargron · 2024-11-20T18:29:49Z

All addressed except for the changes to "Add {name} to lists" modal. It might make sense to do this but I'd rather flag it down to be done separately, add a rate limit or debouncing.

ClearlyClaire

I have only skimmed over the code changes, but I have found no issue when trying it out, it appears functional, and is a clear design improvement.

I'll defer to @renchap for the actual code review, but looks good to me otherwise.

mjankowski · 2024-11-24T15:00:44Z

Something I noticed ... as the screen gets taller, the fun squiggly arrow gets further away from what its pointing at...

Could see adjusting that to be dropped some standard distance from the top, instead of vertical centered?

* Remove remnants of embed views (mastodon#32419) * Use `with_options` blocks in `Associations` concern (mastodon#32840) * Add OpenTelemetry VCS attributes (mastodon#32904) * Add missing autofocus on boost modal (mastodon#32953) * Update libretranslate/libretranslate Docker tag to v1.6.2 (mastodon#32951) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @formatjs/cli to v6.3.11 (mastodon#32950) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * New Crowdin Translations (automated) (mastodon#32927) Co-authored-by: GitHub Actions <noreply@github.com> * `Form::Import` spec reduce factories (mastodon#32924) * Reduce long lines in `relationships/show` view (mastodon#32922) * Extract constants for controller `LIMIT` queries (mastodon#32921) * Update dependency aws-sdk-s3 to v1.171.0 (mastodon#32901) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Use `nil` instead of `false` for datetime value in spec (mastodon#32926) * Streaming: add development logging of database queries (mastodon#32945) * Fix `min_id` and `max_id` causing error in search API (mastodon#32857) * Move self destruct check to `config_for` and add constant for verifier string (mastodon#32943) * Change dependency from annotate to annotaterb (mastodon#30232) * Use hash arguments to `select` when possible (Rails 7.2) (mastodon#32917) * Use hash arguments to `order` when possible (Rails 7.2) (mastodon#32915) * Add coverage for fixing the thing with the dates in the search area (mastodon#32958) * Prep work for coverage addition to `ActivityPub::DeliveryWorker` spec (mastodon#32944) * Use group/count approach in annual report classes (mastodon#32914) * DB Replica database_tasks as ENV (mastodon#32908) * Fix notification polling showing a loading bar in web UI (mastodon#32960) * Update dependency aws-sdk-s3 to v1.172.0 (mastodon#32964) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * New Crowdin Translations (automated) (mastodon#32969) Co-authored-by: GitHub Actions <noreply@github.com> * Add `LoginActivity` model spec and `BrowserDetection` concern shared example (mastodon#32959) * Extract `Notification::Groups` concern (mastodon#32968) * Change lists to reflect added and removed users retroactively (mastodon#32930) * Use hash arguments to `group` when possible (mastodon#32916) * Fix error when viewing statuses to deleted replies in moderation view (mastodon#32986) * Update dependency opentelemetry-instrumentation-rails to '~> 0.33.0' (mastodon#32987) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Add `AccountWarning` case to `Report#history` spec (mastodon#32984) * New Crowdin Translations (automated) (mastodon#32990) Co-authored-by: GitHub Actions <noreply@github.com> * Update dependency json-schema to v5.1.0 (mastodon#32992) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Fix posts made in the future being allowed to trend (mastodon#32996) * Add ability to middle-mouse click posts in web UI (mastodon#32988) * block scheduled status from frozen users (mastodon#30729) * Fix wrong video dimensions for some rotated videos (mastodon#33008) * New Crowdin Translations (automated) (mastodon#33010) Co-authored-by: GitHub Actions <noreply@github.com> * Update dependency doorkeeper to v5.8.0 (mastodon#33000) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Add stop-gap antispam code (mastodon#32981) * `rel="me"` check should be case-insenstive (mastodon#32238) * Change design of lists in web UI (mastodon#32881) * Fix duplicate notifications in notification groups when using slow mode (mastodon#33014) * improve nginx.conf by setting gzip_static to on (mastodon#30698) * LinkDetailsExtractor adjustments (mastodon#31357) * Fix pushing hashtag-followed posts to feeds of inactive users (mastodon#33018) * Rely on Rails to enable YJIT when available (mastodon#33017) * Update Yarn to v4.5.2 (mastodon#33021) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * New Crowdin Translations (automated) (mastodon#33020) Co-authored-by: GitHub Actions <noreply@github.com> * Update dependency aws-sdk-s3 to v1.173.0 (mastodon#33019) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * [Glitch] Add missing autofocus on boost modal Port 60801ab to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com> * [Glitch] Fix notification polling showing a loading bar in web UI Port e856838 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com> * Set autofocus on favourite modal (glitch-soc#2900) * New Crowdin Translations (automated) (glitch-soc#2896) * New Crowdin translations * Fix bogus no.yml * Fix bogus simple_form.no.yml --------- Co-authored-by: GitHub Actions <noreply@github.com> Co-authored-by: Claire <claire.github-309c@sitedethib.com> * [Glitch] Fix duplicate notifications in notification groups when using slow mode Port 4bfb888 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com> * Remove pinned accounts editor It was utterly broken and the underlying modals are getting redesigned * [Glitch] Change design of lists in web UI Port 6260350 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com> * Fix issue templates (glitch-soc#2904) --------- Signed-off-by: Claire <claire.github-309c@sitedethib.com> Co-authored-by: Matt Jankowski <matt@jankowski.online> Co-authored-by: Renaud Chaput <renchap@gmail.com> Co-authored-by: Jeong Arm <kjwonmail@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: GitHub Actions <noreply@github.com> Co-authored-by: Emelia Smith <ThisIsMissEm@users.noreply.github.com> Co-authored-by: Eugen Rochko <eugen@zeonfederated.com> Co-authored-by: Andrew W. Lee <wjldrew@gmail.com> Co-authored-by: Shlee <github@shl.ee> Co-authored-by: Claire <claire.github-309c@sitedethib.com> Co-authored-by: Paulo Vilarinho <33267902+PauloVilarinho@users.noreply.github.com> Co-authored-by: Christian Schmidt <github@chsc.dk> Co-authored-by: Joshix-1 <57299889+Joshix-1@users.noreply.github.com>

Gargron added the ui Front-end, design label Nov 13, 2024

Gargron force-pushed the feature-redesign-lists branch 4 times, most recently from c4769db to 6d1ef7a Compare November 14, 2024 13:48

Gargron marked this pull request as ready for review November 14, 2024 13:58

Gargron force-pushed the feature-redesign-lists branch 5 times, most recently from 7359b77 to 035a9ba Compare November 14, 2024 18:26

mjankowski reviewed Nov 14, 2024

View reviewed changes

app/javascript/svg-icons/squiggly_arrow.svg Outdated Show resolved Hide resolved

Gargron force-pushed the feature-redesign-lists branch 6 times, most recently from 61dcc5d to a219b3d Compare November 16, 2024 14:27

ClearlyClaire reviewed Nov 19, 2024

View reviewed changes

app/javascript/styles/mastodon/components.scss Outdated Show resolved Hide resolved

renchap reviewed Nov 19, 2024

View reviewed changes

ClearlyClaire reviewed Nov 19, 2024

View reviewed changes

app/javascript/styles/mastodon/components.scss Outdated Show resolved Hide resolved

ClearlyClaire reviewed Nov 19, 2024

View reviewed changes

Change design of lists in web UI

acb6503

Gargron force-pushed the feature-redesign-lists branch from a219b3d to acb6503 Compare November 20, 2024 18:28

Gargron mentioned this pull request Nov 20, 2024

Change onboarding flow in web UI #32998

Merged

ClearlyClaire previously approved these changes Nov 21, 2024

View reviewed changes

Fix placeholder color, modal and alert stack order, new list title

cb24b49

Gargron dismissed ClearlyClaire’s stale review via cb24b49 November 21, 2024 16:01

renchap approved these changes Nov 21, 2024

View reviewed changes

Gargron enabled auto-merge November 21, 2024 16:06

Gargron added this pull request to the merge queue Nov 21, 2024

Merged via the queue into main with commit 6260350 Nov 21, 2024
25 checks passed

Gargron deleted the feature-redesign-lists branch November 21, 2024 16:19

vmstan mentioned this pull request Nov 23, 2024

Adding tooltips for the list feature #33044

Closed

Krinkle mentioned this pull request Jul 11, 2025

Small interface tweaks could make Lists easier to use #17005

Closed

Uh oh!

Change design of lists in web UI #32881

Change design of lists in web UI #32881

Uh oh!

Conversation

Gargron commented Nov 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

ThisIsMissEm commented Nov 14, 2024

Uh oh!

ThisIsMissEm commented Nov 14, 2024

Uh oh!

ThisIsMissEm commented Nov 14, 2024

Uh oh!

ThisIsMissEm commented Nov 14, 2024

Uh oh!

ClearlyClaire commented Nov 19, 2024

Uh oh!

Uh oh!

renchap left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ClearlyClaire left a comment

Choose a reason for hiding this comment

Uh oh!

ThisIsMissEm commented Nov 19, 2024

Uh oh!

ClearlyClaire commented Nov 19, 2024

Uh oh!

Gargron commented Nov 20, 2024

Uh oh!

ClearlyClaire left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mjankowski commented Nov 24, 2024

Uh oh!

Uh oh!

Gargron commented Nov 13, 2024 •

edited

Loading