diff --git a/app/(home-pages)/discover/page.tsx b/app/(home-pages)/discover/page.tsx index 4e01207c..facf7c12 100644 --- a/app/(home-pages)/discover/page.tsx +++ b/app/(home-pages)/discover/page.tsx @@ -17,7 +17,6 @@ export default async function Discover(props: { return ( { - const orderValue = - props.order === "popular" ? "popular" : "recentlyUpdated"; + const orderValue = props.order === "popular" ? "popular" : "recentlyUpdated"; let { publications, nextCursor } = await getPublications(orderValue); return ( diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx index f5406650..7ba4b9b6 100644 --- a/app/(home-pages)/home/HomeLayout.tsx +++ b/app/(home-pages)/home/HomeLayout.tsx @@ -20,7 +20,6 @@ import { useDashboardState, } from "components/PageLayouts/DashboardLayout"; import { Actions } from "./Actions/Actions"; -import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data"; import { useState } from "react"; import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; @@ -56,7 +55,6 @@ export const HomeLayout = (props: { props.entityID, "theme/background-image", ); - let cardBorderHidden = !!useCardBorderHidden(props.entityID); let [searchValue, setSearchValue] = useState(""); let [debouncedSearchValue, setDebouncedSearchValue] = useState(""); @@ -81,7 +79,6 @@ export const HomeLayout = (props: { return ( } @@ -101,7 +98,6 @@ export const HomeLayout = (props: { ), @@ -117,7 +113,6 @@ export function HomeLeafletList(props: { [root_entity: string]: Fact[]; }; searchValue: string; - cardBorderHidden: boolean; }) { let { identity } = useIdentityData(); let { data: initialFacts } = useSWR( @@ -171,7 +166,6 @@ export function HomeLeafletList(props: { searchValue={props.searchValue} leaflets={leaflets} titles={initialFacts?.titles || {}} - cardBorderHidden={props.cardBorderHidden} initialFacts={initialFacts?.facts || {}} showPreview /> @@ -192,7 +186,6 @@ export function LeafletList(props: { [root_entity: string]: Fact[]; }; searchValue: string; - cardBorderHidden: boolean; showPreview?: boolean; }) { let { identity } = useIdentityData(); @@ -238,7 +231,6 @@ export function LeafletList(props: { loggedIn={!!identity} display={display} added_at={added_at} - cardBorderHidden={props.cardBorderHidden} index={index} showPreview={props.showPreview} isHidden={ diff --git a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx index aaaa146c..d647206e 100644 --- a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx +++ b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx @@ -4,18 +4,19 @@ import { LeafletInfo } from "./LeafletInfo"; import { useState, useRef, useEffect } from "react"; import { SpeedyLink } from "components/SpeedyLink"; import { useLeafletPublicationStatus } from "components/PageSWRDataProvider"; +import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; export const LeafletListItem = (props: { archived?: boolean | null; loggedIn: boolean; display: "list" | "grid"; - cardBorderHidden: boolean; added_at: string; title?: string; index: number; isHidden: boolean; showPreview?: boolean; }) => { + const cardBorderHidden = useCardBorderHidden(); const pubStatus = useLeafletPublicationStatus(); let [isOnScreen, setIsOnScreen] = useState(props.index < 16 ? true : false); let previewRef = useRef(null); @@ -47,9 +48,9 @@ export const LeafletListItem = (props: { ref={previewRef} className={`relative flex gap-3 w-full ${props.isHidden ? "hidden" : "flex"} - ${props.cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`} + ${cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`} style={{ - backgroundColor: props.cardBorderHidden + backgroundColor: cardBorderHidden ? "transparent" : "rgba(var(--bg-page), var(--bg-page-alpha))", }} @@ -67,7 +68,7 @@ export const LeafletListItem = (props: { loggedIn={props.loggedIn} /> - {props.cardBorderHidden && ( + {cardBorderHidden && (
{ - const { root, page, cardBorderHidden, contentWrapperStyle, contentWrapperClass } = - useLeafletPreviewData(); + const { + root, + page, + cardBorderHidden, + contentWrapperStyle, + contentWrapperClass, + } = useLeafletPreviewData(); return ( } @@ -45,7 +42,6 @@ export const LooseleafsLayout = (props: { ), @@ -61,7 +57,6 @@ export const LooseleafList = (props: { [root_entity: string]: Fact[]; }; searchValue: string; - cardBorderHidden: boolean; }) => { let { identity } = useIdentityData(); let { data: initialFacts } = useSWR( @@ -108,7 +103,6 @@ export const LooseleafList = (props: { searchValue={props.searchValue} leaflets={leaflets} titles={initialFacts?.titles || {}} - cardBorderHidden={props.cardBorderHidden} initialFacts={initialFacts?.facts || {}} showPreview /> diff --git a/app/(home-pages)/notifications/page.tsx b/app/(home-pages)/notifications/page.tsx index 9be3f1d3..a6f64a79 100644 --- a/app/(home-pages)/notifications/page.tsx +++ b/app/(home-pages)/notifications/page.tsx @@ -10,7 +10,6 @@ export default async function Notifications() { return ( - + diff --git a/app/lish/[did]/[publication]/dashboard/DraftList.tsx b/app/lish/[did]/[publication]/dashboard/DraftList.tsx index c7f9a11d..998efcbd 100644 --- a/app/lish/[did]/[publication]/dashboard/DraftList.tsx +++ b/app/lish/[did]/[publication]/dashboard/DraftList.tsx @@ -23,7 +23,6 @@ export function DraftList(props: { searchValue={props.searchValue} showPreview={false} defaultDisplay="list" - cardBorderHidden={!props.showPageBackground} leaflets={leaflets_in_publications .filter((l) => !l.documents) .filter((l) => !l.archived) diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx index a5524c70..28aecd87 100644 --- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx +++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx @@ -39,7 +39,6 @@ export default function PublicationDashboard({ return ( { + const cardBorderHidden = useCardBorderHidden(); const segment = useSelectedLayoutSegment(); const currentTab = (segment || "posts") as ProfileTabType; + const [scrollPos, setScrollPos] = useState(0); + + useEffect(() => { + const profileContent = document.querySelector( + ".overflow-y-scroll", + ) as HTMLElement; + + const handleScroll = () => { + if (profileContent) { + setScrollPos(profileContent.scrollTop); + } + }; + + if (profileContent) { + profileContent.addEventListener("scroll", handleScroll); + return () => profileContent.removeEventListener("scroll", handleScroll); + } + }, []); const baseUrl = `/p/${props.didOrHandle}`; + const bgColor = cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)"; return ( -
-
-
- - +
+
+
20 ? "border-border-light" : "border-transparent"} + py-1 + w-full `} + style={ + scrollPos < 20 + ? { + backgroundColor: cardBorderHidden + ? `rgba(${bgColor}, ${scrollPos / 60 + 0.75})` + : `rgba(${bgColor}, ${scrollPos / 20})`, + paddingLeft: cardBorderHidden + ? "4px" + : `calc(${scrollPos / 20} * 4px)`, + paddingRight: cardBorderHidden + ? "4px" + : `calc(${scrollPos / 20} * 4px)`, + } + : { + backgroundColor: `rgb(${bgColor})`, + paddingLeft: "4px", + paddingRight: "4px", + } + } + > +
+
+ + +
+ +
-
-
); }; diff --git a/app/p/[didOrHandle]/(profile)/layout.tsx b/app/p/[didOrHandle]/(profile)/layout.tsx index 0d7adfd1..a966b7f8 100644 --- a/app/p/[didOrHandle]/(profile)/layout.tsx +++ b/app/p/[didOrHandle]/(profile)/layout.tsx @@ -52,11 +52,12 @@ export default async function ProfileLayout(props: { max-w-prose mx-auto w-full h-full flex flex-col border border-border-light rounded-lg - text-center mt-8`} + text-center mt-8 + overflow-y-scroll`} > -
+
{props.children}
diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx index afeabfb1..446b24b2 100644 --- a/components/PageHeader.tsx +++ b/components/PageHeader.tsx @@ -1,10 +1,9 @@ "use client"; import { useState, useEffect } from "react"; +import { useCardBorderHidden } from "./Pages/useCardBorderHidden"; -export const Header = (props: { - children: React.ReactNode; - cardBorderHidden: boolean; -}) => { +export const Header = (props: { children: React.ReactNode }) => { + let cardBorderHidden = useCardBorderHidden(); let [scrollPos, setScrollPos] = useState(0); useEffect(() => { @@ -22,7 +21,7 @@ export const Header = (props: { } }, []); - let headerBGColor = props.cardBorderHidden + let headerBGColor = !cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)"; @@ -54,13 +53,13 @@ export const Header = (props: { style={ scrollPos < 20 ? { - backgroundColor: props.cardBorderHidden + backgroundColor: !cardBorderHidden ? `rgba(${headerBGColor}, ${scrollPos / 60 + 0.75})` : `rgba(${headerBGColor}, ${scrollPos / 20})`, - paddingLeft: props.cardBorderHidden + paddingLeft: !cardBorderHidden ? "4px" : `calc(${scrollPos / 20}*4px)`, - paddingRight: props.cardBorderHidden + paddingRight: !cardBorderHidden ? "8px" : `calc(${scrollPos / 20}*8px)`, } diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx index 6ee51144..84d903ab 100644 --- a/components/PageLayouts/DashboardLayout.tsx +++ b/components/PageLayouts/DashboardLayout.tsx @@ -134,7 +134,6 @@ export function DashboardLayout< }, >(props: { id: string; - cardBorderHidden: boolean; tabs: T; defaultTab: keyof T; currentPage: navPages; @@ -187,7 +186,7 @@ export function DashboardLayout< > {Object.keys(props.tabs).length <= 1 && !controls ? null : ( <> -
+
{headerState === "default" ? ( <> {Object.keys(props.tabs).length > 1 && ( diff --git a/components/Pages/Page.tsx b/components/Pages/Page.tsx index a6b28246..78ffdbcf 100644 --- a/components/Pages/Page.tsx +++ b/components/Pages/Page.tsx @@ -34,7 +34,6 @@ export function Page(props: { return focusedPageID === props.entityID; }); let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc"; - let cardBorderHidden = useCardBorderHidden(props.entityID); let drawerOpen = useDrawerOpen(props.entityID); return ( @@ -49,7 +48,6 @@ export function Page(props: { }} id={elementId.page(props.entityID).container} drawerOpen={!!drawerOpen} - cardBorderHidden={!!cardBorderHidden} isFocused={isFocused} fullPageScroll={props.fullPageScroll} pageType={pageType} @@ -77,13 +75,13 @@ export const PageWrapper = (props: { id: string; children: React.ReactNode; pageOptions?: React.ReactNode; - cardBorderHidden: boolean; fullPageScroll: boolean; isFocused?: boolean; onClickAction?: (e: React.MouseEvent) => void; pageType: "canvas" | "doc"; drawerOpen: boolean | undefined; }) => { + const cardBorderHidden = useCardBorderHidden(); let { ref } = usePreserveScroll(props.id); return ( // this div wraps the contents AND the page options. @@ -106,13 +104,13 @@ export const PageWrapper = (props: { shrink-0 snap-center overflow-y-scroll ${ - !props.cardBorderHidden && + !cardBorderHidden && `h-full border bg-[rgba(var(--bg-page),var(--bg-page-alpha))] ${props.drawerOpen ? "rounded-l-lg " : "rounded-lg"} ${props.isFocused ? "shadow-md border-border" : "border-border-light"}` } - ${props.cardBorderHidden && "sm:h-[calc(100%+48px)] h-[calc(100%+20px)] sm:-my-6 -my-3 sm:pt-6 pt-3"} + ${cardBorderHidden && "sm:h-[calc(100%+48px)] h-[calc(100%+20px)] sm:-my-6 -my-3 sm:pt-6 pt-3"} ${props.fullPageScroll && "max-w-full "} ${props.pageType === "doc" && !props.fullPageScroll && "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]"} ${ diff --git a/components/Pages/PageOptions.tsx b/components/Pages/PageOptions.tsx index 2903ce9d..cb91d346 100644 --- a/components/Pages/PageOptions.tsx +++ b/components/Pages/PageOptions.tsx @@ -21,17 +21,16 @@ import { useLeafletPublicationData } from "components/PageSWRDataProvider"; export const PageOptionButton = ({ children, secondary, - cardBorderHidden, className, disabled, ...props }: { children: React.ReactNode; secondary?: boolean; - cardBorderHidden: boolean | undefined; className?: string; disabled?: boolean; } & Omit) => { + const cardBorderHidden = useCardBorderHidden(); return (