fix: custom filter not removed + use popover

src/adapter/adapter/filter.ts

@@ -1,4 +1,8 @@
-import { RawFilter } from "../../view/store/filter";
+export interface RawFilter {
+	id?: number;
+	value: string;
+	enabled: boolean;
+}
 
 export interface RawFilterState {
 	regex: RawFilter[];

src/view/components/FilterPopup/FilterPopup.module.css

@@ -3,20 +3,60 @@
 	display: flex;
 	height: 100%;
 	align-items: center;
+	anchor-name: --filter-popover-anchor;
 }
 
 .filter {
-	position: absolute;
-	top: 90%;
-	right: -0.5rem;
+	position: fixed;
+	inset: 2rem 0.75rem auto auto;
+	margin: 0;
 	border-top: none;
 	border: 0.0625rem solid var(--color-border);
 	background: var(--color-bg);
+	color: var(--color-text);
+	font-family: sans-serif;
+	font-size: 0.875rem;
 	width: 12rem;
 	z-index: 10;
 	padding: 0.5rem 0.5rem 0.5rem 0.75rem;
 }
 
+.filter:popover-open {
+	display: block;
+}
+
+.filterBtnWrapper:has(.filter:popover-open)
+	> :global(.icon-btn)
+	:global(.icon-btn-inner) {
+	position: relative;
+	z-index: 2;
+	color: var(--color-selected-text);
+}
+
+.filterBtnWrapper:has(.filter:popover-open)
+	> :global(.icon-btn)
+	:global(.icon-btn-bg) {
+	display: block;
+	content: "";
+	position: absolute;
+	left: -0.25rem;
+	top: -0.25rem;
+	right: -0.25rem;
+	bottom: -0.25rem;
+	background: var(--color-selected-bg);
+	border-radius: 0.2rem;
+}
+
+@supports (position-area: bottom) {
+	.filter {
+		position: fixed;
+		position-area: bottom span-left;
+		position-anchor: --filter-popover-anchor;
+		inset: auto;
+		margin-top: 0.25rem;
+	}
+}
+
 .filter form {
 	margin: 0;
 }

src/view/components/FilterPopup/FilterPopup.tsx

@@ -74,14 +74,26 @@ export function FilterPopup({
 	onFiltersSubmit,
 	filterActions,
 	className,
+	id,
+	onOpen,
 }: {
 	children: ComponentChildren;
 	filterActions?: ComponentChildren;
 	onFiltersSubmit: () => void;
 	className?: string;
+	id: string;
+	onOpen?: () => void;
 }) {
 	return (
-		<div class={`${s.filter} ${className}`} data-testid="filter-popup">
+		<div
+			id={id}
+			popover="auto"
+			class={`${s.filter} ${className || ""}`}
+			data-testid="filter-popup"
+			onToggle={e => {
+				if ((e as any).newState === "open") onOpen?.();
+			}}
+		>
 			<form
 				onSubmit={e => {
 					e.preventDefault();

src/view/components/IconBtn.tsx

@@ -7,6 +7,7 @@ export interface IconBtnProps {
 	disabled?: boolean;
 	color?: string;
 	onClick?: () => void;
+	popoverTarget?: string;
 	styling?: "secondary" | "primary";
 	children: ComponentChildren;
 	testId?: string;
@@ -22,6 +23,7 @@ export function IconBtn(props: IconBtnProps) {
 			title={props.title}
 			disabled={props.disabled}
 			data-testid={props.testId}
+			popovertarget={props.popoverTarget}
 			onClick={e => {
 				e.stopPropagation();
 				if (props.onClick) props.onClick();

src/view/components/elements/TreeBar.tsx

@@ -6,7 +6,6 @@ import { Icon, Picker } from "../icons";
 import { useStore } from "../../store/react-bindings";
 import s from "./TreeBar.module.css";
 import { useSearch } from "../../store/search";
-import { OutsideClick } from "../OutsideClick";
 import { FilterCheck, FilterPopup } from "../FilterPopup/FilterPopup";
 import filterBarStyles from "../FilterPopup/FilterPopup.module.css";
 
@@ -15,8 +14,6 @@ export function TreeBar() {
 	const isPicking = store.isPicking.value;
 	const { value, count, selected, goPrev, goNext } = useSearch();
 
-	const [filterVisible, setFilterVisible] = useState(false);
-
 	const onKeyDown = (e: KeyboardEvent) => {
 		if (e.key === "Enter") {
 			e.preventDefault();
@@ -92,20 +89,16 @@ export function TreeBar() {
 			</div>
 			<ActionSeparator />
 			<div class={s.btnWrapper}>
-				<OutsideClick
-					onClick={() => setFilterVisible(false)}
-					class={filterBarStyles.filterBtnWrapper}
-				>
+				<div class={filterBarStyles.filterBtnWrapper}>
 					<IconBtn
 						title="Filter Components"
-						active={filterVisible}
 						testId="filter-menu-button"
-						onClick={() => setFilterVisible(!filterVisible)}
+						popoverTarget="tree-filter-popup"
 					>
 						<Icon icon="filter-list" />
 					</IconBtn>
-					{filterVisible && <TreeFilterPopup />}
-				</OutsideClick>
+					<TreeFilterPopup />
+				</div>
 			</div>
 		</Actions>
 	);
@@ -123,9 +116,24 @@ export function TreeFilterPopup() {
 		store.filter.filterTextSignal.value,
 	);
 	const [filters, setFilters] = useState(store.filter.filters.value);
+	const resetFilters = () => {
+		setFilterDom(store.filter.filterDom.value);
+		setFilterFragment(store.filter.filterFragment.value);
+		setFilterHoc(store.filter.filterHoc.value);
+		setFilterRoot(store.filter.filterRoot.value);
+		setFilterTextSignal(store.filter.filterTextSignal.value);
+		setFilters(store.filter.filters.value);
+	};
+	const removeFilter = (id: number) => {
+		const nextFilters = filters.filter(filter => filter.id !== id);
+		setFilters(nextFilters);
+		store.filter.filters.value = nextFilters;
+	};
 
 	return (
 		<FilterPopup
+			id="tree-filter-popup"
+			onOpen={resetFilters}
 			onFiltersSubmit={() => {
 				store.filter.filterDom.value = filterDom;
 				store.filter.filterFragment.value = filterFragment;
@@ -143,7 +151,10 @@ export function TreeFilterPopup() {
 					title="Add new filter"
 					testId="add-filter"
 					onClick={() =>
-						setFilters([...filters, { enabled: false, value: "" }])
+						setFilters([
+							...filters,
+							store.filter.createFilter({ enabled: false, value: "" }),
+						])
 					}
 				>
 					<span class={filterBarStyles.filterAdd}>
@@ -182,17 +193,20 @@ export function TreeFilterPopup() {
 				checked={filterTextSignal}
 			/>
 			{/* Custom user filters */}
-			{filters.map((x, i) => {
+			{filters.map(x => {
 				return (
-					<div key={i} class={filterBarStyles.filterRow}>
+					<div key={x.id} class={filterBarStyles.filterRow}>
 						<label class={filterBarStyles.filterCheck}>
 							<input
 								type="checkbox"
 								checked={x.enabled}
 								onInput={e => {
-									const copy = [...filters];
-									copy[i].enabled = (e.target as any).checked;
-									setFilters(copy);
+									const enabled = (e.target as any).checked;
+									setFilters(
+										filters.map(filter =>
+											filter.id === x.id ? { ...filter, enabled } : filter,
+										),
+									);
 								}}
 							/>
 							<Icon
@@ -206,23 +220,22 @@ export function TreeFilterPopup() {
 								placeholder="MyComponent"
 								value={x.value}
 								onInput={e => {
-									const copy = [...filters];
-									copy[i].value = (e.target as any).value;
-									setFilters(copy);
+									const value = (e.target as any).value;
+									setFilters(
+										filters.map(filter =>
+											filter.id === x.id ? { ...filter, value } : filter,
+										),
+									);
 								}}
 							/>
 						</span>
 						<span class={filterBarStyles.removeWrapper}>
 							<IconBtn
 								title="Remove filter"
 								styling="secondary"
+								testId="remove-filter"
 								onClick={() => {
-									const idx = filters.indexOf(x);
-									if (idx > -1) {
-										const copy = [...filters];
-										copy.splice(idx, 1);
-										setFilters(copy);
-									}
+									removeFilter(x.id);
 								}}
 							>
 								<Icon icon="remove" />

src/view/components/profiler/components/TimelineBar/TimelineBar.tsx

@@ -14,7 +14,6 @@ import {
 } from "../../data/commits";
 import { Icon } from "../../../icons";
 import { useComputed } from "@preact/signals";
-import { OutsideClick } from "../../../OutsideClick";
 import { FilterNumber, FilterPopup } from "../../../FilterPopup/FilterPopup";
 import filterBarStyles from "../../../FilterPopup/FilterPopup.module.css";
 import s from "./TimelineBar.module.css";
@@ -27,8 +26,6 @@ export function TimelineBar() {
 	const isSupported = store.profiler.isSupported.value;
 	const selectedCommit = store.profiler.activeCommitIdx.value;
 
-	const [filterVisible, setFilterVisible] = useState(false);
-
 	const stats = useComputed(() => {
 		return {
 			max: Math.max(16, ...store.profiler.commits.value.map(x => x.duration)),
@@ -41,12 +38,8 @@ export function TimelineBar() {
 
 	const onCommitChange = useCallback(
 		(n: number) => {
-			const {
-				activeCommitIdx,
-				selectedNodeId,
-				activeCommit,
-				flamegraphType,
-			} = store.profiler;
+			const { activeCommitIdx, selectedNodeId, activeCommit, flamegraphType } =
+				store.profiler;
 
 			activeCommitIdx.value = n;
 			const commit = activeCommit.value;
@@ -117,20 +110,16 @@ export function TimelineBar() {
 				</span>
 			)}
 			{isSupported && !isRecording && commits.length !== 0 && (
-				<OutsideClick
-					onClick={() => setFilterVisible(false)}
-					class={filterBarStyles.filterBtnWrapper}
-				>
+				<div class={filterBarStyles.filterBtnWrapper}>
 					<IconBtn
 						title="Filter Commits"
-						active={filterVisible}
 						testId="filter-menu-button"
-						onClick={() => setFilterVisible(!filterVisible)}
+						popoverTarget="timeline-filter-popup"
 					>
 						<Icon icon="filter-list" />
 					</IconBtn>
-					{filterVisible && <TimelineFilterPopup />}
-				</OutsideClick>
+					<TimelineFilterPopup />
+				</div>
 			)}
 		</Actions>
 	);
@@ -144,7 +133,11 @@ export function TimelineFilterPopup() {
 
 	return (
 		<FilterPopup
+			id="timeline-filter-popup"
 			className={s.filterPopup}
+			onOpen={() =>
+				setFilterCommitsUnder(store.profiler.filterCommitsUnder.value)
+			}
 			onFiltersSubmit={() => {
 				store.profiler.filterCommitsUnder.value = filterCommitsUnder
 					? filterCommitsUnder