Refactor: Team settings page

.gitignore

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

spec/openapi.dashboard-api.yaml

@@ -386,6 +386,7 @@ components:
         - blockedReason
         - isDefault
         - limits
+        - createdAt
       properties:
         id:
           type: string
@@ -412,6 +413,9 @@ components:
           type: boolean
         limits:
           $ref: "#/components/schemas/UserTeamLimits"
+        createdAt:
+          type: string
+          format: date-time
 
     UserTeamsResponse:
       type: object

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 { 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>
+        <MemberCard />
+      </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,9 +1,7 @@
 import { z } from 'zod'
 import { TeamSlugSchema } from '@/core/shared/schemas/team'
 
-export { TeamSlugSchema }
-
-export const TeamNameSchema = z
+const TeamNameSchema = z
   .string()
   .trim()
   .min(1, { message: 'Team name cannot be empty' })
@@ -13,11 +11,28 @@ export const TeamNameSchema = z
       '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,
+  TeamNameSchema,
+  TeamSlugSchema,
+  UpdateTeamNameSchema,
+}

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

@@ -26,7 +26,7 @@ export interface TeamsRepository {
   addTeamMember(email: string): Promise<RepoResult<void>>
   removeTeamMember(userId: string): Promise<RepoResult<void>>
   updateTeamProfilePictureUrl(
-    profilePictureUrl: string
+    profilePictureUrl: string | null
   ): Promise<RepoResult<DashboardComponents['schemas']['UpdateTeamResponse']>>
 }
 

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

@@ -1,6 +1,6 @@
 import 'server-only'
 
-import { secondsInDay, secondsInMinute } from 'date-fns/constants'
+import { secondsInMinute } from 'date-fns/constants'
 import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
 import { api } from '@/core/shared/clients/api'
 import { repoErrorFromHttp } from '@/core/shared/errors'
@@ -52,11 +52,7 @@ export function createUserTeamsRepository(
     async listUserTeams(): Promise<RepoResult<TeamModel[]>> {
       const teamsResult = await listApiUserTeams()
 
-      if (!teamsResult.ok) {
-        return teamsResult
-      }
-
-      return ok(teamsResult.data)
+      return teamsResult
     },
     async resolveTeamBySlug(
       slug: string,

src/core/server/actions/team-actions.ts

@@ -1,96 +1,13 @@
 'use server'
 
-import { fileTypeFromBuffer } from 'file-type'
-import { revalidatePath } from 'next/cache'
-import { after } from 'next/server'
-import { returnValidationErrors } from 'next-safe-action'
-import { z } from 'zod'
-import { zfd } from 'zod-form-data'
 import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
 import type { CreateTeamsResponse } from '@/core/modules/billing/models'
-import {
-  CreateTeamSchema,
-  UpdateTeamNameSchema,
-} from '@/core/modules/teams/schemas'
-import { createTeamsRepository } from '@/core/modules/teams/teams-repository.server'
-import {
-  authActionClient,
-  withTeamAuthedRequestRepository,
-  withTeamSlugResolution,
-} from '@/core/server/actions/client'
+import { CreateTeamSchema } from '@/core/modules/teams/schemas'
+import { authActionClient } from '@/core/server/actions/client'
 import {
   handleDefaultInfraError,
   returnServerError,
 } from '@/core/server/actions/utils'
-import { toActionErrorFromRepoError } from '@/core/server/adapters/errors'
-import { l, serializeErrorForLog } from '@/core/shared/clients/logger/logger'
-import { deleteFile, getFiles, uploadFile } from '@/core/shared/clients/storage'
-import { TeamSlugSchema } from '@/core/shared/schemas/team'
-
-const withTeamsRepository = withTeamAuthedRequestRepository(
-  createTeamsRepository,
-  (teamsRepository) => ({ teamsRepository })
-)
-
-export const updateTeamNameAction = authActionClient
-  .schema(UpdateTeamNameSchema)
-  .metadata({ actionName: 'updateTeamName' })
-  .use(withTeamSlugResolution)
-  .use(withTeamsRepository)
-  .action(async ({ parsedInput, ctx }) => {
-    const { name, teamSlug } = parsedInput
-    const result = await ctx.teamsRepository.updateTeamName(name)
-
-    if (!result.ok) {
-      return toActionErrorFromRepoError(result.error)
-    }
-
-    revalidatePath(`/dashboard/${teamSlug}/general`, 'page')
-
-    return result.data
-  })
-
-const AddTeamMemberSchema = z.object({
-  teamSlug: TeamSlugSchema,
-  email: z.email(),
-})
-
-export const addTeamMemberAction = authActionClient
-  .schema(AddTeamMemberSchema)
-  .metadata({ actionName: 'addTeamMember' })
-  .use(withTeamSlugResolution)
-  .use(withTeamsRepository)
-  .action(async ({ parsedInput, ctx }) => {
-    const { email, teamSlug } = parsedInput
-    const result = await ctx.teamsRepository.addTeamMember(email)
-
-    if (!result.ok) {
-      return toActionErrorFromRepoError(result.error)
-    }
-
-    revalidatePath(`/dashboard/${teamSlug}/general`, 'page')
-  })
-
-const RemoveTeamMemberSchema = z.object({
-  teamSlug: TeamSlugSchema,
-  userId: z.uuid(),
-})
-
-export const removeTeamMemberAction = authActionClient
-  .schema(RemoveTeamMemberSchema)
-  .metadata({ actionName: 'removeTeamMember' })
-  .use(withTeamSlugResolution)
-  .use(withTeamsRepository)
-  .action(async ({ parsedInput, ctx }) => {
-    const { userId, teamSlug } = parsedInput
-    const result = await ctx.teamsRepository.removeTeamMember(userId)
-
-    if (!result.ok) {
-      return toActionErrorFromRepoError(result.error)
-    }
-
-    revalidatePath(`/dashboard/${teamSlug}/general`, 'page')
-  })
 
 export const createTeamAction = authActionClient
   .schema(CreateTeamSchema)
@@ -123,100 +40,3 @@ export const createTeamAction = authActionClient
 
     return data
   })
-
-const UploadTeamProfilePictureSchema = zfd.formData(
-  z.object({
-    teamSlug: zfd.text(),
-    image: zfd.file(),
-  })
-)
-
-export const uploadTeamProfilePictureAction = authActionClient
-  .schema(UploadTeamProfilePictureSchema)
-  .metadata({ actionName: 'uploadTeamProfilePicture' })
-  .use(withTeamSlugResolution)
-  .use(withTeamsRepository)
-  .action(async ({ parsedInput, ctx }) => {
-    const { image, teamSlug } = parsedInput
-    const { teamId, teamsRepository } = ctx
-
-    const allowedTypes = ['image/jpeg', 'image/png']
-
-    if (!allowedTypes.includes(image.type)) {
-      return returnValidationErrors(UploadTeamProfilePictureSchema, {
-        image: { _errors: ['File must be JPG or PNG format'] },
-      })
-    }
-
-    const MAX_FILE_SIZE = 5 * 1024 * 1024
-
-    if (image.size > MAX_FILE_SIZE) {
-      return returnValidationErrors(UploadTeamProfilePictureSchema, {
-        image: { _errors: ['File size must be less than 5MB'] },
-      })
-    }
-
-    const arrayBuffer = await image.arrayBuffer()
-    const buffer = Buffer.from(arrayBuffer)
-
-    const fileType = await fileTypeFromBuffer(buffer)
-
-    if (!fileType) {
-      return returnValidationErrors(UploadTeamProfilePictureSchema, {
-        image: { _errors: ['Unable to determine file type'] },
-      })
-    }
-
-    const allowedMimeTypes = ['image/jpeg', 'image/png']
-    if (!allowedMimeTypes.includes(fileType.mime)) {
-      return returnValidationErrors(UploadTeamProfilePictureSchema, {
-        image: {
-          _errors: [
-            'Invalid file type. Only JPEG and PNG images are allowed. File appears to be: ' +
-              fileType.mime,
-          ],
-        },
-      })
-    }
-
-    const extension = fileType.ext
-    const fileName = `${Date.now()}.${extension}`
-    const storagePath = `teams/${teamId}/${fileName}`
-
-    const publicUrl = await uploadFile(buffer, storagePath, fileType.mime)
-
-    const result = await teamsRepository.updateTeamProfilePictureUrl(publicUrl)
-    if (!result.ok) {
-      return toActionErrorFromRepoError(result.error)
-    }
-
-    after(async () => {
-      try {
-        const currentFileName = fileName
-        const folderPath = `teams/${teamId}`
-        const files = await getFiles(folderPath)
-
-        for (const file of files) {
-          const filePath = file.name
-          if (filePath === `${folderPath}/${currentFileName}`) {
-            continue
-          }
-
-          await deleteFile(filePath)
-        }
-      } catch (cleanupError) {
-        l.warn({
-          key: 'upload_team_profile_picture_action:cleanup_error',
-          error: serializeErrorForLog(cleanupError),
-          team_id: teamId,
-          context: {
-            image: image.name,
-          },
-        })
-      }
-    })
-
-    revalidatePath(`/dashboard/${teamSlug}/general`, 'page')
-
-    return result.data
-  })