diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx index 6951ebd9..bfda6a4f 100644 --- a/app/(home-pages)/home/HomeLayout.tsx +++ b/app/(home-pages)/home/HomeLayout.tsx @@ -19,6 +19,7 @@ import { DashboardState, useDashboardState, } from "components/PageLayouts/DashboardLayout"; +import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout"; import { Actions } from "./Actions/Actions"; import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data"; import { useState } from "react"; @@ -80,26 +81,32 @@ export const HomeLayout = (props: { actions={} tabs={{ home: { - controls: ( - - ), content: ( - + } + controls={ + + } + showHeader={true} + > + + ), }, }} - pageTitle={"Home"} /> ); }; diff --git a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx index 05907c33..979b0fba 100644 --- a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx +++ b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx @@ -70,10 +70,7 @@ export const LeafletListItem = (props: { {cardBorderHidden && (
)} diff --git a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx index c389d6e4..f8e0f4b7 100644 --- a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx +++ b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx @@ -1,5 +1,6 @@ "use client"; import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; +import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout"; import { useState } from "react"; import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; import { Fact, PermissionToken } from "src/replicache"; @@ -37,17 +38,22 @@ export const LooseleafsLayout = (props: { actions={} tabs={{ home: { - controls: null, content: ( - + } + showHeader={false} + > + + ), }, }} - pageTitle="Looseleafs" /> ); }; diff --git a/app/(home-pages)/notifications/page.tsx b/app/(home-pages)/notifications/page.tsx index a6f64a79..3fa36f92 100644 --- a/app/(home-pages)/notifications/page.tsx +++ b/app/(home-pages)/notifications/page.tsx @@ -1,5 +1,6 @@ import { getIdentityData } from "actions/getIdentityData"; import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; +import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout"; import { redirect } from "next/navigation"; import { hydrateNotifications } from "src/notifications"; import { supabaseServerClient } from "supabase/serverClient"; @@ -15,8 +16,14 @@ export default async function Notifications() { actions={null} tabs={{ default: { - controls: null, - content: , + content: ( + + + + ), }, }} /> diff --git a/app/(home-pages)/p/[didOrHandle]/layout.tsx b/app/(home-pages)/p/[didOrHandle]/layout.tsx index 7619ade1..45d2c2b9 100644 --- a/app/(home-pages)/p/[didOrHandle]/layout.tsx +++ b/app/(home-pages)/p/[didOrHandle]/layout.tsx @@ -5,6 +5,7 @@ import { Json } from "supabase/database.types"; import { ProfileHeader } from "./ProfileHeader"; import { ProfileTabs } from "./ProfileTabs"; import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; +import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout"; import { ProfileLayout } from "./ProfileLayout"; import { Agent } from "@atproto/api"; import { get_profile_data } from "app/api/rpc/[command]/get_profile_data"; @@ -86,16 +87,20 @@ export default async function ProfilePageLayout(props: { actions={null} tabs={{ default: { - controls: null, content: ( - - - - <>{props.children} - + + + + + <>{props.children} + + ), }, }} diff --git a/app/(home-pages)/tag/[tag]/page.tsx b/app/(home-pages)/tag/[tag]/page.tsx index 84c6a9e8..345f3337 100644 --- a/app/(home-pages)/tag/[tag]/page.tsx +++ b/app/(home-pages)/tag/[tag]/page.tsx @@ -1,4 +1,5 @@ import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; +import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout"; import { PostListing } from "components/PostListing"; import { getDocumentsByTag } from "./getDocumentsByTag"; import { Metadata } from "next"; @@ -26,8 +27,14 @@ export default async function TagPage(props: { actions={null} tabs={{ default: { - controls: null, - content: , + content: ( + + + + ), }, }} /> diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx index 61510f54..385cc096 100644 --- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx +++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx @@ -10,6 +10,7 @@ import { DashboardLayout, PublicationDashboardControls, } from "components/PageLayouts/DashboardLayout"; +import { DashboardPageLayout } from "components/PageLayouts/DashboardPageLayout"; import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; import { type NormalizedPublication } from "src/utils/normalizeRecords"; import { PublicationAnalytics } from "./PublicationAnalytics"; @@ -39,70 +40,103 @@ export default function PublicationDashboard({ [searchValue], ); + const pubUri = publication.uri; + const showPageBackground = !!record.theme?.showPageBackground; + return ( - ), - controls: ( - + } + controls={ + + } + publication={pubUri} + showHeader={true} + > + + ), }, Posts: { content: ( - + } + publication={pubUri} + showHeader={false} + > + + ), - controls: null, }, Subs: { content: ( - + } + publication={pubUri} + showHeader={false} + > + + ), - controls: null, }, ...(canSeePro ? { Analytics: { content: ( - + } + publication={pubUri} + showHeader={false} + > + + ), - controls: null, }, } : {}), Settings: { icon: , content: ( - + } + publication={pubUri} + showHeader={false} + > + + ), - controls: null, }, }} - actions={} + actions={} currentPage="pub" - publication={publication.uri} - pageTitle={record.name} + publication={pubUri} + pubName={record.name} /> ); } diff --git a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx index e2558466..cbc9e4f9 100644 --- a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx +++ b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx @@ -43,7 +43,7 @@ export function PublishedPostsList(props: { }); return ( -
+
{sortedDocuments.map((doc) => (
{icon}
{label}
diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx index dc5813c2..d2d63068 100644 --- a/components/ActionBar/DesktopNavigation.tsx +++ b/components/ActionBar/DesktopNavigation.tsx @@ -58,10 +58,10 @@ export const DesktopNavigation = (props: { {props.currentPage === "home" && ( <>
- +
+ PUBLICATIONS +
+ )} @@ -79,7 +79,10 @@ export const DesktopNavigation = (props: { )} {identity ? ( - + <> +
+ + ) : ( void; + onTabHover?: (tab: string) => void; }) => { let { identity } = useIdentityData(); - let compactOnMobile = + let isWriterPage = props.currentPage === "home" || props.currentPage === "looseleafs" || props.currentPage === "pub"; + let tabClassName = + "font-bold text-secondary flex gap-2 items-center grow min-w-0 text-sm h-[34px] px-2 accent-container min-w-0"; + return (
-
- + ) : props.currentPage === "pub" && + props.tabs && + Object.keys(props.tabs).length > 1 ? ( + + + +
{props.pubName}
+
} - /> - + > + {Object.keys(props.tabs).map((t) => ( + } + label={t} + className={ + t === props.currentTab ? "bg-bg-page! border-border-light!" : "" + } + onClick={() => props.onTabClick?.(t)} + onMouseEnter={() => props.onTabHover?.(t)} + onPointerDown={() => props.onTabHover?.(t)} + /> + ))} + + ) : ( +
+ )} - {compactOnMobile && ( +
+ + {isWriterPage && ( + + )} + {identity?.atp_did && ( + + )} + {identity ? ( <> - + + + ) : ( + } + label="Log In/Sign Up" + /> + } + /> )}
- {identity ? ( -
- {identity.atp_did && } - -
- ) : ( - } - label="Log In/Sign Up" - /> - } - /> - )}
); }; diff --git a/components/ActionBar/NavigationButtons.tsx b/components/ActionBar/NavigationButtons.tsx index cd48be69..987b8d6d 100644 --- a/components/ActionBar/NavigationButtons.tsx +++ b/components/ActionBar/NavigationButtons.tsx @@ -41,11 +41,7 @@ export const WriterButton = (props: { }) => { return ( - } - label="Write" - /> + } label="Write" /> ); }; @@ -56,11 +52,7 @@ export const ReaderButton = (props: { }) => { return ( - } - label="Read" - /> + } label="Read" /> ); }; diff --git a/components/ActionBar/ProfileButton.tsx b/components/ActionBar/ProfileButton.tsx index 8386768e..b0a9caa5 100644 --- a/components/ActionBar/ProfileButton.tsx +++ b/components/ActionBar/ProfileButton.tsx @@ -48,7 +48,7 @@ export const ProfileButton = () => { ? record.displayName || record.handle : identity?.email || "Account" } - className={`w-full`} + className={`font-bold`} /> } > diff --git a/components/ActionBar/PublicationNavigation.tsx b/components/ActionBar/PublicationNavigation.tsx index 60fbf6c0..9eb7f088 100644 --- a/components/ActionBar/PublicationNavigation.tsx +++ b/components/ActionBar/PublicationNavigation.tsx @@ -19,10 +19,7 @@ import { Separator } from "components/Layout"; import { Menu, MenuItem } from "components/Menu"; import { AddTiny } from "components/Icons/AddTiny"; -export const PublicationNavigation = (props: { - currentPage: navPages; - currentPubUri?: string; -}) => { +export const PublicationNavigation = (props: { currentPage: navPages }) => { let { identity } = useIdentityData(); if (!identity) return; @@ -121,10 +118,7 @@ export const PublicationNavigation = (props: { >
- + ); }; diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx index da74cc89..821355a8 100644 --- a/components/ActionBar/Publications.tsx +++ b/components/ActionBar/Publications.tsx @@ -23,9 +23,7 @@ import { LoginModal } from "components/LoginButton"; export const PublicationButtons = (props: { currentPage: navPages; - currentPubUri: string | undefined; className?: string; - optionClassName?: string; }) => { let { identity } = useIdentityData(); let hasLooseleafs = !!identity?.permission_token_on_homepage.find( @@ -48,29 +46,30 @@ export const PublicationButtons = (props: { {/*TODO How should i get if this is the current page or not? theres not "pub" to check the uri for. Do i need to add it as an option to NavPages? thats kinda annoying*/} - } /> + } + />
)} {identity.publications?.map((d) => { - return ( - - ); + return ; })} - -
- New Publication - + + label="New" + className="text-tertiary!" + /> +
); }; @@ -79,7 +78,6 @@ export const PublicationOption = (props: { uri: string; name: string; record: Json; - current?: boolean; className?: string; }) => { let record = normalizePublicationRecord(props.record); @@ -91,9 +89,10 @@ export const PublicationOption = (props: { className={`hover:no-underline! `} > } - className={`w-full! ${props.current ? "bg-bg-page! border-border!" : ""} ${props.className}`} + className={` ${props.className}`} /> ); diff --git a/components/ActionBar/Sidebar.tsx b/components/ActionBar/Sidebar.tsx index 19a95f80..cdff1d50 100644 --- a/components/ActionBar/Sidebar.tsx +++ b/components/ActionBar/Sidebar.tsx @@ -30,7 +30,7 @@ export function Sidebar(props: { style={{ height: "-webkit-fill-available" }} className={` actionSidebar - ${!props.alwaysOpen ? "absolute top-0 left-0 z-10 w-max" : "w-[192px] max-w-[192px]"} + ${!props.alwaysOpen ? "absolute top-0 left-0 z-10 w-max" : "w-56"} p-[6px] my-6 flex flex-col gap-0.5 justify-start border rounded-md ${cardBorderHidden ? "light-container" : "frosted-container"} diff --git a/components/Icons/MenuSmall.tsx b/components/Icons/MenuSmall.tsx index 9127a33b..cc542831 100644 --- a/components/Icons/MenuSmall.tsx +++ b/components/Icons/MenuSmall.tsx @@ -8,6 +8,7 @@ export const MenuSmall = (props: Props) => { viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" + {...props} > void; }) { const searchParams = useSearchParams(); @@ -153,14 +147,7 @@ export function DashboardLayout< window.history.replaceState(null, "", newUrl); }; - let { content, controls } = props.tabs[tab]; - let { ref } = usePreserveScroll( - `dashboard-${props.id}-${tab as string}`, - ); - - let [headerState, setHeaderState] = useState<"default" | "controls">( - "default", - ); + let { content } = props.tabs[tab]; return ( @@ -176,68 +163,15 @@ export function DashboardLayout< onTabClick={(t) => setTabWithUrl(t as keyof T)} onTabHover={props.onTabHover} /> -
- {props.pageTitle && ( - - )} - - {!controls && Object.keys(props.tabs).length <= 1 ? null : ( -
- {headerState === "default" ? ( - <> - {Object.keys(props.tabs).length > 1 && ( -
- {Object.keys(props.tabs).map((t) => ( - setTabWithUrl(t)} - onMouseEnter={() => props.onTabHover?.(t)} - onPointerDown={() => props.onTabHover?.(t)} - /> - ))} -
- )} - {props.publication && controls && ( - - )} -
- {controls} -
- - ) : ( - <> - {controls} - - - )} -
- )} - {content} -
+ {content}
setTabWithUrl(t as keyof T)} + onTabHover={props.onTabHover} />
@@ -245,22 +179,6 @@ export function DashboardLayout< ); } -export const PageTitle = (props: { - pageTitle: string; - actions: React.ReactNode; -}) => { - return ( - -

{props.pageTitle}

-
{props.actions}
- {/*
{props.controls}
*/} - - ); -}; - export const HomeDashboardControls = (props: { searchValue: string; setSearchValueAction: (searchValue: string) => void; diff --git a/components/PageLayouts/DashboardPageLayout.tsx b/components/PageLayouts/DashboardPageLayout.tsx new file mode 100644 index 00000000..9c1ff8bb --- /dev/null +++ b/components/PageLayouts/DashboardPageLayout.tsx @@ -0,0 +1,51 @@ +"use client"; +import { Header } from "../PageHeader"; +import { MediaContents } from "components/Media"; +import { usePreserveScroll } from "src/hooks/usePreserveScroll"; + +export const PageTitle = (props: { + pageTitle: string; + actions: React.ReactNode; +}) => { + return ( + +

{props.pageTitle}

+
{props.actions}
+ + ); +}; + +export function DashboardPageLayout(props: { + scrollKey: string; + pageTitle?: string; + actions?: React.ReactNode; + controls?: React.ReactNode; + publication?: string; + showHeader?: boolean; + children: React.ReactNode; +}) { + let { ref } = usePreserveScroll(props.scrollKey); + + return ( +
+ {props.pageTitle && ( + + )} + {props.showHeader && ( +
+
+ {props.controls} +
+
+ )} + {props.children} +
+ ); +} diff --git a/components/Popover/index.tsx b/components/Popover/index.tsx index f8f5e172..d6242219 100644 --- a/components/Popover/index.tsx +++ b/components/Popover/index.tsx @@ -5,6 +5,7 @@ import { NestedCardThemeProvider } from "../ThemeManager/ThemeProvider"; import { useEffect, useState } from "react"; import { PopoverArrow } from "../Icons/PopoverArrow"; import { PopoverOpenContext } from "./PopoverContext"; +import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; export const Popover = (props: { trigger: React.ReactNode; disabled?: boolean; @@ -28,6 +29,7 @@ export const Popover = (props: { useEffect(() => { if (props.open !== undefined) setOpen(props.open); }, [props.open]); + let cardBorderHidden = useCardBorderHidden(); return ( - + {props.trigger}