---
# System prepended metadata

title: Hub Alpha Design Sync
tags: [' design', ' hub', v3]

---

---
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
    - 