From a6232849e374c97507a491359c4b2daf633ad0e2 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Thu, 21 Nov 2024 06:40:22 +0000
Subject: [PATCH] feat(mobile): doc property journal duplicated action (#8820)

---
 .../doc-properties/types/journal.tsx          | 32 ++++++++++++-------
 .../detail/menu/journal-conflicts.tsx         | 17 ++++++++++
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/core/src/components/doc-properties/types/journal.tsx b/packages/frontend/core/src/components/doc-properties/types/journal.tsx
index d30af8fbce..8cd69c3794 100644
--- a/packages/frontend/core/src/components/doc-properties/types/journal.tsx
+++ b/packages/frontend/core/src/components/doc-properties/types/journal.tsx
@@ -1,4 +1,5 @@
 import { Checkbox, DatePicker, Menu, PropertyValue } from '@affine/component';
+import { MobileJournalConflictList } from '@affine/core/mobile/pages/workspace/detail/menu/journal-conflicts';
 import { JournalService } from '@affine/core/modules/journal';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
@@ -15,6 +16,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as styles from './journal.css';
 import type { PropertyValueProps } from './types';
 
+const stopPropagation = (e: React.MouseEvent) => e.stopPropagation();
 export const JournalValue = ({ onChange }: PropertyValueProps) => {
   const t = useI18n();
 
@@ -75,10 +77,6 @@ export const JournalValue = ({ onChange }: PropertyValueProps) => {
 
   const handleOpenDuplicate = useCallback(
     (e: React.MouseEvent) => {
-      // todo: open duplicate dialog for mobile
-      if (BUILD_CONFIG.isMobileEdition) {
-        return;
-      }
       e.stopPropagation();
       workbench.openSidebar();
       view.activeSidebarTab('journal');
@@ -141,13 +139,25 @@ export const JournalValue = ({ onChange }: PropertyValueProps) => {
         ) : null}
 
         {checked && conflict ? (
-          <div
-            data-testid="conflict-tag"
-            className={styles.duplicateTag}
-            onClick={handleOpenDuplicate}
-          >
-            {t['com.affine.page-properties.property.journal-duplicated']()}
-          </div>
+          BUILD_CONFIG.isMobileEdition ? (
+            <Menu items={<MobileJournalConflictList date={selectedDate} />}>
+              <div
+                data-testid="conflict-tag"
+                className={styles.duplicateTag}
+                onClick={stopPropagation}
+              >
+                {t['com.affine.page-properties.property.journal-duplicated']()}
+              </div>
+            </Menu>
+          ) : (
+            <div
+              data-testid="conflict-tag"
+              className={styles.duplicateTag}
+              onClick={handleOpenDuplicate}
+            >
+              {t['com.affine.page-properties.property.journal-duplicated']()}
+            </div>
+          )
         ) : null}
       </div>
     </PropertyValue>
diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/menu/journal-conflicts.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/menu/journal-conflicts.tsx
index dbcc6f85b9..2096b4568b 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/detail/menu/journal-conflicts.tsx
+++ b/packages/frontend/core/src/mobile/pages/workspace/detail/menu/journal-conflicts.tsx
@@ -112,6 +112,23 @@ const ConflictList = ({ docRecords }: { docRecords: DocRecord[] }) => {
   ));
 };
 
+export const MobileJournalConflictList = ({ date }: { date: string }) => {
+  const docRecordList = useService(DocsService).list;
+  const journalService = useService(JournalService);
+  const docs = useLiveData(
+    useMemo(() => journalService.journalsByDate$(date), [journalService, date])
+  );
+  const docRecords = useLiveData(
+    docRecordList.docs$.map(records =>
+      records.filter(v => {
+        return docs.some(doc => doc.id === v.id);
+      })
+    )
+  );
+
+  return <ConflictList docRecords={docRecords} />;
+};
+
 const ConflictListMenuItem = ({ docRecords }: { docRecords: DocRecord[] }) => {
   const t = useI18n();
   return (