basic notifs

src/auto-imports.d.ts

···
   const IconMaterialSymbolsSettingsOutline: typeof import('~icons/material-symbols/settings-outline.jsx').default
   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 IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline.jsx').default
 }

src/components/Header.tsx

···
 
 export function Header({
   backButtonCallback,
-  title
+  title,
+  bottomBorderDisabled,
 }: {
   backButtonCallback?: () => void;
   title?: string;
+  bottomBorderDisabled?: boolean;
 }) {
   const router = useRouter();
   const [isAtTop] = useAtom(isAtTopAtom);
   //const what = router.history.
   return (
-    <div className={`flex items-center gap-3 px-3 py-3 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 sm:border-b ${!isAtTop && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}>
+    <div className={`flex items-center gap-3 px-3 py-3 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 ${!bottomBorderDisabled && "sm:border-b"} ${!isAtTop && !bottomBorderDisabled && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}>
       {backButtonCallback ? (<Link
         to=".."
         //className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"

src/components/UniversalPostRenderer.tsx

···
   // =
   if (AppBskyEmbedVideo.isView(embed)) {
     // hls playlist
+    if (nopics) return;
     const playlist = embed.playlist;
     return (
       <SmartHLSPlayer

src/routes/notifications.tsx

···
-import { createFileRoute } from "@tanstack/react-router";
+import { AtUri } from "@atproto/api";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useAtom } from "jotai";
-import React, { useEffect, useRef,useState } from "react";
+import * as React from "react";
 
+import defaultpfp from "~/../public/favicon.png";
+import { Header } from "~/components/Header";
+import {
+  MdiCardsHeartOutline,
+  MdiCommentOutline,
+  MdiRepeat,
+  UniversalPostRendererATURILoader,
+} from "~/components/UniversalPostRenderer";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
-import { constellationURLAtom } from "~/utils/atoms";
+import { constellationURLAtom, imgCDNAtom, isAtTopAtom } from "~/utils/atoms";
+import {
+  useInfiniteQueryAuthorFeed,
+  useQueryConstellation,
+  useQueryIdentity,
+  useQueryProfile,
+  yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks,
+} from "~/utils/useQuery";
 
-const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour
+import { FollowButton, Mutual } from "./profile.$did";
+
+export function NotificationsComponent() {
+  return (
+    <div className="">
+      <Header
+        title={`Notifications`}
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+        bottomBorderDisabled={true}
+      />
+      <NotificationsTabs />
+    </div>
+  );
+}
 
 export const Route = createFileRoute("/notifications")({
   component: NotificationsComponent,
 });
 
-function NotificationsComponent() {
-  // /*mass comment*/ console.log("NotificationsComponent render");
-  const { agent, status } = useAuth();
-  const authed = !!agent?.did;
-  const authLoading = status === "loading";
-  const [did, setDid] = useState<string | null>(null);
-  const [resolving, setResolving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [responses, setResponses] = useState<any[]>([null, null, null]);
-  const [loading, setLoading] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    if (authLoading) return;
-    if (authed && agent && agent.assertDid) {
-      setDid(agent.assertDid);
-    }
-  }, [authed, agent, authLoading]);
+export default function NotificationsTabs() {
+  const [activeTab, setActiveTab] = React.useState("mentions");
+  const [isAtTop] = useAtom(isAtTopAtom);
 
-  async function handleSubmit() {
-    // /*mass comment*/ console.log("handleSubmit called");
-    setError(null);
-    setResponses([null, null, null]);
-    const value = inputRef.current?.value?.trim() || "";
-    if (!value) return;
-    if (value.startsWith("did:")) {
-      setDid(value);
-      setError(null);
-      return;
-    }
-    setResolving(true);
-    const cacheKey = `handleDid:${value}`;
-    const now = Date.now();
-    const cached = undefined // await get(cacheKey);
-    // if (
-    //   cached &&
-    //   cached.value &&
-    //   cached.time &&
-    //   now - cached.time < HANDLE_DID_CACHE_TIMEOUT
-    // ) {
-    //   try {
-    //     const data = JSON.parse(cached.value);
-    //     setDid(data.did);
-    //     setResolving(false);
-    //     return;
-    //   } catch {}
-    // }
-    try {
-      const url = `https://free-fly-24.deno.dev/?handle=${encodeURIComponent(value)}`;
-      const res = await fetch(url);
-      if (!res.ok) throw new Error("Failed to resolve handle");
-      const data = await res.json();
-      //set(cacheKey, JSON.stringify(data));
-      setDid(data.did);
-    } catch (e: any) {
-      setError("Failed to resolve handle: " + (e?.message || e));
-    } finally {
-      setResolving(false);
-    }
-  }
+  const scrollPositions = React.useRef<Record<string, number>>({});
 
-  const [constellationURL] = useAtom(constellationURLAtom)
+  const handleValueChange = (newTab: string) => {
+    scrollPositions.current[activeTab] = window.scrollY;
+    setActiveTab(newTab);
+  };
 
-  useEffect(() => {
-    if (!did) return;
-    setLoading(true);
-    setError(null);
-    const urls = [
-      `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[app.bsky.richtext.facet].features[app.bsky.richtext.facet%23mention].did`,
-      `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[].features[app.bsky.richtext.facet%23mention].did`,
-      `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.graph.follow&path=.subject`,
-    ];
-    let ignore = false;
-    Promise.all(
-      urls.map(async (url) => {
-        try {
-          const r = await fetch(url);
-          if (!r.ok) throw new Error("Failed to fetch");
-          const text = await r.text();
-          if (!text) return null;
-          try {
-            return JSON.parse(text);
-          } catch {
-            return null;
+  React.useEffect(() => {
+    const savedY = scrollPositions.current[activeTab] ?? 0;
+    window.scrollTo(0, savedY);
+  }, [activeTab]);
+
+  return (
+    <TabsPrimitive.Root
+      value={activeTab}
+      onValueChange={handleValueChange}
+      className={`w-full`}
+    >
+      <TabsPrimitive.List
+        className={`flex sticky top-[52px] bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-[9] border-0 sm:border-b ${!isAtTop && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}
+      >
+        <TabsPrimitive.Trigger
+          value="mentions"
+          // styling is in app.css
+        >
+          Mentions
+        </TabsPrimitive.Trigger>
+        <TabsPrimitive.Trigger value="follows">Follows</TabsPrimitive.Trigger>
+        <TabsPrimitive.Trigger value="postInteractions">
+          Post Interactions
+        </TabsPrimitive.Trigger>
+      </TabsPrimitive.List>
+
+      <TabsPrimitive.Content value="mentions" className="flex-1">
+        {activeTab === "mentions" && <MentionsTab />}
+      </TabsPrimitive.Content>
+
+      <TabsPrimitive.Content value="follows" className="flex-1">
+        {activeTab === "follows" && <FollowsTab />}
+      </TabsPrimitive.Content>
+
+      <TabsPrimitive.Content value="postInteractions" className="flex-1">
+        {activeTab === "postInteractions" && <PostInteractionsTab />}
+      </TabsPrimitive.Content>
+    </TabsPrimitive.Root>
+  );
+}
+
+function MentionsTab() {
+  const { agent } = useAuth();
+  const [constellationurl] = useAtom(constellationURLAtom);
+  const infinitequeryresults = useInfiniteQuery({
+    ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
+      {
+        constellation: constellationurl,
+        method: "/links",
+        target: agent?.did,
+        collection: "app.bsky.feed.post",
+        path: ".facets[app.bsky.richtext.facet].features[app.bsky.richtext.facet#mention].did",
+      }
+    ),
+    enabled: !!agent?.did,
+  });
+
+  const {
+    data: infiniteMentionsData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+    error,
+  } = infinitequeryresults;
+
+  const mentionsAturis = React.useMemo(() => {
+    // Get all replies from the standard infinite query
+    return (
+      infiniteMentionsData?.pages.flatMap(
+        (page) =>
+          page?.linking_records.map(
+            (r) => `at://${r.did}/${r.collection}/${r.rkey}`
+          ) ?? []
+      ) ?? []
+    );
+  }, [infiniteMentionsData]);
+
+  if (isLoading) return <LoadingState text="Loading mentions..." />;
+  if (isError) return <ErrorState error={error} />;
+
+  if (!mentionsAturis?.length) return <EmptyState text="No mentions yet." />;
+
+  return (
+    <>
+      {mentionsAturis.map((m) => (
+        <UniversalPostRendererATURILoader key={m} atUri={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>
+      )}
+    </>
+  );
+}
+
+function FollowsTab() {
+  const { agent } = useAuth();
+  const [constellationurl] = useAtom(constellationURLAtom);
+  const infinitequeryresults = useInfiniteQuery({
+    ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
+      {
+        constellation: constellationurl,
+        method: "/links",
+        target: agent?.did,
+        collection: "app.bsky.graph.follow",
+        path: ".subject",
+      }
+    ),
+    enabled: !!agent?.did,
+  });
+
+  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]);
+
+  if (isLoading) return <LoadingState text="Loading mentions..." />;
+  if (isError) return <ErrorState error={error} />;
+
+  if (!followsAturis?.length) return <EmptyState text="No mentions 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>
+      )}
+    </>
+  );
+}
+
+
+function PostInteractionsTab() {
+  const { agent } = useAuth();
+  const { data: identity } = useQueryIdentity(agent?.did);
+  const queryClient = useQueryClient();
+  const {
+    data: postsData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading: arePostsLoading,
+  } = useInfiniteQueryAuthorFeed(agent?.did, identity?.pds);
+
+  React.useEffect(() => {
+    if (postsData) {
+      postsData.pages.forEach((page) => {
+        page.records.forEach((record) => {
+          if (!queryClient.getQueryData(["post", record.uri])) {
+            queryClient.setQueryData(["post", record.uri], record);
           }
-        } catch (e: any) {
-          return { error: e?.message || String(e) };
-        }
-      })
-    )
-      .then((results) => {
-        if (!ignore) setResponses(results);
-      })
-      .catch((e) => {
-        if (!ignore)
-          setError("Failed to fetch notifications: " + (e?.message || e));
-      })
-      .finally(() => {
-        if (!ignore) setLoading(false);
+        });
       });
-    return () => {
-      ignore = true;
+    }
+  }, [postsData, queryClient]);
+
+  const posts = React.useMemo(
+    () => postsData?.pages.flatMap((page) => page.records) ?? [],
+    [postsData]
+  );
+
+  return (
+    <>
+      {posts.map((m) => (
+        <PostInteractionsItem key={m.uri} uri={m.uri} />
+      ))}
+
+      {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>
+      )}
+    </>
+  );
+}
+
+function PostInteractionsItem({ uri }: { uri: string }) {
+  const { data: links } = useQueryConstellation({
+    method: "/links/all",
+    target: uri,
+  });
+
+  const interactions = React.useMemo(() => {
+    const likes =
+      links?.links?.["app.bsky.feed.like"]?.[".subject.uri"]?.records || 0;
+    const replies =
+      links?.links?.["app.bsky.feed.post"]?.[".reply.parent.uri"]?.records || 0;
+    const reposts =
+      links?.links?.["app.bsky.feed.repost"]?.[".subject.uri"]?.records || 0;
+    const quotes1 =
+      links?.links?.["app.bsky.feed.post"]?.[".embed.record.uri"]?.records || 0;
+    const quotes2 =
+      links?.links?.["app.bsky.feed.post"]?.[".embed.record.record.uri"]
+        ?.records || 0;
+
+    const totals = {
+      likes,
+      replies,
+      reposts,
+      quotes: quotes1 + quotes2,
     };
-  }, [did]);
+
+    const list = (
+      [
+        ["reply", totals.replies],
+        ["repost", totals.reposts],
+        ["like", totals.likes],
+        ["quote", totals.quotes],
+      ] as const
+    ).filter(([, count]) => count > 0);
+
+    return { totals, list };
+  }, [links]);
 
   return (
-    <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
-      <div className="flex items-center gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-800">
-        <span className="text-xl font-bold ml-2">Notifications</span>
-        {!authed && (
-          <div className="flex items-center gap-2">
-            <input
-              type="text"
-              placeholder="Enter handle or DID"
-              ref={inputRef}
-              className="ml-4 px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100"
-              style={{ minWidth: 220 }}
-              disabled={resolving}
-            />
-            <button
-              type="button"
-              className="px-3 py-1 rounded bg-blue-600 text-white font-semibold disabled:opacity-50"
-              disabled={resolving}
-              onClick={handleSubmit}
-            >
-              {resolving ? "Resolving..." : "Submit"}
-            </button>
-          </div>
+    <div className="flex flex-col border-b pb-8">
+      <div className="border rounded-xl mx-4 mt-4 ">
+        <UniversalPostRendererATURILoader
+          isQuote
+          key={uri}
+          atUri={uri}
+          nopics
+        />
+      </div>
+      <div className="flex flex-col">
+        {interactions.list.map(([type, count]) => (
+          <InteractionsButton key={type} type={type} uri={uri} count={count} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function InteractionsButton({
+  type,
+  uri,
+  count,
+}: {
+  type: "reply" | "repost" | "like" | "quote";
+  uri: string;
+  count: number;
+}) {
+  return (
+    <div className="flex-1 border-t py-2 px-4 flex flex-row items-center gap-2">
+      {type === "like" ? (
+        <MdiCardsHeartOutline height={22} width={22} />
+      ) : type === "repost" ? (
+        <MdiRepeat height={22} width={22} />
+      ) : type === "reply" ? (
+        <MdiCommentOutline height={22} width={22} />
+      ) : (
+        <></>
+      )}
+      {type}
+      {/* bad grammar replys */}
+      {count > 1 ? "s" : ""} <div className="flex-1" /> {count}
+    </div>
+  );
+}
+
+function NotificationItem({ notification }: { notification: string }) {
+  const aturi = new AtUri(notification);
+  const navigate = useNavigate();
+  const { data: identity } = useQueryIdentity(aturi.host);
+  const resolvedDid = identity?.did;
+  const profileUri = resolvedDid
+    ? `at://${resolvedDid}/app.bsky.actor.profile/self`
+    : undefined;
+  const { data: profileRecord } = useQueryProfile(profileUri);
+  const profile = profileRecord?.value;
+
+  const [imgcdn] = useAtom(imgCDNAtom);
+
+  function getAvatarUrl(p: typeof profile) {
+    const link = p?.avatar?.ref?.["$link"];
+    if (!link || !resolvedDid) return null;
+    return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`;
+  }
+
+  const avatar = getAvatarUrl(profile);
+
+  return (
+    <div
+      className="flex items-center gap-3 p-4 cursor-pointer border-b flex-row"
+      onClick={() =>
+        aturi &&
+        navigate({
+          to: "/profile/$did",
+          params: { did: aturi.host },
+        })
+      }
+    >
+      <div>
+        {aturi.collection === "app.bsky.graph.follow" ? (
+          <IconMdiAccountPlus />
+        ) : (
+          <></>
         )}
       </div>
-      {error && <div className="p-4 text-red-500">{error}</div>}
-      {loading && (
-        <div className="p-4 text-gray-500">Loading notifications...</div>
+      {profile ? (
+        <img
+          src={avatar || defaultpfp}
+          alt={identity?.handle}
+          className="w-10 h-10 rounded-full"
+        />
+      ) : (
+        <div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700" />
       )}
-      {!loading &&
-        !error &&
-        responses.map((resp, i) => (
-          <div key={i} className="p-4">
-            <div className="font-bold mb-2">Query {i + 1}</div>
-            {!resp ||
-            (typeof resp === "object" && Object.keys(resp).length === 0) ||
-            (Array.isArray(resp) && resp.length === 0) ? (
-              <div className="text-gray-500">No notifications found.</div>
-            ) : (
-              <pre
-                style={{
-                  background: "#222",
-                  color: "#eee",
-                  borderRadius: 8,
-                  padding: 12,
-                  fontSize: 13,
-                  overflowX: "auto",
-                }}
-              >
-                {JSON.stringify(resp, null, 2)}
-              </pre>
-            )}
-          </div>
-        ))}
-      {/* <div className="p-4"> yo this project sucks, ill remake it some other time, like cmon inputting anything into the textbox makes it break. ive warned you</div> */}
+      <div className="flex flex-col">
+        <div className="flex flex-row gap-2">
+          <span className="font-medium text-gray-900 dark:text-gray-100">
+            {profile?.displayName || identity?.handle || "Someone"}
+          </span>
+          <span className="text-gray-700 dark:text-gray-400">
+            @{identity?.handle}
+          </span>
+        </div>
+        <div className="flex flex-row gap-2">
+          {identity?.did && <Mutual targetdidorhandle={identity?.did} />}
+          {/* <span className="text-sm text-gray-600 dark:text-gray-400">
+            followed you
+          </span> */}
+        </div>
+      </div>
+      <div className="flex-1" />
+      {identity?.did && <FollowButton targetdidorhandle={identity?.did} />}
     </div>
   );
 }
+
+
+const EmptyState = ({ text }: { text: string }) => (
+  <div className="py-10 text-center text-gray-500 dark:text-gray-400">
+    {text}
+  </div>
+);
+
+const LoadingState = ({ text }: { text: string }) => (
+  <div className="py-10 text-center text-gray-500 dark:text-gray-400 italic">
+    {text}
+  </div>
+);
+
+const ErrorState = ({ error }: { error: unknown }) => (
+  <div className="py-10 text-center text-red-600 dark:text-red-400">
+    Error: {(error as Error)?.message || "Something went wrong."}
+  </div>
+);

src/styles/app.css

···
 /* radix i love you but like cmon man */
 body[data-scroll-locked]{
   margin-left: var(--removed-body-scroll-bar-size) !important;
+}
+
+/* radix tabs */
+
+[data-radix-collection-item] {
+  flex: 1;
+  display: flex;
+  padding: 12px 8px;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-gray-500);
+  font-weight: 500;
+  &[aria-selected="true"] {
+    color: var(--color-gray-950);
+    &::before{
+      content: "";
+      position: absolute;
+      width: min(80px, 80%);
+      border-radius: 99px 99px 0px 0px ;
+      height: 3px;
+      bottom: 0;
+      background-color: var(--color-gray-400);
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-radix-collection-item] {
+    color: var(--color-gray-400);
+    &[aria-selected="true"] {
+      color: var(--color-gray-50);
+      &::before{
+        background-color: var(--color-gray-500);
+      }
+    }
+  }
 }