From 3f9b6e1380254fa16e35d2e3e140c373cd0738c3 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Wed, 22 Nov 2023 20:42:34 +0000
Subject: [PATCH] feat: page history

---
 client/package.json                           |   2 +-
 client/src/components/aside/aside.tsx         |  42 ++++++-
 client/src/components/layouts/header.tsx      |  40 +++---
 client/src/components/layouts/shell.tsx       |  36 ++++--
 .../components/navbar/atoms/sidebar-atom.ts   |  14 ++-
 client/src/components/ui/user-avatar.tsx      |  34 +++++
 .../src/features/editor/atoms/editorAtom.ts   |   5 +
 .../components/bubble-menu/bubble-menu.tsx    |   4 +-
 .../components/bubble-menu/node-selector.tsx  |   6 +-
 .../components/slash-menu/command-list.tsx    |   3 +-
 .../editor/components/slash-menu/types.ts     |   4 +-
 client/src/features/editor/editor.tsx         | 118 +++++-------------
 client/src/features/editor/extensions.ts      |   6 +
 .../editor/extensions/comment/comment.ts      |   1 +
 client/src/features/editor/full-editor.tsx    |  20 +++
 client/src/features/editor/title-editor.tsx   |  75 +++++++++++
 .../home/components/recent-changes.tsx        |   4 +-
 .../page-history/atoms/history-atoms.ts       |   4 +
 .../components/history-editor.tsx             |  33 +++++
 .../page-history/components/history-item.tsx  |  40 ++++++
 .../page-history/components/history-list.tsx  |  85 +++++++++++++
 .../components/history-modal-body.tsx         |  27 ++++
 .../page-history/components/history-modal.tsx |  27 ++++
 .../page-history/components/history-view.tsx  |  26 ++++
 .../components/history.module.css             |  37 ++++++
 .../queries/page-history-query.ts             |  20 +++
 .../services/page-history-service.ts          |  12 ++
 .../features/page-history/types/page.types.ts |  21 ++++
 .../src/features/page/queries/page-query.ts   |   3 +-
 .../page/tree/hooks/use-persistence.ts        |   2 +-
 .../settings/modal/settings-modal.tsx         |   2 +-
 client/src/hooks/use-match-path.tsx           |  16 +++
 client/src/hooks/use-toggle-aside.tsx         |  18 +++
 client/src/pages/page/page.tsx                |  18 ++-
 server/package.json                           |   5 +-
 .../collaboration/collaboration.gateway.ts    |   8 +-
 .../src/collaboration/collaboration.module.ts |   2 +
 .../extensions/history.extension.ts           |  64 ++++++++++
 .../extensions/persistence.extension.ts       |   3 +-
 server/src/core/page/dto/create-page.dto.ts   |   4 -
 .../src/core/page/dto/history-details.dto.ts  |   6 +
 server/src/core/page/dto/page-history.dto.ts  |   6 +
 .../core/page/entities/page-history.entity.ts |  63 ++++++++++
 server/src/core/page/entities/page.entity.ts  |   4 +
 server/src/core/page/page.controller.ts       |  18 ++-
 server/src/core/page/page.module.ts           |  15 ++-
 .../repositories/page-history.repository.ts   |  26 ++++
 .../core/page/repositories/page.repository.ts |  62 +++++----
 .../page/services/page-history.service.ts     |  61 +++++++++
 server/src/core/page/services/page.service.ts |  43 ++++---
 50 files changed, 995 insertions(+), 200 deletions(-)
 create mode 100644 client/src/components/ui/user-avatar.tsx
 create mode 100644 client/src/features/editor/full-editor.tsx
 create mode 100644 client/src/features/editor/title-editor.tsx
 create mode 100644 client/src/features/page-history/atoms/history-atoms.ts
 create mode 100644 client/src/features/page-history/components/history-editor.tsx
 create mode 100644 client/src/features/page-history/components/history-item.tsx
 create mode 100644 client/src/features/page-history/components/history-list.tsx
 create mode 100644 client/src/features/page-history/components/history-modal-body.tsx
 create mode 100644 client/src/features/page-history/components/history-modal.tsx
 create mode 100644 client/src/features/page-history/components/history-view.tsx
 create mode 100644 client/src/features/page-history/components/history.module.css
 create mode 100644 client/src/features/page-history/queries/page-history-query.ts
 create mode 100644 client/src/features/page-history/services/page-history-service.ts
 create mode 100644 client/src/features/page-history/types/page.types.ts
 create mode 100644 client/src/hooks/use-match-path.tsx
 create mode 100644 client/src/hooks/use-toggle-aside.tsx
 create mode 100644 server/src/collaboration/extensions/history.extension.ts
 create mode 100644 server/src/core/page/dto/history-details.dto.ts
 create mode 100644 server/src/core/page/dto/page-history.dto.ts
 create mode 100644 server/src/core/page/entities/page-history.entity.ts
 create mode 100644 server/src/core/page/repositories/page-history.repository.ts
 create mode 100644 server/src/core/page/services/page-history.service.ts

diff --git a/client/package.json b/client/package.json
index ae7c6682..38dbb018 100644
--- a/client/package.json
+++ b/client/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview --port 3000"
   },
   "dependencies": {
-    "@hocuspocus/provider": "^2.7.1",
+    "@hocuspocus/provider": "^2.8.1",
     "@mantine/core": "^7.2.2",
     "@mantine/form": "^7.2.2",
     "@mantine/hooks": "^7.2.2",
diff --git a/client/src/components/aside/aside.tsx b/client/src/components/aside/aside.tsx
index 3c8bfe87..04c3d1ae 100644
--- a/client/src/components/aside/aside.tsx
+++ b/client/src/components/aside/aside.tsx
@@ -1,11 +1,41 @@
-import React, { Suspense } from 'react';
-
-const Comments = React.lazy(() => import('@/features/comment/comments'));
+import { Box, ScrollArea, Text, useMantineTheme } from '@mantine/core';
+import CommentList from '@/features/comment/components/comment-list';
+import { useAtom } from 'jotai';
+import { asideStateAtom } from '@/components/navbar/atoms/sidebar-atom';
+import React from 'react';
 
 export default function Aside() {
+  const theme = useMantineTheme();
+  const [{ tab }] = useAtom(asideStateAtom);
+
+  let title;
+  let component;
+
+  switch (tab) {
+    case 'comments':
+      component = <CommentList />;
+      title = 'Comments';
+      break;
+    default:
+      component = null;
+      title = null;
+  }
+
+
   return (
-    <Suspense fallback={<div>Loading comments...</div>}>
-      <Comments />
-    </Suspense>
+    <Box p="md" bg={theme.colors?.gray[1]}>
+      {component && (
+        <>
+          <Text mb="md" fw={500}>{title}</Text>
+
+          <ScrollArea style={{ height: '85vh' }} scrollbarSize={5} type="scroll">
+            <div style={{ paddingBottom: '200px' }}>
+              {component}
+
+            </div>
+          </ScrollArea>
+        </>
+      )}
+    </Box>
   );
 }
diff --git a/client/src/components/layouts/header.tsx b/client/src/components/layouts/header.tsx
index 5b173db9..e05cc82c 100644
--- a/client/src/components/layouts/header.tsx
+++ b/client/src/components/layouts/header.tsx
@@ -2,7 +2,6 @@ import {
   ActionIcon,
   Menu,
   Button,
-  rem,
 } from '@mantine/core';
 import {
   IconDots,
@@ -15,15 +14,20 @@ import {
   IconMessage,
 } from '@tabler/icons-react';
 import React from 'react';
+import useToggleAside from '@/hooks/use-toggle-aside';
+import { useAtom } from 'jotai';
+import { historyAtoms } from '@/features/page-history/atoms/history-atoms';
 
 export default function Header() {
+  const toggleAside = useToggleAside();
+
   return (
     <>
       <Button variant="default" style={{ border: 'none' }} size="compact-sm">
         Share
       </Button>
 
-      <ActionIcon variant="default" style={{ border: 'none' }}>
+      <ActionIcon variant="default" style={{ border: 'none' }} onClick={() => toggleAside('comments')}>
         <IconMessage size={20} stroke={2} />
       </ActionIcon>
 
@@ -33,6 +37,12 @@ export default function Header() {
 }
 
 function PageActionMenu() {
+  const [, setHistoryModalOpen] = useAtom(historyAtoms);
+
+  const openHistoryModal = () => {
+    setHistoryModalOpen(true);
+  };
+
   return (
     <Menu
       shadow="xl"
@@ -50,43 +60,31 @@ function PageActionMenu() {
 
       <Menu.Dropdown>
         <Menu.Item
-          leftSection={
-            <IconFileInfo style={{ width: rem(14), height: rem(14) }} />
-          }
-        >
+          leftSection={<IconFileInfo size={16} stroke={2} />}>
           Page info
         </Menu.Item>
         <Menu.Item
-          leftSection={<IconLink style={{ width: rem(14), height: rem(14) }} />}
+          leftSection={<IconLink size={16} stroke={2} />}
         >
           Copy link
         </Menu.Item>
         <Menu.Item
-          leftSection={
-            <IconShare style={{ width: rem(14), height: rem(14) }} />
-          }
-        >
+          leftSection={<IconShare size={16} stroke={2} />}>
           Share
         </Menu.Item>
         <Menu.Item
-          leftSection={
-            <IconHistory style={{ width: rem(14), height: rem(14) }} />
-          }
-        >
+          leftSection={<IconHistory size={16} stroke={2} />}
+          onClick={openHistoryModal}>
           Page history
         </Menu.Item>
 
         <Menu.Divider />
         <Menu.Item
-          leftSection={<IconLock style={{ width: rem(14), height: rem(14) }} />}
-        >
+          leftSection={<IconLock size={16} stroke={2} />}>
           Lock
         </Menu.Item>
         <Menu.Item
-          leftSection={
-            <IconTrash style={{ width: rem(14), height: rem(14) }} />
-          }
-        >
+          leftSection={<IconTrash size={16} stroke={2} />}>
           Delete
         </Menu.Item>
       </Menu.Dropdown>
diff --git a/client/src/components/layouts/shell.tsx b/client/src/components/layouts/shell.tsx
index b6c83ea6..2a38862e 100644
--- a/client/src/components/layouts/shell.tsx
+++ b/client/src/components/layouts/shell.tsx
@@ -1,4 +1,4 @@
-import { desktopAsideAtom, desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom';
+import { asideStateAtom, desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom';
 import { useToggleSidebar } from '@/components/navbar/hooks/use-toggle-sidebar';
 import { Navbar } from '@/components/navbar/navbar';
 import { AppShell, Burger, Group } from '@mantine/core';
@@ -8,12 +8,16 @@ import classes from './shell.module.css';
 import Header from '@/components/layouts/header';
 import Breadcrumb from '@/components/layouts/components/breadcrumb';
 import Aside from '@/components/aside/aside';
+import { useMatchPath } from '@/hooks/use-match-path';
+import React from 'react';
 
 export default function Shell({ children }: { children: React.ReactNode }) {
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
   const [desktopOpened] = useAtom(desktopSidebarAtom);
   const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
-  const [desktopAsideOpened] = useAtom(desktopAsideAtom);
+  const matchPath = useMatchPath();
+  const isPageRoute = matchPath('/p/:pageId');
+  const [{ isAsideOpen }] = useAtom(asideStateAtom);
 
   return (
     <AppShell
@@ -24,7 +28,11 @@ export default function Shell({ children }: { children: React.ReactNode }) {
         breakpoint: 'sm',
         collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
       }}
-      aside={{ width: 300, breakpoint: 'md', collapsed: { mobile: true, desktop: !desktopAsideOpened } }}
+      aside={{
+        width: 300,
+        breakpoint: 'md',
+        collapsed: { mobile: (!isAsideOpen), desktop: (!isAsideOpen) },
+      }}
       padding="md"
     >
       <AppShell.Header
@@ -47,13 +55,15 @@ export default function Shell({ children }: { children: React.ReactNode }) {
               size="sm"
             />
 
-            <Breadcrumb />
-          </Group>
-
-          <Group justify="flex-end" h="100%" px="md" wrap="nowrap">
-            <Header />
+            {isPageRoute && <Breadcrumb />}
           </Group>
 
+          {
+            isPageRoute &&
+            <Group justify="flex-end" h="100%" px="md" wrap="nowrap">
+              <Header />
+            </Group>
+          }
         </Group>
 
       </AppShell.Header>
@@ -66,9 +76,13 @@ export default function Shell({ children }: { children: React.ReactNode }) {
         {children}
       </AppShell.Main>
 
-      <AppShell.Aside className={classes.aside}>
-        <Aside />
-      </AppShell.Aside>
+      {
+        isPageRoute &&
+        <AppShell.Aside className={classes.aside}>
+          <Aside />
+        </AppShell.Aside>
+      }
+
     </AppShell>
   );
 }
diff --git a/client/src/components/navbar/atoms/sidebar-atom.ts b/client/src/components/navbar/atoms/sidebar-atom.ts
index 5b392b04..8eeb1710 100644
--- a/client/src/components/navbar/atoms/sidebar-atom.ts
+++ b/client/src/components/navbar/atoms/sidebar-atom.ts
@@ -1,6 +1,16 @@
-import { atomWithWebStorage } from "@/lib/jotai-helper";
+import { atomWithWebStorage } from '@/lib/jotai-helper';
 import { atom } from 'jotai';
 
-export const desktopSidebarAtom = atomWithWebStorage('showSidebar',true);
+export const desktopSidebarAtom = atomWithWebStorage('showSidebar', true);
 
 export const desktopAsideAtom = atom(false);
+
+type AsideStateType = {
+  tab: string,
+  isAsideOpen: boolean,
+}
+
+export const asideStateAtom = atom<AsideStateType>({
+  tab: '',
+  isAsideOpen: false,
+});
diff --git a/client/src/components/ui/user-avatar.tsx b/client/src/components/ui/user-avatar.tsx
new file mode 100644
index 00000000..8a9f5c2b
--- /dev/null
+++ b/client/src/components/ui/user-avatar.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Avatar } from '@mantine/core';
+
+interface UserAvatarProps extends React.ComponentProps<typeof Avatar> {
+  avatarUrl: string;
+  name: string;
+  color?: string;
+  size?: string;
+}
+
+export const UserAvatar = React.forwardRef<HTMLInputElement, UserAvatarProps>(
+  ({ avatarUrl, name, ...props }: UserAvatarProps, ref) => {
+
+    const getInitials = (name: string) => {
+      const names = name.split(' ');
+      return names.slice(0, 2).map(n => n[0]).join('');
+    };
+
+    return (
+      avatarUrl ? (
+        <Avatar
+          ref={ref}
+          src={avatarUrl}
+          alt={name}
+          radius="xl"
+          {...props}
+        />
+      ) : (
+        <Avatar ref={ref}
+                {...props}>{getInitials(name)}</Avatar>
+      )
+    );
+  },
+);
diff --git a/client/src/features/editor/atoms/editorAtom.ts b/client/src/features/editor/atoms/editorAtom.ts
index 86da58b0..aea9c716 100644
--- a/client/src/features/editor/atoms/editorAtom.ts
+++ b/client/src/features/editor/atoms/editorAtom.ts
@@ -2,3 +2,8 @@ import { atom } from 'jotai';
 import { Editor } from '@tiptap/core';
 
 export const editorAtom = atom<Editor | null>(null);
+
+export const titleEditorAtom = atom<Editor | null>(null);
+
+export type EditorAtomType = typeof editorAtom;
+export type TitleEditorAtomType = typeof titleEditorAtom;
diff --git a/client/src/features/editor/components/bubble-menu/bubble-menu.tsx b/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
index 3e93c650..10634268 100644
--- a/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
+++ b/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
@@ -20,8 +20,8 @@ export interface BubbleMenuItem {
 type EditorBubbleMenuProps = Omit<BubbleMenuProps, 'children'>;
 
 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
-  const [showCommentPopup, setShowCommentPopup] = useAtom<boolean>(showCommentPopupAtom);
-  const [draftCommentId, setDraftCommentId] = useAtom<string | null>(draftCommentIdAtom);
+  const [, setShowCommentPopup] = useAtom(showCommentPopupAtom);
+  const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
 
   const items: BubbleMenuItem[] = [
     {
diff --git a/client/src/features/editor/components/bubble-menu/node-selector.tsx b/client/src/features/editor/components/bubble-menu/node-selector.tsx
index 179cf4b9..6105bc63 100644
--- a/client/src/features/editor/components/bubble-menu/node-selector.tsx
+++ b/client/src/features/editor/components/bubble-menu/node-selector.tsx
@@ -1,5 +1,5 @@
 import { Editor } from '@tiptap/core';
-import { Dispatch, FC, SetStateAction } from 'react';
+import React, { Dispatch, FC, SetStateAction } from 'react';
 import {
   IconBlockquote,
   IconCheck, IconCheckbox, IconChevronDown, IconCode,
@@ -21,7 +21,7 @@ interface NodeSelectorProps {
 
 export interface BubbleMenuItem {
   name: string;
-  icon: FC;
+  icon: React.ElementType;
   command: () => void;
   isActive: () => boolean;
 }
@@ -126,7 +126,7 @@ export const NodeSelector: FC<NodeSelectorProps> =
                   variant="default"
                   leftSection={<item.icon size={16} />}
                   rightSection={activeItem.name === item.name
-                    && (<IconCheck style={{ width: rem(16) }} />)}
+                    && (<IconCheck size={16} />)}
                   justify="left"
                   fullWidth
                   onClick={() => {
diff --git a/client/src/features/editor/components/slash-menu/command-list.tsx b/client/src/features/editor/components/slash-menu/command-list.tsx
index 61469a53..7e6ef34d 100644
--- a/client/src/features/editor/components/slash-menu/command-list.tsx
+++ b/client/src/features/editor/components/slash-menu/command-list.tsx
@@ -6,6 +6,7 @@ import {
   useState,
 } from 'react';
 import {
+  SlashMenuGroupedItemsType,
   SlashMenuItemType,
 } from '@/features/editor/components/slash-menu/types';
 import {
@@ -24,7 +25,7 @@ const CommandList = ({
                        editor,
                        range,
                      }: {
-  items: SlashMenuItemType[];
+  items: SlashMenuGroupedItemsType;
   command: any;
   editor: any;
   range: any;
diff --git a/client/src/features/editor/components/slash-menu/types.ts b/client/src/features/editor/components/slash-menu/types.ts
index 754e7f51..7216ede7 100644
--- a/client/src/features/editor/components/slash-menu/types.ts
+++ b/client/src/features/editor/components/slash-menu/types.ts
@@ -22,4 +22,6 @@ export type SlashMenuItemType = {
   disable?: (editor: Editor) => boolean;
 }
 
-export type SlashMenuGroupedItemsType = Record<string, SlashMenuItemType[]>;
+export type SlashMenuGroupedItemsType = {
+  [category: string]: SlashMenuItemType[];
+};
diff --git a/client/src/features/editor/editor.tsx b/client/src/features/editor/editor.tsx
index 8c4ace59..126b7e6c 100644
--- a/client/src/features/editor/editor.tsx
+++ b/client/src/features/editor/editor.tsx
@@ -1,29 +1,20 @@
+import '@/features/editor/styles/index.css';
+
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import * as Y from 'yjs';
 import { EditorContent, useEditor } from '@tiptap/react';
-import { Placeholder } from '@tiptap/extension-placeholder';
 import React, { useEffect, useState } from 'react';
 import { useAtom } from 'jotai';
 import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
 import { authTokensAtom } from '@/features/auth/atoms/auth-tokens-atom';
 import useCollaborationUrl from '@/features/editor/hooks/use-collaboration-url';
 import { IndexeddbPersistence } from 'y-indexeddb';
-import classes from '@/features/editor/styles/editor.module.css';
-import '@/features/editor/styles/index.css';
 import { EditorBubbleMenu } from '@/features/editor/components/bubble-menu/bubble-menu';
-import { Document } from '@tiptap/extension-document';
-import { Text } from '@tiptap/extension-text';
-import { Heading } from '@tiptap/extension-heading';
-import { useDebouncedValue } from '@mantine/hooks';
-import { pageAtom } from '@/features/page/atoms/page-atom';
-import { IPage } from '@/features/page/types/page.types';
-import { Comment } from '@/features/editor/extensions/comment/comment';
-import { desktopAsideAtom } from '@/components/navbar/atoms/sidebar-atom';
+import { asideStateAtom } from '@/components/navbar/atoms/sidebar-atom';
 import { activeCommentIdAtom, showCommentPopupAtom } from '@/features/comment/atoms/comment-atom';
 import CommentDialog from '@/features/comment/components/comment-dialog';
-import { editorAtom } from '@/features/editor/atoms/editorAtom';
+import { editorAtom, titleEditorAtom } from '@/features/editor/atoms/editorAtom';
 import { collabExtensions, mainExtensions } from '@/features/editor/extensions';
-import { useUpdatePageMutation } from '@/features/page/queries/page';
 
 interface EditorProps {
   pageId: string,
@@ -78,6 +69,9 @@ export default function Editor({ pageId }: EditorProps) {
   }
 
   const isSynced = isLocalSynced || isRemoteSynced;
+  if (isSynced){
+    window.scrollTo(0, 0);
+  }
   return (isSynced && <TiptapEditor ydoc={yDoc} provider={provider} pageId={pageId} />);
 }
 
@@ -90,61 +84,19 @@ interface TiptapEditorProps {
 function TiptapEditor({ ydoc, provider, pageId }: TiptapEditorProps) {
   const [currentUser] = useAtom(currentUserAtom);
   const [, setEditor] = useAtom(editorAtom);
-  const [page, setPage] = useAtom(pageAtom<IPage>(pageId));
-  const [debouncedTitleState, setDebouncedTitleState] = useState('');
-  const [debouncedTitle] = useDebouncedValue(debouncedTitleState, 1000);
-  const updatePageMutation = useUpdatePageMutation();
-  const [desktopAsideOpened, setDesktopAsideOpened] = useAtom<boolean>(desktopAsideAtom);
-  const [activeCommentId, setActiveCommentId] = useAtom<string | null>(activeCommentIdAtom);
-  const [showCommentPopup, setShowCommentPopup] = useAtom<boolean>(showCommentPopupAtom);
-
-  const titleEditor = useEditor({
-    extensions: [
-      Document.extend({
-        content: 'heading',
-      }),
-      Heading.configure({
-        levels: [1],
-      }),
-      Text,
-      Placeholder.configure({
-        placeholder: 'Untitled',
-      }),
-    ],
-    onUpdate({ editor }) {
-      const currentTitle = editor.getText();
-      setDebouncedTitleState(currentTitle);
-    },
-    content: page.title,
-  });
-
-  useEffect(() => {
-    setTimeout(() => {
-      titleEditor?.commands.focus('start');
-      window.scrollTo(0, 0);
-    }, 100);
-  }, []);
-
-  useEffect(() => {
-    if (debouncedTitle !== '') {
-      updatePageMutation.mutate({ id: pageId, title: debouncedTitle });
-    }
-  }, [debouncedTitle]);
+  const [titleEditor] = useAtom(titleEditorAtom);
+  const [asideState, setAsideState] = useAtom(asideStateAtom);
+  const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
+  const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
 
   const extensions = [
     ...mainExtensions,
     ...collabExtensions(ydoc, provider),
-    Comment.configure({
-      HTMLAttributes: {
-        class: 'comment-mark',
-      },
-    }),
-
   ];
 
   const editor = useEditor({
     extensions: extensions,
-    autofocus: false,
+    autofocus: 0,
     editorProps: {
       handleDOMEvents: {
         keydown: (_view, event) => {
@@ -159,6 +111,7 @@ function TiptapEditor({ ydoc, provider, pageId }: TiptapEditorProps) {
     },
     onCreate({ editor }) {
       if (editor) {
+        // @ts-ignore
         setEditor(editor);
       }
     },
@@ -177,30 +130,22 @@ function TiptapEditor({ ydoc, provider, pageId }: TiptapEditorProps) {
     },
   });
 
+  useEffect(() => {
+    setTimeout(() => {
+     titleEditor?.commands.focus('end');
+    }, 200);
+  }, [editor]);
+
   useEffect(() => {
     if (editor && currentUser.user) {
       editor.chain().focus().updateUser({ ...currentUser.user, color: getRandomColor() }).run();
     }
   }, [editor, currentUser.user]);
 
-  function handleTitleKeyDown(event) {
-    if (!titleEditor || !editor || event.shiftKey) return;
-
-    const { key } = event;
-    const { $head } = titleEditor.state.selection;
-
-    const shouldFocusEditor = (key === 'Enter' || key === 'ArrowDown') ||
-      (key === 'ArrowRight' && !$head.nodeAfter);
-
-    if (shouldFocusEditor) {
-      editor.commands.focus('start');
-    }
-  }
-
   const handleActiveCommentEvent = (event) => {
     const { commentId } = event.detail;
     setActiveCommentId(commentId);
-    setDesktopAsideOpened(true);
+    setAsideState({ tab: 'comments', isAsideOpen: true });
 
     const selector = `div[data-comment-id="${commentId}"]`;
     const commentElement = document.querySelector(selector);
@@ -216,21 +161,22 @@ function TiptapEditor({ ydoc, provider, pageId }: TiptapEditorProps) {
 
   useEffect(() => {
     setActiveCommentId(null);
-    setDesktopAsideOpened(false);
     setShowCommentPopup(false);
+    setAsideState({ tab: '', isAsideOpen: false });
   }, [pageId]);
 
   return (
-    <>
-      <div className={classes.editor}>
-        {editor && <EditorBubbleMenu editor={editor} />}
-        <EditorContent editor={titleEditor} onKeyDown={handleTitleKeyDown} />
-        <EditorContent editor={editor} />
-      </div>
+    <div>
+      {editor &&
+        (<div>
+          <EditorBubbleMenu editor={editor} />
+          <EditorContent editor={editor} />
 
-      {showCommentPopup && (
-        <CommentDialog editor={editor} pageId={pageId} />
-      )}
-    </>
+          {showCommentPopup && (
+            <CommentDialog editor={editor} pageId={pageId} />
+          )}
+        </div>)}
+    </div>
   );
 }
+
diff --git a/client/src/features/editor/extensions.ts b/client/src/features/editor/extensions.ts
index 54f558c0..624f5d88 100644
--- a/client/src/features/editor/extensions.ts
+++ b/client/src/features/editor/extensions.ts
@@ -16,6 +16,7 @@ import { Color } from '@tiptap/extension-color';
 import SlashCommand from '@/features/editor/extensions/slash-command';
 import { Collaboration } from '@tiptap/extension-collaboration';
 import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor';
+import { Comment } from '@/features/editor/extensions/comment/comment';
 import * as Y from 'yjs';
 
 export const mainExtensions = [
@@ -47,6 +48,11 @@ export const mainExtensions = [
   TextStyle,
   Color,
   SlashCommand,
+  Comment.configure({
+    HTMLAttributes: {
+      class: 'comment-mark',
+    },
+  }),
 ];
 
 type CollabExtensions = (ydoc: Y.Doc, provider: any) => any[];
diff --git a/client/src/features/editor/extensions/comment/comment.ts b/client/src/features/editor/extensions/comment/comment.ts
index d14ab354..fbb7b457 100644
--- a/client/src/features/editor/extensions/comment/comment.ts
+++ b/client/src/features/editor/extensions/comment/comment.ts
@@ -127,6 +127,7 @@ export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
       return elem;
     },
 
+    // @ts-ignore
     addProseMirrorPlugins(): Plugin[] {
       // @ts-ignore
       return [commentDecoration()];
diff --git a/client/src/features/editor/full-editor.tsx b/client/src/features/editor/full-editor.tsx
new file mode 100644
index 00000000..027a1de6
--- /dev/null
+++ b/client/src/features/editor/full-editor.tsx
@@ -0,0 +1,20 @@
+import classes from '@/features/editor/styles/editor.module.css';
+import Editor from '@/features/editor/editor';
+import React from 'react';
+import { TitleEditor } from '@/features/editor/title-editor';
+
+export interface FullEditorProps {
+  pageId: string;
+  title: any;
+}
+
+export function FullEditor({ pageId, title }: FullEditorProps) {
+
+  return (
+    <div className={classes.editor}>
+      <TitleEditor pageId={pageId} title={title} />
+      <Editor pageId={pageId} />
+    </div>
+
+  );
+}
diff --git a/client/src/features/editor/title-editor.tsx b/client/src/features/editor/title-editor.tsx
new file mode 100644
index 00000000..44721e21
--- /dev/null
+++ b/client/src/features/editor/title-editor.tsx
@@ -0,0 +1,75 @@
+import '@/features/editor/styles/index.css';
+import React, { useEffect, useState } from 'react';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { Document } from '@tiptap/extension-document';
+import { Heading } from '@tiptap/extension-heading';
+import { Text } from '@tiptap/extension-text';
+import { Placeholder } from '@tiptap/extension-placeholder';
+import { useAtomValue } from 'jotai';
+import { editorAtom, titleEditorAtom } from '@/features/editor/atoms/editorAtom';
+import { useUpdatePageMutation } from '@/features/page/queries/page-query';
+import { useDebouncedValue } from '@mantine/hooks';
+import { useAtom } from 'jotai';
+
+export interface TitleEditorProps {
+  pageId: string;
+  title: any;
+}
+
+export function TitleEditor({ pageId, title }: TitleEditorProps) {
+  const [debouncedTitleState, setDebouncedTitleState] = useState('');
+  const [debouncedTitle] = useDebouncedValue(debouncedTitleState, 1000);
+  const updatePageMutation = useUpdatePageMutation();
+  const contentEditor = useAtomValue(editorAtom);
+  const [, setTitleEditor] = useAtom(titleEditorAtom);
+
+  const titleEditor = useEditor({
+    extensions: [
+      Document.extend({
+        content: 'heading',
+      }),
+      Heading.configure({
+        levels: [1],
+      }),
+      Text,
+      Placeholder.configure({
+        placeholder: 'Untitled',
+      }),
+    ],
+    onCreate({ editor }) {
+      if (editor) {
+        // @ts-ignore
+        setTitleEditor(editor);
+      }
+    },
+    onUpdate({ editor }) {
+      const currentTitle = editor.getText();
+      setDebouncedTitleState(currentTitle);
+    },
+    content: title,
+  });
+
+  useEffect(() => {
+    if (debouncedTitle !== '') {
+      updatePageMutation.mutate({ id: pageId, title: debouncedTitle });
+    }
+  }, [debouncedTitle]);
+
+  function handleTitleKeyDown(event) {
+    if (!titleEditor || !contentEditor || event.shiftKey) return;
+
+    const { key } = event;
+    const { $head } = titleEditor.state.selection;
+
+    const shouldFocusEditor = (key === 'Enter' || key === 'ArrowDown') ||
+      (key === 'ArrowRight' && !$head.nodeAfter);
+
+    if (shouldFocusEditor) {
+      contentEditor.commands.focus('start');
+    }
+  }
+
+  return (
+    <EditorContent editor={titleEditor} onKeyDown={handleTitleKeyDown} />
+  );
+}
diff --git a/client/src/features/home/components/recent-changes.tsx b/client/src/features/home/components/recent-changes.tsx
index a275973a..0d51a24a 100644
--- a/client/src/features/home/components/recent-changes.tsx
+++ b/client/src/features/home/components/recent-changes.tsx
@@ -3,7 +3,7 @@ import { format } from 'date-fns';
 import classes from './home.module.css';
 import { Link } from 'react-router-dom';
 import PageListSkeleton from '@/features/home/components/page-list-skeleton';
-import { useRecentChangesQuery } from '@/features/page/queries/page';
+import { useRecentChangesQuery } from '@/features/page/queries/page-query';
 
 function RecentChanges() {
   const { data, isLoading, isError } = useRecentChangesQuery();
@@ -22,7 +22,7 @@ function RecentChanges() {
         <div key={page.id}>
           <UnstyledButton component={Link} to={`/p/${page.id}`}
                           className={classes.page} p="xs">
-            <Group wrap="noWrap">
+            <Group wrap="nowrap">
 
               <Stack gap="xs" style={{ flex: 1 }}>
                 <Text fw={500} size="sm">
diff --git a/client/src/features/page-history/atoms/history-atoms.ts b/client/src/features/page-history/atoms/history-atoms.ts
new file mode 100644
index 00000000..36c3fe08
--- /dev/null
+++ b/client/src/features/page-history/atoms/history-atoms.ts
@@ -0,0 +1,4 @@
+import { atom } from "jotai";
+
+export const historyAtoms = atom<boolean>(false);
+export const activeHistoryIdAtom = atom(null);
diff --git a/client/src/features/page-history/components/history-editor.tsx b/client/src/features/page-history/components/history-editor.tsx
new file mode 100644
index 00000000..a456f4ee
--- /dev/null
+++ b/client/src/features/page-history/components/history-editor.tsx
@@ -0,0 +1,33 @@
+import '@/features/editor/styles/index.css';
+import React, { useEffect } from 'react';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { mainExtensions } from '@/features/editor/extensions';
+import { Title } from '@mantine/core';
+
+export interface HistoryEditorProps {
+  title: string;
+  content: any;
+}
+
+export function HistoryEditor({ title, content }: HistoryEditorProps) {
+  const editor = useEditor({
+    extensions: mainExtensions,
+    editable: false,
+  });
+
+  useEffect(() => {
+    if (editor && content) {
+      editor.commands.setContent(content);
+    }
+  }, [title, content, editor]);
+
+  return (
+    <>
+      <div>
+        <Title order={1}>{title}</Title>
+
+        {editor && <EditorContent editor={editor} />}
+      </div>
+    </>
+  );
+}
diff --git a/client/src/features/page-history/components/history-item.tsx b/client/src/features/page-history/components/history-item.tsx
new file mode 100644
index 00000000..223e7ffb
--- /dev/null
+++ b/client/src/features/page-history/components/history-item.tsx
@@ -0,0 +1,40 @@
+import { Text, Group, UnstyledButton } from '@mantine/core';
+import { UserAvatar } from '@/components/ui/user-avatar';
+import { formatDate } from '@/lib/time';
+import classes from './history.module.css';
+import clsx from 'clsx';
+
+interface HistoryItemProps {
+  historyItem: any,
+  onSelect: (id: string) => void;
+  isActive: boolean;
+}
+
+function HistoryItem({ historyItem, onSelect, isActive }: HistoryItemProps) {
+
+  return (
+    <UnstyledButton p="xs" onClick={() => onSelect(historyItem.id)}
+                    className={clsx(classes.history, { [classes.active]: isActive })}
+    >
+      <Group wrap="nowrap">
+        <div>
+          <Text size="sm">
+            {formatDate(new Date(historyItem.createdAt))}
+          </Text>
+
+          <div style={{ flex: 1 }}>
+            <Group gap={4} wrap="nowrap">
+              <UserAvatar color="blue" size="sm" avatarUrl={historyItem.lastUpdatedBy.avatarUrl}
+                          name={historyItem.lastUpdatedBy.name} />
+              <Text size="sm" c="dimmed" lineClamp={1} fontWeight={400}>
+                {historyItem.lastUpdatedBy.name}
+              </Text>
+            </Group>
+          </div>
+        </div>
+      </Group>
+    </UnstyledButton>
+  );
+}
+
+export default HistoryItem;
diff --git a/client/src/features/page-history/components/history-list.tsx b/client/src/features/page-history/components/history-list.tsx
new file mode 100644
index 00000000..1d068d6b
--- /dev/null
+++ b/client/src/features/page-history/components/history-list.tsx
@@ -0,0 +1,85 @@
+import { usePageHistoryListQuery, usePageHistoryQuery } from '@/features/page-history/queries/page-history-query';
+import { useParams } from 'react-router-dom';
+import HistoryItem from '@/features/page-history/components/history-item';
+import { activeHistoryIdAtom, historyAtoms } from '@/features/page-history/atoms/history-atoms';
+import { useAtom } from 'jotai';
+import { useCallback, useEffect } from 'react';
+import { Button, ScrollArea, Group, Divider, Text } from '@mantine/core';
+import { editorAtom, titleEditorAtom } from '@/features/editor/atoms/editorAtom';
+import { modals } from '@mantine/modals';
+import { notifications } from '@mantine/notifications';
+
+function HistoryList() {
+  const [activeHistoryId, setActiveHistoryId] = useAtom(activeHistoryIdAtom);
+  const { pageId } = useParams();
+  const { data, isLoading, isError } = usePageHistoryListQuery(pageId);
+  const { data: activeHistoryData } = usePageHistoryQuery(activeHistoryId);
+
+  const [mainEditor] = useAtom(editorAtom);
+  const [mainEditorTitle] = useAtom(titleEditorAtom);
+  const [, setHistoryModalOpen] = useAtom(historyAtoms);
+
+  const confirmModal = () => modals.openConfirmModal({
+    title: 'Please confirm your action',
+    children: (
+      <Text size="sm">
+        Are you sure you want to restore this version? Any changes not versioned will be lost.
+      </Text>
+    ),
+    labels: { confirm: 'Confirm', cancel: 'Cancel' },
+    onConfirm: handleRestore,
+  });
+
+  const handleRestore = useCallback(() => {
+    if (activeHistoryData) {
+      mainEditorTitle.chain().clearContent().setContent(activeHistoryData.title, true).run();
+      mainEditor.chain().clearContent().setContent(activeHistoryData.content).run();
+      setHistoryModalOpen(false);
+      notifications.show({ message: 'Successfully restored' });
+
+    }
+  }, [activeHistoryData]);
+
+  useEffect(() => {
+    if (data && data.length > 0 && !activeHistoryId) {
+      setActiveHistoryId(data[0].id);
+    }
+  }, [data]);
+
+  if (isLoading) {
+    return <></>;
+  }
+
+  if (isError) {
+    return <div>Error loading page history.</div>;
+  }
+
+  if (!data || data.length === 0) {
+    return <>No page history saved yet.</>;
+  }
+
+  return (
+    <div>
+      <ScrollArea h={620} w="100%" type="scroll" scrollbarSize={5}>
+        {data && data.map((historyItem, index) => (
+          <HistoryItem
+            key={index}
+            historyItem={historyItem}
+            onSelect={setActiveHistoryId}
+            isActive={historyItem.id === activeHistoryId}
+          />
+        ))}
+      </ScrollArea>
+
+      <Divider />
+
+      <Group p="xs" wrap="nowrap">
+        <Button size="compact-md" onClick={confirmModal}>Restore</Button>
+        <Button variant="default" size="compact-md" onClick={() => setHistoryModalOpen(false)}>Cancel</Button>
+      </Group>
+    </div>
+
+  );
+}
+
+export default HistoryList;
diff --git a/client/src/features/page-history/components/history-modal-body.tsx b/client/src/features/page-history/components/history-modal-body.tsx
new file mode 100644
index 00000000..b92ced65
--- /dev/null
+++ b/client/src/features/page-history/components/history-modal-body.tsx
@@ -0,0 +1,27 @@
+import { ScrollArea } from '@mantine/core';
+import HistoryList from '@/features/page-history/components/history-list';
+import classes from './history.module.css';
+import { useAtom } from 'jotai';
+import { activeHistoryIdAtom } from '@/features/page-history/atoms/history-atoms';
+import HistoryView from '@/features/page-history/components/history-view';
+
+export default function HistoryModalBody() {
+  const [activeHistoryId] = useAtom(activeHistoryIdAtom);
+
+  return (
+    <div className={classes.sidebarFlex}>
+      <nav className={classes.sidebar}>
+        <div className={classes.sidebarMain}>
+          <HistoryList />
+        </div>
+      </nav>
+
+      <ScrollArea h="650" w="100%" scrollbarSize={5}>
+        <div className={classes.sidebarRightSection}>
+          {activeHistoryId && <HistoryView historyId={activeHistoryId} />}
+        </div>
+      </ScrollArea>
+
+    </div>
+  );
+}
diff --git a/client/src/features/page-history/components/history-modal.tsx b/client/src/features/page-history/components/history-modal.tsx
new file mode 100644
index 00000000..5ae3862f
--- /dev/null
+++ b/client/src/features/page-history/components/history-modal.tsx
@@ -0,0 +1,27 @@
+import { Modal, Text } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { historyAtoms } from '@/features/page-history/atoms/history-atoms';
+import HistoryModalBody from '@/features/page-history/components/history-modal-body';
+
+export default function HistoryModal() {
+  const [isModalOpen, setModalOpen] = useAtom(historyAtoms);
+
+  return (
+    <>
+      <Modal.Root size={1200} opened={isModalOpen} onClose={() => setModalOpen(false)}>
+        <Modal.Overlay />
+        <Modal.Content style={{ overflow: 'hidden' }}>
+          <Modal.Header>
+            <Modal.Title>
+              <Text size="md" fw={500}>Page history</Text>
+            </Modal.Title>
+            <Modal.CloseButton />
+          </Modal.Header>
+          <Modal.Body>
+            <HistoryModalBody />
+          </Modal.Body>
+        </Modal.Content>
+      </Modal.Root>
+    </>
+  );
+}
diff --git a/client/src/features/page-history/components/history-view.tsx b/client/src/features/page-history/components/history-view.tsx
new file mode 100644
index 00000000..f1f1a9d1
--- /dev/null
+++ b/client/src/features/page-history/components/history-view.tsx
@@ -0,0 +1,26 @@
+import { usePageHistoryQuery } from '@/features/page-history/queries/page-history-query';
+import { HistoryEditor } from '@/features/page-history/components/history-editor';
+
+interface HistoryProps {
+  historyId: string;
+}
+
+function HistoryView({ historyId }: HistoryProps) {
+  const { data, isLoading, isError } = usePageHistoryQuery(historyId);
+
+  if (isLoading) {
+    return <></>;
+  }
+
+  if (isError || !data) {
+    return <div>Error fetching page data.</div>;
+  }
+
+  return (data &&
+    <div>
+      <HistoryEditor content={data.content} title={data.title} />
+    </div>
+  );
+}
+
+export default HistoryView;
diff --git a/client/src/features/page-history/components/history.module.css b/client/src/features/page-history/components/history.module.css
new file mode 100644
index 00000000..5d23cb0c
--- /dev/null
+++ b/client/src/features/page-history/components/history.module.css
@@ -0,0 +1,37 @@
+.history {
+    display: block;
+    width: 100%;
+    padding: var(--mantine-spacing-md);
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+
+    @mixin hover {
+        background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8));
+    }
+}
+
+.active {
+    background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8));
+}
+
+.sidebar {
+    max-height: rem(700px);
+    width: rem(250px);
+    padding: var(--mantine-spacing-sm);
+    display: flex;
+    flex-direction: column;
+    border-right: rem(1px) solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.sidebarFlex {
+    display: flex;
+}
+
+.sidebarMain {
+    flex: 1;
+}
+
+.sidebarRightSection {
+    flex: 1;
+    padding: rem(16px) rem(40px);
+}
diff --git a/client/src/features/page-history/queries/page-history-query.ts b/client/src/features/page-history/queries/page-history-query.ts
new file mode 100644
index 00000000..89153fca
--- /dev/null
+++ b/client/src/features/page-history/queries/page-history-query.ts
@@ -0,0 +1,20 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { getPageHistoryById, getPageHistoryList } from '@/features/page-history/services/page-history-service';
+import { IPageHistory } from '@/features/page-history/types/page.types';
+
+export function usePageHistoryListQuery(pageId: string): UseQueryResult<IPageHistory[], Error> {
+  return useQuery({
+    queryKey: ['page-history-list', pageId],
+    queryFn: () => getPageHistoryList(pageId),
+    enabled: !!pageId,
+  });
+}
+
+export function usePageHistoryQuery(historyId: string): UseQueryResult<IPageHistory, Error> {
+  return useQuery({
+    queryKey: ['page-history', historyId],
+    queryFn: () => getPageHistoryById(historyId),
+    enabled: !!historyId,
+    staleTime: 10 * 60 * 1000,
+  });
+}
diff --git a/client/src/features/page-history/services/page-history-service.ts b/client/src/features/page-history/services/page-history-service.ts
new file mode 100644
index 00000000..df4e9886
--- /dev/null
+++ b/client/src/features/page-history/services/page-history-service.ts
@@ -0,0 +1,12 @@
+import api from '@/lib/api-client';
+import { IPageHistory } from '@/features/page-history/types/page.types';
+
+export async function getPageHistoryList(pageId: string): Promise<IPageHistory[]> {
+  const req = await api.post<IPageHistory[]>('/pages/history', { pageId });
+  return req.data as IPageHistory[];
+}
+
+export async function getPageHistoryById(id: string): Promise<IPageHistory> {
+  const req = await api.post<IPageHistory>('/pages/history/details', { id });
+  return req.data as IPageHistory;
+}
diff --git a/client/src/features/page-history/types/page.types.ts b/client/src/features/page-history/types/page.types.ts
new file mode 100644
index 00000000..98a5b9d7
--- /dev/null
+++ b/client/src/features/page-history/types/page.types.ts
@@ -0,0 +1,21 @@
+interface IPageHistoryUser {
+  id: string;
+  name: string;
+  avatarUrl: string;
+}
+
+export interface IPageHistory {
+  id: string;
+  pageId: string;
+  title: string;
+  content?: any;
+  slug: string;
+  icon: string;
+  coverPhoto: string;
+  version: number;
+  lastUpdatedById: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  lastUpdatedBy: IPageHistoryUser;
+}
diff --git a/client/src/features/page/queries/page-query.ts b/client/src/features/page/queries/page-query.ts
index 903414e2..dee7a7ab 100644
--- a/client/src/features/page/queries/page-query.ts
+++ b/client/src/features/page/queries/page-query.ts
@@ -13,9 +13,10 @@ const RECENT_CHANGES_KEY = ['recentChanges'];
 
 export function usePageQuery(pageId: string): UseQueryResult<IPage, Error> {
   return useQuery({
-    queryKey: ['page', pageId],
+    queryKey: ['pages', pageId],
     queryFn: () => getPageById(pageId),
     enabled: !!pageId,
+    staleTime: 5 * 60 * 1000,
   });
 }
 
diff --git a/client/src/features/page/tree/hooks/use-persistence.ts b/client/src/features/page/tree/hooks/use-persistence.ts
index e40708c2..6a58b898 100644
--- a/client/src/features/page/tree/hooks/use-persistence.ts
+++ b/client/src/features/page/tree/hooks/use-persistence.ts
@@ -13,7 +13,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { IMovePage } from '@/features/page/types/page.types';
 import { useNavigate } from 'react-router-dom';
 import { TreeNode } from '@/features/page/tree/types';
-import { useCreatePageMutation, useDeletePageMutation, useUpdatePageMutation } from '@/features/page/queries/page';
+import { useCreatePageMutation, useDeletePageMutation, useUpdatePageMutation } from '@/features/page/queries/page-query';
 
 export function usePersistence<T>() {
   const [data, setData] = useAtom(treeDataAtom);
diff --git a/client/src/features/settings/modal/settings-modal.tsx b/client/src/features/settings/modal/settings-modal.tsx
index 59a4581e..5d0f9039 100644
--- a/client/src/features/settings/modal/settings-modal.tsx
+++ b/client/src/features/settings/modal/settings-modal.tsx
@@ -11,7 +11,7 @@ export default function SettingsModal() {
     <>
       <Modal.Root size={1000} opened={isModalOpen} onClose={() => setModalOpen(false)}>
         <Modal.Overlay />
-        <Modal.Content>
+        <Modal.Content style={{ overflow: 'hidden' }}>
           <Modal.Header>
             <Modal.Title>
               <Text size="md" fw={500}>Settings</Text>
diff --git a/client/src/hooks/use-match-path.tsx b/client/src/hooks/use-match-path.tsx
new file mode 100644
index 00000000..82904b67
--- /dev/null
+++ b/client/src/hooks/use-match-path.tsx
@@ -0,0 +1,16 @@
+import { useLocation } from 'react-router-dom';
+
+export const useMatchPath = () => {
+  const location = useLocation();
+
+  const matchPath = (pattern) => {
+    const modifiedPattern = pattern
+      .replace(/:([^/]+)/g, '([^/]+)(?:/.*)?')
+      .replace(/\//g, '\\/');
+
+    const regex = new RegExp(`^${modifiedPattern}$`);
+    return regex.test(location.pathname);
+  };
+
+  return matchPath;
+};
diff --git a/client/src/hooks/use-toggle-aside.tsx b/client/src/hooks/use-toggle-aside.tsx
new file mode 100644
index 00000000..45a83a2f
--- /dev/null
+++ b/client/src/hooks/use-toggle-aside.tsx
@@ -0,0 +1,18 @@
+import { asideStateAtom } from '@/components/navbar/atoms/sidebar-atom';
+import { useAtom } from 'jotai';
+
+const useToggleAside = () => {
+  const [asideState, setAsideState] = useAtom(asideStateAtom);
+
+  const toggleAside = (tab: string) => {
+    if (asideState.tab === tab) {
+      setAsideState({ tab, isAsideOpen: !asideState.isAsideOpen });
+    } else {
+      setAsideState({ tab, isAsideOpen: true });
+    }
+  };
+
+  return toggleAside;
+};
+
+export default useToggleAside;
diff --git a/client/src/pages/page/page.tsx b/client/src/pages/page/page.tsx
index f11ffccf..0b96fe94 100644
--- a/client/src/pages/page/page.tsx
+++ b/client/src/pages/page/page.tsx
@@ -1,9 +1,10 @@
 import { useParams } from 'react-router-dom';
 import React, { useEffect } from 'react';
 import { useAtom } from 'jotai';
-import Editor from '@/features/editor/editor';
 import { pageAtom } from '@/features/page/atoms/page-atom';
-import { usePageQuery } from '@/features/page/queries/page';
+import { usePageQuery } from '@/features/page/queries/page-query';
+import { FullEditor } from '@/features/editor/full-editor';
+import HistoryModal from '@/features/page-history/components/history-modal';
 
 export default function Page() {
   const { pageId } = useParams();
@@ -12,17 +13,26 @@ export default function Page() {
 
   useEffect(() => {
     if (data) {
+      // @ts-ignore
       setPage(data);
     }
   }, [data, isLoading, setPage, pageId]);
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return <></>;
   }
 
   if (isError || !data) { // TODO: fix this
     return <div>Error fetching page data.</div>;
   }
 
-  return (<Editor key={pageId} pageId={pageId} />);
+  return (
+    data && (
+      <div>
+        <FullEditor key={pageId} pageId={pageId} title={data.title} />
+        <HistoryModal/>
+      </div>
+    )
+
+  );
 }
diff --git a/server/package.json b/server/package.json
index 8b013f87..2c0acc24 100644
--- a/server/package.json
+++ b/server/package.json
@@ -29,8 +29,8 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.431.0",
     "@aws-sdk/s3-request-presigner": "^3.431.0",
-    "@hocuspocus/server": "^2.7.1",
-    "@hocuspocus/transformer": "^2.7.1",
+    "@hocuspocus/server": "^2.8.1",
+    "@hocuspocus/transformer": "^2.8.1",
     "@nestjs/common": "^10.2.7",
     "@nestjs/config": "^3.1.1",
     "@nestjs/core": "^10.2.7",
@@ -59,6 +59,7 @@
     "@nestjs/schematics": "^10.0.2",
     "@nestjs/testing": "^10.2.7",
     "@types/bcrypt": "^5.0.0",
+    "@types/debounce": "^1.2.4",
     "@types/fs-extra": "^11.0.2",
     "@types/jest": "^29.5.5",
     "@types/mime-types": "^2.1.2",
diff --git a/server/src/collaboration/collaboration.gateway.ts b/server/src/collaboration/collaboration.gateway.ts
index e6af562c..b34bd9ee 100644
--- a/server/src/collaboration/collaboration.gateway.ts
+++ b/server/src/collaboration/collaboration.gateway.ts
@@ -4,18 +4,24 @@ import WebSocket from 'ws';
 import { AuthenticationExtension } from './extensions/authentication.extension';
 import { PersistenceExtension } from './extensions/persistence.extension';
 import { Injectable } from '@nestjs/common';
+import { HistoryExtension } from './extensions/history.extension';
 
 @Injectable()
 export class CollaborationGateway {
   constructor(
     private authenticationExtension: AuthenticationExtension,
     private persistenceExtension: PersistenceExtension,
+    private historyExtension: HistoryExtension,
   ) {}
 
   private hocuspocus = HocuspocusServer.configure({
     debounce: 5000,
     maxDebounce: 10000,
-    extensions: [this.authenticationExtension, this.persistenceExtension],
+    extensions: [
+      this.authenticationExtension,
+      this.persistenceExtension,
+      this.historyExtension,
+    ],
   });
 
   handleConnection(client: WebSocket, request: IncomingMessage): any {
diff --git a/server/src/collaboration/collaboration.module.ts b/server/src/collaboration/collaboration.module.ts
index 7966ec72..1cbff20b 100644
--- a/server/src/collaboration/collaboration.module.ts
+++ b/server/src/collaboration/collaboration.module.ts
@@ -9,12 +9,14 @@ import { HttpAdapterHost } from '@nestjs/core';
 import { CollabWsAdapter } from './adapter/collab-ws.adapter';
 import { IncomingMessage } from 'http';
 import { WebSocket } from 'ws';
+import { HistoryExtension } from './extensions/history.extension';
 
 @Module({
   providers: [
     CollaborationGateway,
     AuthenticationExtension,
     PersistenceExtension,
+    HistoryExtension,
   ],
   imports: [UserModule, AuthModule, PageModule],
 })
diff --git a/server/src/collaboration/extensions/history.extension.ts b/server/src/collaboration/extensions/history.extension.ts
new file mode 100644
index 00000000..393ed79b
--- /dev/null
+++ b/server/src/collaboration/extensions/history.extension.ts
@@ -0,0 +1,64 @@
+import {
+  Extension,
+  onChangePayload,
+  onDisconnectPayload,
+} from '@hocuspocus/server';
+import { Injectable } from '@nestjs/common';
+import { PageService } from '../../core/page/services/page.service';
+import { PageHistoryService } from '../../core/page/services/page-history.service';
+
+@Injectable()
+export class HistoryExtension implements Extension {
+  ACTIVE_EDITING_INTERVAL = 10 * 60 * 1000; // 10 minutes
+  historyIntervalMap = new Map<string, NodeJS.Timeout>();
+  lastEditTimeMap = new Map<string, number>();
+
+  constructor(
+    private readonly pageService: PageService,
+    private readonly pageHistoryService: PageHistoryService,
+  ) {}
+
+  async onChange(data: onChangePayload): Promise<void> {
+    const pageId = data.documentName;
+    this.lastEditTimeMap.set(pageId, Date.now());
+
+    if (!this.historyIntervalMap.has(pageId)) {
+      const historyInterval = setInterval(() => {
+        if (this.isActiveEditing(pageId)) {
+          this.recordHistory(pageId);
+        }
+      }, this.ACTIVE_EDITING_INTERVAL);
+      this.historyIntervalMap.set(pageId, historyInterval);
+    }
+  }
+
+  async onDisconnect(data: onDisconnectPayload): Promise<void> {
+    const pageId = data.documentName;
+    if (data.clientsCount === 0) {
+      if (this.historyIntervalMap.has(pageId)) {
+        clearInterval(this.historyIntervalMap.get(pageId));
+        this.historyIntervalMap.delete(pageId);
+        this.lastEditTimeMap.delete(pageId);
+      }
+    }
+  }
+
+  isActiveEditing(pageId: string): boolean {
+    const lastEditTime = this.lastEditTimeMap.get(pageId);
+    if (!lastEditTime) {
+      return false;
+    }
+    return Date.now() - lastEditTime < this.ACTIVE_EDITING_INTERVAL;
+  }
+
+  async recordHistory(pageId: string) {
+    try {
+      const page = await this.pageService.findWithContent(pageId);
+      // Todo: compare if data is the same as the previous version
+      await this.pageHistoryService.saveHistory(page);
+      console.log(`New history created for: ${pageId}`);
+    } catch (err) {
+      console.error('An error occurred saving page history', err);
+    }
+  }
+}
diff --git a/server/src/collaboration/extensions/persistence.extension.ts b/server/src/collaboration/extensions/persistence.extension.ts
index 0ec2d771..9b825fc1 100644
--- a/server/src/collaboration/extensions/persistence.extension.ts
+++ b/server/src/collaboration/extensions/persistence.extension.ts
@@ -14,12 +14,13 @@ export class PersistenceExtension implements Extension {
 
   async onLoadDocument(data: onLoadDocumentPayload) {
     const { documentName, document } = data;
+    const pageId = documentName;
 
     if (!document.isEmpty('default')) {
       return;
     }
 
-    const page = await this.pageService.findById(documentName);
+    const page = await this.pageService.findWithAllFields(pageId);
 
     if (!page) {
       console.log('page does not exist.');
diff --git a/server/src/core/page/dto/create-page.dto.ts b/server/src/core/page/dto/create-page.dto.ts
index 8e188e95..3fa4ca27 100644
--- a/server/src/core/page/dto/create-page.dto.ts
+++ b/server/src/core/page/dto/create-page.dto.ts
@@ -9,10 +9,6 @@ export class CreatePageDto {
   @IsString()
   title?: string;
 
-  @IsOptional()
-  @IsString()
-  content?: string;
-
   @IsOptional()
   @IsString()
   parentPageId?: string;
diff --git a/server/src/core/page/dto/history-details.dto.ts b/server/src/core/page/dto/history-details.dto.ts
new file mode 100644
index 00000000..730f9ebb
--- /dev/null
+++ b/server/src/core/page/dto/history-details.dto.ts
@@ -0,0 +1,6 @@
+import { IsUUID } from 'class-validator';
+
+export class HistoryDetailsDto {
+  @IsUUID()
+  id: string;
+}
diff --git a/server/src/core/page/dto/page-history.dto.ts b/server/src/core/page/dto/page-history.dto.ts
new file mode 100644
index 00000000..d45c8682
--- /dev/null
+++ b/server/src/core/page/dto/page-history.dto.ts
@@ -0,0 +1,6 @@
+import { IsUUID } from 'class-validator';
+
+export class PageHistoryDto {
+  @IsUUID()
+  pageId: string;
+}
diff --git a/server/src/core/page/entities/page-history.entity.ts b/server/src/core/page/entities/page-history.entity.ts
new file mode 100644
index 00000000..c37203a9
--- /dev/null
+++ b/server/src/core/page/entities/page-history.entity.ts
@@ -0,0 +1,63 @@
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  JoinColumn,
+} from 'typeorm';
+import { Workspace } from '../../workspace/entities/workspace.entity';
+import { Page } from './page.entity';
+import { User } from '../../user/entities/user.entity';
+
+@Entity('page_history')
+export class PageHistory {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ type: 'uuid' })
+  pageId: string;
+
+  @ManyToOne(() => Page, (page) => page.pageHistory, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'pageId' })
+  page: Page;
+
+  @Column({ length: 500, nullable: true })
+  title: string;
+
+  @Column({ type: 'jsonb', nullable: true })
+  content: string;
+
+  @Column({ nullable: true })
+  slug: string;
+
+  @Column({ nullable: true })
+  icon: string;
+
+  @Column({ nullable: true })
+  coverPhoto: string;
+
+  @Column({ type: 'int' })
+  version: number;
+
+  @Column({ type: 'uuid' })
+  lastUpdatedById: string;
+
+  @ManyToOne(() => User)
+  @JoinColumn({ name: 'lastUpdatedById' })
+  lastUpdatedBy: User;
+
+  @Column()
+  workspaceId: string;
+
+  @ManyToOne(() => Workspace, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'workspaceId' })
+  workspace: Workspace;
+
+  @CreateDateColumn()
+  createdAt: Date;
+
+  @UpdateDateColumn()
+  updatedAt: Date;
+}
diff --git a/server/src/core/page/entities/page.entity.ts b/server/src/core/page/entities/page.entity.ts
index e9d75b33..e5d99710 100644
--- a/server/src/core/page/entities/page.entity.ts
+++ b/server/src/core/page/entities/page.entity.ts
@@ -12,6 +12,7 @@ import {
 import { User } from '../../user/entities/user.entity';
 import { Workspace } from '../../workspace/entities/workspace.entity';
 import { Comment } from '../../comment/entities/comment.entity';
+import { PageHistory } from './page-history.entity';
 
 @Entity('pages')
 export class Page {
@@ -101,6 +102,9 @@ export class Page {
   @OneToMany(() => Page, (page) => page.parentPage, { onDelete: 'CASCADE' })
   childPages: Page[];
 
+  @OneToMany(() => PageHistory, (pageHistory) => pageHistory.page)
+  pageHistory: PageHistory[];
+
   @OneToMany(() => Comment, (comment) => comment.page)
   comments: Comment[];
 }
diff --git a/server/src/core/page/page.controller.ts b/server/src/core/page/page.controller.ts
index c22fb3d4..815a0965 100644
--- a/server/src/core/page/page.controller.ts
+++ b/server/src/core/page/page.controller.ts
@@ -17,6 +17,9 @@ import { MovePageDto } from './dto/move-page.dto';
 import { PageDetailsDto } from './dto/page-details.dto';
 import { DeletePageDto } from './dto/delete-page.dto';
 import { PageOrderingService } from './services/page-ordering.service';
+import { PageHistoryService } from './services/page-history.service';
+import { HistoryDetailsDto } from './dto/history-details.dto';
+import { PageHistoryDto } from './dto/page-history.dto';
 
 @UseGuards(JwtGuard)
 @Controller('pages')
@@ -24,13 +27,14 @@ export class PageController {
   constructor(
     private readonly pageService: PageService,
     private readonly pageOrderService: PageOrderingService,
+    private readonly pageHistoryService: PageHistoryService,
     private readonly workspaceService: WorkspaceService,
   ) {}
 
   @HttpCode(HttpStatus.OK)
   @Post('/details')
   async getPage(@Body() input: PageDetailsDto) {
-    return this.pageService.findWithoutYDoc(input.id);
+    return this.pageService.findOne(input.id);
   }
 
   @HttpCode(HttpStatus.CREATED)
@@ -118,4 +122,16 @@ export class PageController {
 
     return this.pageOrderService.convertToTree(workspaceId);
   }
+
+  @HttpCode(HttpStatus.OK)
+  @Post('/history')
+  async getPageHistory(@Body() dto: PageHistoryDto) {
+    return this.pageHistoryService.findHistoryByPageId(dto.pageId);
+  }
+
+  @HttpCode(HttpStatus.OK)
+  @Post('/history/details')
+  async get(@Body() dto: HistoryDetailsDto) {
+    return this.pageHistoryService.findOne(dto.id);
+  }
 }
diff --git a/server/src/core/page/page.module.ts b/server/src/core/page/page.module.ts
index b9aa68ef..02246c72 100644
--- a/server/src/core/page/page.module.ts
+++ b/server/src/core/page/page.module.ts
@@ -8,15 +8,24 @@ import { AuthModule } from '../auth/auth.module';
 import { WorkspaceModule } from '../workspace/workspace.module';
 import { PageOrderingService } from './services/page-ordering.service';
 import { PageOrdering } from './entities/page-ordering.entity';
+import { PageHistoryService } from './services/page-history.service';
+import { PageHistory } from './entities/page-history.entity';
+import { PageHistoryRepository } from './repositories/page-history.repository';
 
 @Module({
   imports: [
-    TypeOrmModule.forFeature([Page, PageOrdering]),
+    TypeOrmModule.forFeature([Page, PageOrdering, PageHistory]),
     AuthModule,
     WorkspaceModule,
   ],
   controllers: [PageController],
-  providers: [PageService, PageOrderingService, PageRepository],
-  exports: [PageService, PageOrderingService, PageRepository],
+  providers: [
+    PageService,
+    PageOrderingService,
+    PageHistoryService,
+    PageRepository,
+    PageHistoryRepository,
+  ],
+  exports: [PageService, PageOrderingService, PageHistoryService],
 })
 export class PageModule {}
diff --git a/server/src/core/page/repositories/page-history.repository.ts b/server/src/core/page/repositories/page-history.repository.ts
new file mode 100644
index 00000000..077984b8
--- /dev/null
+++ b/server/src/core/page/repositories/page-history.repository.ts
@@ -0,0 +1,26 @@
+import { DataSource, Repository } from 'typeorm';
+import { Injectable } from '@nestjs/common';
+import { PageHistory } from '../entities/page-history.entity';
+
+@Injectable()
+export class PageHistoryRepository extends Repository<PageHistory> {
+  constructor(private dataSource: DataSource) {
+    super(PageHistory, dataSource.createEntityManager());
+  }
+
+  async findById(pageId: string) {
+    return this.findOne({
+      where: {
+        id: pageId,
+      },
+      relations: ['lastUpdatedBy'],
+      select: {
+        lastUpdatedBy: {
+          id: true,
+          name: true,
+          avatarUrl: true,
+        },
+      },
+    });
+  }
+}
diff --git a/server/src/core/page/repositories/page.repository.ts b/server/src/core/page/repositories/page.repository.ts
index 7e29302d..6156dde8 100644
--- a/server/src/core/page/repositories/page.repository.ts
+++ b/server/src/core/page/repositories/page.repository.ts
@@ -8,33 +8,49 @@ export class PageRepository extends Repository<Page> {
     super(Page, dataSource.createEntityManager());
   }
 
-  async findById(pageId: string) {
-    return this.findOneBy({ id: pageId });
-  }
+  public baseFields = [
+    'page.id',
+    'page.title',
+    'page.slug',
+    'page.icon',
+    'page.coverPhoto',
+    'page.shareId',
+    'page.parentPageId',
+    'page.creatorId',
+    'page.lastUpdatedById',
+    'page.workspaceId',
+    'page.isLocked',
+    'page.status',
+    'page.publishedAt',
+    'page.createdAt',
+    'page.updatedAt',
+    'page.deletedAt',
+  ];
 
-  async findWithoutYDoc(pageId: string) {
+  private async baseFind(pageId: string, selectFields: string[]) {
     return this.dataSource
       .createQueryBuilder(Page, 'page')
       .where('page.id = :id', { id: pageId })
-      .select([
-        'page.id',
-        'page.title',
-        'page.slug',
-        'page.icon',
-        'page.coverPhoto',
-        'page.editor',
-        'page.shareId',
-        'page.parentPageId',
-        'page.creatorId',
-        'page.lastUpdatedById',
-        'page.workspaceId',
-        'page.isLocked',
-        'page.status',
-        'page.publishedAt',
-        'page.createdAt',
-        'page.updatedAt',
-        'page.deletedAt',
-      ])
+      .select(selectFields)
       .getOne();
   }
+
+  async findById(pageId: string) {
+    return this.baseFind(pageId, this.baseFields);
+  }
+
+  async findWithYDoc(pageId: string) {
+    const extendedFields = [...this.baseFields, 'page.ydoc'];
+    return this.baseFind(pageId, extendedFields);
+  }
+
+  async findWithContent(pageId: string) {
+    const extendedFields = [...this.baseFields, 'page.content'];
+    return this.baseFind(pageId, extendedFields);
+  }
+
+  async findWithAllFields(pageId: string) {
+    const extendedFields = [...this.baseFields, 'page.content', 'page.ydoc'];
+    return this.baseFind(pageId, extendedFields);
+  }
 }
diff --git a/server/src/core/page/services/page-history.service.ts b/server/src/core/page/services/page-history.service.ts
new file mode 100644
index 00000000..193bf683
--- /dev/null
+++ b/server/src/core/page/services/page-history.service.ts
@@ -0,0 +1,61 @@
+import { BadRequestException, Injectable } from '@nestjs/common';
+import { PageHistory } from '../entities/page-history.entity';
+import { Page } from '../entities/page.entity';
+import { PageHistoryRepository } from '../repositories/page-history.repository';
+
+@Injectable()
+export class PageHistoryService {
+  constructor(private pageHistoryRepo: PageHistoryRepository) {
+  }
+
+  async findOne(historyId: string): Promise<PageHistory> {
+    const history = await this.pageHistoryRepo.findById(historyId);
+    if (!history) {
+      throw new BadRequestException('History not found');
+    }
+    return history;
+  }
+
+  async saveHistory(page: Page): Promise<void> {
+    const pageHistory = new PageHistory();
+    pageHistory.pageId = page.id;
+    pageHistory.title = page.title;
+    pageHistory.content = page.content;
+    pageHistory.slug = page.slug;
+    pageHistory.icon = page.icon;
+    pageHistory.version = 1; // TODO: make incremental
+    pageHistory.coverPhoto = page.coverPhoto;
+    pageHistory.lastUpdatedById = page.lastUpdatedById ?? page.creatorId;
+    pageHistory.workspaceId = page.workspaceId;
+
+    await this.pageHistoryRepo.save(pageHistory);
+  }
+
+  async findHistoryByPageId(pageId: string, limit = 50, offset = 0) {
+    const history = await this.pageHistoryRepo
+      .createQueryBuilder('history')
+      .where('history.pageId = :pageId', { pageId })
+      .leftJoinAndSelect('history.lastUpdatedBy', 'user')
+      .select([
+        'history.id',
+        'history.pageId',
+        'history.title',
+        'history.slug',
+        'history.icon',
+        'history.coverPhoto',
+        'history.version',
+        'history.lastUpdatedById',
+        'history.workspaceId',
+        'history.createdAt',
+        'history.updatedAt',
+        'user.id',
+        'user.name',
+        'user.avatarUrl',
+      ])
+      .orderBy('history.updatedAt', 'DESC')
+      .offset(offset)
+      .take(limit)
+      .getMany();
+    return history;
+  }
+}
diff --git a/server/src/core/page/services/page.service.ts b/server/src/core/page/services/page.service.ts
index 43e152ea..c982cad0 100644
--- a/server/src/core/page/services/page.service.ts
+++ b/server/src/core/page/services/page.service.ts
@@ -35,8 +35,25 @@ export class PageService {
     return this.pageRepository.findById(pageId);
   }
 
-  async findWithoutYDoc(pageId: string) {
-    return this.pageRepository.findWithoutYDoc(pageId);
+  async findWithContent(pageId: string) {
+    return this.pageRepository.findWithContent(pageId);
+  }
+
+  async findWithYdoc(pageId: string) {
+    return this.pageRepository.findWithYDoc(pageId);
+  }
+
+  async findWithAllFields(pageId: string) {
+    return this.pageRepository.findWithAllFields(pageId);
+  }
+
+  async findOne(pageId: string): Promise<Page> {
+    const page = await this.findById(pageId);
+    if (!page) {
+      throw new BadRequestException('Page not found');
+    }
+
+    return page;
   }
 
   async create(
@@ -85,7 +102,7 @@ export class PageService {
       throw new BadRequestException(`Page not found`);
     }
 
-    return await this.pageRepository.findWithoutYDoc(pageId);
+    return await this.pageRepository.findById(pageId);
   }
 
   async updateState(
@@ -240,25 +257,7 @@ export class PageService {
     const pages = await this.pageRepository
       .createQueryBuilder('page')
       .where('page.workspaceId = :workspaceId', { workspaceId })
-      .select([
-        'page.id',
-        'page.title',
-        'page.slug',
-        'page.icon',
-        'page.coverPhoto',
-        'page.editor',
-        'page.shareId',
-        'page.parentPageId',
-        'page.creatorId',
-        'page.lastUpdatedById',
-        'page.workspaceId',
-        'page.isLocked',
-        'page.status',
-        'page.publishedAt',
-        'page.createdAt',
-        'page.updatedAt',
-        'page.deletedAt',
-      ])
+      .select(this.pageRepository.baseFields)
       .orderBy('page.updatedAt', 'DESC')
       .offset(offset)
       .take(limit)