e234afa26a
Replaces the permanent filter-row under Table's headers with a small filter-icon button in each filterable column's own header cell. The icon fades in on header hover/focus via a CSS opacity transition, or stays visible outright once that column actually has a filter set (mara: "instead of a filter row, add little filter icons on header hover with fade in out animation ... when a filter is set, the filter icon does not disappear"). Clicking it opens a small anchored popover directly under the header holding the exact same filter control filterMode already provides (text input or select) -- the underlying filter mechanism from hyperhive#4088 is unchanged, only where the control lives moved. Close-on-outside-click/Escape mirrors the contract Dropdown already gives its own popover, adapted to a shared listener across every column instead of a ref per column since only one popover is ever open at a time. New FilterIcon in @hive/shared's icons.tsx (a plain inline SVG funnel, same Feather/lucide-style shape as the existing GearIcon/LinkIcon) -- found and reused that pattern rather than reaching for an emoji glyph, matching the documented reason those two exist as SVG in the first place (mara, on the old emoji icons: inconsistent size/weight across platforms).
81 lines
3.4 KiB
TypeScript
81 lines
3.4 KiB
TypeScript
// Small inline-SVG icons shared across pages — deliberately NOT emoji
|
|
// glyphs for a trigger button's own icon. mara, live, on swarm-ui's
|
|
// original links/settings buttons: "links and settings icon styles
|
|
// different / all different sizes" — an emoji glyph renders via the
|
|
// OS/browser's colour-emoji font at that font's own fixed metrics,
|
|
// ignoring `font-size`/`color`, so it can never match a neighbouring
|
|
// icon in size or weight on any platform (and some codepoints, like the
|
|
// gear `⚙`, aren't even reliably covered by every font — showing as a
|
|
// missing-glyph box or an oddly-weighted fallback depending on what's
|
|
// installed). Same `stroke`/`viewBox`/size shape for every icon here so
|
|
// they read as one rendering path wherever they're mounted — Feather/
|
|
// lucide-style line icons, `currentColor` stroke so they pick up
|
|
// whatever text colour the surrounding `Badge`/button already has.
|
|
//
|
|
// Originated in swarm-ui's `shell/SettingsMenu.tsx` (gear) and
|
|
// `shell/LinksMenu.tsx` (link chain) as separate inline copies; moved
|
|
// here once the agent page's `MetaNav`/`SettingsMenu` needed the exact
|
|
// same icons too (mara: the settings trigger went back to a text glyph
|
|
// when `SettingsMenu` was extracted into `@hive/shared`, undoing this
|
|
// fix — restoring the SVG here, in the shared component this time,
|
|
// fixes it for both pages at once instead of just one).
|
|
export function GearIcon() {
|
|
return (
|
|
<svg
|
|
width="1.3em"
|
|
height="1.3em"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function LinkIcon() {
|
|
return (
|
|
<svg
|
|
width="1.3em"
|
|
height="1.3em"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// A funnel, the standard "filter" glyph — smaller than the other two
|
|
// (1em not 1.3em) since its first caller sits inside a table header
|
|
// cell, not a nav trigger button; scale via the caller's own
|
|
// `font-size` like the others rather than a hardcoded size prop, same
|
|
// reasoning as `GearIcon`/`LinkIcon` above (`currentColor` stroke).
|
|
export function FilterIcon() {
|
|
return (
|
|
<svg
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
|
|
</svg>
|
|
);
|
|
}
|