From ee6b183c4952588fbe7fd017ee588344b71ee9c1 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Tue, 11 Aug 2026 20:57:01 +0100
Subject: [PATCH] feat(client): add compare state atoms for page history

---
 .../page-history/atoms/history-atoms.ts       |  5 ++++
 .../page-history/hooks/use-history-reset.ts   | 29 +++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/features/page-history/atoms/history-atoms.ts b/apps/client/src/features/page-history/atoms/history-atoms.ts
index 2acf163d5..900321ee6 100644
--- a/apps/client/src/features/page-history/atoms/history-atoms.ts
+++ b/apps/client/src/features/page-history/atoms/history-atoms.ts
@@ -7,3 +7,8 @@ export const highlightChangesAtom = atom<boolean>(true);
 
 export type DiffCounts = { added: number; deleted: number; total: number };
 export const diffCountsAtom = atom<DiffCounts | null>(null);
+
+export type ComparePair = { newerId: string; olderId: string };
+export const compareModeAtom = atom<boolean>(false);
+export const compareSelectionAtom = atom<string[]>([]);
+export const comparePairAtom = atom<ComparePair | null>(null);
diff --git a/apps/client/src/features/page-history/hooks/use-history-reset.ts b/apps/client/src/features/page-history/hooks/use-history-reset.ts
index 15ae05874..acaafcf0f 100644
--- a/apps/client/src/features/page-history/hooks/use-history-reset.ts
+++ b/apps/client/src/features/page-history/hooks/use-history-reset.ts
@@ -3,22 +3,47 @@ import { useEffect } from "react";
 import {
   activeHistoryIdAtom,
   activeHistoryPrevIdAtom,
+  compareModeAtom,
+  comparePairAtom,
+  compareSelectionAtom,
   diffCountsAtom,
 } from "@/features/page-history/atoms/history-atoms";
 
 /**
  * Resets history state when pageId changes.
- * Clears active selection and diff counts.
+ * Clears active selection, diff counts, and compare state.
+ * Compare state also resets on unmount so reopening the modal starts clean.
  */
 export function useHistoryReset(pageId: string) {
   const [, setActiveHistoryId] = useAtom(activeHistoryIdAtom);
   const [, setActiveHistoryPrevId] = useAtom(activeHistoryPrevIdAtom);
   const [, setDiffCounts] = useAtom(diffCountsAtom);
+  const [, setCompareMode] = useAtom(compareModeAtom);
+  const [, setCompareSelection] = useAtom(compareSelectionAtom);
+  const [, setComparePair] = useAtom(comparePairAtom);
 
   useEffect(() => {
+    const resetCompare = () => {
+      setCompareMode(false);
+      setCompareSelection([]);
+      // @ts-ignore
+      setComparePair(null);
+    };
+
     setActiveHistoryId("");
     setActiveHistoryPrevId("");
     // @ts-ignore
     setDiffCounts(null);
-  }, [pageId, setActiveHistoryId, setActiveHistoryPrevId, setDiffCounts]);
+    resetCompare();
+
+    return resetCompare;
+  }, [
+    pageId,
+    setActiveHistoryId,
+    setActiveHistoryPrevId,
+    setDiffCounts,
+    setCompareMode,
+    setCompareSelection,
+    setComparePair,
+  ]);
 }