diff --git a/packages/web/src/components/row-list.tsx b/packages/web/src/components/row-list.tsx index 59694d5a..c3346861 100644 --- a/packages/web/src/components/row-list.tsx +++ b/packages/web/src/components/row-list.tsx @@ -1,4 +1,4 @@ -import {useEffect, useId, useState, type ReactNode} from 'react'; +import type {ReactNode} from 'react'; import {Link} from 'react-router'; import { ContextMenu, @@ -22,7 +22,6 @@ export function RowList({header, children}: {header?: ReactNode; children: React type RowProps = { icon?: ReactNode; title: ReactNode; - tooltip?: ReactNode; // A line under the title, wrapping as long as it needs, the row growing with it. subtitle?: ReactNode; // Cells after the title, right-aligned in the order given. @@ -36,31 +35,11 @@ type RowProps = { // Its item out into the gutter of what holds the list (`--bleed`), and the row filling it, so its // hover reaches the gutter while its text stays on the line; beside something else (`after`), the // two share the item, the row's hover on its side only. -const ITEM = 'relative -mx-(--bleed)'; +const ITEM = '-mx-(--bleed)'; const ROW = 'flex w-full min-w-0 items-center gap-3 px-(--bleed) text-left text-sm hover:bg-muted/50 active:bg-muted/50'; -const TOOLTIP_CLEARANCE_PX = 112; -export function Row({to, onClick, icon, title, tooltip, subtitle, cells, menu, after}: RowProps) { - const [tooltipHovered, setTooltipHovered] = useState(false); - const [tooltipFocused, setTooltipFocused] = useState(false); - const [tooltipDismissed, setTooltipDismissed] = useState(false); - const [tooltipSide, setTooltipSide] = useState<'top' | 'bottom'>('top'); - const tooltipId = useId(); - const tooltipOpen = (tooltipHovered || tooltipFocused) && !tooltipDismissed; - useEffect(() => { - if (!tooltipOpen) { - return; - } - - const dismiss = (event: KeyboardEvent) => { - if (event.key === 'Escape') { - setTooltipDismissed(true); - } - }; - document.addEventListener('keydown', dismiss); - return () => document.removeEventListener('keydown', dismiss); - }, [tooltipOpen]); +export function Row({to, onClick, icon, title, subtitle, cells, menu, after}: RowProps) { const className = cn(ROW, subtitle ? 'min-h-10 py-2' : 'h-10'); const content = ( <> @@ -76,103 +55,32 @@ export function Row({to, onClick, icon, title, tooltip, subtitle, cells, menu, a {cells} ); - const tooltipElement = tooltip && ( -