Skip to content

fix(web): make legacy thread hovers consistent #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lastobelus merged 3 commits into from
Aug 24, 2026
Merged

fix(web): make legacy thread hovers consistent #75

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ee46544
fix(web): make legacy thread hovers consistent
lastobelus Aug 23, 2026
5573227
fix(web): let legacy thread tooltips close
lastobelus Aug 23, 2026
097b149
fix(web): keep row hovers open over controls
lastobelus Aug 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 40 additions & 32 deletions apps/web/src/components/LegacySidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ import {
NumberFieldInput,
} from "./ui/number-field";
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./ui/select";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
import { Tooltip, TooltipCreateHandle, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
import {
SidebarContent,
SidebarGroup,
Expand Down Expand Up @@ -537,14 +537,19 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
: !isThreadRunning
? "pointer-events-none transition-opacity duration-150 max-sm:pr-6 group-hover/menu-sub-item:opacity-0 group-focus-within/menu-sub-item:opacity-0"
: "pointer-events-none";
const [annotationRowActive, setAnnotationRowActive] = useState(false);
const [threadRowActive, setThreadRowActive] = useState(false);
const clearConfirmingArchive = useCallback(() => {
setConfirmingArchiveThreadKey((current) => (current === threadKey ? null : current));
}, [setConfirmingArchiveThreadKey, threadKey]);
const handleMouseLeave = useCallback(() => {
clearConfirmingArchive();
setAnnotationRowActive(false);
setThreadRowActive(false);
}, [clearConfirmingArchive]);
const handleThreadDetailsTooltipOpenChange = useCallback<
NonNullable<React.ComponentProps<typeof Tooltip>["onOpenChange"]>
>((open, eventDetails) => {
if (!open && eventDetails.reason === "escape-key") setThreadRowActive(false);
}, []);
const handleBlurCapture = useCallback(
(event: React.FocusEvent<HTMLLIElement>) => {
const currentTarget = event.currentTarget;
Expand All @@ -553,7 +558,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
return;
}
clearConfirmingArchive();
setAnnotationRowActive(false);
setThreadRowActive(false);
});
},
[clearConfirmingArchive],
Expand Down Expand Up @@ -740,14 +745,23 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
},
[attemptArchiveThread, threadRef],
);
const rowButtonRender = useMemo(() => <div role="button" tabIndex={0} />, []);
const threadDetailsTooltipHandle = useMemo(() => TooltipCreateHandle(), []);
const rowButtonRender = useMemo(
() => (
<TooltipTrigger
handle={threadDetailsTooltipHandle}
render={<div role="button" tabIndex={0} />}
/>
),
[threadDetailsTooltipHandle],
);

return (
<SidebarMenuSubItem
className="w-full"
data-thread-item
onFocusCapture={() => setAnnotationRowActive(true)}
onMouseEnter={() => setAnnotationRowActive(true)}
onFocusCapture={() => setThreadRowActive(true)}
onMouseEnter={() => setThreadRowActive(true)}
onMouseLeave={handleMouseLeave}
onBlurCapture={handleBlurCapture}
>
Expand Down Expand Up @@ -800,35 +814,13 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
onClick={handleRenameInputClick}
onDoubleClick={handleRenameInputClick}
/>
) : hasActiveAnnotation ? (
) : (
<span
className="min-w-0 flex-1 truncate text-sm"
data-testid={`thread-title-${thread.id}`}
>
{thread.title}
</span>
) : (
<Tooltip>
<TooltipTrigger
render={
<span
className="min-w-0 flex-1 truncate text-sm"
data-testid={`thread-title-${thread.id}`}
>
{thread.title}
</span>
}
/>
<TooltipPopup
align="start"
className="max-w-80 text-left whitespace-normal [&_[data-slot=tooltip-viewport]]:p-0"
side="right"
sideOffset={4}
variant="glass"
>
{threadHoverDetails}
</TooltipPopup>
</Tooltip>
)}
</div>
<div className="ml-auto flex shrink-0 items-center gap-1.5">
Expand Down Expand Up @@ -955,7 +947,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
onBodyChange={(body) => onSaveAnnotationBody(thread, body)}
onEdit={() => onEditAnnotation(thread)}
onResolve={() => onResolveAnnotation(thread)}
rowActive={annotationRowActive}
rowActive={threadRowActive}
threadDetails={threadHoverDetails}
threadRef={threadRef}
trigger={
Expand Down Expand Up @@ -989,7 +981,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
onBodyChange={(body) => onSaveAnnotationBody(thread, body)}
onEdit={() => onEditAnnotation(thread)}
onResolve={() => onResolveAnnotation(thread)}
rowActive={annotationRowActive}
rowActive={threadRowActive}
threadDetails={threadHoverDetails}
threadRef={threadRef}
trigger={
Expand Down Expand Up @@ -1022,6 +1014,22 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
</div>
</div>
</SidebarMenuSubButton>
<Tooltip
disabled={hasActiveAnnotation}
handle={threadDetailsTooltipHandle}
open={!hasActiveAnnotation && threadRowActive}
onOpenChange={handleThreadDetailsTooltipOpenChange}
>
<TooltipPopup
align="start"
className="max-w-80 text-left whitespace-normal [&_[data-slot=tooltip-viewport]]:p-0"
side="right"
sideOffset={4}
variant="glass"
>
{threadHoverDetails}
</TooltipPopup>
</Tooltip>
</SidebarMenuSubItem>
);
});
Expand Down