jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-11-04 08:21:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): align home timestamps and loading skeletons

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Thomas Petersen
2026-05-14 21:05:55 -04:00
parent 35f8d58c65
commit ff3ee67d2f
3 changed files with 55 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
desktop/src/features/home/ui/InboxDetailPane.tsx
View File

@@ -277,7 +277,7 @@ export function InboxDetailPane({
<div className="px-6 py-2">
<article
className={cn(
"group/message flex items-start gap-2.5 px-2 py-1 transition-colors duration-1000",
"group/message relative flex items-start gap-2.5 px-2 py-1 transition-colors duration-1000",
message.isSelected
? cn(
isFocusHighlightVisible
@@ -292,6 +292,39 @@ export function InboxDetailPane({
: "home-inbox-context-message"
}
>
{canReply || onToggleReaction ? (
<div className="absolute right-2 top-1 z-10">
<MessageActionBar
activeReplyTargetId={replyTargetId}
message={toActionBarMessage(message)}
onReactionSelect={
onToggleReaction
? (emoji) => {
const actionBarMessage =
toActionBarMessage(message);
const remove =
actionBarMessage.reactions?.some(
(reaction) =>
reaction.emoji === emoji &&
reaction.reactedByCurrentUser,
) ?? false;
return onToggleReaction(
actionBarMessage,
emoji,
remove,
);
}
: undefined
}
onReply={
canReply
? () => handleSelectReplyTarget(message)
: undefined
}
reactions={message.reactions ?? []}
/>
</div>
) : null}
<UserAvatar
avatarUrl={message.avatarUrl}
className="h-8 w-8 shrink-0 rounded-xl"
@@ -299,53 +332,18 @@ export function InboxDetailPane({
size="md"
/>
<div className="-mt-1 min-w-0 flex-1">
<div className="flex min-w-0 flex-wrap items-start gap-x-2 gap-y-0">
<div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0">
<p className="truncate text-sm font-semibold leading-none tracking-tight text-foreground">
{message.authorLabel}
</p>
<p className="shrink-0 text-xs font-normal leading-none tabular-nums text-muted-foreground/55">
{message.fullTimestampLabel}
</p>
{message.isSelected ? (
<span className="text-[10px] font-semibold uppercase leading-none tracking-[0.14em] text-muted-foreground/70">
Inbox item
</span>
) : null}
<p className="ml-auto text-xs text-muted-foreground">
{message.fullTimestampLabel}
</p>
{canReply || onToggleReaction ? (
<div className="relative ml-1">
<div className="absolute right-0 top-1/2 -translate-y-1/2">
<MessageActionBar
activeReplyTargetId={replyTargetId}
message={toActionBarMessage(message)}
onReactionSelect={
onToggleReaction
? (emoji) => {
const actionBarMessage =
toActionBarMessage(message);
const remove =
actionBarMessage.reactions?.some(
(reaction) =>
reaction.emoji === emoji &&
reaction.reactedByCurrentUser,
) ?? false;
return onToggleReaction(
actionBarMessage,
emoji,
remove,
);
}
: undefined
}
onReply={
canReply
? () => handleSelectReplyTarget(message)
: undefined
}
reactions={message.reactions ?? []}
/>
</div>
</div>
) : null}
</div>
<div className="mt-1">
<Markdown

13
desktop/src/features/messages/ui/TimelineSkeleton.tsx
View File

@@ -5,13 +5,16 @@ export function TimelineSkeleton() {
return (
<>
{skeletonRows.map((row) => (
{skeletonRows.map((row, index) => (
<div className="flex gap-2.5" key={row}>
<Skeleton className="h-8 w-8 rounded-lg" />
<Skeleton className="h-9 w-9 shrink-0 rounded-xl" />
<div className="min-w-0 flex-1 space-y-1">
<Skeleton className="h-3.5 w-44" />
<Skeleton className="h-4 w-full max-w-2xl" />
<Skeleton className="h-4 w-full max-w-xl" />
<div className="flex items-baseline gap-2">
<Skeleton className="h-3.5 w-28" />
<Skeleton className="h-3 w-12" />
</div>
<Skeleton className="h-4 w-full" />
<Skeleton className={index % 2 === 0 ? "h-4 w-4/5" : "h-4 w-2/3"} />
</div>
</div>
))}

15
desktop/src/shared/ui/ViewLoadingFallback.tsx
View File

@@ -45,13 +45,16 @@ function LoadingHeaderSkeleton() {
function MessageRowsSkeleton() {
return (
<>
{["first", "second", "third", "fourth", "fifth"].map((row) => (
{["first", "second", "third", "fourth", "fifth"].map((row, index) => (
<div className="flex gap-3" key={row}>
<Skeleton className="h-8 w-8 shrink-0 rounded-lg" />
<div className="min-w-0 flex-1 space-y-2 pt-0.5">
<Skeleton className="h-3.5 w-40 max-w-[40%]" />
<Skeleton className="h-4 w-full max-w-3xl" />
<Skeleton className="h-4 w-full max-w-xl" />
<Skeleton className="h-9 w-9 shrink-0 rounded-xl" />
<div className="min-w-0 flex-1 space-y-1 pt-0.5">
<div className="flex items-baseline gap-2">
<Skeleton className="h-3.5 w-28" />
<Skeleton className="h-3 w-12" />
</div>
<Skeleton className="h-4 w-full" />
<Skeleton className={index % 2 === 0 ? "h-4 w-4/5" : "h-4 w-2/3"} />
</div>
</div>
))}