@tuturuuu/ui 0.6.2 → 0.8.0

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

@@ -5,6 +5,7 @@ import {
   ShieldUser,
   User as UserIcon,
   UserMinus,
+  X,
 } from '@tuturuuu/icons';
 import type { InternalApiEnhancedWorkspaceMember } from '@tuturuuu/types';
 import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
@@ -26,6 +27,13 @@ import {
 } from './member-filter-utils';
 import type { WorkspaceAccessLabels, WorkspaceAccessRole } from './types';
 
+type GuestContext = InternalApiEnhancedWorkspaceMember & {
+  direct_board_guest?: boolean;
+  guest_board_count?: number;
+  guest_board_names?: string[];
+  guest_highest_permission?: 'edit' | 'view' | null;
+};
+
 type Props = {
   canManageMembers: boolean;
   canManageRoles: boolean;
@@ -57,191 +65,192 @@ export function WorkspaceAccessMemberRow({
   const memberId = member.id ?? null;
   const availableRoles = getAvailableRolesForMember(member, roles);
   const memberName = getMemberDisplayName(member, t('common.unknown'));
-  const guestContext = member as InternalApiEnhancedWorkspaceMember & {
-    direct_board_guest?: boolean;
-    guest_board_count?: number;
-    guest_board_names?: string[];
-    guest_highest_permission?: 'edit' | 'view' | null;
-  };
+  const guest = member as GuestContext;
+  const canRemoveRoles = canManageRoles && memberId && !member.pending;
+
+  const accent = member.pending
+    ? 'before:bg-dynamic-orange'
+    : guest.direct_board_guest || member.workspace_member_type === 'GUEST'
+      ? 'before:bg-dynamic-blue'
+      : member.is_creator
+        ? 'before:bg-dynamic-yellow'
+        : 'before:bg-transparent';
 
   return (
     <article
-      className={`relative rounded-lg border p-4 transition-colors ${
-        member.pending
-          ? 'border-dashed bg-transparent'
-          : 'bg-primary-foreground/20 hover:bg-primary-foreground/30'
-      }`}
+      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' : ''}`}
     >
-      <div className="flex items-start gap-3">
-        <Avatar>
-          <AvatarImage src={member.avatar_url ?? undefined} />
-          <AvatarFallback className="font-semibold">
-            {member.display_name ? (
-              getInitials(member.display_name)
-            ) : (
-              <UserIcon className="h-5 w-5" />
-            )}
-          </AvatarFallback>
-        </Avatar>
-
-        <div className="min-w-0 flex-1 space-y-2">
-          <div className="flex flex-wrap items-center gap-1.5">
-            <p className="truncate font-semibold lg:text-lg">{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" />
-                {t('ws-members.creator_badge')}
-              </Badge>
-            ) : null}
-            {member.pending ? (
-              <Badge variant="outline" className="h-5 px-1.5 text-xs">
-                {t('ws-members.invited')}
-              </Badge>
-            ) : null}
-            {member.workspace_member_type === 'GUEST' ? (
-              <Badge className="h-5 border-foreground/20 bg-foreground/5 px-1.5 text-foreground/80 text-xs">
-                {guestContext.direct_board_guest
-                  ? t('ws-members.direct_board_guest_badge')
-                  : t('ws-members.guest_badge')}
-              </Badge>
-            ) : null}
-            {guestContext.direct_board_guest ? (
-              <Badge className="h-5 border-dynamic-blue/50 bg-dynamic-blue/10 px-1.5 text-dynamic-blue text-xs">
-                {guestContext.guest_highest_permission === 'edit'
-                  ? t('ws-members.board_guest_can_edit')
-                  : t('ws-members.board_guest_can_view')}
-              </Badge>
-            ) : null}
-          </div>
-
-          <p className="truncate font-semibold text-muted-foreground text-sm">
-            {member.email ||
-              (member.handle ? `@${member.handle}` : t('common.unknown'))}
-          </p>
-        </div>
-      </div>
+      <div className="p-4 pl-0">
+        <div className="flex items-start gap-3">
+          <Avatar className="h-11 w-11 border border-border">
+            <AvatarImage src={member.avatar_url ?? undefined} />
+            <AvatarFallback className="font-semibold">
+              {member.display_name ? (
+                getInitials(member.display_name)
+              ) : (
+                <UserIcon className="h-5 w-5" />
+              )}
+            </AvatarFallback>
+          </Avatar>
 
-      <div className="mt-3 flex flex-wrap gap-2">
-        {member.roles.length > 0 ? (
-          member.roles.map((role) => (
-            <Badge
-              key={`${member.id ?? member.email}-${role.id}`}
-              className="h-5 gap-1 border-dynamic-purple/50 bg-dynamic-purple/10 px-1.5 text-dynamic-purple text-xs"
-            >
-              <span>{role.name}</span>
-              {canManageRoles && memberId && !member.pending ? (
-                <button
-                  type="button"
-                  className="rounded-full px-1 hover:bg-foreground/10"
-                  onClick={() =>
-                    onRemoveRole({
-                      roleId: role.id,
-                      userId: memberId,
-                    })
-                  }
-                  aria-label={t('common.delete')}
-                >
-                  x
-                </button>
+          <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>
+              {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" />
+                  {t('ws-members.creator_badge')}
+                </Badge>
               ) : null}
-            </Badge>
-          ))
-        ) : (
-          <Badge variant="outline" className="h-5 px-1.5 text-xs">
-            {labels.noRolesLabel}
-          </Badge>
-        )}
-      </div>
-
-      {guestContext.direct_board_guest ? (
-        <div className="mt-3 rounded-md border border-dynamic-blue/20 bg-dynamic-blue/5 p-3 text-sm">
-          <div className="font-medium text-dynamic-blue">
-            {t('ws-members.direct_board_guest_scope_title')}
-          </div>
-          <p className="mt-1 text-muted-foreground">
-            {t('ws-members.direct_board_guest_scope_description', {
-              count: guestContext.guest_board_count ?? 0,
-            })}
-          </p>
-          {guestContext.guest_board_names?.length ? (
-            <div className="mt-2 flex flex-wrap gap-1">
-              {guestContext.guest_board_names.slice(0, 4).map((name) => (
-                <Badge key={name} variant="outline" className="text-xs">
-                  {name}
+              {member.pending ? (
+                <Badge className="h-5 border-dynamic-orange/50 bg-dynamic-orange/10 px-1.5 text-dynamic-orange text-xs">
+                  {t('ws-members.invited')}
                 </Badge>
-              ))}
-              {guestContext.guest_board_names.length > 4 ? (
-                <Badge variant="outline" className="text-xs">
-                  +{guestContext.guest_board_names.length - 4}
+              ) : null}
+              {member.workspace_member_type === 'GUEST' ? (
+                <Badge className="h-5 border-foreground/20 bg-foreground/5 px-1.5 text-foreground/80 text-xs">
+                  {guest.direct_board_guest
+                    ? t('ws-members.direct_board_guest_badge')
+                    : t('ws-members.guest_badge')}
+                </Badge>
+              ) : null}
+              {guest.direct_board_guest ? (
+                <Badge className="h-5 border-dynamic-blue/50 bg-dynamic-blue/10 px-1.5 text-dynamic-blue text-xs">
+                  {guest.guest_highest_permission === 'edit'
+                    ? t('ws-members.board_guest_can_edit')
+                    : t('ws-members.board_guest_can_view')}
                 </Badge>
               ) : null}
             </div>
-          ) : null}
+            <p className="mt-0.5 truncate text-muted-foreground text-sm">
+              {member.email ||
+                (member.handle ? `@${member.handle}` : t('common.unknown'))}
+            </p>
+          </div>
         </div>
-      ) : null}
 
-      <div className="mt-3 flex flex-col gap-3 border-t pt-3 text-sm md:flex-row md:items-center md:justify-between">
-        {member.created_at ? (
-          <div className="text-muted-foreground">
-            <span>
-              {t(
-                member.pending
-                  ? 'ws-members.invited'
-                  : 'ws-members.member_since'
-              )}
-            </span>{' '}
-            <span className="font-semibold text-foreground">
-              {moment(member.created_at).locale(locale).fromNow()}
-            </span>
+        <div className="mt-3 flex flex-wrap gap-1.5">
+          {member.roles.length > 0 ? (
+            member.roles.map((role) => (
+              <Badge
+                key={`${member.id ?? member.email}-${role.id}`}
+                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>
+            ))
+          ) : (
+            <Badge variant="outline" className="h-5 px-1.5 text-xs">
+              {labels.noRolesLabel}
+            </Badge>
+          )}
+        </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="font-medium text-dynamic-blue">
+              {t('ws-members.direct_board_guest_scope_title')}
+            </div>
+            <p className="mt-1 text-muted-foreground">
+              {t('ws-members.direct_board_guest_scope_description', {
+                count: guest.guest_board_count ?? 0,
+              })}
+            </p>
+            {guest.guest_board_names?.length ? (
+              <div className="mt-2 flex flex-wrap gap-1">
+                {guest.guest_board_names.slice(0, 4).map((name) => (
+                  <Badge key={name} variant="outline" className="text-xs">
+                    {name}
+                  </Badge>
+                ))}
+                {guest.guest_board_names.length > 4 ? (
+                  <Badge variant="outline" className="text-xs">
+                    +{guest.guest_board_names.length - 4}
+                  </Badge>
+                ) : null}
+              </div>
+            ) : null}
           </div>
         ) : null}
 
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-          {canManageRoles && memberId && !member.pending ? (
-            <Select
-              onValueChange={(roleId) =>
-                onAssignRole({ roleId, userId: memberId })
-              }
-            >
-              <SelectTrigger className="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>
-                  ))
+        <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">
+          {member.created_at ? (
+            <div className="text-muted-foreground text-xs">
+              <span>
+                {t(
+                  member.pending
+                    ? 'ws-members.invited'
+                    : 'ws-members.member_since'
                 )}
-              </SelectContent>
-            </Select>
-          ) : null}
-
-          {canManageMembers && !member.is_creator ? (
-            <Button
-              variant="outline"
-              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 px-3 py-2 text-muted-foreground text-sm">
-              <ShieldUser className="h-4 w-4" />
-              {labels.protectedMemberLabel}
+              </span>{' '}
+              <span className="font-semibold text-foreground">
+                {moment(member.created_at).locale(locale).fromNow()}
+              </span>
             </div>
+          ) : (
+            <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

@@ -1,5 +1,6 @@
 'use client';
 
+import { UsersRound } from '@tuturuuu/icons';
 import type { InternalApiEnhancedWorkspaceMember } from '@tuturuuu/types';
 import { Skeleton } from '@tuturuuu/ui/skeleton';
 import { useTranslations } from 'next-intl';
@@ -43,22 +44,27 @@ export function WorkspaceAccessMembers({
   if (isLoading) {
     return (
       <div className="grid gap-4 lg:grid-cols-2">
-        <Skeleton className="h-52 rounded-lg" />
-        <Skeleton className="h-52 rounded-lg" />
-        <Skeleton className="h-52 rounded-lg" />
-        <Skeleton className="h-52 rounded-lg" />
+        <Skeleton className="h-48 rounded-xl" />
+        <Skeleton className="h-48 rounded-xl" />
+        <Skeleton className="h-48 rounded-xl" />
+        <Skeleton className="h-48 rounded-xl" />
       </div>
     );
   }
 
   if (members.length === 0) {
     return (
-      <div className="flex min-h-56 items-center justify-center rounded-lg border border-dashed p-6 text-center text-muted-foreground text-sm">
-        {searchTerm.trim()
-          ? t('ws-members.no_members_match')
-          : status === 'invited'
-            ? t('ws-members.no_invited_members_found')
-            : t('ws-members.no_members_found')}
+      <div className="flex min-h-56 flex-col items-center justify-center gap-3 rounded-xl border border-border border-dashed p-8 text-center">
+        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-foreground/5 text-muted-foreground">
+          <UsersRound className="h-6 w-6" />
+        </div>
+        <p className="text-muted-foreground text-sm">
+          {searchTerm.trim()
+            ? t('ws-members.no_members_match')
+            : status === 'invited'
+              ? t('ws-members.no_invited_members_found')
+              : t('ws-members.no_members_found')}
+        </p>
       </div>
     );
   }

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { ShieldCheck, Users } from '@tuturuuu/icons';
-import { Badge } from '@tuturuuu/ui/badge';
+import { ShieldCheck, UserCheck, UserPlus, Users } from '@tuturuuu/icons';
 import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
 import type { WorkspaceAccessContext, WorkspaceAccessMode } from './types';
 
 type Props = {
@@ -13,6 +13,13 @@ type Props = {
   totalCount: number;
 };
 
+type Stat = {
+  accent: string;
+  icon: ReactNode;
+  label: string;
+  value: number;
+};
+
 export function WorkspaceAccessPageHeader({
   context,
   invitedCount,
@@ -22,49 +29,81 @@ export function WorkspaceAccessPageHeader({
 }: Props) {
   const t = useTranslations() as (key: string) => string;
 
+  const stats: Stat[] = [
+    {
+      accent: 'text-dynamic-blue',
+      icon: <Users className="h-4 w-4" />,
+      label: t('common.total'),
+      value: totalCount,
+    },
+    {
+      accent: 'text-dynamic-green',
+      icon: <UserCheck className="h-4 w-4" />,
+      label: t('ws-members.active_members'),
+      value: joinedCount,
+    },
+    {
+      accent: 'text-dynamic-orange',
+      icon: <UserPlus className="h-4 w-4" />,
+      label: t('ws-members.pending_invitations'),
+      value: invitedCount,
+    },
+  ];
+
   return (
-    <section className="overflow-hidden rounded-xl border border-border bg-linear-to-br from-background via-background to-foreground/[0.02] p-6 shadow-sm">
-      <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
-        <div className="min-w-0">
-          <div className="flex items-center gap-3">
-            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-linear-to-br from-dynamic-blue to-dynamic-purple shadow-lg">
-              <Users className="h-6 w-6 text-background" />
-            </div>
-            <div className="min-w-0">
-              <h1 className="bg-linear-to-br from-foreground to-foreground/70 bg-clip-text font-bold text-3xl text-transparent tracking-tight">
+    <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">
+            <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">
                 {mode === 'cms'
                   ? t('external-projects.settings.members_title')
                   : t('workspace-settings-layout.members')}
               </h1>
-              {context.boundProjectName ? (
-                <p className="mt-1 text-muted-foreground text-sm">
-                  {t('external-projects.settings.bound_project_label')}:{' '}
-                  {context.boundProjectName}
-                </p>
-              ) : null}
+              <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">
+                <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">
+              {mode === 'cms'
+                ? t('external-projects.settings.members_description')
+                : t('ws-members.description')}
+            </p>
+            {context.boundProjectName ? (
+              <p className="mt-2 inline-flex items-center gap-1.5 rounded-md border border-border bg-foreground/[0.03] px-2 py-1 text-muted-foreground text-xs">
+                {t('external-projects.settings.bound_project_label')}:
+                <span className="font-semibold text-foreground">
+                  {context.boundProjectName}
+                </span>
+              </p>
+            ) : null}
           </div>
-          <p className="mt-4 max-w-3xl text-muted-foreground text-sm leading-6">
-            {mode === 'cms'
-              ? t('external-projects.settings.members_description')
-              : t('ws-members.description')}
-          </p>
         </div>
 
-        <div className="flex flex-wrap gap-2 lg:justify-end">
-          <Badge variant="outline" className="rounded-full">
-            {t('common.total')}: {totalCount}
-          </Badge>
-          <Badge variant="outline" className="rounded-full">
-            {t('ws-members.active_members')}: {joinedCount}
-          </Badge>
-          <Badge variant="outline" className="rounded-full">
-            {t('ws-members.pending_invitations')}: {invitedCount}
-          </Badge>
-          <Badge variant="secondary" className="gap-1 rounded-full">
-            <ShieldCheck className="h-3.5 w-3.5" />
-            {t('ws-roles.plural')}
-          </Badge>
+        <div className="grid shrink-0 grid-cols-3 divide-x divide-border overflow-hidden rounded-lg border border-border bg-foreground/[0.02]">
+          {stats.map((stat) => (
+            <div
+              key={stat.label}
+              className="flex flex-col gap-1 px-4 py-3 text-center"
+            >
+              <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">
+                  {stat.value}
+                </span>
+              </span>
+              <span className="text-muted-foreground text-xs">
+                {stat.label}
+              </span>
+            </div>
+          ))}
         </div>
       </div>
     </section>