wip

apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.index.tsx

@@ -4,6 +4,7 @@ import { MostEvents } from '@/components/profiles/most-events';
 import { PopularRoutes } from '@/components/profiles/popular-routes';
 import { ProfileActivity } from '@/components/profiles/profile-activity';
 import { ProfileCharts } from '@/components/profiles/profile-charts';
+import { ProfileGroups } from '@/components/profiles/profile-groups';
 import { ProfileMetrics } from '@/components/profiles/profile-metrics';
 import { ProfileProperties } from '@/components/profiles/profile-properties';
 import { useTRPC } from '@/integrations/trpc/react';
@@ -107,6 +108,17 @@ function Component() {
           <ProfileProperties profile={profile.data!} />
         </div>
 
+        {/* Groups - full width, only if profile belongs to groups */}
+        {profile.data?.groups?.length ? (
+          <div className="col-span-1 md:col-span-2">
+            <ProfileGroups
+              profileId={profileId}
+              projectId={projectId}
+              groups={profile.data.groups}
+            />
+          </div>
+        ) : null}
+
         {/* Heatmap / Activity */}
         <div className="col-span-1">
           <ProfileActivity data={activity.data} />