From ae1109f00bd9843753ad4daa5e4f441c1d7cff4e Mon Sep 17 00:00:00 2001 From: celine Date: Wed, 12 Nov 2025 15:01:16 -0500 Subject: [PATCH] set notification action button to direct to notification page rather than popover a panel --- .../home/Actions/AccountSettings.tsx | 2 +- .../notifications/Notification.tsx | 16 +-- .../notifications/NotificationList.tsx | 23 ++- .../[did]/[publication]/dashboard/Actions.tsx | 134 +----------------- .../dashboard/PublicationSettings.tsx | 132 +++++++++++++++++ app/lish/createPub/UpdatePubForm.tsx | 2 +- components/ActionBar/Navigation.tsx | 82 ++--------- components/ThemeManager/PubThemeSetter.tsx | 4 +- 8 files changed, 163 insertions(+), 232 deletions(-) create mode 100644 app/lish/[did]/[publication]/dashboard/PublicationSettings.tsx diff --git a/app/(home-pages)/home/Actions/AccountSettings.tsx b/app/(home-pages)/home/Actions/AccountSettings.tsx index 3e5044fe..67df4f37 100644 --- a/app/(home-pages)/home/Actions/AccountSettings.tsx +++ b/app/(home-pages)/home/Actions/AccountSettings.tsx @@ -111,7 +111,7 @@ export const AccountSettingsHeader = (props: { backToMenuAction?: () => void; }) => { return ( -
+
{props.state === "menu" ? "Settings" : props.state === "general" diff --git a/app/(home-pages)/notifications/Notification.tsx b/app/(home-pages)/notifications/Notification.tsx index 933ee231..2d5c2710 100644 --- a/app/(home-pages)/notifications/Notification.tsx +++ b/app/(home-pages)/notifications/Notification.tsx @@ -4,8 +4,6 @@ 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"; -import { useContext } from "react"; -import { NotificationContext } from "./NotificationList"; export const Notification = (props: { icon: React.ReactNode; @@ -15,18 +13,14 @@ export const Notification = (props: { 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 (
{props.icon}
-
+
{props.actionText}
-
+
{timeAgo(props.timestamp)}
diff --git a/app/(home-pages)/notifications/NotificationList.tsx b/app/(home-pages)/notifications/NotificationList.tsx index e7a1bed4..36f898a4 100644 --- a/app/(home-pages)/notifications/NotificationList.tsx +++ b/app/(home-pages)/notifications/NotificationList.tsx @@ -2,13 +2,10 @@ 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, compact, @@ -29,17 +26,15 @@ export function NotificationList({
); return ( - -
-
- {notifications.map((n) => { - if (n.type === "comment") { - if (n.parentData) return ; - return ; - } - })} -
+
+
+ {notifications.map((n) => { + if (n.type === "comment") { + if (n.parentData) return ; + return ; + } + })}
- +
); } diff --git a/app/lish/[did]/[publication]/dashboard/Actions.tsx b/app/lish/[did]/[publication]/dashboard/Actions.tsx index d61e058e..fbd807a0 100644 --- a/app/lish/[did]/[publication]/dashboard/Actions.tsx +++ b/app/lish/[did]/[publication]/dashboard/Actions.tsx @@ -1,30 +1,16 @@ "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 ( @@ -91,121 +77,3 @@ function PublicationShareButton() { ); } - -function PublicationSettingsButton(props: { publication: string }) { - let isMobile = useIsMobile(); - let [state, setState] = useState<"menu" | "general" | "theme">("menu"); - let [loading, setLoading] = useState(false); - - return ( - 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={ - - label="Settings" - /> - } - > - {state === "general" ? ( - setState("menu")} - loading={loading} - setLoadingAction={setLoading} - /> - ) : state === "theme" ? ( - setState("menu")} - loading={loading} - setLoading={setLoading} - /> - ) : ( - - )} - - ); -} - -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 ( -
- - - -
- ); -}; - -export const PubSettingsHeader = (props: { - state: "menu" | "general" | "theme"; - backToMenuAction?: () => void; - loading: boolean; - setLoadingAction: (l: boolean) => void; -}) => { - return ( -
- {props.state === "menu" - ? "Settings" - : props.state === "general" - ? "General" - : props.state === "theme" - ? "Publication Theme" - : ""} - {props.state !== "menu" && ( -
- - - - {props.loading ? : "Update"} - -
- )} -
- ); -}; diff --git a/app/lish/[did]/[publication]/dashboard/PublicationSettings.tsx b/app/lish/[did]/[publication]/dashboard/PublicationSettings.tsx new file mode 100644 index 00000000..c9acf387 --- /dev/null +++ b/app/lish/[did]/[publication]/dashboard/PublicationSettings.tsx @@ -0,0 +1,132 @@ +"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 ( + 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={ + + label="Settings" + /> + } + > + {state === "general" ? ( + setState("menu")} + loading={loading} + setLoadingAction={setLoading} + /> + ) : state === "theme" ? ( + setState("menu")} + loading={loading} + setLoading={setLoading} + /> + ) : ( + + )} + + ); +} + +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 ( +
+ + + +
+ ); +}; + +export const PubSettingsHeader = (props: { + state: "menu" | "general" | "theme"; + backToMenuAction?: () => void; + loading: boolean; + setLoadingAction: (l: boolean) => void; +}) => { + return ( +
+ {props.state === "menu" + ? "Settings" + : props.state === "general" + ? "General" + : props.state === "theme" + ? "Publication Theme" + : ""} + {props.state !== "menu" && ( +
+ + + + {props.loading ? : "Update"} + +
+ )} +
+ ); +}; diff --git a/app/lish/createPub/UpdatePubForm.tsx b/app/lish/createPub/UpdatePubForm.tsx index 48bc5fbb..85354893 100644 --- a/app/lish/createPub/UpdatePubForm.tsx +++ b/app/lish/createPub/UpdatePubForm.tsx @@ -20,7 +20,7 @@ import { Verification } from "@vercel/sdk/esm/models/getprojectdomainop"; 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; diff --git a/components/ActionBar/Navigation.tsx b/components/ActionBar/Navigation.tsx index cf7da487..35b0d498 100644 --- a/components/ActionBar/Navigation.tsx +++ b/components/ActionBar/Navigation.tsx @@ -16,17 +16,7 @@ import { 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"; @@ -162,66 +152,24 @@ const DiscoverButton = (props: { current?: boolean }) => { }; 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 ( - { - if (open) { - await markAsRead(); - mutate(); + + + ) : ( + + ) } - }} - asChild - side={isMobile ? "top" : "right"} - align={isMobile ? "center" : "start"} - className="sm:max-w-sm sm:w-max w-full pt-3! pb-3!" - trigger={ - - ) : ( - - ) - } - label="Notifications" - className={`${props.current ? "bg-bg-page! border-border-light!" : ""} ${unreads ? "text-accent-contrast!" : ""}`} - /> - } - > - {isLoading ? ( -
- loading - -
- ) : ( - <> - - {notifications && notifications.length > 0 && ( - - See All - - )} - - )} - + label="Notifications" + className={`${props.current ? "bg-bg-page! border-border-light!" : ""} ${unreads ? "text-accent-contrast!" : ""}`} + /> + ); } diff --git a/components/ThemeManager/PubThemeSetter.tsx b/components/ThemeManager/PubThemeSetter.tsx index 0c600f85..26dfbe9d 100644 --- a/components/ThemeManager/PubThemeSetter.tsx +++ b/components/ThemeManager/PubThemeSetter.tsx @@ -10,14 +10,12 @@ import { AtUri } from "@atproto/syntax"; 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; -- 2.54.0