diff --git a/apps/code/src/renderer/features/sidebar/components/SidebarItem.tsx b/apps/code/src/renderer/features/sidebar/components/SidebarItem.tsx index fb1d79088..af10a1938 100644 --- a/apps/code/src/renderer/features/sidebar/components/SidebarItem.tsx +++ b/apps/code/src/renderer/features/sidebar/components/SidebarItem.tsx @@ -1,4 +1,6 @@ +import { Tooltip } from "@components/ui/Tooltip"; import { Button, cn } from "@posthog/quill"; +import { useCallback, useRef, useState } from "react"; import type { SidebarItemAction } from "../types"; const INDENT_SIZE = 8; @@ -34,6 +36,34 @@ export function SidebarItem({ endContent, disabled, }: SidebarItemProps) { + const labelRef = useRef(null); + const [showLabelTooltip, setShowLabelTooltip] = useState(false); + const canShowLabelTooltip = + typeof label === "string" || typeof label === "number"; + + const handleLabelMouseEnter = useCallback(() => { + const el = labelRef.current; + if (el && el.scrollWidth > el.clientWidth) { + setShowLabelTooltip(true); + } + }, []); + + const handleLabelMouseLeave = useCallback(() => { + setShowLabelTooltip(false); + }, []); + + const labelSpan = ( + // biome-ignore lint/a11y/noStaticElementInteractions: hover handlers only drive a visual tooltip for truncated labels + + {label} + + ); + return (