Improvement: Adjust conversation overview alignments and styling

[eylulnc]

Problem Description

The current channel structure in the Android app lacks visual clarity and readability. All channels and their titles are aligned in the same way, which makes it difficult for users to differentiate between section headers (e.g., "General," "Lectures," "Direct Messages") and the channels listed under them. This results in a poor user experience, especially when the list of channels grows longer.

Changes

Indentation for Channels: Implemented a visual indentation for channels under their respective section headers to indicate hierarchy clearly.
Header Styling: Section titles (e.g., "General," "Lectures") are now bold and stand out visually, acting as clear headers for the channel groups.
iOS Consistency: Aligned the Android design with the iOS app's visual structure to ensure consistency across platforms.

Steps for testing

1. Open the Communication tab in the Android app.

2. Verify the following:
   -- Section titles like "General", "Lectures", and "Direct Messages" are bold and clearly distinguishable.
   -- Channels listed under each section are indented, visually grouping them with their respective headers.
   -- The spacing between channels and headers is visually compact and consistent.

3. Verify that unread message indicators still appear correctly.

4. Verify channels with unread messge are bold and have blue indicator

5. Check that dropdown menus for channel actions (e.g., "Favorite," "Hide," "Mute") are still functional.

Screenshots

• Android Old

• Android New

• iOS

• Foldable

• Tablet

[julian-wls]

I just tested it. Didn't experience any issues. Well done! Just two comments:

1. Can we decrease the padding between the channels, so that they are closer together, like in the iOS app?
2. See below

[FelberMartin]

Just tested it and works like a charm, this is a big improvement for the app :D

I noticed that the little blue dot for a conversation with unread message is just displayed on the channel icons but not for group chats. This would also be a nice addition to the profile pictures of DMs (I try to merge my PR #214 for that hopefully before lunch today, but I think you will get some merge conflicts with that, sorry for that)

[FelberMartin]

I just thought of this now, but could you also please verify that these changes work on Tablet and Foldable aswell? :D

[eylulnc]

Just tested it and works like a charm, this is a big improvement for the app :D

I noticed that the little blue dot for a conversation with unread message is just displayed on the channel icons but not for group chats. This would also be a nice addition to the profile pictures of DMs (I try to merge my PR #214 for that hopefully before lunch today, but I think you will get some merge conflicts with that, sorry for that)

No problem at all 😂 I will check it out for group chat as well

[eylulnc]

I just tested it. Didn't experience any issues. Well done! Just two comments:

1. Can we decrease the padding between the channels, so that they are closer together, like in the iOS app?
2. See below

For the padding I tried a lot and could not manage the make it smaller interestingly but I will check it out again in the weekend

[eylulnc]

I just tested it. Didn't experience any issues. Well done! Just two comments:

1. Can we decrease the padding between the channels, so that they are closer together, like in the iOS app?
2. See below

For the padding I tried a lot and could not manage the make it smaller interestingly but I will check it out again in the weekend

@julian-wls @FelberMartin I have check it currently height of the row is 56dp which is define by ListItem itself by material I can force it to make it smaller but currently it is not depending to us. Do we want to stay align with material or make it smaller?

[FelberMartin]

Lgtm, just one comment regarding the toggle icon color.

Regarding the LineItem height, I would be fine with reducing it 👍

[julian-wls]

The new lineItem height looks good to me!