Skip to content

fix(web): pinned thread marker stays put when hovering the row #11122

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
juliusmarminge merged 3 commits into from
Oct 19, 2026
Merged

fix(web): pinned thread marker stays put when hovering the row #11122

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0c13320
fix(web): pinned thread marker stays put when hovering the row
flamboh Oct 4, 2026
0121935
Merge origin/main into t3code/stabilize-pinned-thread-unpin-icon
juliusmarminge Oct 19, 2026
1d087d2
fix(web): keep pinned thread markers stable on hover
juliusmarminge Oct 19, 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
28 changes: 14 additions & 14 deletions apps/web/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1800,7 +1800,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
onClick={handleUnsnoozeClick}
className={cn(
"pointer-events-none absolute inset-y-0 right-0 -mr-1 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-1.5 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-hover/sidebar-row:pointer-events-auto group-hover/sidebar-row:opacity-100",
isWoke && "group-hover/sidebar-row:static",
isWoke && "static",
Comment thread
macroscopeapp[bot] marked this conversation as resolved.
)}
>
<AlarmClockOffIcon className="mb-px size-3" />
Expand All @@ -1816,7 +1816,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
onClick={handleUnsettleClick}
className={cn(
"pointer-events-none absolute inset-y-0 right-0 -mr-1 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-1.5 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-hover/sidebar-row:pointer-events-auto group-hover/sidebar-row:opacity-100",
isWoke && "group-hover/sidebar-row:static",
isWoke && "static",
)}
/>
}
Expand All @@ -1832,7 +1832,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
onClick={handleSettleClick}
className={cn(
"pointer-events-none absolute inset-y-0 right-0 inline-flex cursor-pointer items-center gap-1 rounded-md bg-transparent px-2 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-hover/sidebar-row:pointer-events-auto group-hover/sidebar-row:opacity-100",
isWoke && "group-hover/sidebar-row:static",
isWoke && "static",
)}
>
<CheckIcon className="size-3" />
Expand Down Expand Up @@ -1900,24 +1900,23 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
<span className="flex-1" />
)}
{pinIndicator}
{/* The visible state owns this slot's width: status at rest,
actions on hover/keyboard focus or while the popover is open. Keeping
the hidden state out of flow lets the project label reclaim
space without either state overlapping it. */}
{/* Status and hover actions share one grid cell, so it is always as wide as
its wider state and only opacity swaps on hover. That keeps the pin marker
to its left from shifting; short labels reserve a little extra space. */}
{sortable?.isDragging ? (
dragDestination
) : (
<span className="group/sidebar-status-slot relative ml-auto flex h-5 min-w-8 shrink-0 items-stretch justify-end text-xs">
<span className="group/sidebar-status-slot ml-auto grid h-5 min-w-8 shrink-0 grid-flow-col items-stretch justify-end text-xs">
{/* Read-only status labels yield to the hover actions. Woke is
itself an action, so it stays pointer-enabled and visible
while the other controls appear beside it. */}
itself an action, so it keeps its own column and stays
pointer-enabled while the other controls appear beside it. */}
<span
className={cn(
isWokeStatus
? "pointer-events-auto"
: "pointer-events-none group-has-[:focus-visible]/sidebar-status-slot:absolute group-has-[:focus-visible]/sidebar-status-slot:right-0 group-has-[:focus-visible]/sidebar-status-slot:opacity-0 group-hover/sidebar-row:absolute group-hover/sidebar-row:right-0 group-hover/sidebar-row:opacity-0",
: "pointer-events-none [grid-area:1/1] group-has-[:focus-visible]/sidebar-status-slot:opacity-0 group-hover/sidebar-row:opacity-0",
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
"flex items-center self-center justify-self-end tabular-nums text-secondary-label transition-opacity",
snoozeMenuOpen && "pointer-events-none absolute right-0 opacity-0",
snoozeMenuOpen && "pointer-events-none opacity-0",
)}
>
{topStatus ? (
Expand Down Expand Up @@ -1982,8 +1981,9 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
// would keep the controls pinned over the status label
// once the pointer moves away (e.g. after a failed
// settle) instead of cross-fading back.
"pointer-events-none absolute inset-y-0 right-0 flex items-stretch opacity-0 transition-opacity has-[:focus-visible]:pointer-events-auto has-[:focus-visible]:static has-[:focus-visible]:opacity-100 group-hover/sidebar-row:pointer-events-auto group-hover/sidebar-row:static group-hover/sidebar-row:opacity-100",
snoozeMenuOpen && "pointer-events-auto static opacity-100",
"pointer-events-none flex items-stretch justify-self-end opacity-0 transition-opacity has-[:focus-visible]:pointer-events-auto has-[:focus-visible]:opacity-100 group-hover/sidebar-row:pointer-events-auto group-hover/sidebar-row:opacity-100",
!isWokeStatus && "[grid-area:1/1]",
snoozeMenuOpen && "pointer-events-auto opacity-100",
)}
>
{hasUnsentDraft ? (
Expand Down
Loading