feat: Improve add shopping list item form

[miah120]

What this PR does / why we need it:

This PR updates the add item form in the shopping list with a few changes:

• Update ordering and positioning of entry fields to improve scannability
• Moved label icons into the input field
• In mobile, moved the add item form to be a bottom drawer and styled the food entry to match
  • In desktop, the UI remains the same

Before:

After:

Which issue(s) this PR fixes:

(REQUIRED)

NA

Special notes for your reviewer:

NA

Testing

Tested in Firefox and Android

[miah120]

Looks like I made the quantity field a bit too small. I was focused on the add item form, but w the edit item form all you can see of the label is Q...

I'll fix that tonight

[p0lycarpio]

It looks good! The spacing is better managed. The mobile view is interesting and more intuitive.
On desktop, what would you think about replacing the "Add" button with a field similar to the one on mobile that would expand the card when clicked (same behavior as the bottom sheet)? As I write this, I realize that it could also be used for the mobile version... What do you think?

A quick note about the field displayed at the bottom on mobile devices: the two search/food icons can clutter up the interface, so I would choose just one on the left.

[michael-genson]

Overall looks great, definitely a huge improvement for mobile and a good improvement for desktop (other than the broken quantity field ;) )

This might be an issue with the auto focus logic I just merged, but on mobile when I tap into the food field to add a new item the food menu appears before the drawer opens up, so it covers the dialog:

Tapping out and back in it's fine:

Similar to what @p0lycarpio said I don't think we need both the magnifying glass and the apple icon, maybe just use the apple icon where the magnifying glass is? I recognize that it's a search field but I think the food icon conveys that you're searching for a food well enough on its own.

The "Add item" text works when it's by itself at the bottom, but once the full dialog is open it's weird to see "Add item" (I am already adding an item). Could we switch it back to "Food" (or whatever) once we open it up?

Also, and I don't know if this is actually a good suggestion, but could we adjust the style of the food input field once the drawer opens up? When it's by itself at the bottom I like how it looks, but once the dialog opens up it's weird to see it to be a different shape than the rest of the fields. Would it make sense to change the shape of the field back?

[miah120]

Okay here's the followups enumerated:

• ✅ Fix the quantity field sizing
• ✅ Show only a single icon:
  • I opted to pick the apple over the search icon since it'll link the bottom bar to the food field; this agrees with Michael and it feels a bit more fun/whimsical :3
• ✅ Add the "Add item" bar to the desktop view (but in the same location as the add button)
• ❌ Fix the menu anchoring issue
  • This problem occurs because the anchor position is determined as soon as the field is clicked/tapped, then the bottom sheet animates causing the field to go behind the menu.
  • I'm not sure how to go about fixing this... however
  • Testing on a mobile device (Android) this doesn't happen. It's possible that when a virtual keyboard is in use (which would always be the case for this feature), that this is non-existent.
  • I don't have an iOS device to test with, and it's possible that this could happen depending on what OS/keyboard/browser you're using, but if we're only seeing this on desktop browsers I'm hesitant to put a bunch of time into trying to fix something that may not be a real issue.
  • Let me know if you think these are appropriately mitigating factors on this issue or if you want me to find a way around it.
• ✅ Adjust text and style of the field depending on whether the add form is open
  • I was skeptical of this one but after testing it I think it looks nice and adds cohesion

Some additional tweaks I made while addressing these:

• Edit item forms now have a colorful left border to more clearly mark the edit forms in a way that looks nice
• Significant tweaks to the edit item form (sorry!) to remove unnecessary wrapping divs to keep things inline between the two forms
• padding tweaks

Before:

After:

(after writing this I feel like this has AI tells in it, I swear I just use a lot of emojis)