From 3d5ceb2360a6ea971b01750515c18b5e98d8b2d3 Mon Sep 17 00:00:00 2001 From: celine Date: Wed, 12 Nov 2025 18:44:35 -0500 Subject: [PATCH] adjusted popover to new one step design --- app/[leaflet_id]/actions/PublishButton.tsx | 219 +++++++++++++++------ app/login/LoginForm.tsx | 2 +- components/ActionBar/Publications.tsx | 10 +- components/Buttons.tsx | 56 ++++-- components/Input.tsx | 6 +- 5 files changed, 200 insertions(+), 93 deletions(-) diff --git a/app/[leaflet_id]/actions/PublishButton.tsx b/app/[leaflet_id]/actions/PublishButton.tsx index ea7160d5..3d832912 100644 --- a/app/[leaflet_id]/actions/PublishButton.tsx +++ b/app/[leaflet_id]/actions/PublishButton.tsx @@ -5,9 +5,12 @@ import { PubIcon, PubListEmptyContent, } from "components/ActionBar/Publications"; +import { ButtonPrimary, ButtonTertiary } from "components/Buttons"; +import { AddSmall } from "components/Icons/AddSmall"; import { LooseLeafSmall } from "components/Icons/ArchiveSmall"; import { PublishSmall } from "components/Icons/PublishSmall"; import { useIdentityData } from "components/IdentityProvider"; +import { InputWithLabel } from "components/Input"; import { Menu, MenuItem } from "components/Layout"; import { useLeafletPublicationData } from "components/PageSWRDataProvider"; import { Popover } from "components/Popover"; @@ -19,6 +22,7 @@ import { useParams, useRouter } from "next/navigation"; import { useState } from "react"; import { useIsMobile } from "src/hooks/isMobile"; import { useReplicache } from "src/replicache"; +import { Json } from "supabase/database.types"; export const PublishButton = () => { let { data: pub } = useLeafletPublicationData(); @@ -90,70 +94,155 @@ const PublishToPublication = () => { let hasPubs = identity && identity.atp_did && identity.publications.length > 0; - if (!hasPubs) - return ( - } - label={"Publish on ATP"} - /> - } - > -
Publish to…
- {identity?.publications?.map((d) => { - return ( - { - // TODO - // make this a draft of the selected Publication - // redirect to the publication publish page - }} - > - -
{d.name}
- - ); - })} -
- { - // TODO - // send to one-off /publish page - }} - > - -
Publish as One-Off
- - - ); - else - return ( - } - label={"Publish on ATP"} - /> - } - > - {/* this component is also used on Home to populate the sidebar when PubList is empty */} - {/* however, this component needs to redirect to sign in, pub creation, AND publish so we might need to just make a new component */} + return ( + } + label={"Publish on ATP"} + /> + } + > + {!identity || !identity.atp_did ? ( + // this component is also used on Home to populate the sidebar when PubList is empty + // when user doesn't have an AT Proto account, and redirects back to the doc (hopefully with publish open? +
+ +
+ ) : ( +
+ +
+
+ +
+
- - - ); +
+ Save as Draft + Next +
+
+ )} + + ); +}; + +const PostDetailsForm = () => { + let [description, setDescription] = useState(""); + + return ( +
+
Post Details
+
+ + setDescription(e.currentTarget.value)} + /> +
+
+ ); +}; + +const PubSelector = (props: { + publications: { + identity_did: string; + indexed_at: string; + name: string; + record: Json | null; + uri: string; + }[]; +}) => { + let [selectedPub, setSelectedPub] = useState(undefined); + return ( +
+
Publish to…
+ {props.publications.length === 0 || props.publications === undefined ? ( +
+
+ +
+
+ Publish as LooseLeaf +
+
+ Publish this as a one off doc
+ to AT Proto +
+
+
+
+ +
+
+ Start a Publication! +
+
+ Publish your writing to a blog or newsletter on AT Proto +
+
+
+
+ ) : ( +
+ setSelectedPub("looseleaf")} + > + + Publish as Looseleaf + +
+ {props.publications.map((p) => { + let pubRecord = p.record as PubLeafletPublication.Record; + return ( + setSelectedPub(p.uri)} + > + <> + + {p.name} + + + ); + })} + setSelectedPub("create")} + > + <> + Create New Publication + + +
+ )} +
+ ); +}; + +const PubOption = (props: { + selected: boolean; + onSelect: () => void; + children: React.ReactNode; +}) => { + return ( + + ); }; diff --git a/app/login/LoginForm.tsx b/app/login/LoginForm.tsx index 13a8e228..a9ffa1ba 100644 --- a/app/login/LoginForm.tsx +++ b/app/login/LoginForm.tsx @@ -213,7 +213,7 @@ export function BlueskyLogin(props: { @@ -92,21 +93,34 @@ export const ButtonTertiary = forwardRef< HTMLButtonElement, { fullWidth?: boolean; + fullWidthOnMobile?: boolean; children: React.ReactNode; compact?: boolean; } & ButtonProps >((props, ref) => { - let { fullWidth, children, compact, ...buttonProps } = props; + let { + className, + fullWidth, + fullWidthOnMobile, + compact, + children, + ...buttonProps + } = props; return ( diff --git a/components/Input.tsx b/components/Input.tsx index 97213a69..1f6016f9 100644 --- a/components/Input.tsx +++ b/components/Input.tsx @@ -100,9 +100,11 @@ export const InputWithLabel = ( JSX.IntrinsicElements["textarea"], ) => { let { label, textarea, ...inputProps } = props; - let style = `appearance-none w-full font-normal not-italic bg-transparent text-base text-primary focus:outline-0 ${props.className} outline-hidden resize-none`; + let style = `appearance-none w-full font-normal not-italic bg-transparent text-base text-primary focus:outline-0 ${props.className} outline-hidden resize-none disabled:text-tertiary disabled:cursor-not-allowed`; return ( -