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/stylesheets/_notes.scss

@@ -52,11 +52,11 @@
 
   .filter-section {
     clear: left;
-    height: 28px;
-    margin-top: 14px;
+    max-height: 80px;
+    margin-top: 10px;
     position: relative;
     display: flex;
-    align-items: center;
+    flex-direction: column;
 
     .filter-bar {
       background-color: var(--sn-stylekit-contrast-background-color);
@@ -71,6 +71,20 @@
       border-color: transparent;
       width: 100%;
       position: relative;
+      height: 28px;
+    }
+
+    .search-options {
+      margin-top: 10px;
+
+      display: grid;
+      grid-template-columns: repeat( 3, 1fr );
+      gap: .5rem;
+
+      font-size: var(--sn-stylekit-font-size-p);
+      white-space: nowrap;
+
+      overflow-x: auto;
     }
 
     #search-clear-button {
@@ -86,9 +100,9 @@
       line-height: 17px;
       text-align: center;
       position: absolute;
-      top: 50%;
+      top: 20%;
       transform: translateY(-50%);
-      right: 36px;
+      right: 10px;
       cursor: pointer;
 
       transition: background-color 0.15s linear;

app/assets/stylesheets/_sn.scss

@@ -436,6 +436,10 @@
   border-color: var(--sn-stylekit-neutral-contrast-color);
 }
 
+.border-secondary {
+  border-color: var(--sn-stylekit-secondary-border-color);
+}
+
 .sn-component .border-r-1px {
   border-right-width: 1px;
 }
@@ -938,3 +942,42 @@
 .invisible {
   visibility: hidden;
 }
+
+.color-neutral-contrast {
+  color: var(--sn-stylekit-neutral-contrast-color);
+}
+
+.active\:bg-info:active {
+  background-color: var(--sn-stylekit-info-color);
+}
+
+.active\:border-info:active {
+  border-color: var(--sn-stylekit-info-color);
+}
+
+.active\:color-neutral-contrast:active {
+  color: var(--sn-stylekit-neutral-contrast-color);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(.4,0,.2,1);
+  transition-duration: 100ms;
+}
+
+.animate-fade-from-top {
+  animation: fade-from-top .2s ease-out;
+}
+
+@keyframes fade-from-top {
+  0% {
+    opacity: 0;
+    transform: translateY(-20%);
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}