style: letter avatars for members, drop row hover, round partner rows

Use letter-initial avatars in the Members table (matching pending
invites) and drop the unused photo/UserAvatar path. Remove the hover
highlight on member and pending-invite rows. Give partner-node rows a
4px radius by painting the hover/selected background on the cells with
rounded end caps (table rows can't render border-radius directly).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
comfydesigner
2026-07-07 15:05:50 -07:00
parent ba494b3d4a
commit 2c9bee1da3
4 changed files with 20 additions and 15 deletions

View File

@@ -1,12 +1,17 @@
<template>
<TableRow :data-testid="`member-row-${member.id}`" class="group">
<TableRow
:data-testid="`member-row-${member.id}`"
class="group hover:bg-transparent"
>
<TableCell>
<div class="flex items-center gap-3">
<UserAvatar
class="size-8"
:photo-url="isCurrentUser ? photoUrl : undefined"
:pt:icon:class="{ 'text-xl!': !isCurrentUser || !photoUrl }"
/>
<span
class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-background"
>
<span class="text-sm font-bold text-base-foreground">
{{ initial }}
</span>
</span>
<div class="flex min-w-0 flex-1 flex-col gap-1">
<span class="text-sm text-base-foreground">
{{ member.name }}
@@ -57,7 +62,6 @@ import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import DropdownMenu from '@/components/common/DropdownMenu.vue'
import UserAvatar from '@/components/common/UserAvatar.vue'
import Button from '@/components/ui/button/Button.vue'
import TableCell from '@/components/ui/table/TableCell.vue'
import TableRow from '@/components/ui/table/TableRow.vue'
@@ -74,7 +78,6 @@ const {
} = defineProps<{
member: WorkspaceMember
isCurrentUser: boolean
photoUrl?: string
canManageMembers?: boolean
isOriginalOwner?: boolean
menuItems?: MenuItem[]
@@ -82,6 +85,10 @@ const {
const { t } = useI18n()
const initial = computed(() =>
(member.name || member.email).charAt(0).toUpperCase()
)
// The creator and the current user can't be managed from their own row.
const showMenu = computed(
() => canManageMembers && !isCurrentUser && !isOriginalOwner

View File

@@ -113,7 +113,6 @@
v-if="isPersonalWorkspace"
:member="personalWorkspaceMember"
:is-current-user="true"
:photo-url="userPhotoUrl ?? undefined"
/>
<template v-else>
<MemberTableRow
@@ -121,9 +120,6 @@
:key="member.id"
:member="member"
:is-current-user="isCurrentUser(member)"
:photo-url="
isCurrentUser(member) ? (userPhotoUrl ?? undefined) : undefined
"
:can-manage-members="permissions.canManageMembers"
:is-original-owner="isOriginalOwner(member)"
:menu-items="memberMenus.get(member.id)"
@@ -257,7 +253,6 @@ const {
pendingInvites,
permissions,
uiConfig,
userPhotoUrl,
showOutOfCreditsBanner,
creditResetDate,
dismissOutOfCreditsBanner,

View File

@@ -57,7 +57,7 @@
v-for="node in filteredNodes"
:key="node.id"
:data-state="selectedIds.has(node.id) ? 'selected' : undefined"
class="group cursor-pointer"
class="group cursor-pointer hover:bg-transparent data-[state=selected]:bg-transparent [&:hover>td]:bg-secondary-background/50 [&>td]:transition-colors [&>td:first-child]:rounded-l [&>td:last-child]:rounded-r [&[data-state=selected]>td]:bg-secondary-background/50"
@click="toggleSelection(node.id)"
>
<TableCell>

View File

@@ -1,5 +1,8 @@
<template>
<TableRow :data-testid="`invite-row-${invite.id}`" class="group">
<TableRow
:data-testid="`invite-row-${invite.id}`"
class="group hover:bg-transparent"
>
<TableCell>
<div class="flex items-center gap-3">
<span