sandrodachandClaude Opus 5.5
1bd38f4d50
- Leaving a block now clears its focus, so the bullet no longer stays highlighted - Remove the vertical indentation guide lines - Who has the note open: up to 3 overlapping avatars, "+n", full list on hover - Shared AvatarStack component; UserAvatar gets xxs size and optional title Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { UserAvatar } from './UserAvatar';
|
|
|
|
export interface AvatarPerson {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl?: string;
|
|
}
|
|
|
|
interface AvatarStackProps {
|
|
people: AvatarPerson[];
|
|
max?: number;
|
|
size?: 'xxs' | 'xs';
|
|
// Ring in the color of the surface behind the stack, so overlapping circles stay separated
|
|
ringClass?: string;
|
|
title?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const OVERFLOW_SIZE = {
|
|
xxs: 'w-4 h-4 text-[7px]',
|
|
xs: 'w-5 h-5 text-[9px]',
|
|
};
|
|
|
|
// Small overlapping profile pictures: at most `max` circles, the rest as a monochrome "+n" circle.
|
|
// Used for presence in notes, list/task-list tabs, task assignees and list item authors (Doku/ui-patterns.md).
|
|
export const AvatarStack: React.FC<AvatarStackProps> = ({
|
|
people,
|
|
max = 3,
|
|
size = 'xs',
|
|
ringClass = 'ring-[var(--bg-app)]',
|
|
title,
|
|
className = '',
|
|
}) => {
|
|
if (people.length === 0) return null;
|
|
const visible = people.slice(0, max);
|
|
const hidden = people.length - visible.length;
|
|
|
|
return (
|
|
<span className={`inline-flex items-center -space-x-1.5 shrink-0 ${className}`} title={title}>
|
|
{visible.map((p) => (
|
|
<UserAvatar
|
|
key={p.id}
|
|
name={p.name}
|
|
avatarUrl={p.avatarUrl || ''}
|
|
size={size}
|
|
showTitle={false}
|
|
className={`ring-2 ${ringClass}`}
|
|
/>
|
|
))}
|
|
{hidden > 0 && (
|
|
<span
|
|
className={`relative inline-flex items-center justify-center rounded-full font-bold leading-none bg-muted text-panel ring-2 ${ringClass} ${OVERFLOW_SIZE[size]}`}
|
|
>
|
|
+{hidden}
|
|
</span>
|
|
)}
|
|
</span>
|
|
);
|
|
};
|