Improvement: Redesign & restructure chat textfield

[julian-wls]

Problem Description

The Textfield used to create messages in the chat is currently not quite structured and looks rather outdated. Over time more and more buttons have been placed onto the textfield, which now makes it look quite overwhelming to the users. Formatting options placed below the OutlinedTextfield are not intuitive and inconsistent.

Changes

This PR applies the following changes to both, the UnfocusedPreviewReplyTextField and the CreateReplyUi:

• Instead of showing a disabled send button on the UnfocusedPreviewReplyTextField a new button has been placed to allow users to upload images or attachments without activating the textfield.
• The formatting options are now only visible clicking on a button to provided more structure.
• A new button has been added allowing users to tag channels, users, exercises and lectures by selecting the option in a dropdown menu.
• Users have the option to add strikethrough text formatting now.
• The textfield has been redesigned and has a max height of 8 text lines before it becomes scrollable.
• The AutocompletePopup has been redesigned to show icons for the exercise type and channel type.

Steps for testing

1. Click the new plus button and select image and attachment upload and verify its functionality
2. Create a message and verify that the textfield becomes scrollable after 8 lines with a autoscroll action which keeps the cursor focused.
3. Click the format button and verify that all formatting options appear and the preview/edit buttons stay visible
4. Close the formatting options and click the new tagging button. Verify that after selecting an option only the corresponding entries are shown in the popup.
5. Verify that the icons in the popup are shown correctly.
6. Verify that everything else works as before.

Screenshots

[FelberMartin]

Omg, I can't tell you how much of an improvement this change is 😍 It's looking sooo much better now, thank you for addressing this!

On the functional side everything works as expected, I just have some minor points of discussion:

1. In dark mode, the contrast for the Upload button in the unfocussedReplyField (with the + sign) is quite low, can we change this? (see screenshot)
2. Very minor: when clicking the Upload button (+ sign), the DropdownMenu is a little bit too far to the top of the button imo. (see screenshot)
   

The code comments are mostly just opportunities for refactorings btw :D

[FelberMartin]

Regarding the ProfilePictures not displaying in the Autocompletion hint dialog, I also just had a quick look, but it's very mysterious that it does not work. I think we should create a followup for this then 🤔

[julian-wls]

Thanks a lot for the great feedback :)

I implemented the requested changes. I tried various approaches to reduce the space between the dropdown menu and the button you mentioned in your 2. point, however I did not find a working solution.
Regarding the plus sign I would suggest we treat it like any other white colors and turn it to black in the dark mode (use MaterialTheme.colorScheme.background). What's your opinion on this @FelberMartin:

I think creating a follow up to show ProfilePictures in the AutocompletionPopup for users is a really good idea. I couldn't find a working solution yet, either.

[FelberMartin]

I implemented the requested changes. I tried various approaches to reduce the space between the dropdown menu and the button you mentioned in your 2. point, however I did not find a working solution.

Okay, I think its fine, not a major issue :)

Regarding the plus sign I would suggest we treat it like any other white colors and turn it to black in the dark mode (use MaterialTheme.colorScheme.background). What's your opinion on this @FelberMartin

Sounds and looks awesome 👍

[FelberMartin]

Thank you for incorporating my change requests, the code looks very readable now :D

Regarding the two remaining open conversations, I found a solution after some debugging:

• Remove .consumeWindowInsets(WindowInsets.systemBars) from SinglePageConversationBody
• Remove navigationBarsPadding() from ConversationThreadScreen:88 and ConversationChatListScreen:131
• Replace padding(bottom = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()) with navigationBarsPadding() in ReplyTextField. This did previously not work as expected because of the misused .consumeWindowInsets(WindowInsets.systemBars) call further up the UI tree

With these changes the padding of the ReplyTextField should work properly :D

[julian-wls]

• Remove .consumeWindowInsets(WindowInsets.systemBars) from SinglePageConversationBody
• Remove navigationBarsPadding() from ConversationThreadScreen:88 and ConversationChatListScreen:131
• Replace padding(bottom = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()) with navigationBarsPadding() in ReplyTextField. This did previously not work as expected because of the misused .consumeWindowInsets(WindowInsets.systemBars) call further up the UI tree

With these changes the padding of the ReplyTextField should work properly :D

I tried applying your suggested changes, but I found multiple issues:

When testing on devices that still use the old navigationBar we would get this result:

And this gap shows up:

I'd suggest we stay with the current result as it works perfectly fine with older devices and smaller screen sizes. I also just added weight to the Column around the textfield to prevent this from happening on smaller devices when the textfield is growing:

It should work fine now.

[eylulnc]

This is looking really good and modern!

I have one point about the formating features:

Listing is not working properly when we go back and continue to add items.

Screen.Recording.2025-01-25.at.12.47.17.mov

[FelberMartin]

When testing on devices that still use the old navigationBar we would get this result:

Okay thats weird. Then let's merge this PR with these paddings, and I will try to have deeper look into it next week

[julian-wls]

This is looking really good and modern!

I have one point about the formating features:

Listing is not working properly when we go back and continue to add items.

Screen.Recording.2025-01-25.at.12.47.17.mov

I just observed this behavior on develop as well. As this is unrelated to this PR I'd suggest we merge this PR and fix this issue afterwards.

[eylulnc]

This is looking really good and modern!

I have one point about the formating features:

Listing is not working properly when we go back and continue to add items.

Screen.Recording.2025-01-25.at.12.47.17.mov

I just observed this behavior on develop as well. As this is unrelated to this PR I'd suggest we merge this PR and fix this issue afterwards.

Really interesting, when I compare it with a different branch I did not see a problem, but sure we can check it out later.

[julian-wls]

This is looking really good and modern!

I have one point about the formating features:

Listing is not working properly when we go back and continue to add items.

Screen.Recording.2025-01-25.at.12.47.17.mov

I just observed this behavior on develop as well. As this is unrelated to this PR I'd suggest we merge this PR and fix this issue afterwards.

Really interesting, when I compare it with a different branch I did not see a problem, but sure we can check it out later.

Check this issue I just created.

[FelberMartin]

Can confirm that this issue also happens on develop, so I will merge this PR now :)