From 0ee9115e19e1d560ba8d992a2cd8e2dd3f558335 Mon Sep 17 00:00:00 2001 From: celine Date: Thu, 15 May 2025 18:10:11 -0400 Subject: [PATCH] Added a action menu for post drafts --- app/[leaflet_id]/Actions.tsx | 38 +++++++++++++++++++ app/[leaflet_id]/Footer.tsx | 25 +++++++++--- app/[leaflet_id]/Sidebar.tsx | 30 +++++++++++---- app/lish/[handle]/[publication]/Actions.tsx | 4 +- app/lish/[handle]/[publication]/DraftList.tsx | 9 +++-- components/Icons/GoBackSmall.tsx | 18 +++++++++ components/Icons/PublishSmall.tsx | 20 ++++++++++ components/ShareOptions/index.tsx | 34 ++++++++++++++--- 8 files changed, 153 insertions(+), 25 deletions(-) create mode 100644 app/[leaflet_id]/Actions.tsx create mode 100644 components/Icons/GoBackSmall.tsx create mode 100644 components/Icons/PublishSmall.tsx diff --git a/app/[leaflet_id]/Actions.tsx b/app/[leaflet_id]/Actions.tsx new file mode 100644 index 00000000..ee5cdf69 --- /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 index 20fa60ec..e79fb51a 100644 --- a/app/[leaflet_id]/Footer.tsx +++ b/app/[leaflet_id]/Footer.tsx @@ -9,10 +9,14 @@ import { HomeButton } from "components/HomeButton"; 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 @@ export function LeafletFooter(props: { entityID: string }) { /> ) : entity_set.permissions.write ? ( - - - - - - + pub?.publications ? ( + + + + + + + ) : ( + + + + + + + ) ) : (
diff --git a/app/[leaflet_id]/Sidebar.tsx b/app/[leaflet_id]/Sidebar.tsx index 40228de9..7ea79c81 100644 --- 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/app/lish/[handle]/[publication]/Actions.tsx b/app/lish/[handle]/[publication]/Actions.tsx index 0ac62fd8..0d4eca13 100644 --- a/app/lish/[handle]/[publication]/Actions.tsx +++ b/app/lish/[handle]/[publication]/Actions.tsx @@ -47,7 +47,7 @@ function PublicationShareButton() {
Viewer Mode
- View your publication as a reader would + View your publication as a reader
@@ -55,7 +55,7 @@ function PublicationShareButton() {
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 index c332d222..24af4171 100644 --- a/app/lish/[handle]/[publication]/DraftList.tsx +++ b/app/lish/[handle]/[publication]/DraftList.tsx @@ -9,6 +9,7 @@ import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny"; 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 @@ export function DraftList(props: { if (!publication) return null; if (!rel?.isAuthor) return null; return ( -
+
{props.drafts.map((d) => { return ( - <> - + +
- + ); })}
diff --git a/components/Icons/GoBackSmall.tsx b/components/Icons/GoBackSmall.tsx new file mode 100644 index 00000000..5d0cb916 --- /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 index 00000000..5065d61a --- /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 index 52715cf8..50a1ad9e 100644 --- a/components/ShareOptions/index.tsx +++ b/components/ShareOptions/index.tsx @@ -10,7 +10,10 @@ import { useTemplateState } from "app/home/CreateNewButton"; 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 let usePublishLink = () => { }; 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 @@ export function ShareOptions() { ) : menuState === "domain" ? ( ) : ( - + )}
); @@ -66,8 +81,10 @@ export function ShareOptions() { 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 @@ const ShareMenu = (props: { let isTemplate = useTemplateState( (s) => !!s.templates.find((t) => t.id === permission_token.id), ); + return ( <> {isTemplate && ( @@ -124,8 +142,12 @@ const ShareMenu = (props: { } link={publishLink || ""} /> -
- + {!props.isPub && ( + <> +
+ + + )} ); }; -- 2.51.2