chore: added error message for module name

* fix: limit svg file uploads

* chore: limit svg uploads

.idx/dev.nix

@@ -0,0 +1,16 @@
+{ pkgs, ... }: {
+
+  # Which nixpkgs channel to use.
+  channel = "stable-23.11"; # or "unstable"
+
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    pkgs.nodejs_20
+    pkgs.python3
+  ];
+
+  services.docker.enable = true;
+  services.postgres.enable = true;
+  services.redis.enable = true;
+
+}

admin/core/components/authentication/auth-banner.tsx

@@ -0,0 +1,29 @@
+import { FC } from "react";
+import { Info, X } from "lucide-react";
+// helpers
+import { TAuthErrorInfo } from "@/helpers/authentication.helper";
+
+type TAuthBanner = {
+  bannerData: TAuthErrorInfo | undefined;
+  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
+};
+
+export const AuthBanner: FC<TAuthBanner> = (props) => {
+  const { bannerData, handleBannerData } = props;
+
+  if (!bannerData) return <></>;
+  return (
+    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
+      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+        <Info size={16} className="text-custom-primary-100" />
+      </div>
+      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
+      <div
+        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        onClick={() => handleBannerData && handleBannerData(undefined)}
+      >
+        <X className="w-4 h-4 flex-shrink-0" />
+      </div>
+    </div>
+  );
+};

admin/core/components/authentication/index.ts

@@ -1,3 +1,4 @@
+export * from "./auth-banner";
 export * from "./email-config-switch";
 export * from "./password-config-switch";
 export * from "./authentication-method-card";

admin/core/components/login/sign-in-form.tsx

@@ -8,8 +8,16 @@ import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common";
 // helpers
+import {
+  authErrorHandler,
+  EAuthenticationErrorCodes,
+  EErrorAlertType,
+  TAuthErrorInfo,
+} from "@/helpers/authentication.helper";
+
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { AuthService } from "@/services/auth.service";
+import { AuthBanner } from "../authentication";
 // ui
 // icons
 
@@ -53,6 +61,7 @@ export const InstanceSignInForm: FC = (props) => {
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [formData, setFormData] = useState<TFormData>(defaultFromData);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
 
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
@@ -91,6 +100,15 @@ export const InstanceSignInForm: FC = (props) => {
     [formData.email, formData.password, isSubmitting]
   );
 
+  useEffect(() => {
+    if (errorCode) {
+      const errorDetail = authErrorHandler(errorCode?.toString() as EAuthenticationErrorCodes);
+      if (errorDetail) {
+        setErrorInfo(errorDetail);
+      }
+    }
+  }, [errorCode]);
+
   return (
     <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
       <div className="relative flex flex-col space-y-6">
@@ -103,7 +121,11 @@ export const InstanceSignInForm: FC = (props) => {
           </p>
         </div>
 
-        {errorData.type && errorData?.message && <Banner type="error" message={errorData?.message} />}
+        {errorData.type && errorData?.message ? (
+          <Banner type="error" message={errorData?.message} />
+        ) : (
+          <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
+        )}
 
         <form
           className="space-y-4"

apiserver/plane/api/serializers/module.py

@@ -71,6 +71,16 @@ class ModuleSerializer(BaseSerializer):
         project_id = self.context["project_id"]
         workspace_id = self.context["workspace_id"]
 
+        module_name = validated_data.get("name")
+        if module_name:
+            # Lookup for the module name in the module table for that project
+            if Module.objects.filter(
+                name=module_name, project_id=project_id
+            ).exists():
+                raise serializers.ValidationError(
+                    {"error": "Module with this name already exists"}
+                )
+
         module = Module.objects.create(**validated_data, project_id=project_id)
         if members is not None:
             ModuleMember.objects.bulk_create(
@@ -93,6 +103,19 @@ class ModuleSerializer(BaseSerializer):
 
     def update(self, instance, validated_data):
         members = validated_data.pop("members", None)
+        module_name = validated_data.get("name")
+        if module_name:
+            # Lookup for the module name in the module table for that project
+            if (
+                Module.objects.filter(
+                    name=module_name, project=instance.project
+                )
+                .exclude(id=instance.id)
+                .exists()
+            ):
+                raise serializers.ValidationError(
+                    {"error": "Module with this name already exists"}
+                )
 
         if members is not None:
             ModuleMember.objects.filter(module=instance).delete()

apiserver/plane/api/views/inbox.py

@@ -1,7 +1,7 @@
 # Python imports
 import json
 
-# Django improts
+# Django imports
 from django.core.serializers.json import DjangoJSONEncoder
 from django.utils import timezone
 from django.db.models import Q, Value, UUIDField
@@ -184,13 +184,8 @@ class InboxIssueAPIEndpoint(BaseAPIView):
             workspace__slug=slug, project_id=project_id
         ).first()
 
-        project = Project.objects.get(
-            workspace__slug=slug,
-            pk=project_id,
-        )
-
         # Inbox view
-        if inbox is None and not project.inbox_view:
+        if inbox is None:
             return Response(
                 {
                     "error": "Inbox is not enabled for this project enable it through the project's api"

apiserver/plane/app/serializers/__init__.py

@@ -92,6 +92,7 @@ from .page import (
     SubPageSerializer,
     PageDetailSerializer,
     PageVersionSerializer,
+    PageVersionDetailSerializer,
 )
 
 from .estimate import (

apiserver/plane/app/serializers/module.py

@@ -64,6 +64,16 @@ class ModuleWriteSerializer(BaseSerializer):
         members = validated_data.pop("member_ids", None)
         project = self.context["project"]
 
+        module_name = validated_data.get("name")
+        if module_name:
+            # Lookup for the module name in the module table for that project
+            if Module.objects.filter(
+                name=module_name, project=project
+            ).exists():
+                raise serializers.ValidationError(
+                    {"error": "Module with this name already exists"}
+                )
+
         module = Module.objects.create(**validated_data, project=project)
         if members is not None:
             ModuleMember.objects.bulk_create(
@@ -86,6 +96,19 @@ class ModuleWriteSerializer(BaseSerializer):
 
     def update(self, instance, validated_data):
         members = validated_data.pop("member_ids", None)
+        module_name = validated_data.get("name")
+        if module_name:
+            # Lookup for the module name in the module table for that project
+            if (
+                Module.objects.filter(
+                    name=module_name, project=instance.project
+                )
+                .exclude(id=instance.id)
+                .exists()
+            ):
+                raise serializers.ValidationError(
+                    {"error": "Module with this name already exists"}
+                )
 
         if members is not None:
             ModuleMember.objects.filter(module=instance).delete()
@@ -229,7 +252,14 @@ class ModuleDetailSerializer(ModuleSerializer):
     cancelled_estimate_points = serializers.FloatField(read_only=True)
 
     class Meta(ModuleSerializer.Meta):
-        fields = ModuleSerializer.Meta.fields + ["link_module", "sub_issues", "backlog_estimate_points", "unstarted_estimate_points", "started_estimate_points", "cancelled_estimate_points"]
+        fields = ModuleSerializer.Meta.fields + [
+            "link_module",
+            "sub_issues",
+            "backlog_estimate_points",
+            "unstarted_estimate_points",
+            "started_estimate_points",
+            "cancelled_estimate_points",
+        ]
 
 
 class ModuleUserPropertiesSerializer(BaseSerializer):

apiserver/plane/app/serializers/page.py

@@ -167,7 +167,40 @@ class PageLogSerializer(BaseSerializer):
 class PageVersionSerializer(BaseSerializer):
     class Meta:
         model = PageVersion
-        fields = "__all__"
+        fields = [
+            "id",
+            "workspace",
+            "page",
+            "last_saved_at",
+            "owned_by",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+        ]
+        read_only_fields = [
+            "workspace",
+            "page",
+        ]
+
+
+class PageVersionDetailSerializer(BaseSerializer):
+    class Meta:
+        model = PageVersion
+        fields = [
+            "id",
+            "workspace",
+            "page",
+            "last_saved_at",
+            "description_binary",
+            "description_html",
+            "description_json",
+            "owned_by",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+        ]
         read_only_fields = [
             "workspace",
             "page",

apiserver/plane/app/serializers/user.py

@@ -16,26 +16,39 @@ from .base import BaseSerializer
 class UserSerializer(BaseSerializer):
     class Meta:
         model = User
-        fields = "__all__"
+        # Exclude password field from the serializer
+        fields = [
+            field.name
+            for field in User._meta.fields
+            if field.name != "password"
+        ]
+        # Make all system fields and email read only
         read_only_fields = [
             "id",
+            "username",
+            "mobile_number",
+            "email",
+            "token",
             "created_at",
             "updated_at",
             "is_superuser",
             "is_staff",
+            "is_managed",
             "last_active",
             "last_login_time",
             "last_logout_time",
             "last_login_ip",
             "last_logout_ip",
             "last_login_uagent",
-            "token_updated_at",
+            "last_location",
+            "last_login_medium",
+            "created_location",
             "is_bot",
             "is_password_autoset",
             "is_email_verified",
             "is_active",
+            "token_updated_at",
         ]
-        extra_kwargs = {"password": {"write_only": True}}
 
         # If the user has already filled first name or last name then he is onboarded
         def get_is_onboarded(self, obj):
@@ -208,9 +221,15 @@ class ProfileSerializer(BaseSerializer):
     class Meta:
         model = Profile
         fields = "__all__"
+        read_only_fields = [
+            "user",
+        ]
 
 
 class AccountSerializer(BaseSerializer):
     class Meta:
         model = Account
         fields = "__all__"
+        read_only_fields = [
+            "user",
+        ]

apiserver/plane/app/urls/cycle.py

@@ -6,6 +6,8 @@ from plane.app.views import (
     CycleIssueViewSet,
     CycleDateCheckEndpoint,
     CycleFavoriteViewSet,
+    CycleProgressEndpoint,
+    CycleAnalyticsEndpoint,
     TransferCycleIssueEndpoint,
     CycleUserPropertiesEndpoint,
     CycleArchiveUnarchiveEndpoint,
@@ -106,4 +108,14 @@ urlpatterns = [
         CycleArchiveUnarchiveEndpoint.as_view(),
         name="cycle-archive-unarchive",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/progress/",
+        CycleProgressEndpoint.as_view(),
+        name="project-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/analytics/",
+        CycleAnalyticsEndpoint.as_view(),
+        name="project-cycle",
+    ),
 ]

apiserver/plane/app/urls/issue.py

@@ -20,6 +20,7 @@ from plane.app.views import (
     IssueViewSet,
     LabelViewSet,
     BulkArchiveIssuesEndpoint,
+    IssuePaginatedViewSet,
 )
 
 urlpatterns = [
@@ -38,6 +39,12 @@ urlpatterns = [
         ),
         name="project-issue",
     ),
+    # updated v1 paginated issues
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/v2/issues/",
+        IssuePaginatedViewSet.as_view({"get": "list"}),
+        name="project-issues-paginated",
+    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:pk>/",
         IssueViewSet.as_view(
@@ -303,5 +310,5 @@ urlpatterns = [
             }
         ),
         name="project-issue-draft",
-    )
+    ),
 ]

apiserver/plane/app/views/__init__.py

@@ -98,6 +98,8 @@ from .cycle.base import (
     CycleUserPropertiesEndpoint,
     CycleViewSet,
     TransferCycleIssueEndpoint,
+    CycleAnalyticsEndpoint,
+    CycleProgressEndpoint,
 )
 from .cycle.issue import (
     CycleIssueViewSet,
@@ -112,6 +114,7 @@ from .issue.base import (
     IssueViewSet,
     IssueUserDisplayPropertyEndpoint,
     BulkDeleteIssuesEndpoint,
+    IssuePaginatedViewSet,
 )
 
 from .issue.activity import (

apiserver/plane/app/views/issue/base.py

@@ -57,10 +57,10 @@ from plane.utils.paginator import (
 from .. import BaseAPIView, BaseViewSet
 from plane.utils.user_timezone_converter import user_timezone_converter
 from plane.bgtasks.recent_visited_task import recent_visited_task
+from plane.utils.global_paginator import paginate
 
 
 class IssueListEndpoint(BaseAPIView):
-
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
     def get(self, request, slug, project_id):
         issue_ids = request.GET.get("issues", False)
@@ -599,7 +599,6 @@ class IssueViewSet(BaseViewSet):
 
 
 class IssueUserDisplayPropertyEndpoint(BaseAPIView):
-
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST, ROLE.VIEWER])
     def patch(self, request, slug, project_id):
         issue_property = IssueUserProperty.objects.get(
@@ -630,10 +629,8 @@ class IssueUserDisplayPropertyEndpoint(BaseAPIView):
 
 
 class BulkDeleteIssuesEndpoint(BaseAPIView):
-
     @allow_permission([ROLE.ADMIN])
     def delete(self, request, slug, project_id):
-
         issue_ids = request.data.get("issue_ids", [])
 
         if not len(issue_ids):
@@ -654,3 +651,141 @@ class BulkDeleteIssuesEndpoint(BaseAPIView):
             {"message": f"{total_issues} issues were deleted"},
             status=status.HTTP_200_OK,
         )
+
+
+class IssuePaginatedViewSet(BaseViewSet):
+    def get_queryset(self):
+        workspace_slug = self.kwargs.get("slug")
+        project_id = self.kwargs.get("project_id")
+
+        return (
+            Issue.issue_objects.filter(
+                workspace__slug=workspace_slug, project_id=project_id
+            )
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels", "issue_module__module")
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(
+                    issue=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        ).distinct()
+
+    def process_paginated_result(self, fields, results, timezone):
+        paginated_data = results.values(*fields)
+
+        # converting the datetime fields in paginated data
+        datetime_fields = ["created_at", "updated_at"]
+        paginated_data = user_timezone_converter(
+            paginated_data, datetime_fields, timezone
+        )
+
+        return paginated_data
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    def list(self, request, slug, project_id):
+        cursor = request.GET.get("cursor", None)
+        is_description_required = request.GET.get("description", False)
+        updated_at = request.GET.get("updated_at__gte", None)
+
+        # required fields
+        required_fields = [
+            "id",
+            "name",
+            "state_id",
+            "sort_order",
+            "completed_at",
+            "estimate_point",
+            "priority",
+            "start_date",
+            "target_date",
+            "sequence_id",
+            "project_id",
+            "parent_id",
+            "cycle_id",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+            "is_draft",
+            "archived_at",
+            "deleted_at",
+            "module_ids",
+            "label_ids",
+            "assignee_ids",
+            "link_count",
+            "attachment_count",
+            "sub_issues_count",
+        ]
+
+        if is_description_required:
+            required_fields.append("description_html")
+
+        # querying issues
+        base_queryset = Issue.issue_objects.filter(
+            workspace__slug=slug, project_id=project_id
+        ).order_by("updated_at")
+        queryset = self.get_queryset().order_by("updated_at")
+
+        # filtering issues by greater then updated_at given by the user
+        if updated_at:
+            base_queryset = base_queryset.filter(updated_at__gte=updated_at)
+            queryset = queryset.filter(updated_at__gte=updated_at)
+
+        queryset = queryset.annotate(
+            label_ids=Coalesce(
+                ArrayAgg(
+                    "labels__id",
+                    distinct=True,
+                    filter=~Q(labels__id__isnull=True),
+                ),
+                Value([], output_field=ArrayField(UUIDField())),
+            ),
+            assignee_ids=Coalesce(
+                ArrayAgg(
+                    "assignees__id",
+                    distinct=True,
+                    filter=~Q(assignees__id__isnull=True)
+                    & Q(assignees__member_project__is_active=True),
+                ),
+                Value([], output_field=ArrayField(UUIDField())),
+            ),
+            module_ids=Coalesce(
+                ArrayAgg(
+                    "issue_module__module_id",
+                    distinct=True,
+                    filter=~Q(issue_module__module_id__isnull=True)
+                    & Q(issue_module__module__archived_at__isnull=True),
+                ),
+                Value([], output_field=ArrayField(UUIDField())),
+            ),
+        )
+
+        paginated_data = paginate(
+            base_queryset=base_queryset,
+            queryset=queryset,
+            cursor=cursor,
+            on_result=lambda results: self.process_paginated_result(
+                required_fields, results, request.user.user_timezone
+            ),
+        )
+
+        return Response(paginated_data, status=status.HTTP_200_OK)

apiserver/plane/app/views/page/version.py

@@ -5,16 +5,18 @@ from rest_framework.response import Response
 # Module imports
 from plane.db.models import PageVersion
 from ..base import BaseAPIView
-from plane.app.permissions import ProjectEntityPermission
-from plane.app.serializers import PageVersionSerializer
+from plane.app.serializers import (
+    PageVersionSerializer,
+    PageVersionDetailSerializer,
+)
+from plane.app.permissions import allow_permission, ROLE
 
 
 class PageVersionEndpoint(BaseAPIView):
 
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST]
+    )
     def get(self, request, slug, project_id, page_id, pk=None):
         # Check if pk is provided
         if pk:
@@ -25,7 +27,7 @@ class PageVersionEndpoint(BaseAPIView):
                 pk=pk,
             )
             # Serialize the page version
-            serializer = PageVersionSerializer(page_version)
+            serializer = PageVersionDetailSerializer(page_version)
             return Response(serializer.data, status=status.HTTP_200_OK)
         # Return all page versions
         page_versions = PageVersion.objects.filter(

apiserver/plane/db/models/asset.py

@@ -1,11 +1,11 @@
 # Python imports
 from uuid import uuid4
 
+# Django import
 from django.conf import settings
 from django.core.exceptions import ValidationError
-
-# Django import
 from django.db import models
+from django.core.validators import FileExtensionValidator
 
 # Module import
 from .base import BaseModel
@@ -32,6 +32,7 @@ class FileAsset(BaseModel):
     asset = models.FileField(
         upload_to=get_upload_path,
         validators=[
+            FileExtensionValidator(allowed_extensions=["jpg", "jpeg", "png"]),
             file_size,
         ],
     )

apiserver/plane/utils/global_paginator.py

@@ -0,0 +1,78 @@
+# constants
+PAGINATOR_MAX_LIMIT = 1000
+
+
+class PaginateCursor:
+    def __init__(self, current_page_size: int, current_page: int, offset: int):
+        self.current_page_size = current_page_size
+        self.current_page = current_page
+        self.offset = offset
+
+    def __str__(self):
+        return f"{self.current_page_size}:{self.current_page}:{self.offset}"
+
+    @classmethod
+    def from_string(self, value):
+        """Return the cursor value from string format"""
+        try:
+            bits = value.split(":")
+            if len(bits) != 3:
+                raise ValueError(
+                    "Cursor must be in the format 'value:offset:is_prev'"
+                )
+            return self(int(bits[0]), int(bits[1]), int(bits[2]))
+        except (TypeError, ValueError) as e:
+            raise ValueError(f"Invalid cursor format: {e}")
+
+
+def paginate(base_queryset, queryset, cursor, on_result):
+    # validating for cursor
+    if cursor is None:
+        cursor_object = PaginateCursor(PAGINATOR_MAX_LIMIT, 0, 0)
+    else:
+        cursor_object = PaginateCursor.from_string(cursor)
+
+    # getting the issues count
+    total_results = base_queryset.count()
+    page_size = min(cursor_object.current_page_size, PAGINATOR_MAX_LIMIT)
+
+    # Calculate the start and end index for the paginated data
+    start_index = 0
+    if cursor_object.current_page > 0:
+        start_index = cursor_object.current_page * page_size
+    end_index = min(start_index + page_size, total_results)
+
+    # Get the paginated data
+    paginated_data = queryset[start_index:end_index]
+
+    # Create the pagination info object
+    prev_cursor = f"{page_size}:{cursor_object.current_page-1}:0"
+    cursor = f"{page_size}:{cursor_object.current_page}:0"
+    next_cursor = None
+    if end_index < total_results:
+        next_cursor = f"{page_size}:{cursor_object.current_page+1}:0"
+
+    prev_page_results = False
+    if cursor_object.current_page > 0:
+        prev_page_results = True
+
+    next_page_results = False
+    if next_cursor:
+        next_page_results = True
+
+    if on_result:
+        paginated_data = on_result(paginated_data)
+
+    # returning the result
+    paginated_data = {
+        "prev_cursor": prev_cursor,
+        "cursor": cursor,
+        "next_cursor": next_cursor,
+        "prev_page_results": prev_page_results,
+        "next_page_results": next_page_results,
+        "page_count": len(paginated_data),
+        "total_results": total_results,
+        "results": paginated_data,
+    }
+
+    return paginated_data

apiserver/requirements/base.txt

@@ -61,4 +61,3 @@ zxcvbn==4.4.28
 pytz==2024.1
 # jwt
 PyJWT==2.8.0
-

packages/editor/package.json

@@ -32,6 +32,7 @@
     "@plane/ui": "*",
     "@tiptap/core": "^2.1.13",
     "@tiptap/extension-blockquote": "^2.1.13",
+    "@tiptap/extension-character-count": "^2.6.5",
     "@tiptap/extension-collaboration": "^2.3.2",
     "@tiptap/extension-image": "^2.1.13",
     "@tiptap/extension-list-item": "^2.1.13",

packages/editor/src/core/extensions/extensions.tsx

@@ -1,3 +1,4 @@
+import CharacterCount from "@tiptap/extension-character-count";
 import Placeholder from "@tiptap/extension-placeholder";
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
@@ -157,4 +158,5 @@ export const CoreEditorExtensions = ({
     },
     includeChildren: true,
   }),
+  CharacterCount,
 ];

packages/editor/src/core/helpers/common.ts

@@ -1,7 +1,5 @@
-import { Extensions, generateJSON, getSchema } from "@tiptap/core";
-import { Selection } from "@tiptap/pm/state";
+import { EditorState, Selection } from "@tiptap/pm/state";
 import { clsx, type ClassValue } from "clsx";
-import { CoreEditorExtensionsWithoutProps } from "src/core/extensions/core-without-props";
 import { twMerge } from "tailwind-merge";
 
 interface EditorClassNames {
@@ -61,3 +59,12 @@ export const isValidHttpUrl = (string: string): boolean => {
 
   return url.protocol === "http:" || url.protocol === "https:";
 };
+
+export const getParagraphCount = (editorState: EditorState | undefined) => {
+  if (!editorState) return 0;
+  let paragraphCount = 0;
+  editorState.doc.descendants((node) => {
+    if (node.type.name === "paragraph" && node.content.size > 0) paragraphCount++;
+  });
+  return paragraphCount;
+};

packages/editor/src/core/hooks/use-editor.ts

@@ -8,6 +8,7 @@ import { getEditorMenuItems } from "@/components/menus";
 // extensions
 import { CoreEditorExtensions } from "@/extensions";
 // helpers
+import { getParagraphCount } from "@/helpers/common";
 import { insertContentAtSavedSelection } from "@/helpers/insert-content-at-cursor-position";
 import { IMarking, scrollSummary } from "@/helpers/scroll-to-node";
 // plane editor providers
@@ -126,8 +127,8 @@ export const useEditor = (props: CustomEditorProps) => {
   useImperativeHandle(
     forwardedRef,
     () => ({
-      clearEditor: () => {
-        editorRef.current?.commands.clearContent();
+      clearEditor: (emitUpdate = false) => {
+        editorRef.current?.commands.clearContent(emitUpdate);
       },
       setEditorValue: (content: string) => {
         editorRef.current?.commands.setContent(content);
@@ -249,6 +250,11 @@ export const useEditor = (props: CustomEditorProps) => {
           editor.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
         }
       },
+      documentInfo: {
+        characters: editorRef.current?.storage?.characterCount?.characters?.() ?? 0,
+        paragraphs: getParagraphCount(editorRef.current?.state),
+        words: editorRef.current?.storage?.characterCount?.words?.() ?? 0,
+      },
     }),
     [editorRef, savedSelection, fileHandler.upload]
   );

packages/editor/src/core/hooks/use-read-only-editor.ts

@@ -4,6 +4,7 @@ import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
 // extensions
 import { CoreReadOnlyEditorExtensions } from "@/extensions";
 // helpers
+import { getParagraphCount } from "@/helpers/common";
 import { IMarking, scrollSummary } from "@/helpers/scroll-to-node";
 // props
 import { CoreReadOnlyEditorProps } from "@/props";
@@ -81,6 +82,11 @@ export const useReadOnlyEditor = ({
       if (!editorRef.current) return;
       scrollSummary(editorRef.current, marking);
     },
+    documentInfo: {
+      characters: editorRef.current?.storage?.characterCount?.characters?.() ?? 0,
+      paragraphs: getParagraphCount(editorRef.current?.state),
+      words: editorRef.current?.storage?.characterCount?.words?.() ?? 0,
+    },
   }));
 
   if (!editor) {

packages/editor/src/core/types/editor.ts

@@ -6,9 +6,14 @@ import { IMentionHighlight, IMentionSuggestion, TDisplayConfig, TEditorCommands,
 export type EditorReadOnlyRefApi = {
   getMarkDown: () => string;
   getHTML: () => string;
-  clearEditor: () => void;
+  clearEditor: (emitUpdate?: boolean) => void;
   setEditorValue: (content: string) => void;
   scrollSummary: (marking: IMarking) => void;
+  documentInfo: {
+    characters: number;
+    paragraphs: number;
+    words: number;
+  };
 };
 
 export interface EditorRefApi extends EditorReadOnlyRefApi {

packages/types/src/pages.d.ts

@@ -48,3 +48,19 @@ export type TPageFilters = {
 };
 
 export type TPageEmbedType = "mention" | "issue";
+
+export type TPageVersion = {
+  created_at: string;
+  created_by: string;
+  deleted_at: string | null;
+  description_binary?: string | null;
+  description_html?: string | null;
+  description_json?: object;
+  id: string;
+  last_saved_at: string;
+  owned_by: string;
+  page: string;
+  updated_at: string;
+  updated_by: string;
+  workspace: string;
+}

packages/ui/src/dropdowns/custom-menu.tsx

@@ -35,6 +35,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     tabIndex,
     closeOnSelect,
     openOnHover = false,
+    useCaptureForOutsideClick = false,
   } = props;
 
   const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
@@ -88,10 +89,10 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     }
   };
 
-  useOutsideClickDetector(dropdownRef, closeDropdown);
+  useOutsideClickDetector(dropdownRef, closeDropdown, useCaptureForOutsideClick);
 
   let menuItems = (
-    <Menu.Items className={cn("fixed z-10", menuItemsClassName)} static>
+    <Menu.Items data-prevent-outside-click={!!portalElement} className={cn("fixed z-10", menuItemsClassName)} static>
       <div
         className={cn(
           "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
@@ -220,4 +221,4 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
 
 CustomMenu.MenuItem = MenuItem;
 
-export { CustomMenu };
+export { CustomMenu };

packages/ui/src/dropdowns/helper.tsx

@@ -17,6 +17,7 @@ export interface IDropdownProps {
   optionsClassName?: string;
   placement?: Placement;
   tabIndex?: number;
+  useCaptureForOutsideClick?: boolean;
 }
 
 export interface ICustomMenuDropdownProps extends IDropdownProps {

packages/ui/src/hooks/use-outside-click-detector.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 
 // TODO: move it to helpers package
-const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void, useCapture = false) => {
   const handleClick = (event: MouseEvent) => {
     if (ref.current && !ref.current.contains(event.target as Node)) {
       // get all the element with attribute name data-prevent-outside-click
@@ -31,10 +31,10 @@ const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: ()
   };
 
   useEffect(() => {
-    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("mousedown", handleClick, useCapture);
 
     return () => {
-      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("mousedown", handleClick, useCapture);
     };
   });
 };

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx

@@ -2,11 +2,11 @@
 
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import useSWR from "swr";
 // components
 import { EmptyState } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { CycleDetailsSidebar } from "@/components/cycles";
+import useCyclesDetails from "@/components/cycles/active-cycle/use-cycles-details";
 import { CycleLayoutRoot } from "@/components/issues/issue-layouts";
 // constants
 // import { EIssuesStoreType } from "@/constants/issue";
@@ -24,18 +24,17 @@ const CycleDetailPage = observer(() => {
   const router = useAppRouter();
   const { workspaceSlug, projectId, cycleId } = useParams();
   // store hooks
-  const { fetchCycleDetails, getCycleById } = useCycle();
+  const { getCycleById, loader } = useCycle();
   const { getProjectById } = useProject();
   // const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
   // hooks
   const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
-  // fetching cycle details
-  const { error } = useSWR(
-    workspaceSlug && projectId && cycleId ? `CYCLE_DETAILS_${cycleId.toString()}` : null,
-    workspaceSlug && projectId && cycleId
-      ? () => fetchCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString())
-      : null
-  );
+
+  useCyclesDetails({
+    workspaceSlug: workspaceSlug.toString(),
+    projectId: projectId.toString(),
+    cycleId: cycleId.toString(),
+  });
   // derived values
   const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
   const cycle = cycleId ? getCycleById(cycleId.toString()) : undefined;
@@ -52,7 +51,7 @@ const CycleDetailPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      {error ? (
+      {!cycle && !loader ? (
         <EmptyState
           image={emptyCycle}
           title="Cycle does not exist"
@@ -71,7 +70,7 @@ const CycleDetailPage = observer(() => {
             {cycleId && !isSidebarCollapsed && (
               <div
                 className={cn(
-                  "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm fixed right-0 top-0 z-10"
+                  "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 top-0 z-[13]"
                 )}
                 style={{
                   boxShadow:

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx

@@ -69,7 +69,7 @@ const ModuleIssuesPage = observer(() => {
           {moduleId && !isSidebarCollapsed && (
             <div
               className={cn(
-                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm fixed right-0 top-0 z-10"
+                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 top-0 z-[13]"
               )}
               style={{
                 boxShadow:

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx

@@ -64,7 +64,7 @@ const PageDetailsPage = observer(() => {
     <>
       <PageHead title={name} />
       <div className="flex h-full flex-col justify-between">
-        <div className="h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
+        <div className="relative h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
           <PageRoot page={page} projectId={projectId.toString()} workspaceSlug={workspaceSlug.toString()} />
           <IssuePeekOverview />
         </div>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import { FileText } from "lucide-react";
 // types
 import { TLogoProps } from "@plane/types";
@@ -10,8 +10,10 @@ import { TLogoProps } from "@plane/types";
 import { Breadcrumbs, Button, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
+import { PageEditInformationPopover } from "@/components/pages";
 // helpers
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
+import { getPageName } from "@/helpers/page.helper";
 // hooks
 import { usePage, useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -25,11 +27,13 @@ export interface IPagesHeaderProps {
 export const PageDetailsHeader = observer(() => {
   // router
   const { workspaceSlug, pageId } = useParams();
+  const searchParams = useSearchParams();
   // state
   const [isOpen, setIsOpen] = useState(false);
   // store hooks
   const { currentProjectDetails, loader } = useProject();
-  const { isContentEditable, isSubmitting, name, logo_props, updatePageLogo } = usePage(pageId?.toString() ?? "");
+  const page = usePage(pageId?.toString() ?? "");
+  const { isContentEditable, isSubmitting, name, logo_props, updatePageLogo } = page;
   // use platform
   const { isMobile, platform } = usePlatformOS();
   // derived values
@@ -55,6 +59,9 @@ export const PageDetailsHeader = observer(() => {
     }
   };
 
+  const pageTitle = getPageName(name);
+  const isVersionHistoryOverlayActive = !!searchParams.get("version");
+
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
@@ -143,9 +150,9 @@ export const PageDetailsHeader = observer(() => {
                           }
                         />
                       </div>
-                      <Tooltip tooltipContent={name ?? "Page"} position="bottom" isMobile={isMobile}>
+                      <Tooltip tooltipContent={pageTitle} position="bottom" isMobile={isMobile}>
                         <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">
-                          {name ?? "Page"}
+                          {pageTitle}
                         </div>
                       </Tooltip>
                     </div>
@@ -156,8 +163,9 @@ export const PageDetailsHeader = observer(() => {
           </Breadcrumbs>
         </div>
       </div>
+      <PageEditInformationPopover page={page} />
       <PageDetailsHeaderExtraActions />
-      {isContentEditable && (
+      {isContentEditable && !isVersionHistoryOverlayActive && (
         <Button
           variant="primary"
           size="sm"

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx

@@ -3,11 +3,12 @@
 import { AppHeader, ContentWrapper } from "@/components/core";
 // local components
 import { ProjectViewsHeader } from "./header";
+import { ViewMobileHeader } from "./mobile-header";
 
 export default function ProjectViewsListLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <AppHeader header={<ProjectViewsHeader />} />
+      <AppHeader header={<ProjectViewsHeader />} mobileHeader={<ViewMobileHeader />} />
       <ContentWrapper>{children}</ContentWrapper>
     </>
   );

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { observer } from "mobx-react";
+// icons
+import { ChevronDown, ListFilter } from "lucide-react";
+// components
+import { FiltersDropdown } from "@/components/issues/issue-layouts";
+import { ViewFiltersSelection } from "@/components/views/filters/filter-selection";
+import { ViewOrderByDropdown } from "@/components/views/filters/order-by";
+// hooks
+import { useMember, useProjectView } from "@/hooks/store";
+
+export const ViewMobileHeader = observer(() => {
+  // store hooks
+  const { filters, updateFilters } = useProjectView();
+  const {
+    project: { projectMemberIds },
+  } = useMember();
+
+  return (
+    <>
+      <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
+        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+          <ViewOrderByDropdown
+            sortBy={filters.sortBy}
+            sortKey={filters.sortKey}
+            onChange={(val) => {
+              if (val.key) updateFilters("sortKey", val.key);
+              if (val.order) updateFilters("sortBy", val.order);
+            }}
+            isMobile
+          />
+        </div>
+        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+          <FiltersDropdown
+            icon={<ListFilter className="h-3 w-3" />}
+            title="Filters"
+            placement="bottom-end"
+            isFiltersApplied={false}
+            menuButton={
+              <span className="flex items-center text-sm text-custom-text-200">
+                Filters
+                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
+              </span>
+            }
+          >
+            <ViewFiltersSelection
+              filters={filters}
+              handleFiltersUpdate={updateFilters}
+              memberIds={projectMemberIds ?? undefined}
+            />
+          </FiltersDropdown>
+        </div>
+      </div>
+    </>
+  );
+});

web/app/[workspaceSlug]/(projects)/sidebar.tsx

@@ -74,7 +74,7 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
           })}
         />
         <div
-          className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-2", {
+          className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-2 py-0.5", {
             "vertical-scrollbar px-4": !sidebarCollapsed,
           })}
         >

web/app/layout.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import Script from "next/script";
 // styles
 import "@/styles/globals.css";
@@ -28,6 +28,15 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport: Viewport = {
+  minimumScale: 1,
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  width: "device-width",
+  viewportFit: "cover",
+};
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   const isSessionRecorderEnabled = parseInt(process.env.NEXT_PUBLIC_ENABLE_SESSION_RECORDER || "0");
 
@@ -51,10 +60,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180x180.png" />
         <link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png" />
         <link rel="manifest" href="/manifest.json" />
-        <meta
-          name="viewport"
-          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
-        />
         {/* preloading */}
         <link rel="preload" href={`${API_BASE_URL}/api/instances/`} as="fetch" crossOrigin="use-credentials" />
         <link rel="preload" href={`${API_BASE_URL}/api/users/me/ `} as="fetch" crossOrigin="use-credentials" />
@@ -67,10 +72,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           crossOrigin="use-credentials"
         />
       </head>
-      <body>
-        <div id="context-menu-portal" />
+      <body className={`h-screen w-screen`}>
         <AppProvider>
-          <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>{children}</div>
+          <div className={`app-container h-full w-full flex flex-col overflow-hidden`}>
+            <div id="context-menu-portal" />
+            <div className="h-full w-full overflow-hidden bg-custom-background-100">{children}</div>
+          </div>
         </AppProvider>
       </body>
       {process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && (

web/app/profile/layout.tsx

@@ -19,7 +19,7 @@ export default function ProfileSettingsLayout(props: Props) {
     <>
       <CommandPalette />
       <AuthenticationWrapper>
-        <div className="relative flex h-screen w-full overflow-hidden">
+        <div className="relative flex h-full w-full overflow-hidden">
           <ProfileLayoutSidebar />
           <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
             <div className="h-full w-full overflow-hidden">{children}</div>

web/app/profile/sidebar.tsx

@@ -12,6 +12,8 @@ import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 import { SidebarNavItem } from "@/components/sidebar";
 // constants
 import { PROFILE_ACTION_LINKS } from "@/constants/profile";
+// helpers
+import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useUser, useUserSettings, useWorkspace } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
@@ -117,11 +119,11 @@ export const ProfileLayoutSidebar = observer(() => {
             )}
           </div>
         </Link>
-        <div className="flex flex-shrink-0 flex-col overflow-x-hidden px-4">
+        <div className="flex flex-shrink-0 flex-col overflow-x-hidden">
           {!sidebarCollapsed && (
-            <h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
+            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
           )}
-          <div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1 overflow-y-auto">
+          <div className="vertical-scrollbar scrollbar-sm mt-2 px-4 h-full space-y-1 overflow-y-auto">
             {PROFILE_ACTION_LINKS.map((link) => {
               if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
 
@@ -150,12 +152,17 @@ export const ProfileLayoutSidebar = observer(() => {
             })}
           </div>
         </div>
-        <div className="flex flex-col overflow-x-hidden px-4">
+        <div className="flex flex-col overflow-x-hidden">
           {!sidebarCollapsed && (
-            <h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
+            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
           )}
           {workspacesList && workspacesList.length > 0 && (
-            <div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1.5 overflow-y-auto">
+            <div
+              className={cn("vertical-scrollbar scrollbar-xs mt-2 px-4 h-full space-y-1.5 overflow-y-auto", {
+                "scrollbar-sm": !sidebarCollapsed,
+                "ml-2.5 px-1": sidebarCollapsed,
+              })}
+            >
               {workspacesList.map((workspace) => (
                 <Link
                   key={workspace.id}
@@ -193,7 +200,7 @@ export const ProfileLayoutSidebar = observer(() => {
               ))}
             </div>
           )}
-          <div className="mt-1.5">
+          <div className="mt-1.5 px-4">
             {WORKSPACE_ACTION_LINKS.map((link) => (
               <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
                 <Tooltip

web/ce/components/workspace/upgrade/pro-plan-upgrade.tsx

@@ -15,19 +15,33 @@ type TProPiceFrequency = "month" | "year";
 
 type TProPlanPrice = {
   key: string;
-  price: string;
+  currency: string;
+  price: number;
   recurring: TProPiceFrequency;
 };
 
+// constants
+export const calculateYearlyDiscount = (monthlyPrice: number, yearlyPricePerMonth: number): number => {
+  const monthlyCost = monthlyPrice * 12;
+  const yearlyCost = yearlyPricePerMonth * 12;
+  const amountSaved = monthlyCost - yearlyCost;
+  const discountPercentage = (amountSaved / monthlyCost) * 100;
+  return Math.floor(discountPercentage);
+};
+
 const PRO_PLAN_PRICES: TProPlanPrice[] = [
-  { key: "monthly", price: "$7", recurring: "month" },
-  { key: "yearly", price: "$5", recurring: "year" },
+  { key: "monthly", currency: "$", price: 8, recurring: "month" },
+  { key: "yearly", currency: "$", price: 6, recurring: "year" },
 ];
 
 export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
   const { basePlan, features, verticalFeatureList = false, extraFeatures } = props;
   // states
   const [selectedPlan, setSelectedPlan] = useState<TProPiceFrequency>("month");
+  // derived
+  const monthlyPrice = PRO_PLAN_PRICES.find((price) => price.recurring === "month")?.price ?? 0;
+  const yearlyPrice = PRO_PLAN_PRICES.find((price) => price.recurring === "year")?.price ?? 0;
+  const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
   // env
   const PRO_PLAN_MONTHLY_PAYMENT_URL = process.env.NEXT_PUBLIC_PRO_PLAN_MONTHLY_PAYMENT_URL ?? "https://plane.so/pro";
   const PRO_PLAN_YEARLY_PAYMENT_URL = process.env.NEXT_PUBLIC_PRO_PLAN_YEARLY_PAYMENT_URL ?? "https://plane.so/pro";
@@ -55,7 +69,7 @@ export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
                   {price.recurring === "year" && ("Yearly" as string)}
                   {price.recurring === "year" && (
                     <span className="bg-gradient-to-r from-[#C78401] to-[#896828] text-white rounded-full px-2 py-1 ml-1 text-xs">
-                      -28%
+                      -{yearlyDiscount}%
                     </span>
                   )}
                 </>
@@ -69,8 +83,8 @@ export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
               <div className="pt-6 pb-4 text-center font-semibold">
                 <div className="text-2xl">Plane Pro</div>
                 <div className="text-3xl">
-                  {price.recurring === "month" && "$7"}
-                  {price.recurring === "year" && "$5"}
+                  {price.currency}
+                  {price.price}
                 </div>
                 <div className="text-sm text-custom-text-300">a user per month</div>
               </div>

web/ce/constants/project/settings/features.tsx

@@ -16,18 +16,20 @@ export type TFeatureList = {
 export type TProjectFeatures = {
   [key: string]: {
     title: string;
+    description: string;
     featureList: TFeatureList;
   };
 };
 
 export const PROJECT_FEATURES_LIST: TProjectFeatures = {
   project_features: {
-    title: "Features",
+    title: "Projects and issues",
+    description: "Toggle these on or off this project.",
     featureList: {
       cycles: {
         property: "cycle_view",
         title: "Cycles",
-        description: "Time-box issues and boost momentum, similar to sprints in scrum.",
+        description: "Timebox work as you see fit per project and change frequency from one period to the next.",
         icon: <ContrastIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -35,7 +37,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
       modules: {
         property: "module_view",
         title: "Modules",
-        description: "Group multiple issues together and track the progress.",
+        description: "Group work into sub-project-like set-ups with their own leads and assignees.",
         icon: <DiceIcon width={20} height={20} className="flex-shrink-0 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -43,7 +45,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
       views: {
         property: "issue_views_view",
         title: "Views",
-        description: "Apply filters to issues and save them to analyse and investigate work.",
+        description: "Save sorts, filters, and display options for later or share them.",
         icon: <Layers className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -51,7 +53,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
       pages: {
         property: "page_view",
         title: "Pages",
-        description: "Document ideas, feature requirements, discussions within your project.",
+        description: "Write anything like you write anything.",
         icon: <FileText className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -59,7 +61,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
       inbox: {
         property: "inbox_view",
         title: "Intake",
-        description: "Capture external inputs, move valid issues to workflow.",
+        description: "Consider and discuss issues before you add them to your project.",
         icon: <Intake className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -67,12 +69,13 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
     },
   },
   project_others: {
-    title: "Others",
+    title: "Work management",
+    description: "Available only on some plans as indicated by the label next to the feature below.",
     featureList: {
       is_time_tracking_enabled: {
         property: "is_time_tracking_enabled",
         title: "Time Tracking",
-        description: "Keep the work logs of the users in track ",
+        description: "Log time, see timesheets, and download full CSVs for your entire workspace.",
         icon: <Timer className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
         isPro: true,
         isEnabled: false,

web/core/components/analytics/project-modal/header.tsx

@@ -19,7 +19,7 @@ export const ProjectAnalyticsModalHeader: React.FC<Props> = observer((props) =>
       <div className="flex items-center gap-2">
         <button
           type="button"
-          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          className="hidden md:grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
           onClick={() => setFullScreen((prevData) => !prevData)}
         >
           {fullScreen ? <Shrink size={14} strokeWidth={2} /> : <Expand size={14} strokeWidth={2} />}

web/core/components/core/render-if-visible-HOC.tsx

@@ -10,6 +10,7 @@ type Props = {
   as?: keyof JSX.IntrinsicElements;
   classNames?: string;
   placeholderChildren?: ReactNode;
+  defaultValue?: boolean;
 };
 
 const RenderIfVisible: React.FC<Props> = (props) => {
@@ -20,10 +21,11 @@ const RenderIfVisible: React.FC<Props> = (props) => {
     horizontalOffset = 0,
     as = "div",
     children,
+    defaultValue = false,
     classNames = "",
     placeholderChildren = null, //placeholder children
   } = props;
-  const [shouldVisible, setShouldVisible] = useState<boolean>();
+  const [shouldVisible, setShouldVisible] = useState<boolean>(defaultValue);
   const placeholderHeight = useRef<string>(defaultHeight);
   const intersectionRef = useRef<HTMLElement | null>(null);
 

web/core/components/cycles/active-cycle/cycle-stats.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { FC, Fragment, useCallback, useRef, useState } from "react";
+import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import useSWR from "swr";
 import { CalendarCheck } from "lucide-react";
 // headless ui
 import { Tab } from "@headlessui/react";
@@ -16,7 +16,6 @@ import { StateDropdown } from "@/components/dropdowns";
 import { EmptyState } from "@/components/empty-state";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
-import { CYCLE_ISSUES_WITH_PARAMS } from "@/constants/fetch-keys";
 import { EIssuesStoreType } from "@/constants/issue";
 // helper
 import { cn } from "@/helpers/common.helper";
@@ -27,6 +26,7 @@ import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 import useLocalStorage from "@/hooks/use-local-storage";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
+import { ActiveCycleIssueDetails } from "@/store/issue/cycle";
 
 export type ActiveCycleStatsProps = {
   workspaceSlug: string;
@@ -34,10 +34,11 @@ export type ActiveCycleStatsProps = {
   cycle: ICycle | null;
   cycleId?: string | null;
   handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string[], redirect?: boolean) => void;
+  cycleIssueDetails: ActiveCycleIssueDetails;
 };
 
 export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
-  const { workspaceSlug, projectId, cycle, cycleId, handleFiltersUpdate } = props;
+  const { workspaceSlug, projectId, cycle, cycleId, handleFiltersUpdate, cycleIssueDetails } = props;
 
   const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees");
 
@@ -57,21 +58,12 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
     }
   };
   const {
-    issues: { getActiveCycleById, fetchActiveCycleIssues, fetchNextActiveCycleIssues },
+    issues: { fetchNextActiveCycleIssues },
   } = useIssues(EIssuesStoreType.CYCLE);
   const {
     issue: { getIssueById },
     setPeekIssue,
   } = useIssueDetail();
-
-  useSWR(
-    workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId, { priority: "urgent,high" }) : null,
-    workspaceSlug && projectId && cycleId ? () => fetchActiveCycleIssues(workspaceSlug, projectId, 30, cycleId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
-
-  const cycleIssueDetails = cycleId ? getActiveCycleById(cycleId) : { nextPageResults: false };
-
   const loadMoreIssues = useCallback(() => {
     if (!cycleId) return;
     fetchNextActiveCycleIssues(workspaceSlug, projectId, cycleId);
@@ -87,6 +79,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
       <Loader.Item height="30px" />
     </Loader>
   );
+
   return cycleId ? (
     <div className="flex flex-col gap-4 p-4 min-h-[17rem] overflow-hidden bg-custom-background-100 col-span-1 lg:col-span-2 xl:col-span-1 border border-custom-border-200 rounded-lg">
       <Tab.Group
@@ -248,7 +241,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
             as="div"
             className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-custom-text-200 vertical-scrollbar scrollbar-sm"
           >
-            {cycle ? (
+            {cycle && !isEmpty(cycle.distribution) ? (
               cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
                 cycle.distribution?.assignees?.map((assignee, index) => {
                   if (assignee.assignee_id)
@@ -306,7 +299,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
             as="div"
             className="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-custom-text-200 vertical-scrollbar scrollbar-sm"
           >
-            {cycle ? (
+            {cycle && !isEmpty(cycle.distribution) ? (
               cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
                 cycle.distribution.labels?.map((label, index) => (
                   <SingleProgressStats

web/core/components/cycles/active-cycle/productivity.tsx

@@ -1,8 +1,8 @@
-import { FC, Fragment, useState } from "react";
+import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { ICycle, TCyclePlotType } from "@plane/types";
-import { CustomSelect, Loader, Spinner } from "@plane/ui";
+import { CustomSelect, Loader } from "@plane/ui";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
 import { EmptyState } from "@/components/empty-state";
@@ -26,24 +26,15 @@ const cycleBurnDownChartOptions = [
 export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observer((props) => {
   const { workspaceSlug, projectId, cycle } = props;
   // hooks
-  const { getPlotTypeByCycleId, setPlotType, fetchCycleDetails } = useCycle();
+  const { getPlotTypeByCycleId, setPlotType } = useCycle();
   const { currentActiveEstimateId, areEstimateEnabledByProjectId, estimateById } = useProjectEstimates();
-  // state
-  const [loader, setLoader] = useState(false);
+
   // derived values
   const plotType: TCyclePlotType = (cycle && getPlotTypeByCycleId(cycle.id)) || "burndown";
 
   const onChange = async (value: TCyclePlotType) => {
     if (!workspaceSlug || !projectId || !cycle || !cycle.id) return;
     setPlotType(cycle.id, value);
-    try {
-      setLoader(true);
-      await fetchCycleDetails(workspaceSlug, projectId, cycle.id);
-      setLoader(false);
-    } catch (error) {
-      setLoader(false);
-      setPlotType(cycle.id, plotType);
-    }
   };
 
   const isCurrentProjectEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId) ? true : false;
@@ -55,7 +46,7 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
     cycle && plotType === "points" ? cycle?.estimate_distribution : cycle?.distribution || undefined;
   const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
 
-  return cycle ? (
+  return cycle && completionChartDistributionData ? (
     <div className="flex flex-col min-h-[17rem] gap-5 px-3.5 py-4 bg-custom-background-100 border border-custom-border-200 rounded-lg">
       <div className="relative flex items-center justify-between gap-4">
         <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}>
@@ -75,7 +66,6 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
                 </CustomSelect.Option>
               ))}
             </CustomSelect>
-            {loader && <Spinner className="h-3 w-3" />}
           </div>
         )}
       </div>

web/core/components/cycles/active-cycle/progress.tsx

@@ -16,31 +16,33 @@ import { useProjectState } from "@/hooks/store";
 
 export type ActiveCycleProgressProps = {
   cycle: ICycle | null;
+  workspaceSlug: string;
+  projectId: string;
   handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string[], redirect?: boolean) => void;
 };
 
 export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props) => {
-  const { cycle, handleFiltersUpdate } = props;
+  const { handleFiltersUpdate, cycle } = props;
   // store hooks
   const { groupedProjectStates } = useProjectState();
 
+  // derived values
   const progressIndicatorData = PROGRESS_STATE_GROUPS_DETAILS.map((group, index) => ({
     id: index,
     name: group.title,
     value: cycle && cycle.total_issues > 0 ? (cycle[group.key as keyof ICycle] as number) : 0,
     color: group.color,
   }));
-
   const groupedIssues: any = cycle
     ? {
-        completed: cycle.completed_issues,
-        started: cycle.started_issues,
-        unstarted: cycle.unstarted_issues,
-        backlog: cycle.backlog_issues,
+        completed: cycle?.completed_issues,
+        started: cycle?.started_issues,
+        unstarted: cycle?.unstarted_issues,
+        backlog: cycle?.backlog_issues,
       }
     : {};
 
-  return cycle ? (
+  return cycle && cycle.hasOwnProperty("started_issues") ? (
     <div className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
       <div className="flex flex-col gap-3">
         <div className="flex items-center justify-between gap-4">

web/core/components/cycles/active-cycle/root.tsx

@@ -1,15 +1,7 @@
 "use client";
 
-import { useCallback } from "react";
-import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
-import useSWR from "swr";
 import { Disclosure } from "@headlessui/react";
-// types
-import { IIssueFilterOptions } from "@plane/types";
-// ui
-import { Loader } from "@plane/ui";
 // components
 import {
   ActiveCycleProductivity,
@@ -21,9 +13,9 @@ import {
 import { EmptyState } from "@/components/empty-state";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
-// hooks
-import { useCycle, useIssues } from "@/hooks/store";
+import { useCycle } from "@/hooks/store";
+import { ActiveCycleIssueDetails } from "@/store/issue/cycle";
+import useCyclesDetails from "./use-cycles-details";
 
 interface IActiveCycleDetails {
   workspaceSlug: string;
@@ -31,56 +23,13 @@ interface IActiveCycleDetails {
 }
 
 export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) => {
-  // props
   const { workspaceSlug, projectId } = props;
-  // router
-  const router = useRouter();
-  // store hooks
+  const { currentProjectActiveCycle, currentProjectActiveCycleId } = useCycle();
   const {
-    issuesFilter: { issueFilters, updateFilters },
-  } = useIssues(EIssuesStoreType.CYCLE);
-  const { currentProjectActiveCycle, fetchActiveCycle, currentProjectActiveCycleId, getActiveCycleById } = useCycle();
-  // derived values
-  const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
-  // fetch active cycle details
-  const { isLoading } = useSWR(
-    workspaceSlug && projectId ? `PROJECT_ACTIVE_CYCLE_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchActiveCycle(workspaceSlug, projectId) : null
-  );
-
-  const handleFiltersUpdate = useCallback(
-    (key: keyof IIssueFilterOptions, value: string[], redirect?: boolean) => {
-      if (!workspaceSlug || !projectId || !currentProjectActiveCycleId) return;
-
-      const newFilters: IIssueFilterOptions = {};
-      Object.keys(issueFilters?.filters ?? {}).forEach((key) => {
-        newFilters[key as keyof IIssueFilterOptions] = [];
-      });
-
-      let newValues: string[] = [];
-
-      if (isEqual(newValues, value)) newValues = [];
-      else newValues = value;
-
-      updateFilters(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        EIssueFilterType.FILTERS,
-        { ...newFilters, [key]: newValues },
-        currentProjectActiveCycleId.toString()
-      );
-      if (redirect) router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${currentProjectActiveCycleId}`);
-    },
-    [workspaceSlug, projectId, currentProjectActiveCycleId, issueFilters, updateFilters, router]
-  );
-
-  // show loader if active cycle is loading
-  if (!currentProjectActiveCycle && isLoading)
-    return (
-      <Loader>
-        <Loader.Item height="250px" />
-      </Loader>
-    );
+    handleFiltersUpdate,
+    cycle: activeCycle,
+    cycleIssueDetails,
+  } = useCyclesDetails({ workspaceSlug, projectId, cycleId: currentProjectActiveCycleId });
 
   return (
     <>
@@ -106,7 +55,12 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                   )}
                   <div className="bg-custom-background-100 pt-3 pb-6 px-6">
                     <div className="grid grid-cols-1 bg-custom-background-100 gap-3 lg:grid-cols-2 xl:grid-cols-3">
-                      <ActiveCycleProgress cycle={activeCycle} handleFiltersUpdate={handleFiltersUpdate} />
+                      <ActiveCycleProgress
+                        handleFiltersUpdate={handleFiltersUpdate}
+                        projectId={projectId}
+                        workspaceSlug={workspaceSlug}
+                        cycle={activeCycle}
+                      />
                       <ActiveCycleProductivity
                         workspaceSlug={workspaceSlug}
                         projectId={projectId}
@@ -118,6 +72,7 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                         cycle={activeCycle}
                         cycleId={currentProjectActiveCycleId}
                         handleFiltersUpdate={handleFiltersUpdate}
+                        cycleIssueDetails={cycleIssueDetails as ActiveCycleIssueDetails}
                       />
                     </div>
                   </div>

web/core/components/cycles/active-cycle/use-cycles-details.ts

@@ -0,0 +1,94 @@
+import { useCallback } from "react";
+import isEqual from "lodash/isEqual";
+import { useRouter } from "next/navigation";
+import useSWR from "swr";
+import { IIssueFilterOptions } from "@plane/types";
+import { CYCLE_ISSUES_WITH_PARAMS } from "@/constants/fetch-keys";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useCycle, useIssues } from "@/hooks/store";
+
+interface IActiveCycleDetails {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string | null;
+}
+
+const useCyclesDetails = (props: IActiveCycleDetails) => {
+  // props
+  const { workspaceSlug, projectId, cycleId } = props;
+  // router
+  const router = useRouter();
+  // store hooks
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+    issues: { getActiveCycleById: getActiveCycleByIdFromIssue, fetchActiveCycleIssues },
+  } = useIssues(EIssuesStoreType.CYCLE);
+
+  const { fetchActiveCycleProgress, getCycleById, fetchActiveCycleAnalytics } = useCycle();
+  // derived values
+  const cycle = cycleId ? getCycleById(cycleId) : null;
+
+  // fetch cycle details
+  useSWR(
+    workspaceSlug && projectId && cycle ? `PROJECT_ACTIVE_CYCLE_${projectId}_PROGRESS` : null,
+    workspaceSlug && projectId && cycle ? () => fetchActiveCycleProgress(workspaceSlug, projectId, cycle.id) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  useSWR(
+    workspaceSlug && projectId && cycle && !cycle?.distribution ? `PROJECT_ACTIVE_CYCLE_${projectId}_DURATION` : null,
+    workspaceSlug && projectId && cycle && !cycle?.distribution
+      ? () => fetchActiveCycleAnalytics(workspaceSlug, projectId, cycle.id, "issues")
+      : null
+  );
+  useSWR(
+    workspaceSlug && projectId && cycle && !cycle?.estimate_distribution
+      ? `PROJECT_ACTIVE_CYCLE_${projectId}_ESTIMATE_DURATION`
+      : null,
+    workspaceSlug && projectId && cycle && !cycle?.estimate_distribution
+      ? () => fetchActiveCycleAnalytics(workspaceSlug, projectId, cycle.id, "points")
+      : null
+  );
+  useSWR(
+    workspaceSlug && projectId && cycle?.id ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" }) : null,
+    workspaceSlug && projectId && cycle?.id
+      ? () => fetchActiveCycleIssues(workspaceSlug, projectId, 30, cycle?.id)
+      : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const cycleIssueDetails = cycle?.id ? getActiveCycleByIdFromIssue(cycle?.id) : { nextPageResults: false };
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string[], redirect?: boolean) => {
+      if (!workspaceSlug || !projectId || !cycleId) return;
+
+      const newFilters: IIssueFilterOptions = {};
+      Object.keys(issueFilters?.filters ?? {}).forEach((key) => {
+        newFilters[key as keyof IIssueFilterOptions] = [];
+      });
+
+      let newValues: string[] = [];
+
+      if (isEqual(newValues, value)) newValues = [];
+      else newValues = value;
+
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.FILTERS,
+        { ...newFilters, [key]: newValues },
+        cycleId.toString()
+      );
+      if (redirect) router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`);
+    },
+    [workspaceSlug, projectId, cycleId, issueFilters, updateFilters, router]
+  );
+  return {
+    cycle,
+    cycleId,
+    router,
+    handleFiltersUpdate,
+    cycleIssueDetails,
+  };
+};
+export default useCyclesDetails;

web/core/components/cycles/analytics-sidebar/issue-progress.tsx

@@ -8,7 +8,7 @@ import { useSearchParams } from "next/navigation";
 import { AlertCircle, ChevronUp, ChevronDown } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { ICycle, IIssueFilterOptions, TCyclePlotType, TProgressSnapshot } from "@plane/types";
-import { CustomSelect, Spinner } from "@plane/ui";
+import { CustomSelect, Loader, Spinner } from "@plane/ui";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
 import { CycleProgressStats } from "@/components/cycles";
@@ -231,7 +231,7 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
                       <span>Current</span>
                     </div>
                   </div>
-                  {cycleStartDate && cycleEndDate && completionChartDistributionData && (
+                  {cycleStartDate && cycleEndDate && completionChartDistributionData ? (
                     <Fragment>
                       {plotType === "points" ? (
                         <ProgressChart
@@ -251,6 +251,10 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
                         />
                       )}
                     </Fragment>
+                  ) : (
+                    <Loader className="w-full h-[160px] mt-4">
+                      <Loader.Item width="100%" height="100%" />
+                    </Loader>
                   )}
                 </div>
 

web/core/components/cycles/analytics-sidebar/root.tsx

@@ -33,7 +33,6 @@ type Props = {
   cycleId: string;
   handleClose: () => void;
   isArchived?: boolean;
-  isPeekMode?: boolean;
 };
 
 const defaultValues: Partial<ICycle> = {
@@ -46,7 +45,7 @@ const cycleService = new CycleService();
 
 // TODO: refactor the whole component
 export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
-  const { cycleId, handleClose, isArchived, isPeekMode = false } = props;
+  const { cycleId, handleClose, isArchived } = props;
   // states
   const [archiveCycleModal, setArchiveCycleModal] = useState(false);
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
@@ -262,7 +261,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
       <>
         <div
-          className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 ${isPeekMode ? "pt-5" : "pt-20"}`}
+          className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 pt-5`}
         >
           <div>
             <button

web/core/components/cycles/cycle-peek-overview.tsx

@@ -51,7 +51,6 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
             cycleId={peekCycle?.toString() ?? ""}
             handleClose={handleClose}
             isArchived={isArchived}
-            isPeekMode
           />
         </div>
       )}

web/core/components/cycles/list/cycles-list-item.tsx

@@ -109,7 +109,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
       appendTitleElement={
         <button
           onClick={openCycleOverview}
-          className={`z-[5] flex-shrink-0 ${isMobile ? "flex" : "hidden group-hover:flex"}`}
+          className={`z-[1] flex-shrink-0 ${isMobile ? "flex" : "hidden group-hover:flex"}`}
         >
           <Info className="h-4 w-4 text-custom-text-400" />
         </button>

web/core/components/inbox/content/inbox-issue-header.tsx

@@ -85,8 +85,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
   const canMarkAsDeclined = isAllowed && (inboxIssue?.status === 0 || inboxIssue?.status === -2);
   // can delete only if admin or is creator of the issue
   const canDelete =
-    (!!currentProjectRole && currentProjectRole >= EUserProjectRoles.ADMIN) ||
-    inboxIssue?.created_by === currentUser?.id;
+    (!!currentProjectRole && currentProjectRole >= EUserProjectRoles.ADMIN) || issue?.created_by === currentUser?.id;
   const isAcceptedOrDeclined = inboxIssue?.status ? [-1, 1, 2].includes(inboxIssue.status) : undefined;
   // days left for snooze
   const numberOfDaysLeft = findHowManyDaysLeft(inboxIssue?.snoozed_till);

web/core/components/inbox/modals/create-edit-modal/issue-properties.tsx

@@ -2,6 +2,7 @@ import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { LayoutPanelTop } from "lucide-react";
 import { ISearchIssueResponse, TIssue } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
 // components
 import {
   CycleDropdown,
@@ -94,7 +95,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
         <div className="h-7">
           <DateDropdown
             value={data?.start_date || null}
-            onChange={(date) => (date ? handleData("start_date", renderFormattedPayloadDate(date)) : null)}
+            onChange={(date) => handleData("start_date", date ? renderFormattedPayloadDate(date) : "")}
             buttonVariant="border-with-text"
             minDate={minDate ?? undefined}
             placeholder="Start date"
@@ -106,7 +107,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
       <div className="h-7">
         <DateDropdown
           value={data?.target_date || null}
-          onChange={(date) => (date ? handleData("target_date", renderFormattedPayloadDate(date)) : null)}
+          onChange={(date) => handleData("target_date", date ? renderFormattedPayloadDate(date) : "")}
           buttonVariant="border-with-text"
           minDate={minDate ?? undefined}
           placeholder="Due date"
@@ -157,18 +158,43 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
       {/* add parent */}
       {isVisible && (
         <>
-          <button
-            type="button"
-            className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
-            onClick={() => setParentIssueModalOpen(true)}
-          >
-            <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
-            <span className="whitespace-nowrap">
-              {selectedParentIssue
-                ? `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
-                : `Add parent`}
-            </span>
-          </button>
+          {selectedParentIssue ? (
+            <CustomMenu
+              customButton={
+                <button
+                  type="button"
+                  className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
+                >
+                  <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                  <span className="whitespace-nowrap">
+                    {selectedParentIssue
+                      ? `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
+                      : `Add parent`}
+                  </span>
+                </button>
+              }
+              placement="bottom-start"
+            >
+              <>
+                <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueModalOpen(true)}>
+                  Change parent issue
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem className="!p-1" onClick={() => handleData("parent_id", "")}>
+                  Remove parent issue
+                </CustomMenu.MenuItem>
+              </>
+            </CustomMenu>
+          ) : (
+            <button
+              type="button"
+              className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
+              onClick={() => setParentIssueModalOpen(true)}
+            >
+              <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+              <span className="whitespace-nowrap">Add parent</span>
+            </button>
+          )}
+
           <ParentIssuesListModal
             isOpen={parentIssueModalOpen}
             handleClose={() => setParentIssueModalOpen(false)}

web/core/components/issues/attachment/attachment-item-list.tsx

@@ -1,8 +1,9 @@
 import { FC, useCallback, useState } from "react";
 import { observer } from "mobx-react";
-import { useDropzone } from "react-dropzone";
+import { FileRejection, useDropzone } from "react-dropzone";
 import { UploadCloud } from "lucide-react";
 // hooks
+import {TOAST_TYPE, setToast } from "@plane/ui";
 import { MAX_FILE_SIZE } from "@/constants/common";
 import { generateFileName } from "@/helpers/attachment.helper";
 import { useInstance, useIssueDetail } from "@/hooks/store";
@@ -36,24 +37,46 @@ export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((p
   const issueAttachments = getAttachmentsByIssueId(issueId);
 
   const onDrop = useCallback(
-    (acceptedFiles: File[]) => {
-      const currentFile: File = acceptedFiles[0];
-      if (!currentFile || !workspaceSlug) return;
+    (acceptedFiles: File[], rejectedFiles:FileRejection[] ) => {
+      const totalAttachedFiles = acceptedFiles.length +  rejectedFiles.length;
 
-      const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), {
-        type: currentFile.type,
-      });
-      const formData = new FormData();
-      formData.append("asset", uploadedFile);
-      formData.append(
-        "attributes",
-        JSON.stringify({
-          name: uploadedFile.name,
-          size: uploadedFile.size,
+      if(rejectedFiles.length===0){
+        const currentFile: File = acceptedFiles[0];
+        if (!currentFile || !workspaceSlug) return;
+
+        const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), {
+          type: currentFile.type,
+        });
+        const formData = new FormData();
+        formData.append("asset", uploadedFile);
+        formData.append(
+          "attributes",
+          JSON.stringify({
+            name: uploadedFile.name,
+            size: uploadedFile.size,
+          })
+        );
+        setIsLoading(true);
+        handleAttachmentOperations.create(formData)
+        .catch(()=>{
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "File could not be attached. Try uploading again.",
+          })
         })
-      );
-      setIsLoading(true);
-      handleAttachmentOperations.create(formData).finally(() => setIsLoading(false));
+        .finally(() => setIsLoading(false));
+        return;
+      }
+
+      setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: (totalAttachedFiles>1)?
+            "Only one file can be uploaded at a time." :
+            "File must be 5MB or less.",
+      })
+      return;
     },
     [handleAttachmentOperations, workspaceSlug]
   );

web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx

@@ -1,8 +1,9 @@
 "use client";
 import React, { FC, useCallback, useState } from "react";
 import { observer } from "mobx-react";
-import { useDropzone } from "react-dropzone";
+import { FileRejection, useDropzone } from "react-dropzone";
 import { Plus } from "lucide-react";
+import {TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { MAX_FILE_SIZE } from "@/constants/common";
 // helper
@@ -33,31 +34,54 @@ export const IssueAttachmentActionButton: FC<Props> = observer((props) => {
 
   // handlers
   const onDrop = useCallback(
-    (acceptedFiles: File[]) => {
-      const currentFile: File = acceptedFiles[0];
-      if (!currentFile || !workspaceSlug) return;
+    (acceptedFiles: File[], rejectedFiles:FileRejection[] ) => {
+      const totalAttachedFiles = acceptedFiles.length + rejectedFiles.length;
 
-      const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), {
-        type: currentFile.type,
-      });
-      const formData = new FormData();
-      formData.append("asset", uploadedFile);
-      formData.append(
-        "attributes",
-        JSON.stringify({
-          name: uploadedFile.name,
-          size: uploadedFile.size,
+      if(rejectedFiles.length===0){
+        const currentFile: File = acceptedFiles[0];
+        if (!currentFile || !workspaceSlug) return;
+
+        const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), {
+          type: currentFile.type,
+        });
+        const formData = new FormData();
+        formData.append("asset", uploadedFile);
+        formData.append(
+          "attributes",
+          JSON.stringify({
+            name: uploadedFile.name,
+            size: uploadedFile.size,
+          })
+        );
+        setIsLoading(true);
+        handleAttachmentOperations.create(formData)
+        .catch(()=>{
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "File could not be attached. Try uploading again.",
+          })
         })
-      );
-      setIsLoading(true);
-      handleAttachmentOperations.create(formData).finally(() => {
-        setLastWidgetAction("attachments");
-        setIsLoading(false);
+        .finally(() => {
+          setLastWidgetAction("attachments");
+          setIsLoading(false);
       });
+      return;
+      }
+
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: (totalAttachedFiles>1)?
+        "Only one file can be uploaded at a time." :
+        "File must be 5MB or less.",
+      })
+      return;
     },
     [handleAttachmentOperations, workspaceSlug]
   );
 
+
   const { getRootProps, getInputProps } = useDropzone({
     onDrop,
     maxSize: config?.file_size_limit ?? MAX_FILE_SIZE,
@@ -71,4 +95,4 @@ export const IssueAttachmentActionButton: FC<Props> = observer((props) => {
       {customButton ? customButton : <Plus className="h-4 w-4" />}
     </button>
   );
-});
+});

web/core/components/issues/issue-detail/issue-activity/comments/comment-create.tsx

@@ -7,9 +7,10 @@ import { LiteTextEditor } from "@/components/editor/lite-text-editor/lite-text-e
 // constants
 import { EIssueCommentAccessSpecifier } from "@/constants/issue";
 // helpers
+import { cn } from "@/helpers/common.helper";
 import { isEmptyHtmlString } from "@/helpers/string.helper";
 // hooks
-import { useWorkspace } from "@/hooks/store";
+import { useIssueDetail, useWorkspace } from "@/hooks/store";
 // editor
 import { TActivityOperations } from "../root";
 
@@ -27,6 +28,7 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
   const editorRef = useRef<any>(null);
   // store hooks
   const workspaceStore = useWorkspace();
+  const { peekIssue } = useIssueDetail();
   // derived values
   const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string;
   // form info
@@ -58,6 +60,9 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
 
   return (
     <div
+      className={cn("sticky bottom-0 z-10 bg-custom-background-100 sm:static", {
+        "-bottom-5": !peekIssue,
+      })}
       onKeyDown={(e) => {
         if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey && !isEmpty && !isSubmitting)
           handleSubmit(onSubmit)(e);

web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx

@@ -78,18 +78,19 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
 
   const handleDeleteIssue = async () => {
     try {
-      if (issue?.archived_at) {
-        return removeArchivedIssue(workspaceSlug, projectId, issueId).then(() => {
-          router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
-          captureIssueEvent({
-            eventName: ISSUE_DELETED,
-            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
-            path: pathname,
-          });
+      const deleteIssue = issue?.archived_at ? removeArchivedIssue : removeIssue;
+      const redirectionPath = issue?.archived_at
+        ? `/${workspaceSlug}/projects/${projectId}/archives/issues`
+        : `/${workspaceSlug}/projects/${projectId}/issues`;
+
+      return deleteIssue(workspaceSlug, projectId, issueId).then(() => {
+        router.push(redirectionPath);
+        captureIssueEvent({
+          eventName: ISSUE_DELETED,
+          payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+          path: pathname,
         });
-      } else {
-        return removeIssue(workspaceSlug, projectId, issueId);
-      }
+      });
     } catch (error) {
       setToast({
         title: "Error!",

web/core/components/issues/issue-layouts/kanban/block.tsx

@@ -122,7 +122,6 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
   const workspaceSlug = routerWorkspaceSlug?.toString();
   // hooks
   const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
-  const { isMobile } = usePlatformOS();
 
   const handleIssuePeekOverview = (issue: TIssue) =>
     workspaceSlug &&
@@ -217,7 +216,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
             { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
           )}
           onClick={() => handleIssuePeekOverview(issue)}
-          disabled={!!issue?.tempId || isMobile}
+          disabled={!!issue?.tempId}
         >
           <RenderIfVisible
             classNames="space-y-2 px-3 py-2"

web/core/components/issues/issue-layouts/list/block-root.tsx

@@ -16,7 +16,7 @@ import { useIssueDetail } from "@/hooks/store";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // types
-import { HIGHLIGHT_CLASS, getIssueBlockId } from "../utils";
+import { HIGHLIGHT_CLASS, getIssueBlockId, isIssueNew } from "../utils";
 import { TRenderQuickActions } from "./list-view-types";
 
 type Props = {
@@ -36,6 +36,7 @@ type Props = {
   canDropOverIssue: boolean;
   isParentIssueBeingDragged?: boolean;
   isLastChild?: boolean;
+  shouldRenderByDefault?: boolean;
 };
 
 export const IssueBlockRoot: FC<Props> = observer((props) => {
@@ -56,6 +57,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
     isParentIssueBeingDragged = false,
     isLastChild = false,
     selectionHelpers,
+    shouldRenderByDefault,
   } = props;
   // states
   const [isExpanded, setExpanded] = useState<boolean>(false);
@@ -114,7 +116,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
     issueBlockRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
   });
 
-  if (!issueId) return null;
+  if (!issueId || !issuesMap[issueId]?.created_at) return null;
 
   const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
   return (
@@ -126,6 +128,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
         root={containerRef}
         classNames={`relative ${isLastChild && !isExpanded ? "" : "border-b border-b-custom-border-200"}`}
         verticalOffset={100}
+        defaultValue={shouldRenderByDefault || isIssueNew(issuesMap[issueId])}
       >
         <IssueBlock
           issueId={issueId}
@@ -165,6 +168,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
             isDragAllowed={isDragAllowed}
             canDropOverIssue={canDropOverIssue}
             isParentIssueBeingDragged={isParentIssueBeingDragged || isCurrentBlockDragging}
+            shouldRenderByDefault={isExpanded}
           />
         ))}
       {isLastChild && <DropIndicator classNames={"absolute z-[2]"} isVisible={instruction === "DRAG_BELOW"} />}

web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -163,6 +163,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
         placement={placements}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx

@@ -125,6 +125,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
         placement={placements}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -183,6 +183,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx

@@ -115,6 +115,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         placement={placements}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -180,6 +180,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -174,6 +174,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/utils.tsx

@@ -606,4 +606,16 @@ export const isSubGrouped = (groupedIssueIds: TGroupedIssues) => {
   }
 
   return true;
-};
+};
+
+/**
+ * This Method returns if the issue is new or not
+ * @param issue
+ * @returns
+ */
+export const isIssueNew = (issue: TIssue) => {
+  const createdDate = new Date(issue.created_at);
+  const currentDate = new Date();
+  const diff = currentDate.getTime() - createdDate.getTime();
+  return diff < 30000;
+};

web/core/components/labels/label-block/label-item-block.tsx

@@ -59,7 +59,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
             : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
         } ${isLabelGroup && "-top-0.5"}`}
       >
-        <CustomMenu ellipsis>
+        <CustomMenu ellipsis menuButtonOnClick={() => setIsMenuActive(!isMenuActive)} useCaptureForOutsideClick>
           {customMenuItems.map(
             ({ isVisible, onClick, CustomIcon, text, key }) =>
               isVisible && (

web/core/components/modules/analytics-sidebar/root.tsx

@@ -63,12 +63,11 @@ type Props = {
   moduleId: string;
   handleClose: () => void;
   isArchived?: boolean;
-  isPeekMode?: boolean;
 };
 
 // TODO: refactor this component
 export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
-  const { moduleId, handleClose, isArchived, isPeekMode = false } = props;
+  const { moduleId, handleClose, isArchived } = props;
   // states
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
   const [archiveModuleModal, setArchiveModuleModal] = useState(false);
@@ -311,7 +310,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
       <DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
       <>
         <div
-          className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 ${isPeekMode ? "pt-5" : "pt-20"}`}
+          className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 pt-5`}
         >
           <div>
             <button

web/core/components/modules/module-peek-overview.tsx

@@ -51,7 +51,6 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
             moduleId={peekModule?.toString() ?? ""}
             handleClose={handleClose}
             isArchived={isArchived}
-            isPeekMode
           />
         </div>
       )}

web/core/components/pages/dropdowns/edit-information-popover.tsx

@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+// plane ui
+import { Avatar } from "@plane/ui";
+// helpers
+import { calculateTimeAgoShort, renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
+import { useMember } from "@/hooks/store";
+// store
+import { IPage } from "@/store/pages/page";
+
+type Props = {
+  page: IPage;
+};
+
+export const PageEditInformationPopover: React.FC<Props> = observer((props) => {
+  const { page } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  const editorInformation = page.updated_by ? getUserDetails(page.updated_by) : undefined;
+  const creatorInformation = page.created_by ? getUserDetails(page.created_by) : undefined;
+
+  return (
+    <div className="flex-shrink-0 relative group/edit-information whitespace-nowrap">
+      <span className="text-sm text-custom-text-300">Edited {calculateTimeAgoShort(page.updated_at ?? "")} ago</span>
+      <div className="hidden group-hover/edit-information:block absolute z-10 top-full right-0 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-2 shadow-custom-shadow-rg space-y-2">
+        <div>
+          <p className="text-xs font-medium text-custom-text-300">Edited by</p>
+          <Link
+            href={`/${workspaceSlug?.toString()}/profile/${page.updated_by}`}
+            className="mt-2 flex items-center gap-1.5 text-sm font-medium"
+          >
+            <Avatar
+              src={editorInformation?.avatar}
+              name={editorInformation?.display_name}
+              className="flex-shrink-0"
+              size="sm"
+            />
+            <span>
+              {editorInformation?.display_name}{" "}
+              <span className="text-custom-text-300">{renderFormattedDate(page.updated_at)}</span>
+            </span>
+          </Link>
+        </div>
+        <div>
+          <p className="text-xs font-medium text-custom-text-300">Created by</p>
+          <Link
+            href={`/${workspaceSlug?.toString()}/profile/${page.created_by}`}
+            className="mt-2 flex items-center gap-1.5 text-sm font-medium"
+          >
+            <Avatar
+              src={creatorInformation?.avatar}
+              name={creatorInformation?.display_name}
+              className="flex-shrink-0"
+              size="sm"
+            />
+            <span>
+              {creatorInformation?.display_name}{" "}
+              <span className="text-custom-text-300">{renderFormattedDate(page.created_at)}</span>
+            </span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+});

web/core/components/pages/dropdowns/index.ts

@@ -1 +1,2 @@
+export * from "./edit-information-popover";
 export * from "./quick-actions";

web/core/components/pages/editor/header/extra-options.tsx

@@ -72,7 +72,7 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
           className="!min-w-[38rem]"
         />
       )}
-      <PageInfoPopover page={page} />
+      <PageInfoPopover editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current} />
       <PageOptionsDropdown
         editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
         handleDuplicatePage={handleDuplicatePage}

web/core/components/pages/editor/header/info-popover.tsx

@@ -1,19 +1,19 @@
 import { useState } from "react";
 import { usePopper } from "react-popper";
-import { Calendar, History, Info } from "lucide-react";
+import { Info } from "lucide-react";
+// plane editor
+import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
 // helpers
-import { renderFormattedDate } from "@/helpers/date-time.helper";
-// store
-import { IPage } from "@/store/pages/page";
+import { getReadTimeFromWordsCount } from "@/helpers/date-time.helper";
 
 type Props = {
-  page: IPage;
+  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
 };
 
 export const PageInfoPopover: React.FC<Props> = (props) => {
-  const { page } = props;
+  const { editorRef } = props;
   // states
-  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   // refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -21,35 +21,54 @@ export const PageInfoPopover: React.FC<Props> = (props) => {
   const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } = usePopper(referenceElement, popperElement, {
     placement: "bottom-start",
   });
-  // derived values
-  const { created_at, updated_at } = page;
+
+  const secondsToReadableTime = () => {
+    const wordsCount = editorRef?.documentInfo.words || 0;
+    const readTimeInSeconds = Number(getReadTimeFromWordsCount(wordsCount).toFixed(0));
+    return readTimeInSeconds < 60 ? `${readTimeInSeconds}s` : `${Math.ceil(readTimeInSeconds / 60)}m`;
+  };
+
+  const documentInfoCards = [
+    {
+      key: "words-count",
+      title: "Words",
+      info: editorRef?.documentInfo.words,
+    },
+    {
+      key: "characters-count",
+      title: "Characters",
+      info: editorRef?.documentInfo.characters,
+    },
+    {
+      key: "paragraphs-count",
+      title: "Paragraphs",
+      info: editorRef?.documentInfo.paragraphs,
+    },
+    {
+      key: "read-time",
+      title: "Read time",
+      info: secondsToReadableTime(),
+    },
+  ];
 
   return (
     <div onMouseEnter={() => setIsPopoverOpen(true)} onMouseLeave={() => setIsPopoverOpen(false)}>
       <button type="button" ref={setReferenceElement} className="block">
-        <Info className="h-3.5 w-3.5" />
+        <Info className="size-3.5" />
       </button>
       {isPopoverOpen && (
         <div
-          className="z-10 w-64 space-y-2.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
+          className="z-10 w-64 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-2 shadow-custom-shadow-rg grid grid-cols-2 gap-1.5"
           ref={setPopperElement}
           style={infoPopoverStyles.popper}
           {...infoPopoverAttributes.popper}
         >
-          <div className="space-y-1.5">
-            <h6 className="text-xs text-custom-text-400">Last updated on</h6>
-            <h5 className="flex items-center gap-1 text-sm">
-              <History className="h-3 w-3" />
-              {renderFormattedDate(updated_at)}
-            </h5>
-          </div>
-          <div className="space-y-1.5">
-            <h6 className="text-xs text-custom-text-400">Created on</h6>
-            <h5 className="flex items-center gap-1 text-sm">
-              <Calendar className="h-3 w-3" />
-              {renderFormattedDate(created_at)}
-            </h5>
-          </div>
+          {documentInfoCards.map((card) => (
+            <div key={card.key} className="p-2 bg-custom-background-90 rounded">
+              <h6 className="text-base font-semibold">{card.info}</h6>
+              <p className="mt-1.5 text-sm text-custom-text-300">{card.title}</p>
+            </div>
+          ))}
         </div>
       )}
     </div>

web/core/components/pages/editor/header/options-dropdown.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-import { ArchiveRestoreIcon, Clipboard, Copy, Link, Lock, LockOpen } from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
+import { ArchiveRestoreIcon, Clipboard, Copy, History, Link, Lock, LockOpen } from "lucide-react";
 // document editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
 // ui
@@ -11,6 +11,7 @@ import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@pl
 import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { usePageFilters } from "@/hooks/use-page-filters";
+import { useQueryParams } from "@/hooks/use-query-params";
 // store
 import { IPage } from "@/store/pages/page";
 
@@ -23,6 +24,8 @@ type Props = {
 
 export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const { editorRef, handleDuplicatePage, page, handleSaveDescription } = props;
+  // router
+  const router = useRouter();
   // store values
   const {
     archived_at,
@@ -40,6 +43,8 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = useParams();
   // page filters
   const { isFullWidth, handleFullWidth } = usePageFilters();
+  // update query params
+  const { updateQueryParams } = useQueryParams();
 
   const handleArchivePage = async () =>
     await archive().catch(() =>
@@ -145,10 +150,23 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
       icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
       shouldRender: canCurrentUserArchivePage,
     },
+    {
+      key: "version-history",
+      action: () => {
+        // add query param, version=current to the route
+        const updatedRoute = updateQueryParams({
+          paramsToAdd: { version: "current" },
+        });
+        router.push(updatedRoute);
+      },
+      label: "Version history",
+      icon: History,
+      shouldRender: true,
+    },
   ];
 
   return (
-    <CustomMenu maxHeight="md" placement="bottom-start" verticalEllipsis closeOnSelect>
+    <CustomMenu maxHeight="lg" placement="bottom-start" verticalEllipsis closeOnSelect>
       <CustomMenu.MenuItem
         className="hidden md:flex w-full items-center justify-between gap-2"
         onClick={() => handleFullWidth(!isFullWidth)}

web/core/components/pages/editor/page-root.tsx

@@ -1,12 +1,23 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+// plane editor
 import { EditorRefApi, useEditorMarkings } from "@plane/editor";
+// plane types
 import { TPage } from "@plane/types";
+// plane ui
 import { setToast, TOAST_TYPE } from "@plane/ui";
-import { PageEditorHeaderRoot, PageEditorBody } from "@/components/pages";
+// components
+import { PageEditorHeaderRoot, PageEditorBody, PageVersionsOverlay, PagesVersionEditor } from "@/components/pages";
+// hooks
 import { useProjectPages } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePageDescription } from "@/hooks/use-page-description";
+import { useQueryParams } from "@/hooks/use-query-params";
+// services
+import { ProjectPageVersionService } from "@/services/page";
+const projectPageVersionService = new ProjectPageVersionService();
+// store
 import { IPage } from "@/store/pages/page";
 
 type TPageRootProps = {
@@ -16,34 +27,40 @@ type TPageRootProps = {
 };
 
 export const PageRoot = observer((props: TPageRootProps) => {
-  // router
-  const router = useAppRouter();
   const { projectId, workspaceSlug, page } = props;
-  const { createPage } = useProjectPages();
-  const { access, description_html, name } = page;
-
   // states
   const [editorReady, setEditorReady] = useState(false);
   const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false);
-
+  const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768);
+  const [isVersionsOverlayOpen, setIsVersionsOverlayOpen] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
   const readOnlyEditorRef = useRef<EditorRefApi>(null);
-
+  // router
+  const router = useAppRouter();
+  // search params
+  const searchParams = useSearchParams();
+  // store hooks
+  const { createPage } = useProjectPages();
+  // derived values
+  const { access, description_html, name, isContentEditable } = page;
   // editor markings hook
   const { markings, updateMarkings } = useEditorMarkings();
-
-  const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768 ? true : false);
-
   // project-description
-  const { handleDescriptionChange, isDescriptionReady, pageDescriptionYJS, handleSaveDescription } = usePageDescription(
-    {
-      editorRef,
-      page,
-      projectId,
-      workspaceSlug,
-    }
-  );
+  const {
+    handleDescriptionChange,
+    isDescriptionReady,
+    pageDescriptionYJS,
+    handleSaveDescription,
+    manuallyUpdateDescription,
+  } = usePageDescription({
+    editorRef,
+    page,
+    projectId,
+    workspaceSlug,
+  });
+  // update query params
+  const { updateQueryParams } = useQueryParams();
 
   const handleCreatePage = async (payload: Partial<TPage>) => await createPage(payload);
 
@@ -65,8 +82,50 @@ export const PageRoot = observer((props: TPageRootProps) => {
       );
   };
 
+  const version = searchParams.get("version");
+  useEffect(() => {
+    if (!version) {
+      setIsVersionsOverlayOpen(false);
+      return;
+    }
+    setIsVersionsOverlayOpen(true);
+  }, [version]);
+
+  const handleCloseVersionsOverlay = () => {
+    const updatedRoute = updateQueryParams({
+      paramsToRemove: ["version"],
+    });
+    router.push(updatedRoute);
+  };
+
   return (
     <>
+      <PageVersionsOverlay
+        activeVersion={version}
+        editorComponent={PagesVersionEditor}
+        fetchAllVersions={async (pageId) => {
+          if (!workspaceSlug || !projectId) return;
+          return await projectPageVersionService.fetchAllVersions(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            pageId
+          );
+        }}
+        fetchVersionDetails={async (pageId, versionId) => {
+          if (!workspaceSlug || !projectId) return;
+          return await projectPageVersionService.fetchVersionById(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            pageId,
+            versionId
+          );
+        }}
+        handleRestore={manuallyUpdateDescription}
+        isOpen={isVersionsOverlayOpen}
+        onClose={handleCloseVersionsOverlay}
+        pageId={page.id ?? ""}
+        restoreEnabled={isContentEditable}
+      />
       <PageEditorHeaderRoot
         editorRef={editorRef}
         readOnlyEditorRef={readOnlyEditorRef}

web/core/components/pages/index.ts

@@ -4,5 +4,6 @@ export * from "./header";
 export * from "./list";
 export * from "./loaders";
 export * from "./modals";
+export * from "./version";
 export * from "./pages-list-main-content";
 export * from "./pages-list-view";

web/core/components/pages/version/editor.tsx

@@ -0,0 +1,114 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane editor
+import { DocumentReadOnlyEditorWithRef, TDisplayConfig } from "@plane/editor";
+// plane types
+import { IUserLite, TPageVersion } from "@plane/types";
+// plane ui
+import { Loader } from "@plane/ui";
+// hooks
+import { useMember, useMention, usePage, useUser } from "@/hooks/store";
+import { usePageFilters } from "@/hooks/use-page-filters";
+// plane web hooks
+import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed";
+
+type Props = {
+  activeVersion: string | null;
+  isCurrentVersionActive: boolean;
+  pageId: string;
+  versionDetails: TPageVersion | undefined;
+};
+
+export const PagesVersionEditor: React.FC<Props> = observer((props) => {
+  const { activeVersion, isCurrentVersionActive, pageId, versionDetails } = props;
+  // params
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    getUserDetails,
+    project: { getProjectMemberIds },
+  } = useMember();
+  const currentPageDetails = usePage(pageId);
+  // derived values
+  const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
+  const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
+  // issue-embed
+  const { issueEmbedProps } = useIssueEmbed(workspaceSlug?.toString() ?? "", projectId?.toString() ?? "");
+  // use-mention
+  const { mentionHighlights } = useMention({
+    workspaceSlug: workspaceSlug?.toString() ?? "",
+    projectId: projectId?.toString() ?? "",
+    members: projectMemberDetails,
+    user: currentUser ?? undefined,
+  });
+  // page filters
+  const { fontSize, fontStyle } = usePageFilters();
+
+  const displayConfig: TDisplayConfig = {
+    fontSize,
+    fontStyle,
+  };
+
+  if (!isCurrentVersionActive && !versionDetails)
+    return (
+      <div className="size-full px-5">
+        <Loader className="relative space-y-4">
+          <Loader.Item width="50%" height="36px" />
+          <div className="space-y-2">
+            <div className="py-2">
+              <Loader.Item width="100%" height="36px" />
+            </div>
+            <Loader.Item width="80%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <Loader.Item width="30px" height="30px" />
+              <Loader.Item width="30%" height="22px" />
+            </div>
+            <div className="py-2">
+              <Loader.Item width="60%" height="36px" />
+            </div>
+            <Loader.Item width="70%" height="22px" />
+            <Loader.Item width="30%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <Loader.Item width="30px" height="30px" />
+              <Loader.Item width="30%" height="22px" />
+            </div>
+            <div className="py-2">
+              <Loader.Item width="50%" height="30px" />
+            </div>
+            <Loader.Item width="100%" height="22px" />
+            <div className="py-2">
+              <Loader.Item width="30%" height="30px" />
+            </div>
+            <Loader.Item width="30%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <div className="py-2">
+                <Loader.Item width="30px" height="30px" />
+              </div>
+              <Loader.Item width="30%" height="22px" />
+            </div>
+          </div>
+        </Loader>
+      </div>
+    );
+
+  return (
+    <DocumentReadOnlyEditorWithRef
+      id={activeVersion ?? ""}
+      initialValue={
+        (isCurrentVersionActive ? currentPageDetails.description_html : versionDetails?.description_html) ?? "<p></p>"
+      }
+      containerClassName="p-0 pb-64 border-none"
+      displayConfig={displayConfig}
+      editorClassName="pl-10"
+      mentionHandler={{
+        highlights: mentionHighlights,
+      }}
+      embedHandler={{
+        issue: {
+          widgetCallback: issueEmbedProps.widgetCallback,
+        },
+      }}
+    />
+  );
+});

web/core/components/pages/version/index.ts

@@ -0,0 +1,6 @@
+export * from "./editor";
+export * from "./main-content";
+export * from "./root";
+export * from "./sidebar-list-item";
+export * from "./sidebar-list";
+export * from "./sidebar-root";

web/core/components/pages/version/main-content.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { TriangleAlert } from "lucide-react";
+// plane types
+import { TPageVersion } from "@plane/types";
+// plane ui
+import { Button, setToast, TOAST_TYPE } from "@plane/ui";
+// helpers
+import { renderFormattedDate, renderFormattedTime } from "@/helpers/date-time.helper";
+
+type Props = {
+  activeVersion: string | null;
+  editorComponent: React.FC<{
+    activeVersion: string | null;
+    isCurrentVersionActive: boolean;
+    pageId: string;
+    versionDetails: TPageVersion | undefined;
+  }>;
+  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
+  handleClose: () => void;
+  handleRestore: (descriptionHTML: string) => Promise<void>;
+  pageId: string;
+  restoreEnabled: boolean;
+};
+
+export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
+  const { activeVersion, editorComponent, fetchVersionDetails, handleClose, handleRestore, pageId, restoreEnabled } =
+    props;
+  // states
+  const [isRestoring, setIsRestoring] = useState(false);
+  const [isRetrying, setIsRetrying] = useState(false);
+
+  const {
+    data: versionDetails,
+    error: versionDetailsError,
+    mutate: mutateVersionDetails,
+  } = useSWR(
+    pageId && activeVersion && activeVersion !== "current" ? `PAGE_VERSION_${activeVersion}` : null,
+    pageId && activeVersion && activeVersion !== "current" ? () => fetchVersionDetails(pageId, activeVersion) : null
+  );
+
+  const isCurrentVersionActive = activeVersion === "current";
+
+  const handleRestoreVersion = async () => {
+    if (!restoreEnabled) return;
+    setIsRestoring(true);
+    await handleRestore(versionDetails?.description_html ?? "<p></p>")
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Page version restored.",
+        });
+        handleClose();
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Failed to restore page version.",
+        })
+      )
+      .finally(() => setIsRestoring(false));
+  };
+
+  const handleRetry = async () => {
+    setIsRetrying(true);
+    await mutateVersionDetails();
+    setIsRetrying(false);
+  };
+
+  const VersionEditor = editorComponent;
+
+  return (
+    <div className="flex-grow flex flex-col overflow-hidden">
+      {versionDetailsError ? (
+        <div className="flex-grow grid place-items-center">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <span className="flex-shrink-0 grid place-items-center size-11 text-custom-text-300">
+              <TriangleAlert className="size-10" />
+            </span>
+            <div>
+              <h6 className="text-lg font-semibold">Something went wrong!</h6>
+              <p className="text-sm text-custom-text-300">The version could not be loaded, please try again.</p>
+            </div>
+            <Button variant="link-primary" onClick={handleRetry} loading={isRetrying}>
+              Try again
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="min-h-14 py-3 px-5 border-b border-custom-border-200 flex items-center justify-between gap-2">
+            <h6 className="text-base font-medium">
+              {isCurrentVersionActive
+                ? "Current version"
+                : versionDetails
+                  ? `${renderFormattedDate(versionDetails.last_saved_at)} ${renderFormattedTime(versionDetails.last_saved_at)}`
+                  : "Loading version details"}
+            </h6>
+            {!isCurrentVersionActive && restoreEnabled && (
+              <Button
+                variant="primary"
+                size="sm"
+                className="flex-shrink-0"
+                onClick={handleRestoreVersion}
+                loading={isRestoring}
+              >
+                {isRestoring ? "Restoring" : "Restore"}
+              </Button>
+            )}
+          </div>
+          <div className="pt-8 h-full overflow-y-scroll vertical-scrollbar scrollbar-sm">
+            <VersionEditor
+              activeVersion={activeVersion}
+              isCurrentVersionActive={isCurrentVersionActive}
+              pageId={pageId}
+              versionDetails={versionDetails}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+});

web/core/components/pages/version/root.tsx

@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+// plane types
+import { TPageVersion } from "@plane/types";
+// components
+import { PageVersionsMainContent, PageVersionsSidebarRoot } from "@/components/pages";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  activeVersion: string | null;
+  editorComponent: React.FC<{
+    activeVersion: string | null;
+    isCurrentVersionActive: boolean;
+    pageId: string;
+    versionDetails: TPageVersion | undefined;
+  }>;
+  fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
+  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
+  handleRestore: (descriptionHTML: string) => Promise<void>;
+  isOpen: boolean;
+  onClose: () => void;
+  pageId: string;
+  restoreEnabled: boolean;
+};
+
+export const PageVersionsOverlay: React.FC<Props> = observer((props) => {
+  const {
+    activeVersion,
+    editorComponent,
+    fetchAllVersions,
+    fetchVersionDetails,
+    handleRestore,
+    isOpen,
+    onClose,
+    pageId,
+    restoreEnabled,
+  } = props;
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 z-10 size-full bg-custom-background-100 flex overflow-hidden opacity-0 pointer-events-none transition-opacity",
+        {
+          "opacity-100 pointer-events-auto": isOpen,
+        }
+      )}
+    >
+      <PageVersionsMainContent
+        activeVersion={activeVersion}
+        editorComponent={editorComponent}
+        fetchVersionDetails={fetchVersionDetails}
+        handleClose={handleClose}
+        handleRestore={handleRestore}
+        pageId={pageId}
+        restoreEnabled={restoreEnabled}
+      />
+      <PageVersionsSidebarRoot
+        activeVersion={activeVersion}
+        fetchAllVersions={fetchAllVersions}
+        handleClose={handleClose}
+        isOpen={isOpen}
+        pageId={pageId}
+      />
+    </div>
+  );
+});

web/core/components/pages/version/sidebar-list-item.tsx

@@ -0,0 +1,48 @@
+import { observer } from "mobx-react";
+import Link from "next/link";
+// plane types
+import { TPageVersion } from "@plane/types";
+// plane ui
+import { Avatar } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { renderFormattedDate, renderFormattedTime } from "@/helpers/date-time.helper";
+// hooks
+import { useMember } from "@/hooks/store";
+
+type Props = {
+  href: string;
+  isActive: boolean;
+  version: TPageVersion;
+};
+
+export const PlaneVersionsSidebarListItem: React.FC<Props> = observer((props) => {
+  const { href, isActive, version } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const ownerDetails = getUserDetails(version.owned_by);
+
+  return (
+    <Link
+      href={href}
+      className={cn("block p-2 rounded-md w-72 hover:bg-custom-background-80 transition-colors", {
+        "bg-custom-background-80": isActive,
+      })}
+    >
+      <p className="text-sm font-medium truncate">
+        {renderFormattedDate(version.last_saved_at)} {renderFormattedTime(version.last_saved_at)}
+      </p>
+      <p className="mt-2 flex items-center gap-1 text-xs">
+        <Avatar
+          src={ownerDetails?.avatar}
+          name={ownerDetails?.display_name}
+          shape="square"
+          size="sm"
+          className="flex-shrink-0"
+        />
+        <span className="text-custom-text-300">{ownerDetails?.display_name}</span>
+      </p>
+    </Link>
+  );
+});

web/core/components/pages/version/sidebar-list.tsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import Link from "next/link";
+import useSWR from "swr";
+import { TriangleAlert } from "lucide-react";
+// plane types
+import { TPageVersion } from "@plane/types";
+// plane ui
+import { Button, Loader } from "@plane/ui";
+// components
+import { PlaneVersionsSidebarListItem } from "@/components/pages";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useQueryParams } from "@/hooks/use-query-params";
+
+type Props = {
+  activeVersion: string | null;
+  fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
+  isOpen: boolean;
+  pageId: string;
+};
+
+export const PageVersionsSidebarList: React.FC<Props> = (props) => {
+  const { activeVersion, fetchAllVersions, isOpen, pageId } = props;
+  // states
+  const [isRetrying, setIsRetrying] = useState(false);
+  // update query params
+  const { updateQueryParams } = useQueryParams();
+
+  const {
+    data: versionsList,
+    error: versionsListError,
+    mutate: mutateVersionsList,
+  } = useSWR(
+    pageId && isOpen ? `PAGE_VERSIONS_LIST_${pageId}` : null,
+    pageId && isOpen ? () => fetchAllVersions(pageId) : null
+  );
+
+  const handleRetry = async () => {
+    setIsRetrying(true);
+    await mutateVersionsList();
+    setIsRetrying(false);
+  };
+
+  const getVersionLink = (versionID: string) =>
+    updateQueryParams({
+      paramsToAdd: { version: versionID },
+    });
+
+  return (
+    <div className="mt-4 px-4 h-full flex flex-col space-y-2 overflow-y-scroll vertical-scrollbar scrollbar-sm">
+      <Link
+        href={getVersionLink("current")}
+        className={cn("block p-2 rounded-md w-72 hover:bg-custom-background-80 transition-colors", {
+          "bg-custom-background-80": activeVersion === "current",
+        })}
+      >
+        <p className="text-sm font-medium">Current version</p>
+      </Link>
+      {versionsListError ? (
+        <div className="h-full grid place-items-center">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <span className="flex-shrink-0 grid place-items-center size-11 text-custom-text-300">
+              <TriangleAlert className="size-10" />
+            </span>
+            <div>
+              <h6 className="text-base font-semibold">Something went wrong!</h6>
+              <p className="text-xs text-custom-text-300">
+                There was a problem while loading previous
+                <br />
+                versions, please try again.
+              </p>
+            </div>
+            <Button variant="link-primary" onClick={handleRetry} loading={isRetrying}>
+              Try again
+            </Button>
+          </div>
+        </div>
+      ) : versionsList ? (
+        versionsList.map((version) => (
+          <PlaneVersionsSidebarListItem
+            key={version.id}
+            href={getVersionLink(version.id)}
+            isActive={activeVersion === version.id}
+            version={version}
+          />
+        ))
+      ) : (
+        <Loader className="space-y-4">
+          <Loader.Item height="56px" />
+          <Loader.Item height="56px" />
+          <Loader.Item height="56px" />
+          <Loader.Item height="56px" />
+          <Loader.Item height="56px" />
+        </Loader>
+      )}
+    </div>
+  );
+};

web/core/components/pages/version/sidebar-root.tsx

@@ -0,0 +1,38 @@
+import { X } from "lucide-react";
+// plane types
+import { TPageVersion } from "@plane/types";
+// components
+import { PageVersionsSidebarList } from "@/components/pages";
+
+type Props = {
+  activeVersion: string | null;
+  fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
+  handleClose: () => void;
+  isOpen: boolean;
+  pageId: string;
+};
+
+export const PageVersionsSidebarRoot: React.FC<Props> = (props) => {
+  const { activeVersion, fetchAllVersions, handleClose, isOpen, pageId } = props;
+
+  return (
+    <div className="flex-shrink-0 py-4 border-l border-custom-border-200 flex flex-col">
+      <div className="px-6 flex items-center justify-between gap-2">
+        <h5 className="text-base font-semibold">Version history</h5>
+        <button
+          type="button"
+          onClick={handleClose}
+          className="flex-shrink-0 size-6 grid place-items-center text-custom-text-300 hover:text-custom-text-100 transition-colors"
+        >
+          <X className="size-4" />
+        </button>
+      </div>
+      <PageVersionsSidebarList
+        activeVersion={activeVersion}
+        fetchAllVersions={fetchAllVersions}
+        isOpen={isOpen}
+        pageId={pageId}
+      />
+    </div>
+  );
+};

web/core/components/project/project-feature-update.tsx

@@ -28,14 +28,10 @@ export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="px-4 py-2">
-        <h3 className="text-base font-medium leading-6">Toggle project features</h3>
-        <div className="text-sm tracking-tight text-custom-text-200 leading-5">
-          Turn on features which help you manage and run your project.
-        </div>
+      <div className="p-2">
+        <ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
       </div>
-      <ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
-      <div className="flex items-center justify-between gap-2 mt-4 px-4 pt-4 pb-2 border-t border-custom-border-100">
+      <div className="flex items-center justify-between gap-2 mt-4 px-6 py-4 border-t border-custom-border-100">
         <div className="flex gap-1 text-sm text-custom-text-300 font-medium">
           Congrats! Project <Logo logo={currentProjectDetails.logo_props} />{" "}
           <p className="break-all">{currentProjectDetails.name}</p> created.

web/core/components/project/settings/features-list.tsx

@@ -61,8 +61,9 @@ export const ProjectFeaturesList: FC<Props> = observer((props) => {
         const feature = PROJECT_FEATURES_LIST[featureSectionKey];
         return (
           <div key={featureSectionKey} className="">
-            <div className="flex items-center border-b border-custom-border-100 py-3.5">
+            <div className="flex flex-col justify-center border-b border-custom-border-100 py-3">
               <h3 className="text-xl font-medium">{feature.title}</h3>
+              <h4 className="text-sm leading-5 text-custom-text-200">{feature.description}</h4>
             </div>
             {Object.keys(feature.featureList).map((featureItemKey) => {
               const featureItem = feature.featureList[featureItemKey];

web/core/components/views/filters/order-by.tsx

@@ -7,17 +7,16 @@ import { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
 import { CustomMenu, getButtonStyling } from "@plane/ui";
 // constants
 import { VIEW_SORTING_KEY_OPTIONS } from "@/constants/views";
-// helpers
-import { cn } from "@/helpers/common.helper";
 
 type Props = {
   onChange: (value: { key?: TViewFiltersSortKey; order?: TViewFiltersSortBy }) => void;
   sortBy: TViewFiltersSortBy;
   sortKey: TViewFiltersSortKey;
+  isMobile?: boolean;
 };
 
 export const ViewOrderByDropdown: React.FC<Props> = (props) => {
-  const { onChange, sortBy, sortKey } = props;
+  const { onChange, sortBy, sortKey, isMobile = false } = props;
 
   const orderByDetails = VIEW_SORTING_KEY_OPTIONS.find((option) => sortKey === option.key);
   const isDescending = sortBy === "desc";
@@ -27,14 +26,20 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
     { key: "desc", label: "Descending", isSelected: isDescending },
   ];
 
+  const buttonClassName = isMobile
+    ? "flex items-center text-sm text-custom-text-200"
+    : `${getButtonStyling("neutral-primary", "sm")} px-2 text-custom-text-300`;
+
+  const chevronClassName = isMobile ? "h-4 w-4 text-custom-text-200" : "h-3 w-3";
+
   return (
     <CustomMenu
       customButton={
-        <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
-          <ArrowDownWideNarrow className="h-3 w-3" />
-          {orderByDetails?.label}
-          <ChevronDown className="h-3 w-3" strokeWidth={2} />
-        </div>
+        <span className={buttonClassName}>
+          {!isMobile && <ArrowDownWideNarrow className="h-3 w-3" />}
+          <span className="flex-shrink-0"> {orderByDetails?.label}</span>
+          <ChevronDown className={chevronClassName} strokeWidth={2} />
+        </span>
       }
       placement="bottom-end"
       maxHeight="lg"

web/core/components/views/view-list-header.tsx

@@ -89,26 +89,28 @@ export const ViewListHeader = observer(() => {
           )}
         </div>
       </div>
-      <ViewOrderByDropdown
-        sortBy={filters.sortBy}
-        sortKey={filters.sortKey}
-        onChange={(val) => {
-          if (val.key) updateFilters("sortKey", val.key);
-          if (val.order) updateFilters("sortBy", val.order);
-        }}
-      />
-      <FiltersDropdown
-        icon={<ListFilter className="h-3 w-3" />}
-        title="Filters"
-        placement="bottom-end"
-        isFiltersApplied={false}
-      >
-        <ViewFiltersSelection
-          filters={filters}
-          handleFiltersUpdate={updateFilters}
-          memberIds={projectMemberIds ?? undefined}
+      <div className="hidden md:flex items-center gap-2">
+        <ViewOrderByDropdown
+          sortBy={filters.sortBy}
+          sortKey={filters.sortKey}
+          onChange={(val) => {
+            if (val.key) updateFilters("sortKey", val.key);
+            if (val.order) updateFilters("sortBy", val.order);
+          }}
         />
-      </FiltersDropdown>
+        <FiltersDropdown
+          icon={<ListFilter className="h-3 w-3" />}
+          title="Filters"
+          placement="bottom-end"
+          isFiltersApplied={false}
+        >
+          <ViewFiltersSelection
+            filters={filters}
+            handleFiltersUpdate={updateFilters}
+            memberIds={projectMemberIds ?? undefined}
+          />
+        </FiltersDropdown>
+      </div>
     </div>
   );
 });

web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx

@@ -1,6 +1,9 @@
 "use client";
 import React, { FC } from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
+import { useAppTheme } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   projectId: string | null;
@@ -10,8 +13,11 @@ type Props = {
   isSidebarCollapsed: boolean;
 };
 
-export const FavoriteItemTitle: FC<Props> = (props) => {
+export const FavoriteItemTitle: FC<Props> = observer((props) => {
   const { projectId, href, title, icon, isSidebarCollapsed } = props;
+  // store hooks
+  const { toggleSidebar } = useAppTheme();
+  const { isMobile } = usePlatformOS();
 
   const linkClass = "flex items-center gap-1.5 truncate w-full";
   const collapsedClass =
@@ -22,6 +28,7 @@ export const FavoriteItemTitle: FC<Props> = (props) => {
       const projectItem = document.getElementById(`${projectId}`);
       projectItem?.scrollIntoView({ behavior: "smooth" });
     }
+    if (isMobile) toggleSidebar();
   };
 
   return (
@@ -30,4 +37,4 @@ export const FavoriteItemTitle: FC<Props> = (props) => {
       {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
     </Link>
   );
-};
+});

web/core/components/workspace/sidebar/projects-list-item.tsx

@@ -8,7 +8,7 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { createRoot } from "react-dom/client";
 import {
   PenSquare,
@@ -35,6 +35,7 @@ import {
   DropIndicator,
   DragHandle,
   Intake,
+  ControlLink,
 } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
@@ -126,7 +127,8 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
   const projectRef = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLButtonElement | null>(null);
-  // router params
+  // router
+  const router = useRouter();
   const { workspaceSlug, projectId: URLProjectId } = useParams();
   // pathname
   const pathname = usePathname();
@@ -281,11 +283,16 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     else setIsProjectListOpen(false);
   }, [URLProjectId]);
 
+  const handleItemClick = () => {
+    if (!isProjectListOpen && !isMobile) router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
+    setIsProjectListOpen((prev) => !prev);
+  };
+
   return (
     <>
       <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
       <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={() => setLeaveProjectModal(false)} />
-      <Disclosure key={`${project.id}_${URLProjectId}`} ref={projectRef} defaultOpen={isProjectListOpen}>
+      <Disclosure key={`${project.id}_${URLProjectId}`} ref={projectRef} defaultOpen={isProjectListOpen} as="div">
         <div
           id={`sidebar-${projectId}-${projectListType}`}
           className={cn("relative", {
@@ -328,22 +335,19 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
               </Tooltip>
             )}
             {isSidebarCollapsed ? (
-              <Link
+              <ControlLink
                 href={`/${workspaceSlug}/projects/${project.id}/issues`}
                 className={cn("flex-grow flex items-center gap-1.5 truncate text-left select-none", {
                   "justify-center": isSidebarCollapsed,
                 })}
+                onClick={handleItemClick}
               >
-                <Disclosure.Button
-                  as="button"
-                  className="size-8 aspect-square flex-shrink-0 grid place-items-center"
-                  onClick={() => setIsProjectListOpen(!isProjectListOpen)}
-                >
+                <Disclosure.Button as="button" className="size-8 aspect-square flex-shrink-0 grid place-items-center">
                   <div className="size-4 grid place-items-center flex-shrink-0">
                     <Logo logo={project.logo_props} size={16} />
                   </div>
                 </Disclosure.Button>
-              </Link>
+              </ControlLink>
             ) : (
               <>
                 <Tooltip
@@ -352,21 +356,24 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                   disabled={!isSidebarCollapsed}
                   isMobile={isMobile}
                 >
-                  <Link href={`/${workspaceSlug}/projects/${project.id}/issues`} className="flex-grow flex truncate">
+                  <ControlLink
+                    href={`/${workspaceSlug}/projects/${project.id}/issues`}
+                    className="flex-grow flex truncate"
+                    onClick={handleItemClick}
+                  >
                     <Disclosure.Button
                       as="button"
                       type="button"
                       className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {
                         "justify-center": isSidebarCollapsed,
                       })}
-                      onClick={() => setIsProjectListOpen(!isProjectListOpen)}
                     >
                       <div className="size-4 grid place-items-center flex-shrink-0">
                         <Logo logo={project.logo_props} size={16} />
                       </div>
                       <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{project.name}</p>
                     </Disclosure.Button>
-                  </Link>
+                  </ControlLink>
                 </Tooltip>
                 <CustomMenu
                   customButton={
@@ -386,6 +393,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                   )}
                   customButtonClassName="grid place-items-center"
                   placement="bottom-start"
+                  useCaptureForOutsideClick
                 >
                   {!isViewerOrGuest && (
                     <CustomMenu.MenuItem

web/core/hooks/use-multiple-select.ts

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useMemo } from "react";
 // hooks
 import { useMultipleSelectStore } from "@/hooks/store";
+//
+import useReloadConfirmations from "./use-reload-confirmation";
 
 export type TEntityDetails = {
   entityID: string;
@@ -52,6 +54,15 @@ export const useMultipleSelect = (props: Props) => {
     getEntityDetailsFromEntityID,
   } = useMultipleSelectStore();
 
+  useReloadConfirmations(
+    selectedEntityIds && selectedEntityIds.length > 0,
+    "Are you sure you want to leave? Your current bulk operation selections will be lost.",
+    true,
+    () => {
+      clearSelection();
+    }
+  );
+
   const groups = useMemo(() => Object.keys(entities), [entities]);
 
   const entitiesList: TEntityDetails[] = useMemo(

web/core/hooks/use-page-description.ts

@@ -1,20 +1,19 @@
 import React, { useCallback, useEffect, useState } from "react";
 import useSWR from "swr";
-
+// plane editor
 import {
   EditorRefApi,
   proseMirrorJSONToBinaryString,
   applyUpdates,
   generateJSONfromHTMLForDocumentEditor,
 } from "@plane/editor";
-
 // hooks
 import { setToast, TOAST_TYPE } from "@plane/ui";
 import useAutoSave from "@/hooks/use-auto-save";
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
-
 // services
 import { ProjectPageService } from "@/services/page";
+// store
 import { IPage } from "@/store/pages/page";
 
 const projectPageService = new ProjectPageService();
@@ -183,6 +182,19 @@ export const usePageDescription = (props: Props) => {
     ]
   );
 
+  const manuallyUpdateDescription = async (descriptionHTML: string) => {
+    const { contentJSON, editorSchema } = generateJSONfromHTMLForDocumentEditor(descriptionHTML ?? "<p></p>");
+    const yDocBinaryString = proseMirrorJSONToBinaryString(contentJSON, "default", editorSchema);
+
+    try {
+      editorRef.current?.clearEditor(true);
+      await updateDescription(yDocBinaryString, descriptionHTML ?? "<p></p>");
+      await mutateDescriptionYJS();
+    } catch (error) {
+      console.log("error", error);
+    }
+  };
+
   useAutoSave(handleSaveDescription);
 
   return {
@@ -190,5 +202,6 @@ export const usePageDescription = (props: Props) => {
     isDescriptionReady,
     pageDescriptionYJS,
     handleSaveDescription,
+    manuallyUpdateDescription,
   };
 };

web/core/hooks/use-query-params.ts

@@ -0,0 +1,39 @@
+import { useSearchParams, usePathname } from "next/navigation";
+
+type TParamsToAdd = {
+  [key: string]: string;
+};
+
+export const useQueryParams = () => {
+  // next navigation
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const updateQueryParams = ({
+    paramsToAdd = {},
+    paramsToRemove = [],
+  }: {
+    paramsToAdd?: TParamsToAdd;
+    paramsToRemove?: string[];
+  }) => {
+    const currentParams = new URLSearchParams(searchParams.toString());
+
+    // add or update query parameters
+    Object.keys(paramsToAdd).forEach((key) => {
+      currentParams.set(key, paramsToAdd[key]);
+    });
+
+    // remove specified query parameters
+    paramsToRemove.forEach((key) => {
+      currentParams.delete(key);
+    });
+
+    // construct the new route with the updated query parameters
+    const newRoute = `${pathname}?${currentParams.toString()}`;
+    return newRoute;
+  };
+
+  return {
+    updateQueryParams,
+  };
+};

web/core/hooks/use-reload-confirmation.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 
 //TODO: remove temp flag isActive later and use showAlert as the source of truth
-const useReloadConfirmations = (isActive = true) => {
-  const [showAlert, setShowAlert] = useState(false);
+const useReloadConfirmations = (isActive = true, message?: string, defaultShowAlert = false, onLeave?: () => void) => {
+  const [showAlert, setShowAlert] = useState(defaultShowAlert);
+
+  const alertMessage = message ?? "Are you sure you want to leave? Changes you made may not be saved.";
 
   const handleBeforeUnload = useCallback(
     (event: BeforeUnloadEvent) => {
@@ -28,8 +30,10 @@ const useReloadConfirmations = (isActive = true) => {
       const isAnchorTargetBlank = anchorElement.getAttribute("target") === "_blank";
       if (isAnchorTargetBlank) return;
       // show confirm dialog
-      const leave = confirm("Are you sure you want to leave? Changes you made may not be saved.");
-      if (!leave) {
+      const isLeaving = confirm(alertMessage);
+      if (isLeaving) {
+        onLeave && onLeave();
+      } else {
         event.preventDefault();
         event.stopPropagation();
       }

web/core/services/cycle.service.ts

@@ -4,8 +4,9 @@ import type {
   ICycle,
   TIssuesResponse,
   IWorkspaceActiveCyclesResponse,
-  IWorkspaceProgressResponse,
-  IWorkspaceAnalyticsResponse,
+  TCycleDistribution,
+  TProgressSnapshot,
+  TCycleEstimateDistribution,
 } from "@plane/types";
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { APIService } from "@/services/api.service";
@@ -20,7 +21,7 @@ export class CycleService extends APIService {
     projectId: string,
     cycleId: string,
     analytic_type: string = "points"
-  ): Promise<IWorkspaceAnalyticsResponse> {
+  ): Promise<TCycleDistribution | TCycleEstimateDistribution> {
     return this.get(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/analytics?type=${analytic_type}`
     )
@@ -34,7 +35,7 @@ export class CycleService extends APIService {
     workspaceSlug: string,
     projectId: string,
     cycleId: string
-  ): Promise<IWorkspaceProgressResponse> {
+  ): Promise<TProgressSnapshot> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/progress/`)
       .then((res) => res?.data)
       .catch((err) => {

web/core/services/page/index.ts

@@ -1 +1,2 @@
+export * from "./project-page-version.service";
 export * from "./project-page.service";

web/core/services/page/project-page-version.service.ts

@@ -0,0 +1,33 @@
+// plane types
+import { TPageVersion } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// services
+import { APIService } from "@/services/api.service";
+
+export class ProjectPageVersionService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchAllVersions(workspaceSlug: string, projectId: string, pageId: string): Promise<TPageVersion[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/versions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchVersionById(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    versionId: string
+  ): Promise<TPageVersion> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/versions/${versionId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}

web/core/store/cycle.store.ts

@@ -4,7 +4,14 @@ import sortBy from "lodash/sortBy";
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
-import { ICycle, CycleDateCheckData, TCyclePlotType } from "@plane/types";
+import {
+  ICycle,
+  CycleDateCheckData,
+  TCyclePlotType,
+  TProgressSnapshot,
+  TCycleEstimateDistribution,
+  TCycleDistribution,
+} from "@plane/types";
 // helpers
 import { orderCycles, shouldFilterCycle } from "@/helpers/cycle.helper";
 import { getDate } from "@/helpers/date-time.helper";
@@ -55,6 +62,13 @@ export interface ICycleStore {
   fetchArchivedCycles: (workspaceSlug: string, projectId: string) => Promise<undefined | ICycle[]>;
   fetchArchivedCycleDetails: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<ICycle>;
   fetchCycleDetails: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<ICycle>;
+  fetchActiveCycleProgress: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<TProgressSnapshot>;
+  fetchActiveCycleAnalytics: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    analytic_type: string
+  ) => Promise<TCycleDistribution | TCycleEstimateDistribution>;
   // crud
   createCycle: (workspaceSlug: string, projectId: string, data: Partial<ICycle>) => Promise<ICycle>;
   updateCycleDetails: (
@@ -93,7 +107,7 @@ export class CycleStore implements ICycleStore {
       // observables
       loader: observable.ref,
       cycleMap: observable,
-      plotType: observable.ref,
+      plotType: observable,
       activeCycleIdMap: observable,
       fetchedMap: observable,
       // computed
@@ -113,6 +127,8 @@ export class CycleStore implements ICycleStore {
       fetchActiveCycle: action,
       fetchArchivedCycles: action,
       fetchArchivedCycleDetails: action,
+      fetchActiveCycleProgress: action,
+      fetchActiveCycleAnalytics: action,
       fetchCycleDetails: action,
       createCycle: action,
       updateCycleDetails: action,
@@ -403,6 +419,7 @@ export class CycleStore implements ICycleStore {
         runInAction(() => {
           response.forEach((cycle) => {
             set(this.cycleMap, [cycle.id], cycle);
+            cycle.status?.toLowerCase() === "current" && set(this.activeCycleIdMap, [cycle.id], true);
           });
           set(this.fetchedMap, projectId, true);
           this.loader = false;
@@ -457,6 +474,43 @@ export class CycleStore implements ICycleStore {
       return response;
     });
 
+  /**
+   * @description fetches active cycle progress
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   *  @returns
+   */
+  fetchActiveCycleProgress = async (workspaceSlug: string, projectId: string, cycleId: string) =>
+    await this.cycleService.workspaceActiveCyclesProgress(workspaceSlug, projectId, cycleId).then((progress) => {
+      runInAction(() => {
+        set(this.cycleMap, [cycleId], { ...this.cycleMap[cycleId], ...progress });
+      });
+      return progress;
+    });
+
+  /**
+   * @description fetches active cycle analytics
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   *  @returns
+   */
+  fetchActiveCycleAnalytics = async (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    analytic_type: string
+  ) =>
+    await this.cycleService
+      .workspaceActiveCyclesAnalytics(workspaceSlug, projectId, cycleId, analytic_type)
+      .then((cycle) => {
+        runInAction(() => {
+          set(this.cycleMap, [cycleId, analytic_type === "points" ? "estimate_distribution" : "distribution"], cycle);
+        });
+        return cycle;
+      });
+
   /**
    * @description fetches cycle details
    * @param workspaceSlug

web/helpers/date-time.helper.ts

@@ -344,3 +344,16 @@ export const convertMinutesToHoursMinutesString = (totalMinutes: number): string
 
   return `${hours ? `${hours}h ` : ``}${minutes ? `${minutes}m ` : ``}`;
 };
+
+/**
+ * @description calculates the read time for a document using the words count
+ * @param {number} wordsCount
+ * @returns {number} total number of seconds
+ * @example getReadTimeFromWordsCount(400) // Output: 120
+ * @example getReadTimeFromWordsCount(100) // Output: 30s
+ */
+export const getReadTimeFromWordsCount = (wordsCount: number): number => {
+  const wordsPerMinute = 200;
+  const minutes = wordsCount / wordsPerMinute;
+  return minutes * 60;
+};

web/styles/globals.css

@@ -359,6 +359,12 @@ body {
   color: rgba(var(--color-text-100));
 }
 
+.app-container {
+  contain: layout style size;
+  contain-intrinsic-size: 100%;
+  position: relative; /* Ensure it's the containing block */
+}
+
 /* scrollbar style */
 ::-webkit-scrollbar {
   display: none;