Refactor: Team settings page

.gitignore

@@ -39,7 +39,7 @@ next-env.d.ts
 
 # AI agents and related files
 CLAUDE.md
-.cursor
+.cursor/
 .agent
 
 

src/__test__/unit/teams-repository.test.ts

@@ -1,5 +1,4 @@
 import { describe, expect, it, vi } from 'vitest'
-import type { components as DashboardComponents } from '@/contracts/dashboard-api'
 import { createTeamsRepository } from '@/core/modules/teams/teams-repository.server'
 
 vi.mock('@/core/shared/clients/supabase/admin', () => ({
@@ -12,63 +11,7 @@ vi.mock('@/core/shared/clients/supabase/admin', () => ({
   },
 }))
 
-function createApiResponse<T>(input: {
-  ok: boolean
-  status: number
-  data?: T
-  error?: { message?: string } | null
-}) {
-  return {
-    data: input.data,
-    error: input.error ?? null,
-    response: {
-      ok: input.ok,
-      status: input.status,
-    },
-  }
-}
-
 describe('createTeamsRepository', () => {
-  it('returns a validation repo error when createTeam gets a 400 response', async () => {
-    const apiClient = {
-      POST: vi.fn().mockResolvedValue(
-        createApiResponse<
-          DashboardComponents['schemas']['TeamResolveResponse']
-        >({
-          ok: false,
-          status: 400,
-          error: { message: 'Team name is invalid' },
-        })
-      ),
-      GET: vi.fn(),
-      PATCH: vi.fn(),
-      DELETE: vi.fn(),
-    }
-
-    const repository = createTeamsRepository(
-      { accessToken: 'token' },
-      {
-        apiClient:
-          apiClient as unknown as typeof import('@/core/shared/clients/api').api,
-        authHeaders: vi.fn(() => ({ 'X-Supabase-Token': 'token' })),
-        adminClient: {
-          auth: { admin: { getUserById: vi.fn() } },
-        } as unknown as typeof import('@/core/shared/clients/supabase/admin').supabaseAdmin,
-      }
-    )
-
-    const result = await repository.createTeam('bad name')
-
-    expect(result).toEqual({
-      ok: false,
-      error: expect.objectContaining({
-        code: 'validation',
-        status: 400,
-        message: 'Team name is invalid',
-      }),
-    })
-  })
-
   it('returns a repo error instead of throwing when a team-scoped method has no teamId', async () => {
     const repository = createTeamsRepository(
       { accessToken: 'token' },

src/__test__/unit/user-teams-repository.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { components as DashboardComponents } from '@/contracts/dashboard-api'
+import { createUserTeamsRepository } from '@/core/modules/teams/user-teams-repository.server'
+
+function createApiResponse<T>(input: {
+  ok: boolean
+  status: number
+  data?: T
+  error?: { message?: string } | null
+}) {
+  return {
+    data: input.data,
+    error: input.error ?? null,
+    response: {
+      ok: input.ok,
+      status: input.status,
+    },
+  }
+}
+
+describe('createUserTeamsRepository', () => {
+  it('returns a validation repo error when createTeam gets a 400 response', async () => {
+    const apiClient = {
+      POST: vi.fn().mockResolvedValue(
+        createApiResponse<
+          DashboardComponents['schemas']['TeamResolveResponse']
+        >({
+          ok: false,
+          status: 400,
+          error: { message: 'Team name is invalid' },
+        })
+      ),
+      GET: vi.fn(),
+      PATCH: vi.fn(),
+      DELETE: vi.fn(),
+    }
+
+    const repository = createUserTeamsRepository(
+      { accessToken: 'token' },
+      {
+        apiClient:
+          apiClient as unknown as typeof import('@/core/shared/clients/api').api,
+        authHeaders: vi.fn(() => ({ 'X-Supabase-Token': 'token' })),
+      }
+    )
+
+    const result = await repository.createTeam('bad name')
+
+    expect(result).toEqual({
+      ok: false,
+      error: expect.objectContaining({
+        code: 'validation',
+        status: 400,
+        message: 'Team name is invalid',
+      }),
+    })
+  })
+})

src/app/dashboard/[teamSlug]/general/page.tsx

@@ -1,29 +1,17 @@
-import { InfoCard } from '@/features/dashboard/settings/general/info-card'
-import { NameCard } from '@/features/dashboard/settings/general/name-card'
-import { ProfilePictureCard } from '@/features/dashboard/settings/general/profile-picture-card'
-import Frame from '@/ui/frame'
+import { Page } from '@/features/dashboard/layouts/page'
+import { TeamAvatar } from '@/features/dashboard/settings/general/team-avatar'
+import { TeamInfo } from '@/features/dashboard/settings/general/team-info'
+import { TeamName } from '@/features/dashboard/settings/general/team-name'
 
-interface GeneralPageProps {
-  params: Promise<{
-    teamSlug: string
-  }>
-}
-
-export default async function GeneralPage({ params }: GeneralPageProps) {
+export default async function GeneralPage() {
   return (
-    <Frame
-      classNames={{
-        wrapper: 'w-full max-md:p-0',
-        frame: 'max-md:border-none',
-      }}
-    >
-      <section className="col-span-full flex-col">
-        <div className="flex gap-2 border-b md:gap-3">
-          <ProfilePictureCard className="size-32" />
-          <NameCard />
-        </div>
-        <InfoCard className="flex flex-col justify-between" />
-      </section>
-    </Frame>
+    <Page className="flex gap-6">
+      <TeamAvatar />
+      <div className="flex min-w-0 flex-1 flex-col gap-4">
+        <TeamName />
+        <div className="border-b" />
+        <TeamInfo />
+      </div>
+    </Page>
   )
 }

src/app/dashboard/[teamSlug]/members/page.tsx

@@ -1,5 +1,6 @@
 import { Page } from '@/features/dashboard/layouts/page'
-import { MemberCard } from '@/features/dashboard/members/member-card'
+import { MembersPageContent } from '@/features/dashboard/members/members-page-content'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
 
 interface MembersPageProps {
   params: Promise<{
@@ -8,9 +9,15 @@ interface MembersPageProps {
 }
 
 export default async function MembersPage({ params }: MembersPageProps) {
+  const { teamSlug } = await params
+
+  prefetch(trpc.teams.members.queryOptions({ teamSlug }))
+
   return (
-    <Page>
-      <MemberCard params={params} />
-    </Page>
+    <HydrateClient>
+      <Page>
+        <MembersPageContent />
+      </Page>
+    </HydrateClient>
   )
 }

src/configs/user-messages.ts

@@ -57,6 +57,12 @@ export const USER_MESSAGES = {
   failedUpdateLogo: {
     message: 'Failed to update logo.',
   },
+  teamLogoRemoved: {
+    message: 'Your team logo has been removed.',
+  },
+  failedRemoveLogo: {
+    message: 'Failed to remove logo.',
+  },
   emailInUse: {
     message: 'E-mail already in use.',
   },

src/core/modules/teams/schemas.ts

@@ -1,23 +1,43 @@
 import { z } from 'zod'
 import { TeamSlugSchema } from '@/core/shared/schemas/team'
 
-export { TeamSlugSchema }
+const TEAM_NAME_MAX_LENGTH = 32
 
-export const TeamNameSchema = z
+const TeamNameSchema = z
   .string()
   .trim()
   .min(1, { message: 'Team name cannot be empty' })
-  .max(32, { message: 'Team name cannot be longer than 32 characters' })
+  .max(TEAM_NAME_MAX_LENGTH, {
+    message: `Team name cannot be longer than ${TEAM_NAME_MAX_LENGTH} characters`,
+  })
   .regex(/^[a-zA-Z0-9]+(?:[ _.-][a-zA-Z0-9]+)*$/, {
     message:
       'Names can only contain letters and numbers, separated by spaces, underscores, hyphens, or dots',
   })
 
-export const UpdateTeamNameSchema = z.object({
+const UpdateTeamNameSchema = z.object({
   teamSlug: TeamSlugSchema,
   name: TeamNameSchema,
 })
 
-export const CreateTeamSchema = z.object({
+const CreateTeamSchema = z.object({
   name: TeamNameSchema,
 })
+
+const AddTeamMemberSchema = z.object({
+  email: z.email(),
+})
+
+const RemoveTeamMemberSchema = z.object({
+  userId: z.uuid(),
+})
+
+export {
+  AddTeamMemberSchema,
+  CreateTeamSchema,
+  RemoveTeamMemberSchema,
+  TEAM_NAME_MAX_LENGTH,
+  TeamNameSchema,
+  TeamSlugSchema,
+  UpdateTeamNameSchema,
+}

src/core/modules/teams/teams-repository.server.ts

@@ -21,17 +21,14 @@ export type TeamsRequestScope = RequestScope & {
 }
 
 export interface TeamsRepository {
-  createTeam(
-    name: string
-  ): Promise<RepoResult<DashboardComponents['schemas']['TeamResolveResponse']>>
   listTeamMembers(): Promise<RepoResult<TeamMember[]>>
   updateTeamName(
     name: string
   ): Promise<RepoResult<DashboardComponents['schemas']['UpdateTeamResponse']>>
   addTeamMember(email: string): Promise<RepoResult<void>>
   removeTeamMember(userId: string): Promise<RepoResult<void>>
   updateTeamProfilePictureUrl(
-    profilePictureUrl: string
+    profilePictureUrl: string | null
   ): Promise<RepoResult<DashboardComponents['schemas']['UpdateTeamResponse']>>
 }
 
@@ -73,39 +70,6 @@ export function createTeamsRepository(
   }
 ): TeamsRepository {
   return {
-    async createTeam(
-      name
-    ): Promise<
-      RepoResult<DashboardComponents['schemas']['TeamResolveResponse']>
-    > {
-      const { data, error, response } = await deps.apiClient.POST('/teams', {
-        headers: deps.authHeaders(scope.accessToken),
-        body: { name },
-      })
-
-      if (!response.ok || error || !data) {
-        if (response.status === 400) {
-          return err(
-            createRepoError({
-              code: 'validation',
-              status: response.status,
-              message: error?.message ?? 'Failed to create team',
-              cause: error,
-            })
-          )
-        }
-
-        return err(
-          repoErrorFromHttp(
-            response.status,
-            error?.message ?? 'Failed to create team',
-            error
-          )
-        )
-      }
-
-      return ok(data)
-    },
     async listTeamMembers(): Promise<RepoResult<TeamMember[]>> {
       const teamId = requireTeamId(scope)
       if (!teamId.ok) {

src/core/modules/teams/user-teams-repository.server.ts

@@ -2,8 +2,9 @@ import 'server-only'
 
 import { secondsInMinute } from 'date-fns/constants'
 import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
+import type { components as DashboardComponents } from '@/contracts/dashboard-api'
 import { api } from '@/core/shared/clients/api'
-import { repoErrorFromHttp } from '@/core/shared/errors'
+import { createRepoError, repoErrorFromHttp } from '@/core/shared/errors'
 import type { RequestScope } from '@/core/shared/repository-scope'
 import { err, ok, type RepoResult } from '@/core/shared/result'
 import type { ResolvedTeam, TeamModel } from './models'
@@ -17,6 +18,9 @@ export type UserTeamsRequestScope = RequestScope
 
 export interface UserTeamsRepository {
   listUserTeams(): Promise<RepoResult<TeamModel[]>>
+  createTeam(
+    name: string
+  ): Promise<RepoResult<DashboardComponents['schemas']['TeamResolveResponse']>>
   resolveTeamBySlug(
     slug: string,
     next?: { tags?: string[] }
@@ -52,11 +56,40 @@ export function createUserTeamsRepository(
     async listUserTeams(): Promise<RepoResult<TeamModel[]>> {
       const teamsResult = await listApiUserTeams()
 
-      if (!teamsResult.ok) {
-        return teamsResult
+      return teamsResult
+    },
+    async createTeam(
+      name
+    ): Promise<
+      RepoResult<DashboardComponents['schemas']['TeamResolveResponse']>
+    > {
+      const { data, error, response } = await deps.apiClient.POST('/teams', {
+        headers: deps.authHeaders(scope.accessToken),
+        body: { name },
+      })
+
+      if (!response.ok || error || !data) {
+        if (response.status === 400) {
+          return err(
+            createRepoError({
+              code: 'validation',
+              status: response.status,
+              message: error?.message ?? 'Failed to create team',
+              cause: error,
+            })
+          )
+        }
+
+        return err(
+          repoErrorFromHttp(
+            response.status,
+            error?.message ?? 'Failed to create team',
+            error
+          )
+        )
       }
 
-      return ok(teamsResult.data)
+      return ok(data)
     },
     async resolveTeamBySlug(
       slug: string,