Skip to content

fix(web): sidebar jump hints are readable and sit in the status slot #26112

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

Open
G-R3 wants to merge 3 commits into
base: main
Choose a base branch
from
+11 −7
Open

fix(web): sidebar jump hints are readable and sit in the status slot #26112

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
980c94c
fix(web): sidebar jump hints are readable and sit in the status slot
G-R3 Oct 27, 2026
8fed3ac
Merge branch 'main' into fix/sidebar-jump-hint-glyph-size
G-R3 Oct 27, 2026
3fcdeea
merge: bring main into sidebar jump hint fix
maria-rcks Oct 31, 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
2 changes: 1 addition & 1 deletion apps/web/src/components/LegacySidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -873,7 +873,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
render={
<span
aria-label={jumpLabel}
className="inline-flex h-5 items-center rounded-full border border-border/80 bg-background/90 px-1.5 font-mono text-3xs font-medium tracking-tight text-foreground shadow-sm"
className="inline-flex h-5 items-center rounded-full border border-border/80 bg-background/90 px-1.5 font-sans text-xs font-medium tabular-nums text-foreground shadow-sm"
/>
}
>
Expand Down
18 changes: 11 additions & 7 deletions apps/web/src/components/sidebar/SidebarThreadRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ import { getTriggerDisplayModelName } from "../chat/providerIconUtils";
import { shouldShowInstanceBadge, type ProviderInstanceEntry } from "../../providerInstances";
import { useThreadRunningTerminalIds } from "../../state/terminalSessions";
import { InlineButton } from "../ui/button";
import { Kbd } from "../ui/kbd";
import { Menu, MenuItem, MenuPopup, MenuSeparator, MenuShortcut, MenuTrigger } from "../ui/menu";
import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
import { MiddleTruncate } from "../ui/middle-truncate";
Expand Down Expand Up @@ -149,15 +150,15 @@ function threadTimeTimestamp(thread: SidebarThreadSummary): string {

function JumpHintBadge(props: { label: string }) {
return (
<span
aria-hidden
className="pointer-events-none absolute right-1.5 top-1/2 z-10 inline-flex h-5 -translate-y-1/2 items-center rounded-full border border-border/80 bg-background/95 px-1.5 font-mono text-3xs font-medium tracking-tight text-foreground shadow-sm"
>
{props.label}
<span aria-hidden data-jump-hint className="pointer-events-none flex items-center">
<Kbd>{props.label}</Kbd>
</span>
);
}

const JUMP_HINT_SLOT_CLASS_NAME =
"[&>:not([data-jump-hint])]:invisible [&>:not([data-jump-hint])]:absolute";

function WorkingDuration(props: { startedAt: string | null }) {
const startedMs = props.startedAt !== null ? Date.parse(props.startedAt) : Number.NaN;
if (Number.isNaN(startedMs)) return null;
Expand Down Expand Up @@ -898,6 +899,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
// Closing here, not just masking, keeps the menu from reopening when the button returns.
if (snoozeMenuOpenRaw && !showSnoozeButton) setSnoozeMenuOpen(false);
const snoozeMenuOpen = snoozeMenuOpenRaw && showSnoozeButton;
const jumpHintLabel = snoozeMenuOpen ? null : props.jumpLabel;
const handlePrClick = (event: ReactMouseEvent<HTMLElement>, targetUrl?: string) => {
const url = targetUrl ?? pr?.url ?? currentLinkedPr?.url;
if (!url) return;
Expand Down Expand Up @@ -1145,6 +1147,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
className={cn(
"relative ml-auto flex h-6 min-w-8 shrink-0 items-center justify-end",
props.sweepAction !== null && "hidden",
jumpHintLabel && JUMP_HINT_SLOT_CLASS_NAME,
)}
>
<span
Expand Down Expand Up @@ -1237,10 +1240,10 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
<CheckIcon className="size-3" />
</button>
)}
{jumpHintLabel ? <JumpHintBadge label={jumpHintLabel} /> : null}
</span>
)}
{props.sweepAction !== null ? dragDestination : null}
{props.jumpLabel ? <JumpHintBadge label={props.jumpLabel} /> : null}
</TooltipTrigger>
{detailsTooltip}
</Tooltip>
Expand Down Expand Up @@ -1319,6 +1322,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
className={cn(
"group/sidebar-status-slot relative ml-auto flex h-5 min-w-8 shrink-0 items-stretch justify-end text-xs",
props.sweepAction !== null && "hidden",
jumpHintLabel && JUMP_HINT_SLOT_CLASS_NAME,
)}
>
<span
Expand Down Expand Up @@ -1447,6 +1451,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
) : null}
</span>
) : null}
{jumpHintLabel ? <JumpHintBadge label={jumpHintLabel} /> : null}
</span>
)}
{props.sweepAction !== null ? dragDestination : null}
Expand Down Expand Up @@ -1521,7 +1526,6 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
</div>
)}
</div>
{props.jumpLabel ? <JumpHintBadge label={props.jumpLabel} /> : null}
</TooltipTrigger>
{detailsTooltip}
</Tooltip>
Expand Down
Loading