Feature/notifications (#234)

* add basic notification page

* added an avatar component, styled notification, wip styling mobile
footer to fit everything

* move pub theme into the settings button

* remove page name from footer

* moved home theme into settings, adjusted menu styles

* adjusted the side that popover menus open on in footer

* added designs for a bunch on notification types

* some minor adjustments for mobile

* minor padding tweak

* more padding tweaks

* simplify notification component structure

* wire up notifications

* pull out unused button props

* fix open logic in popover

* remove logs

* added cardBordHidden styling to notifications

* passed how cardBorder Hidden to other notifcation types

* changed name of publication prop in notifcations, tweak to dropdown menu styling in settings

* fixed type errors

* more fixing type errors

* more more fixing type errors

* add an empty state if no notifications

* add reply notifications

* refactoring to add notification list in popover as well, added timestamp

* add compact rendering for notification list - mostly credit to jared

* changed some labels in the settings menu

* set notification action button to direct to notification page rather than popover a panel

* small tweaks

* ping notifications and fix reply notifications

---------

Co-authored-by: celine <[e-mail]>

actions/getIdentityData.ts

···
           identities(
             *,
             bsky_profiles(*),
+            notifications(count),
             publication_subscriptions(*),
             custom_domains!custom_domains_identity_id_fkey(publication_domains(*), *),
             home_leaflet:permission_tokens!identities_home_page_fkey(*, permission_token_rights(*,
···
             )
           )`,
         )
+        .eq("identities.notifications.read", false)
         .eq("id", auth_token)
         .eq("confirmed", true)
         .single()

app/(home-pages)/discover/SortedPublicationList.tsx

···
 "use client";
 import Link from "next/link";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { theme } from "tailwind.config";
-import { PublicationsList } from "./page";
 import { PubListing } from "./PubListing";
+import useSWRInfinite from "swr/infinite";
+import { getPublications, type Cursor, type Publication } from "./getPublications";
 
 export function SortedPublicationList(props: {
-  publications: PublicationsList;
+  publications: Publication[];
   order: string;
+  nextCursor: Cursor | null;
 }) {
   let [order, setOrder] = useState(props.order);
+
+  const getKey = (
+    pageIndex: number,
+    previousPageData: { publications: Publication[]; nextCursor: Cursor | null } | null,
+  ) => {
+    // Reached the end
+    if (previousPageData && !previousPageData.nextCursor) return null;
+
+    // First page, we don't have previousPageData
+    if (pageIndex === 0) return ["discover-publications", order, null] as const;
+
+    // Add the cursor to the key
+    return ["discover-publications", order, previousPageData?.nextCursor] as const;
+  };
+
+  const { data, error, size, setSize, isValidating } = useSWRInfinite(
+    getKey,
+    ([_, orderValue, cursor]) => {
+      const orderParam = orderValue === "popular" ? "popular" : "recentlyUpdated";
+      return getPublications(orderParam, cursor);
+    },
+    {
+      fallbackData: order === props.order
+        ? [{ publications: props.publications, nextCursor: props.nextCursor }]
+        : undefined,
+      revalidateFirstPage: false,
+    },
+  );
+
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+
+  // Set up intersection observer to load more when trigger element is visible
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !isValidating) {
+          const hasMore = data && data[data.length - 1]?.nextCursor;
+          if (hasMore) {
+            setSize(size + 1);
+          }
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (loadMoreRef.current) {
+      observer.observe(loadMoreRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [data, size, setSize, isValidating]);
+
+  const allPublications = data ? data.flatMap((page) => page.publications) : [];
+
   return (
     <div className="discoverHeader flex flex-col items-center ">
       <SortButtons
···
           setOrder(o);
         }}
       />
-      <div className="discoverPubList flex flex-col gap-3 pt-6 w-full">
-        {props.publications
-          ?.filter((pub) => pub.documents_in_publications.length > 0)
-          ?.sort((a, b) => {
-            if (order === "popular") {
-              return (
-                b.publication_subscriptions[0].count -
-                a.publication_subscriptions[0].count
-              );
-            }
-            const aDate = new Date(
-              a.documents_in_publications[0]?.indexed_at || 0,
-            );
-            const bDate = new Date(
-              b.documents_in_publications[0]?.indexed_at || 0,
-            );
-            return bDate.getTime() - aDate.getTime();
-          })
-          .map((pub) => <PubListing resizeHeight key={pub.uri} {...pub} />)}
+      <div className="discoverPubList flex flex-col gap-3 pt-6 w-full relative">
+        {allPublications.map((pub) => (
+          <PubListing resizeHeight key={pub.uri} {...pub} />
+        ))}
+        {/* Trigger element for loading more publications */}
+        <div
+          ref={loadMoreRef}
+          className="absolute bottom-96 left-0 w-full h-px pointer-events-none"
+          aria-hidden="true"
+        />
+        {isValidating && (
+          <div className="text-center text-tertiary py-4">
+            Loading more publications...
+          </div>
+        )}
       </div>
     </div>
   );

app/(home-pages)/discover/getPublications.ts

···
+"use server";
+
+import { supabaseServerClient } from "supabase/serverClient";
+
+export type Cursor = {
+  indexed_at?: string;
+  count?: number;
+  uri: string;
+};
+
+export type Publication = Awaited<
+  ReturnType<typeof getPublications>
+>["publications"][number];
+
+export async function getPublications(
+  order: "recentlyUpdated" | "popular" = "recentlyUpdated",
+  cursor?: Cursor | null,
+): Promise<{ publications: any[]; nextCursor: Cursor | null }> {
+  const limit = 25;
+
+  // Fetch all publications with their most recent document
+  let { data: publications, error } = await supabaseServerClient
+    .from("publications")
+    .select(
+      "*, documents_in_publications(*, documents(*)), publication_subscriptions(count)",
+    )
+    .or(
+      "record->preferences->showInDiscover.is.null,record->preferences->>showInDiscover.eq.true",
+    )
+    .order("indexed_at", {
+      referencedTable: "documents_in_publications",
+      ascending: false,
+    })
+    .limit(1, { referencedTable: "documents_in_publications" });
+
+  if (error) {
+    console.error("Error fetching publications:", error);
+    return { publications: [], nextCursor: null };
+  }
+
+  // Filter out publications without documents
+  const allPubs = (publications || []).filter(
+    (pub) => pub.documents_in_publications.length > 0,
+  );
+
+  // Sort on the server
+  allPubs.sort((a, b) => {
+    if (order === "popular") {
+      const aCount = a.publication_subscriptions[0]?.count || 0;
+      const bCount = b.publication_subscriptions[0]?.count || 0;
+      if (bCount !== aCount) {
+        return bCount - aCount;
+      }
+      // Secondary sort by uri for stability
+      return b.uri.localeCompare(a.uri);
+    } else {
+      // recentlyUpdated
+      const aDate = new Date(
+        a.documents_in_publications[0]?.indexed_at || 0,
+      ).getTime();
+      const bDate = new Date(
+        b.documents_in_publications[0]?.indexed_at || 0,
+      ).getTime();
+      if (bDate !== aDate) {
+        return bDate - aDate;
+      }
+      // Secondary sort by uri for stability
+      return b.uri.localeCompare(a.uri);
+    }
+  });
+
+  // Find cursor position and slice
+  let startIndex = 0;
+  if (cursor) {
+    startIndex = allPubs.findIndex((pub) => {
+      if (order === "popular") {
+        const pubCount = pub.publication_subscriptions[0]?.count || 0;
+        // Find first pub after cursor
+        return (
+          pubCount < (cursor.count || 0) ||
+          (pubCount === cursor.count && pub.uri < cursor.uri)
+        );
+      } else {
+        const pubDate = pub.documents_in_publications[0]?.indexed_at || "";
+        // Find first pub after cursor
+        return (
+          pubDate < (cursor.indexed_at || "") ||
+          (pubDate === cursor.indexed_at && pub.uri < cursor.uri)
+        );
+      }
+    });
+    // If not found, we're at the end
+    if (startIndex === -1) {
+      return { publications: [], nextCursor: null };
+    }
+  }
+
+  // Get the page
+  const page = allPubs.slice(startIndex, startIndex + limit);
+
+  // Create next cursor
+  const nextCursor =
+    page.length === limit && startIndex + limit < allPubs.length
+      ? order === "recentlyUpdated"
+        ? {
+            indexed_at: page[page.length - 1].documents_in_publications[0]?.indexed_at,
+            uri: page[page.length - 1].uri,
+          }
+        : {
+            count: page[page.length - 1].publication_subscriptions[0]?.count || 0,
+            uri: page[page.length - 1].uri,
+          }
+      : null;
+
+  return {
+    publications: page,
+    nextCursor,
+  };
+}

app/(home-pages)/discover/page.tsx

···
-import { supabaseServerClient } from "supabase/serverClient";
 import Link from "next/link";
 import { SortedPublicationList } from "./SortedPublicationList";
 import { Metadata } from "next";
 import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
-
-export type PublicationsList = Awaited<ReturnType<typeof getPublications>>;
-async function getPublications() {
-  let { data: publications, error } = await supabaseServerClient
-    .from("publications")
-    .select(
-      "*, documents_in_publications(*, documents(*)), publication_subscriptions(count)",
-    )
-    .or(
-      "record->preferences->showInDiscover.is.null,record->preferences->>showInDiscover.eq.true",
-    )
-    .order("indexed_at", {
-      referencedTable: "documents_in_publications",
-      ascending: false,
-    })
-    .limit(1, { referencedTable: "documents_in_publications" });
-  return publications;
-}
+import { getPublications } from "./getPublications";
 
 export const metadata: Metadata = {
   title: "Leaflet Discover",
···
 }
 
 const DiscoverContent = async (props: { order: string }) => {
-  let publications = await getPublications();
+  const orderValue =
+    props.order === "popular" ? "popular" : "recentlyUpdated";
+  let { publications, nextCursor } = await getPublications(orderValue);
 
   return (
     <div className="max-w-prose mx-auto w-full">
···
           <Link href="/lish/createPub">make your own</Link>!
         </p>
       </div>
-      <SortedPublicationList publications={publications} order={props.order} />
+      <SortedPublicationList
+        publications={publications}
+        order={props.order}
+        nextCursor={nextCursor}
+      />
     </div>
   );
 };

app/(home-pages)/home/Actions/AccountSettings.tsx

···
 "use client";
 
 import { ActionButton } from "components/ActionBar/ActionButton";
-import { Menu, MenuItem } from "components/Layout";
 import { mutate } from "swr";
 import { AccountSmall } from "components/Icons/AccountSmall";
 import { LogoutSmall } from "components/Icons/LogoutSmall";
+import { Popover } from "components/Popover";
+import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
+import { SpeedyLink } from "components/SpeedyLink";
+import { GoBackSmall } from "components/Icons/GoBackSmall";
+import { useState } from "react";
+import { ThemeSetterContent } from "components/ThemeManager/ThemeSetter";
+import { useIsMobile } from "src/hooks/isMobile";
 
-// it was going have a popover with a log out button
-export const AccountSettings = () => {
+export const AccountSettings = (props: { entityID: string }) => {
+  let [state, setState] = useState<"menu" | "general" | "theme">("menu");
+  let isMobile = useIsMobile();
+
   return (
-    <Menu
+    <Popover
       asChild
+      onOpenChange={() => setState("menu")}
+      side={isMobile ? "top" : "right"}
+      align={isMobile ? "center" : "start"}
+      className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`}
       trigger={<ActionButton icon=<AccountSmall /> label="Settings" />}
     >
-      <MenuItem
-        onSelect={async () => {
+      {state === "general" ? (
+        <GeneralSettings backToMenu={() => setState("menu")} />
+      ) : state === "theme" ? (
+        <AccountThemeSettings
+          entityID={props.entityID}
+          backToMenu={() => setState("menu")}
+        />
+      ) : (
+        <SettingsMenu state={state} setState={setState} />
+      )}
+    </Popover>
+  );
+};
+
+const SettingsMenu = (props: {
+  state: "menu" | "general" | "theme";
+  setState: (s: typeof props.state) => void;
+}) => {
+  let menuItemClassName =
+    "menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline!";
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      <AccountSettingsHeader state={"menu"} />
+      <button
+        className={menuItemClassName}
+        type="button"
+        onClick={() => {
+          props.setState("general");
+        }}
+      >
+        General
+        <ArrowRightTiny />
+      </button>
+      <button
+        className={menuItemClassName}
+        type="button"
+        onClick={() => props.setState("theme")}
+      >
+        Account Theme
+        <ArrowRightTiny />
+      </button>
+    </div>
+  );
+};
+
+const GeneralSettings = (props: { backToMenu: () => void }) => {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <AccountSettingsHeader
+        state={"general"}
+        backToMenuAction={() => props.backToMenu()}
+      />
+
+      <button
+        className="flex gap-2 font-bold"
+        onClick={async () => {
           await fetch("/api/auth/logout");
           mutate("identity", null);
         }}
       >
         <LogoutSmall />
         Logout
-      </MenuItem>
-    </Menu>
+      </button>
+    </div>
+  );
+};
+const AccountThemeSettings = (props: {
+  entityID: string;
+  backToMenu: () => void;
+}) => {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <AccountSettingsHeader
+        state={"theme"}
+        backToMenuAction={() => props.backToMenu()}
+      />
+      <ThemeSetterContent entityID={props.entityID} home />
+    </div>
+  );
+};
+export const AccountSettingsHeader = (props: {
+  state: "menu" | "general" | "theme";
+  backToMenuAction?: () => void;
+}) => {
+  return (
+    <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1">
+      {props.state === "menu"
+        ? "Settings"
+        : props.state === "general"
+          ? "General"
+          : props.state === "theme"
+            ? "Account Theme"
+            : ""}
+      {props.backToMenuAction && (
+        <button
+          type="button"
+          onClick={() => {
+            props.backToMenuAction && props.backToMenuAction();
+          }}
+        >
+          <GoBackSmall className="text-accent-contrast" />
+        </button>
+      )}
+    </div>
   );
 };

app/(home-pages)/home/Actions/Actions.tsx

···
   return (
     <>
       <CreateNewLeafletButton />
-      {identity ? <AccountSettings /> : <LoginActionButton />}
-      {/*<HelpPopover noShortcuts />*/}
-      <ThemePopover entityID={rootEntity} home />
+      {identity ? (
+        <AccountSettings entityID={rootEntity} />
+      ) : (
+        <LoginActionButton />
+      )}
       <HelpPopover />
     </>
   );

app/(home-pages)/home/Actions/CreateNewButton.tsx

···
   return (
     <Menu
       asChild
-      side="right"
-      align="start"
+      side={isMobile ? "top" : "right"}
+      align={isMobile ? "center" : "start"}
       trigger={
         <ActionButton
           id="new-leaflet-button"

app/(home-pages)/notifications/CommentNotication.tsx

···
+import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
+import {
+  AppBskyActorProfile,
+  PubLeafletComment,
+  PubLeafletDocument,
+  PubLeafletPublication,
+} from "lexicons/api";
+import { HydratedCommentNotification } from "src/notifications";
+import { blobRefToSrc } from "src/utils/blobRefToSrc";
+import { Avatar } from "components/Avatar";
+import { CommentTiny } from "components/Icons/CommentTiny";
+import {
+  CommentInNotification,
+  ContentLayout,
+  Notification,
+} from "./Notification";
+import { AtUri } from "@atproto/api";
+
+export const CommentNotification = (props: HydratedCommentNotification) => {
+  let docRecord = props.commentData.documents
+    ?.data as PubLeafletDocument.Record;
+  let commentRecord = props.commentData.record as PubLeafletComment.Record;
+  let profileRecord = props.commentData.bsky_profiles
+    ?.record as AppBskyActorProfile.Record;
+  const displayName =
+    profileRecord.displayName ||
+    props.commentData.bsky_profiles?.handle ||
+    "Someone";
+  const pubRecord = props.commentData.documents?.documents_in_publications[0]
+    ?.publications?.record as PubLeafletPublication.Record;
+  let rkey = new AtUri(props.commentData.documents?.uri!).rkey;
+
+  return (
+    <Notification
+      timestamp={props.commentData.indexed_at}
+      href={`https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments`}
+      icon={<CommentTiny />}
+      actionText={<>{displayName} commented on your post</>}
+      content={
+        <ContentLayout postTitle={docRecord.title} pubRecord={pubRecord}>
+          <CommentInNotification
+            className=""
+            avatar={
+              profileRecord?.avatar?.ref &&
+              blobRefToSrc(
+                profileRecord?.avatar?.ref,
+                props.commentData.bsky_profiles?.did || "",
+              )
+            }
+            displayName={displayName}
+            index={[]}
+            plaintext={commentRecord.plaintext}
+            facets={commentRecord.facets}
+          />
+        </ContentLayout>
+      }
+    />
+  );
+};

app/(home-pages)/notifications/FollowNotification.tsx

···
+import { Avatar } from "components/Avatar";
+import { Notification } from "./Notification";
+
+export const DummyFollowNotification = (props: {}) => {
+  const identity = "celine";
+  const pubName = "Pub Name Here";
+  return (
+    <Notification
+      timestamp={""}
+      href="/"
+      icon={<Avatar src={undefined} displayName={identity} tiny />}
+      actionText={
+        <>
+          {identity} followed {pubName}!
+        </>
+      }
+    />
+  );
+};

app/(home-pages)/notifications/MentionNotification.tsx

···
+import { MentionTiny } from "components/Icons/MentionTiny";
+import { ContentLayout, Notification } from "./Notification";
+
+export const DummyPostMentionNotification = (props: {}) => {
+  return (
+    <Notification
+      timestamp={""}
+      href="/"
+      icon={<MentionTiny />}
+      actionText={<>celine mentioned your post</>}
+      content={
+        <ContentLayout
+          postTitle={"Post Title Here"}
+          pubRecord={{ name: "My Publication" } as any}
+        >
+          I'm just gonna put the description here. The surrounding context is
+          just sort of a pain to figure out
+          <div className="border border-border-light rounded-md p-1 my-1 text-xs text-secondary">
+            <div className="font-bold">Title of the Mentioned Post</div>
+            <div className="text-tertiary">
+              And here is the description that follows it
+            </div>
+          </div>
+        </ContentLayout>
+      }
+    />
+  );
+};
+
+export const DummyUserMentionNotification = (props: {
+  cardBorderHidden: boolean;
+}) => {
+  return (
+    <Notification
+      timestamp={""}
+      href="/"
+      icon={<MentionTiny />}
+      actionText={<>celine mentioned you</>}
+      content={
+        <ContentLayout
+          postTitle={"Post Title Here"}
+          pubRecord={{ name: "My Publication" } as any}
+        >
+          <div>
+            ...llo this is the content of a post or whatever here it comes{" "}
+            <span className="text-accent-contrast">@celine </span> and here it
+            was! ooooh heck yeah the high is unre...
+          </div>
+        </ContentLayout>
+      }
+    />
+  );
+};

app/(home-pages)/notifications/Notification.tsx

···
+"use client";
+import { Avatar } from "components/Avatar";
+import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
+import { PubLeafletPublication, PubLeafletRichtextFacet } from "lexicons/api";
+import { timeAgo } from "src/utils/timeAgo";
+import { useReplicache, useEntity } from "src/replicache";
+
+export const Notification = (props: {
+  icon: React.ReactNode;
+  actionText: React.ReactNode;
+  content?: React.ReactNode;
+  timestamp: string;
+  href: string;
+}) => {
+  let { rootEntity } = useReplicache();
+  let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
+    .value;
+
+  // If compact mode, always hide border
+
+  return (
+    <div
+      className={`relative flex flex-col w-full pb-3 sm:pb-4 pt-2 ${
+        cardBorderHidden
+          ? " first:pt-0! "
+          : " block-border border-border! hover:outline-border sm:px-4 px-3 pl-2 sm:pl-3 "
+      }`}
+      style={{
+        backgroundColor: cardBorderHidden
+          ? "transparent"
+          : "rgba(var(--bg-page), var(--bg-page-alpha))",
+      }}
+    >
+      <a
+        href={props.href}
+        className=" absolute top-0 bottom-0 left-0 right-0"
+      />
+      <div className="flex justify-between items-center gap-3 w-full ">
+        <div className={`flex flex-row gap-2 items-center grow w-full min-w-0`}>
+          <div className="text-secondary shrink-0">{props.icon}</div>
+          <div className={`text-secondary font-bold grow truncate min-w-0 }`}>
+            {props.actionText}
+          </div>
+        </div>
+        <div className={`text-tertiary shrink-0 min-w-8 text-sm`}>
+          {timeAgo(props.timestamp)}
+        </div>
+      </div>
+      {props.content && (
+        <div className="flex flex-row gap-2 mt-1 w-full">
+          <div className="w-4 shrink-0" />
+          {props.content}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ContentLayout = (props: {
+  children: React.ReactNode;
+  postTitle: string;
+  pubRecord?: PubLeafletPublication.Record;
+}) => {
+  let { rootEntity } = useReplicache();
+  let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
+    .value;
+
+  return (
+    <div
+      className={`border border-border-light rounded-md px-2 py-[6px] w-full ${cardBorderHidden ? "transparent" : "bg-bg-page"}`}
+    >
+      <div className="text-tertiary text-sm italic font-bold pb-1">
+        {props.postTitle}
+      </div>
+      {props.children}
+      {props.pubRecord && (
+        <>
+          <hr className="mt-3 mb-1 border-border-light" />
+          <a
+            href={`https://${props.pubRecord.base_path}`}
+            className="relative text-xs text-tertiary flex gap-[6px] items-center font-bold hover:no-underline!"
+          >
+            {props.pubRecord.name}
+          </a>
+        </>
+      )}
+    </div>
+  );
+};
+
+type Facet = PubLeafletRichtextFacet.Main;
+export const CommentInNotification = (props: {
+  avatar: string | undefined;
+  displayName: string;
+  plaintext: string;
+  facets?: Facet[];
+  index: number[];
+  className?: string;
+}) => {
+  return (
+    <div className=" flex gap-2 text-sm w-full ">
+      <Avatar src={props.avatar} displayName={props.displayName} />
+      <pre
+        style={{ wordBreak: "break-word" }}
+        className={`whitespace-pre-wrap text-secondary line-clamp-3 sm:line-clamp-6 ${props.className}`}
+      >
+        <BaseTextBlock
+          preview
+          index={props.index}
+          plaintext={props.plaintext}
+          facets={props.facets}
+        />
+      </pre>
+    </div>
+  );
+};

app/(home-pages)/notifications/NotificationList.tsx

···
+"use client";
+
+import { HydratedNotification } from "src/notifications";
+import { CommentNotification } from "./CommentNotication";
+import { useEffect, createContext } from "react";
+import { markAsRead } from "./getNotifications";
+import { ReplyNotification } from "./ReplyNotification";
+import { useIdentityData } from "components/IdentityProvider";
+
+export function NotificationList({
+  notifications,
+  compact,
+}: {
+  notifications: HydratedNotification[];
+  compact?: boolean;
+}) {
+  let { mutate } = useIdentityData();
+  useEffect(() => {
+    setTimeout(async () => {
+      await markAsRead();
+      mutate();
+    }, 500);
+  }, []);
+
+  if (notifications.length === 0)
+    return (
+      <div className="w-full container italic text-tertiary text-center sm:p-4 p-3">
+        no notifications yet...
+      </div>
+    );
+  return (
+    <div className="max-w-prose mx-auto w-full">
+      <div className={`flex flex-col gap-2`}>
+        {notifications.map((n) => {
+          if (n.type === "comment") {
+            if (n.parentData) return <ReplyNotification key={n.id} {...n} />;
+            return <CommentNotification key={n.id} {...n} />;
+          }
+        })}
+      </div>
+    </div>
+  );
+}

app/(home-pages)/notifications/ReplyNotification.tsx

···
+import { Avatar } from "components/Avatar";
+import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
+import { ReplyTiny } from "components/Icons/ReplyTiny";
+import {
+  CommentInNotification,
+  ContentLayout,
+  Notification,
+} from "./Notification";
+import { HydratedCommentNotification } from "src/notifications";
+import {
+  PubLeafletComment,
+  PubLeafletDocument,
+  PubLeafletPublication,
+} from "lexicons/api";
+import { AppBskyActorProfile, AtUri } from "@atproto/api";
+import { blobRefToSrc } from "src/utils/blobRefToSrc";
+
+export const ReplyNotification = (props: HydratedCommentNotification) => {
+  let docRecord = props.commentData.documents
+    ?.data as PubLeafletDocument.Record;
+  let commentRecord = props.commentData.record as PubLeafletComment.Record;
+  let profileRecord = props.commentData.bsky_profiles
+    ?.record as AppBskyActorProfile.Record;
+  const displayName =
+    profileRecord.displayName ||
+    props.commentData.bsky_profiles?.handle ||
+    "Someone";
+
+  let parentRecord = props.parentData?.record as PubLeafletComment.Record;
+  let parentProfile = props.parentData?.bsky_profiles
+    ?.record as AppBskyActorProfile.Record;
+  const parentDisplayName =
+    parentProfile.displayName ||
+    props.parentData?.bsky_profiles?.handle ||
+    "Someone";
+
+  let rkey = new AtUri(props.commentData.documents?.uri!).rkey;
+  const pubRecord = props.commentData.documents?.documents_in_publications[0]
+    ?.publications?.record as PubLeafletPublication.Record;
+
+  return (
+    <Notification
+      timestamp={props.commentData.indexed_at}
+      href={`https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments`}
+      icon={<ReplyTiny />}
+      actionText={`${displayName} replied to your comment`}
+      content={
+        <ContentLayout postTitle={docRecord.title} pubRecord={pubRecord}>
+          <CommentInNotification
+            className=""
+            avatar={
+              parentProfile?.avatar?.ref &&
+              blobRefToSrc(
+                parentProfile?.avatar?.ref,
+                props.parentData?.bsky_profiles?.did || "",
+              )
+            }
+            displayName={parentDisplayName}
+            index={[]}
+            plaintext={parentRecord.plaintext}
+            facets={parentRecord.facets}
+          />
+          <div className="h-3 -mt-[1px] ml-[10px] border-l border-border" />
+          <CommentInNotification
+            className=""
+            avatar={
+              profileRecord?.avatar?.ref &&
+              blobRefToSrc(
+                profileRecord?.avatar?.ref,
+                props.commentData.bsky_profiles?.did || "",
+              )
+            }
+            displayName={displayName}
+            index={[]}
+            plaintext={commentRecord.plaintext}
+            facets={commentRecord.facets}
+          />
+        </ContentLayout>
+      }
+    />
+  );
+};

app/(home-pages)/notifications/getNotifications.ts

···
+"use server";
+import { getIdentityData } from "actions/getIdentityData";
+import { hydrateNotifications } from "src/notifications";
+import { supabaseServerClient } from "supabase/serverClient";
+
+export async function getNotifications(limit?: number) {
+  let identity = await getIdentityData();
+  if (!identity?.atp_did) return [];
+  let query = supabaseServerClient
+    .from("notifications")
+    .select("*")
+    .eq("recipient", identity.atp_did)
+    .order("created_at", { ascending: false });
+  if (limit) query.limit(limit);
+  let { data } = await query;
+  let notifications = await hydrateNotifications(data || []);
+  return notifications;
+}
+
+export async function markAsRead() {
+  let identity = await getIdentityData();
+  if (!identity?.atp_did) return [];
+  await supabaseServerClient
+    .from("notifications")
+    .update({ read: true })
+    .eq("recipient", identity.atp_did);
+  return;
+}

app/(home-pages)/notifications/page.tsx

···
+import { getIdentityData } from "actions/getIdentityData";
+import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
+import { redirect } from "next/navigation";
+import { hydrateNotifications } from "src/notifications";
+import { supabaseServerClient } from "supabase/serverClient";
+import { CommentNotification } from "./CommentNotication";
+import { NotificationList } from "./NotificationList";
+
 export default async function Notifications() {
-  return <div>Notifications</div>;
+  return (
+    <DashboardLayout
+      id="discover"
+      cardBorderHidden={true}
+      currentPage="notifications"
+      defaultTab="default"
+      actions={null}
+      tabs={{
+        default: {
+          controls: null,
+          content: <NotificationContent />,
+        },
+      }}
+    />
+  );
 }
+
+const NotificationContent = async () => {
+  let identity = await getIdentityData();
+  if (!identity?.atp_did) return redirect("/home");
+  let { data } = await supabaseServerClient
+    .from("notifications")
+    .select("*")
+    .eq("recipient", identity.atp_did);
+  let notifications = await hydrateNotifications(data || []);
+  return <NotificationList notifications={notifications} />;
+};

app/[leaflet_id]/publish/PublishPost.tsx

···
             <div className="opaque-container p-3  rounded-lg!">
               <div className="flex gap-2">
                 <img
-                  className="bg-test rounded-full w-[42px] h-[42px] shrink-0"
+                  className="rounded-full w-[42px] h-[42px] shrink-0"
                   src={props.profile.avatar}
                 />
                 <div className="flex flex-col w-full">

app/about/page.tsx

···
-import { LegalContent } from "app/legal/content";
-import Link from "next/link";
-
-export default function AboutPage() {
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex flex-col h-[80vh] mx-auto sm:px-4 px-3 sm:py-6 py-4 max-w-prose gap-4 text-lg">
-        <p>
-          Leaflet.pub is a web app for instantly creating and collaborating on
-          documents.{" "}
-          <Link href="/" prefetch={false}>
-            Click here
-          </Link>{" "}
-          to create one and get started!
-        </p>
-
-        <p>
-          Leaflet is made by Learning Futures Inc. Previously we built{" "}
-          <a href="https://hyperlink.academy">hyperlink.academy</a>
-        </p>
-        <p>
-          You can find us on{" "}
-          <a href="https://bsky.app/profile/leaflet.pub">Bluesky</a> or email as
-          at <a href="mailto:[e-mail]">[e-mail]</a>
-        </p>
-      </div>
-      <LegalContent />
-    </div>
-  );
-}

app/globals.css

···
   @apply pl-3;
   @apply ml-2;
 }
+
 .transparent-container {
   @apply border;
   @apply border-border-light;
···
     rgb(var(--bg-page)) 85%
   );
   @apply rounded-md;
+}
+
+.menuItem {
+  @apply text-secondary;
+  @apply hover:text-secondary;
+  @apply data-highlighted:bg-[var(--accent-light)];
+  @apply data-highlighted:outline-none;
+  @apply hover:bg-[var(--accent-light)];
+  text-align: left;
+  font-weight: 800;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  outline: none !important;
+  cursor: pointer;
+  background-color: transparent;
+
+  :hover {
+    text-decoration: none !important;
+    background-color: rgb(var(--accent-light));
+  }
 }
 
 .pwa-padding {

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/commentAction.ts

···
 import { AtUri, lexToJson, Un$Typed } from "@atproto/api";
 import { supabaseServerClient } from "supabase/serverClient";
 import { Json } from "supabase/database.types";
-import { Notification } from "src/notifications";
+import {
+  Notification,
+  pingIdentityToUpdateNotification,
+} from "src/notifications";
 import { v7 } from "uuid";
 
 export async function publishComment(args: {
···
       } as unknown as Json,
     })
     .select();
-  let notifications: Notification[] = [
-    {
-      id: v7(),
-      recipient: new AtUri(args.document).host,
-      data: { type: "comment", comment_uri: uri.toString() },
-    },
-  ];
-  if (args.comment.replyTo)
+  let notifications: Notification[] = [];
+  let recipient = args.comment.replyTo
+    ? new AtUri(args.comment.replyTo).host
+    : new AtUri(args.document).host;
+  if (recipient !== credentialSession.did) {
     notifications.push({
       id: v7(),
-      recipient: new AtUri(args.comment.replyTo).host,
-      data: { type: "comment", comment_uri: uri.toString() },
+      recipient,
+      data: {
+        type: "comment",
+        comment_uri: uri.toString(),
+        parent_uri: args.comment.replyTo,
+      },
     });
-  // SOMEDAY: move this out the action with inngest or workflows
-  await supabaseServerClient.from("notifications").insert(notifications);
+    // SOMEDAY: move this out the action with inngest or workflows
+    await supabaseServerClient.from("notifications").insert(notifications);
+    await pingIdentityToUpdateNotification(recipient);
+  }
 
   return {
     record: data?.[0].record as Json,

app/lish/[did]/[publication]/dashboard/Actions.tsx

···
 "use client";
 
-import { Media } from "components/Media";
 import { NewDraftActionButton } from "./NewDraftButton";
+import { PublicationSettingsButton } from "./PublicationSettings";
 import { ActionButton } from "components/ActionBar/ActionButton";
-import { useRouter } from "next/navigation";
-import { Popover } from "components/Popover";
-import { SettingsSmall } from "components/Icons/SettingsSmall";
 import { ShareSmall } from "components/Icons/ShareSmall";
 import { Menu } from "components/Layout";
 import { MenuItem } from "components/Layout";
-import { HomeSmall } from "components/Icons/HomeSmall";
-import { EditPubForm } from "app/lish/createPub/UpdatePubForm";
 import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
 import { usePublicationData } from "./PublicationSWRProvider";
 import { useSmoker } from "components/Toast";
-import { PaintSmall } from "components/Icons/PaintSmall";
-import { PubThemeSetter } from "components/ThemeManager/PubThemeSetter";
 import { useIsMobile } from "src/hooks/isMobile";
 import { SpeedyLink } from "components/SpeedyLink";
 
···
     <>
       <NewDraftActionButton publication={props.publication} />
       <PublicationShareButton />
-      <PublicationThemeButton />
       <PublicationSettingsButton publication={props.publication} />
     </>
   );
···
     </Menu>
   );
 }
-
-function PublicationSettingsButton(props: { publication: string }) {
-  let isMobile = useIsMobile();
-  return (
-    <Popover
-      asChild
-      side={isMobile ? "top" : "right"}
-      align={isMobile ? "center" : "start"}
-      className="max-w-xs"
-      trigger={
-        <ActionButton
-          id="pub-settings-button"
-          icon=<SettingsSmall />
-          label="Settings"
-        />
-      }
-    >
-      <EditPubForm />
-    </Popover>
-  );
-}
-
-function PublicationThemeButton() {
-  let isMobile = useIsMobile();
-
-  return (
-    <Popover
-      asChild
-      className="max-w-xs pb-0 bg-white!"
-      side={isMobile ? "top" : "right"}
-      align={isMobile ? "center" : "start"}
-      trigger={
-        <ActionButton id="pub-theme-button" icon=<PaintSmall /> label="Theme" />
-      }
-    >
-      <PubThemeSetter />
-    </Popover>
-  );
-}

app/lish/[did]/[publication]/dashboard/PublicationSettings.tsx

···
+"use client";
+
+import { ActionButton } from "components/ActionBar/ActionButton";
+import { Popover } from "components/Popover";
+import { SettingsSmall } from "components/Icons/SettingsSmall";
+import { EditPubForm } from "app/lish/createPub/UpdatePubForm";
+import { PubThemeSetter } from "components/ThemeManager/PubThemeSetter";
+import { useIsMobile } from "src/hooks/isMobile";
+import { useState } from "react";
+import { GoBackSmall } from "components/Icons/GoBackSmall";
+import { theme } from "tailwind.config";
+import { ButtonPrimary } from "components/Buttons";
+import { DotLoader } from "components/utils/DotLoader";
+import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
+
+export function PublicationSettingsButton(props: { publication: string }) {
+  let isMobile = useIsMobile();
+  let [state, setState] = useState<"menu" | "general" | "theme">("menu");
+  let [loading, setLoading] = useState(false);
+
+  return (
+    <Popover
+      asChild
+      onOpenChange={() => setState("menu")}
+      side={isMobile ? "top" : "right"}
+      align={isMobile ? "center" : "start"}
+      className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`}
+      arrowFill={theme.colors["border-light"]}
+      trigger={
+        <ActionButton
+          id="pub-settings-button"
+          icon=<SettingsSmall />
+          label="Settings"
+        />
+      }
+    >
+      {state === "general" ? (
+        <EditPubForm
+          backToMenuAction={() => setState("menu")}
+          loading={loading}
+          setLoadingAction={setLoading}
+        />
+      ) : state === "theme" ? (
+        <PubThemeSetter
+          backToMenu={() => setState("menu")}
+          loading={loading}
+          setLoading={setLoading}
+        />
+      ) : (
+        <PubSettingsMenu
+          state={state}
+          setState={setState}
+          loading={loading}
+          setLoading={setLoading}
+        />
+      )}
+    </Popover>
+  );
+}
+
+const PubSettingsMenu = (props: {
+  state: "menu" | "general" | "theme";
+  setState: (s: typeof props.state) => void;
+  loading: boolean;
+  setLoading: (l: boolean) => void;
+}) => {
+  let menuItemClassName =
+    "menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline!";
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      <PubSettingsHeader
+        loading={props.loading}
+        setLoadingAction={props.setLoading}
+        state={"menu"}
+      />
+      <button
+        className={menuItemClassName}
+        type="button"
+        onClick={() => {
+          props.setState("general");
+        }}
+      >
+        Publication Settings
+        <ArrowRightTiny />
+      </button>
+      <button
+        className={menuItemClassName}
+        type="button"
+        onClick={() => props.setState("theme")}
+      >
+        Publication Theme
+        <ArrowRightTiny />
+      </button>
+    </div>
+  );
+};
+
+export const PubSettingsHeader = (props: {
+  state: "menu" | "general" | "theme";
+  backToMenuAction?: () => void;
+  loading: boolean;
+  setLoadingAction: (l: boolean) => void;
+}) => {
+  return (
+    <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1">
+      {props.state === "menu"
+        ? "Settings"
+        : props.state === "general"
+          ? "General"
+          : props.state === "theme"
+            ? "Publication Theme"
+            : ""}
+      {props.state !== "menu" && (
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={() => {
+              props.backToMenuAction && props.backToMenuAction();
+            }}
+          >
+            <GoBackSmall className="text-accent-contrast" />
+          </button>
+
+          <ButtonPrimary compact type="submit">
+            {props.loading ? <DotLoader /> : "Update"}
+          </ButtonPrimary>
+        </div>
+      )}
+    </div>
+  );
+};

app/lish/createPub/UpdatePubForm.tsx

···
 import Link from "next/link";
 import { Checkbox } from "components/Checkbox";
 import type { GetDomainConfigResponseBody } from "@vercel/sdk/esm/models/getdomainconfigop";
+import { PubSettingsHeader } from "../[did]/[publication]/dashboard/PublicationSettings";
 
-export const EditPubForm = () => {
+export const EditPubForm = (props: {
+  backToMenuAction: () => void;
+  loading: boolean;
+  setLoadingAction: (l: boolean) => void;
+}) => {
   let { data } = usePublicationData();
   let { publication: pubData } = data || {};
   let record = pubData?.record as PubLeafletPublication.Record;
···
 
   return (
     <form
-      className="flex flex-col gap-3 w-[1000px] max-w-full py-1"
       onSubmit={async (e) => {
         if (!pubData) return;
         e.preventDefault();
-        setFormState("loading");
+        props.setLoadingAction(true);
+        console.log("step 1:update");
         let data = await updatePublication({
           uri: pubData.uri,
           name: nameValue,
···
           },
         });
         toast({ type: "success", content: "Updated!" });
-        setFormState("normal");
+        props.setLoadingAction(false);
         mutate("publication-data");
       }}
     >
-      <div className="flex items-center justify-between gap-2 ">
-        <p className="pl-0.5 pb-0.5 text-tertiary italic text-sm font-bold">
-          Logo <span className="font-normal">(optional)</span>
-        </p>
-        <div
-          className={`w-8 h-8 rounded-full flex items-center justify-center cursor-pointer  ${iconPreview ? "border border-border-light hover:outline-border" : "border border-dotted border-accent-contrast hover:outline-accent-contrast"} selected-outline`}
-          onClick={() => fileInputRef.current?.click()}
-        >
-          {iconPreview ? (
-            <img
-              src={iconPreview}
-              alt="Logo preview"
-              className="w-full h-full rounded-full object-cover"
-            />
-          ) : (
-            <AddTiny className="text-accent-1" />
-          )}
+      <PubSettingsHeader
+        loading={props.loading}
+        setLoadingAction={props.setLoadingAction}
+        backToMenuAction={props.backToMenuAction}
+        state={"theme"}
+      />
+      <div className="flex flex-col gap-3 w-[1000px] max-w-full pb-2">
+        <div className="flex items-center justify-between gap-2 ">
+          <p className="pl-0.5 pb-0.5 text-tertiary italic text-sm font-bold">
+            Logo <span className="font-normal">(optional)</span>
+          </p>
+          <div
+            className={`w-8 h-8 rounded-full flex items-center justify-center cursor-pointer  ${iconPreview ? "border border-border-light hover:outline-border" : "border border-dotted border-accent-contrast hover:outline-accent-contrast"} selected-outline`}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {iconPreview ? (
+              <img
+                src={iconPreview}
+                alt="Logo preview"
+                className="w-full h-full rounded-full object-cover"
+              />
+            ) : (
+              <AddTiny className="text-accent-1" />
+            )}
+          </div>
+          <input
+            type="file"
+            accept="image/*"
+            className="hidden"
+            ref={fileInputRef}
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) {
+                setIconFile(file);
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                  setIconPreview(e.target?.result as string);
+                };
+                reader.readAsDataURL(file);
+              }
+            }}
+          />
         </div>
-        <input
-          type="file"
-          accept="image/*"
-          className="hidden"
-          ref={fileInputRef}
-          onChange={(e) => {
-            const file = e.target.files?.[0];
-            if (file) {
-              setIconFile(file);
-              const reader = new FileReader();
-              reader.onload = (e) => {
-                setIconPreview(e.target?.result as string);
-              };
-              reader.readAsDataURL(file);
-            }
-          }}
-        />
-      </div>
 
-      <label>
-        <p className="pl-0.5 pb-0.5 text-tertiary italic text-sm font-bold">
-          Publication Name
-        </p>
-        <Input
-          className="input-with-border w-full text-primary"
-          type="text"
-          id="pubName"
-          value={nameValue}
-          onChange={(e) => {
-            setNameValue(e.currentTarget.value);
-          }}
-        />
-      </label>
-      <label>
-        <p className="text-tertiary italic text-sm font-bold pl-0.5 pb-0.5">
-          Description <span className="font-normal">(optional)</span>
-        </p>
-        <Input
-          textarea
-          className="input-with-border w-full text-primary"
-          rows={3}
-          id="pubDescription"
-          value={descriptionValue}
-          onChange={(e) => {
-            setDescriptionValue(e.currentTarget.value);
-          }}
-        />
-      </label>
-
-      <CustomDomainForm />
-      <hr className="border-border-light" />
-
-      <Checkbox
-        checked={showInDiscover}
-        onChange={(e) => setShowInDiscover(e.target.checked)}
-      >
-        <div className=" pt-0.5 flex flex-col  text-sm italic text-tertiary ">
-          <p className="font-bold">
-            Show In{" "}
-            <a href="/discover" target="_blank">
-              Discover
-            </a>
+        <label>
+          <p className="pl-0.5 pb-0.5 text-tertiary italic text-sm font-bold">
+            Publication Name
           </p>
-          <p className="text-xs text-tertiary font-normal">
-            This publication will appear on our public Discover page
+          <Input
+            className="input-with-border w-full text-primary"
+            type="text"
+            id="pubName"
+            value={nameValue}
+            onChange={(e) => {
+              setNameValue(e.currentTarget.value);
+            }}
+          />
+        </label>
+        <label>
+          <p className="text-tertiary italic text-sm font-bold pl-0.5 pb-0.5">
+            Description <span className="font-normal">(optional)</span>
           </p>
-        </div>
-      </Checkbox>
+          <Input
+            textarea
+            className="input-with-border w-full text-primary"
+            rows={3}
+            id="pubDescription"
+            value={descriptionValue}
+            onChange={(e) => {
+              setDescriptionValue(e.currentTarget.value);
+            }}
+          />
+        </label>
 
-      <Checkbox
-        checked={showComments}
-        onChange={(e) => setShowComments(e.target.checked)}
-      >
-        <div className=" pt-0.5 flex flex-col  text-sm italic text-tertiary ">
-          <p className="font-bold">Show comments on posts</p>
-        </div>
-      </Checkbox>
-      <hr className="border-border-light" />
+        <CustomDomainForm />
+        <hr className="border-border-light" />
+
+        <Checkbox
+          checked={showInDiscover}
+          onChange={(e) => setShowInDiscover(e.target.checked)}
+        >
+          <div className=" pt-0.5 flex flex-col  text-sm italic text-tertiary ">
+            <p className="font-bold">
+              Show In{" "}
+              <a href="/discover" target="_blank">
+                Discover
+              </a>
+            </p>
+            <p className="text-xs text-tertiary font-normal">
+              This publication will appear on our public Discover page
+            </p>
+          </div>
+        </Checkbox>
 
-      <ButtonPrimary className="place-self-end" type="submit">
-        {formState === "loading" ? <DotLoader /> : "Update!"}
-      </ButtonPrimary>
+        <Checkbox
+          checked={showComments}
+          onChange={(e) => setShowComments(e.target.checked)}
+        >
+          <div className=" pt-0.5 flex flex-col  text-sm italic text-tertiary ">
+            <p className="font-bold">Show comments on posts</p>
+          </div>
+        </Checkbox>
+      </div>
     </form>
   );
 };

components/ActionBar/ActionButton.tsx

···
 type ButtonProps = Omit<JSX.IntrinsicElements["button"], "content">;
 
 export const ActionButton = (
-  props: ButtonProps & {
+  _props: ButtonProps & {
     id?: string;
     icon: React.ReactNode;
     label: React.ReactNode;
···
     nav?: boolean;
     className?: string;
     subtext?: string;
+    labelOnMobile?: boolean;
+    z?: boolean;
   },
 ) => {
-  let { id, icon, label, primary, secondary, nav, ...buttonProps } = props;
+  let {
+    id,
+    icon,
+    label,
+    primary,
+    secondary,
+    nav,
+    labelOnMobile,
+    subtext,
+    className,
+    ...buttonProps
+  } = _props;
   let sidebar = useContext(SidebarContext);
   let inOpenPopover = useContext(PopoverOpenContext);
   useEffect(() => {
···
       };
     }
   }, [sidebar, inOpenPopover]);
+
+  let showLabelOnMobile =
+    labelOnMobile !== false && (primary || secondary || nav);
+
   return (
     <button
       {...buttonProps}
···
       rounded-md border
       flex gap-2 items-start sm:justify-start justify-center
       p-1 sm:mx-0
+      ${showLabelOnMobile && !secondary ? "w-full" : "sm:w-full w-max"}
       ${
         primary
-          ? "w-full bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0"
+          ? "bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0"
           : secondary
-            ? "sm:w-full w-max bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0"
+            ? " bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0"
             : nav
-              ? "w-full border-transparent text-secondary sm:hover:border-border justify-start!"
-              : "sm:w-full border-transparent text-accent-contrast sm:hover:border-accent-contrast"
+              ? "border-transparent text-secondary sm:hover:border-border justify-start!"
+              : "border-transparent text-accent-contrast sm:hover:border-accent-contrast"
       }
-      ${props.className}
+      ${className}
       `}
     >
       <div className="shrink-0">{icon}</div>
       <div
-        className={`flex flex-col pr-1 leading-snug max-w-full min-w-0  ${sidebar.open ? "block" : primary || secondary || nav ? "sm:hidden block" : "hidden"}`}
+        className={`flex flex-col pr-1 leading-snug max-w-full min-w-0  ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
       >
         <div className="truncate text-left pt-[1px]">{label}</div>
-        {props.subtext && (
+        {subtext && (
           <div className="text-xs text-tertiary font-normal text-left">
-            {props.subtext}
+            {subtext}
           </div>
         )}
       </div>

components/ActionBar/Navigation.tsx

···
   ReaderReadSmall,
   ReaderUnreadSmall,
 } from "components/Icons/ReaderSmall";
+import {
+  NotificationsReadSmall,
+  NotificationsUnreadSmall,
+} from "components/Icons/NotificationSmall";
+import { SpeedyLink } from "components/SpeedyLink";
+import { Separator } from "components/Layout";
 
-export type navPages = "home" | "reader" | "pub" | "discover";
+export type navPages = "home" | "reader" | "pub" | "discover" | "notifications";
 
 export const DesktopNavigation = (props: {
   currentPage: navPages;
   publication?: string;
 }) => {
+  let { identity } = useIdentityData();
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-3">
       <Sidebar alwaysOpen>
         <NavigationOptions
           currentPage={props.currentPage}
           publication={props.publication}
         />
       </Sidebar>
-      {/*<Sidebar alwaysOpen>
-        <ActionButton
-          icon={
-            unreadNotifications ? (
-              <NotificationsUnreadSmall />
-            ) : (
-              <NotificationsReadSmall />
-            )
-          }
-          label="Notifications"
-        />
-      </Sidebar>*/}
+      {identity?.atp_did && (
+        <Sidebar alwaysOpen>
+          <NotificationButton current={props.currentPage === "notifications"} />
+        </Sidebar>
+      )}
     </div>
   );
 };
···
     (pub) => pub.uri === props.publication,
   );
   return (
-    <Popover
-      onOpenAutoFocus={(e) => e.preventDefault()}
-      asChild
-      className="px-2! !max-w-[256px]"
-      trigger={
-        <div className="shrink-0 p-1 pr-2 text-accent-contrast h-full flex gap-2 font-bold items-center">
-          <MenuSmall />
-          <div className="truncate max-w-[72px]">
-            {props.currentPage === "home" ? (
-              <>Home</>
-            ) : props.currentPage === "reader" ? (
-              <>Reader</>
-            ) : props.currentPage === "discover" ? (
-              <>Discover</>
-            ) : props.currentPage === "pub" ? (
-              thisPublication && <>{thisPublication.name}</>
-            ) : null}
+    <div className="flex gap-1 ">
+      <Popover
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        asChild
+        className="px-2! !max-w-[256px]"
+        trigger={
+          <div className="shrink-0 p-1 text-accent-contrast h-full flex gap-2 font-bold items-center">
+            <MenuSmall />
           </div>
-        </div>
-      }
-    >
-      <NavigationOptions
-        currentPage={props.currentPage}
-        publication={props.publication}
-      />
-    </Popover>
+        }
+      >
+        <NavigationOptions
+          currentPage={props.currentPage}
+          publication={props.publication}
+          isMobile
+        />
+      </Popover>
+      {identity?.atp_did && (
+        <>
+          <Separator />
+          <NotificationButton />
+        </>
+      )}
+    </div>
   );
 };
 
 const NavigationOptions = (props: {
   currentPage: navPages;
   publication?: string;
+  isMobile?: boolean;
 }) => {
   let { identity } = useIdentityData();
   let thisPublication = identity?.publications?.find(
···
 
 const HomeButton = (props: { current?: boolean }) => {
   return (
-    <Link href={"/home"} className="hover:!no-underline">
+    <SpeedyLink href={"/home"} className="hover:!no-underline">
       <ActionButton
         nav
         icon={<HomeSmall />}
         label="Home"
         className={props.current ? "bg-bg-page! border-border-light!" : ""}
       />
-    </Link>
+    </SpeedyLink>
   );
 };
 
···
 
   if (!props.subs) return;
   return (
-    <Link href={"/reader"} className="hover:no-underline!">
+    <SpeedyLink href={"/reader"} className="hover:no-underline!">
       <ActionButton
         nav
         icon={readerUnreads ? <ReaderUnreadSmall /> : <ReaderReadSmall />}
···
           ${props.current && "border-accent-contrast!"}
         `}
       />
-    </Link>
+    </SpeedyLink>
   );
 };
 
···
     </Link>
   );
 };
+
+export function NotificationButton(props: { current?: boolean }) {
+  let { identity } = useIdentityData();
+  let unreads = identity?.notifications[0]?.count;
+
+  return (
+    <SpeedyLink href={"/notifications"} className="hover:no-underline!">
+      <ActionButton
+        nav
+        labelOnMobile={false}
+        icon={
+          unreads ? (
+            <NotificationsUnreadSmall className="text-accent-contrast" />
+          ) : (
+            <NotificationsReadSmall />
+          )
+        }
+        label="Notifications"
+        className={`${props.current ? "bg-bg-page! border-border-light!" : ""} ${unreads ? "text-accent-contrast!" : ""}`}
+      />
+    </SpeedyLink>
+  );
+}

components/Avatar.tsx

···
+import { AccountTiny } from "./Icons/AccountTiny";
+
+export const Avatar = (props: {
+  src: string | undefined;
+  displayName: string | undefined;
+  tiny?: boolean;
+}) => {
+  if (props.src)
+    return (
+      <img
+        className={`${props.tiny ? "w-4 h-4" : "w-5 h-5"} rounded-full shrink-0 border border-border-light`}
+        src={props.src}
+        alt={
+          props.displayName
+            ? `${props.displayName}'s avatar`
+            : "someone's avatar"
+        }
+      />
+    );
+  else
+    return (
+      <div
+        className={`bg-[var(--accent-light)] flex rounded-full shrink-0 border border-border-light place-items-center justify-center text-accent-1 ${props.tiny ? "w-4 h-4" : "w-5 h-5"}`}
+      >
+        <AccountTiny className={props.tiny ? "scale-80" : "scale-90"} />
+      </div>
+    );
+};

components/Blocks/Block.tsx

···
         className={`listMarker group/list-marker p-2 ${children.length > 0 ? "cursor-pointer" : "cursor-default"}`}
       >
         <div
-          className={`h-[5px] w-[5px] rounded-full bg-secondary shrink-0 right-0 outline outline-1  outline-offset-1
+          className={`h-[5px] w-[5px] rounded-full bg-secondary shrink-0 right-0 outline  outline-offset-1
                       ${
                         folded
                           ? "outline-secondary"

components/Blocks/PublicationPollBlock.tsx

···
 
     const docRecord = publicationData.documents
       .data as PubLeafletDocument.Record;
-    console.log(docRecord);
 
     // Search through all pages and blocks to find if this poll entity has been published
     for (const page of docRecord.pages || []) {
···
         for (const blockWrapper of linearPage.blocks || []) {
           if (blockWrapper.block?.$type === ids.PubLeafletBlocksPoll) {
             const pollBlock = blockWrapper.block as PubLeafletBlocksPoll.Main;
-            console.log(pollBlock);
             // Check if this poll's rkey matches our entity ID
             const rkey = pollBlock.pollRef.uri.split("/").pop();
             if (rkey === props.entityID) {

components/Icons/AccountTiny.tsx

···
+import { Props } from "./Props";
+
+export const AccountTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11.9995 11.6042C12.2359 11.3531 12.6319 11.3406 12.8833 11.5768C13.1345 11.8133 13.1469 12.2102 12.9106 12.4616C10.9942 14.4996 8.48343 14.9669 5.82467 14.4899C5.48536 14.4287 5.25917 14.1047 5.31979 13.7653C5.38075 13.4255 5.7066 13.1985 6.04635 13.2594C8.41545 13.6844 10.4511 13.2509 11.9995 11.6042ZM7.40377 1.64517C7.57942 1.34822 7.96315 1.25 8.26022 1.42544C8.55725 1.60111 8.65554 1.98479 8.47995 2.28189L4.62155 8.80923C4.68119 8.84969 4.74613 8.89372 4.81686 8.93716C5.20557 9.17585 5.72696 9.42535 6.30123 9.51724C7.59938 9.72475 8.32429 9.55762 8.60495 9.41959C8.91451 9.26714 9.28927 9.39433 9.44186 9.70376C9.59429 10.0133 9.46707 10.3881 9.15768 10.5407C8.55667 10.8366 7.53939 10.9811 6.10397 10.7516C5.31168 10.6249 4.63266 10.2913 4.16256 10.0026C3.92499 9.85669 3.73326 9.71756 3.60006 9.61392C3.53354 9.56215 3.48092 9.51848 3.44381 9.48697C3.42534 9.47127 3.41058 9.45834 3.39987 9.44888C3.39453 9.44418 3.38953 9.44016 3.3862 9.43716C3.38469 9.43579 3.38337 9.43423 3.38229 9.43326L3.38034 9.43228V9.4313H3.37936C3.16132 9.23186 3.11298 8.90647 3.26315 8.65201L7.40377 1.64517ZM12.4995 2.25259C13.2777 2.19942 13.9584 2.87497 14.019 3.76138C14.0795 4.64775 13.4974 5.40938 12.7192 5.46255C11.941 5.51572 11.2612 4.84018 11.2006 3.95376C11.1401 3.06754 11.7215 2.306 12.4995 2.25259ZM2.08444 2.98501C2.35274 2.19505 3.03678 1.71257 3.61178 1.90787C4.18673 2.1032 4.43574 2.90212 4.16745 3.69205C3.89911 4.48193 3.21507 4.9635 2.6401 4.76822C2.06529 4.57291 1.81644 3.77476 2.08444 2.98501Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

components/Icons/GoBackSmall.tsx

···
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12.6826 5.96582C12.2921 5.57556 11.659 5.57557 11.2686 5.96582L5.94141 11.293C5.55114 11.6834 5.55114 12.3166 5.94141 12.707L11.2686 18.0332L11.3438 18.1025C11.7365 18.4229 12.3165 18.3993 12.6826 18.0332C13.0484 17.6671 13.0712 17.088 12.751 16.6953L12.6826 16.6191L9.06348 13H17.9473L18.0498 12.9951C18.5538 12.9438 18.9471 12.5175 18.9473 12C18.9472 11.4824 18.5538 11.0563 18.0498 11.0049L17.9473 11H9.06152L12.6826 7.37988C13.0729 6.98941 13.0729 6.35629 12.6826 5.96582Z"

components/Icons/MentionTiny.tsx

···
+import { Props } from "./Props";
+
+export const MentionTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.7548 1.48131C8.37164 1.12732 7.78076 1.12733 7.39761 1.48131L6.31216 2.48412C6.11579 2.66553 5.85496 2.76077 5.58789 2.74856L4.02324 2.67702C3.42714 2.64976 2.93999 3.14727 2.97979 3.74267L3.04008 4.64469C3.06279 4.98446 2.91104 5.31244 2.63737 5.51507L1.84867 6.09903C1.30874 6.4988 1.30874 7.30663 1.84867 7.7064L2.63737 8.29036C2.91104 8.49299 3.06279 8.82097 3.04008 9.16074L2.97979 10.0628C2.93999 10.6582 3.42714 11.1557 4.02324 11.1284L5.58789 11.0569C5.85496 11.0447 6.11579 11.1399 6.31216 11.3213L7.39761 12.3241C7.78076 12.6781 8.37165 12.6781 8.7548 12.3241L9.84025 11.3213C9.8673 11.2963 9.89557 11.273 9.92492 11.2513C10.379 11.5423 10.9394 11.8764 11.3808 12.0072C12.1456 12.2339 12.9198 12.3728 13.6513 12.2853C14.4861 12.1855 14.9021 12.0899 15.3797 11.8006C14.3597 11.4989 13.8748 11.0143 13.4688 10.4865C13.2705 10.2287 13.1568 9.97205 13.0619 9.71255L12.8396 9.00919C12.8217 8.74234 13.0797 8.57625 13.3239 8.41908C13.3906 8.37613 13.4563 8.33385 13.515 8.29036L14.3037 7.7064C14.8437 7.30663 14.8437 6.4988 14.3037 6.09903L13.515 5.51507C13.2414 5.31244 13.0896 4.98447 13.1123 4.6447L13.1726 3.74267C13.2124 3.14727 12.7253 2.64976 12.1292 2.67702L10.5645 2.74856C10.2975 2.76077 10.0366 2.66553 9.84025 2.48412L8.7548 1.48131ZM0.724555 8.54935C0.893092 8.33061 1.20705 8.2899 1.42579 8.45844L1.95221 8.86403C2.17095 9.03256 2.21166 9.34652 2.04312 9.56526C1.87458 9.78401 1.56063 9.82471 1.34188 9.65618L0.815467 9.25059C0.596721 9.08206 0.556018 8.7681 0.724555 8.54935ZM2.22796 11.7918C2.40295 11.5782 2.71798 11.5469 2.9316 11.7219C3.05506 11.823 3.21912 11.8981 3.3887 11.9473C3.55945 11.9968 3.70151 12.0103 3.75507 12.0103C4.04231 12.0103 4.26845 11.9927 4.45796 11.9729C4.51258 11.9672 4.56967 11.9606 4.62708 11.954C4.75105 11.9396 4.8765 11.9251 4.98174 11.9192C5.15574 11.9095 5.34286 11.9165 5.54475 11.9825C5.74373 12.0475 5.92168 12.158 6.10009 12.3035C6.28301 12.4526 6.47827 12.6379 6.65933 12.8097C6.70174 12.8499 6.74338 12.8894 6.7839 12.9276C7.01119 13.1415 7.20968 13.3186 7.38302 13.4332C7.50037 13.5108 7.73051 13.5859 8.01215 13.6062C8.29295 13.6264 8.53643 13.5857 8.67785 13.5166C8.81401 13.4501 8.97286 13.3418 9.18171 13.1869C9.235 13.1474 9.2917 13.1048 9.35123 13.06L9.3513 13.0599L9.35133 13.0599C9.51197 12.9391 9.69328 12.8027 9.88425 12.6704C10.0346 12.5664 10.2298 12.5526 10.3932 12.6347C11.1162 12.9977 11.6692 13.1581 12.1996 13.2235C12.7423 13.2903 13.2802 13.261 14.0061 13.217C14.2817 13.2003 14.5187 13.4102 14.5354 13.6858C14.5521 13.9615 14.3422 14.1984 14.0666 14.2151C13.3566 14.2582 12.7265 14.2959 12.0773 14.216C11.492 14.1438 10.9056 13.9787 10.2184 13.6606C10.133 13.7233 10.0503 13.7855 9.96791 13.8475L9.96771 13.8477C9.90441 13.8953 9.84129 13.9428 9.77726 13.9902C9.56766 14.1456 9.34378 14.3043 9.11669 14.4152C8.76159 14.5886 8.32363 14.6312 7.94034 14.6036C7.55787 14.5761 7.14126 14.4722 6.83145 14.2673C6.57763 14.0995 6.32221 13.8663 6.09857 13.6558C6.05019 13.6103 6.00322 13.5657 5.9575 13.5224L5.95731 13.5222L5.9573 13.5222C5.77867 13.3528 5.61903 13.2015 5.46819 13.0785C5.34858 12.981 5.27842 12.9475 5.23423 12.933C5.19296 12.9196 5.14185 12.9118 5.03761 12.9176C4.96094 12.9219 4.88552 12.9308 4.78482 12.9425L4.78461 12.9426L4.78437 12.9426C4.72196 12.9499 4.64983 12.9583 4.56169 12.9675C4.34798 12.9898 4.08593 13.0103 3.75507 13.0103C3.59643 13.0103 3.36037 12.9803 3.11004 12.9077C2.85853 12.8347 2.55853 12.7089 2.29792 12.4955C2.0843 12.3205 2.05298 12.0054 2.22796 11.7918ZM7.36287 5.60901L7.868 7.84218H8.29336L8.79849 5.60901V3.81006H7.36287V5.60901ZM8.89597 9.99561V8.4182H7.25653V9.99561H8.89597Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

components/Icons/NotificationSmall.tsx

···
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.3779 0.890636C13.5297 0.868361 14.2312 1.35069 14.6104 1.8047C15.1942 2.50387 15.2636 3.34086 15.2129 3.95314C17.7074 4.96061 18.8531 7.45818 19.375 10.3975C19.5903 11.1929 20.0262 11.5635 20.585 11.9336C21.1502 12.3079 22.0847 12.7839 22.5879 13.7998C23.4577 15.556 22.8886 17.8555 20.9297 19.083C20.1439 19.5754 19.2029 20.1471 17.8496 20.5869C17.1962 20.7993 16.454 20.9768 15.5928 21.1055C15.2068 22.4811 13.9287 23.4821 12.4238 23.4824C10.9225 23.4824 9.64464 22.4867 9.25489 21.1162C8.37384 20.9871 7.61998 20.8046 6.95899 20.5869C5.62158 20.1464 4.69688 19.5723 3.91602 19.083C1.95717 17.8555 1.38802 15.556 2.25782 13.7998C2.76329 12.7794 3.60199 12.3493 4.18653 12.0068C4.7551 11.6737 5.1753 11.386 5.45606 10.7432C5.62517 9.31217 5.93987 8.01645 6.4668 6.92482C7.1312 5.54855 8.13407 4.49633 9.56251 3.92482C9.53157 3.34709 9.6391 2.63284 10.1133 1.98927C10.1972 1.87543 10.4043 1.594 10.7822 1.34669C11.1653 1.09611 11.6872 0.904101 12.3779 0.890636ZM14.1709 21.2608C13.6203 21.3007 13.0279 21.3242 12.3887 21.3242C11.7757 21.3242 11.2072 21.3024 10.6777 21.2656C11.0335 21.8421 11.6776 22.2324 12.4238 22.2324C13.1718 22.2321 13.816 21.8396 14.1709 21.2608ZM12.4004 2.38966C11.9872 2.39776 11.7419 2.50852 11.5996 2.60157C11.4528 2.6977 11.3746 2.801 11.3193 2.87599C11.088 3.19 11.031 3.56921 11.0664 3.92677C11.084 4.10311 11.1233 4.258 11.1631 4.37013C11.1875 4.43883 11.205 4.47361 11.21 4.48341C11.452 4.78119 11.4299 5.22068 11.1484 5.49415C10.8507 5.78325 10.3748 5.77716 10.0869 5.48048C10.0533 5.44582 10.0231 5.40711 9.99415 5.3672C9.0215 5.79157 8.31886 6.53162 7.81641 7.57228C7.21929 8.80941 6.91013 10.4656 6.82129 12.4746L6.81934 12.5137L6.81446 12.5518C6.73876 13.0607 6.67109 13.5103 6.53418 13.9121C6.38567 14.3476 6.16406 14.7061 5.82032 15.0899C5.54351 15.3988 5.06973 15.4268 4.76172 15.1514C4.45392 14.8758 4.42871 14.4019 4.70508 14.0928C4.93763 13.8332 5.04272 13.6453 5.11524 13.4326C5.14365 13.3492 5.16552 13.2588 5.18848 13.1553C5.10586 13.2062 5.02441 13.2544 4.94532 13.3008C4.28651 13.6868 3.87545 13.9129 3.60157 14.4658C3.08548 15.5082 3.38433 16.9793 4.71192 17.8115C5.4776 18.2913 6.27423 18.7818 7.42872 19.1621C8.58507 19.543 10.1358 19.8242 12.3887 19.8242C14.6416 19.8242 16.2108 19.5429 17.3857 19.1611C18.5582 18.7801 19.3721 18.2882 20.1328 17.8115C21.4611 16.9793 21.7595 15.5084 21.2432 14.4658C20.9668 13.9081 20.515 13.6867 19.7568 13.1846C19.7553 13.1835 19.7535 13.1827 19.752 13.1817C19.799 13.3591 19.8588 13.5202 19.9287 13.6514C20.021 13.8244 20.1034 13.8927 20.1533 13.917C20.5249 14.0981 20.6783 14.5465 20.4961 14.919C20.3135 15.2913 19.8639 15.4467 19.4922 15.2656C19.0607 15.0553 18.7821 14.6963 18.6035 14.3613C18.4238 14.0242 18.3154 13.6559 18.2471 13.3379C18.1778 13.0155 18.1437 12.7147 18.127 12.4971C18.1185 12.3873 18.1145 12.2956 18.1123 12.2305C18.1115 12.2065 18.1107 12.1856 18.1104 12.169C18.0569 11.6585 17.9885 11.1724 17.9082 10.7109C17.9002 10.6794 17.8913 10.6476 17.8838 10.6152L17.8906 10.6133C17.4166 7.97573 16.4732 6.17239 14.791 5.40821C14.5832 5.64607 14.2423 5.73912 13.9365 5.61036C13.5557 5.44988 13.3777 5.01056 13.5391 4.62892C13.5394 4.62821 13.5397 4.62699 13.54 4.62599C13.5425 4.61977 13.5479 4.6087 13.5537 4.59278C13.5658 4.55999 13.5837 4.50758 13.6035 4.44142C13.6438 4.30713 13.6903 4.12034 13.7139 3.91212C13.7631 3.47644 13.7038 3.06402 13.457 2.76857C13.3434 2.63264 13.0616 2.37678 12.4004 2.38966ZM10.1055 16.625C11.6872 16.8411 12.8931 16.8585 13.8174 16.7539C14.2287 16.7076 14.5997 17.0028 14.6465 17.4141C14.693 17.8256 14.3969 18.1976 13.9854 18.2442C12.9038 18.3665 11.5684 18.3389 9.90235 18.1113C9.49223 18.0551 9.20488 17.6768 9.26075 17.2666C9.3168 16.8563 9.6952 16.5691 10.1055 16.625ZM16.3887 16.3047C16.7403 16.086 17.203 16.1935 17.4219 16.5449C17.6406 16.8967 17.5324 17.3594 17.1807 17.5781C16.9689 17.7097 16.6577 17.8424 16.4033 17.9131C16.0045 18.0237 15.5914 17.7904 15.4805 17.3916C15.3696 16.9926 15.6031 16.5788 16.002 16.4678C16.1344 16.431 16.3112 16.3527 16.3887 16.3047Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const ReaderUnread = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path

components/Icons/ReplyTiny.tsx

···
+import { Props } from "./Props";
+
+export const ReplyTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.7767 3.01749C11.6289 3.39627 12.1593 3.79765 12.4801 4.2201C12.7868 4.62405 12.9578 5.12048 12.9578 5.81175C12.9578 6.45434 12.7165 7.17288 12.2111 7.72195C11.7245 8.25058 10.9456 8.67427 9.75117 8.67427L4.45638 8.67427L6.97173 6.15892C7.36226 5.7684 7.36226 5.13523 6.97173 4.74471C6.58121 4.35418 5.94804 4.35418 5.55752 4.74471L1.33513 8.9671C0.944605 9.35762 0.944605 9.99079 1.33513 10.3813L5.55752 14.6037C5.94804 14.9942 6.58121 14.9942 6.97173 14.6037C7.36226 14.2132 7.36226 13.58 6.97173 13.1895L4.45652 10.6743L9.75117 10.6743C11.4697 10.6743 12.7941 10.0416 13.6826 9.07646C14.5522 8.13173 14.9578 6.91901 14.9578 5.81175C14.9578 4.75316 14.6829 3.81405 14.073 3.01069C13.4771 2.22581 12.62 1.64809 11.589 1.18986C11.0843 0.965558 10.4933 1.19285 10.269 1.69754C10.0447 2.20222 10.272 2.79318 10.7767 3.01749Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

components/IdentityProvider.tsx

···
 "use client";
 import { getIdentityData } from "actions/getIdentityData";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect } from "react";
 import useSWR, { KeyedMutator, mutate } from "swr";
 import { DashboardState } from "./PageLayouts/DashboardLayout";
+import { supabaseBrowserClient } from "supabase/browserClient";
 
 export type InterfaceState = {
   dashboards: { [id: string]: DashboardState | undefined };
···
   let { data: identity, mutate } = useSWR("identity", () => getIdentityData(), {
     fallbackData: props.initialValue,
   });
+  useEffect(() => {
+    if (!identity?.atp_did) return;
+    let supabase = supabaseBrowserClient();
+    let channel = supabase.channel(`identity.atp_did:${identity.atp_did}`);
+    channel.on("broadcast", { event: "notification" }, () => {
+      mutate();
+    });
+    channel.subscribe();
+    return () => {
+      channel.unsubscribe();
+    };
+  }, [identity?.atp_did]);
   return (
     <IdentityContext.Provider value={{ identity, mutate }}>
       {props.children}

components/Layout.tsx

···
               alignOffset={props.alignOffset ? props.alignOffset : undefined}
               sideOffset={4}
               collisionPadding={16}
-              className={`dropdownMenu z-20 bg-bg-page flex flex-col py-1 gap-0.5 border border-border rounded-md shadow-md ${props.className}`}
+              className={`dropdownMenu z-20 bg-bg-page flex flex-col p-1 gap-0.5 border border-border rounded-md shadow-md ${props.className}`}
             >
               {props.children}
               <DropdownMenu.Arrow
···
         props.onSelect(event);
       }}
       className={`
-        MenuItem
-        font-bold z-10 py-1 px-3
-        text-left text-secondary
+        menuItem
+        z-10 py-1! px-2!
         flex gap-2
-        data-highlighted:bg-border-light data-highlighted:text-secondary
-        hover:bg-border-light hover:text-secondary
-        outline-hidden
-        cursor-pointer
         ${props.className}
         `}
     >

components/PageLayouts/DashboardLayout.tsx

···
   DesktopNavigation,
   MobileNavigation,
   navPages,
+  NotificationButton,
 } from "components/ActionBar/Navigation";
 import { create } from "zustand";
 import { Popover } from "components/Popover";
···
 export const useDashboardStore = create<DashboardStore>((set, get) => ({
   dashboards: {},
   setDashboard: (id: string, partial: Partial<DashboardState>) => {
-    console.log(partial);
     set((state) => ({
       dashboards: {
         ...state.dashboards,
···
   const tabParam = searchParams.get("tab");
 
   // Initialize tab from search param if valid, otherwise use default
-  const initialTab = tabParam && props.tabs[tabParam] ? tabParam : props.defaultTab;
+  const initialTab =
+    tabParam && props.tabs[tabParam] ? tabParam : props.defaultTab;
   let [tab, setTab] = useState<keyof T>(initialTab);
 
   // Custom setter that updates both state and URL
···
         className={`dashboard pwa-padding relative max-w-(--breakpoint-lg) w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6`}
       >
         <MediaContents mobile={false}>
-          <div className="flex flex-col gap-4 my-6">
+          <div className="flex flex-col gap-3 my-6">
             <DesktopNavigation
               currentPage={props.currentPage}
               publication={props.publication}
···
   hasTemplates: boolean;
 }) => {
   let { display, sort } = useDashboardState();
-  console.log({ display, props });
   display = display || props.defaultDisplay;
   let setState = useSetDashboardState();
 
   let { identity } = useIdentityData();
-  console.log(props);
 
   return (
     <div className="dashboardControls w-full flex gap-4">
···
   defaultDisplay: Exclude<DashboardState["display"], undefined>;
 }) => {
   let { display, sort } = useDashboardState();
-  console.log({ display, props });
   display = display || props.defaultDisplay;
   let setState = useSetDashboardState();
   return (

components/Popover.tsx

···
 import * as RadixPopover from "@radix-ui/react-popover";
 import { theme } from "tailwind.config";
 import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";
-import { createContext, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 import { PopoverArrow } from "./Icons/PopoverArrow";
 
 export const PopoverOpenContext = createContext(false);
···
   arrowFill?: string;
 }) => {
   let [open, setOpen] = useState(props.open || false);
+  useEffect(() => {
+    if (props.open !== undefined) setOpen(props.open);
+  }, [props.open]);
   return (
     <RadixPopover.Root
       open={props.open}
       onOpenChange={(o) => {
         setOpen(o);
-        props.onOpenChange?.(open);
+        props.onOpenChange?.(o);
       }}
     >
       <PopoverOpenContext value={open}>

components/ThemeManager/PubThemeSetter.tsx

···
 import { useLocalPubTheme } from "./PublicationThemeProvider";
 import { BaseThemeProvider } from "./ThemeProvider";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
-import { ButtonSecondary } from "components/Buttons";
 import { updatePublicationTheme } from "app/lish/createPub/updatePublication";
-import { DotLoader } from "components/utils/DotLoader";
 import { PagePickers } from "./PubPickers/PubTextPickers";
 import { BackgroundPicker } from "./PubPickers/PubBackgroundPickers";
 import { PubAccentPickers } from "./PubPickers/PubAcccentPickers";
 import { Separator } from "components/Layout";
+import { PubSettingsHeader } from "app/lish/[did]/[publication]/dashboard/PublicationSettings";
 
 export type ImageState = {
   src: string;
   file?: File;
   repeat: number | null;
 };
-export const PubThemeSetter = () => {
-  let [loading, setLoading] = useState(false);
+export const PubThemeSetter = (props: {
+  backToMenu: () => void;
+  loading: boolean;
+  setLoading: (l: boolean) => void;
+}) => {
   let [sample, setSample] = useState<"pub" | "post">("pub");
   let [openPicker, setOpenPicker] = useState<pickers>("null");
   let { data, mutate } = usePublicationData();
···
   return (
     <BaseThemeProvider local {...localPubTheme}>
       <form
-        className="bg-accent-1 -mx-3 -mt-2  px-3 py-1 mb-1 flex justify-between items-center"
         onSubmit={async (e) => {
           e.preventDefault();
           if (!pub) return;
-          setLoading(true);
+          props.setLoading(true);
           let result = await updatePublicationTheme({
             uri: pub.uri,
             theme: {
···
               };
             return pub;
           }, false);
-          setLoading(false);
+          props.setLoading(false);
         }}
       >
-        <h4 className="text-accent-2">Publication Theme</h4>
-        <ButtonSecondary compact>
-          {loading ? <DotLoader /> : "Update"}
-        </ButtonSecondary>
+        <PubSettingsHeader
+          loading={props.loading}
+          setLoadingAction={props.setLoading}
+          backToMenuAction={props.backToMenu}
+          state={"theme"}
+        />
       </form>
 
-      <div>
-        <div className="themeSetterContent flex flex-col w-full overflow-y-scroll no-scrollbar">
-          <div className="themeBGLeaflet flex">
-            <div
-              className={`bgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}
-            >
-              <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md text-[#595959] bg-white">
-                <BackgroundPicker
-                  bgImage={image}
-                  setBgImage={setImage}
-                  backgroundColor={localPubTheme.bgLeaflet}
-                  pageBackground={localPubTheme.bgPage}
-                  setPageBackground={(color) => {
-                    setTheme((t) => ({ ...t, bgPage: color }));
-                  }}
-                  setBackgroundColor={(color) => {
-                    setTheme((t) => ({ ...t, bgLeaflet: color }));
-                  }}
-                  openPicker={openPicker}
-                  setOpenPicker={setOpenPicker}
-                  hasPageBackground={!!showPageBackground}
-                  setHasPageBackground={setShowPageBackground}
-                />
-              </div>
-
-              <SectionArrow
-                fill="white"
-                stroke="#CCCCCC"
-                className="ml-2 -mt-px"
-              />
-            </div>
-          </div>
-
+      <div className="themeSetterContent flex flex-col w-full overflow-y-scroll -mb-2 ">
+        <div className="themeBGLeaflet flex">
           <div
-            style={{
-              backgroundImage: pubBGImage ? `url(${pubBGImage})` : undefined,
-              backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
-              backgroundPosition: "center",
-              backgroundSize: !leafletBGRepeat
-                ? "cover"
-                : `calc(${leafletBGRepeat}px / 2 )`,
-            }}
-            className={` relative bg-bg-leaflet px-3 py-4 flex flex-col rounded-md  border border-border `}
+            className={`bgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}
           >
-            <div className={`flex flex-col  gap-3 z-10`}>
-              <PagePickers
+            <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md text-[#595959] bg-white">
+              <BackgroundPicker
+                bgImage={image}
+                setBgImage={setImage}
+                backgroundColor={localPubTheme.bgLeaflet}
                 pageBackground={localPubTheme.bgPage}
-                primary={localPubTheme.primary}
                 setPageBackground={(color) => {
                   setTheme((t) => ({ ...t, bgPage: color }));
                 }}
-                setPrimary={(color) => {
-                  setTheme((t) => ({ ...t, primary: color }));
+                setBackgroundColor={(color) => {
+                  setTheme((t) => ({ ...t, bgLeaflet: color }));
                 }}
                 openPicker={openPicker}
-                setOpenPicker={(pickers) => setOpenPicker(pickers)}
-                hasPageBackground={showPageBackground}
-              />
-              <PubAccentPickers
-                accent1={localPubTheme.accent1}
-                setAccent1={(color) => {
-                  setTheme((t) => ({ ...t, accent1: color }));
-                }}
-                accent2={localPubTheme.accent2}
-                setAccent2={(color) => {
-                  setTheme((t) => ({ ...t, accent2: color }));
-                }}
-                openPicker={openPicker}
-                setOpenPicker={(pickers) => setOpenPicker(pickers)}
+                setOpenPicker={setOpenPicker}
+                hasPageBackground={!!showPageBackground}
+                setHasPageBackground={setShowPageBackground}
               />
             </div>
+
+            <SectionArrow
+              fill="white"
+              stroke="#CCCCCC"
+              className="ml-2 -mt-[1px]"
+            />
           </div>
-          <div className="flex flex-col mt-4 ">
-            <div className="flex gap-2 items-center text-sm  text-[#8C8C8C]">
-              <div className="text-sm">Preview</div>
-              <Separator classname="h-4!" />{" "}
-              <button
-                className={`${sample === "pub" ? "font-bold  text-[#595959]" : ""}`}
-                onClick={() => setSample("pub")}
-              >
-                Pub
-              </button>
-              <button
-                className={`${sample === "post" ? "font-bold  text-[#595959]" : ""}`}
-                onClick={() => setSample("post")}
-              >
-                Post
-              </button>
-            </div>
-            {sample === "pub" ? (
-              <SamplePub
-                pubBGImage={pubBGImage}
-                pubBGRepeat={leafletBGRepeat}
-                showPageBackground={showPageBackground}
-              />
-            ) : (
-              <SamplePost
-                pubBGImage={pubBGImage}
-                pubBGRepeat={leafletBGRepeat}
-                showPageBackground={showPageBackground}
-              />
-            )}
+        </div>
+
+        <div
+          style={{
+            backgroundImage: pubBGImage ? `url(${pubBGImage})` : undefined,
+            backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
+            backgroundPosition: "center",
+            backgroundSize: !leafletBGRepeat
+              ? "cover"
+              : `calc(${leafletBGRepeat}px / 2 )`,
+          }}
+          className={` relative bg-bg-leaflet px-3 py-4 flex flex-col rounded-md  border border-border `}
+        >
+          <div className={`flex flex-col  gap-3 z-10`}>
+            <PagePickers
+              pageBackground={localPubTheme.bgPage}
+              primary={localPubTheme.primary}
+              setPageBackground={(color) => {
+                setTheme((t) => ({ ...t, bgPage: color }));
+              }}
+              setPrimary={(color) => {
+                setTheme((t) => ({ ...t, primary: color }));
+              }}
+              openPicker={openPicker}
+              setOpenPicker={(pickers) => setOpenPicker(pickers)}
+              hasPageBackground={showPageBackground}
+            />
+            <PubAccentPickers
+              accent1={localPubTheme.accent1}
+              setAccent1={(color) => {
+                setTheme((t) => ({ ...t, accent1: color }));
+              }}
+              accent2={localPubTheme.accent2}
+              setAccent2={(color) => {
+                setTheme((t) => ({ ...t, accent2: color }));
+              }}
+              openPicker={openPicker}
+              setOpenPicker={(pickers) => setOpenPicker(pickers)}
+            />
           </div>
+        </div>
+        <div className="flex flex-col mt-4 ">
+          <div className="flex gap-2 items-center text-sm  text-[#8C8C8C]">
+            <div className="text-sm">Preview</div>
+            <Separator classname="h-4!" />{" "}
+            <button
+              className={`${sample === "pub" ? "font-bold  text-[#595959]" : ""}`}
+              onClick={() => setSample("pub")}
+            >
+              Pub
+            </button>
+            <button
+              className={`${sample === "post" ? "font-bold  text-[#595959]" : ""}`}
+              onClick={() => setSample("post")}
+            >
+              Post
+            </button>
+          </div>
+          {sample === "pub" ? (
+            <SamplePub
+              pubBGImage={pubBGImage}
+              pubBGRepeat={leafletBGRepeat}
+              showPageBackground={showPageBackground}
+            />
+          ) : (
+            <SamplePost
+              pubBGImage={pubBGImage}
+              pubBGRepeat={leafletBGRepeat}
+              showPageBackground={showPageBackground}
+            />
+          )}
         </div>
       </div>
     </BaseThemeProvider>

components/ThemeManager/ThemeSetter.tsx

···
         align={isMobile ? "center" : "start"}
         trigger={<ActionButton icon={<PaintSmall />} label="Theme" />}
       >
-        <div className="themeSetterContent flex flex-col w-full overflow-y-scroll no-scrollbar">
-          <div className="themeBGLeaflet flex">
-            <div
-              className={`bgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}
-            >
-              <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md">
-                <LeafletBGPicker
-                  entityID={props.entityID}
-                  thisPicker={"leaflet"}
-                  openPicker={openPicker}
-                  setOpenPicker={setOpenPicker}
-                  closePicker={() => setOpenPicker("null")}
-                  setValue={set("theme/page-background")}
-                />
-                <PageBackgroundPicker
-                  entityID={props.entityID}
-                  setValue={set("theme/card-background")}
-                  openPicker={openPicker}
-                  setOpenPicker={setOpenPicker}
-                  home={props.home}
-                />
-                <hr className=" border-[#CCCCCC]" />
-                <PageBorderHider
-                  entityID={props.entityID}
-                  openPicker={openPicker}
-                  setOpenPicker={setOpenPicker}
-                />
-              </div>
+        <ThemeSetterContent {...props} />
+      </Popover>
+    </>
+  );
+};
+
+export const ThemeSetterContent = (props: {
+  entityID: string;
+  home?: boolean;
+}) => {
+  let { rep } = useReplicache();
+  let { data: pub } = useLeafletPublicationData();
+
+  // I need to get these variables from replicache and then write them to the DB. I also need to parse them into a state that can be used here.
+  let permission = useEntitySetContext().permissions.write;
+  let leafletBGImage = useEntity(props.entityID, "theme/background-image");
+  let leafletBGRepeat = useEntity(
+    props.entityID,
+    "theme/background-image-repeat",
+  );
 
-              <SectionArrow
-                fill="white"
-                stroke="#CCCCCC"
-                className="ml-2 -mt-px"
-              />
-            </div>
-          </div>
+  let [openPicker, setOpenPicker] = useState<pickers>(
+    props.home === true ? "leaflet" : "null",
+  );
+  let set = useMemo(() => {
+    return setColorAttribute(rep, props.entityID);
+  }, [rep, props.entityID]);
 
-          <div
-            onClick={(e) => {
-              e.currentTarget === e.target && setOpenPicker("leaflet");
-            }}
-            style={{
-              backgroundImage: leafletBGImage
-                ? `url(${leafletBGImage.data.src})`
-                : undefined,
-              backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
-              backgroundPosition: "center",
-              backgroundSize: !leafletBGRepeat
-                ? "cover"
-                : `calc(${leafletBGRepeat.data.value}px / 2 )`,
-            }}
-            className={`bg-bg-leaflet px-3 pt-4  pb-0 mb-2 flex flex-col gap-4 rounded-md  border border-border`}
-          >
-            <PageThemePickers
+  if (!permission) return null;
+  if (pub) return null;
+  return (
+    <div className="themeSetterContent flex flex-col w-full overflow-y-scroll no-scrollbar">
+      <div className="themeBGLeaflet flex">
+        <div className={`bgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}>
+          <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md">
+            <LeafletBGPicker
               entityID={props.entityID}
+              thisPicker={"leaflet"}
               openPicker={openPicker}
-              setOpenPicker={(pickers) => setOpenPicker(pickers)}
+              setOpenPicker={setOpenPicker}
+              closePicker={() => setOpenPicker("null")}
+              setValue={set("theme/page-background")}
             />
-            <div className="flex flex-col -gap-[6px]">
-              <div className={`flex flex-col z-10  -mb-[6px] `}>
-                <AccentPickers
-                  entityID={props.entityID}
-                  openPicker={openPicker}
-                  setOpenPicker={(pickers) => setOpenPicker(pickers)}
-                />
-                <SectionArrow
-                  fill={theme.colors["accent-2"]}
-                  stroke={theme.colors["accent-1"]}
-                  className="ml-2"
-                />
-              </div>
+            <PageBackgroundPicker
+              entityID={props.entityID}
+              setValue={set("theme/card-background")}
+              openPicker={openPicker}
+              setOpenPicker={setOpenPicker}
+              home={props.home}
+            />
+            <hr className=" border-[#CCCCCC]" />
+            <PageBorderHider
+              entityID={props.entityID}
+              openPicker={openPicker}
+              setOpenPicker={setOpenPicker}
+            />
+          </div>
 
-              <SampleButton
-                entityID={props.entityID}
-                setOpenPicker={setOpenPicker}
-              />
-            </div>
+          <SectionArrow fill="white" stroke="#CCCCCC" className="ml-2 -mt-px" />
+        </div>
+      </div>
 
-            <SamplePage
-              setOpenPicker={setOpenPicker}
-              home={props.home}
+      <div
+        onClick={(e) => {
+          e.currentTarget === e.target && setOpenPicker("leaflet");
+        }}
+        style={{
+          backgroundImage: leafletBGImage
+            ? `url(${leafletBGImage.data.src})`
+            : undefined,
+          backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
+          backgroundPosition: "center",
+          backgroundSize: !leafletBGRepeat
+            ? "cover"
+            : `calc(${leafletBGRepeat.data.value}px / 2 )`,
+        }}
+        className={`bg-bg-leaflet px-3 pt-4  pb-0 mb-2 flex flex-col gap-4 rounded-md  border border-border`}
+      >
+        <PageThemePickers
+          entityID={props.entityID}
+          openPicker={openPicker}
+          setOpenPicker={(pickers) => setOpenPicker(pickers)}
+        />
+        <div className="flex flex-col -gap-[6px]">
+          <div className={`flex flex-col z-10  -mb-[6px] `}>
+            <AccentPickers
               entityID={props.entityID}
+              openPicker={openPicker}
+              setOpenPicker={(pickers) => setOpenPicker(pickers)}
+            />
+            <SectionArrow
+              fill={theme.colors["accent-2"]}
+              stroke={theme.colors["accent-1"]}
+              className="ml-2"
             />
           </div>
-          {!props.home && <WatermarkSetter entityID={props.entityID} />}
+
+          <SampleButton
+            entityID={props.entityID}
+            setOpenPicker={setOpenPicker}
+          />
         </div>
-      </Popover>
-    </>
+
+        <SamplePage
+          setOpenPicker={setOpenPicker}
+          home={props.home}
+          entityID={props.entityID}
+        />
+      </div>
+      {!props.home && <WatermarkSetter entityID={props.entityID} />}
+    </div>
   );
 };
-
 function WatermarkSetter(props: { entityID: string }) {
   let { rep } = useReplicache();
   let checked = useEntity(props.entityID, "theme/page-leaflet-watermark");

components/Toast.tsx

···
     from: { top: -40 },
     enter: { top: 8 },
     leave: { top: -40 },
-    config: {
-      mass: 8,
-      friction: 150,
-      tension: 2000,
-    },
+    config: {},
   });
 
   return transitions((style, item) => {
     return item ? (
       <animated.div
         style={style}
-        className={`toastAnimationWrapper fixed bottom-0 right-0 left-0 z-50 h-fit`}
+        className={`toastAnimationWrapper fixed top-0 bottom-0 right-0 left-0 z-50 h-fit`}
       >
         <div
           className={`toast absolute right-2 w-max  shadow-md px-3 py-1 flex flex-row gap-2 rounded-full border text-center ${

src/notifications.ts

···
 export type Notification = Omit<TablesInsert<"notifications">, "data"> & {
   data: NotificationData;
 };
-// Notification data types (for writing to the notifications table)
+
 export type NotificationData =
-  | { type: "comment"; comment_uri: string }
+  | { type: "comment"; comment_uri: string; parent_uri?: string }
   | { type: "subscribe"; subscription_uri: string };
 
-// Hydrated notification types
-export type HydratedCommentNotification = {
-  id: string;
-  recipient: string;
-  created_at: string;
-  type: "comment";
-  comment_uri: string;
-  commentData?: Tables<"comments_on_documents">;
-};
-
-export type HydratedSubscribeNotification = {
-  id: string;
-  recipient: string;
-  created_at: string;
-  type: "subscribe";
-  subscription_uri: string;
-  subscriptionData?: Tables<"publication_subscriptions">;
-};
-
 export type HydratedNotification =
   | HydratedCommentNotification
   | HydratedSubscribeNotification;
+export async function hydrateNotifications(
+  notifications: NotificationRow[],
+): Promise<Array<HydratedNotification>> {
+  // Call all hydrators in parallel
+  const [commentNotifications, subscribeNotifications] = await Promise.all([
+    hydrateCommentNotifications(notifications),
+    hydrateSubscribeNotifications(notifications),
+  ]);
+
+  // Combine all hydrated notifications
+  const allHydrated = [...commentNotifications, ...subscribeNotifications];
+
+  // Sort by created_at to maintain order
+  allHydrated.sort(
+    (a, b) =>
+      new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+  );
+
+  return allHydrated;
+}
 
 // Type guard to extract notification type
 type ExtractNotificationType<T extends NotificationData["type"]> = Extract<
···
   { type: T }
 >;
 
-// Hydrator function type
-type NotificationHydrator<T extends NotificationData["type"]> = (
-  notifications: NotificationRow[],
-) => Promise<Array<HydratedNotification & { type: T }>>;
+export type HydratedCommentNotification = Awaited<
+  ReturnType<typeof hydrateCommentNotifications>
+>[0];
 
-/**
- * Hydrates comment notifications
- */
-async function hydrateCommentNotifications(
-  notifications: NotificationRow[],
-): Promise<HydratedCommentNotification[]> {
+async function hydrateCommentNotifications(notifications: NotificationRow[]) {
   const commentNotifications = notifications.filter(
     (n): n is NotificationRow & { data: ExtractNotificationType<"comment"> } =>
       (n.data as NotificationData)?.type === "comment",
···
   }
 
   // Fetch comment data from the database
-  const commentUris = commentNotifications.map((n) => n.data.comment_uri);
+  const commentUris = commentNotifications.flatMap((n) =>
+    n.data.parent_uri
+      ? [n.data.comment_uri, n.data.parent_uri]
+      : [n.data.comment_uri],
+  );
   const { data: comments } = await supabaseServerClient
     .from("comments_on_documents")
-    .select("*")
+    .select(
+      "*,bsky_profiles(*), documents(*, documents_in_publications(publications(*)))",
+    )
     .in("uri", commentUris);
 
   return commentNotifications.map((notification) => ({
···
     created_at: notification.created_at,
     type: "comment" as const,
     comment_uri: notification.data.comment_uri,
-    commentData: comments?.find((c) => c.uri === notification.data.comment_uri),
+    parentData: notification.data.parent_uri
+      ? comments?.find((c) => c.uri === notification.data.parent_uri)!
+      : undefined,
+    commentData: comments?.find(
+      (c) => c.uri === notification.data.comment_uri,
+    )!,
   }));
 }
 
-/**
- * Hydrates subscribe notifications
- */
+export type HydratedSubscribeNotification = {
+  id: string;
+  recipient: string;
+  created_at: string;
+  type: "subscribe";
+  subscription_uri: string;
+  subscriptionData?: Tables<"publication_subscriptions">;
+};
 async function hydrateSubscribeNotifications(
   notifications: NotificationRow[],
 ): Promise<HydratedSubscribeNotification[]> {
···
   }));
 }
 
-/**
- * Main hydration function that processes all notifications
- */
-export async function hydrateNotifications(
-  notifications: NotificationRow[],
-): Promise<HydratedNotification[]> {
-  // Call all hydrators in parallel
-  const [commentNotifications, subscribeNotifications] = await Promise.all([
-    hydrateCommentNotifications(notifications),
-    hydrateSubscribeNotifications(notifications),
-  ]);
-
-  // Combine all hydrated notifications
-  const allHydrated = [...commentNotifications, ...subscribeNotifications];
-
-  // Sort by created_at to maintain order
-  allHydrated.sort(
-    (a, b) =>
-      new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
-  );
-
-  return allHydrated;
+export async function pingIdentityToUpdateNotification(did: string) {
+  let channel = supabaseServerClient.channel(`identity.atp_did:${did}`);
+  await channel.send({
+    type: "broadcast",
+    event: "notification",
+    payload: { message: "poke" },
+  });
+  await supabaseServerClient.removeChannel(channel);
 }