From db52b6036e4579b669c5791d824354f3dbf8d0ba Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sun, 1 Feb 2026 18:01:24 +0000
Subject: [PATCH] add diff to mobile

---
 .../components/history-modal-mobile.tsx       | 50 ++++++++++++-------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/features/page-history/components/history-modal-mobile.tsx b/apps/client/src/features/page-history/components/history-modal-mobile.tsx
index 84e51cde..0c955937 100644
--- a/apps/client/src/features/page-history/components/history-modal-mobile.tsx
+++ b/apps/client/src/features/page-history/components/history-modal-mobile.tsx
@@ -1,5 +1,6 @@
 import {
   ActionIcon,
+  Badge,
   Box,
   Button,
   Group,
@@ -191,26 +192,39 @@ export default function HistoryModalMobile({ pageId, pageTitle }: Props) {
   return (
     <Box className={classes.container}>
       <Box className={classes.selectorWrapper}>
-        <Select
-          data={selectData}
-          value={activeHistoryId}
-          onChange={handleSelectVersion}
-          placeholder={t("Select version")}
-          checkIconPosition="right"
-          maxDropdownHeight={300}
-          renderOption={({ option, checked }) => (
-            <Group justify="space-between" wrap="nowrap" w="100%">
-              <div>
-                <Text size="sm">{option.label}</Text>
-                <Text size="xs" c="dimmed">
-                  {(option as { userName?: string }).userName}
-                </Text>
-              </div>
-              {checked && <IconCheck size={16} />}
+        <Group gap="sm" wrap="nowrap">
+          <Select
+            data={selectData}
+            value={activeHistoryId}
+            onChange={handleSelectVersion}
+            placeholder={t("Select version")}
+            checkIconPosition="right"
+            maxDropdownHeight={300}
+            renderOption={({ option, checked }) => (
+              <Group justify="space-between" wrap="nowrap" w="100%">
+                <div>
+                  <Text size="sm">{option.label}</Text>
+                  <Text size="xs" c="dimmed">
+                    {(option as { userName?: string }).userName}
+                  </Text>
+                </div>
+                {checked && <IconCheck size={16} />}
+              </Group>
+            )}
+            comboboxProps={{ withinPortal: false }}
+            style={{ flex: 1 }}
+          />
+          {diffCounts && (
+            <Group gap={4} wrap="nowrap">
+              <Badge variant="filled" color="green" size="sm">
+                +{diffCounts.added}
+              </Badge>
+              <Badge variant="filled" color="red" size="sm">
+                -{diffCounts.deleted}
+              </Badge>
             </Group>
           )}
-          comboboxProps={{ withinPortal: false }}
-        />
+        </Group>
       </Box>
 
       <ScrollArea