new dm : page to start a new dm conversation

[Dhanesh-Sawant]

This intents to add new dm functionality as mentioned in #127 & #385

1. When the user doesn't have any recent DM conversations, RecentDmConversationsPage this UI gets showed. I have added the 2 svg's for it and placed it according to the required design.

2. First the search functionality within the recent dm's, here the search icon in the design is in the appbar, but I think having a separate search bar would be much better and looks very obvious for the users. other than that the margin for the new DM button is properly set by me also with the case of whether it should be sticked or moved up with the keyboard would be taken care by in the next change,

3. I have used wrap with SingleChildScrollView with chip for displaying the selected users for staring a dm, an addition here is that there is a small cross button also in the chip when pressed will deselect that user, then after adding all desired users there is a Next button on the appbar when pressed will take it to their messageList.

kindly suggest the required changes and review my suggestion of search box and cross button is selected user chip.

[gnprice]

Thanks for the contribution. Before we can review this, it will need tests. See our README:
https://github.com/zulip/zulip-flutter?tab=readme-ov-file#submitting-a-pull-request

From a quick look at the screenshots, the UI doesn't appear to match the design in Figma. Please take a close look at the details of padding, spacing, color, and other visual elements, and try to exactly match what's in Figma. If there are aspects you don't match or that you're unsure about, please flag them explicitly in the PR.

[Dhanesh-Sawant]

@gnprice

• I suggest keeping the search functionality directly within the RecentDmConversationsPageBody page, with the search bar always visible, rather than toggling it from the app bar. This would provide better UX by making the search capability immediately discoverable like in whatsapp, This approach would eliminate the complexity of using GlobalKey and state synchronization as we have our appbar in HomePage.

• I also recommend using the Chip widget for selected users as it includes a built-in cross button (X) via the onDeleted property. This enhances the UX by making it intuitive for users to remove someone from the list, improving clarity and interaction.
  

[Dhanesh-Sawant]

also i didnt get what''s the use of check_circle/circle_outlined button here, as i thought that once on clicking the ListTile it will get selected and will get appended on the top selected users row.

[Dhanesh-Sawant]

dm_fab.mp4

also needed a clarification here that the new dm button is jumping up when the keyboard opens, so do we need like that or we need to make it stick to its position or it should be just below the last dm row, as it is not that clear from the design.

[gnprice]

I suggest keeping the search functionality directly within the RecentDmConversationsPageBody page, with the search bar always visible, rather than toggling it from the app bar.

I also recommend using the Chip widget for selected users

The main thing this issue is calling for is to implement the UX design we have that's expressed in Figma, not to design a new UX.

There might be details we revise after seeing an implementation. But the starting point should be to implement the design accurately.

This approach would eliminate the complexity of using GlobalKey and state synchronization as we have our appbar in HomePage.

If there's something you're running into in the implementation that feels more complex than it should be, the #mobile-dev-help channel is a good place to ask. You'll need to give more details of what it is you're doing and what you find is a challenge with it, and then we can discuss solutions.

also needed a clarification here that the new dm button is jumping up when the keyboard opens, so do we need like that or we need to make it stick to its position or it should be just below the last dm row, as it is not that clear from the design.

This would be a good question to ask in the #mobile-design channel. See this section of our docs:
https://zulip.readthedocs.io/en/latest/contributing/design-discussions.html#guidelines-for-code-contributors
(but for mobile issues and PRs, use the #mobile-design channel rather than #design).