feat: redesign search filtering experience (#908)

* feat(search): redesign search filters as bubbles like mobile

* fix(search): decouble Bubble component styling

- animate the bubles on search
- decouple the Bubbles styling using utility classes
- improve styling of the new search options

* fix(Bubble): remove duplicated utility classes

* fix(bubble): use color neutral utility

* fix(bubble): increase gaps and justify center

* fix(Bubble): increase height and decrease gap

* fix(search): improve usability on search options

- increase animation timing to match mobile
- properly center cancel button
- only show cancel on text input
- prevent search options from disappearing when clicking with no text

* fix(search-options): improve spacing and auto size

* fix(search-options): improve animation and  decrease gap

app/assets/javascripts/components/Bubble.tsx

@@ -0,0 +1,25 @@
+interface BubbleProperties {
+  label: string;
+  selected: boolean;
+  onSelect: () => void;
+}
+
+const styles = {
+  base: 'px-2 py-1.5 text-center rounded-full cursor-pointer transition border-1 border-solid active:border-info active:bg-info active:color-neutral-contrast',
+  unselected: 'color-neutral border-secondary',
+  selected: 'border-info bg-info color-neutral-contrast',
+};
+
+const Bubble = ({ label, selected, onSelect }: BubbleProperties) => (
+  <span
+    role="tab"
+    className={`bubble ${styles.base} ${
+      selected ? styles.selected : styles.unselected
+    }`}
+    onClick={onSelect}
+  >
+    {label}
+  </span>
+);
+
+export default Bubble;