Don't allow hiding of home sections

common/user.ts

@@ -34,7 +34,7 @@ export type User = {
   followerCountCached: number
 
   followedCategories?: string[]
-  homeSections?: { visible: string[]; hidden: string[] }
+  homeSections?: string[]
 
   referredByUserId?: string
   referredByContractId?: string

web/components/arrange-home.tsx

@@ -13,19 +13,13 @@ import { Group } from 'common/group'
 
 export function ArrangeHome(props: {
   user: User | null | undefined
-  homeSections: { visible: string[]; hidden: string[] }
-  setHomeSections: (homeSections: {
-    visible: string[]
-    hidden: string[]
-  }) => void
+  homeSections: string[]
+  setHomeSections: (sections: string[]) => void
 }) {
   const { user, homeSections, setHomeSections } = props
 
   const groups = useMemberGroups(user?.id) ?? []
-  const { itemsById, visibleItems, hiddenItems } = getHomeItems(
-    groups,
-    homeSections
-  )
+  const { itemsById, sections } = getHomeItems(groups, homeSections)
 
   return (
     <DragDropContext
@@ -35,23 +29,16 @@ export function ArrangeHome(props: {
 
         const item = itemsById[draggableId]
 
-        const newHomeSections = {
-          visible: visibleItems.map((item) => item.id),
-          hidden: hiddenItems.map((item) => item.id),
-        }
+        const newHomeSections = sections.map((section) => section.id)
 
-        const sourceSection = source.droppableId as 'visible' | 'hidden'
-        newHomeSections[sourceSection].splice(source.index, 1)
-
-        const destSection = destination.droppableId as 'visible' | 'hidden'
-        newHomeSections[destSection].splice(destination.index, 0, item.id)
+        newHomeSections.splice(source.index, 1)
+        newHomeSections.splice(destination.index, 0, item.id)
 
         setHomeSections(newHomeSections)
       }}
     >
-      <Row className="relative max-w-lg gap-4">
-        <DraggableList items={visibleItems} title="Visible" />
-        <DraggableList items={hiddenItems} title="Hidden" />
+      <Row className="relative max-w-md gap-4">
+        <DraggableList items={sections} title="Sections" />
       </Row>
     </DragDropContext>
   )
@@ -64,16 +51,13 @@ function DraggableList(props: {
   const { title, items } = props
   return (
     <Droppable droppableId={title.toLowerCase()}>
-      {(provided, snapshot) => (
+      {(provided) => (
         <Col
           {...provided.droppableProps}
           ref={provided.innerRef}
-          className={clsx(
-            'width-[220px] flex-1 items-start rounded bg-gray-50 p-2',
-            snapshot.isDraggingOver && 'bg-gray-100'
-          )}
+          className={clsx('flex-1 items-stretch gap-1 rounded bg-gray-100 p-4')}
         >
-          <Subtitle text={title} className="mx-2 !my-2" />
+          <Subtitle text={title} className="mx-2 !mt-0 !mb-4" />
           {items.map((item, index) => (
             <Draggable key={item.id} draggableId={item.id} index={index}>
               {(provided, snapshot) => (
@@ -85,7 +69,7 @@ function DraggableList(props: {
                 >
                   <SectionItem
                     className={clsx(
-                      snapshot.isDragging && 'z-[9000] bg-gray-300'
+                      snapshot.isDragging && 'z-[9000] bg-gray-200'
                     )}
                     item={item}
                   />
@@ -122,10 +106,7 @@ const SectionItem = (props: {
   )
 }
 
-export const getHomeItems = (
-  groups: Group[],
-  homeSections: { visible: string[]; hidden: string[] }
-) => {
+export const getHomeItems = (groups: Group[], sections: string[]) => {
   const items = [
     { label: 'Trending', id: 'score' },
     { label: 'New for you', id: 'newest' },
@@ -136,23 +117,13 @@ export const getHomeItems = (
   ]
   const itemsById = keyBy(items, 'id')
 
-  const { visible, hidden } = homeSections
+  const sectionItems = filterDefined(sections.map((id) => itemsById[id]))
 
-  const [visibleItems, hiddenItems] = [
-    filterDefined(visible.map((id) => itemsById[id])),
-    filterDefined(hidden.map((id) => itemsById[id])),
-  ]
-
-  // Add unmentioned items to the visible list.
-  visibleItems.push(
-    ...items.filter(
-      (item) => !visibleItems.includes(item) && !hiddenItems.includes(item)
-    )
-  )
+  // Add unmentioned items to the end.
+  sectionItems.push(...items.filter((item) => !sectionItems.includes(item)))
 
   return {
-    visibleItems,
-    hiddenItems,
+    sections: sectionItems,
     itemsById,
   }
 }

web/pages/experimental/home/edit.tsx

@@ -16,14 +16,9 @@ export default function Home() {
 
   useTracking('edit home')
 
-  const [homeSections, setHomeSections] = useState(
-    user?.homeSections ?? { visible: [], hidden: [] }
-  )
+  const [homeSections, setHomeSections] = useState(user?.homeSections ?? [])
 
-  const updateHomeSections = (newHomeSections: {
-    visible: string[]
-    hidden: string[]
-  }) => {
+  const updateHomeSections = (newHomeSections: string[]) => {
     if (!user) return
     updateUser(user.id, { homeSections: newHomeSections })
     setHomeSections(newHomeSections)
@@ -31,7 +26,7 @@ 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-6 pt-2">
         <Row className={'w-full items-center justify-between'}>
           <Title text="Edit your home page" />
           <DoneButton />

web/pages/experimental/home/index.tsx

@@ -38,10 +38,8 @@ const Home = () => {
 
   const groups = useMemberGroups(user?.id) ?? []
 
-  const [homeSections] = useState(
-    user?.homeSections ?? { visible: [], hidden: [] }
-  )
-  const { visibleItems } = getHomeItems(groups, homeSections)
+  const [homeSections] = useState(user?.homeSections ?? [])
+  const { sections } = getHomeItems(groups, homeSections)
 
   return (
     <Page>
@@ -57,7 +55,7 @@ const Home = () => {
         <div className="text-xl text-gray-800">Daily movers</div>
         <ProbChangeTable userId={user?.id} />
 
-        {visibleItems.map((item) => {
+        {sections.map((item) => {
           const { id } = item
           if (id === 'your-bets') {
             return (