Repository: supabase/supabase
File: apps/studio/pages/claim-project.tsx (TypeScript)

Code before:
import Head from 'next/head'
import { PropsWithChildren, useMemo, useState } from 'react'

import { useParams } from 'common'
import { ProjectClaimBenefits } from 'components/interfaces/Organization/ProjectClaim/benefits'
import { ProjectClaimChooseOrg } from 'components/interfaces/Organization/ProjectClaim/choose-org'
import { ProjectClaimConfirm } from 'components/interfaces/Organization/ProjectClaim/confirm'
import { ProjectClaimLayout } from 'components/interfaces/Organization/ProjectClaim/layout'
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
import { useApiAuthorizationQuery } from 'data/api-authorization/api-authorization-query'
import { useOrganizationProjectClaimQuery } from 'data/organizations/organization-project-claim-query'
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
import { useCustomContent } from 'hooks/custom-content/useCustomContent'
import { withAuth } from 'hooks/misc/withAuth'
import type { NextPageWithLayout } from 'types'
import { Admonition } from 'ui-patterns'

const ClaimProjectPageLayout = ({ children }: PropsWithChildren) => {
  const { appTitle } = useCustomContent(['app:title'])

  return (
    <>
      <Head>
        <title>{`Claim project ${appTitle ?? 'Supabase'}`}</title>
      </Head>
      {children}
    </>
  )
}

const ClaimProjectPage: NextPageWithLayout = () => {
  const { auth_id, token: claimToken } = useParams()
  const [selectedOrgSlug, setSelectedOrgSlug] = useState<string>()
  const [step, setStep] = useState<'choose-org' | 'benefits' | 'confirm'>('choose-org')

  const {
    data: requester,
    isLoading: isLoadingRequester,
    isError: isErrorRequester,
    error: errorRequester,
  } = useApiAuthorizationQuery({ id: auth_id })
  const { data: organizations } = useOrganizationsQuery()

  const selectedOrganization = useMemo(() => {
    return (organizations || []).find((org) => org.slug === selectedOrgSlug)
  }, [selectedOrgSlug, organizations])

  const {
    data: projectClaim,

Review comment (suggestion):
```suggestion
        <title>{`Claim project | ${appTitle ?? 'Supabase'}`}</title>
```

doesn't make much sense as one sentence I think

Code after:
import Head from 'next/head'
import { PropsWithChildren, useMemo, useState } from 'react'

import { useParams } from 'common'
import { ProjectClaimBenefits } from 'components/interfaces/Organization/ProjectClaim/benefits'
import { ProjectClaimChooseOrg } from 'components/interfaces/Organization/ProjectClaim/choose-org'
import { ProjectClaimConfirm } from 'components/interfaces/Organization/ProjectClaim/confirm'
import { ProjectClaimLayout } from 'components/interfaces/Organization/ProjectClaim/layout'
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
import { useApiAuthorizationQuery } from 'data/api-authorization/api-authorization-query'
import { useOrganizationProjectClaimQuery } from 'data/organizations/organization-project-claim-query'
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
import { useCustomContent } from 'hooks/custom-content/useCustomContent'
import { withAuth } from 'hooks/misc/withAuth'
import type { NextPageWithLayout } from 'types'
import { Admonition } from 'ui-patterns'

const ClaimProjectPageLayout = ({ children }: PropsWithChildren) => {
  const { appTitle } = useCustomContent(['app:title'])

  return (
    <>
      <Head>
        <title>{`Claim project | ${appTitle ?? 'Supabase'}`}</title>
      </Head>
      {children}
    </>
  )
}

const ClaimProjectPage: NextPageWithLayout = () => {
  const { auth_id, token: claimToken } = useParams()
  const [selectedOrgSlug, setSelectedOrgSlug] = useState<string>()
  const [step, setStep] = useState<'choose-org' | 'benefits' | 'confirm'>('choose-org')

  const {
    data: requester,
    isLoading: isLoadingRequester,
    isError: isErrorRequester,
    error: errorRequester,
  } = useApiAuthorizationQuery({ id: auth_id })
  const { data: organizations } = useOrganizationsQuery()

  const selectedOrganization = useMemo(() => {
    return (organizations || []).find((org) => org.slug === selectedOrgSlug)
  }, [selectedOrgSlug, organizations])

  const {
    data: projectClaim,