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/NotesView.tsx

@@ -48,13 +48,13 @@ export const NotesView: FunctionComponent<Props> = observer(
       selectPreviousNote,
       onFilterEnter,
       handleFilterTextChanged,
-      onSearchInputBlur,
       clearFilterText,
       paginate,
       panelWidth,
     } = appState.notesView;
 
     const [showDisplayOptionsMenu, setShowDisplayOptionsMenu] = useState(false);
+    const [focusedSearch, setFocusedSearch] = useState(false);
 
     const [closeDisplayOptMenuOnBlur] = useCloseOnBlur(
       displayOptionsMenuRef,
@@ -130,6 +130,9 @@ export const NotesView: FunctionComponent<Props> = observer(
       setNoteFilterText((e.target as HTMLInputElement).value);
     };
 
+    const onSearchFocused = () => setFocusedSearch(true);
+    const onSearchBlurred = () => setFocusedSearch(false);
+
     const onNoteFilterKeyUp = (e: KeyboardEvent) => {
       if (e.key === KeyboardKey.Enter) {
         onFilterEnter();
@@ -179,32 +182,38 @@ export const NotesView: FunctionComponent<Props> = observer(
                 </button>
               </div>
               <div className="filter-section" role="search">
-                <input
-                  type="text"
-                  id="search-bar"
-                  className="filter-bar"
-                  placeholder="Search"
-                  title="Searches notes in the currently selected tag"
-                  value={noteFilterText}
-                  onChange={onNoteFilterTextChange}
-                  onKeyUp={onNoteFilterKeyUp}
-                  onBlur={() => onSearchInputBlur()}
-                />
-                {noteFilterText ? (
-                  <button
-                    onClick={clearFilterText}
-                    aria-role="button"
-                    id="search-clear-button"
-                  >
-                    ✕
-                  </button>
-                ) : null}
-                <div className="ml-2">
-                  <SearchOptions
-                    application={application}
-                    appState={appState}
+                <div>
+                  <input
+                    type="text"
+                    id="search-bar"
+                    className="filter-bar"
+                    placeholder="Search"
+                    title="Searches notes in the currently selected tag"
+                    value={noteFilterText}
+                    onChange={onNoteFilterTextChange}
+                    onKeyUp={onNoteFilterKeyUp}
+                    onFocus={onSearchFocused}
+                    onBlur={onSearchBlurred}
                   />
+                  {noteFilterText && (
+                    <button
+                      onClick={clearFilterText}
+                      aria-role="button"
+                      id="search-clear-button"
+                    >
+                      ✕
+                    </button>
+                  )}
                 </div>
+
+                {(focusedSearch || noteFilterText) && (
+                  <div className="animate-fade-from-top">
+                    <SearchOptions
+                      application={application}
+                      appState={appState}
+                    />
+                  </div>
+                )}
               </div>
               <NoAccountWarning appState={appState} />
             </div>