[HOLD for Payment 2024-10-07][$250] [Search v2.2] Hide mobile Search nav button + status tabs on scrollDown, but reveal on scrollUp

[luacmartins]

Problem
On mobile, the Search page occupies a lot of fixed space between the top workspace switcher, the page navigation button, the status tabs, and the bottom fixed tabs. This doesn't lave a whole lot of vertical space remaining to view the expenses page.

Solution:
Let's make it so that the nav button and status tabs scroll the page with the content, but are revealed as soon as the user scrolls back up. Here is a rough prototype of the action:

CleanShot.2024-08-23.at.13.43.41.mp4

Note that in the prototype, we're scrolling the button + tabs back into view at the same speed as the content, but I could see where it might even make sense to just animate that area back in as soon as we detect "one scroll" going back up.

cc @Expensify/design @luacmartins for visibility. I think this is good #wave-control polish.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ee6fbdd84bda73a1
• Upwork Job ID: 1828223707737004666
• Last Price Increase: 2024-08-27
• Automatic offers:
• rayane-djouah | Contributor | 103694364

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

Triggered auto assignment to @kadiealexander (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ee6fbdd84bda73a1

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @situchan (External)

[melvin-bot]

📣 @rayane-djouah 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[nkdengineer]

@luacmartins Can you share the video in OP again, I can't see it in the OP.

[sachinsiddhu112]

I am unable to see provided video or screenshot.Please provide a video or screenshot of issue.

[melvin-bot]

📣 @sachinsiddhu112! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[SzymczakJ]

Hey! I’m Jakub Szymczak from Software Mansion, an expert agency, and I’d like to work on this issue!

[SzymczakJ]

When working on this issue I got one thought concerning StatusBar during selection mode. I think we shouldn't show it during selection mode:

1. When clicking on anything on status bar Selection mode is cancelled

Screen.Recording.2024-08-28.at.11.41.03.mov

2. We have already hidden filters button and Type selector, so it doesn't make sense to give user option to choose Status
3. It's cluttering the screen
4. Removing this from selection mode would make this task easier to implement.

I could remove StatusBar from selection mode and put this change in PR that would be linked to this task
WDYT @luacmartins

[shawnborton]

Yeah, I think I agree with that. cc @Expensify/design for thoughts there too, but what you laid out above makes sense to me.

[SzymczakJ]

Reduced padding to 8 and I think it looks neat 😃

[shawnborton]

Can you share a video of that?

[SzymczakJ]

ios.mov

Here you go

[shawnborton]

Cool, I think we just need to add some padding back to the top of the rows so that we get a larger gap between the status tabs and the rows:

Let me know if that makes sense. We probably need to add like 12px there to make up for the 12px we shaved off from the tabs area.

[SzymczakJ]

Are talking about something like this?

Screen.Recording.2024-08-30.at.18.01.34.mov

[shawnborton]

Yup, that spacing looks correct.

[SzymczakJ]

There was a need for small refactor, but this should be ready for C+ review tomorrow!

[melvin-bot]

@luacmartins, @kadiealexander, @rayane-djouah, @SzymczakJ Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

This issue has not been updated in over 15 days. @luacmartins, @kadiealexander, @rayane-djouah, @SzymczakJ eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[luacmartins]

PR was merged

[rayane-djouah]

PR on production

[rayane-djouah]

Note

The production deploy automation failed: This should be on [HOLD for Payment 2024-10-07] according to #49960 production deploy checklist, confirmed in #48258 (comment)

cc @kadiealexander

[kadiealexander]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@rayane-djouah] The PR that introduced the bug has been identified. Link to the PR: [HOLD for Payment 2024-10-07][$250] [Search v2.2] Hide mobile Search nav button + status tabs on scrollDown, but reveal on scrollUp #48019 (comment)
• [@rayane-djouah] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: [HOLD for Payment 2024-10-07][$250] [Search v2.2] Hide mobile Search nav button + status tabs on scrollDown, but reveal on scrollUp #48019 (comment)
• [@rayane-djouah] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: [HOLD for Payment 2024-10-07][$250] [Search v2.2] Hide mobile Search nav button + status tabs on scrollDown, but reveal on scrollUp #48019 (comment)
• [@rayane-djouah] Determine if we should create a regression test for this bug.
• [@rayane-djouah] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/434120

[kadiealexander]

Payouts due:

• Contributor+: $250 @rayane-djouah (Offer link)

Upwork job is here.

[rayane-djouah]

@kadiealexander, this is a new feature, not a bug.

BugZero Checklist

• Please propose regression test steps to ensure the new feature will work correctly on production in further releases.

Regression Test Proposal

• Prerequisites: The account should have many expenses and chats
• Platforms: Small screens only (Android: Native, Android: mWeb Chrome, iOS: Native, iOS: mWeb Safari)

1. Go to the Search page.
2. Scroll through the results.
3. Verify that the expense type and status bar dynamically hide and show based on the scroll position to provide more screen space for viewing content.
4. Perform a search that returns few or no results.
5. Verify that the expense type and status bar remain visible and fixed in place, as there isn’t enough content to necessitate hiding these elements.

Do we agree 👍 or 👎

cc @kadiealexander