GeopJr / Tuba

Browse the Fediverse
https://tuba.geopjr.dev/
GNU General Public License v3.0
503 stars 55 forks source link

0.8.0 Design changes review #983

Closed GeopJr closed 1 week ago

GeopJr commented 3 weeks ago

0.8 is approaching and so does the string (and UI) freeze. Let's summarize most of the design changes for one final review

Pro: you can quickly know if a post is part of a thread or a reply Con: you don't know who it's a reply to. Getting the account name would require an extra request which I'd like to avoid as to not spam instances. We can however know if it's a reply to themselves

EDIT: nvm we can probably get the name from the mentions ^, I'll do so, so it becomes 'In Reply to ...'

Screenshot from 2024-06-10 11-35-45

Screenshot from 2024-06-10 11-34-06

Pro: #495, you can quickly see if the person you are replying to is verified, their stats, their pronouns etc. The design is the same as the profile one but... smaller

Screenshot from 2024-06-10 11-33-02

(sizing has been fixed since the video below, now all fields have the same size)

https://private-user-images.githubusercontent.com/18014039/322321790-52fb4dc2-7ac8-4ed0-b24f-d1886396fb83.webm?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgwMDkzOTcsIm5iZiI6MTcxODAwOTA5NywicGF0aCI6Ii8xODAxNDAzOS8zMjIzMjE3OTAtNTJmYjRkYzItN2FjOC00ZWQwLWIyNGYtZDE4ODYzOTZmYjgzLndlYm0_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYxMFQwODQ0NTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05OTgyMjQyMWJjN2VlNGZkMzNjN2U2NzEwNjhlNTkzMjI3ZjEwNWJiN2ViZTIyODE2OTkwYTQ5NTUxMDI2ZTZkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.5Np2EH3LPg0rgmFVbPnglCyZrRneumyXB6-J-3DFVvM

Con: might not work in all instances, can have multiple states that are difficult to convert into GUI. Those require a quite lengthy explanation as a banner.

Screenshot from 2024-06-10 11-31-10 Screenshot from 2024-06-10 11-30-39 Screenshot from 2024-06-10 11-30-51 Screenshot from 2024-06-10 11-30-53

When adding a new account, there's now a cog button that reveals 1-2 options. One being a proxy entry (only visible if there are no other accounts, that's because if someone's adding an account for the first time, they cannot access the settings dialog and might need to set a proxy to add an account) and the other being an admin switch, that enables admin-mode and requests admin permissions when adding the account.

Screenshot from 2024-06-10 11-17-18 Screenshot from 2024-06-10 11-17-26

The ones in the screenshot are only visible to admins. One for new reports, one for new sign ups (same as new follower but with an added 'Signed Up' badge).

Apart from those, there's a severed relationships one, visible when you block an instance or your instance blocks another and some of your followers were removed due to it. It's similar to the 'new report' one but with a broken heart instead.

Screenshot from 2024-06-10 10-17-41 Screenshot from 2024-06-10 10-17-32

Clear all notifications and filter dropdown

Con: overflows on narrow mode, since there are now: clear button, sidebar uncollapse button, title, dropdown, search button, window controls

Not sure where it should go instead? Maybe hide the search button?

image

Narrow mode (TODO: fix the clear button placement, so it's after the sidebar one) image

The next Mastodon version introduces 'notification filters'. A special inbox where filtered notifications go and the user can approve or dismiss them.

Banner only visible when there are filtered notifications Screenshot from 2024-06-10 11-54-25 Screenshot from 2024-06-10 11-54-37

When opening a filtered notification, it shows you all the ones from the user and moves the approval buttons to the headerbar Screenshot from 2024-06-10 11-54-43

In settings, on controlling the filters Screenshot from 2024-06-10 11-54-52

This is a bit much. I kept it close to the web ui so admins have a familiar experience. Keep in mind that 99% of the users will never be able to access this window anyway.

Many of these need to be filled with as much info as possible as to avoid making wrong decisions. This is for instance admins only, and it can take critical actions, including disabling accounts, I'd really rather if Tuba wasn't responsible for someone getting wrongfully banned...

Screenshot from 2024-06-10 11-17-41 Screenshot from 2024-06-10 11-17-46 Screenshot from 2024-06-10 11-17-55 Screenshot from 2024-06-10 11-17-58 Screenshot from 2024-06-10 11-18-01 Screenshot from 2024-06-10 11-18-04 Screenshot from 2024-06-10 11-18-19 Screenshot from 2024-06-10 11-18-26 Screenshot from 2024-06-10 11-18-42 Screenshot from 2024-06-10 11-19-16 Screenshot from 2024-06-10 11-19-26 Screenshot from 2024-06-10 11-19-40 Screenshot from 2024-06-10 11-20-05 Screenshot from 2024-06-10 11-20-13 Screenshot from 2024-06-10 11-20-16 Screenshot from 2024-06-10 11-26-54 Screenshot from 2024-06-10 11-27-03

966

I think that's all, @bertob whenever you get the chance to, let me know! You might not be able to access the admin panel or the filtered notifications, so tell me if you need more screenshots!

LukaszH77 commented 3 weeks ago

Shouldn't the advanced search icon be the same funnel one as for notification filter?

GeopJr commented 3 weeks ago

Maybe

I wanted to use one of the loupe icons but there are too many already in that area (specifically the one with the 2 arrows up or the cog one or the pencil one)

image

The only reason I have a against the funnel icon is that it's more definite than the lightbulb one / it implies that filters will and should work while the lightbulb is more like "Here's a tip!"

bertob commented 3 weeks ago

Wow, very cool to see how much is happening here. Thanks for all your work on this app :raised_hands:

'In-reply' indicator

I couldn't find this, do you have a link to a post where I'd see this?

Mini profile on right click

This looks cool, but showing it on right click seems a bit weird. Maybe it could be shown on left click, and include a button to go to the profile page?

Also, why is there a horizontal divider when there's no metadata fields except for "Joined"? I'd just make the row full-width in that case.

Advanced search

The banner is not a great pattern for the guidance at the top. I'd just make this a normal label at the top of the list.

The calendar widgets could benefit from a bit more custom styling so they don't look so old (Particularly get rid of the borders and background, and make it the same width as the container).

As for the icon, I was wondering if we could use the same "settings" icon here as in the Nautilus search entry, and also embed it in the search entry, on the right side.

New account permissions

I'd display the extra UI here in a dialog rather than as an expander. Also, I don't understand what the "Admin" setting does. Is this about moderator privileges on the Mastodon server? If so, it'd be good to explain it in a bit more detail.

Do you have a screenshot of the proxy stuff?

Notifications view actions

I'm not sure this is the most useful way to allow people to filter notifications. Instead of only being able to see a single type at a time, I think a more relevant use case is being able to turn specific types of notifications off/on (e.g. I think a lot of people turn off favorites/boosts because they're too noisy, but keep everything else on).

Related papercut: The filter button should not be .raised.

overflows on narrow mode, since there are now: clear button, sidebar uncollapse button, title, dropdown, search button, window controls

How about merging filter and clear into one menu, with "Clear All Notifications" as the last option at the bottom? Also, do we need the search button here? It just triggers global search rather than doing a specific search in notifications anyway...

I didn't look at the admin stuff in detail because I have no idea how it works or how the Mastodon web UI does it, but a video showing off some of the most workflows could be helpful.

The other stuff LGTM :)

GeopJr commented 3 weeks ago

I couldn't find this, do you have a link to a post where I'd see this?

It's not visible in threads, but if you visit @Tuba@floss.social's profile and scroll a bit, you'll find it:

image

I did edit my original post, to add that we can actually get the person the reply is to. 0.8 brings many screen reader improvements (custom aria labels), I think announcing who the reply is to, even on threads (where the In reply header is not visible), would be nice. (Doesn't have to be visible to be announced)

This looks cool, but showing it on right click seems a bit weird. Maybe it could be shown on left click, and include a button to go to the profile page?

Sounds good to me, but fwiw, avatars are being used in many other places while the 'mini profiles' are only available on 'posts'. So avatars in other places might do something else when left clicked and users might expect a 'mini profile' instead. For example, on the account switcher, left clicking an avatar, opens the profile page.

Not sure where the button to open the profile should be placed

image

Next to follow? Maybe clicking the avatar in the mini profile? at the bottom? Actually, I don't know if it's needed, since clicking on the profile name will also open the profile. Not sure if users are used to 'click avatar => open profile' though

Also, why is there a horizontal divider when there's no metadata fields except for "Joined"? I'd just make the row full-width in that case.

Styling hack, will fix it when there's a single item!

Also, I don't understand what the "Admin" setting does. Is this about moderator privileges on the Mastodon server? If so, it'd be good to explain it in a bit more detail.

When adding an account, you have to request what permissions the app needs. Usually, read, write and follow. However, if an admin would like to allow tuba to use the Admin API, it has to request all the admin permissions too. This can only be done while adding an account.

At the same time, Tuba also uses that to know if it should show the 'Admin Dashboard' menu item.

Not sure how to make the wording clearer. Drop the subtitle and make the title just 'Admin Permissions'? 'Admin Access'? 'Admin Mode'?

Do you have a screenshot of the proxy stuff?

(with show-apply-button) image

I'm not sure this is the most useful way to allow people to filter notifications. Instead of only being able to see a single type at a time, I think a more relevant use case is being able to turn specific types of notifications off/on (e.g. I think a lot of people turn off favorites/boosts because they're too noisy, but keep everything else on).

Definitely possible. I went after the glitch-soc behavior:

image

Would a popover with switches be appropriate here or a dialog instead?

Related papercut: The filter button should not be .raised.

.flat doesn't work on dropdown buttons (because the button is actually the child of the dropdown), I'll open an issue on libadwaita, but I can hack around it for now https://gitlab.gnome.org/GNOME/libadwaita/-/issues/746

Also, do we need the search button here? It just triggers global search rather than doing a specific search in notifications anyway...

Probably not, but on narrow mode the search entry disappears from the sidebar so that's the only way to trigger it (it will still be visible on 'Home' and 'Conversations')

I didn't look at the admin stuff in detail because I have no idea how it works or how the Mastodon web UI does it, but a video showing off some of the most workflows could be helpful.

I can make you an admin account on awoo.faraway.town (demo instance made when I was implementing the admin stuff) but I'll also record some videos and post them here

GeopJr commented 3 weeks ago

Recapping:

image

image

image

image

image

I'm still not sure about this being a dialog. Should all notifications settings move to it from settings? Probably not. But at the same time, there are different notification-related settings in two places now. On a second thought, these are specific to this view only so it makes sense :shrug:

image

image

Edit:

On the admin dashboard side of things, I think I'll leave it as is for now. The api cannot do or get access to everything the web one can. Stuff like removing passwords or getting an admin audit log is not possible (as far as I understand). So I'll work with server admins to see what is lacking or should change.

Workflow-wise, as the screenshots in the original show, it's quite basic: Rows of accounts, reports, e-mails, IPs, sometimes an entry top bar, sometimes a headerbar action. And the rest are dialogs that follow a 'form-like' format.

I don't really like the 'Accounts' view search bar monstrosity but there's no better way to include everything (mastodon-web's looks similar)

image

image

In general the web admin panel is also quite bare-bones

image

xabirequejo commented 1 week ago

I suggest changing the Report icon from a police badge to something like a scale ⚖️ or gavel 🔨

GeopJr commented 1 week ago

Sounds good to me, thanks!

xabirequejo commented 1 week ago

For me, it's not clear hot to switch to the admin dashboard from an already added account. Do I need to log out and back in to turn it on? Is it possible to grant the missing permissions without logging out?

And is the admin dashboard compatible with all ActivityPub servers or just Mastodon? Maybe this could be clarified somehow.

GeopJr commented 1 week ago

You need to request the admin permissions when adding your account, so yes, you need to remove your current account and then re-add it:

Screencast from 2024-06-22 20-28-22.webm

Screenshot from 2024-06-22 20-28-59

Is it possible to grant the missing permissions without logging out?

Not right now, but I'll see if it's possible to obtain a new token and hot-replace it. FWIW, the server gives you a token based on the permissions you request. When adding an account, Tuba asks for read write follow, but if you want Admin permissions, Tuba then additionally asks for all of those.

And is the admin dashboard compatible with all ActivityPub servers or just Mastodon? Maybe this could be clarified somehow.

Depends on the server implementing the masto api endpoints. I think GoToSocial does for most, not sure about *oma. To be honest, not even Mastodon supports it fully. The admin API is very limited compared to the web admin dashboard. Either way, Tuba will only show whatever the token allows you to. So if you are a moderator in a server and don't have permission to do IP Blocks, then the whole IP Blocks tab won't be visible to you. I expect servers that do not implement everything the masto admin api supports to also not pretend that the token allows you to do those things.

Let me know if anything needs fixing! Most of it was guesswork

xabirequejo commented 1 week ago

I must be doing something wrong then.

I have tried the new version in the morning. I've got two GtS servers (via YunoHost) and I see the different permission Tuba asks:

But when activating the admin dashboard I see a Not found message.

Screenshot from 2024-06-22 21-33-57

Maybe I should ask on the GtS channel or to the YunoHost packager.

GeopJr commented 1 week ago

I'll open a new issue here on testing the admin dashboard on all backends! Don't go to either GtS or YunoHost! I'll see what's the best way to support the endpoints GtS makes available and make a patch / open issues there if needed. Thanks for the report!