feat: implement document history ui modal

src/@types/translations/en.json

@@ -1938,6 +1938,7 @@
       "timeHintTextInTwelveHour": "01:00 PM",
       "timeHintTextInTwentyFourHour": "13:00"
     },
+
     "creating": "Creating...",
     "slashMenu": {
       "board": {
@@ -3601,5 +3602,19 @@
   "other_users": "Other users ({{count}})",
   "connecting": "Connecting...",
   "disconnected": "Disconnected from cloud. Reconnect to sync changes.",
-  "reconnect": "Reconnect"
+  "reconnect": "Reconnect",
+  "versionHistory": {
+    "versionHistory": "Version History",
+    "all": "All",
+    "last7Days": "Last 7 days",
+    "last30Days": "Last 30 days",
+    "last60Days": "Last 60 days",
+    "onlyYours": "Only yours",
+    "restore": "Restore",
+    "currentVersion": "Current version",
+    "restoredFrom": "Restored from {}",
+    "more": "More...",
+    "upgrade": "Upgrade",
+    "forLongerVersionHistory": "for longer version history"
+  }
 }

src/application/collab-version.type.ts

@@ -11,12 +11,11 @@ export interface CollabVersionRecord {
   parentId: string | null;
   name: string | null;
   createdAt: Date;
-  snapshot: Uint8Array | null;
   editors: number[]
 }
 
 export interface EncodedCollab {
   stateVector: Uint8Array,
   docState: Uint8Array,
   version: string | null
-}
+}

src/application/services/js-services/history.ts

@@ -27,5 +27,5 @@ export interface CollabVersion {
  */
 export const collabVersions = async (workspaceId: string, viewId: string) => {
   //TODO: join editors with user data (preferably cached locally)
-  await getCollabVersions(workspaceId, viewId)
-}
+  return getCollabVersions(workspaceId, viewId)
+}

src/application/services/js-services/http/http_api.ts

@@ -772,6 +772,7 @@ export async function getCollabVersions(workspaceId: string, objectId: string, s
       created_at: string,
       created_by: number | null,
       is_deleted: boolean
+      editors: number[],
     }[];
     message: string;
   }>(url, {
@@ -790,13 +791,15 @@ export async function getCollabVersions(workspaceId: string, objectId: string, s
       parentId: data.parent,
       name: data.name,
       createdAt: new Date(data.created_at),
-      isDeleted: data.is_deleted
+      isDeleted: data.is_deleted,
+      editors: data.editors,
     };
   });
 }
 
 export async function previewCollabVersion(workspaceId: string, objectId: string, version: string, collabType: Types) {
   const url = `/{workspace_id}/collab/${objectId}/history/${version}?collab_type=${collabType}`;
+
   return await axiosInstance?.get(url, {
     responseType: 'arraybuffer'
   }).then((response) => {

src/application/services/js-services/index.ts

@@ -763,6 +763,10 @@ export class AFClientService implements AFService {
     return APIService.getCollabVersions(workspaceId, viewId, since);
   }
 
+  async previewCollabVersion(workspaceId: string, viewId: string, versionId: string, collabType: Types) {
+    return APIService.previewCollabVersion(workspaceId, viewId, versionId, collabType);
+  }
+
   async createCollabVersion(workspaceId: string, viewId: string, name: string, snapshot: Uint8Array) {
     return APIService.createCollabVersion(workspaceId, viewId, name, snapshot);
   }

src/application/services/services.type.ts

@@ -262,7 +262,8 @@ export interface AIChatService {
 
 export interface CollabHistoryService {
   getCollabHistory: (workspaceId: string, viewId: string, since?: Date) => Promise<CollabVersionRecord[]>;
+  previewCollabVersion: (workspaceId: string, viewId: string, versionId: string, collabType: Types) => Promise<Uint8Array | undefined>;
   createCollabVersion: (workspaceId: string, viewId: string, name: string, snapshot: Uint8Array) => Promise<string>;
   deleteCollabVersion: (workspaceId: string, viewId: string, versionId: string) => Promise<void>;
   revertCollabVersion: (workspaceId: string, viewId: string, collabType: Types, versionId: string) => Promise<EncodedCollab>;
-}
+}

src/components/app/app.hooks.tsx

@@ -3,6 +3,7 @@ import EventEmitter from 'events';
 import React, { createContext, useContext } from 'react';
 import { Awareness } from 'y-protocols/awareness';
 
+import { CollabVersionRecord } from '@/application/collab-version.type';
 import {
   AppendBreadcrumb,
   CreateDatabaseViewPayload,
@@ -27,6 +28,7 @@ import {
   UserWorkspaceInfo,
   View,
   ViewIconType,
+  YDoc,
 } from '@/application/types';
 import LoadingDots from '@/components/_shared/LoadingDots';
 import { findView } from '@/components/_shared/outline/utils';
@@ -92,6 +94,9 @@ export interface AppContextType {
   checkIfRowDocumentExists?: (documentId: string) => Promise<boolean>;
   getViewIdFromDatabaseId?: (databaseId: string) => Promise<string | null>;
   loadMentionableUsers?: () => Promise<MentionablePerson[]>;
+  getCollabHistory?: (viewId: string) => Promise<CollabVersionRecord[]>;
+  previewCollabVersion?: (viewId: string, versionId: string) => Promise<YDoc | undefined>;
+  revertCollabVersion?: (viewId: string, versionId: string) => Promise<void>;
 }
 
 // Main AppContext - same as original
@@ -283,6 +288,9 @@ export function useAppHandlers() {
     updatePageIcon: context.updatePageIcon,
     updatePageName: context.updatePageName,
     getViewIdFromDatabaseId: context.getViewIdFromDatabaseId,
+    getCollabHistory: context.getCollabHistory,
+    previewCollabVersion: context.previewCollabVersion,
+    revertCollabVersion: context.revertCollabVersion,
     loadMentionableUsers: context.loadMentionableUsers,
   };
 }

src/components/app/contexts/BusinessInternalContext.ts

@@ -1,5 +1,6 @@
 import { createContext, useContext } from 'react';
 
+import { CollabVersionRecord } from '@/application/collab-version.type';
 import {
   View,
   TextCount,
@@ -23,6 +24,8 @@ import {
   Subscription,
   MentionablePerson,
   UIVariant,
+  YDoc,
+  Types,
 } from '@/application/types';
 
 // Internal context for business layer
@@ -101,6 +104,11 @@ export interface BusinessInternalContextType {
   // Word count
   wordCount?: Record<string, TextCount>;
   setWordCount?: (viewId: string, count: TextCount) => void;
+
+  // Collaboration history
+  getCollabHistory?: (viewId: string, since?: Date | undefined) => Promise<CollabVersionRecord[]>;
+  previewCollabVersion?: (viewId: string, versionId: string, collabType: Types) => Promise<YDoc | undefined>;
+  revertCollabVersion?: (viewId: string, versionId: string, collabType: Types) => Promise<void>;
 }
 
 export const BusinessInternalContext = createContext<BusinessInternalContextType | null>(null);

src/components/app/contexts/SyncInternalContext.ts

@@ -14,7 +14,7 @@ export interface SyncInternalContextType {
   webSocket: AppflowyWebSocketType; // WebSocket connection from useAppflowyWebSocket
   broadcastChannel: BroadcastChannelType; // BroadcastChannel from useBroadcastChannel
   registerSyncContext: (params: RegisterSyncContext) => SyncContext;
-  revertCollabVersion: (viewId: string, version: string) => void;
+  revertCollabVersion: (viewId: string, version: string) => Promise<void>;
   eventEmitter: EventEmitter;
   awarenessMap: Record<string, Awareness>;
   lastUpdatedCollab: UpdateCollabInfo | null;
@@ -31,4 +31,4 @@ export function useSyncInternal() {
   }
 
   return context;
-}
+}

src/components/app/header/MoreActions.tsx

@@ -8,6 +8,7 @@ import { findViewInShareWithMe } from '@/components/_shared/outline/utils';
 import { useAIChatContext } from '@/components/ai-chat/AIChatProvider';
 import { useAppOutline, useAppView, useCurrentWorkspaceId, useUserWorkspaceInfo } from '@/components/app/app.hooks';
 import DocumentInfo from '@/components/app/header/DocumentInfo';
+import { DocumentHistoryModal } from '@/components/document/history/DocumentHistoryModal';
 import { useService } from '@/components/main/app.hooks';
 import { Button } from '@/components/ui/button';
 import {
@@ -36,6 +37,7 @@ function MoreActions({
   const { selectionMode, onOpenSelectionMode } = useAIChatContext();
   const [hasMessages, setHasMessages] = useState(false);
   const [open, setOpen] = useState(false);
+  const [historyOpen, setHistoryOpen] = useState(false);
   const outline = useAppOutline();
 
   const view = useAppView(viewId);
@@ -93,6 +95,23 @@ function MoreActions({
     ) : null;
   }, [view?.layout, hasMessages, t, onOpenSelectionMode, handleClose]);
 
+  const handleOpenHistory = useCallback(() => {
+    handleClose();
+    setHistoryOpen(true);
+  }, [handleClose]);
+
+  useEffect(() => {
+    setHistoryOpen(false);
+  }, [viewId]);
+
+  const showHistory = view?.layout === ViewLayout.Document;
+
+  useEffect(() => {
+    if (!showHistory && historyOpen) {
+      setHistoryOpen(false);
+    }
+  }, [showHistory, historyOpen]);
+
   const shareWithMeView = useMemo(() => {
     return findViewInShareWithMe(outline || [], viewId);
   }, [outline, viewId]);
@@ -102,31 +121,37 @@ function MoreActions({
   }
 
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button data-testid='page-more-actions' size={'icon'} variant={'ghost'} className={'text-icon-secondary'}>
-          <MoreIcon />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent {...menuContentProps}>
-        <DropdownMenuGroup>{ChatOptions}</DropdownMenuGroup>
-
-        {role === Role.Guest || shareWithMeView ? null : (
-          <>
-            <MoreActionsContent
-              itemClicked={() => {
-                handleClose();
-              }}
-              onDeleted={onDeleted}
-              viewId={viewId}
-            />
-            <DropdownMenuSeparator />
-          </>
-        )}
-
-        <DocumentInfo viewId={viewId} />
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button data-testid='page-more-actions' size={'icon'} variant={'ghost'} className={'text-icon-secondary'}>
+            <MoreIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent {...menuContentProps}>
+          <DropdownMenuGroup>{ChatOptions}</DropdownMenuGroup>
+
+          {role === Role.Guest || shareWithMeView ? null : (
+            <>
+              <MoreActionsContent
+                itemClicked={() => {
+                  handleClose();
+                }}
+                onDeleted={onDeleted}
+                viewId={viewId}
+                onOpenHistory={showHistory ? handleOpenHistory : undefined}
+              />
+              <DropdownMenuSeparator />
+            </>
+          )}
+
+          <DocumentInfo viewId={viewId} />
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {showHistory && (
+        <DocumentHistoryModal open={historyOpen} onOpenChange={setHistoryOpen} viewId={viewId} view={view} />
+      )}
+    </>
   );
 }