APP-323 Integrate project filters

[wgardiner]

Description

Closes: APP-323

---

Author Checklist

All items are required. Please add a note to the item if the item is not applicable and
please add links to any relevant follow up issues.

I have...

• provided a link to the relevant issue or specification
• provided instructions on how to test
• reviewed "Files changed" and left comments if necessary
• confirmed all CI checks have passed

How to test

1. Navigate to all projects list page, review filters behavior on mobile and desktop

Reviewers Checklist

All items are required. Please add a note if the item is not applicable and please add
your handle next to the items reviewed if you only reviewed selected items.

I have...

• confirmed all author checklist items have been addressed
• reviewed code correctness and readability
• verified React components follow DRY principles
• reviewed documentation is accurate
• reviewed tests
• manually tested (if applicable)

[netlify]

✅ Deploy Preview for regen-website ready!

Name	Link
🔨 Latest commit	18c48c0
🔍 Latest deploy log	https://app.netlify.com/sites/regen-website/deploys/673491729082980008db4976
😎 Deploy Preview	https://deploy-preview-2539--regen-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for terrasos ready!

Name	Link
🔨 Latest commit	18c48c0
🔍 Latest deploy log	https://app.netlify.com/sites/terrasos/deploys/67349172f64a1b000841ab40
😎 Deploy Preview	https://deploy-preview-2539--terrasos.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[blushi]

could you run i18n:extract again?
this makes the new strings look like this

[blushi]

• I don't think we should be able to have both the left side bar and the mobile filter modal open on desktop and the filter sidebar is still there on mobile

• If I use this branch with regen client (not terrasos), I get a mix of both existing regen and terrasos filters:

• Also nothing happens if I click on the region or ecosystem filter items.

I still see several TODOs and console.log's, let me know if I can help to finish that up asap.

[S4mmyb]

Hey @wgardiner et all , some things I noticed:

• Noticing this is missing the button outline when you click a filter button. Right now all that happens is the color changes on the region from yellow to gray, but there's no outline on the button as well which makes it confusing / hard to know what is selected and what's not selected.
• Like @blushi said, we shouldn't have both the sidebar filter and the modal in desktop. The designs originally showed that we only had the sidebar. That said, I'm noticing when I try and do split screen and the sidebar disapears it's nice to have the top modal. So, I think the desktop behavior should be that the mobile filter modal doesn't show up until the window size is too narrow to show the sidebar filter, at which point the sidebar filter is removed and the mobile filter modal appears. Thoughts @erikalogie @blushi ?
• On mobile when I select a filter, I can't unselect it.
• The text "add filters" and "edit filters" are longer in spanish ("Agregar filtros" and "Editar filtros"). What's the feature behavior for that when the window is smaller. Will we do two lines to display that? @wgardiner if you could add in some real text values on the deploy preview to test these that would be great. In general it's confusing to have deploy previews without the real text.
• When we just select the "compliance" filter, how do we display projects which are tagged as both compliance and voluntary? Right now when it filters, we show the tebu logo instead of the ha logo. Is that what we want to happen? Or when they select only compliance, do we show the ha logo with the size? cc @erikalogie
• Right now the button to view more filters cuts off in the middle of one of the filters. In the designs we show that it should show x amount of filter rows then the see more filters button (see photo below)
• If I unselect both the voluntary and compliance filters, I am still able to see a project. Is this what we expect to happen? Shouldn't I not be able to see any of the projects? cc @erikalogie

[S4mmyb]

Re-finishing this up. @wgardiner seems like there's still a bunch to do here so if @blushi can take on contributing to tie this up just let us know as we have a day left on the deliverable. We can also have @r41ph review

[blushi]

• When we just select the "compliance" filter, how do we display projects which are tagged as both compliance and voluntary? Right now when it filters, we show the tebu logo instead of the ha logo. Is that what we want to happen? Or when they select only compliance, do we show the ha logo with the size? cc @erikalogie

@S4mmyb per this dev note on figma: https://www.figma.com/design/brkxGV5qNOkZUp0YQl1cxO/Terrasos-Phase-1?node-id=1111-319415&node-type=instance&t=8N51My8XTlyuHu3w-0 if a project is both compliance and voluntary, then we show the tebu tag