feat: screen for empty observation and observation list

[cimigree]

Related to #50
This addresses but does not complete #50.
This PR adds the Main screen that a user will go to after they join a project. It includes the Empty Observation State and the Observation List View.

Some decisions I made.

• This PR does not include any logic related to putting the observations on the map. It is already quite big!
• This PR does not create test tracks. It only creates test Observations.
• After consulting with Andrew, I decided to create those observations similarly to how it is done in mobile. It happens here when someone creates a project. This will just be for us to use during development and can be removed as soon as desktops become discoverable and someone can join a project.
• I am directly using the hooks from comapeo/core-react when they are needed instead of creating separate files to hold the (very simple and straightforward) queries. Hope that makes sense.
• I copied over the logic from mobile to match presets.
• For images, if there is an svg in mobile, I just copied it over. However, if it was easy to get the png from FIgma, I copied the png from there. Sorry there is a mix of svgs and pngs. In one case, though, with the add_person, I used an svg so it could have different colors.
• I decided to name the main route "main" instead of "tab1." Several changes and changed files in here are related to that name change. It felt more semantic and meaningful to me. Hope that is ok.
• I expanded the width of the column on the left that is going to hold everything (to fit the buttons' text, but it made sense to me for it to be a bit bigger since it is where all the info will be).
• I tried to keep the logic in the map.main screen and keep the component screens more presentational. The small exception is that I did not want to pass down the projectId because it had to go through the list view without being used, so I just fetch it in the list item where it is needed for the preset. In general, I tried not to pass down too many props, but I left the navigation in the main screen which is a lot of the props being passed down. There is a tension between keeping the logic out of presentational components and passing too many props.
• I added the DARK_TEXT (#333333) as the main text color. In looking at Figma, that seemed to be the color for all of the text.
• I am trying to add a test to check which version the main screen renders (empty or list) but it is a nightmare, so am putting that off for a separate PR.

I am getting all kinds of errors related to translating the presets and translation, even though I am doing it the same way as mobile. I am not sure why or how to fix that.

Observation List

Empty Screen

[achou11]

Initial review but overall looking good so far!

After consulting with Andrew, I decided to create those observations similarly to how it is done in mobile. It happens here when someone creates a project. This will just be for us to use during development and can be removed as soon as desktops become discoverable and someone can join a project.

I made a note of this in a comment, but I would suggest making the data generation opt-in so that we can still work with an empty state.

I am directly using the hooks from comapeo/core-react when they are needed instead of creating separate files to hold the (very simple and straightforward) queries. Hope that makes sense.

This is preferable! I don't imagine moving away from our own thing library so the pattern you're alluding to is less relevant.

For images, if there is an svg in mobile, I just copied it over. However, if it was easy to get the png from FIgma, I copied the png from there. Sorry there is a mix of svgs and pngs. In one case, though, with the add_person, I used an svg so it could have different colors.

yeah i think we'd ideally have SVGs in most cases? Wouldn't worry too much for now unless it looked really off for whatever reason. Would be good to create an issue to track which ones might need replacing though.

I decided to name the main route "main" instead of "tab1." Several changes and changed files in here are related to that name change. It felt more semantic and meaningful to me. Hope that is ok.

I don't mind the renaming in general, although not sure what the actual name should be. generally agree that these tab names should be more meaningful, so i guess "main" is a maybe a slight improvement over "tab1"? Doesn't help that these designs could change and thus make any name that's chosen potentially confusing.

I expanded the width of the column on the left that is going to hold everything (to fit the buttons' text, but it made sense to me for it to be a bit bigger since it is where all the info will be).

Yeah we need to choose a minimum window size that we want to commit to, which I think will inform the minimum+maximum size of that panel.

I tried to keep the logic in the map.main screen and keep the component screens more presentational. The small exception is that I did not want to pass down the projectId because it had to go through the list view without being used, so I just fetch it in the list item where it is needed for the preset.

yeah this is more related to the fact that the active project ID should really be part of the URL so that these kinds of issues are no longer relevant.

I am trying to add a test to check which version the main screen renders (empty or list) but it is a nightmare, so am putting that off for a separate PR.

Yeah i think the test setup needs some attention to make things less tedious and more consistent. Some of that work was being done in a separate PR but might be worth me taking a look at it.

[achou11]

Should've made the comment as part of the review but aside from that, looks good to me!

• feat: screen for empty observation and observation list #84 (comment)