diff --git a/app/(home-pages)/home/Actions/Actions.tsx b/app/(home-pages)/home/Actions/Actions.tsx index 20852f4d..e711d40e 100644 --- a/app/(home-pages)/home/Actions/Actions.tsx +++ b/app/(home-pages)/home/Actions/Actions.tsx @@ -13,11 +13,7 @@ export const Actions = () => { return ( <> - {identity ? ( - - ) : ( - - )} + {identity && } ); }; diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx index b66a762e..fa7f210b 100644 --- a/components/ActionBar/ActionButton.tsx +++ b/components/ActionBar/ActionButton.tsx @@ -62,13 +62,14 @@ export const ActionButton = ( : secondary ? " 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 - ? "border-transparent text-secondary sm:hover:border-border justify-start!" + ? "border-transparent text-secondary sm:hover:border-border justify-start! max-w-full" : "border-transparent text-accent-contrast sm:hover:border-accent-contrast" } ${className} `} + style={nav ? { width: "-webkit-fill-available" } : {}} > -
{icon}
+
{icon}
diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx index 489c2016..453aac63 100644 --- a/components/ActionBar/DesktopNavigation.tsx +++ b/components/ActionBar/DesktopNavigation.tsx @@ -4,6 +4,7 @@ import { HomeButton, ReaderButton, NotificationButton, + WriterButton, } from "./NavigationButtons"; import { PublicationButtons } from "./Publications"; import { Sidebar } from "./Sidebar"; @@ -16,10 +17,19 @@ export const DesktopNavigation = (props: { let thisPublication = identity?.publications?.find( (pub) => pub.uri === props.publication, ); + + let currentlyWriter = + props.currentPage === "home" || + props.currentPage === "looseleafs" || + props.currentPage === "pub"; return (
+ {identity?.atp_did && ( + + + + )} - - {identity?.atp_did && ( - + {currentlyWriter ? ( + <> + +
+ + + ) : ( + )} - - -
); }; diff --git a/components/ActionBar/MobileNavigation.tsx b/components/ActionBar/MobileNavigation.tsx index 05edd69d..634fb343 100644 --- a/components/ActionBar/MobileNavigation.tsx +++ b/components/ActionBar/MobileNavigation.tsx @@ -7,6 +7,7 @@ import { navPages, NotificationButton, ReaderButton, + WriterButton, } from "./NavigationButtons"; import { PubIcon, PublicationButtons } from "./Publications"; import { HomeSmall } from "components/Icons/HomeSmall"; @@ -20,6 +21,7 @@ import { import { TagSmall } from "components/Icons/TagSmall"; import { Avatar } from "components/Avatar"; import { useProfileFromDid } from "src/utils/getRecordFromDid"; +import { LoginActionButton } from "components/LoginButton"; export const MobileNavigation = (props: { currentPage: navPages; @@ -27,103 +29,41 @@ export const MobileNavigation = (props: { currentProfileDid?: string; }) => { let { identity } = useIdentityData(); - let thisPublication = identity?.publications?.find( - (pub) => pub.uri === props.currentPublicationUri, - ); - return ( -
- e.preventDefault()} - asChild - className="px-2! !max-w-[256px]" - trigger={ -
- - -
- } - > - + let compactOnMobile = + props.currentPage === "home" || + props.currentPage === "looseleafs" || + props.currentPage === "pub" + ? false + : true; + + return ( +
+
+ -
- - - {identity?.atp_did && ( +
+ {identity?.atp_did ? ( <> - + {!compactOnMobile && } + ) : ( + )}
); }; - -const CurrentPageIcon = (props: { - currentPage: navPages; - currentPubUri?: string; - currentProfileDid?: string; -}) => { - let { identity } = useIdentityData(); - let currentPub = identity?.publications?.find( - (pub) => pub.uri === props.currentPubUri, - ); - let pubRecord = currentPub - ? normalizePublicationRecord(currentPub.record) - : null; - let unreads = identity?.notifications[0]?.count; - - const { data: profile } = useProfileFromDid( - props.currentPage === "profile" ? props.currentProfileDid : undefined, - ); - - switch (props.currentPage) { - case "home": - return ; - case "reader": - return ; - case "profile": - if (profile) { - return ( - - ); - } - return ; - case "tag": - return ; - case "notifications": - if (unreads) { - return ; - } else { - return ; - } - - case "looseleafs": - return ; - - case "pub": - if (currentPub && pubRecord) { - return ; - } - return null; - default: - return null; - } -}; diff --git a/components/ActionBar/NavigationButtons.tsx b/components/ActionBar/NavigationButtons.tsx index a41b42eb..8344c369 100644 --- a/components/ActionBar/NavigationButtons.tsx +++ b/components/ActionBar/NavigationButtons.tsx @@ -3,13 +3,18 @@ import { ActionButton } from "./ActionButton"; import { useIdentityData } from "components/IdentityProvider"; import Link from "next/link"; import { DiscoverSmall } from "components/Icons/DiscoverSmall"; -import { PublicationButtons } from "./Publications"; +import { PubIcon, PublicationButtons } from "./Publications"; import { ReaderUnreadSmall } from "components/Icons/ReaderSmall"; import { NotificationsReadSmall, NotificationsUnreadSmall, } from "components/Icons/NotificationSmall"; import { SpeedyLink } from "components/SpeedyLink"; +import { Popover } from "components/Popover"; +import { WriterSmall } from "components/Icons/WriterSmall"; +import { LooseLeafSmall } from "components/Icons/LooseleafSmall"; +import { normalizePublicationRecord } from "src/utils/normalizeRecords"; +import { theme } from "tailwind.config"; export type navPages = | "home" @@ -26,19 +31,119 @@ export const HomeButton = (props: { current?: boolean }) => { } - label="Home" + label="Writer Home" className={props.current ? "bg-bg-page! border-border-light!" : ""} /> ); }; -export const ReaderButton = (props: { current?: boolean; subs: boolean }) => { +export const WriterButton = (props: { + currentPage: navPages; + currentPubUri?: string; + compactOnMobile?: boolean; +}) => { + let { identity } = useIdentityData(); + + let currentPub = identity?.publications?.find( + (pub) => pub.uri === props.currentPubUri, + ); + let pubRecord = currentPub + ? normalizePublicationRecord(currentPub.record) + : null; + + let current = + props.currentPage === "home" || + props.currentPage === "looseleafs" || + props.currentPage === "pub"; + console.log(current); + + let currentPubIcon = + currentPub && pubRecord ? ( + + ) : null; + + let currentIcon = + props.currentPage === "home" ? ( + + ) : props.currentPage === "looseleafs" ? ( + + ) : props.currentPage === "pub" ? ( + currentPubIcon + ) : null; + + return ( + } + label=
+ Writer + {current && ( + <> + {currentIcon} + + )} +
+ className={current ? "bg-bg-page! border-border-light!" : ""} + /> + ) : ( + + + {current && ( + <> + {currentIcon} + + )} + + } + label=
Writer
+ className={current ? "bg-bg-page! border-border-light!" : ""} + /> + ) + } + > + + } + label="Writer Home" + className={ + props.currentPage === "home" + ? "bg-bg-page! border-border-light!" + : "" + } + /> + +
+ + + ); +}; + +export const ReaderButton = (props: { + current?: boolean; + subs: boolean; + compactOnMobile?: boolean; +}) => { if (!props.subs) return; return ( } label="Reader" className={props.current ? "bg-bg-page! border-border-light!" : ""} @@ -69,3 +174,22 @@ export function NotificationButton(props: { current?: boolean }) { ); } + +const Divider = () => { + return ( + + + + ); +}; diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx index c45d5f4d..7cc59f31 100644 --- a/components/ActionBar/Publications.tsx +++ b/components/ActionBar/Publications.tsx @@ -19,7 +19,7 @@ import { ButtonSecondary } from "components/Buttons"; import { useIsMobile } from "src/hooks/isMobile"; import { useState } from "react"; import { LooseLeafSmall } from "components/Icons/LooseleafSmall"; -import { navPages } from "./NavigationButtons"; +import type { navPages } from "./NavigationButtons"; export const PublicationButtons = (props: { currentPage: navPages; diff --git a/components/Icons/ReaderSmall.tsx b/components/Icons/ReaderSmall.tsx index 1be96367..606331b0 100644 --- a/components/Icons/ReaderSmall.tsx +++ b/components/Icons/ReaderSmall.tsx @@ -3,14 +3,15 @@ import { Props } from "./Props"; export const ReaderUnreadSmall = (props: Props) => { return ( diff --git a/components/Icons/WriterSmall.tsx b/components/Icons/WriterSmall.tsx new file mode 100644 index 00000000..4a78145e --- /dev/null +++ b/components/Icons/WriterSmall.tsx @@ -0,0 +1,19 @@ +import { Props } from "./Props"; + +export const WriterSmall = (props: Props) => { + return ( + + + + ); +};