fix: make nested lists work in PDF renderer, resolves #2993

apps/web/src/components/resume/use-resume.ts

@@ -1,7 +1,6 @@
 import type { ResumeData } from "@reactive-resume/schema/resume/data";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
 import type { WritableDraft } from "immer";
-import type { TemporalState } from "zundo";
 import { t } from "@lingui/core/macro";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useParams } from "@tanstack/react-router";
@@ -12,7 +11,6 @@ import { toast } from "sonner";
 import { temporal } from "zundo";
 import { immer } from "zustand/middleware/immer";
 import { create } from "zustand/react";
-import { useStoreWithEqualityFn } from "zustand/traditional";
 import { orpc } from "@/libs/orpc/client";
 
 type Resume = {
@@ -220,10 +218,6 @@ export const useResumeStore = create<ResumeStore>()(
 	),
 );
 
-function useTemporalStore<T>(selector: (state: TemporalState<PartializedState>) => T): T {
-	return useStoreWithEqualityFn(useResumeStore.temporal, selector);
-}
-
 export function useInitializeResumeStore() {
 	return useResumeStore((state) => state.initialize);
 }
@@ -330,29 +324,6 @@ export function useUpdateResumeData() {
 	);
 }
 
-export function useResumeHistory() {
-	const canUndo = useTemporalStore((state) => state.pastStates.length > 0);
-	const canRedo = useTemporalStore((state) => state.futureStates.length > 0);
-
-	const undo = useCallback(() => {
-		const before = useResumeStore.getState().resume;
-		if (!before) return;
-
-		useResumeStore.temporal.getState().undo();
-		syncCurrentResume(before.id);
-	}, []);
-
-	const redo = useCallback(() => {
-		const before = useResumeStore.getState().resume;
-		if (!before) return;
-
-		useResumeStore.temporal.getState().redo();
-		syncCurrentResume(before.id);
-	}, []);
-
-	return { undo, redo, canUndo, canRedo };
-}
-
 export function useResumeCleanup() {
 	const params = useParams({ strict: false }) as { resumeId?: string };
 	const resumeId = params.resumeId;

apps/web/src/routes/builder/$resumeId/-components/dock.tsx

@@ -1,8 +1,9 @@
 import type { Icon } from "@phosphor-icons/react";
+import type { BuilderPreviewPageLayout } from "./page-layout";
 import { t } from "@lingui/core/macro";
 import {
-	ArrowUUpLeftIcon,
-	ArrowUUpRightIcon,
+	AlignCenterHorizontalIcon,
+	AlignTopIcon,
 	CircleNotchIcon,
 	CubeFocusIcon,
 	FileDocIcon,
@@ -12,7 +13,6 @@ import {
 	MagnifyingGlassMinusIcon,
 	MagnifyingGlassPlusIcon,
 } from "@phosphor-icons/react";
-import { useHotkeys } from "@tanstack/react-hotkeys";
 import { motion } from "motion/react";
 import { useCallback, useMemo, useState } from "react";
 import { useControls } from "react-zoom-pan-pinch";
@@ -23,11 +23,16 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@reactive-resume/ui/com
 import { downloadWithAnchor, generateFilename } from "@reactive-resume/utils/file";
 import { buildDocx } from "@reactive-resume/utils/resume/docx";
 import { cn } from "@reactive-resume/utils/style";
-import { useCurrentResume, useResumeHistory } from "@/components/resume/use-resume";
+import { useCurrentResume } from "@/components/resume/use-resume";
 import { authClient } from "@/libs/auth/client";
 import { createResumePdfBlob } from "@/libs/resume/pdf-document";
 
-export function BuilderDock() {
+type BuilderDockProps = {
+	pageLayout: BuilderPreviewPageLayout;
+	onTogglePageLayout: () => void;
+};
+
+export function BuilderDock({ pageLayout, onTogglePageLayout }: BuilderDockProps) {
 	const { data: session } = authClient.useSession();
 	const resume = useCurrentResume();
 
@@ -36,13 +41,6 @@ export function BuilderDock() {
 
 	const [isPrinting, setIsPrinting] = useState(false);
 
-	const { undo, redo, canUndo, canRedo } = useResumeHistory();
-
-	useHotkeys([
-		{ hotkey: "Mod+Z", callback: () => undo() },
-		{ hotkey: "Mod+Y", callback: () => redo() },
-	]);
-
 	const publicUrl = useMemo(() => {
 		if (!session?.user.username || !resume?.slug) return "";
 		return `${window.location.origin}/${session.user.username}/${resume.slug}`;
@@ -102,28 +100,14 @@ export function BuilderDock() {
 				transition={{ duration: 0.2, ease: "easeOut" }}
 				className="flex items-center rounded-r-full rounded-l-full bg-popover px-2 shadow-xl will-change-[transform,opacity]"
 			>
-				<DockIcon
-					disabled={!canUndo}
-					onClick={() => undo()}
-					icon={ArrowUUpLeftIcon}
-					title={t({
-						context: "'Ctrl' may be replaced with the locale-specific equivalent (e.g. 'Strg' for QWERTZ layouts).",
-						message: "Undo (Ctrl+Z)",
-					})}
-				/>
-				<DockIcon
-					disabled={!canRedo}
-					onClick={() => redo()}
-					icon={ArrowUUpRightIcon}
-					title={t({
-						context: "'Ctrl' may be replaced with the locale-specific equivalent (e.g. 'Strg' for QWERTZ layouts).",
-						message: "Redo (Ctrl+Y)",
-					})}
-				/>
-				<div className="mx-1 h-8 w-px bg-border" />
 				<DockIcon icon={MagnifyingGlassPlusIcon} title={t`Zoom in`} onClick={() => zoomIn(0.1)} />
 				<DockIcon icon={MagnifyingGlassMinusIcon} title={t`Zoom out`} onClick={() => zoomOut(0.1)} />
 				<DockIcon icon={CubeFocusIcon} title={t`Center view`} onClick={() => centerView()} />
+				<DockIcon
+					icon={pageLayout === "horizontal" ? AlignTopIcon : AlignCenterHorizontalIcon}
+					title={t`Toggle page stacking`}
+					onClick={onTogglePageLayout}
+				/>
 				<div className="mx-1 h-8 w-px bg-border" />
 				<DockIcon icon={LinkSimpleIcon} title={t`Copy URL`} onClick={() => onCopyUrl()} />
 				<DockIcon icon={FileJsIcon} title={t`Download JSON`} onClick={() => onDownloadJSON()} />

apps/web/src/routes/builder/$resumeId/-components/page-layout.ts

@@ -0,0 +1,6 @@
+export type BuilderPreviewPageLayout = "horizontal" | "vertical";
+
+export const DEFAULT_BUILDER_PREVIEW_PAGE_LAYOUT: BuilderPreviewPageLayout = "horizontal";
+
+export const getNextBuilderPreviewPageLayout = (pageLayout: BuilderPreviewPageLayout): BuilderPreviewPageLayout =>
+	pageLayout === "horizontal" ? "vertical" : "horizontal";

apps/web/src/routes/builder/$resumeId/-components/preview-page.tsx

@@ -1,14 +1,17 @@
 import { t } from "@lingui/core/macro";
 import { FloppyDiskIcon } from "@phosphor-icons/react";
 import { useHotkey } from "@tanstack/react-hotkeys";
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { toast } from "sonner";
 import { LoadingScreen } from "@/components/layout/loading-screen";
 import { ResumePreview } from "@/components/resume/preview";
 import { BuilderDock } from "./dock";
+import { DEFAULT_BUILDER_PREVIEW_PAGE_LAYOUT, getNextBuilderPreviewPageLayout } from "./page-layout";
 
 export function PreviewPage() {
+	const [pageLayout, setPageLayout] = useState(DEFAULT_BUILDER_PREVIEW_PAGE_LAYOUT);
+
 	useHotkey("Mod+S", () => {
 		toast.info(t`Your changes are saved automatically.`, { id: "auto-save", icon: <FloppyDiskIcon /> });
 	});
@@ -25,10 +28,15 @@ export function PreviewPage() {
 					wheel={{ step: 0.001 }}
 				>
 					<TransformComponent wrapperClass="h-full! w-full!">
-						<ResumePreview pageGap="2rem" showPageNumbers />
+						<ResumePreview pageGap="2rem" pageLayout={pageLayout} showPageNumbers />
 					</TransformComponent>
 
-					<BuilderDock />
+					<BuilderDock
+						pageLayout={pageLayout}
+						onTogglePageLayout={() => {
+							setPageLayout((current) => getNextBuilderPreviewPageLayout(current));
+						}}
+					/>
 				</TransformWrapper>
 			</div>
 		</Suspense>