Update UI: Implement inbox design for empty state

[yashrajpu]

This pull request (PR) addresses issue #386 and enhances the user interface by introducing a conditional feature for displaying messages.

If messages are available, they are displayed in the UI. If no messages exist, a default text is shown instead. This improvement enhances the user experience by providing clear feedback when no messages are present.

Changes Made:

• Implemented logic to check for the existence of messages.
• Displayed messages when available; if not, switched to a default text.
• Improved the overall layout and clarity of the UI.

Testing:

• Verified that the feature works correctly when messages are present.
• Confirmed the fallback text appears appropriately when no messages are available.

Figma link:-

The updated UI aligns with the Figma design provided here

[Figma Design Link]
(https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5966-176642&p=f&t=gdUmGEmNiTNiCHVf-0)

Ensured consistent behaviour across various screen sizes and edge cases.

Screenshots:

Old image:

New image:

Light them

[apoorvapendse]

https://chat.zulip.org/#narrow/channel/44-git-help/topic/pull.20request/near/2050861

[apoorvapendse]

Closing #1293 as promised.

[chrisbobbe]

Thanks for PR. Before we can review in detail, this needs:

• Tests
• Follow the project style for code indentation
• If rebasing atop autocomplete test: Add extra pump in new test for new RawAutocomplete delay #1290, keep the commit from autocomplete test: Add extra pump in new test for new RawAutocomplete delay #1290 without squashing unrelated changes into it
• Remove from the branch any unrelated changes (so, keep the commit for autocomplete test: Add extra pump in new test for new RawAutocomplete delay #1290 if it's not in main, but remove the ndkVersion change and anything else that's not relevant)

If you need help with Git, #git help in the development community is the best place to ask.

[chrisbobbe]

In your commit and PR description (two places), please also say Fixes #1294..

[yashrajpu]

Could you please check this for me? Thank you!

[alya]

Is the font in the second line bigger? They look the same to me in Figma.

[alya]

Let's make it "inbox" rather than "Inbox", for consistency with Zulip's capitalization style.

[alya]

Please also add light-theme screenshot to the PR description.

[alya]

I'm not sure we've got a good call to action in the second line; I'll post on the CZO thread.

[yashrajpu]

Let's make it "inbox" rather than "Inbox", for consistency with Zulip's capitalization style.

Yes, we have the Inbox in Figma. However if you still want that then tell me thanks !

[yashrajpu]

Please also add light-theme screenshot to the PR description.

In this FIGMA have only one disine for light or dark them

[alya]

However if you still want that then tell me thanks !

Yep, that's why I said it. ;)

[alya]

In this FIGMA have only one disine for light or dark them

Well, regardless of that, the app will need to work in both light theme and dark theme. You can make a good guess for what it should look like, and ask about anything where you're uncertain.

[chrisbobbe]

Also, the Figma does have a dark-theme design: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5967-180775&m=dev

[yashrajpu]

Yes, I see that the colors and designs are the same. If you would like any modifications, please let me know what you have in mind, and I'd be happy to make those changes for you.

[alya]

I still need to see screenshots of your changes in both themes in the PR description.

[yashrajpu]

I still need to see screenshots of your changes in both themes in the PR description.

I updated that pls check can you tell me what font family we use in this

[alya]

Thanks. The font size still looks off.

[chrisbobbe]

[…] can you tell me what font family we use in this

For questions like this, it's your responsibility to find the answer in the Figma design. Please don't ask us to spend our time answering questions that already have clear answers.

[yashrajpu]

Thanks. The font size still looks off.
I fixed that .