hicommonwealth / commonwealth

A platform for decentralized communities
https://commonwealth.im
GNU General Public License v3.0
67 stars 44 forks source link

Implement New Filters and Sorting for Community Exploration #8801

Open HIM92 opened 2 months ago

HIM92 commented 2 months ago

Description

Context: With the launch of tokens on Common, each token will be associated with a community. As users explore these new communities, it’s important to provide them with an intuitive way to filter and discover communities that match their preferences. To achieve this, we need to overhaul the existing filter system on the explore page and introduce a new, more flexible set of filters.

Task: Replace the current filter bar on the explore page with a new set of four distinct filters and a sorting option. These tools should work in combination, allowing users to refine their search without excluding any options. The filters to be implemented are:

Community Type:

(Sort) Order By:

Ecosystem:

Preferences: (These correspond to the preferences users can set during onboarding or in their profile settings)

Outcome: Users should be able to seamlessly combine these filters to discover communities that best match their interests, making the exploration process more efficient and personalized.

Project Owner

@HIM92

Bucket ID

8800

User Stories / Acceptance Criteria

As a user on the search and explore page, I can review any new assets launched on common or basic communities. The asset communities appear above basic communities in the UX by default but I can apply filters to narrow my search as dive deeper into what is available on Common. The four filters are community type, sort by, Preferences, and ecosystem.

Sort reflects changes or aspects of any communities, such as token price, or number of members etc. But the filters restrict the communities that show up within the pool itself.

Example: I can sort into just Basic communities on Base, that have self identified as DAO communities and order them by number of members.

Design Devlink

https://www.figma.com/design/1b9wbqv9YV2FlU2svFyf0I/IdeaCoin?node-id=815-39215&t=Bs73ODTMr1Of6lIs-0

Design Screenshot

Screenshot 2024-08-08 at 1 02 46 PM

Additional Context

No response

mzparacha commented 1 week ago
  1. We have some more filters for communities like, "Stake" (enabled or not) and "Community Network" (ERC20 or not), do we remove these 2 filters or keep them?
  2. The current designs for community filters don't have mobile designs, and we implemented this drawer component to fit all the filters for all screen sizes some time ago. Displaying them above community cards still seems a bit crowded. Do we keep the drawer design or just use the existing one where we display filters above community cards?

https://github.com/user-attachments/assets/b310e6c1-98b3-403d-91ca-321e3548bfb0

cc: @dillchen @sssssabinaaa

sssssabinaaa commented 1 week ago

I'm down to keep the drawer - on mobile instead of a drawer it can be a popup modal!

dillchen commented 1 week ago

Keep the filters for now, and on same page as Sabina.

We may have some revisions to the explore page with contests and XP later, but will follow up later on those