Profile: filter recent toots

- material: new Menu component
- material/theme: animation curves
- TootFilterButton

src/profiles/Profile.tsx

@@ -19,8 +19,8 @@ import { useWindowSize } from "@solid-primitives/resize-observer";
 import { css } from "solid-styled";
 import { createTimeline } from "../masto/timelines";
 import TootList from "../timelines/TootList";
-import { createIntersectionObserver } from "@solid-primitives/intersection-observer";
 import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
+import TootFilterButton from "./TootFilterButton";
 
 const Profile: Component = () => {
   const navigate = useNavigate();
@@ -48,7 +48,6 @@ const Profile: Component = () => {
       threshold: 0.1,
     },
   );
-
   onCleanup(() => obx.disconnect());
 
   const [profile] = createResource(
@@ -58,9 +57,18 @@ const Profile: Component = () => {
     },
   );
 
+  const [recentTootFilter, setRecentTootFilter] = createSignal({
+    boost: true,
+    reply: true,
+    original: true,
+  });
+
   const [recentToots] = createTimeline(
     () => session().client.v1.accounts.$select(params.id).statuses,
-    () => ({ limit: 20 }),
+    () => {
+      const { boost, reply } = recentTootFilter();
+      return { limit: 20, excludeReblogs: !boost, excludeReplies: !reply };
+    },
   );
 
   const bannerImg = () => profile()?.header;
@@ -126,7 +134,9 @@ const Profile: Component = () => {
             variant="dense"
             sx={{
               display: "flex",
-              color: scrolledPastBanner() ? undefined : bannerSampledColors()?.text,
+              color: scrolledPastBanner()
+                ? undefined
+                : bannerSampledColors()?.text,
               paddingTop: "var(--safe-area-inset-top)",
             }}
           >
@@ -238,6 +248,19 @@ const Profile: Component = () => {
         </table>
       </div>
 
+      <div>
+        <TootFilterButton
+          options={{
+            boost: "Boosteds",
+            reply: "Replies",
+            original: "Originals",
+          }}
+          applied={recentTootFilter()}
+          onApply={setRecentTootFilter}
+          disabledKeys={["original"]}
+        ></TootFilterButton>
+      </div>
+
       <TimeSourceProvider value={time}>
         <TootList
           threads={recentToots.list}