Add tabs to component picker

[Rheeseyb]

The component picker (triggered by clicking the plus button in the Navigator) shows all components, and we want those components to be categorised, and for the picker to use tabs for jumping to those categories.

We don't yet have a way of categorising components (for the sake of this task we can assume those categories will be provided by the components API). This task is purely about implementing the UI to support this.

What we want:

• Selectable tabs and list filtering
• Scrollable tab list
• Arrow key navigation of the list
• Enter to apply

Bonus task:

• The list itself has the same sub-headings, and instead of the tabs acting as a filter, scrolling down the list moves through the tabs and vice versa (with sticky headers)

Notes:

• The component picker is here: https://github.com/concrete-utopia/utopia/blob/master/editor/src/components/navigator/navigator-item/component-picker.tsx

[maltenuhn]

@lankaukk could you take a look at this, and see if there's a version with (some) icons across the top, for common categories?

[benwolfram]

Design feedback:

• add -> before selected list item

<Icn
          category='semantic'
          type='classicarrow-right'
          width={16}
          height={16}
          style={{ opacity: isFocused ? 1 : 0 }}
          color='dynamic'
        />

• selected list item gets color: colorTheme.dynamic.value and no background • smaller gap between arrow, cube icon and label (try ~4px) • selected tab gets background: colorTheme.primary.value and color: colorTheme.white.value

make popup theme-aware - entire popup gets: • backgroundColor: colorTheme.bg0.value, • color: colorTheme.fg1.value, • padding: 4, • boxShadow: UtopiaStyles.shadowStyles.low.boxShadow, • border: .2px solid ${colorTheme.popupBorder.value}, • borderRadius: 10,