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 && (
-
- {tooltip}
-
-
- );
- const placeTooltip = (element: HTMLElement) => {
- setTooltipSide(element.getBoundingClientRect().top < TOOLTIP_CLEARANCE_PX ? 'bottom' : 'top');
- setTooltipDismissed(false);
- };
- const showHoveredTooltip = tooltip
- ? (event: {currentTarget: HTMLElement}) => {
- placeTooltip(event.currentTarget);
- setTooltipHovered(true);
- }
- : undefined;
- const hideHoveredTooltip = tooltip ? () => setTooltipHovered(false) : undefined;
- const showFocusedTooltip = tooltip
- ? (event: {currentTarget: HTMLElement}) => {
- placeTooltip(event.currentTarget);
- setTooltipFocused(true);
- }
- : undefined;
- const hideFocusedTooltip = tooltip ? () => setTooltipFocused(false) : undefined;
- const control =
+ const link =
to !== undefined ? (
-
+
{content}
) : (
-