In cases where the searchQueryAtom is changed directly, either via
clicking a tag-button or from some future use-case, the input value is
updated as well.
This component renders a cloud of tags with the string tags passed to
it, with each tag constituting a button that triggers search on click.
The cloud is also responsive to the color theme of the grid.
The Notice component can now act as a general indicator component,
exposing four types: "wait", "help", "warn", or "none". These types
display different icons and make this a much more reusable element.
We also render children passed to us, making this even more extendable.
In future, we may wish to extract all message props altogether as
children instead.
This patch reworks the mobile breakpoint to allow whitespace wrapping of
code snippets and does away with horizontal scroll. Overall, the
usability and intuitiveness is much better, though readability of the
code itself takes a hit.
In addition, we added the ability to download an icon as a PNG thanks to
the svg2png-converter library. PNGs adopt the current preview weight and
color, and are sized at 256x256.
While phosphor-icons uses an icon font implementation, we won't be able
to provide the duotone weight in that library. We now indicate lack of
support by disabling the code snippet and copy button.
When the debounced search query changes, scroll to the top of the grid
if the query is not the empty string. This has the same smooth behavior
as the scroll buttons, which is not currently available on WebKit.
We were, for some reason, preventing the default behavior of touch
events onTouchStart and onTouchEnd. This made the slider unusable with
drag actions on mobile. I can't remember why we did this to begin with,
probably something important...
The slider thumb size was also increased for better tap target size.
