Make the Component Picker more capable

[maltenuhn]

• [ ] Introduce arrow key navigation of the list, including handling of initial and filtered states (highlighted element disappears: how to handle that) and Enter to apply. NB this requires a bit of 'judgement' about what a good behaviour is.

• [ ] make the scrollbar show up :) We suppress it elsewhere in the editor (in initial-load.css) and need to deliberately enable it for this scrollable list. NB if a global class is the most expedient way to do this, so be it.

• [ ] Introduce selectable tabs and list filtering. Start with hardcoded categories and feed data from the component API, and HTML elements into it. Layout, Interaction, Forms (forms, inputs etc), Advanced, All. The tab list may get icons eventually, but for now it also needs to be scrollable horizontally.

• [ ] If that all goes well: see if we can implement a scrollable list with subheadings, a la Deliveroo's menu: same categories as subheadings in the list as on the tabs; scrolling highlights different tabs, clicking on a tab scrolls to the place in the list. NB because we have the tabs, we prob don't need sticky headers.

const TabBar = (props: any) => (
  <FlexRow css={{ height: 29, paddingRight: 8 }}>
    <div css={{ color: 'white', padding: 8, minWidth: 30 }}>All</div>
    <div css={{ color: 'white', padding: 8, minWidth: 30 }}>Layout</div>
    <div css={{ color: '#ccc', padding: 8, minWidth: 30, '&:hover': { color: 'white' } }}>
      Forms
    </div>
    <div css={{ color: '#ccc', padding: 8, minWidth: 30, '&:hover': { color: 'white' } }}>HTML</div>
    <div css={{ color: '#ccc', padding: 8, minWidth: 30, '&:hover': { color: 'white' } }}>
      Shopify
    </div>
    <div css={{ color: '#ccc', padding: 8, minWidth: 30, '&:hover': { color: 'white' } }}>Adv</div>
  </FlexRow>
)