+12

app/lish/[did]/[publication]/dashboard/Actions.tsx

reviewed

··· 17 17 import { useSmoker } from "components/Toast"; 18 18 import { PaintSmall } from "components/Icons/PaintSmall"; 19 19 import { PubThemeSetter } from "components/ThemeManager/PubThemeSetter"; 20 20 + import { useIsMobile } from "src/hooks/isMobile"; 20 21 21 22 export const Actions = (props: { publication: string }) => { 22 23 return ( ··· 53 54 function PublicationShareButton() { 54 55 let { data: pub } = usePublicationData(); 55 56 let smoker = useSmoker(); 57 57 + let isMobile = useIsMobile(); 58 58 + 56 59 return ( 57 60 <Menu 61 61 + side={isMobile ? "top" : "right"} 62 62 + align={isMobile ? "center" : "start"} 58 63 className="max-w-xs" 59 64 asChild 60 65 trigger={ ··· 104 109 } 105 110 106 111 function PublicationSettingsButton(props: { publication: string }) { 112 112 + let isMobile = useIsMobile(); 107 113 return ( 108 114 <Popover 109 115 asChild 116 116 + side={isMobile ? "top" : "right"} 117 117 + align={isMobile ? "center" : "start"} 110 118 className="max-w-xs" 111 119 trigger={ 112 120 <ActionButton ··· 122 130 } 123 131 124 132 function PublicationThemeButton() { 133 133 + let isMobile = useIsMobile(); 134 134 + 125 135 return ( 126 136 <Popover 127 137 asChild 128 138 className="max-w-xs pb-0 !bg-white" 139 139 + side={isMobile ? "top" : "right"} 140 140 + align={isMobile ? "center" : "start"} 129 141 trigger={ 130 142 <ActionButton id="pub-theme-button" icon=<PaintSmall /> label="Theme" /> 131 143 }

+5

components/HelpPopover.tsx

reviewed

··· 8 8 import { ActionButton } from "components/ActionBar/ActionButton"; 9 9 import { HelpSmall } from "./Icons/HelpSmall"; 10 10 import { isMac } from "src/utils/isDevice"; 11 11 + import { useIsMobile } from "src/hooks/isMobile"; 11 12 12 13 export const HelpPopover = (props: { noShortcuts?: boolean }) => { 13 14 let entity_set = useEntitySetContext(); 15 15 + let isMobile = useIsMobile(); 16 16 + 14 17 return entity_set.permissions.write ? ( 15 18 <Popover 19 19 + side={isMobile ? "top" : "right"} 20 20 + align={isMobile ? "center" : "start"} 16 21 asChild 17 22 className="max-w-xs w-full" 18 23 trigger={<ActionButton icon={<HelpSmall />} label="About" />}

+2

components/Layout.tsx

reviewed

··· 16 16 trigger: React.ReactNode; 17 17 children: React.ReactNode; 18 18 align?: "start" | "end" | "center"; 19 19 + side?: "top" | "bottom" | "right" | "left"; 19 20 background?: string; 20 21 border?: string; 21 22 className?: string; ··· 38 39 <DropdownMenu.Portal> 39 40 <NestedCardThemeProvider> 40 41 <DropdownMenu.Content 42 42 + side={props.side ? props.side : "bottom"} 41 43 align={props.align ? props.align : "center"} 42 44 sideOffset={4} 43 45 collisionPadding={16}

+30 -2

components/ShareOptions/index.tsx

reviewed

··· 15 15 useLeafletPublicationData, 16 16 } from "components/PageSWRDataProvider"; 17 17 import { ShareSmall } from "components/Icons/ShareSmall"; 18 18 + import { PubLeafletDocument } from "lexicons/api"; 19 19 + import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 20 20 + import { AtUri } from "@atproto/syntax"; 21 21 + import { useIsMobile } from "src/hooks/isMobile"; 18 22 19 23 export type ShareMenuStates = "default" | "login" | "domain"; 20 24 ··· 43 47 export function ShareOptions() { 44 48 let [menuState, setMenuState] = useState<ShareMenuStates>("default"); 45 49 let { data: pub } = useLeafletPublicationData(); 50 50 + let isMobile = useIsMobile(); 46 51 47 52 return ( 48 53 <Menu 49 54 asChild 55 55 + side={isMobile ? "top" : "right"} 56 56 + align={isMobile ? "center" : "start"} 50 57 className="max-w-xs" 51 58 onOpenChange={() => { 52 59 setMenuState("default"); ··· 83 90 isPub?: boolean; 84 91 }) => { 85 92 let { permission_token } = useReplicache(); 93 93 + let { data: pub } = useLeafletPublicationData(); 86 94 95 95 + let record = pub?.documents?.data as PubLeafletDocument.Record | null; 96 96 + 97 97 + let postLink = 98 98 + pub?.publications && pub.documents 99 99 + ? `${getPublicationURL(pub.publications)}/${new AtUri(pub?.documents.uri).rkey}` 100 100 + : null; 87 101 let publishLink = usePublishLink(); 88 102 let [collabLink, setCollabLink] = useState<null | string>(null); 89 103 useEffect(() => { ··· 110 124 <hr className="border-border my-1" /> 111 125 </> 112 126 )} 127 127 + 113 128 <ShareButton 114 114 - text="Share Edit Link" 129 129 + text={`Share ${postLink ? "Draft" : ""} Edit Link`} 115 130 subtext="" 116 131 smokerText="Edit link copied!" 117 132 id="get-edit-link" 118 133 link={collabLink} 119 134 /> 120 135 <ShareButton 121 121 - text="Share View Link" 136 136 + text={`Share ${postLink ? "Draft" : ""} View Link`} 122 137 subtext=<> 123 138 {domains?.[0] ? ( 124 139 <> ··· 141 156 } 142 157 link={publishLink || ""} 143 158 /> 159 159 + {postLink && ( 160 160 + <> 161 161 + <hr className="border-border-light" /> 162 162 + 163 163 + <ShareButton 164 164 + text="Share Published Link" 165 165 + subtext="" 166 166 + smokerText="Post link copied!" 167 167 + id="get-post-link" 168 168 + link={postLink} 169 169 + /> 170 170 + </> 171 171 + )} 144 172 {!props.isPub && ( 145 173 <> 146 174 <hr className="border-border mt-1" />

+4

components/ThemeManager/ThemeSetter.tsx

reviewed

··· 22 22 import { PaintSmall } from "components/Icons/PaintSmall"; 23 23 import { AccentPickers } from "./Pickers/AccentPickers"; 24 24 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 25 25 + import { useIsMobile } from "src/hooks/isMobile"; 25 26 26 27 export type pickers = 27 28 | "null" ··· 50 51 export const ThemePopover = (props: { entityID: string; home?: boolean }) => { 51 52 let { rep } = useReplicache(); 52 53 let { data: pub } = useLeafletPublicationData(); 54 54 + let isMobile = useIsMobile(); 53 55 54 56 // I need to get these variables from replicache and then write them to the DB. I also need to parse them into a state that can be used here. 55 57 let permission = useEntitySetContext().permissions.write; ··· 75 77 className="w-80 bg-white" 76 78 arrowFill="#FFFFFF" 77 79 asChild 80 80 + side={isMobile ? "top" : "right"} 81 81 + align={isMobile ? "center" : "start"} 78 82 trigger={<ActionButton icon={<PaintSmall />} label="Theme" />} 79 83 > 80 84 <div className="themeSetterContent flex flex-col w-full overflow-y-scroll no-scrollbar">