Show different icons for users and groups in vault member list

[SailReal]

Please agree to the following

• I have searched existing issues for duplicates
• I agree to follow this project's Code of Conduct

Summary

App should generate different kind of icon for users and groups if no icon is set to better distinguish these type of authorities.

System Setup

- Hub: 1.0.0
- Keycloak: x
- Cryptomator (Desktop/Android/iOS): x

Steps to Reproduce

1. Create a user and a group in Keycloak
2. Create a vault
3. Add members to this vault

Expected Behavior

Users and groups can be distinguished.

Actual Behavior

Users and groups currently share the same mechanism how the icons are generated.

Reproducibility

Always

Relevant Log Output

No response

Anything else?

No response

[tobihagemann]

I guess I failed my task at #150 then. 😂

Edit: They are different! Apparently, not different enough?

[SailReal]

Oh I see 😅, hmm difficult to say but I think so, Armin and I didn't notice it.

[infeo]

It is nowwhere documented. How should a normal user be able to differentiate from the beginning what a group is and what only a user?

[tobihagemann]

Alternative solution: Indicate via text that it is a group?

[infeo]

On top of the icon or next to it?

[tobihagemann]

I would suggest to use the full word "Group" either below the group name or right-aligned at the same height. But use a brighter color and maybe a smaller font size, similar to the vault list with "vault name" and "description".

[SailReal]

I checked some apps that support users/groups and nearly all of them following the attached icons of Signal and Threema where the user icon is doubled. In our case we could double the generated picture?

[infeo]

After a discussion we decided the following:

• if the Authority is a group, it's ui element should be enhanced by an additional field displaying the size of the group
• the field text should be gray and in a smaller font than the group name
• the field is placed on the right of the group name

Edit: This holds for the search field and the member list.

Example: