supabase/apps/studio/components/interfaces/HomeNew/Home.tsx

import dayjs from 'dayjs'
import { useEffect, useRef } from 'react'
import { useParams } from 'common'
import { useBranchesQuery } from 'data/branches/branches-query'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
import {
  useIsOrioleDb,
  useProjectByRefQuery,
  useSelectedProjectQuery,
} from 'hooks/misc/useSelectedProject'
import { useLocalStorage } from 'hooks/misc/useLocalStorage'
import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
import { useAppStateSnapshot } from 'state/app-state'
import { DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable'

import TopSection from 'components/interfaces/HomeNew/TopSection'
import GettingStartedSection from 'components/interfaces/HomeNew/GettingStartedSection'
import AdvisorSection from 'components/interfaces/HomeNew/AdvisorSection'
import CustomReportSection from 'components/interfaces/HomeNew/CustomReportSection'
import SortableSection from 'components/interfaces/HomeNew/SortableSection'
import { ProjectUsageSection } from 'components/interfaces/HomeNew/ProjectUsageSection'
import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'

const Home = () => {
  const { data: project } = useSelectedProjectQuery()
  const { data: organization } = useSelectedOrganizationQuery()
  const { data: parentProject } = useProjectByRefQuery(project?.parent_project_ref)
  const isOrioleDb = useIsOrioleDb()
  const snap = useAppStateSnapshot()
  const { ref, enableBranching } = useParams()

  const hasShownEnableBranchingModalRef = useRef(false)
  const isPaused = project?.status === PROJECT_STATUS.INACTIVE
  const isNewProject = dayjs(project?.inserted_at).isAfter(dayjs().subtract(2, 'day'))

  useEffect(() => {
    if (enableBranching && !hasShownEnableBranchingModalRef.current) {
      hasShownEnableBranchingModalRef.current = true
      snap.setShowCreateBranchModal(true)
    }
  }, [enableBranching, snap])

  const { data: branches } = useBranchesQuery({
    projectRef: project?.parent_project_ref ?? project?.ref,
  })

  const mainBranch = branches?.find((branch) => branch.is_default)
  const currentBranch = branches?.find((branch) => branch.project_ref === project?.ref)
  const isMainBranch = currentBranch?.name === mainBranch?.name

  let projectName = 'Welcome to your project'
  if (currentBranch && !isMainBranch) {
    projectName = currentBranch.name
  } else if (project?.name) {
    projectName = project.name
  }

  const [sectionOrder, setSectionOrder] = useLocalStorage<string[]>(
    `home-section-order-${project?.ref || 'default'}`,
    ['getting-started', 'usage', 'advisor', 'custom-report']
  )

  const [gettingStartedState, setGettingStartedState] = useLocalStorage<
    'empty' | 'code' | 'no-code' | 'hidden'
  >(`home-getting-started-${project?.ref || 'default'}`, 'empty')

  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }))

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event
    if (!over || active.id === over.id) return
    setSectionOrder((items) => {
      const oldIndex = items.indexOf(String(active.id))
      const newIndex = items.indexOf(String(over.id))
      if (oldIndex === -1 || newIndex === -1) return items
      return arrayMove(items, oldIndex, newIndex)
    })
  }

  return (
    <div className="w-full">
      <ScaffoldContainer size="large">
        <ScaffoldSection isFullWidth className="pt-16 pb-0">
          <TopSection
            projectName={projectName}
            isMainBranch={isMainBranch}
            parentProject={parentProject}
            isOrioleDb={!!isOrioleDb}
            project={project}
            organization={organization}
            projectRef={ref}
            isPaused={isPaused}
          />
        </ScaffoldSection>
      </ScaffoldContainer>

      {!isPaused && (
        <ScaffoldContainer size="large">
          <ScaffoldSection isFullWidth className="gap-16 pb-32">
            <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
              <SortableContext
                items={sectionOrder.filter(
                  (id) => id !== 'getting-started' || gettingStartedState !== 'hidden'
                )}
                strategy={verticalListSortingStrategy}
              >
                {sectionOrder.map((id) => {
                  if (id === 'getting-started') {
                    return gettingStartedState === 'hidden' ? null : (
                      <SortableSection key={id} id={id}>
                        <GettingStartedSection
                          value={gettingStartedState}
                          onChange={setGettingStartedState}
                        />
                      </SortableSection>
                    )
                  }
                  if (id === 'usage') {
                    return (
                      <SortableSection key={id} id={id}>
                        {IS_PLATFORM && <ProjectUsageSection />}
                      </SortableSection>
                    )
                  }
                  if (id === 'advisor') {
                    return (
                      <SortableSection key={id} id={id}>
                        {!isNewProject && <AdvisorSection />}
                      </SortableSection>
                    )
                  }
                  if (id === 'custom-report') {
                    return (
                      <SortableSection key={id} id={id}>
                        <CustomReportSection />
                      </SortableSection>
                    )
                  }
                  return null
                })}
              </SortableContext>
            </DndContext>
          </ScaffoldSection>
        </ScaffoldContainer>
      )}
    </div>
  )
}

export default Home