profile feed filters

src/components/UniversalPostRenderer.tsx

···
+import * as ATPAPI from "@atproto/api"
 import { useNavigate } from "@tanstack/react-router";
 import DOMPurify from "dompurify";
 import { useAtom } from "jotai";
···
   lightboxCallback?: (d: LightboxProps) => void;
   maxReplies?: number;
   isQuote?: boolean;
+  filterNoReplies?: boolean;
+  filterMustHaveMedia?: boolean;
+  filterMustBeReply?: boolean;
 }
 
 // export async function cachedGetRecord({
···
   lightboxCallback,
   maxReplies,
   isQuote,
+  filterNoReplies,
+  filterMustHaveMedia,
+  filterMustBeReply
 }: UniversalPostRendererATURILoaderProps) {
   // todo remove this once tree rendering is implemented, use a prop like isTree
   const TEMPLINEAR = true;
···
         lightboxCallback={lightboxCallback}
         maxReplies={maxReplies}
         isQuote={isQuote}
+        filterNoReplies={filterNoReplies}
+        filterMustHaveMedia={filterMustHaveMedia}
+        filterMustBeReply={filterMustBeReply}
       />
       <>
         {(maxReplies && maxReplies === 0 && replies && replies > 0) ? (
···
   lightboxCallback,
   maxReplies,
   isQuote,
+  filterNoReplies,
+  filterMustHaveMedia,
+  filterMustBeReply,
 }: {
   postRecord: any;
   profileRecord: any;
···
   lightboxCallback?: (d: LightboxProps) => void;
   maxReplies?: number;
   isQuote?: boolean;
+  filterNoReplies?: boolean;
+  filterMustHaveMedia?: boolean;
+  filterMustBeReply?: boolean;
 }) {
   // /*mass comment*/ console.log(`received aturi: ${aturi} of post content: ${postRecord}`);
   const navigate = useNavigate();
···
   //   run();
   // }, [postRecord, resolved?.did]);
 
+  const hasEmbed = (postRecord?.value as ATPAPI.AppBskyFeedPost.Record)?.embed;
+  const hasImages = hasEmbed?.$type === "app.bsky.embed.images";
+  const hasVideo = hasEmbed?.$type === "app.bsky.embed.video";
+  const isquotewithmedia = hasEmbed?.$type === "app.bsky.embed.recordWithMedia";
+  const isQuotewithImages = isquotewithmedia && (hasEmbed as ATPAPI.AppBskyEmbedRecordWithMedia.Main)?.media?.$type === "app.bsky.embed.images";
+  const isQuotewithVideo = isquotewithmedia && (hasEmbed as ATPAPI.AppBskyEmbedRecordWithMedia.Main)?.media?.$type === "app.bsky.embed.video";
+
+  const hasMedia = hasEmbed && (hasImages || hasVideo || isQuotewithImages || isQuotewithVideo);
+
   const {
     data: hydratedEmbed,
     isLoading: isEmbedLoading,
···
   // }, [fakepost, get, set]);
   const thereply = (fakepost?.record as AppBskyFeedPost.Record)?.reply?.parent
     ?.uri;
-  const feedviewpostreplydid = thereply ? new AtUri(thereply).host : undefined;
+  const feedviewpostreplydid = thereply&&!filterNoReplies ? new AtUri(thereply).host : undefined;
   const replyhookvalue = useQueryIdentity(
     feedviewpost ? feedviewpostreplydid : undefined
   );
···
     repostedby ? aturirepostbydid : undefined
   );
   const feedviewpostrepostedbyhandle = repostedbyhookvalue?.data?.handle;
+
+  if (filterNoReplies && thereply) return null;
+
+  if (filterMustHaveMedia && !hasMedia) return null;
+
+  if (filterMustBeReply && !thereply) return null;
+
   return (
     <>
       {/* <p>
         {postRecord?.value?.embed.$type + " " + JSON.stringify(hydratedEmbed)}
       </p> */}
+      {/* <span>filtermustbereply is {filterMustBeReply ? "true" : "false"}</span>
+      <span>thereply is {thereply ? "true" : "false"}</span> */}
       <UniversalPostRenderer
         expanded={detailed}
         onPostClick={() =>

src/routes/notifications.tsx

···
   );
 }
 
-function Chip({
+export function Chip({
   state,
   text,
   onClick,

src/routes/profile.$did/index.tsx

···
   UniversalPostRendererATURILoader,
 } from "~/components/UniversalPostRenderer";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
-import { imgCDNAtom } from "~/utils/atoms";
+import { imgCDNAtom, profileChipsAtom } from "~/utils/atoms";
 import {
   toggleFollow,
   useGetFollowState,
···
   useQueryIdentity,
   useQueryProfile,
 } from "~/utils/useQuery";
+
+import { Chip } from "../notifications";
 
 export const Route = createFileRoute("/profile/$did/")({
   component: ProfileComponent,
···
   );
 }
 
+export type ProfilePostsFilter = {
+  posts: boolean,
+  replies: boolean,
+  mediaOnly: boolean,
+}
+export const defaultProfilePostsFilter: ProfilePostsFilter = {
+  posts: true,
+  replies: true,
+  mediaOnly: false,
+}
+
+function ProfilePostsFilterChipBar({filters, toggle}:{filters: ProfilePostsFilter | null, toggle: (key: keyof ProfilePostsFilter) => void}) {
+  const empty = (!filters?.replies && !filters?.posts);
+  const almostEmpty = (!filters?.replies && filters?.posts);
+
+  useEffect(() => {
+    if (empty) {
+      toggle("posts")
+    }
+  }, [empty, toggle]);
+
+  return (
+    <div className="flex flex-row flex-wrap gap-2 px-4 pt-4">
+      <Chip
+        state={filters?.posts ?? true}
+        text="Posts"
+        onClick={() => almostEmpty ? null : toggle("posts")}
+      />
+      <Chip
+        state={filters?.replies ?? true}
+        text="Replies"
+        onClick={() => toggle("replies")}
+      />
+      <Chip
+        state={filters?.mediaOnly ?? false}
+        text="Media Only"
+        onClick={() => toggle("mediaOnly")}
+      />
+    </div>
+  );
+}
+
 function PostsTab({ did }: { did: string }) {
+  // todo: this needs to be a (non-persisted is fine) atom to survive navigation
+  const [filterses, setFilterses] = useAtom(profileChipsAtom);
+  const filters = filterses?.[did];
+  const setFilters = (obj: ProfilePostsFilter) => {
+    setFilterses((prev)=>{
+      return{
+        ...prev,
+        [did]: obj
+      }
+    })
+  }
+  useEffect(()=>{
+    if (!filters) {
+      setFilters(defaultProfilePostsFilter);
+    }
+  })
   useReusableTabScrollRestore(`Profile` + did);
   const queryClient = useQueryClient();
   const {
···
     [postsData]
   );
 
+  const toggle = (key: keyof ProfilePostsFilter) => {
+    setFilterses(prev => {
+      const existing = prev[did] ?? { posts: false, replies: false, mediaOnly: false }; // default
+
+      return {
+        ...prev,
+        [did]: {
+          ...existing,
+          [key]: !existing[key], // safely negate
+        },
+      };
+    });
+  };
+
   return (
     <>
-      <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4">
+      {/* <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4">
         Posts
-      </div>
+      </div> */}
+      <ProfilePostsFilterChipBar filters={filters} toggle={toggle} />
       <div>
         {posts.map((post) => (
           <UniversalPostRendererATURILoader
             key={post.uri}
             atUri={post.uri}
             feedviewpost={true}
+            filterNoReplies={!filters?.replies}
+            filterMustHaveMedia={filters?.mediaOnly}
+            filterMustBeReply={!filters?.posts}
           />
         ))}
       </div>

src/utils/atoms.ts

···
 import { atomWithStorage } from "jotai/utils";
 import { useEffect } from "react";
 
+import { type ProfilePostsFilter } from "~/routes/profile.$did";
+
 export const store = createStore();
 
 export const quickAuthAtom = atomWithStorage<string | null>(
···
   "internal-liked-posts",
   {}
 );
+
+export const profileChipsAtom = atom<Record<string, ProfilePostsFilter | null>>({})
 
 export const defaultconstellationURL = "constellation.microcosm.blue";
 export const constellationURLAtom = atomWithStorage<string>(