Add search row

web/components/contract-search.tsx

@@ -91,6 +91,7 @@ export function ContractSearch(props: {
     contracts: Contract[] | undefined,
     loadMore: () => void
   ) => ReactNode
+  autoFocus?: boolean
 }) {
   const {
     user,
@@ -109,6 +110,7 @@ export function ContractSearch(props: {
     noControls,
     maxResults,
     renderContracts,
+    autoFocus,
   } = props
 
   const [state, setState] = usePersistentState(
@@ -210,6 +212,7 @@ export function ContractSearch(props: {
         user={user}
         onSearchParametersChanged={onSearchParametersChanged}
         noControls={noControls}
+        autoFocus={autoFocus}
       />
       {renderContracts ? (
         renderContracts(renderedContracts, performQuery)
@@ -238,6 +241,7 @@ function ContractSearchControls(props: {
   useQueryUrlParam?: boolean
   user?: User | null
   noControls?: boolean
+  autoFocus?: boolean
 }) {
   const {
     className,
@@ -250,6 +254,7 @@ function ContractSearchControls(props: {
     useQueryUrlParam,
     user,
     noControls,
+    autoFocus,
   } = props
 
   const router = useRouter()
@@ -399,6 +404,7 @@ function ContractSearchControls(props: {
           onBlur={trackCallback('search', { query: query })}
           placeholder={'Search'}
           className="input input-bordered w-full"
+          autoFocus={autoFocus}
         />
         {!query && (
           <select

web/pages/experimental/home/index.tsx

@@ -4,6 +4,7 @@ import {
   AdjustmentsIcon,
   PlusSmIcon,
   ArrowSmRightIcon,
+  SearchIcon,
 } from '@heroicons/react/solid'
 import clsx from 'clsx'
 
@@ -44,8 +45,10 @@ export default function Home() {
 
   return (
     <Page>
-      <Col className="pm:mx-10 gap-4 px-4 pb-12">
+      <Col className="pm:mx-10 gap-4 px-4 pb-12 pt-2 sm:pt-0">
-        <Row className={'mt-4 w-full items-start justify-between'}>
+        <SearchRow />
+
+        <Row className={'w-full items-start justify-between gap-8'}>
           <Row className="items-end gap-4">
             <Title className="!mb-1 !mt-0" text="Home" />
             <EditButton />
@@ -177,6 +180,22 @@ function EditButton(props: { className?: string }) {
   )
 }
 
+function SearchRow() {
+  return (
+    <SiteLink href="/search" className="hover:no-underline">
+      <Row>
+        <Button size="sm" color="gray-white">
+          <SearchIcon className={clsx('h-[24px] w-5')} aria-hidden="true" />
+        </Button>
+        <input
+          className="input pointer-events-none w-full"
+          placeholder="Search"
+        />
+      </Row>
+    </SiteLink>
+  )
+}
+
 function DailyProfitAndBalance(props: {
   user: User | null | undefined
   className?: string

web/pages/search.tsx

@@ -4,6 +4,7 @@ import { ContractSearch } from 'web/components/contract-search'
 import { useTracking } from 'web/hooks/use-tracking'
 import { useUser } from 'web/hooks/use-user'
 import { usePrefetch } from 'web/hooks/use-prefetch'
+import { useRouter } from 'next/router'
 
 export default function Search() {
   const user = useUser()
@@ -11,6 +12,9 @@ export default function Search() {
 
   useTracking('view search')
 
+  const { query } = useRouter()
+  const autoFocus = !(query['q'] || query['s'] || query['p'])
+
   return (
     <Page>
       <Col className="mx-auto w-full p-2">
@@ -18,6 +22,7 @@ export default function Search() {
           user={user}
           persistPrefix="search"
           useQueryUrlParam={true}
+          autoFocus={autoFocus}
         />
       </Col>
     </Page>