improvement(org): move the People page onto the new design system

Author: waleedlatif1

apps/sim/app/o/[organizationId]/_redesign/redesign-host.tsx

@@ -18,3 +18,12 @@ interface RedesignSurfaceProps {
 export function RedesignSurface({ children }: RedesignSurfaceProps) {
   return <PlatformSurface theme='system'>{children}</PlatformSurface>
 }
+
+/** Fills the app's content slot, and the grid stretches the surface so its canvas reaches the end. */
+export function RedesignPageSurface({ children }: RedesignSurfaceProps) {
+  return (
+    <div className='grid h-full min-h-0 min-w-0 flex-1 grid-cols-[minmax(0,1fr)] overflow-y-auto'>
+      <RedesignSurface>{children}</RedesignSurface>
+    </div>
+  )
+}

apps/sim/app/o/[organizationId]/links/links-surface.tsx

@@ -1,15 +1,15 @@
-import { LinksSurface } from '@/app/o/[organizationId]/links/links-surface'
+import { RedesignPageSurface } from '@/app/o/[organizationId]/_redesign/redesign-host'
 import {
   LinkRowsSkeleton,
   LinksFrame,
 } from '@/platform/app/(shell)/links/_components/links-page/links-frame'
 
 export default function SimLinksLoading() {
   return (
-    <LinksSurface>
+    <RedesignPageSurface>
       <LinksFrame loading>
         <LinkRowsSkeleton />
       </LinksFrame>
-    </LinksSurface>
+    </RedesignPageSurface>
   )
 }

apps/sim/app/o/[organizationId]/links/loading.tsx

@@ -5,7 +5,7 @@ import { getSession } from '@/lib/auth'
 import { organizationRoutes } from '@/lib/navigation/paths'
 import { isSimLinksEnabled } from '@/lib/sim-links/feature-flag'
 import { buildAuthCrossLink } from '@/app/(auth)/auth-redirect'
-import { LinksSurface } from '@/app/o/[organizationId]/links/links-surface'
+import { RedesignPageSurface } from '@/app/o/[organizationId]/_redesign/redesign-host'
 import { loadSimLinksListView } from '@/app/o/[organizationId]/links/search-params'
 import { LinksPage } from '@/platform/app/(shell)/links/_components/links-page/links-page'
 import { prefetchSimLinks } from '@/platform/lib/data/prefetch'
@@ -34,10 +34,10 @@ export default async function SimLinksPage({ params, searchParams }: SimLinksPag
     loadSimLinksListView(query)
   )
   return (
-    <LinksSurface>
+    <RedesignPageSurface>
       <HydrationBoundary state={state}>
         <LinksPage organizationId={organizationId} />
       </HydrationBoundary>
-    </LinksSurface>
+    </RedesignPageSurface>
   )
 }

apps/sim/app/o/[organizationId]/links/page.tsx

@@ -1,5 +1,10 @@
-import { ApplicationLoading } from '@/app/_shell/application-loading'
+import { RedesignPageSurface } from '@/app/o/[organizationId]/_redesign/redesign-host'
+import { PersonSkeleton } from '@/platform/app/(shell)/people/_components/person/person-skeleton'
 
-export default function Loading() {
-  return <ApplicationLoading />
+export default function PersonLoading() {
+  return (
+    <RedesignPageSurface>
+      <PersonSkeleton />
+    </RedesignPageSurface>
+  )
 }

apps/sim/app/o/[organizationId]/people/[memberId]/loading.tsx

@@ -3,10 +3,12 @@ import type { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { organizationRoutes } from '@/lib/navigation/paths'
-import { isPeopleEnabled } from '@/lib/people/feature-flag'
+import { getOrganizationSurfaceContext } from '@/lib/organizations/surface'
+import { canBrowsePeople } from '@/lib/people/feature-flag'
 import { buildAuthCrossLink } from '@/app/(auth)/auth-redirect'
-import PageLoading from '@/app/o/[organizationId]/people/[memberId]/loading'
-import { Person } from '@/app/o/[organizationId]/people/[memberId]/person'
+import { RedesignPageSurface } from '@/app/o/[organizationId]/_redesign/redesign-host'
+import { PersonProfile } from '@/platform/app/(shell)/people/_components/person/person'
+import { PersonSkeleton } from '@/platform/app/(shell)/people/_components/person/person-skeleton'
 
 export const metadata: Metadata = { title: 'People' }
 
@@ -24,10 +26,13 @@ export default async function PersonPage({ params }: PersonPageProps) {
         isInviteFlow: false,
       })
     )
-  if (!(await isPeopleEnabled(organizationId))) notFound()
+  const context = await getOrganizationSurfaceContext(organizationId, session.user.id)
+  if (!context || !(await canBrowsePeople(organizationId, context.viewer.role))) notFound()
   return (
-    <Suspense fallback={<PageLoading />}>
-      <Person organizationId={organizationId} memberId={memberId} />
-    </Suspense>
+    <RedesignPageSurface>
+      <Suspense fallback={<PersonSkeleton />}>
+        <PersonProfile organizationId={organizationId} memberId={memberId} />
+      </Suspense>
+    </RedesignPageSurface>
   )
 }