---
tags: v3, design, hub
---

# Hub Alpha Design Sync

## DAOs Table

- When in mobile, use horizontal scroll
- How do we handle tables on mobile?
- Do we use another view on mobile?
- Table is mostly useful on desktop, would we want a card view for mobile
- Create more cards for using mobile
- What types of filtering and sorting do we want to do?

## Updating Designs

- Dashboard:
- No DAOs has another state
- Explore:
- User scoped focus
- Alpha: Search and filter on name only
- Can be done in Subgraph query
- Vault totals
- Talk more about this in our data conversation
- Do we want Explore within this app?
- This is 2 different use cases: DAOs you're a part of and DAOs you're not a part of
- Grid view is similar to Table
- Card view
- Mobile friendly, would adjust grid for mobile sizes
- Default view for mobile, but could support the horizontal scroll for mobile in Table
- Profile
- View public profile
- Total DAOs
- Mutual DAOs
- Logged in, DAOs I share with whoever I'm viewing
- Hovering on row -> changes background color
- Clicking on row -> takes user to the homepage (proposals view)
- Is there a page within the DAO or would it to go Core UI?
- Go to the DAO page on Core UI
- In the future we can add DAO Profiles to the Hub app
- Error states?
- Standard way to represent these -- what do we do?
- Captured by the components themselves
- For example with Profile, what would we show if we fail to fetch Profile data from Ceramic?
- What do we show if we *don't* have the Profile data?

### Filters

- Filter button?
- What would this do? Does it select the column?
- Onchain
- Networks
- Offchain
- Tags (#warcamp, #defi, #nfts, #grants, etc)
- Click tag to filter DAOs Table
- Are these user defined tags or are they set by DAOhaus (as a set list)?
- If a set list, this would work with the current data approach. User-set tags would be more complicated
- Other
- Type of DAO (v2, v3, Governor Bravo)
- Search is only on name for now, but in the future we may want to add more fields such as contract address
- Do we want to add contract address to this list?
- Create a ticket for exploring this

### Data Questions

- DAO avatar isn't currently set (using a Blockie as a fallback for now)
- DAO metadata: Does this live in Poster? If so, how do we fetch?
- Right now we're focusing on the table data, but this is something we can think through in the future

## Disabled vs. Read Only

- User doesn't need to change a field (such as a set address) but also don't want this to be disabled
- How should we handle read-only style inputs and how should this look compared to disabled?
- Need to show up for screen readers and for a user to be able to copy (does `disable` prevent this?)
- Leverage a `readonly` attribute -- we may need to add this as a prop on our `<Input/>` where it passes the `readonly` attribute to the raw HTML `<input/>` element
-