Update the way valid/invalid drafts are displayed on a map

[grzesiek2010]

Problem description

As I said in https://github.com/getodk/collect/pull/5786#discussion_r1365290974 drafts might have valid/invalid status but they are displayed on a map in the same way.

Solution

Display the errors/no errors pill on a bottom sheet so users still have the map's context when assessing what action they need to take.

• Changing the information hierarchy to match the drafts list
• Removing the form icon if possible, if not, could we make it black so it's consistent with the others?
• Edit button moves below the errors label and timestamp
• Add 'drag handle'

Figma mockup

Edit Nov 23: One thing I didn't consider was displaying geometry, now that we plan to move the edit button below the error label and timestamp. Given that we are implementing the 'drag handle' at the top of the sheet with the MBtiles work, I would like to use that same functionality here and display the geometry so it's visible, it doesn't fall beneath the fold, and it can expand if needed.

[seadowg]

@alyblenkin would be good to get your take on this!

[alyblenkin]

@seadowg @grzesiek2010 - I think we should keep the design pretty close to how we display errors/no errors in the drafts list. Adding icons to the map might make it more confusing. Figma mockup.

[seadowg]

This looks good to me! Could you update the issue description with that and any details you think are important?