+2

app/[doc_id]/page.tsx

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

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

+3 -2

components/Cards.tsx

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

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

+21

components/Media.tsx

··· 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

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

+14

components/MobileFooter.tsx

··· 0 0 0 0 0 0 0 0 0 0 0 0 0 0

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

+1 -1

src/hooks/isMobile.ts

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

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