Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.8.0 Design changes review #983

Closed
GeopJr opened this issue Jun 10, 2024 · 11 comments · Fixed by #1020
Closed

0.8.0 Design changes review #983

GeopJr opened this issue Jun 10, 2024 · 11 comments · Fixed by #1020

Comments

@GeopJr
Copy link
Owner

GeopJr commented Jun 10, 2024

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

  • 'In-reply' indicator

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

  • Profile notes

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

  • Mini profile on right click

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

  • Profile fields

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

Screencast.from.2024-04-15.03-12-39.webm
  • Advanced search

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

  • New account permissions

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

  • More notification types

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

  • Notifications view actions

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

  • Notification filtering

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

  • Admin panel

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

  • Preview cards

#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
Copy link
Contributor

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

@GeopJr
Copy link
Owner Author

GeopJr commented Jun 10, 2024

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
Copy link
Contributor

bertob commented Jun 10, 2024

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

'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
Copy link
Owner Author

GeopJr commented Jun 11, 2024

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 @[email protected]'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
Copy link
Owner Author

GeopJr commented Jun 12, 2024

Recapping:

image

  • Advanced search note became a label

image

  • Advanced search calendars got expanded and modernized (somewhat)

image

  • 'In reply' headers now include the replying-to account handle if available (that's all I can get from the mentions, I cannot get their display name)

image

  • New account dialog settings became a dialog (proxy entry is still only visible if it has to / when the user cannot access Tuba's settings)

image

  • Notification filters became a dialog, clear all notifications became a headerbar button in said dialog (has a confirmation dialog)

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 🤷

image

  • Remade search searchbar so it has the advanced search dialog button inside of it and changed its icon to the funnel one (that's the one you meant, right? That's the one nautilus has)

image

  • Mini profiles now open on primary click. Clicking the profile pic in the mini profile will close it and open the full profile

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
Copy link
Contributor

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

@GeopJr
Copy link
Owner Author

GeopJr commented Jun 21, 2024

Sounds good to me, thanks!

@xabirequejo
Copy link
Contributor

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
Copy link
Owner Author

GeopJr commented Jun 22, 2024

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
Copy link
Contributor

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:

  • regular user: read write follow
  • admin: read write follow admin:read admin:write admin:read:reports admin:write:reports admin:read:ip_blocks admin:write:ip_blocks admin:read:domain_blocks admin:write:domain_blocks admin:read:domain_allows admin:write:domain_allows admin:read:email_domain_blocks admin:write:email_domain_blocks admin:read:canonical_email_blocks admin:write:canonical_email_blocks

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
Copy link
Owner Author

GeopJr commented Jun 22, 2024

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants