+3 -1

app/(home-pages)/home/Actions/AccountSettings.tsx

··· 23 23 side={isMobile ? "top" : "right"} 24 24 align={isMobile ? "center" : "start"} 25 25 className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`} 26 26 - trigger={<ActionButton icon=<AccountSmall /> label="Settings" />} 26 26 + trigger={ 27 27 + <ActionButton smallOnMobile icon=<AccountSmall /> label="Settings" /> 28 28 + } 27 29 > 28 30 {state === "general" ? ( 29 31 <GeneralSettings backToMenu={() => setState("menu")} />

+2 -1

app/(home-pages)/home/Actions/CreateNewButton.tsx

··· 26 26 <ActionButton 27 27 id="new-leaflet-button" 28 28 primary 29 29 - icon=<AddTiny className="m-1 shrink-0" /> 29 29 + icon=<AddTiny className="sm:m-1 shrink-0 sm:scale-100 scale-75" /> 30 30 label="New" 31 31 + smallOnMobile 31 32 /> 32 33 } 33 34 >

+1 -8

app/(home-pages)/home/HomeLayout.tsx

··· 18 18 DashboardLayout, 19 19 DashboardState, 20 20 useDashboardState, 21 21 - PageTitle, 22 21 } from "components/PageLayouts/DashboardLayout"; 23 22 import { Actions } from "./Actions/Actions"; 24 23 import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data"; ··· 29 28 HomeEmptyState, 30 29 PublicationBanner, 31 30 } from "./HomeEmpty/HomeEmpty"; 32 32 - import { PublicationNavigation } from "components/ActionBar/Publications"; 33 31 34 32 export type Leaflet = { 35 33 added_at: string; ··· 105 103 ), 106 104 }, 107 105 }} 108 108 - pageTitle={ 109 109 - <PageTitle 110 110 - pageTitle={"Home"} 111 111 - controls={<PublicationNavigation currentPage="home" />} 112 112 - /> 113 113 - } 106 106 + pageTitle="Home" 114 107 /> 115 108 ); 116 109 };

+2 -11

app/(home-pages)/looseleafs/LooseleafsLayout.tsx

··· 1 1 "use client"; 2 2 - import { 3 3 - DashboardLayout, 4 4 - PageTitle, 5 5 - } from "components/PageLayouts/DashboardLayout"; 2 2 + import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; 6 3 import { useState } from "react"; 7 4 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; 8 5 import { Fact, PermissionToken } from "src/replicache"; ··· 13 10 import useSWR from "swr"; 14 11 import { getHomeDocs } from "../home/storage"; 15 12 import { Leaflet, LeafletList } from "../home/HomeLayout"; 16 16 - import { PublicationNavigation } from "components/ActionBar/Publications"; 17 13 18 14 export const LooseleafsLayout = (props: { 19 15 entityID: string | null; ··· 51 47 ), 52 48 }, 53 49 }} 54 54 - pageTitle={ 55 55 - <PageTitle 56 56 - pageTitle={"Looseleafs"} 57 57 - controls={<PublicationNavigation currentPage="looseleafs" />} 58 58 - /> 59 59 - } 50 50 + pageTitle="Looseleafs" 60 51 /> 61 52 ); 62 53 };

+1

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

··· 38 38 icon=<ShareSmall /> 39 39 label="Share" 40 40 onClick={() => {}} 41 41 + smallOnMobile 41 42 /> 42 43 } 43 44 >

-1

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

··· 1 1 "use client"; 2 2 3 3 - import { NewDraftSecondaryButton } from "./NewDraftButton"; 4 3 import React from "react"; 5 4 import { 6 5 usePublicationData,

+3 -2

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

··· 16 16 let newLeaflet = await createPublicationDraft(props.publication); 17 17 router.push(`/${newLeaflet}`); 18 18 }} 19 19 - icon=<AddTiny className="m-1 shrink-0" /> 20 20 - label="New Draft" 19 19 + icon=<AddTiny className="sm:m-1 shrink-0 sm:scale-100 scale-75" /> 20 20 + smallOnMobile 21 21 + label="Draft" 21 22 /> 22 23 ); 23 24 }

+1 -13

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

··· 8 8 import { PublicationSubscribers } from "./PublicationSubscribers"; 9 9 import { 10 10 DashboardLayout, 11 11 - PageTitle, 12 11 PublicationDashboardControls, 13 12 } from "components/PageLayouts/DashboardLayout"; 14 13 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; 15 14 import { type NormalizedPublication } from "src/utils/normalizeRecords"; 16 16 - import { PublicationNavigation } from "components/ActionBar/Publications"; 17 15 18 16 export default function PublicationDashboard({ 19 17 publication, ··· 78 76 actions={<Actions publication={publication.uri} />} 79 77 currentPage="pub" 80 78 publication={publication.uri} 81 81 - pageTitle={ 82 82 - <PageTitle 83 83 - pageTitle={record.name} 84 84 - controls={ 85 85 - <PublicationNavigation 86 86 - currentPage="pub" 87 87 - currentPubUri={publication.uri} 88 88 - /> 89 89 - } 90 90 - /> 91 91 - } 79 79 + pageTitle={record.name} 92 80 /> 93 81 ); 94 82 }

+1

app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx

··· 34 34 id="pub-settings-button" 35 35 icon=<SettingsSmall /> 36 36 label="Settings" 37 37 + smallOnMobile 37 38 /> 38 39 } 39 40 >

+14 -4

components/ActionBar/ActionButton.tsx

··· 18 18 className?: string; 19 19 subtext?: string; 20 20 labelOnMobile?: boolean; 21 21 + smallOnMobile?: boolean; 21 22 z?: boolean; 22 23 }, 23 24 ) => { ··· 29 30 secondary, 30 31 nav, 31 32 labelOnMobile, 33 33 + smallOnMobile, 32 34 subtext, 33 35 className, 34 36 ...buttonProps ··· 53 55 className={` 54 56 actionButton relative font-bold 55 57 rounded-md border 56 56 - flex gap-2 items-start sm:justify-start justify-center 58 58 + flex gap-2 items-center justify-start 57 59 p-1 sm:mx-0 58 60 ${showLabelOnMobile && "sm:w-full w-max"} 61 61 + ${smallOnMobile && "sm:text-base text-sm py-0 sm:py-1 sm:h-fit h-6"} 59 62 ${ 60 63 primary 61 61 - ? "bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0" 64 64 + ? "bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 " 62 65 : secondary 63 63 - ? " bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0" 66 66 + ? " bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1" 64 67 : nav 65 68 ? "border-transparent text-secondary sm:hover:border-border justify-start! max-w-full" 66 69 : "border-transparent text-accent-contrast sm:hover:border-accent-contrast" ··· 71 74 > 72 75 <div className="shrink-0 flex flex-row gap-0.5">{icon}</div> 73 76 <div 74 74 - className={`flex flex-col ${subtext && "leading-snug"} max-w-full min-w-0 ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`} 77 77 + className={`flex flex-col ${subtext && "leading-snug"} max-w-full min-w-0 mr-1 ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`} 75 78 > 76 79 <div className="truncate text-left">{label}</div> 77 80 {subtext && ( ··· 83 86 </button> 84 87 ); 85 88 }; 89 89 + 90 90 + // ok currently in the middle of making the actions on home, looseleaf, and pub appear at the top by the page title 91 91 + // i then need to find a good place for the publication list in the footer 92 92 + // but first i really need to refactor action button 93 93 + // 1) make a primary variant 94 94 + // 2) make a secondary variant 95 95 + //

+8 -10

components/PageLayouts/DashboardLayout.tsx

··· 141 141 currentPage: navPages; 142 142 publication?: string; 143 143 profileDid?: string; 144 144 - actions: React.ReactNode; 145 145 - pageTitle?: React.ReactNode; 144 144 + actions?: React.ReactNode; 145 145 + pageTitle?: string; 146 146 }) { 147 147 const searchParams = useSearchParams(); 148 148 const tabParam = searchParams.get("tab"); ··· 189 189 ref={ref} 190 190 id="home-content" 191 191 > 192 192 - {props.pageTitle} 192 192 + {props.pageTitle && ( 193 193 + <PageTitle pageTitle={props.pageTitle} actions={props.actions} /> 194 194 + )} 193 195 194 196 {Object.keys(props.tabs).length <= 1 && !controls ? null : ( 195 197 <> ··· 250 252 currentPublicationUri={props.publication} 251 253 currentProfileDid={props.profileDid} 252 254 /> 253 253 - {props.actions && ( 254 254 - <div className="place-self-end flex flex-row-reverse gap-2 "> 255 255 - {props.actions} 256 256 - </div> 257 257 - )} 258 255 </Footer> 259 256 </div> 260 257 </DashboardIdContext.Provider> ··· 263 260 264 261 export const PageTitle = (props: { 265 262 pageTitle: string; 266 266 - controls: React.ReactNode; 263 263 + actions: React.ReactNode; 267 264 }) => { 268 265 return ( 269 266 <MediaContents ··· 271 268 className="flex justify-between items-center px-1 mt-1 -mb-1 w-full " 272 269 > 273 270 <h4 className="grow truncate">{props.pageTitle}</h4> 274 274 - <div className="shrink-0 h-6">{props.controls}</div> 271 271 + <div className="flex flex-row-reverse! gap-1">{props.actions}</div> 272 272 + {/* <div className="shrink-0 h-6">{props.controls}</div> */} 275 273 </MediaContents> 276 274 ); 277 275 };