filtering logic in notifications post interactions

src/auto-imports.d.ts

···
   const IconMaterialSymbolsTag: typeof import('~icons/material-symbols/tag.jsx').default
   const IconMdiAccountCircle: typeof import('~icons/mdi/account-circle.jsx').default
   const IconMdiAccountPlus: typeof import('~icons/mdi/account-plus.jsx').default
+  const IconMdiCheck: typeof import('~icons/mdi/check.jsx').default
   const IconMdiMessageReplyTextOutline: typeof import('~icons/mdi/message-reply-text-outline.jsx').default
   const IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline.jsx').default
 }

src/routes/notifications.tsx

···
 
 import defaultpfp from "~/../public/favicon.png";
 import { Header } from "~/components/Header";
-import { ReusableTabRoute, useReusableTabScrollRestore } from "~/components/ReusableTabRoute";
+import {
+  ReusableTabRoute,
+  useReusableTabScrollRestore,
+} from "~/components/ReusableTabRoute";
 import {
   MdiCardsHeartOutline,
   MdiCommentOutline,
···
 import {
   constellationURLAtom,
   imgCDNAtom,
+  postInteractionsFiltersAtom,
 } from "~/utils/atoms";
 import {
   useInfiniteQueryAuthorFeed,
···
     );
   }, [infiniteMentionsData]);
 
-
   useReusableTabScrollRestore("Notifications");
 
   if (isLoading) return <LoadingState text="Loading mentions..." />;
···
 
   useReusableTabScrollRestore("Notifications");
 
-  if (isLoading) return <LoadingState text="Loading mentions..." />;
+  if (isLoading) return <LoadingState text="Loading follows..." />;
   if (isError) return <ErrorState error={error} />;
 
-  if (!followsAturis?.length) return <EmptyState text="No mentions yet." />;
+  if (!followsAturis?.length) return <EmptyState text="No follows yet." />;
 
   return (
     <>
···
 
   useReusableTabScrollRestore("Notifications");
 
+  const [filters] = useAtom(postInteractionsFiltersAtom);
+  const empty = (!filters.likes && !filters.quotes && !filters.replies && !filters.reposts);
+
   return (
     <>
-      {posts.map((m) => (
+      <PostInteractionsFilterChipBar />
+      {!empty && posts.map((m) => (
         <PostInteractionsItem key={m.uri} uri={m.uri} />
       ))}
 
···
   );
 }
 
-const ORDER: ("like" | "repost" | "reply" | "quote")[] = [
-  "like",
-  "repost",
-  "reply",
-  "quote",
-];
+function PostInteractionsFilterChipBar() {
+  const [filters, setFilters] = useAtom(postInteractionsFiltersAtom);
+  // const empty = (!filters.likes && !filters.quotes && !filters.replies && !filters.reposts);
+
+  // useEffect(() => {
+  //   if (empty) {
+  //     setFilters((prev) => ({
+  //       ...prev,
+  //       likes: true,
+  //     }));
+  //   }
+  // }, [
+  //   empty,
+  //   setFilters,
+  // ]);
+
+  const toggle = (key: keyof typeof filters) => {
+    setFilters((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
+
+  return (
+    <div className="flex flex-row flex-wrap gap-2 px-4 pt-4">
+      <Chip
+        state={filters.likes}
+        text="Likes"
+        onClick={() => toggle("likes")}
+      />
+      <Chip
+        state={filters.reposts}
+        text="Reposts"
+        onClick={() => toggle("reposts")}
+      />
+      <Chip
+        state={filters.replies}
+        text="Replies"
+        onClick={() => toggle("replies")}
+      />
+      <Chip
+        state={filters.quotes}
+        text="Quotes"
+        onClick={() => toggle("quotes")}
+      />
+      <Chip
+        state={filters.showAll}
+        text="Show All Metrics"
+        onClick={() => toggle("showAll")}
+      />
+    </div>
+  );
+}
+
+function Chip({
+  state,
+  text,
+  onClick,
+}: {
+  state: boolean;
+  text: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`relative inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium transition-all
+        ${
+          state
+            ? "bg-primary/20 text-primary bg-gray-200 dark:bg-gray-800 border border-transparent"
+            : "bg-surface-container-low text-on-surface-variant border border-outline"
+        }
+        hover:bg-primary/30 active:scale-[0.97]
+        dark:border-outline-variant
+      `}
+    >
+      {state && (
+        <IconMdiCheck
+          className="mr-1.5 inline-block w-4 h-4 rounded-full bg-primary"
+          aria-hidden
+        />
+      )}
+      {text}
+    </button>
+  );
+}
 
 function PostInteractionsItem({ uri }: { uri: string }) {
+  const [filters] = useAtom(postInteractionsFiltersAtom);
   const { data: links } = useQueryConstellation({
     method: "/links/all",
     target: uri,
···
 
   const all = likes + replies + reposts + quotes;
 
+  const failLikes = filters.likes && likes < 1;
+  const failReposts = filters.reposts && reposts < 1;
+  const failReplies = filters.replies && replies < 1;
+  const failQuotes = filters.quotes && quotes < 1;
+
+  const showLikes = filters.showAll || filters.likes
+  const showReposts = filters.showAll || filters.reposts
+  const showReplies = filters.showAll || filters.replies
+  const showQuotes = filters.showAll || filters.quotes
+
+  const showNone = !showLikes && !showReposts && !showReplies && !showQuotes;
+
+  const fail = failLikes || failReposts || failReplies || failQuotes || showNone;
+
+
+  if (fail) return;
+
   return (
     <div className="flex flex-col">
+      {/* <span>fail likes {failLikes ? "true" : "false"}</span>
+      <span>fail repost {failReposts ? "true" : "false"}</span>
+      <span>fail reply {failReplies ? "true" : "false"}</span>
+      <span>fail qupte {failQuotes ? "true" : "false"}</span> */}
       <div className="border rounded-xl mx-4 mt-4 overflow-hidden">
         <UniversalPostRendererATURILoader
           isQuote
···
           concise={true}
         />
         <div className="flex flex-col divide-x">
-          <InteractionsButton
-            key={likes}
+          {showLikes &&(<InteractionsButton
             type={"like"}
             uri={uri}
             count={likes}
-          />
-          <InteractionsButton
-            key={reposts}
+          />)}
+          {showReposts && (<InteractionsButton
             type={"repost"}
             uri={uri}
             count={reposts}
-          />
-          <InteractionsButton
-            key={replies}
+          />)}
+          {showReplies && (<InteractionsButton
             type={"reply"}
             uri={uri}
             count={replies}
-          />
-          <InteractionsButton
-            key={quotes}
+          />)}
+          {showQuotes && (<InteractionsButton
             type={"quote"}
             uri={uri}
             count={quotes}
-          />
+          />)}
           {!all && (
             <div className="text-center text-gray-500 dark:text-gray-400 pb-3 pt-2 border-t">
               No interactions yet.

src/utils/atoms.ts

···
   activeTab: string;
   scrollPositions: Record<string, number>;
 };
+/**
+ * @deprecated should be safe to remove i think
+ */
 export const notificationsScrollAtom = atom<TabRouteScrollState>({
   activeTab: "mentions",
   scrollPositions: {},
 });
+
+export type InteractionFilter = {
+  likes: boolean;
+  reposts: boolean;
+  quotes: boolean;
+  replies: boolean;
+  showAll: boolean;
+};
+const defaultFilters: InteractionFilter = {
+  likes: true,
+  reposts: true,
+  quotes: true,
+  replies: true,
+  showAll: false,
+};
+export const postInteractionsFiltersAtom = atomWithStorage<InteractionFilter>(
+  "postInteractionsFilters",
+  defaultFilters
+);
 
 export const reusableTabRouteScrollAtom = atom<Record<string, TabRouteScrollState | undefined> | undefined>({});