External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(desktop): keep thread guides behind the reply composer (#1179)

Browse Source 
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Pinky <44b8e82baa6e0e254e0208d68f335c283c94e7b78dd1fa10d5a49d3f13dd0435@sprout-oss.stage.blox.sqprod.co>
This commit is contained in:
Wes
2026-06-22 14:15:10 -07:00
committed by GitHub
co-authored by Pinky
parent 04df2c8dc6
commit 781d1acf8a
2 changed files with 92 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/features/messages/ui/MessageRow.tsx
+44 -46
View File
@@ -459,58 +459,56 @@ export const MessageRow = React.memo(
const isHighlighted =
Boolean(collapseAction?.active) ||
Boolean(highlightThreadLineDepths?.includes(depth));
const lineClassName = cn(
"absolute bottom-0 left-1/2 top-0 border-l transition-[border-color]",
isHighlighted
? "border-primary"
: "border-border group-hover/thread-guide:border-primary group-focus-visible/thread-guide:border-primary",
);
if (collapseAction) {
return (
<button
aria-label={collapseAction.label}
className="group/thread-guide absolute bottom-0 top-0 z-20 w-5 -translate-x-1/2 cursor-pointer rounded-full focus-visible:outline-hidden"
data-thread-head-id={collapseAction.message.id}
data-testid="thread-collapse-guide"
key={`${message.id}-depth-guide-${offset}`}
onBlur={() =>
handleCollapseDepthGuideHoverChange(
collapseAction.message,
false,
)
}
onClick={(event) =>
handleCollapseDepthGuide(event, collapseAction.message)
}
onFocus={() =>
handleCollapseDepthGuideHoverChange(
collapseAction.message,
true,
)
}
onMouseEnter={() =>
handleCollapseDepthGuideHoverChange(
collapseAction.message,
true,
)
}
onMouseLeave={() =>
handleCollapseDepthGuideHoverChange(
collapseAction.message,
false,
)
}
style={{ left: `${offset}px` }}
type="button"
>
<span
className={lineClassName}
<React.Fragment key={`${message.id}-depth-guide-${offset}`}>
<div
aria-hidden
className={cn(
"pointer-events-none absolute bottom-0 top-0 border-l transition-[border-color]",
isHighlighted ? "border-primary" : "border-border",
)}
style={{
borderLeftWidth: `${THREAD_REPLY_LINE_WIDTH_PX}px`,
left: `${offset}px`,
}}
/>
</button>
<button
aria-label={collapseAction.label}
className="absolute bottom-0 top-0 z-20 w-5 -translate-x-1/2 cursor-pointer rounded-full focus-visible:outline-hidden"
data-thread-head-id={collapseAction.message.id}
data-testid="thread-collapse-guide"
onBlur={() =>
handleCollapseDepthGuideHoverChange(
collapseAction.message,
false,
)
}
onClick={(event) =>
handleCollapseDepthGuide(event, collapseAction.message)
}
onFocus={() =>
handleCollapseDepthGuideHoverChange(
collapseAction.message,
true,
)
}
onMouseEnter={() =>
handleCollapseDepthGuideHoverChange(
collapseAction.message,
true,
)
}
onMouseLeave={() =>
handleCollapseDepthGuideHoverChange(
collapseAction.message,
false,
)
}
style={{ left: `${offset}px` }}
type="button"
/>
</React.Fragment>
);
}
desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
+48 -46
View File
@@ -1,3 +1,5 @@
import * as React from "react";
import type {
TimelineThreadSummary,
TimelineThreadSummaryParticipant,
@@ -114,60 +116,60 @@ export function MessageThreadSummaryRow({
const isHighlighted =
Boolean(collapseAction?.active) ||
Boolean(highlightThreadLineDepths?.includes(guideDepth));
const lineClassName = cn(
"absolute bottom-0 left-1/2 top-0 border-l transition-[border-color]",
isHighlighted
? "border-primary"
: "border-border group-hover/thread-guide:border-primary group-focus-visible/thread-guide:border-primary",
);
if (collapseAction) {
return (
<button
aria-label={collapseAction.label}
className="group/thread-guide absolute bottom-0 top-0 z-20 w-5 -translate-x-1/2 cursor-pointer rounded-full focus-visible:outline-hidden"
data-thread-head-id={collapseAction.message.id}
data-testid="thread-collapse-guide"
<React.Fragment
key={`${message.id}-summary-depth-guide-${offset}`}
onBlur={() =>
onCollapseDepthGuideHoverChange?.(
collapseAction.message,
false,
)
}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onCollapseDepthGuide?.(collapseAction.message);
}}
onFocus={() =>
onCollapseDepthGuideHoverChange?.(
collapseAction.message,
true,
)
}
onMouseEnter={() =>
onCollapseDepthGuideHoverChange?.(
collapseAction.message,
true,
)
}
onMouseLeave={() =>
onCollapseDepthGuideHoverChange?.(
collapseAction.message,
false,
)
}
style={{ left: `${offset}px` }}
type="button"
>
<span
className={lineClassName}
<div
aria-hidden
className={cn(
"pointer-events-none absolute bottom-0 top-0 border-l transition-[border-color]",
isHighlighted ? "border-primary" : "border-border",
)}
style={{
borderLeftWidth: `${THREAD_REPLY_LINE_WIDTH_PX}px`,
left: `${offset}px`,
}}
/>
</button>
<button
aria-label={collapseAction.label}
className="absolute bottom-0 top-0 z-20 w-5 -translate-x-1/2 cursor-pointer rounded-full focus-visible:outline-hidden"
data-thread-head-id={collapseAction.message.id}
data-testid="thread-collapse-guide"
onBlur={() =>
onCollapseDepthGuideHoverChange?.(
collapseAction.message,
false,
)
}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onCollapseDepthGuide?.(collapseAction.message);
}}
onFocus={() =>
onCollapseDepthGuideHoverChange?.(
collapseAction.message,
true,
)
}
onMouseEnter={() =>
onCollapseDepthGuideHoverChange?.(
collapseAction.message,
true,
)
}
onMouseLeave={() =>
onCollapseDepthGuideHoverChange?.(
collapseAction.message,
false,
)
}
style={{ left: `${offset}px` }}
type="button"
/>
</React.Fragment>
);
}