@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/custom/workspace-access/workspace-access-default-role-card.tsx

@@ -1,15 +1,8 @@
 'use client';
 
-import { Pencil } from '@tuturuuu/icons';
+import { KeyRound, Pencil, ShieldUser } from '@tuturuuu/icons';
 import type { WorkspaceDefaultPermissionMemberType } from '@tuturuuu/types';
 import { Button } from '@tuturuuu/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@tuturuuu/ui/card';
 import { Skeleton } from '@tuturuuu/ui/skeleton';
 import { useTranslations } from 'next-intl';
 import type { WorkspaceAccessRole } from './types';
@@ -37,45 +30,77 @@ export function WorkspaceAccessDefaultRoleCard({
 }) {
   const t = useTranslations() as (key: string) => string;
   const isGuest = memberType === 'GUEST';
+  const enabled = enabledPermissionCount(role);
+  const pct =
+    permissionCount > 0 ? Math.round((enabled / permissionCount) * 100) : 0;
+  const accent = isGuest
+    ? 'border-dynamic-blue/30 bg-dynamic-blue/10 text-dynamic-blue'
+    : 'border-dynamic-green/30 bg-dynamic-green/10 text-dynamic-green';
+  const barColor = isGuest ? 'bg-dynamic-blue' : 'bg-dynamic-green';
 
   return (
-    <Card className="shadow-none">
-      <CardHeader>
-        <div className="flex flex-wrap items-start justify-between gap-3">
-          <div className="space-y-1">
-            <CardTitle className="text-base">
+    <div className="rounded-xl border border-border bg-background p-5">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="flex min-w-0 gap-3">
+          <div
+            className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border ${accent}`}
+          >
+            {isGuest ? (
+              <KeyRound className="h-5 w-5" />
+            ) : (
+              <ShieldUser className="h-5 w-5" />
+            )}
+          </div>
+          <div className="min-w-0">
+            <div className="font-semibold text-base">
               {isGuest
                 ? t('ws-roles.guest_defaults')
                 : t('ws-roles.member_defaults')}
-            </CardTitle>
-            <CardDescription>
+            </div>
+            <p className="mt-0.5 max-w-md text-muted-foreground text-sm">
               {isGuest
                 ? t('ws-roles.guest_defaults_description')
                 : t('ws-roles.member_defaults_description')}
-            </CardDescription>
+            </p>
           </div>
-          {canManageRoles ? (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onEdit(memberType)}
-            >
-              <Pencil className="mr-2 h-4 w-4" />
-              {t('common.edit')}
-            </Button>
-          ) : null}
         </div>
-      </CardHeader>
-      <CardContent className="space-y-3">
+        {canManageRoles ? (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onEdit(memberType)}
+          >
+            <Pencil className="mr-2 h-4 w-4" />
+            {t('common.edit')}
+          </Button>
+        ) : null}
+      </div>
+
+      <div className="mt-4 space-y-3">
         {isLoading ? (
           <Skeleton className="h-24 rounded-lg" />
         ) : (
           <>
-            <div className="font-semibold text-2xl tabular-nums">
-              {enabledPermissionCount(role)}
-              <span className="ml-1 font-normal text-base text-muted-foreground">
-                / {permissionCount}
-              </span>
+            <div>
+              <div className="flex items-baseline justify-between gap-1.5">
+                <div className="flex items-baseline gap-1.5">
+                  <span className="font-bold text-2xl tabular-nums">
+                    {enabled}
+                  </span>
+                  <span className="text-base text-muted-foreground">
+                    / {permissionCount}
+                  </span>
+                </div>
+                <span className="text-muted-foreground text-sm">
+                  {t('ws-roles.permissions')}
+                </span>
+              </div>
+              <div className="mt-2 h-1.5 max-w-md overflow-hidden rounded-full bg-foreground/10">
+                <div
+                  className={`h-full rounded-full ${barColor}`}
+                  style={{ width: `${pct}%` }}
+                />
+              </div>
             </div>
             <div className="flex flex-wrap gap-2">
               <WorkspaceAccessPermissionPreview
@@ -86,7 +111,7 @@ export function WorkspaceAccessDefaultRoleCard({
             </div>
           </>
         )}
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 }

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>
     );
   }