@tuturuuu/ui 0.26.1 → 0.27.0

package/src/components/ui/custom/workspace-access/workspace-access-invitation-role-menu.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { ChevronDown, Plus, ShieldUser, X } from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import { useTranslations } from 'next-intl';
+import type { WorkspaceAccessRole } from './types';
+
+type Props = {
+  email?: null | string;
+  isMutating: boolean;
+  onUpdate: (payload: {
+    email?: null | string;
+    roleIds: string[];
+    userId?: null | string;
+  }) => void;
+  assignedRoles: Array<Pick<WorkspaceAccessRole, 'id' | 'name'>>;
+  roles: Array<Pick<WorkspaceAccessRole, 'id' | 'name'>>;
+  userId?: null | string;
+};
+
+export function WorkspaceAccessInvitationRoleMenu({
+  email,
+  isMutating,
+  onUpdate,
+  assignedRoles,
+  roles,
+  userId,
+}: Props) {
+  const t = useTranslations();
+  const assignedRoleIds = new Set(assignedRoles.map((role) => role.id));
+  const updateRole = (roleId: string) => {
+    const roleIds = assignedRoleIds.has(roleId)
+      ? assignedRoles
+          .filter((role) => role.id !== roleId)
+          .map((role) => role.id)
+      : [...assignedRoles.map((role) => role.id), roleId];
+    onUpdate({ email, roleIds, userId });
+  };
+
+  return (
+    <div className="space-y-2">
+      {assignedRoles.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {assignedRoles.map((role) => (
+            <Badge
+              key={role.id}
+              className="h-6 gap-1 border-dynamic-purple/35 bg-dynamic-purple/10 px-2 text-dynamic-purple text-xs"
+            >
+              <ShieldUser className="size-3" />
+              {role.name}
+            </Badge>
+          ))}
+        </div>
+      ) : null}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className={`h-7 max-w-full rounded-full px-2.5 text-xs active:scale-[0.98] ${assignedRoles.length > 0 ? 'border-dynamic-purple/40 bg-dynamic-purple/10 text-dynamic-purple hover:bg-dynamic-purple/15 hover:text-dynamic-purple' : 'border-dashed text-muted-foreground hover:text-foreground'}`}
+            disabled={isMutating}
+          >
+            {assignedRoles.length > 0 ? (
+              <ShieldUser className="size-3.5 shrink-0" />
+            ) : (
+              <Plus className="size-3.5 shrink-0" />
+            )}
+            <span className="truncate">
+              {assignedRoles.length > 0
+                ? t('ws-members.roles_selected', {
+                    count: assignedRoles.length,
+                  })
+                : t('ws-members.assign_invitation_role')}
+            </span>
+            <ChevronDown className="size-3 shrink-0 opacity-60" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-60">
+          <DropdownMenuLabel className="flex items-center gap-2">
+            <ShieldUser className="size-4 text-muted-foreground" />
+            {t('ws-members.invitation_role')}
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {roles.map((option) => (
+            <DropdownMenuCheckboxItem
+              checked={assignedRoleIds.has(option.id)}
+              key={option.id}
+              onSelect={(event) => {
+                event.preventDefault();
+                updateRole(option.id);
+              }}
+            >
+              <ShieldUser className="size-4" />
+              <span className="flex-1 truncate">{option.name}</span>
+            </DropdownMenuCheckboxItem>
+          ))}
+          {assignedRoles.length > 0 ? (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => onUpdate({ email, roleIds: [], userId })}
+              >
+                <X className="size-4" />
+                {t('ws-members.clear_all_roles')}
+              </DropdownMenuItem>
+            </>
+          ) : null}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <p className="text-muted-foreground text-xs leading-4">
+        {t('ws-members.invitation_role_helper')}
+      </p>
+    </div>
+  );
+}

package/src/components/ui/custom/workspace-access/workspace-access-invite-access-picker.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { CreditCard, ShieldUser, UserPlus } from '@tuturuuu/icons';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
+import { useTranslations } from 'next-intl';
+
+type AccessPreset = 'guest' | 'member' | 'pos_operator';
+
+const OPTIONS: Array<{
+  descriptionKey: string;
+  icon: typeof UserPlus;
+  labelKey: string;
+  shortLabelKey: string;
+  value: AccessPreset;
+}> = [
+  {
+    descriptionKey: 'ws-members.invite_membership_member_description',
+    icon: UserPlus,
+    labelKey: 'ws-members.invite_membership_member',
+    shortLabelKey: 'ws-members.invite_access_member_tab',
+    value: 'member',
+  },
+  {
+    descriptionKey: 'ws-members.invite_membership_guest_description',
+    icon: ShieldUser,
+    labelKey: 'ws-members.invite_membership_guest',
+    shortLabelKey: 'ws-members.invite_access_guest_tab',
+    value: 'guest',
+  },
+  {
+    descriptionKey: 'ws-members.pos_operator_description',
+    icon: CreditCard,
+    labelKey: 'ws-members.invite_membership_pos_operator',
+    shortLabelKey: 'ws-members.invite_access_pos_tab',
+    value: 'pos_operator',
+  },
+];
+
+export function WorkspaceAccessInviteAccessPicker({
+  canManageRoles,
+  onChange,
+  value,
+}: {
+  canManageRoles: boolean;
+  onChange: (value: AccessPreset) => void;
+  value: AccessPreset;
+}) {
+  const t = useTranslations() as (key: string) => string;
+  const options = canManageRoles
+    ? OPTIONS
+    : OPTIONS.filter((option) => option.value !== 'pos_operator');
+
+  return (
+    <div className="space-y-2">
+      <p className="font-medium text-sm">
+        {t('ws-members.invite_membership_label')}
+      </p>
+      <Tabs
+        value={value}
+        onValueChange={(nextValue) => onChange(nextValue as AccessPreset)}
+      >
+        <TabsList
+          aria-label={t('ws-members.invite_membership_label')}
+          className={`grid h-auto w-full gap-1 rounded-xl bg-muted/60 p-1 ${canManageRoles ? 'grid-cols-3' : 'grid-cols-2'}`}
+        >
+          {options.map((option) => {
+            const Icon = option.icon;
+
+            return (
+              <TabsTrigger
+                key={option.value}
+                value={option.value}
+                className="min-h-10 min-w-0 rounded-lg px-2.5 py-2 data-[state=active]:text-dynamic-blue"
+              >
+                <Icon className="size-4" />
+                <span className="truncate">{t(option.shortLabelKey)}</span>
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+
+        {options.map((option) => {
+          const Icon = option.icon;
+
+          return (
+            <TabsContent
+              key={option.value}
+              value={option.value}
+              className="mt-1 rounded-xl border bg-background px-3.5 py-3"
+            >
+              <div className="flex items-start gap-3">
+                <span className="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-muted/30 text-dynamic-blue">
+                  <Icon className="size-4" />
+                </span>
+                <div className="min-w-0">
+                  <p className="font-medium text-sm">{t(option.labelKey)}</p>
+                  <p className="mt-0.5 text-muted-foreground text-xs leading-5">
+                    {t(option.descriptionKey)}
+                  </p>
+                </div>
+              </div>
+            </TabsContent>
+          );
+        })}
+      </Tabs>
+    </div>
+  );
+}

package/src/components/ui/custom/workspace-access/workspace-access-invite-dialog.test.tsx

@@ -0,0 +1,134 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { WorkspaceAccessInviteDialog } from './workspace-access-invite-dialog';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, number>) =>
+    values?.count === undefined ? key : `${values.count} ${key}`,
+}));
+
+describe('WorkspaceAccessInviteDialog', () => {
+  it('selects multiple workspace roles before the invitation is sent', () => {
+    const props = {
+      accessPreset: 'member',
+      canManageRoles: true,
+      confirmDefaultAdminMigration: false,
+      defaultAdminEnabled: false,
+      emails: 'editor@example.com',
+      isSubmitting: false,
+      joinedMemberCount: 1,
+      noRoleLabel: 'No assigned roles',
+      onAccessPresetChange: vi.fn(),
+      onConfirmDefaultAdminMigrationChange: vi.fn(),
+      onEmailsChange: vi.fn(),
+      onOpenChange: vi.fn(),
+      onRoleIdsChange: vi.fn(),
+      onSubmit: vi.fn(),
+      open: true,
+      roleIds: [],
+      roles: [
+        { id: 'role-editor', name: 'Editor' },
+        { id: 'role-reviewer', name: 'Reviewer' },
+      ],
+    } as ComponentProps<typeof WorkspaceAccessInviteDialog> & {
+      noRoleLabel: string;
+      onRoleIdsChange: (roleIds: string[]) => void;
+      roleIds: string[];
+      roles: Array<{ id: string; name: string }>;
+    };
+
+    const { rerender } = render(<WorkspaceAccessInviteDialog {...props} />);
+
+    expect(
+      screen.getByRole('tab', {
+        name: 'ws-members.invite_access_member_tab',
+      })
+    ).toHaveAttribute('data-state', 'active');
+    expect(screen.getByText('ws-members.role-placeholder')).toBeDefined();
+    expect(
+      screen.getByPlaceholderText('ws-members.invite_roles_search')
+    ).toBeDefined();
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Editor' }));
+    expect(props.onRoleIdsChange).toHaveBeenLastCalledWith(['role-editor']);
+
+    rerender(
+      <WorkspaceAccessInviteDialog {...props} roleIds={['role-editor']} />
+    );
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Reviewer' }));
+    expect(props.onRoleIdsChange).toHaveBeenLastCalledWith([
+      'role-editor',
+      'role-reviewer',
+    ]);
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Editor' }));
+    expect(props.onRoleIdsChange).toHaveBeenLastCalledWith([]);
+
+    fireEvent.mouseDown(
+      screen.getByRole('tab', {
+        name: 'ws-members.invite_access_guest_tab',
+      })
+    );
+    expect(props.onAccessPresetChange).toHaveBeenLastCalledWith('guest');
+
+    rerender(
+      <WorkspaceAccessInviteDialog
+        {...props}
+        accessPreset="guest"
+        roleIds={[]}
+      />
+    );
+    expect(screen.queryByRole('checkbox', { name: 'Editor' })).toBeNull();
+  });
+
+  it('filters roles, clears the selection, and lets the role section collapse', () => {
+    const onRoleIdsChange = vi.fn();
+
+    render(
+      <WorkspaceAccessInviteDialog
+        accessPreset="member"
+        canManageRoles
+        confirmDefaultAdminMigration={false}
+        defaultAdminEnabled={false}
+        emails="editor@example.com"
+        isSubmitting={false}
+        joinedMemberCount={1}
+        noRoleLabel="No assigned roles"
+        onAccessPresetChange={vi.fn()}
+        onConfirmDefaultAdminMigrationChange={vi.fn()}
+        onEmailsChange={vi.fn()}
+        onOpenChange={vi.fn()}
+        onRoleIdsChange={onRoleIdsChange}
+        onSubmit={vi.fn()}
+        open
+        roleIds={['role-editor', 'role-reviewer']}
+        roles={[
+          { id: 'role-editor', name: 'Editor' },
+          { id: 'role-reviewer', name: 'Reviewer' },
+        ]}
+      />
+    );
+
+    fireEvent.change(
+      screen.getByPlaceholderText('ws-members.invite_roles_search'),
+      { target: { value: 'review' } }
+    );
+    expect(screen.queryByRole('checkbox', { name: 'Editor' })).toBeNull();
+    expect(screen.getByRole('checkbox', { name: 'Reviewer' })).toBeDefined();
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'ws-members.clear_all_roles' })
+    );
+    expect(onRoleIdsChange).toHaveBeenLastCalledWith([]);
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /ws-members\.role-placeholder/,
+      })
+    );
+    expect(
+      screen.queryByPlaceholderText('ws-members.invite_roles_search')
+    ).toBeNull();
+  });
+});

package/src/components/ui/custom/workspace-access/workspace-access-invite-dialog.tsx

@@ -1,15 +1,8 @@
 'use client';
 
-import {
-  CreditCard,
-  MailPlus,
-  ShieldCheck,
-  TriangleAlert,
-  UserPlus,
-} from '@tuturuuu/icons';
+import { MailPlus, UserPlus } from '@tuturuuu/icons';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
-import { Checkbox } from '@tuturuuu/ui/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -19,16 +12,12 @@ import {
   DialogTitle,
 } from '@tuturuuu/ui/dialog';
 import { Label } from '@tuturuuu/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
 import { Textarea } from '@tuturuuu/ui/textarea';
 import { useTranslations } from 'next-intl';
 import { parseInviteEmails } from './member-filter-utils';
+import { WorkspaceAccessInviteAccessPicker } from './workspace-access-invite-access-picker';
+import { WorkspaceAccessInvitePosPanel } from './workspace-access-invite-pos-panel';
+import { WorkspaceAccessInviteRolePicker } from './workspace-access-invite-role-picker';
 
 type Props = {
   accessPreset: 'guest' | 'member' | 'pos_operator';
@@ -38,12 +27,16 @@ type Props = {
   emails: string;
   isSubmitting: boolean;
   joinedMemberCount: number;
+  noRoleLabel: string;
   onAccessPresetChange: (value: 'guest' | 'member' | 'pos_operator') => void;
   onConfirmDefaultAdminMigrationChange: (value: boolean) => void;
   onEmailsChange: (value: string) => void;
   onOpenChange: (open: boolean) => void;
+  onRoleIdsChange: (roleIds: string[]) => void;
   onSubmit: () => void;
   open: boolean;
+  roleIds: string[];
+  roles: Array<{ id: string; name: string }>;
 };
 
 export function WorkspaceAccessInviteDialog({
@@ -54,19 +47,32 @@ export function WorkspaceAccessInviteDialog({
   emails,
   isSubmitting,
   joinedMemberCount,
+  noRoleLabel,
   onAccessPresetChange,
   onConfirmDefaultAdminMigrationChange,
   onEmailsChange,
   onOpenChange,
+  onRoleIdsChange,
   onSubmit,
   open,
+  roleIds,
+  roles,
 }: Props) {
-  const t = useTranslations() as (key: string) => string;
+  const t = useTranslations();
   const count = parseInviteEmails(emails).length;
+  const selectedRoleNames = roles
+    .filter((role) => roleIds.includes(role.id))
+    .map((role) => role.name);
+  const accessSummary =
+    accessPreset === 'member'
+      ? selectedRoleNames.length > 0
+        ? `${t('ws-members.invite_access_member_tab')} · ${selectedRoleNames.join(', ')}`
+        : `${t('ws-members.invite_access_member_tab')} · ${t('ws-members.no_roles_assigned')}`
+      : t(`ws-members.invite_membership_${accessPreset}`);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100%-1rem)] max-w-none flex-col gap-0 overflow-hidden rounded-b-none p-0 max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:translate-x-0 max-sm:translate-y-0 sm:max-h-[min(88dvh,52rem)] sm:max-w-xl sm:rounded-lg">
+      <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100%-1rem)] max-w-none flex-col gap-0 overflow-hidden rounded-b-none p-0 max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:translate-x-0 max-sm:translate-y-0 sm:max-h-[min(90dvh,54rem)] sm:max-w-4xl sm:rounded-2xl">
         <DialogHeader className="shrink-0 gap-0 border-b p-4 pr-12 text-left sm:p-6 sm:pr-12">
           <div className="flex items-start gap-3">
             <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-dynamic-blue/25 bg-dynamic-blue/10 text-dynamic-blue">
@@ -81,114 +87,89 @@ export function WorkspaceAccessInviteDialog({
           </div>
         </DialogHeader>
 
-        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain p-4 sm:p-6">
-          <div className="grid gap-2">
-            <Label htmlFor="workspace-access-invite-emails">
-              {t('ws-members.invite_member')}
-            </Label>
-            <Textarea
-              id="workspace-access-invite-emails"
-              rows={5}
-              value={emails}
-              onChange={(event) => onEmailsChange(event.target.value)}
-              placeholder={'one@example.com\ntwo@example.com'}
-              className="min-h-28 resize-y"
-            />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="workspace-access-invite-membership">
-              {t('ws-members.invite_membership_label')}
-            </Label>
-            <Select
-              value={accessPreset}
-              onValueChange={(value) =>
-                onAccessPresetChange(
-                  value as 'guest' | 'member' | 'pos_operator'
-                )
-              }
-            >
-              <SelectTrigger
-                id="workspace-access-invite-membership"
-                className="w-full"
-              >
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="member">
-                  {t('ws-members.invite_membership_member')}
-                </SelectItem>
-                <SelectItem value="guest">
-                  {t('ws-members.invite_membership_guest')}
-                </SelectItem>
-                <SelectItem value="pos_operator" disabled={!canManageRoles}>
-                  {t('ws-members.invite_membership_pos_operator')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          {accessPreset === 'pos_operator' ? (
-            <div className="space-y-3 rounded-xl border border-dynamic-blue/25 bg-dynamic-blue/5 p-3.5 sm:p-4">
-              <div className="flex items-start gap-3">
-                <div className="mt-0.5 rounded-lg border border-dynamic-blue/20 bg-background p-2 text-dynamic-blue">
-                  <CreditCard className="h-4 w-4" />
-                </div>
-                <div className="min-w-0 space-y-1">
-                  <p className="font-medium text-sm">
-                    {t('ws-members.pos_operator_title')}
-                  </p>
-                  <p className="text-muted-foreground text-sm leading-5">
-                    {t('ws-members.pos_operator_description')}
-                  </p>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+          <div className="grid lg:grid-cols-[minmax(0,1fr)_minmax(22rem,1fr)] lg:divide-x">
+            <section className="space-y-4 p-4 sm:p-6">
+              <div className="flex items-center gap-2">
+                <span className="flex size-6 items-center justify-center rounded-full bg-foreground font-semibold text-background text-xs">
+                  1
+                </span>
+                <h3 className="font-semibold text-sm">
+                  {t('ws-members.invite_recipients_title')}
+                </h3>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="workspace-access-invite-emails">
+                  {t('ws-members.invite_emails_label')}
+                </Label>
+                <Textarea
+                  id="workspace-access-invite-emails"
+                  rows={7}
+                  value={emails}
+                  onChange={(event) => onEmailsChange(event.target.value)}
+                  placeholder={'one@example.com\ntwo@example.com'}
+                  className="min-h-40 resize-y rounded-xl bg-muted/20 font-mono text-sm leading-6"
+                />
+                <div className="flex items-center justify-between gap-3 text-muted-foreground text-xs">
+                  <span>{t('ws-members.invite_emails_helper')}</span>
+                  <Badge variant="outline" className="rounded-full">
+                    {t('ws-members.recipients_count', { count })}
+                  </Badge>
                 </div>
               </div>
+            </section>
 
-              <div className="grid gap-2 sm:grid-cols-2">
-                {defaultAdminEnabled ? (
-                  <div className="flex items-center gap-2 rounded-lg border bg-background/70 p-3 text-sm">
-                    <ShieldCheck className="h-4 w-4 text-dynamic-green" />
-                    <span>
-                      {joinedMemberCount}{' '}
-                      {t('ws-members.pos_operator_existing_members')}
-                    </span>
-                  </div>
-                ) : null}
-                <div className="flex items-center gap-2 rounded-lg border bg-background/70 p-3 text-sm">
-                  <CreditCard className="h-4 w-4 text-dynamic-blue" />
-                  <span>{t('ws-members.pos_operator_only_permission')}</span>
-                </div>
+            <section className="space-y-5 bg-muted/10 p-4 sm:p-6">
+              <div className="flex items-center gap-2">
+                <span className="flex size-6 items-center justify-center rounded-full bg-foreground font-semibold text-background text-xs">
+                  2
+                </span>
+                <h3 className="font-semibold text-sm">
+                  {t('ws-members.invite_access_title')}
+                </h3>
               </div>
 
-              {defaultAdminEnabled ? (
-                <div className="flex items-start gap-2 rounded-lg border border-dynamic-orange/25 bg-dynamic-orange/5 p-3 text-sm">
-                  <TriangleAlert className="mt-0.5 h-4 w-4 shrink-0 text-dynamic-orange" />
-                  <p className="text-muted-foreground leading-5">
-                    {t('ws-members.pos_operator_admin_migration_note')}
-                  </p>
-                </div>
+              <WorkspaceAccessInviteAccessPicker
+                canManageRoles={canManageRoles}
+                onChange={onAccessPresetChange}
+                value={accessPreset}
+              />
+
+              {canManageRoles && accessPreset === 'member' ? (
+                <WorkspaceAccessInviteRolePicker
+                  noRoleLabel={noRoleLabel}
+                  onChange={onRoleIdsChange}
+                  roleIds={roleIds}
+                  roles={roles}
+                />
               ) : null}
 
-              <label className="flex cursor-pointer items-start gap-3 rounded-lg border bg-background p-3">
-                <Checkbox
-                  checked={confirmDefaultAdminMigration}
-                  className="mt-0.5"
-                  onCheckedChange={(checked) =>
-                    onConfirmDefaultAdminMigrationChange(checked === true)
+              {accessPreset === 'pos_operator' ? (
+                <WorkspaceAccessInvitePosPanel
+                  confirmDefaultAdminMigration={confirmDefaultAdminMigration}
+                  defaultAdminEnabled={defaultAdminEnabled}
+                  joinedMemberCount={joinedMemberCount}
+                  onConfirmDefaultAdminMigrationChange={
+                    onConfirmDefaultAdminMigrationChange
                   }
                 />
-                <span className="text-sm leading-5">
-                  {t('ws-members.pos_operator_confirmation')}
-                </span>
-              </label>
-            </div>
-          ) : null}
+              ) : null}
+            </section>
+          </div>
         </div>
 
         <DialogFooter className="grid shrink-0 grid-cols-[auto_1fr] items-center gap-3 border-t bg-muted/20 p-3 sm:flex sm:p-4">
-          <Badge variant="secondary" className="rounded-full">
-            {count} {t('ws-members.pending_invitations').toLowerCase()}
-          </Badge>
+          <div className="min-w-0">
+            <p className="font-medium text-sm">
+              {t('ws-members.recipients_count', { count })}
+            </p>
+            <p
+              className="truncate text-muted-foreground text-xs"
+              title={accessSummary}
+            >
+              {accessSummary}
+            </p>
+          </div>
           <Button
             className="min-w-0"
             disabled={