Convert daily movers into a section

web/components/arrange-home.tsx

@@ -108,6 +108,7 @@ const SectionItem = (props: {
 
 export const getHomeItems = (groups: Group[], sections: string[]) => {
   const items = [
+    { label: 'Daily movers', id: 'daily-movers' },
     { label: 'Trending', id: 'score' },
     { label: 'New for you', id: 'newest' },
     ...groups.map((g) => ({

web/components/contract/prob-change-table.tsx

@@ -3,22 +3,20 @@ import { contractPath } from 'web/lib/firebase/contracts'
 import { CPMMContract } from 'common/contract'
 import { formatPercent } from 'common/util/format'
 import { useProbChanges } from 'web/hooks/use-prob-changes'
-import { linkClass, SiteLink } from '../site-link'
+import { SiteLink } from '../site-link'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
-import { useState } from 'react'
 
-export function ProbChangeTable(props: { userId: string | undefined }) {
+export function ProbChangeTable(props: { userId: string | null | undefined }) {
   const { userId } = props
 
   const changes = useProbChanges(userId ?? '')
-  const [expanded, setExpanded] = useState(false)
 
   if (!changes) {
     return null
   }
 
-  const count = expanded ? 16 : 4
+  const count = 6
 
   const { positiveChanges, negativeChanges } = changes
   const filteredPositiveChanges = positiveChanges.slice(0, count / 2)
@@ -29,7 +27,6 @@ export function ProbChangeTable(props: { userId: string | undefined }) {
   ]
 
   return (
-    <Col>
     <Col className="mb-4 w-full divide-x-2 divide-y rounded-lg bg-white shadow-md md:flex-row md:divide-y-0">
       <Col className="flex-1 divide-y">
         {filteredChanges.slice(0, count / 2).map((contract) => (
@@ -64,13 +61,6 @@ export function ProbChangeTable(props: { userId: string | undefined }) {
         ))}
       </Col>
     </Col>
-      <div
-        className={clsx(linkClass, 'cursor-pointer self-end')}
-        onClick={() => setExpanded(!expanded)}
-      >
-        {expanded ? 'Show less' : 'Show more'}
-      </div>
-    </Col>
   )
 }
 

web/pages/experimental/home/index.tsx

@@ -52,21 +52,10 @@ const Home = () => {
 
         <DailyProfitAndBalance userId={user?.id} />
 
-        <div className="text-xl text-gray-800">Daily movers</div>
-        <ProbChangeTable userId={user?.id} />
-
         {sections.map((item) => {
           const { id } = item
-          if (id === 'your-bets') {
+          if (id === 'daily-movers') {
-            return (
+            return <DailyMoversSection key={id} userId={user?.id} />
-              <SearchSection
-                key={id}
-                label={'Your trades'}
-                sort={'newest'}
-                user={user}
-                yourBets
-              />
-            )
           }
           const sort = SORTS.find((sort) => sort.value === id)
           if (sort)
@@ -161,6 +150,22 @@ function GroupSection(props: { group: Group; user: User | null | undefined }) {
   )
 }
 
+function DailyMoversSection(props: { userId: string | null | undefined }) {
+  const { userId } = props
+  return (
+    <Col className="gap-2">
+      <SiteLink className="text-xl" href={'/daily-movers'}>
+        Daily movers{' '}
+        <ArrowSmRightIcon
+          className="mb-0.5 inline h-6 w-6 text-gray-500"
+          aria-hidden="true"
+        />
+      </SiteLink>
+      <ProbChangeTable userId={userId} />
+    </Col>
+  )
+}
+
 function EditButton(props: { className?: string }) {
   const { className } = props