UI redesign: users screen

[terpimost]

This issues is about the new design of #5495

Notes:

• Following the webapp, users should be sorted by availability, and alphabetically within each availability level.
• We should at least show all active/idle users. The webapp hides some inactive users (but shows them when doin a search); we can do something similar if it's needed for performance reasons.
• Clicking on a user should open their profile.

Follow-ups:

• We should add search to this screen.

Figma area

Icons

Majority of icons for web and mobile app are from Feather or Google or customized. For mobile app they are usually 24px size.
I will collect mobile app icons in this Figma page

• users

Clarifications

Organization icon should round corners of an image

If possible make the whole rectangle under it as clickable. Pressed stated could be darker, or 10% opacity black over it or 10% transparency - we should pick one default way across the app.

To make text look centered reserve the same as left icon space:

On the mock the panel stroke is inside the panel, implemented as a shadow:

List items

Online and Idle has circles, offline/invisible - no any circle.

Status as emoji is part of the name, status as emoji+ text should be on a new line

Dark mode

In dark mode what looks like white is usually white with some transparency, same for black. With this approach it would be easier to tune them later.
We will try to utilize colors from the web app.

General background is background: #1D1D1D;
Top and bottom panels are background: #222222;
Top and bottom panels internal borders are 30% opacity black
Screen title hsla(0, 0%, 100%, 0.8)
User name hsla(0, 0%, 100%, 0.75)
Text status hsla(0, 0%, 100%, 0.3)

Bottom tab bar icons are the same color, but active icon is hsla(0, 0%, 100%, 0.8)

[adetyaz]

Hello, I'd like to know I can work on this, I'm from the outreachy internship programme.

[alya]

@adetyaz As noted in the contributor guide, please choose an issue with the "help wanted" label, and follow the instructions for claiming an isssue.

[adetyaz]

noted thank you.

[alya]

Notes:

• Following the webapp, users should be sorted by availability, and alphabetically within each availability level.
• We should at least show all active/idle users. The webapp hides some inactive users (but shows them when doin a search); we can do something similar if it's needed for performance reasons.
• Clicking on a user should open their profile.

Follow-ups:

• We should add search to this screen.

[soumyajitnandi0]

I want to work on this

[soumyajitnandi0]

Proposed Enhancement: User Visibility and Interaction:

I propose the following solution:

• Add a "Users" Button: Introduce a button in the top-right corner of the screen that navigates to a dedicated "Users" page.
• User Listing: Display all active and idle users on this page. For performance optimization, inactive users can remain hidden initially but should be discoverable via search.
• Total User Count: Show the total number of users in the channel prominently at the top-center of the screen.
• Search Functionality: Include a search bar at the top-right corner of the "Users" page to quickly locate specific users.
• Profile Access: Clicking on any user's name should open their profile for detailed information.

Home:

Users Page:

---