TootFilterButton: show the menu in the click pos

src/material/Menu.tsx

@@ -13,10 +13,12 @@ import {
   animateShrinkToTopRight,
 } from "../platform/anim";
 
+type Anchor = Pick<DOMRect, "top" | "left" | "right">
+
 type Props = {
   open?: boolean;
   onClose?: JSX.EventHandlerUnion<HTMLDialogElement, Event>;
-  anchor: () => DOMRect;
+  anchor: () => Anchor;
 };
 
 function px(n?: number) {

src/profiles/TootFilterButton.tsx

@@ -1,15 +1,5 @@
-import {
+import { Button, MenuItem, Checkbox, ListItemText } from "@suid/material";
-  Button,
+import { createMemo, createSignal, createUniqueId, For } from "solid-js";
-  MenuItem,
-  Checkbox,
-  ListItemText,
-} from "@suid/material";
-import {
-  createMemo,
-  createSignal,
-  createUniqueId,
-  For,
-} from "solid-js";
 import Menu from "../material/Menu";
 import { FilterList, FilterListOff } from "@suid/icons-material";
 
@@ -68,9 +58,20 @@ function TootFilterButton<F extends Record<string, string>>(props: Props<F>) {
     );
   };
 
+  let anchor: { left: number; top: number; right: number };
+
+  const onClick = (event: MouseEvent) => {
+    anchor = {
+      left: event.clientX,
+      right: event.clientX,
+      top: event.clientY,
+    };
+    setOpen(true);
+  };
+
   return (
     <>
-      <Button size="large" onClick={[setOpen, true]} id={buttonId}>
+      <Button size="large" onClick={onClick} id={buttonId}>
         {appliedKeys().length === optionKeys().length ? (
           <FilterListOff />
         ) : (
@@ -79,13 +80,7 @@ function TootFilterButton<F extends Record<string, string>>(props: Props<F>) {
 
         <span style={{ "margin-left": "0.5em" }}>{text()}</span>
       </Button>
-      <Menu
+      <Menu open={open()} onClose={[setOpen, false]} anchor={() => anchor}>
-        open={open()}
-        onClose={[setOpen, false]}
-        anchor={() =>
-          document.getElementById(buttonId)!.getBoundingClientRect()
-        }
-      >
         <For each={Object.keys(props.options)}>
           {(item, idx) => (
             <>