+12 -8

app/[leaflet_id]/Footer.tsx

reviewed

··· 1 1 "use client"; 2 2 import { useUIState } from "src/useUIState"; 3 3 - import { Footer as ActionFooter } from "components/ActionBar/Footer"; 3 3 + import { Footer } from "components/ActionBar/Footer"; 4 4 import { Media } from "components/Media"; 5 5 import { ThemePopover } from "components/ThemeManager/ThemeSetter"; 6 6 import { Toolbar } from "components/Toolbar"; ··· 35 35 .value; 36 36 37 37 return ( 38 38 - <Media mobile className="mobileFooter w-full z-10 touch-none -mt-[54px] "> 38 38 + <Media 39 39 + mobile 40 40 + className="mobileLeafletFooter w-full z-10 touch-none -mt-[54px] " 41 41 + > 39 42 {focusedBlock && 40 43 focusedBlock.entityType == "block" && 41 44 hasBlockToolbar(blockType) && ··· 53 56 /> 54 57 </div> 55 58 ) : entity_set.permissions.write ? ( 56 56 - <ActionFooter> 59 59 + <Footer> 57 60 {pub?.publications && 58 61 identity?.atp_did && 59 62 pub.publications.identity_did === identity.atp_did ? ( ··· 61 64 ) : ( 62 65 <HomeButton /> 63 66 )} 64 64 - 65 65 - <PublishButton entityID={props.entityID} /> 66 66 - <ShareOptions /> 67 67 - <ThemePopover entityID={props.entityID} /> 68 68 - </ActionFooter> 67 67 + <div className="mobileLeafletActions flex gap-2 shrink-0"> 68 68 + <PublishButton entityID={props.entityID} /> 69 69 + <ShareOptions /> 70 70 + <ThemePopover entityID={props.entityID} /> 71 71 + </div> 72 72 + </Footer> 69 73 ) : ( 70 74 <div className="pb-2 px-2 z-10 flex justify-end"> 71 75 <Watermark mobile />

+2 -4

components/ActionBar/ActionButton.tsx

reviewed

··· 58 58 actionButton relative font-bold 59 59 rounded-md border 60 60 flex gap-2 items-center justify-start 61 61 - p-1 sm:mx-0 62 62 - ${showLabelOnMobile && "sm:w-full w-max"} 63 63 - ${smallOnMobile && "sm:text-base text-sm py-0 sm:py-1 sm:h-fit h-6"} 61 61 + w-max sm:w-[1000px] sm:max-w-full p-1 62 62 + ${smallOnMobile && "sm:text-base text-sm py-0! sm:py-1! sm:h-fit h-6"} 64 63 ${ 65 64 primary 66 65 ? "bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 " ··· 72 71 } 73 72 ${className} 74 73 `} 75 75 - style={nav ? { width: "-webkit-fill-available" } : {}} 76 74 > 77 75 <div className="shrink-0 flex flex-row gap-0.5">{icon}</div> 78 76 <div

+54 -47

components/ActionBar/MobileNavigation.tsx

reviewed

··· 25 25 props.currentPage === "home" || 26 26 props.currentPage === "looseleafs" || 27 27 props.currentPage === "pub"; 28 28 - function getPubIcons() { 29 29 - let hasLooseleafs = !!identity?.permission_token_on_homepage.find( 30 30 - (f) => 31 31 - f.permission_tokens.leaflets_to_documents && 32 32 - f.permission_tokens.leaflets_to_documents[0]?.document, 33 33 - ); 28 28 + 29 29 + let hasLooseleafs = !!identity?.permission_token_on_homepage.find( 30 30 + (f) => 31 31 + f.permission_tokens.leaflets_to_documents && 32 32 + f.permission_tokens.leaflets_to_documents[0]?.document, 33 33 + ); 34 34 35 35 + let hasPubs = identity?.publications || hasLooseleafs; 36 36 + 37 37 + function getPubIcons() { 35 38 if (identity && identity.publications.length >= 1) { 36 39 return ( 37 40 <div className="pubNav flex gap-2 font-bold"> 38 38 - Publications 39 41 <div className="flex"> 40 42 {identity.publications.map((pub, index) => { 41 43 if (index <= 3) ··· 49 51 ); 50 52 })} 51 53 </div> 54 54 + Pubs 52 55 </div> 53 56 ); 54 57 } ··· 66 69 67 70 return ( 68 71 <div 69 69 - className={`mobileNav flex justify-between gap-1 items-center text-secondary px-1 w-full `} 72 72 + className={`mobileFooter flex gap-2 px-1 text-secondary grow items-center justify-between`} 70 73 > 71 71 - <div 72 72 - className={`flex gap-2 grow items-center ${compactOnMobile ? "justify-start" : "justify-between"}`} 73 73 - > 74 74 - <div className="flex gap-2 items-center justify-start"> 75 75 - <WriterButton 76 76 - compactOnMobile={compactOnMobile} 77 77 - currentPage={props.currentPage} 78 78 - currentPubUri={props.currentPublicationUri} 79 79 - /> 80 80 - <ReaderButton 81 81 - compactOnMobile={compactOnMobile} 82 82 - current={props.currentPage === "reader"} 83 83 - subs={ 84 84 - identity?.publication_subscriptions?.length !== 0 && 85 85 - identity?.publication_subscriptions?.length !== undefined 74 74 + <div className="mobileNav flex gap-2 items-center justify-start"> 75 75 + <ReaderButton 76 76 + compactOnMobile={compactOnMobile} 77 77 + current={props.currentPage === "reader"} 78 78 + subs={ 79 79 + identity?.publication_subscriptions?.length !== 0 && 80 80 + identity?.publication_subscriptions?.length !== undefined 81 81 + } 82 82 + /> 83 83 + <WriterButton 84 84 + compactOnMobile={compactOnMobile} 85 85 + currentPage={props.currentPage} 86 86 + currentPubUri={props.currentPublicationUri} 87 87 + /> 88 88 + 89 89 + {compactOnMobile && ( 90 90 + <Popover 91 91 + trigger={ 92 92 + <> 93 93 + {hasPubs && <Separator classname="h-6!" />} 94 94 + {getPubIcons()} 95 95 + </> 86 96 } 87 87 - /> 88 88 - </div> 89 89 - {identity?.atp_did ? ( 90 90 - <> 91 91 - {compactOnMobile && <Separator classname="h-6!" />} 92 92 - <NotificationButton /> 93 93 - </> 94 94 - ) : ( 95 95 - <LoginActionButton /> 97 97 + className="pt-1 px-2!" 98 98 + > 99 99 + <HomeButton 100 100 + current={props.currentPage === "home"} 101 101 + className="flex-row-reverse! justify-end!" 102 102 + /> 103 103 + <hr className="my-1 border-border-light" /> 104 104 + <PublicationButtons 105 105 + currentPage={props.currentPage} 106 106 + currentPubUri={props.currentPublicationUri} 107 107 + className="justify-end!" 108 108 + optionClassName=" flex-row-reverse!" 109 109 + /> 110 110 + </Popover> 96 111 )} 97 112 </div> 98 98 - 99 99 - {compactOnMobile && ( 100 100 - <Popover trigger={getPubIcons()} className="pt-1 px-2!"> 101 101 - <HomeButton 102 102 - current={props.currentPage === "home"} 103 103 - className="flex-row-reverse! justify-end!" 104 104 - /> 105 105 - <hr className="my-1 border-border-light" /> 106 106 - <PublicationButtons 107 107 - currentPage={props.currentPage} 108 108 - currentPubUri={props.currentPublicationUri} 109 109 - className="justify-end!" 110 110 - optionClassName=" flex-row-reverse!" 111 111 - /> 112 112 - </Popover> 113 113 + {identity?.atp_did ? ( 114 114 + <> 115 115 + {compactOnMobile && <Separator classname="h-6!" />} 116 116 + <NotificationButton /> 117 117 + </> 118 118 + ) : ( 119 119 + <LoginActionButton /> 113 120 )} 114 121 </div> 115 122 );

+8 -28

components/ActionBar/NavigationButtons.tsx

reviewed

··· 47 47 props.currentPage === "pub"; 48 48 49 49 return ( 50 50 - <Popover 51 51 - className="p-2!" 52 52 - asChild 53 53 - trigger={ 54 54 - <ActionButton 55 55 - nav 56 56 - labelOnMobile={!props.compactOnMobile} 57 57 - icon={<WriterSmall />} 58 58 - label="Write" 59 59 - className={` w-fit! ${current ? "bg-bg-page! border-border-light!" : ""}`} 60 60 - /> 61 61 - } 62 62 - > 63 63 - <SpeedyLink href={"/home"} className="hover:!no-underline"> 64 64 - <ActionButton 65 65 - nav 66 66 - icon={<HomeSmall />} 67 67 - label="Write" 68 68 - className={ 69 69 - props.currentPage === "home" ? "bg-bg-page! border-border!" : "" 70 70 - } 71 71 - /> 72 72 - </SpeedyLink> 73 73 - <hr className="border-border-light border-dashed my-2" /> 74 74 - <PublicationButtons 75 75 - currentPage={props.currentPage} 76 76 - currentPubUri={props.currentPubUri} 50 50 + <SpeedyLink href={"/home"} className="hover:!no-underline"> 51 51 + <ActionButton 52 52 + nav 53 53 + labelOnMobile={!props.compactOnMobile} 54 54 + icon={<WriterSmall />} 55 55 + label="Write" 56 56 + className={` w-fit! ${current ? "bg-bg-page! border-border-light!" : ""}`} 77 57 /> 78 78 - </Popover> 58 58 + </SpeedyLink> 79 59 ); 80 60 }; 81 61