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

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

···
   backToMenuAction?: () => void;
 }) => {
   return (
-    <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-1 mb-1">
+    <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"

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

···
 import { PubLeafletPublication, PubLeafletRichtextFacet } from "lexicons/api";
 import { timeAgo } from "src/utils/timeAgo";
 import { useReplicache, useEntity } from "src/replicache";
-import { useContext } from "react";
-import { NotificationContext } from "./NotificationList";
 
 export const Notification = (props: {
   icon: React.ReactNode;
···
   href: string;
 }) => {
   let { rootEntity } = useReplicache();
-  let { compact } = useContext(NotificationContext);
   let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
     .value;
 
   // If compact mode, always hide border
-  if (compact) {
-    cardBorderHidden = true;
-  }
 
   return (
     <div
-      className={`relative flex flex-col w-full py-3 sm:py-4 pt-2 sm:pt-3! ${
+      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 "
···
       <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 ${compact ? "text-sm" : ""}`}
-          >
+          <div className={`text-secondary font-bold grow truncate min-w-0 }`}>
             {props.actionText}
           </div>
         </div>
-        <div
-          className={`text-tertiary shrink-0 min-w-8 ${compact ? "text-xs" : "text-sm"}`}
-        >
+        <div className={`text-tertiary shrink-0 min-w-8 text-sm`}>
           {timeAgo(props.timestamp)}
         </div>
       </div>

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

···
 
 import { HydratedNotification } from "src/notifications";
 import { CommentNotification } from "./CommentNotication";
-import { useEntity, useReplicache } from "src/replicache";
 import { useEffect, createContext } from "react";
 import { markAsRead } from "./getNotifications";
 import { ReplyNotification } from "./ReplyNotification";
-
-export const NotificationContext = createContext({ compact: false });
 
 export function NotificationList({
   notifications,
···
       </div>
     );
   return (
-    <NotificationContext.Provider value={{ compact: compact ?? false }}>
-      <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 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>
-    </NotificationContext.Provider>
+    </div>
   );
 }

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";
-import { FormEvent, 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 { GoToArrow } from "components/Icons/GoToArrow";
-import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
 
 export const Actions = (props: { publication: string }) => {
   return (
···
     </Menu>
   );
 }
-
-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/[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/Actions";
+import { PubSettingsHeader } from "../[did]/[publication]/dashboard/PublicationSettings";
 
 export const EditPubForm = (props: {
   backToMenuAction: () => void;

components/ActionBar/Navigation.tsx

···
   NotificationsUnreadSmall,
 } from "components/Icons/NotificationSmall";
 import { SpeedyLink } from "components/SpeedyLink";
-
-import { CommentNotification } from "app/(home-pages)/notifications/CommentNotication";
 import { Separator } from "components/Layout";
-import { useIsMobile } from "src/hooks/isMobile";
-import useSWR from "swr";
-import {
-  getNotifications,
-  markAsRead,
-} from "app/(home-pages)/notifications/getNotifications";
-import { DotLoader } from "components/utils/DotLoader";
-import { NotificationList } from "app/(home-pages)/notifications/NotificationList";
 
 export type navPages = "home" | "reader" | "pub" | "discover" | "notifications";
 
···
 };
 
 export function NotificationButton(props: { current?: boolean }) {
-  let { identity, mutate } = useIdentityData();
+  let { identity } = useIdentityData();
   let unreads = identity?.notifications[0]?.count;
-  let isMobile = useIsMobile();
-  let { data: notifications, isLoading } = useSWR("notifications", () =>
-    getNotifications(3),
-  );
-  // let identity = await getIdentityData();
-  // if (!identity?.atp_did) return;
-  // let { data } = await supabaseServerClient
-  //   .from("notifications")
-  //   .select("*")
-  //   .eq("recipient", identity.atp_did);
-  // let notifications = await hydrateNotifications(data || []);
 
   return (
-    <Popover
-      onOpenChange={async (open) => {
-        if (open) {
-          await markAsRead();
-          mutate();
+    <SpeedyLink href={"/notifications"} className="hover:no-underline!">
+      <ActionButton
+        nav
+        labelOnMobile={false}
+        icon={
+          unreads ? (
+            <NotificationsUnreadSmall className="text-accent-contrast" />
+          ) : (
+            <NotificationsReadSmall />
+          )
         }
-      }}
-      asChild
-      side={isMobile ? "top" : "right"}
-      align={isMobile ? "center" : "start"}
-      className="sm:max-w-sm sm:w-max w-full pt-3! pb-3!"
-      trigger={
-        <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!" : ""}`}
-        />
-      }
-    >
-      {isLoading ? (
-        <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm p-3 sm:p-4">
-          <span>loading</span>
-          <DotLoader />
-        </div>
-      ) : (
-        <>
-          <NotificationList compact notifications={notifications!} />
-          {notifications && notifications.length > 0 && (
-            <SpeedyLink
-              className="flex justify-end pt-2 text-sm"
-              href={"/notifications"}
-            >
-              See All
-            </SpeedyLink>
-          )}
-        </>
-      )}
-    </Popover>
+        label="Notifications"
+        className={`${props.current ? "bg-bg-page! border-border-light!" : ""} ${unreads ? "text-accent-contrast!" : ""}`}
+      />
+    </SpeedyLink>
   );
 }

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/Actions";
+import { PubSettingsHeader } from "app/lish/[did]/[publication]/dashboard/PublicationSettings";
 
 export type ImageState = {
   src: string;