diff --git a/app/[leaflet_id]/Actions.tsx b/app/[leaflet_id]/Actions.tsx new file mode 100644 --- /dev/null +++ b/app/[leaflet_id]/Actions.tsx @@ -0,0 +1,38 @@ +import { ActionButton } from "components/ActionBar/ActionButton"; +import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; +import { GoBackSmall } from "components/Icons/GoBackSmall"; +import { PublishSmall } from "components/Icons/PublishSmall"; +import { useIdentityData } from "components/IdentityProvider"; +import { publications } from "drizzle/schema"; +import Link from "next/link"; +export const BackToPubButton = (props: { + publication: { + identity_did: string; + indexed_at: string; + name: string; + uri: string; + }; +}) => { + let { identity } = useIdentityData(); + + let handle = identity?.resolved_did?.alsoKnownAs?.[0].slice(5)!; + let name = props.publication.name; + return ( + + } + label="To Pub" + /> + + ); +}; + +export const PublishButton = () => { + return ( + } + label="Publish!" + /> + ); +}; diff --git a/app/[leaflet_id]/Footer.tsx b/app/[leaflet_id]/Footer.tsx --- a/app/[leaflet_id]/Footer.tsx +++ b/app/[leaflet_id]/Footer.tsx @@ -9,10 +9,14 @@ import { useEntitySetContext } from "components/EntitySetProvider"; import { HelpPopover } from "components/HelpPopover"; import { Watermark } from "components/Watermark"; +import { BackToPubButton, PublishButton } from "./Actions"; +import { useLeafletPublicationData } from "components/PageSWRDataProvider"; export function LeafletFooter(props: { entityID: string }) { let focusedBlock = useUIState((s) => s.focusedEntity); let entity_set = useEntitySetContext(); + let { data: publicationData } = useLeafletPublicationData(); + let pub = publicationData?.[0]; return ( @@ -31,12 +35,21 @@ /> ) : entity_set.permissions.write ? ( - - - - - - + pub?.publications ? ( + + + + + + + ) : ( + + + + + + + ) ) : (
diff --git a/app/[leaflet_id]/Sidebar.tsx b/app/[leaflet_id]/Sidebar.tsx --- a/app/[leaflet_id]/Sidebar.tsx +++ b/app/[leaflet_id]/Sidebar.tsx @@ -1,16 +1,22 @@ "use client"; +import { ActionButton } from "components/ActionBar/ActionButton"; import { Sidebar } from "components/ActionBar/Sidebar"; import { useEntitySetContext } from "components/EntitySetProvider"; import { HelpPopover } from "components/HelpPopover"; import { HomeButton } from "components/HomeButton"; import { Media } from "components/Media"; +import { useLeafletPublicationData } from "components/PageSWRDataProvider"; import { ShareOptions } from "components/ShareOptions"; import { ThemePopover } from "components/ThemeManager/ThemeSetter"; import { Watermark } from "components/Watermark"; import { useUIState } from "src/useUIState"; +import { BackToPubButton, PublishButton } from "./Actions"; export function LeafletSidebar(props: { leaflet_id: string }) { let entity_set = useEntitySetContext(); + let { data: publicationData } = useLeafletPublicationData(); + let pub = publicationData?.[0]; + return (
{entity_set.permissions.write ? ( - <> - - - -
- - + pub?.publications ? ( + <> + + + +
+ + + ) : ( + <> + + + +
+ + + ) ) : (
diff --git a/components/Icons/GoBackSmall.tsx b/components/Icons/GoBackSmall.tsx new file mode 100644 --- /dev/null +++ b/components/Icons/GoBackSmall.tsx @@ -0,0 +1,18 @@ +import { Props } from "./Props"; + +export const GoBackSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/Icons/PublishSmall.tsx b/components/Icons/PublishSmall.tsx new file mode 100644 --- /dev/null +++ b/components/Icons/PublishSmall.tsx @@ -0,0 +1,20 @@ +import { Props } from "./Props"; + +export const PublishSmall = (props: Props) => { + return ( + + + + ); +}; diff --git a/components/ShareOptions/index.tsx b/components/ShareOptions/index.tsx --- a/components/ShareOptions/index.tsx +++ b/components/ShareOptions/index.tsx @@ -10,7 +10,10 @@ import LoginForm from "app/login/LoginForm"; import { CustomDomainMenu } from "./DomainOptions"; import { useIdentityData } from "components/IdentityProvider"; -import { useLeafletDomains } from "components/PageSWRDataProvider"; +import { + useLeafletDomains, + useLeafletPublicationData, +} from "components/PageSWRDataProvider"; import { ShareSmall } from "components/Icons/ShareSmall"; export type ShareMenuStates = "default" | "login" | "domain"; @@ -38,8 +41,9 @@ }; export function ShareOptions() { - let { permission_token } = useReplicache(); let [menuState, setMenuState] = useState("default"); + let { data: publicationData } = useLeafletPublicationData(); + let pub = publicationData?.[0]; return ( { setMenuState("default"); }} - trigger={ primary label="Share" />} + trigger={ + + primary={!!!pub} + secondary={!!pub} + label={`Share ${pub && "Draft"}`} + /> + } > {menuState === "login" ? (
@@ -57,7 +68,11 @@ ) : menuState === "domain" ? ( ) : ( - + )}
); @@ -66,8 +81,10 @@ const ShareMenu = (props: { setMenuState: (state: ShareMenuStates) => void; domainConnected: boolean; + isPub?: boolean; }) => { let { permission_token } = useReplicache(); + let publishLink = usePublishLink(); let [collabLink, setCollabLink] = useState(null); useEffect(() => { @@ -79,6 +96,7 @@ let isTemplate = useTemplateState( (s) => !!s.templates.find((t) => t.id === permission_token.id), ); + return ( <> {isTemplate && ( @@ -124,8 +142,12 @@ } link={publishLink || ""} /> -
- + {!props.isPub && ( + <> +
+ + + )} ); }; diff --git a/app/lish/[handle]/[publication]/Actions.tsx b/app/lish/[handle]/[publication]/Actions.tsx --- a/app/lish/[handle]/[publication]/Actions.tsx +++ b/app/lish/[handle]/[publication]/Actions.tsx @@ -47,7 +47,7 @@
Viewer Mode
- View your publication as a reader would + View your publication as a reader
@@ -55,7 +55,7 @@
Share Your Publication
- Copy the reader link for this publication{" "} + Copy link for the published site
diff --git a/app/lish/[handle]/[publication]/DraftList.tsx b/app/lish/[handle]/[publication]/DraftList.tsx --- a/app/lish/[handle]/[publication]/DraftList.tsx +++ b/app/lish/[handle]/[publication]/DraftList.tsx @@ -9,6 +9,7 @@ import { Menu, MenuItem } from "components/Layout"; import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; import { DeleteSmall } from "components/Icons/DeleteSmall"; +import React from "react"; export function DraftList(props: { publication: string; @@ -23,14 +24,14 @@ if (!publication) return null; if (!rel?.isAuthor) return null; return ( -
+
{props.drafts.map((d) => { return ( - <> - + +
- + ); })}