wafrn bites

src/routes/notifications.tsx

···
 import { useAuth } from "~/providers/UnifiedAuthProvider";
 import {
   constellationURLAtom,
+  enableBitesAtom,
   imgCDNAtom,
   postInteractionsFiltersAtom,
 } from "~/utils/atoms";
···
 });
 
 export default function NotificationsTabs() {
+  const [bitesEnabled] = useAtom(enableBitesAtom);
   return (
     <ReusableTabRoute
       route={`Notifications`}
···
         Mentions: <MentionsTab />,
         Follows: <FollowsTab />,
         "Post Interactions": <PostInteractionsTab />,
+        ...bitesEnabled ? {
+          Bites: <BitesTab />,
+        } : {}
       }}
     />
   );
···
   if (isError) return <ErrorState error={error} />;
 
   if (!followsAturis?.length) return <EmptyState text="No follows yet." />;
+
+  return (
+    <>
+      {followsAturis.map((m) => (
+        <NotificationItem key={m} notification={m} />
+      ))}
+
+      {hasNextPage && (
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={isFetchingNextPage}
+          className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold disabled:opacity-50"
+        >
+          {isFetchingNextPage ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </>
+  );
+}
+
+
+export function BitesTab({did}:{did?:string}) {
+  const { agent } = useAuth();
+  const userdidunsafe = did ?? agent?.did;
+  const { data: identity} = useQueryIdentity(userdidunsafe);
+  const userdid = identity?.did;
+  
+  const [constellationurl] = useAtom(constellationURLAtom);
+  const infinitequeryresults = useInfiniteQuery({
+    ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
+      {
+        constellation: constellationurl,
+        method: "/links",
+        target: "at://"+userdid,
+        collection: "net.wafrn.feed.bite",
+        path: ".subject",
+        staleMult: 0 // safe fun
+      }
+    ),
+    enabled: !!userdid,
+  });
+
+  const {
+    data: infiniteFollowsData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+    error,
+  } = infinitequeryresults;
+
+  const followsAturis = React.useMemo(() => {
+    // Get all replies from the standard infinite query
+    return (
+      infiniteFollowsData?.pages.flatMap(
+        (page) =>
+          page?.linking_records.map(
+            (r) => `at://${r.did}/${r.collection}/${r.rkey}`
+          ) ?? []
+      ) ?? []
+    );
+  }, [infiniteFollowsData]);
+
+  useReusableTabScrollRestore("Notifications");
+
+  if (isLoading) return <LoadingState text="Loading bites..." />;
+  if (isError) return <ErrorState error={error} />;
+
+  if (!followsAturis?.length) return <EmptyState text="No bites yet." />;
 
   return (
     <>
···
 
 export function NotificationItem({ notification }: { notification: string }) {
   const aturi = new AtUri(notification);
+  const bite = aturi.collection === "net.wafrn.feed.bite";
   const navigate = useNavigate();
   const { data: identity } = useQueryIdentity(aturi.host);
   const resolvedDid = identity?.did;

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

···
-import { RichText } from "@atproto/api";
+import { Agent, RichText } from "@atproto/api";
 import * as ATPAPI from "@atproto/api";
+import { TID } from "@atproto/common-web";
 import { useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useAtom } from "jotai";
···
   UniversalPostRendererATURILoader,
 } from "~/components/UniversalPostRenderer";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
-import { imgCDNAtom, profileChipsAtom } from "~/utils/atoms";
+import { enableBitesAtom, imgCDNAtom, profileChipsAtom } from "~/utils/atoms";
 import {
   toggleFollow,
   useGetFollowState,
···
         </div>
 
         <div className="absolute right-[16px] top-[170px] flex flex-row gap-2.5">
+          <BiteButton targetdidorhandle={did} />
           {/* 
             todo: full follow and unfollow backfill (along with partial likes backfill, 
             just enough for it to be useful) 
···
     </>
   );
 }
+
+export function BiteButton({
+  targetdidorhandle,
+}: {
+  targetdidorhandle: string;
+}) {
+  const { agent } = useAuth();
+  const { data: identity } = useQueryIdentity(targetdidorhandle);
+  const [show] = useAtom(enableBitesAtom);
+
+  if (!show) return
+
+  return (
+    <>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          sendBite({
+            agent: agent || undefined,
+            targetDid: identity?.did,
+          });
+        }}
+        className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]"
+      >
+        Bite
+      </button>
+    </>
+  );
+}
+
+function sendBite({
+  agent,
+  targetDid,
+}: {
+  agent?: Agent;
+  targetDid?: string;
+}) {
+  if (!agent?.did || !targetDid) return;
+  const newRecord = {
+    repo: agent.did,
+    collection: "net.wafrn.feed.bite",
+    rkey: TID.next().toString(),
+    record: {
+      $type: "net.wafrn.feed.bite",
+      subject: "at://"+targetDid,
+      createdAt: new Date().toISOString(),
+    },
+  };
+
+  agent.com.atproto.repo.createRecord(newRecord).catch((err) => {
+    console.error("Bite failed:", err);
+  });
+}
+
 
 export function Mutual({ targetdidorhandle }: { targetdidorhandle: string }) {
   const { agent } = useAuth();

src/routes/settings.tsx

···
 import { createFileRoute } from "@tanstack/react-router";
-import { useAtom } from "jotai";
-import { Slider } from "radix-ui";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { Slider, Switch } from "radix-ui";
+import { useEffect,useState } from "react";
 
 import { Header } from "~/components/Header";
 import Login from "~/components/Login";
···
   defaultImgCDN,
   defaultslingshotURL,
   defaultVideoCDN,
+  enableBitesAtom,
   hueAtom,
   imgCDNAtom,
   slingshotURLAtom,
···
       />
 
       <Hue />
+      <SwitchSetting
+        atom={enableBitesAtom}
+        title={"Bites"}
+        description={"Enable Wafrn Bites"}
+        //init={false}
+        />
       <p className="text-gray-500 dark:text-gray-400 py-4 px-6 text-sm">
         please restart/refresh the app if changes arent applying correctly
       </p>
     </>
   );
 }
+
+export function SwitchSetting({
+  atom,
+  title,
+  description,
+}: {
+  atom: typeof enableBitesAtom;
+  title?: string;
+  description?: string;
+}) {
+  const value = useAtomValue(atom);
+  const setValue = useSetAtom(atom);
+
+  const [hydrated, setHydrated] = useState(false);
+  // eslint-disable-next-line react-hooks/set-state-in-effect
+  useEffect(() => setHydrated(true), []);
+
+  if (!hydrated) {
+    // Avoid rendering Switch until we know storage is loaded
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-4 px-4 py-2">
+      <div className="flex flex-col">
+        <label htmlFor="switch-demo" className="text-lg">
+          {title}
+        </label>
+        <span className="text-sm">{description}</span>
+      </div>
+
+      <Switch.Root
+        id="switch-demo"
+        checked={value}
+        onCheckedChange={(v) => setValue(v)}
+        className="w-10 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-blue-500 transition-colors"
+      >
+        <Switch.Thumb
+          className="block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]"
+        />
+      </Switch.Root>
+    </div>
+  );
+}
+
 function Hue() {
   const [hue, setHue] = useAtom(hueAtom);
   return (

src/utils/atoms.ts

···
 //   console.log("atom get ", initial);
 //   document.documentElement.style.setProperty(cssVar, initial.toString());
 // }
+
+
+
+// fun stuff
+
+export const enableBitesAtom = atomWithStorage<boolean>(
+  "enableBitesAtom",
+  false
+);

src/utils/useQuery.ts

···
   method: '/links'
   target?: string
   collection: string
-  path: string
+  path: string,
+  staleMult?: number
 }) {
+  const safemult = query?.staleMult || 1;
   // console.log(
   //   'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks',
   //   query,
···
       return (lastPage as any)?.cursor ?? undefined
     },
     initialPageParam: undefined,
-    staleTime: 5 * 60 * 1000,
-    gcTime: 5 * 60 * 1000,
+    staleTime: 5 * 60 * 1000 * safemult,
+    gcTime: 5 * 60 * 1000 * safemult,
   })
 }