@tuturuuu/ui 0.19.0 → 0.20.1

package/src/components/ui/custom/workspace-access/workspace-access-member-row.tsx

@@ -2,6 +2,9 @@
 
 import {
   Crown,
+  Ellipsis,
+  Pencil,
+  Plus,
   ShieldUser,
   User as UserIcon,
   UserMinus,
@@ -12,18 +15,23 @@ import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
 import { getInitials } from '@tuturuuu/utils/name-helper';
 import moment from 'moment';
 import { useLocale, useTranslations } from 'next-intl';
 import {
   getAvailableRolesForMember,
   getMemberDisplayName,
+  shouldShowProtectedMemberStatus,
 } from './member-filter-utils';
 import type { WorkspaceAccessLabels, WorkspaceAccessRole } from './types';
 
@@ -35,12 +43,15 @@ type GuestContext = InternalApiEnhancedWorkspaceMember & {
 };
 
 type Props = {
+  canEditProfiles: boolean;
   canManageMembers: boolean;
   canManageRoles: boolean;
+  defaultAdminEnabled: boolean;
   isMutating: boolean;
   labels: WorkspaceAccessLabels;
   member: InternalApiEnhancedWorkspaceMember;
   onAssignRole: (payload: { roleId: string; userId: string }) => void;
+  onEditMemberProfile: (member: InternalApiEnhancedWorkspaceMember) => void;
   onRemoveMember: (payload: {
     email?: null | string;
     userId?: null | string;
@@ -50,12 +61,15 @@ type Props = {
 };
 
 export function WorkspaceAccessMemberRow({
+  canEditProfiles,
   canManageMembers,
   canManageRoles,
+  defaultAdminEnabled,
   isMutating,
   labels,
   member,
   onAssignRole,
+  onEditMemberProfile,
   onRemoveMember,
   onRemoveRole,
   roles,
@@ -67,6 +81,21 @@ export function WorkspaceAccessMemberRow({
   const memberName = getMemberDisplayName(member, t('common.unknown'));
   const guest = member as GuestContext;
   const canRemoveRoles = canManageRoles && memberId && !member.pending;
+  const canEditProfile =
+    canEditProfiles &&
+    canManageMembers &&
+    !guest.direct_board_guest &&
+    Boolean(memberId || member.email);
+  const inheritsAdministrator =
+    defaultAdminEnabled &&
+    !member.pending &&
+    !guest.direct_board_guest &&
+    member.workspace_member_type !== 'GUEST';
+  const hasActions =
+    Boolean(canRemoveRoles) ||
+    canEditProfile ||
+    (canManageMembers && !member.is_creator) ||
+    shouldShowProtectedMemberStatus({ isCreator: member.is_creator });
 
   const accent = member.pending
     ? 'before:bg-dynamic-orange'
@@ -78,11 +107,11 @@ export function WorkspaceAccessMemberRow({
 
   return (
     <article
-      className={`group relative overflow-hidden rounded-xl border bg-background pl-5 transition-all before:absolute before:inset-y-0 before:left-0 before:w-1 hover:border-foreground/20 hover:shadow-sm ${accent} ${member.pending ? 'border-dashed' : ''}`}
+      className={`group relative overflow-hidden rounded-xl border bg-background pl-4 transition-colors before:absolute before:inset-y-0 before:left-0 before:w-1 hover:border-foreground/20 sm:pl-5 ${accent} ${member.pending ? 'border-dashed' : ''}`}
     >
-      <div className="p-4 pl-0">
-        <div className="flex items-start gap-3">
-          <Avatar className="h-11 w-11 border border-border">
+      <div className="p-3 pl-0 sm:p-4 sm:pl-0">
+        <div className="flex items-start gap-2.5 sm:gap-3">
+          <Avatar className="size-10 border border-border sm:size-11">
             <AvatarImage src={member.avatar_url ?? undefined} />
             <AvatarFallback className="font-semibold">
               {member.display_name ? (
@@ -95,7 +124,9 @@ export function WorkspaceAccessMemberRow({
 
           <div className="min-w-0 flex-1">
             <div className="flex flex-wrap items-center gap-1.5">
-              <p className="truncate font-semibold text-base">{memberName}</p>
+              <p className="truncate font-semibold text-sm sm:text-base">
+                {memberName}
+              </p>
               {member.is_creator ? (
                 <Badge className="h-5 gap-1 border-dynamic-yellow/50 bg-dynamic-yellow/10 px-1.5 text-dynamic-yellow text-xs">
                   <Crown className="h-3 w-3" />
@@ -122,14 +153,134 @@ export function WorkspaceAccessMemberRow({
                 </Badge>
               ) : null}
             </div>
-            <p className="mt-0.5 truncate text-muted-foreground text-sm">
+            <p className="mt-0.5 truncate text-muted-foreground text-xs sm:text-sm">
               {member.email ||
                 (member.handle ? `@${member.handle}` : t('common.unknown'))}
             </p>
           </div>
+
+          {hasActions ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-8 shrink-0"
+                  disabled={isMutating}
+                  aria-label={t('common.actions')}
+                >
+                  <Ellipsis className="size-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                {canRemoveRoles ? (
+                  <>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>
+                        <Plus className="size-4" />
+                        {labels.assignRolePlaceholder}
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent className="w-52">
+                        {availableRoles.length === 0 ? (
+                          <DropdownMenuItem disabled>
+                            {labels.noAdditionalRoles}
+                          </DropdownMenuItem>
+                        ) : (
+                          availableRoles.map((role) => (
+                            <DropdownMenuItem
+                              key={role.id}
+                              onSelect={() =>
+                                onAssignRole({
+                                  roleId: role.id,
+                                  userId: memberId,
+                                })
+                              }
+                            >
+                              <ShieldUser className="size-4" />
+                              {role.name}
+                            </DropdownMenuItem>
+                          ))
+                        )}
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+
+                    {member.roles.length > 0 ? (
+                      <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>
+                          <X className="size-4" />
+                          {t('common.remove')}
+                        </DropdownMenuSubTrigger>
+                        <DropdownMenuSubContent className="w-52">
+                          {member.roles.map((role) => (
+                            <DropdownMenuItem
+                              key={role.id}
+                              variant="destructive"
+                              onSelect={() =>
+                                onRemoveRole({
+                                  roleId: role.id,
+                                  userId: memberId,
+                                })
+                              }
+                            >
+                              <X className="size-4" />
+                              {role.name}
+                            </DropdownMenuItem>
+                          ))}
+                        </DropdownMenuSubContent>
+                      </DropdownMenuSub>
+                    ) : null}
+                  </>
+                ) : null}
+
+                {canEditProfile ? (
+                  <>
+                    {canRemoveRoles ? <DropdownMenuSeparator /> : null}
+                    <DropdownMenuItem
+                      onSelect={() => onEditMemberProfile(member)}
+                    >
+                      <Pencil className="size-4" />
+                      {t('ws-members.profile_display_name')}
+                    </DropdownMenuItem>
+                  </>
+                ) : null}
+
+                {member.is_creator ? (
+                  <>
+                    {canRemoveRoles || canEditProfile ? (
+                      <DropdownMenuSeparator />
+                    ) : null}
+                    <DropdownMenuLabel className="flex items-center gap-2 text-muted-foreground">
+                      <ShieldUser className="size-4" />
+                      {labels.protectedMemberLabel}
+                    </DropdownMenuLabel>
+                  </>
+                ) : null}
+
+                {canManageMembers && !member.is_creator ? (
+                  <>
+                    {canRemoveRoles || canEditProfile ? (
+                      <DropdownMenuSeparator />
+                    ) : null}
+                    <DropdownMenuItem
+                      variant="destructive"
+                      onSelect={() =>
+                        onRemoveMember({
+                          email: member.email,
+                          userId: member.id,
+                        })
+                      }
+                    >
+                      <UserMinus className="size-4" />
+                      {labels.removeMemberAction}
+                    </DropdownMenuItem>
+                  </>
+                ) : null}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
         </div>
 
-        <div className="mt-3 flex flex-wrap gap-1.5">
+        <div className="mt-2.5 flex flex-wrap gap-1.5 sm:mt-3">
           {member.roles.length > 0 ? (
             member.roles.map((role) => (
               <Badge
@@ -137,20 +288,13 @@ export function WorkspaceAccessMemberRow({
                 className="h-5 gap-1 border-dynamic-purple/40 bg-dynamic-purple/10 px-1.5 text-dynamic-purple text-xs"
               >
                 <span>{role.name}</span>
-                {canRemoveRoles ? (
-                  <button
-                    type="button"
-                    className="rounded-full p-0.5 transition-colors hover:bg-dynamic-purple/20"
-                    onClick={() =>
-                      onRemoveRole({ roleId: role.id, userId: memberId })
-                    }
-                    aria-label={t('common.delete')}
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                ) : null}
               </Badge>
             ))
+          ) : inheritsAdministrator ? (
+            <Badge className="h-5 gap-1 border-dynamic-green/40 bg-dynamic-green/10 px-1.5 text-dynamic-green text-xs">
+              <ShieldUser className="size-3" />
+              {t('ws-roles.admin')}
+            </Badge>
           ) : (
             <Badge variant="outline" className="h-5 px-1.5 text-xs">
               {labels.noRolesLabel}
@@ -159,7 +303,7 @@ export function WorkspaceAccessMemberRow({
         </div>
 
         {guest.direct_board_guest ? (
-          <div className="mt-3 rounded-lg border border-dynamic-blue/20 bg-dynamic-blue/5 p-3 text-sm">
+          <div className="mt-3 rounded-lg border border-dynamic-blue/20 bg-dynamic-blue/5 p-2.5 text-sm sm:p-3">
             <div className="font-medium text-dynamic-blue">
               {t('ws-members.direct_board_guest_scope_title')}
             </div>
@@ -185,7 +329,7 @@ export function WorkspaceAccessMemberRow({
           </div>
         ) : null}
 
-        <div className="mt-3 flex flex-col gap-3 border-border border-t pt-3 text-sm md:flex-row md:items-center md:justify-between">
+        <div className="mt-3 border-border border-t pt-3 text-sm">
           {member.created_at ? (
             <div className="text-muted-foreground text-xs">
               <span>
@@ -202,55 +346,6 @@ export function WorkspaceAccessMemberRow({
           ) : (
             <span />
           )}
-
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-            {canRemoveRoles ? (
-              <Select
-                onValueChange={(roleId) =>
-                  onAssignRole({ roleId, userId: memberId })
-                }
-              >
-                <SelectTrigger className="h-9 min-w-[180px]">
-                  <SelectValue placeholder={labels.assignRolePlaceholder} />
-                </SelectTrigger>
-                <SelectContent>
-                  {availableRoles.length === 0 ? (
-                    <SelectItem value="__no_roles__" disabled>
-                      {labels.noAdditionalRoles}
-                    </SelectItem>
-                  ) : (
-                    availableRoles.map((role) => (
-                      <SelectItem key={role.id} value={role.id}>
-                        {role.name}
-                      </SelectItem>
-                    ))
-                  )}
-                </SelectContent>
-              </Select>
-            ) : null}
-
-            {canManageMembers && !member.is_creator ? (
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={isMutating}
-                onClick={() =>
-                  onRemoveMember({
-                    email: member.email,
-                    userId: member.pending ? null : member.id,
-                  })
-                }
-              >
-                <UserMinus className="mr-2 h-4 w-4" />
-                {labels.removeMemberAction}
-              </Button>
-            ) : (
-              <div className="inline-flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-muted-foreground text-xs">
-                <ShieldUser className="h-3.5 w-3.5" />
-                {labels.protectedMemberLabel}
-              </div>
-            )}
-          </div>
         </div>
       </div>
     </article>

package/src/components/ui/custom/workspace-access/workspace-access-members.tsx

@@ -8,13 +8,16 @@ import type { WorkspaceAccessLabels, WorkspaceAccessRole } from './types';
 import { WorkspaceAccessMemberRow } from './workspace-access-member-row';
 
 type Props = {
+  canEditProfiles: boolean;
   canManageMembers: boolean;
   canManageRoles: boolean;
+  defaultAdminEnabled: boolean;
   isLoading: boolean;
   isMutating: boolean;
   labels: WorkspaceAccessLabels;
   members: InternalApiEnhancedWorkspaceMember[];
   onAssignRole: (payload: { roleId: string; userId: string }) => void;
+  onEditMemberProfile: (member: InternalApiEnhancedWorkspaceMember) => void;
   onRemoveMember: (payload: {
     email?: null | string;
     userId?: null | string;
@@ -26,13 +29,16 @@ type Props = {
 };
 
 export function WorkspaceAccessMembers({
+  canEditProfiles,
   canManageMembers,
   canManageRoles,
+  defaultAdminEnabled,
   isLoading,
   isMutating,
   labels,
   members,
   onAssignRole,
+  onEditMemberProfile,
   onRemoveMember,
   onRemoveRole,
   roles,
@@ -43,7 +49,7 @@ export function WorkspaceAccessMembers({
 
   if (isLoading) {
     return (
-      <div className="grid gap-4 lg:grid-cols-2">
+      <div className="grid gap-3 lg:grid-cols-2">
         <Skeleton className="h-48 rounded-xl" />
         <Skeleton className="h-48 rounded-xl" />
         <Skeleton className="h-48 rounded-xl" />
@@ -70,16 +76,19 @@ export function WorkspaceAccessMembers({
   }
 
   return (
-    <div className="grid gap-4 lg:grid-cols-2">
+    <div className="grid gap-3 lg:grid-cols-2">
       {members.map((member) => (
         <WorkspaceAccessMemberRow
           key={`${member.id ?? member.email ?? member.handle}`}
+          canEditProfiles={canEditProfiles}
           canManageMembers={canManageMembers}
           canManageRoles={canManageRoles}
+          defaultAdminEnabled={defaultAdminEnabled}
           isMutating={isMutating}
           labels={labels}
           member={member}
           onAssignRole={onAssignRole}
+          onEditMemberProfile={onEditMemberProfile}
           onRemoveMember={onRemoveMember}
           onRemoveRole={onRemoveRole}
           roles={roles}

package/src/components/ui/custom/workspace-access/workspace-access-page-header.tsx

@@ -51,25 +51,25 @@ export function WorkspaceAccessPageHeader({
   ];
 
   return (
-    <section className="rounded-xl border border-border bg-background">
-      <div className="flex flex-col gap-6 p-6 lg:flex-row lg:items-start lg:justify-between">
-        <div className="flex min-w-0 gap-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-dynamic-blue/30 bg-dynamic-blue/10 text-dynamic-blue">
+    <section className="overflow-hidden rounded-xl border border-border bg-background">
+      <div className="flex flex-col gap-4 p-4 sm:p-6 lg:flex-row lg:items-start lg:justify-between">
+        <div className="flex min-w-0 gap-3 sm:gap-4">
+          <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-dynamic-blue/30 bg-dynamic-blue/10 text-dynamic-blue sm:size-11">
             <Users className="h-5 w-5" />
           </div>
           <div className="min-w-0">
             <div className="flex items-center gap-2">
-              <h1 className="truncate font-bold text-2xl tracking-tight">
+              <h1 className="truncate font-bold text-xl tracking-tight sm:text-2xl">
                 {mode === 'cms'
                   ? t('external-projects.settings.members_title')
                   : t('workspace-settings-layout.members')}
               </h1>
-              <span className="inline-flex items-center gap-1 rounded-full border border-dynamic-purple/30 bg-dynamic-purple/10 px-2 py-0.5 font-medium text-dynamic-purple text-xs">
+              <span className="hidden items-center gap-1 rounded-full border border-dynamic-purple/30 bg-dynamic-purple/10 px-2 py-0.5 font-medium text-dynamic-purple text-xs sm:inline-flex">
                 <ShieldCheck className="h-3 w-3" />
                 {t('ws-roles.plural')}
               </span>
             </div>
-            <p className="mt-1.5 max-w-2xl text-muted-foreground text-sm leading-6">
+            <p className="mt-1 max-w-2xl text-muted-foreground text-sm leading-5 sm:mt-1.5 sm:leading-6">
               {mode === 'cms'
                 ? t('external-projects.settings.members_description')
                 : t('ws-members.description')}
@@ -85,21 +85,21 @@ export function WorkspaceAccessPageHeader({
           </div>
         </div>
 
-        <div className="grid shrink-0 grid-cols-3 divide-x divide-border overflow-hidden rounded-lg border border-border bg-foreground/[0.02]">
+        <div className="grid w-full shrink-0 grid-cols-3 divide-x divide-border overflow-hidden rounded-lg border border-border bg-foreground/[0.02] lg:w-auto">
           {stats.map((stat) => (
             <div
               key={stat.label}
-              className="flex flex-col gap-1 px-4 py-3 text-center"
+              className="flex min-w-0 flex-col gap-0.5 px-2 py-2.5 text-center sm:gap-1 sm:px-4 sm:py-3"
             >
               <span
                 className={`inline-flex items-center justify-center gap-1.5 ${stat.accent}`}
               >
                 {stat.icon}
-                <span className="font-bold text-foreground text-xl tabular-nums">
+                <span className="font-bold text-foreground text-lg tabular-nums sm:text-xl">
                   {stat.value}
                 </span>
               </span>
-              <span className="text-muted-foreground text-xs">
+              <span className="truncate text-[11px] text-muted-foreground sm:text-xs">
                 {stat.label}
               </span>
             </div>