refactor(dev-only): add animation to file view search box and fix search bar on mobile

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -315,8 +315,12 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
                 itemListController={itemListController}
               />
             )}
-            {!isFilesTableViewEnabled && (
-              <SearchBar itemListController={itemListController} searchOptionsController={searchOptionsController} />
+            {(!isFilesTableViewEnabled || isMobileScreen()) && (
+              <SearchBar
+                itemListController={itemListController}
+                searchOptionsController={searchOptionsController}
+                hideOptions={shouldShowFilesTableView}
+              />
             )}
             <NoAccountWarning
               accountMenuController={accountMenuController}

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -13,6 +13,7 @@ import AddItemMenuButton from './AddItemMenuButton'
 import { FilesController } from '@/Controllers/FilesController'
 import SearchButton from './SearchButton'
 import { ItemListController } from '@/Controllers/ItemList/ItemListController'
+import { isMobileScreen } from '@/Utils'
 
 type Props = {
   application: WebApplication
@@ -105,7 +106,7 @@ const ContentListHeader = ({
   }, [addButtonLabel, addNewItem, filesController, isDailyEntry, isFilesSmartView])
 
   const SearchBarButton = useMemo(() => {
-    if (!isFilesSmartView || !isFilesTableViewEnabled) {
+    if (!isFilesSmartView || !isFilesTableViewEnabled || isMobileScreen()) {
       return null
     }
 

packages/web/src/javascripts/Components/ContentListView/Header/SearchButton.tsx

@@ -4,42 +4,48 @@ import Icon from '@/Components/Icon/Icon'
 import DecoratedInput from '@/Components/Input/DecoratedInput'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { ItemListController } from '@/Controllers/ItemList/ItemListController'
+import { classNames } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 
 type Props = {
   itemListController: ItemListController
 }
 
 const SearchButton = ({ itemListController }: Props) => {
+  const searchButtonRef = useRef<HTMLButtonElement>(null)
+
   const { noteFilterText, setNoteFilterText, clearFilterText } = itemListController
 
   const [isSearchBarVisible, setIsSearchBarVisible] = useState(false)
 
   return (
     <>
-      {isSearchBarVisible && (
-        <DecoratedInput
-          autocomplete={false}
-          id={ElementIds.SearchBar}
-          className={{
-            container: 'px-1',
-            input: 'text-base placeholder:text-passive-0 lg:text-sm',
-          }}
-          placeholder={'Search...'}
-          value={noteFilterText}
-          ref={(node) => {
-            if (node && document.activeElement !== node) {
-              node.focus()
-            }
-          }}
-          onChange={(query) => setNoteFilterText(query)}
-          left={[<Icon type="search" className="mr-1 h-4.5 w-4.5 flex-shrink-0 text-passive-1" />]}
-          right={[noteFilterText && <ClearInputButton onClick={clearFilterText} />]}
-          roundedFull
-        />
-      )}
+      <DecoratedInput
+        autocomplete={false}
+        id={ElementIds.SearchBar}
+        className={{
+          container: classNames(
+            isSearchBarVisible ? 'scale-x-1 opacity-100' : 'scale-x-0 opacity-0',
+            'origin-right px-1 transition-all duration-200 ease-in-out',
+          ),
+          input: 'text-base placeholder:text-passive-0 lg:text-sm',
+        }}
+        placeholder={'Search...'}
+        value={noteFilterText}
+        ref={(node) => {
+          if (node && document.activeElement !== node) {
+            node.focus()
+          }
+        }}
+        onChange={(query) => setNoteFilterText(query)}
+        left={[<Icon type="search" className="mr-1 h-4.5 w-4.5 flex-shrink-0 text-passive-1" />]}
+        right={[noteFilterText && <ClearInputButton onClick={clearFilterText} />]}
+        roundedFull
+      />
       <RoundIconButton
+        ref={searchButtonRef}
+        className={isSearchBarVisible ? 'rotate-90 transition-transform duration-200 ease-in-out' : ''}
         onClick={() => {
           setIsSearchBarVisible(!isSearchBarVisible)
         }}

packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx

@@ -12,9 +12,10 @@ import { ElementIds } from '@/Constants/ElementIDs'
 type Props = {
   itemListController: ItemListController
   searchOptionsController: SearchOptionsController
+  hideOptions?: boolean
 }
 
-const SearchBar = ({ itemListController, searchOptionsController }: Props) => {
+const SearchBar = ({ itemListController, searchOptionsController, hideOptions = false }: Props) => {
   const searchInputRef = useRef<HTMLInputElement>(null)
 
   const { noteFilterText, setNoteFilterText, clearFilterText, onFilterEnter } = itemListController
@@ -66,7 +67,7 @@ const SearchBar = ({ itemListController, searchOptionsController }: Props) => {
         roundedFull
       />
 
-      {(focusedSearch || noteFilterText) && (
+      {(focusedSearch || noteFilterText) && !hideOptions && (
         <div className="animate-fade-from-top">
           <SearchOptions searchOptions={searchOptionsController} />
         </div>