+2

app/[doc_id]/page.tsx

··· 5 5 import { SelectionManager } from "components/SelectionManager"; 6 6 import { Cards } from "components/Cards"; 7 7 import { ThemeProvider } from "components/ThemeManager/ThemeProvider"; 8 8 + import { MobileFooter } from "components/MobileFooter"; 8 9 9 10 export const preferredRegion = ["sfo1"]; 10 11 export const dynamic = "force-dynamic"; ··· 30 31 > 31 32 <Cards rootCard={props.params.doc_id} /> 32 33 </div> 34 34 + <MobileFooter entityID={props.params.doc_id} /> 33 35 </ThemeProvider> 34 36 </ReplicacheProvider> 35 37 );

+3 -2

components/Cards.tsx

··· 4 4 import useMeasure from "react-use-measure"; 5 5 import { elementId } from "src/utils/elementId"; 6 6 import { ThemePopover } from "./ThemeManager/ThemeSetter"; 7 7 + import { Media } from "./Media"; 7 8 8 9 export function Cards(props: { rootCard: string }) { 9 10 let cards = useUIState((s) => s.openCards); ··· 15 16 className="flex justify-end items-start" 16 17 style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} 17 18 > 18 18 - <div className="flex flex-col gap-2 mr-4 mt-2"> 19 19 + <Media mobile={false} className="flex flex-col gap-2 mr-4 mt-2"> 19 20 <PageOptions entityID={props.rootCard} /> 20 20 - </div> 21 21 + </Media> 21 22 </div> 22 23 <Card entityID={props.rootCard} first /> 23 24 {cards.map((card, index) => (

+21

components/Media.tsx

··· 1 1 + import { useIsInitialRender, useIsMobile } from "src/hooks/isMobile"; 2 2 + 3 3 + export function Media(props: { 4 4 + mobile: boolean; 5 5 + children: React.ReactNode; 6 6 + className: string; 7 7 + }) { 8 8 + let initialRender = useIsInitialRender(); 9 9 + let isMobile = useIsMobile(); 10 10 + if (initialRender) 11 11 + return ( 12 12 + <div 13 13 + className={`${props.mobile ? "sm:hidden" : "hidden sm:block"} ${props.className}`} 14 14 + > 15 15 + {props.children} 16 16 + </div> 17 17 + ); 18 18 + if ((isMobile && props.mobile) || (!isMobile && !props.mobile)) 19 19 + return <div className={props.className}>{props.children}</div>; 20 20 + return null; 21 21 + }

+14

components/MobileFooter.tsx

··· 1 1 + "use client"; 2 2 + import { Media } from "./Media"; 3 3 + import { ThemePopover } from "./ThemeManager/ThemeSetter"; 4 4 + 5 5 + export function MobileFooter(props: { entityID: string }) { 6 6 + return ( 7 7 + <Media 8 8 + mobile 9 9 + className="w-full pb-2 px-2 -mt-6 flex gap-2 flex-row-reverse items-center z-10" 10 10 + > 11 11 + <ThemePopover entityID={props.entityID} /> 12 12 + </Media> 13 13 + ); 14 14 + }

+1 -1

src/hooks/isMobile.ts

··· 20 20 }; 21 21 } 22 22 23 23 - function useWindowDimensions() { 23 23 + export function useWindowDimensions() { 24 24 const [windowDimensions, setWindowDimensions] = useState( 25 25 getWindowDimensions(), 26 26 );