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/cycle.py

@@ -544,6 +544,12 @@ class CycleArchiveUnarchiveAPIEndpoint(BaseAPIView):
             )
         cycle.archived_at = timezone.now()
         cycle.save()
+        UserFavorite.objects.filter(
+            entity_type="cycle",
+            entity_identifier=cycle_id,
+            project_id=project_id,
+            workspace__slug=slug,
+        ).delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
     def delete(self, request, slug, project_id, cycle_id):

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/api/views/module.py

@@ -634,6 +634,12 @@ class ModuleArchiveUnarchiveAPIEndpoint(BaseAPIView):
             )
         module.archived_at = timezone.now()
         module.save()
+        UserFavorite.objects.filter(
+            entity_type="module",
+            entity_identifier=pk,
+            project_id=project_id,
+            workspace__slug=slug,
+        ).delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
     def delete(self, request, slug, project_id, pk):

apiserver/plane/api/views/project.py

@@ -377,6 +377,10 @@ class ProjectArchiveUnarchiveAPIEndpoint(BaseAPIView):
         project = Project.objects.get(pk=project_id, workspace__slug=slug)
         project.archived_at = timezone.now()
         project.save()
+        UserFavorite.objects.filter(
+            workspace__slug=slug,
+            project=project_id,
+        ).delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
     def delete(self, request, slug, project_id):

apiserver/plane/app/permissions/base.py

@@ -53,7 +53,7 @@ def allow_permission(allowed_roles, level="PROJECT", creator=False, model=None):
             # Return permission denied if no conditions are met
             return Response(
                 {"error": "You don't have the required permissions."},
-                status=status.HTTP_401_UNAUTHORIZED,
+                status=status.HTTP_403_FORBIDDEN,
             )
 
         return _wrapped_view

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

@@ -19,8 +19,8 @@ from plane.app.views import (
     IssueUserDisplayPropertyEndpoint,
     IssueViewSet,
     LabelViewSet,
-    BulkIssueOperationsEndpoint,
     BulkArchiveIssuesEndpoint,
+    IssuePaginatedViewSet,
 )
 
 urlpatterns = [
@@ -39,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(
@@ -305,9 +311,4 @@ urlpatterns = [
         ),
         name="project-issue-draft",
     ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-operation-issues/",
-        BulkIssueOperationsEndpoint.as_view(),
-        name="bulk-operations-issues",
-    ),
 ]

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 (
@@ -156,9 +159,6 @@ from .issue.subscriber import (
     IssueSubscriberViewSet,
 )
 
-
-from .issue.bulk_operations import BulkIssueOperationsEndpoint
-
 from .module.base import (
     ModuleViewSet,
     ModuleLinkViewSet,

apiserver/plane/app/views/cycle/archive.py

@@ -607,6 +607,12 @@ class CycleArchiveUnarchiveEndpoint(BaseAPIView):
 
         cycle.archived_at = timezone.now()
         cycle.save()
+        UserFavorite.objects.filter(
+            entity_type="cycle",
+            entity_identifier=cycle_id,
+            project_id=project_id,
+            workspace__slug=slug,
+        ).delete()
         return Response(
             {"archived_at": str(cycle.archived_at)},
             status=status.HTTP_200_OK,

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

@@ -15,7 +15,7 @@ class ExportIssuesEndpoint(BaseAPIView):
     model = ExporterHistory
     serializer_class = ExporterHistorySerializer
 
-    @allow_permission(allowed_roles=[ROLE.ADMIN], level="WORKSPACE")
+    @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE")
     def post(self, request, slug):
         # Get the workspace
         workspace = Workspace.objects.get(slug=slug)
@@ -62,7 +62,9 @@ class ExportIssuesEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    @allow_permission(allowed_roles=[ROLE.ADMIN], level="WORKSPACE")
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE"
+    )
     def get(self, request, slug):
         exporter_history = ExporterHistory.objects.filter(
             workspace__slug=slug,

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

@@ -47,6 +47,7 @@ from plane.utils.paginator import (
     SubGroupedOffsetPaginator,
 )
 from plane.app.permissions import allow_permission, ROLE
+from plane.utils.error_codes import ERROR_CODES
 
 # Module imports
 from .. import BaseViewSet, BaseAPIView
@@ -345,7 +346,9 @@ class BulkArchiveIssuesEndpoint(BaseAPIView):
             if issue.state.group not in ["completed", "cancelled"]:
                 return Response(
                     {
-                        "error_code": 4091,
+                        "error_code": ERROR_CODES[
+                            "INVALID_ARCHIVE_STATE_GROUP"
+                        ],
                         "error_message": "INVALID_ARCHIVE_STATE_GROUP",
                     },
                     status=status.HTTP_400_BAD_REQUEST,

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

@@ -56,10 +56,11 @@ 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)
@@ -127,6 +128,14 @@ class IssueListEndpoint(BaseAPIView):
             sub_group_by=sub_group_by,
         )
 
+        recent_visited_task.delay(
+            slug=slug,
+            project_id=project_id,
+            entity_name="project",
+            entity_identifier=project_id,
+            user_id=request.user.id,
+        )
+
         if self.fields or self.expand:
             issues = IssueSerializer(
                 queryset, many=True, fields=self.fields, expand=self.expand
@@ -247,6 +256,13 @@ class IssueViewSet(BaseViewSet):
             sub_group_by=sub_group_by,
         )
 
+        recent_visited_task.delay(
+            slug=slug,
+            project_id=project_id,
+            entity_name="project",
+            entity_identifier=project_id,
+            user_id=request.user.id,
+        )
         if ProjectMember.objects.filter(
             workspace__slug=slug,
             project_id=project_id,
@@ -484,6 +500,14 @@ class IssueViewSet(BaseViewSet):
                 status=status.HTTP_404_NOT_FOUND,
             )
 
+        recent_visited_task.delay(
+            slug=slug,
+            entity_name="issue",
+            entity_identifier=pk,
+            user_id=request.user.id,
+            project_id=project_id,
+        )
+
         serializer = IssueDetailSerializer(issue, expand=self.expand)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
@@ -575,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(
@@ -606,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):
@@ -630,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/issue/bulk_operations.py

@@ -1,293 +0,0 @@
-# Python imports
-import json
-from datetime import datetime
-
-# Django imports
-from django.utils import timezone
-
-# Third Party imports
-from rest_framework.response import Response
-from rest_framework import status
-
-# Module imports
-from .. import BaseAPIView
-from plane.app.permissions import (
-    ProjectEntityPermission,
-)
-from plane.db.models import (
-    Project,
-    Issue,
-    IssueLabel,
-    IssueAssignee,
-)
-from plane.bgtasks.issue_activities_task import issue_activity
-
-
-class BulkIssueOperationsEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    def post(self, request, slug, project_id):
-        issue_ids = request.data.get("issue_ids", [])
-        if not len(issue_ids):
-            return Response(
-                {"error": "Issue IDs are required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        # Get all the issues
-        issues = (
-            Issue.objects.filter(
-                workspace__slug=slug, project_id=project_id, pk__in=issue_ids
-            )
-            .select_related("state")
-            .prefetch_related("labels", "assignees")
-        )
-        # Current epoch
-        epoch = int(timezone.now().timestamp())
-
-        # Project details
-        project = Project.objects.get(workspace__slug=slug, pk=project_id)
-        workspace_id = project.workspace_id
-
-        # Initialize arrays
-        bulk_update_issues = []
-        bulk_issue_activities = []
-        bulk_update_issue_labels = []
-        bulk_update_issue_assignees = []
-
-        properties = request.data.get("properties", {})
-
-        if properties.get("start_date", False) and properties.get(
-            "target_date", False
-        ):
-            if (
-                datetime.strptime(
-                    properties.get("start_date"), "%Y-%m-%d"
-                ).date()
-                > datetime.strptime(
-                    properties.get("target_date"), "%Y-%m-%d"
-                ).date()
-            ):
-                return Response(
-                    {
-                        "error_code": 4100,
-                        "error_message": "INVALID_ISSUE_DATES",
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-        for issue in issues:
-            # Priority
-            if properties.get("priority", False):
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {"priority": properties.get("priority")}
-                        ),
-                        "current_instance": json.dumps(
-                            {"priority": (issue.priority)}
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-                issue.priority = properties.get("priority")
-
-            # State
-            if properties.get("state_id", False):
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {"state": properties.get("state")}
-                        ),
-                        "current_instance": json.dumps(
-                            {"state": str(issue.state_id)}
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-                issue.state_id = properties.get("state_id")
-
-            # Start date
-            if properties.get("start_date", False):
-                if (
-                    issue.target_date
-                    and not properties.get("target_date", False)
-                    and issue.target_date
-                    <= datetime.strptime(
-                        properties.get("start_date"), "%Y-%m-%d"
-                    ).date()
-                ):
-                    return Response(
-                        {
-                            "error_code": 4101,
-                            "error_message": "INVALID_ISSUE_START_DATE",
-                        },
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {"start_date": properties.get("start_date")}
-                        ),
-                        "current_instance": json.dumps(
-                            {"start_date": str(issue.start_date)}
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-                issue.start_date = properties.get("start_date")
-
-            # Target date
-            if properties.get("target_date", False):
-                if (
-                    issue.start_date
-                    and not properties.get("start_date", False)
-                    and issue.start_date
-                    >= datetime.strptime(
-                        properties.get("target_date"), "%Y-%m-%d"
-                    ).date()
-                ):
-                    return Response(
-                        {
-                            "error_code": 4102,
-                            "error_message": "INVALID_ISSUE_TARGET_DATE",
-                        },
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {"target_date": properties.get("target_date")}
-                        ),
-                        "current_instance": json.dumps(
-                            {"target_date": str(issue.target_date)}
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-                issue.target_date = properties.get("target_date")
-
-            bulk_update_issues.append(issue)
-
-            # Labels
-            if properties.get("label_ids", []):
-                for label_id in properties.get("label_ids", []):
-                    bulk_update_issue_labels.append(
-                        IssueLabel(
-                            issue=issue,
-                            label_id=label_id,
-                            created_by=request.user,
-                            project_id=project_id,
-                            workspace_id=workspace_id,
-                        )
-                    )
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {"label_ids": properties.get("label_ids", [])}
-                        ),
-                        "current_instance": json.dumps(
-                            {
-                                "label_ids": [
-                                    str(label.id)
-                                    for label in issue.labels.all()
-                                ]
-                            }
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-
-            # Assignees
-            if properties.get("assignee_ids", []):
-                for assignee_id in properties.get(
-                    "assignee_ids", issue.assignees
-                ):
-                    bulk_update_issue_assignees.append(
-                        IssueAssignee(
-                            issue=issue,
-                            assignee_id=assignee_id,
-                            created_by=request.user,
-                            project_id=project_id,
-                            workspace_id=workspace_id,
-                        )
-                    )
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {
-                                "assignee_ids": properties.get(
-                                    "assignee_ids", []
-                                )
-                            }
-                        ),
-                        "current_instance": json.dumps(
-                            {
-                                "assignee_ids": [
-                                    str(assignee.id)
-                                    for assignee in issue.assignees.all()
-                                ]
-                            }
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-
-        # Bulk update all the objects
-        Issue.objects.bulk_update(
-            bulk_update_issues,
-            [
-                "priority",
-                "start_date",
-                "target_date",
-                "state",
-            ],
-            batch_size=100,
-        )
-
-        # Create new labels
-        IssueLabel.objects.bulk_create(
-            bulk_update_issue_labels,
-            ignore_conflicts=True,
-            batch_size=100,
-        )
-
-        # Create new assignees
-        IssueAssignee.objects.bulk_create(
-            bulk_update_issue_assignees,
-            ignore_conflicts=True,
-            batch_size=100,
-        )
-        # update the issue activity
-        [
-            issue_activity.delay(**activity)
-            for activity in bulk_issue_activities
-        ]
-
-        return Response(status=status.HTTP_204_NO_CONTENT)

apiserver/plane/app/views/module/archive.py

@@ -575,6 +575,12 @@ class ModuleArchiveUnarchiveEndpoint(BaseAPIView):
             )
         module.archived_at = timezone.now()
         module.save()
+        UserFavorite.objects.filter(
+            entity_type="module",
+            entity_identifier=module_id,
+            project_id=project_id,
+            workspace__slug=slug,
+        ).delete()
         return Response(
             {"archived_at": str(module.archived_at)},
             status=status.HTTP_200_OK,

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

@@ -55,6 +55,7 @@ from plane.utils.analytics_plot import burndown_plot
 from plane.utils.user_timezone_converter import user_timezone_converter
 from plane.bgtasks.webhook_task import model_activity
 from .. import BaseAPIView, BaseViewSet
+from plane.bgtasks.recent_visited_task import recent_visited_task
 
 
 class ModuleViewSet(BaseViewSet):
@@ -670,6 +671,14 @@ class ModuleViewSet(BaseViewSet):
                 module_id=pk,
             )
 
+        recent_visited_task.delay(
+            slug=slug,
+            entity_name="module",
+            entity_identifier=pk,
+            user_id=request.user.id,
+            project_id=project_id,
+        )
+
         return Response(
             data,
             status=status.HTTP_200_OK,

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

@@ -195,7 +195,8 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE"
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
+        level="WORKSPACE",
     )
     def mark_read(self, request, slug, pk):
         notification = Notification.objects.get(
@@ -244,7 +245,6 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
 
 
 class UnreadNotificationEndpoint(BaseAPIView):
-
     @allow_permission(
         allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
         level="WORKSPACE",
@@ -286,7 +286,6 @@ class UnreadNotificationEndpoint(BaseAPIView):
 
 
 class MarkAllReadNotificationViewSet(BaseViewSet):
-
     @allow_permission(
         allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE"
     )
@@ -373,9 +372,6 @@ class UserNotificationPreferenceEndpoint(BaseAPIView):
     serializer_class = UserNotificationPreferenceSerializer
 
     # request the object
-    @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
-    )
     def get(self, request):
         user_notification_preference = UserNotificationPreference.objects.get(
             user=request.user
@@ -386,9 +382,6 @@ class UserNotificationPreferenceEndpoint(BaseAPIView):
         return Response(serializer.data, status=status.HTTP_200_OK)
 
     # update the object
-    @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
-    )
     def patch(self, request):
         user_notification_preference = UserNotificationPreference.objects.get(
             user=request.user

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

@@ -33,12 +33,13 @@ from plane.db.models import (
     ProjectMember,
     ProjectPage,
 )
-
+from plane.utils.error_codes import ERROR_CODES
 # Module imports
 from ..base import BaseAPIView, BaseViewSet
 
 from plane.bgtasks.page_transaction_task import page_transaction
 from plane.bgtasks.page_version_task import page_version
+from plane.bgtasks.recent_visited_task import recent_visited_task
 
 
 def unarchive_archive_page_and_descendants(page_id, archived_at):
@@ -221,6 +222,13 @@ class PageViewSet(BaseViewSet):
             ).values_list("entity_identifier", flat=True)
             data = PageDetailSerializer(page).data
             data["issue_ids"] = issue_ids
+            recent_visited_task.delay(
+                slug=slug,
+                entity_name="page",
+                entity_identifier=pk,
+                user_id=request.user.id,
+                project_id=project_id,
+            )
             return Response(
                 data,
                 status=status.HTTP_200_OK,
@@ -297,6 +305,13 @@ class PageViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        UserFavorite.objects.filter(
+            entity_type="page",
+            entity_identifier=pk,
+            project_id=project_id,
+            workspace__slug=slug,
+        ).delete()
+
         unarchive_archive_page_and_descendants(pk, datetime.now())
 
         return Response(
@@ -471,6 +486,11 @@ class PagesDescriptionViewSet(BaseViewSet):
             .filter(Q(owned_by=self.request.user) | Q(access=0))
             .first()
         )
+        if page is None:
+            return Response(
+                {"error": "Page not found"},
+                status=404,
+            )
         binary_data = page.description_binary
 
         def stream_data():
@@ -505,14 +525,20 @@ class PagesDescriptionViewSet(BaseViewSet):
 
         if page.is_locked:
             return Response(
-                {"error": "Page is locked"},
-                status=471,
+                {
+                    "error_code": ERROR_CODES["PAGE_LOCKED"],
+                    "error_message": "PAGE_LOCKED",
+                },
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
         if page.archived_at:
             return Response(
-                {"error": "Page is archived"},
-                status=472,
+                {
+                    "error_code": ERROR_CODES["PAGE_ARCHIVED"],
+                    "error_message": "PAGE_ARCHIVED",
+                },
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
         # Serialize the existing instance

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/app/views/project/base.py

@@ -52,6 +52,7 @@ from plane.db.models import (
 )
 from plane.utils.cache import cache_response
 from plane.bgtasks.webhook_task import model_activity
+from plane.bgtasks.recent_visited_task import recent_visited_task
 
 
 class ProjectViewSet(BaseViewSet):
@@ -264,6 +265,14 @@ class ProjectViewSet(BaseViewSet):
                 status=status.HTTP_404_NOT_FOUND,
             )
 
+        recent_visited_task.delay(
+            slug=slug,
+            project_id=pk,
+            entity_name="project",
+            entity_identifier=pk,
+            user_id=request.user.id,
+        )
+
         serializer = ProjectListSerializer(project)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
@@ -484,6 +493,10 @@ class ProjectArchiveUnarchiveEndpoint(BaseAPIView):
         project = Project.objects.get(pk=project_id, workspace__slug=slug)
         project.archived_at = timezone.now()
         project.save()
+        UserFavorite.objects.filter(
+            workspace__slug=slug,
+            project=project_id,
+        ).delete()
         return Response(
             {"archived_at": str(project.archived_at)},
             status=status.HTTP_200_OK,

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

@@ -13,12 +13,13 @@ from django.db.models import (
 from django.db.models.functions import Coalesce
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
-from rest_framework import status
 from django.db import transaction
 
 # Third party imports
+from rest_framework import status
 from rest_framework.response import Response
 
+# Module imports
 from plane.app.permissions import (
     allow_permission,
     ROLE,
@@ -46,10 +47,8 @@ from plane.utils.paginator import (
     GroupedOffsetPaginator,
     SubGroupedOffsetPaginator,
 )
-
-# Module imports
+from plane.bgtasks.recent_visited_task import recent_visited_task
 from .. import BaseViewSet
-
 from plane.db.models import (
     UserFavorite,
 )
@@ -134,8 +133,23 @@ class WorkspaceViewViewSet(BaseViewSet):
                 serializer.errors, status=status.HTTP_400_BAD_REQUEST
             )
 
+    def retrieve(self, request, slug, pk):
+        issue_view = self.get_queryset().filter(pk=pk).first()
+        serializer = IssueViewSerializer(issue_view)
+        recent_visited_task.delay(
+            slug=slug,
+            project_id=None,
+            entity_name="view",
+            entity_identifier=pk,
+            user_id=request.user.id,
+        )
+        return Response(
+            serializer.data,
+            status=status.HTTP_200_OK,
+        )
+
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN],
+        allowed_roles=[],
         level="WORKSPACE",
         creator=True,
         model=IssueView,
@@ -145,19 +159,6 @@ class WorkspaceViewViewSet(BaseViewSet):
             pk=pk,
             workspace__slug=slug,
         )
-        if not (
-            WorkspaceMember.objects.filter(
-                workspace__slug=slug,
-                member=request.user,
-                role=20,
-                is_active=True,
-            ).exists()
-            and workspace_view.owned_by_id != request.user.id
-        ):
-            return Response(
-                {"error": "You do not have permission to delete this view"},
-                status=status.HTTP_403_FORBIDDEN,
-            )
 
         workspace_member = WorkspaceMember.objects.filter(
             workspace__slug=slug,
@@ -444,6 +445,27 @@ class IssueViewViewSet(BaseViewSet):
         ).data
         return Response(views, status=status.HTTP_200_OK)
 
+    allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST]
+    )
+
+    def retrieve(self, request, slug, project_id, pk):
+        issue_view = (
+            self.get_queryset().filter(pk=pk, project_id=project_id).first()
+        )
+        serializer = IssueViewSerializer(issue_view)
+        recent_visited_task.delay(
+            slug=slug,
+            project_id=project_id,
+            entity_name="view",
+            entity_identifier=pk,
+            user_id=request.user.id,
+        )
+        return Response(
+            serializer.data,
+            status=status.HTTP_200_OK,
+        )
+
     allow_permission(allowed_roles=[], creator=True, model=IssueView)
 
     def partial_update(self, request, slug, project_id, pk):

apiserver/plane/bgtasks/issue_activities_task.py

@@ -1697,23 +1697,6 @@ def issue_activity(
         )
         # Post the updates to segway for integrations and webhooks
         if len(issue_activities_created):
-            # Don't send activities if the actor is a bot
-            try:
-                if settings.PROXY_BASE_URL:
-                    for issue_activity in issue_activities_created:
-                        headers = {"Content-Type": "application/json"}
-                        issue_activity_json = json.dumps(
-                            IssueActivitySerializer(issue_activity).data,
-                            cls=DjangoJSONEncoder,
-                        )
-                        _ = requests.post(
-                            f"{settings.PROXY_BASE_URL}/hooks/workspaces/{str(issue_activity.workspace_id)}/projects/{str(issue_activity.project_id)}/issues/{str(issue_activity.issue_id)}/issue-activity-hooks/",
-                            json=issue_activity_json,
-                            headers=headers,
-                        )
-            except Exception as e:
-                log_exception(e)
-
             for activity in issue_activities_created:
                 webhook_activity.delay(
                     event=(

apiserver/plane/bgtasks/recent_visited_task.py

@@ -0,0 +1,61 @@
+# Python imports
+from django.utils import timezone
+
+# Third party imports
+from celery import shared_task
+
+# Module imports
+from plane.db.models import UserRecentVisit, Workspace
+from plane.utils.exception_logger import log_exception
+
+
+@shared_task
+def recent_visited_task(
+    entity_name, entity_identifier, user_id, project_id, slug
+):
+    try:
+        workspace = Workspace.objects.get(slug=slug)
+        recent_visited = UserRecentVisit.objects.filter(
+            entity_name=entity_name,
+            entity_identifier=entity_identifier,
+            user_id=user_id,
+            project_id=project_id,
+            workspace_id=workspace.id,
+        ).first()
+
+        if recent_visited:
+            recent_visited.visited_at = timezone.now()
+            recent_visited.save(update_fields=["visited_at"])
+        else:
+
+            recent_visited_count = UserRecentVisit.objects.filter(
+                user_id=user_id, workspace_id=workspace.id
+            ).count()
+            if recent_visited_count == 20:
+                recent_visited = (
+                    UserRecentVisit.objects.filter(
+                        user_id=user_id, workspace_id=workspace.id
+                    )
+                    .order_by("created_at")
+                    .first()
+                )
+                recent_visited.delete()
+
+            recent_activity = UserRecentVisit.objects.create(
+                entity_name=entity_name,
+                entity_identifier=entity_identifier,
+                user_id=user_id,
+                visited_at=timezone.now(),
+                project_id=project_id,
+                workspace_id=workspace.id,
+            )
+            recent_activity.created_by_id = user_id
+            recent_activity.updated_by_id = user_id
+            recent_activity.save(
+                update_fields=["created_by_id", "updated_by_id"]
+            )
+
+        return
+    except Exception as e:
+        log_exception(e)
+        return

apiserver/plane/db/models/__init__.py

@@ -111,4 +111,4 @@ from .favorite import UserFavorite
 
 from .issue_type import IssueType
 
-from .recent_visit import UserRecentVisit
+from .recent_visit import UserRecentVisit

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/settings/common.py

@@ -299,9 +299,6 @@ if bool(os.environ.get("SENTRY_DSN", False)) and os.environ.get(
     )
 
 
-# Application Envs
-PROXY_BASE_URL = os.environ.get("PROXY_BASE_URL", False)  # For External
-
 FILE_SIZE_LIMIT = int(os.environ.get("FILE_SIZE_LIMIT", 5242880))
 
 # Unsplash Access key

apiserver/plane/utils/error_codes.py

@@ -0,0 +1,10 @@
+ERROR_CODES = {
+    # issues
+    "INVALID_ARCHIVE_STATE_GROUP": 4091,
+    "INVALID_ISSUE_DATES": 4100,
+    "INVALID_ISSUE_START_DATE": 4101,
+    "INVALID_ISSUE_TARGET_DATE": 4102,
+    # pages
+    "PAGE_LOCKED": 4701,
+    "PAGE_ARCHIVED": 4702,
+}

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
-

package.json

@@ -12,7 +12,6 @@
     "packages/tailwind-config-custom",
     "packages/tsconfig",
     "packages/ui",
-    "packages/ui-v2",
     "packages/types",
     "packages/constants"
   ],

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/components/menus/ai-menu.tsx

@@ -87,6 +87,7 @@ export const AIFeaturesMenu: React.FC<Props> = (props) => {
     >
       <div ref={menuRef} className="z-10">
         {menu?.({
+          isOpen: isPopupVisible,
           onClose: hidePopup,
         })}
       </div>

packages/editor/src/core/components/menus/index.ts

@@ -1,4 +1,4 @@
-export * from "./bubble-menu";
 export * from "./ai-menu";
+export * from "./bubble-menu";
 export * from "./block-menu";
 export * from "./menu-items";

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/extensions/side-menu.tsx

@@ -182,7 +182,7 @@ const SideMenu = (options: SideMenuPluginProps) => {
             aiHandleDOMEvents?.mousemove?.();
           }
         },
-        keydown: () => hideSideMenu(),
+        // keydown: () => hideSideMenu(),
         mousewheel: () => hideSideMenu(),
         dragenter: (view) => {
           if (handlesConfig.dragDrop) {

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/ai.ts

@@ -1,7 +1,8 @@
-type TMenuProps = {
+export type TAIMenuProps = {
+  isOpen: boolean;
   onClose: () => void;
 };
 
 export type TAIHandler = {
-  menu?: (props: TMenuProps) => React.ReactNode;
+  menu?: (props: TAIMenuProps) => React.ReactNode;
 };

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/editor/src/styles/editor.css

@@ -79,6 +79,7 @@
   -moz-appearance: textfield;
 }
 
+/* Placeholder only for the first line in an empty editor. */
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -87,6 +88,15 @@
   height: 0;
 }
 
+/* Display Placeholders on every new line. */
+.ProseMirror p.is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
 .ProseMirror li blockquote {
   margin-top: 10px;
   padding-inline-start: 1em;
@@ -110,14 +120,6 @@
   display: none;
 }
 
-.ProseMirror .is-empty::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: rgb(var(--color-text-400));
-  pointer-events: none;
-  height: 0;
-}
-
 /* Custom image styles */
 .ProseMirror img {
   transition: filter 0.1s ease-in-out;

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-v2/.eslintrc.js

@@ -1,9 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  root: true,
-  extends: ["@plane/ui-v2/react-internal.js"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
-  },
-};

packages/ui-v2/README.md

@@ -1 +0,0 @@
-# UI Package

packages/ui-v2/helpers.ts

@@ -1,4 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

packages/ui-v2/package.json

@@ -1,37 +0,0 @@
-{
-  "name": "@plane/ui-v2",
-  "version": "0.0.0",
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
-  "files": [
-    "dist/**"
-  ],
-  "exports": {
-    ".": "./dist/index.mjs"
-  },
-  "scripts": {
-    "build": "tsup --minify",
-    "dev": "tsup --watch",
-    "check-types": "tsc --noEmit",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\""
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "eslint": "^8.56.0",
-    "react": "^18.2.0",
-    "tsup": "^7.2.0",
-    "typescript": "^5.3.3"
-  },
-  "dependencies": {
-    "tailwind-config-custom": "*",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "lucide-react": "^0.407.0",
-    "react-hook-form": "^7.52.1",
-    "tailwind-merge": "^2.4.0",
-    "tailwindcss-animate": "^1.0.7"
-  }
-}

packages/ui-v2/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

packages/ui-v2/react-internal.js

@@ -1,43 +0,0 @@
-const { resolve } = require("node:path");
-
-const project = resolve(process.cwd(), "tsconfig.json");
-
-/*
- * This is a custom ESLint configuration for use with
- * internal (bundled by their consumer) libraries
- * that utilize React.
- *
- * This config extends the Vercel Engineering Style Guide.
- * For more information, see https://github.com/vercel/style-guide
- *
- */
-
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
-  plugins: ["only-warn"],
-  globals: {
-    React: true,
-    JSX: true,
-  },
-  env: {
-    browser: true,
-  },
-  settings: {
-    "import/resolver": {
-      typescript: {
-        project,
-      },
-    },
-  },
-  ignorePatterns: [
-    // Ignore dotfiles
-    ".*.js",
-    "node_modules/",
-    "dist/",
-  ],
-  overrides: [
-    // Force ESLint to detect .tsx files
-    { files: ["*.js?(x)", "*.ts?(x)"] },
-  ],
-};

packages/ui-v2/src/components/index.ts

@@ -1 +0,0 @@
-export * from "./ui";

packages/ui-v2/src/components/ui/button/button.tsx

@@ -1,10 +0,0 @@
-import React, { FC, ReactNode } from "react";
-
-type ButtonProps = {
-  children: ReactNode;
-};
-
-export const Button: FC<ButtonProps> = (props) => {
-  const { children } = props;
-  return <button className="bg-brand-200">{children}</button>;
-};

packages/ui-v2/src/components/ui/button/index.ts

@@ -1 +0,0 @@
-export * from "./button";

packages/ui-v2/src/components/ui/index.ts

@@ -1 +0,0 @@
-export * from "./button";

packages/ui-v2/src/index.ts

@@ -1,4 +0,0 @@
-import "./styles/globals.css";
-
-// components
-export * from "./components";

packages/ui-v2/src/styles/fonts/main.css

@@ -1,79 +0,0 @@
-/* inter-200 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 200;
-  src: url("jira/fonts/Inter/inter-v13-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-300 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 300;
-  src: url("jira/fonts/Inter/inter-v13-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-regular - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 405;
-  src: url("jira/fonts/Inter/inter-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-500 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 500;
-  src: url("jira/fonts/Inter/inter-v13-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-700 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 700;
-  src: url("jira/fonts/Inter/inter-v13-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* inter-800 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 800;
-  src: url("jira/fonts/Inter/inter-v13-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* material-symbols-rounded-regular - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "Material Symbols Rounded";
-  font-style: normal;
-  font-weight: 400;
-  src: url("jira/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-.material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-}

packages/ui-v2/src/styles/globals.css

@@ -1,204 +0,0 @@
-@import url("fonts/main.css");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  font-variant-ligatures: none;
-  -webkit-font-variant-ligatures: none;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-@layer base {
-  html {
-    font-family: "Inter", sans-serif;
-  }
-
-  :root {
-    color-scheme: light !important;
-
-    /* Neutral */
-    --color-neutral-white: 0, 0%, 100%;
-    --color-neutral-50: 222, 20%, 96%;
-    --color-neutral-100: 222, 20%, 94%;
-    --color-neutral-200: 222, 20%, 86%;
-    --color-neutral-300: 222, 20%, 70%;
-    --color-neutral-400: 222, 20%, 60%;
-    --color-neutral-500: 222, 20%, 50%;
-    --color-neutral-600: 222, 20%, 40%;
-    --color-neutral-700: 222, 20%, 30%;
-    --color-neutral-800: 222, 20%, 20%;
-    --color-neutral-900: 222, 20%, 10%;
-    --color-neutral-950: 222, 20%, 8%;
-    --color-neutral-black: 222, 20%, 6%;
-
-    /* Brand */
-    --color-brand-50: 222, 100%, 96%;
-    --color-brand-100: 222, 100%, 94%;
-    --color-brand-200: 222, 100%, 86%;
-    --color-brand-300: 222, 100%, 70%;
-    --color-brand-400: 222, 100%, 60%;
-    --color-brand-500: 222, 100%, 50%;
-    --color-brand-600: 222, 100%, 40%;
-    --color-brand-700: 222, 100%, 30%;
-    --color-brand-800: 222, 100%, 20%;
-    --color-brand-900: 222, 100%, 10%;
-    --color-brand-950: 222, 100%, 5%;
-
-    /* Success */
-    --color-success-50: 134, 70%, 95%;
-    --color-success-100: 134, 70%, 90%;
-    --color-success-200: 134, 70%, 80%;
-    --color-success-300: 134, 70%, 70%;
-    --color-success-400: 134, 70%, 60%;
-    --color-success-500: 134, 70%, 50%;
-    --color-success-600: 134, 70%, 40%;
-    --color-success-700: 134, 70%, 30%;
-    --color-success-800: 134, 70%, 20%;
-    --color-success-900: 134, 70%, 10%;
-    --color-success-950: 134, 70%, 5%;
-
-    /* Warning */
-    --color-warning-50: 35, 100%, 95%;
-    --color-warning-100: 35, 100%, 90%;
-    --color-warning-200: 35, 100%, 80%;
-    --color-warning-300: 35, 100%, 70%;
-    --color-warning-400: 35, 100%, 60%;
-    --color-warning-500: 35, 100%, 50%;
-    --color-warning-600: 35, 100%, 40%;
-    --color-warning-700: 35, 100%, 35%;
-    --color-warning-800: 35, 100%, 30%;
-    --color-warning-900: 35, 100%, 25%;
-    --color-warning-950: 35, 100%, 15%;
-
-    /* Error */
-    --color-error-50: 0, 100%, 95%;
-    --color-error-100: 0, 100%, 90%;
-    --color-error-200: 0, 100%, 80%;
-    --color-error-300: 0, 100%, 70%;
-    --color-error-400: 0, 100%, 60%;
-    --color-error-500: 0, 100%, 50%;
-    --color-error-600: 0, 100%, 40%;
-    --color-error-700: 0, 100%, 30%;
-    --color-error-800: 0, 100%, 20%;
-    --color-error-900: 0, 100%, 10%;
-    --color-error-950: 0, 100%, 5%;
-
-    /* Information */
-    --color-information-50: 193, 100%, 95%;
-    --color-information-100: 193, 100%, 90%;
-    --color-information-200: 193, 100%, 80%;
-    --color-information-300: 193, 100%, 70%;
-    --color-information-400: 193, 100%, 60%;
-    --color-information-500: 193, 100%, 50%;
-    --color-information-600: 193, 100%, 40%;
-    --color-information-700: 193, 100%, 30%;
-    --color-information-800: 193, 100%, 20%;
-    --color-information-900: 193, 100%, 10%;
-    --color-information-950: 193, 100%, 5%;
-
-    /* on-color */
-    --on-color-light: 0, 0%, 100%;
-    --on-color-dark: 222, 20%, 6%;
-  }
-
-  /* [data-theme="light-contrast"] {
-  } */
-
-  [data-theme="dark"] {
-    /* Neutral */
-    --color-neutral-white: 222, 20%, 6%;
-    --color-neutral-50: 222, 20%, 8%;
-    --color-neutral-100: 222, 20%, 12%;
-    --color-neutral-200: 222, 20%, 16%;
-    --color-neutral-300: 222, 20%, 30%;
-    --color-neutral-400: 222, 20%, 40%;
-    --color-neutral-500: 222, 20%, 50%;
-    --color-neutral-600: 222, 20%, 60%;
-    --color-neutral-700: 222, 20%, 68%;
-    --color-neutral-800: 222, 20%, 82%;
-    --color-neutral-900: 222, 20%, 90%;
-    --color-neutral-950: 222, 20%, 95%;
-    --color-neutral-black: 222, 20%, 99%;
-
-    /* Brand */
-    --color-brand-50: 222, 100%, 8%;
-    --color-brand-100: 222, 100%, 15%;
-    --color-brand-200: 222, 100%, 20%;
-    --color-brand-300: 222, 100%, 20%;
-    --color-brand-400: 222, 100%, 40%;
-    --color-brand-500: 222, 100%, 50%;
-    --color-brand-600: 222, 100%, 60%;
-    --color-brand-700: 222, 100%, 70%;
-    --color-brand-800: 222, 100%, 80%;
-    --color-brand-900: 222, 100%, 90%;
-    --color-brand-950: 222, 100%, 95%;
-
-    /* Success */
-    --color-success-50: 134, 70%, 5%;
-    --color-success-100: 134, 70%, 10%;
-    --color-success-200: 134, 70%, 20%;
-    --color-success-300: 134, 70%, 30%;
-    --color-success-400: 134, 70%, 40%;
-    --color-success-500: 134, 70%, 50%;
-    --color-success-600: 134, 70%, 60%;
-    --color-success-700: 134, 70%, 70%;
-    --color-success-800: 134, 70%, 80%;
-    --color-success-900: 134, 70%, 90%;
-    --color-success-950: 134, 70%, 95%;
-
-    /* Warning */
-    --color-warning-50: 50, 100%, 5%;
-    --color-warning-100: 39, 100%, 10%;
-    --color-warning-200: 50, 100%, 20%;
-    --color-warning-300: 50, 100%, 30%;
-    --color-warning-400: 50, 100%, 40%;
-    --color-warning-500: 50, 100%, 50%;
-    --color-warning-600: 50, 100%, 60%;
-    --color-warning-700: 50, 100%, 70%;
-    --color-warning-800: 50, 100%, 80%;
-    --color-warning-900: 50, 100%, 90%;
-    --color-warning-950: 50, 100%, 95%;
-
-    /* Error */
-    --color-error-50: 0, 100%, 5%;
-    --color-error-100: 0, 100%, 10%;
-    --color-error-200: 0, 100%, 20%;
-    --color-error-300: 0, 100%, 30%;
-    --color-error-400: 0, 100%, 40%;
-    --color-error-500: 0, 100%, 50%;
-    --color-error-600: 0, 100%, 60%;
-    --color-error-700: 0, 100%, 70%;
-    --color-error-800: 0, 100%, 80%;
-    --color-error-900: 0, 100%, 90%;
-    --color-error-950: 0, 100%, 95%;
-
-    /* Information */
-    --color-information-50: 193, 100%, 5%;
-    --color-information-100: 193, 100%, 10%;
-    --color-information-200: 193, 100%, 20%;
-    --color-information-300: 193, 100%, 30%;
-    --color-information-400: 193, 100%, 40%;
-    --color-information-500: 193, 100%, 50%;
-    --color-information-600: 193, 100%, 60%;
-    --color-information-700: 193, 100%, 70%;
-    --color-information-800: 193, 100%, 80%;
-    --color-information-900: 193, 100%, 90%;
-    --color-information-950: 193, 100%, 95%;
-
-    /* on-color */
-    --on-color-light: 0, 0%, 100%;
-    --on-color-dark: 222, 20%, 6%;
-  }
-
-  /* [data-theme="dark-contrast"] {
-  } */
-}

packages/ui-v2/tailwind.config.js

@@ -1,106 +0,0 @@
-const convertToHSL = (variableName) => `hsl(var(${variableName}))`;
-
-/** @type {import('tailwindcss').Config} */
-const config = {
-  content: [
-    "./**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  darkMode: "class",
-  prefix: "",
-  theme: {
-    extend: {
-      colors: {
-        neutral: {
-          50: convertToHSL("--color-neutral-50"),
-          100: convertToHSL("--color-neutral-100"),
-          200: convertToHSL("--color-neutral-200"),
-          300: convertToHSL("--color-neutral-300"),
-          400: convertToHSL("--color-neutral-400"),
-          500: convertToHSL("--color-neutral-500"),
-          600: convertToHSL("--color-neutral-600"),
-          700: convertToHSL("--color-neutral-700"),
-          800: convertToHSL("--color-neutral-800"),
-          900: convertToHSL("--color-neutral-900"),
-          950: convertToHSL("--color-neutral-950"),
-        },
-        brand: {
-          50: convertToHSL("--color-brand-50"),
-          100: convertToHSL("--color-brand-100"),
-          200: convertToHSL("--color-brand-200"),
-          300: convertToHSL("--color-brand-300"),
-          400: convertToHSL("--color-brand-400"),
-          500: convertToHSL("--color-brand-500"),
-          600: convertToHSL("--color-brand-600"),
-          700: convertToHSL("--color-brand-700"),
-          800: convertToHSL("--color-brand-800"),
-          900: convertToHSL("--color-brand-900"),
-          950: convertToHSL("--color-brand-950"),
-        },
-        success: {
-          50: convertToHSL("--color-success-50"),
-          100: convertToHSL("--color-success-100"),
-          200: convertToHSL("--color-success-200"),
-          300: convertToHSL("--color-success-300"),
-          400: convertToHSL("--color-success-400"),
-          500: convertToHSL("--color-success-500"),
-          600: convertToHSL("--color-success-600"),
-          700: convertToHSL("--color-success-700"),
-          800: convertToHSL("--color-success-800"),
-          900: convertToHSL("--color-success-900"),
-          950: convertToHSL("--color-success-950"),
-        },
-        warning: {
-          50: convertToHSL("--color-warning-50"),
-          100: convertToHSL("--color-warning-100"),
-          200: convertToHSL("--color-warning-200"),
-          300: convertToHSL("--color-warning-300"),
-          400: convertToHSL("--color-warning-400"),
-          500: convertToHSL("--color-warning-500"),
-          600: convertToHSL("--color-warning-600"),
-          700: convertToHSL("--color-warning-700"),
-          800: convertToHSL("--color-warning-800"),
-          900: convertToHSL("--color-warning-900"),
-          950: convertToHSL("--color-warning-950"),
-        },
-        error: {
-          50: convertToHSL("--color-error-50"),
-          100: convertToHSL("--color-error-100"),
-          200: convertToHSL("--color-error-200"),
-          300: convertToHSL("--color-error-300"),
-          400: convertToHSL("--color-error-400"),
-          500: convertToHSL("--color-error-500"),
-          600: convertToHSL("--color-error-600"),
-          700: convertToHSL("--color-error-700"),
-          800: convertToHSL("--color-error-800"),
-          900: convertToHSL("--color-error-900"),
-          950: convertToHSL("--color-error-950"),
-        },
-        information: {
-          50: convertToHSL("--color-information-50"),
-          100: convertToHSL("--color-information-100"),
-          200: convertToHSL("--color-information-200"),
-          300: convertToHSL("--color-information-300"),
-          400: convertToHSL("--color-information-400"),
-          500: convertToHSL("--color-information-500"),
-          600: convertToHSL("--color-information-600"),
-          700: convertToHSL("--color-information-700"),
-          800: convertToHSL("--color-information-800"),
-          900: convertToHSL("--color-information-900"),
-          950: convertToHSL("--color-information-950"),
-        },
-        oncolor: {
-          light: convertToHSL("--on-color-light"),
-          dark: convertToHSL("--on-color-dark"),
-        },
-      },
-    },
-    fontFamily: {
-      custom: ["Inter", "sans-serif"],
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-};
-
-export default config;

packages/ui-v2/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "display": "React Library",
-  "compilerOptions": {
-    "composite": false,
-    "declaration": true,
-    "declarationMap": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "inlineSources": false,
-    "isolatedModules": true,
-    "moduleResolution": "node",
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "preserveWatchOutput": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "baseUrl": ".",
-    "lib": ["ES2015", "es2016", "dom"],
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "target": "ES6",
-    "jsx": "react-jsx"
-  },
-  "exclude": ["dist", "build", "node_modules"],
-  "include": ["."]
-}

packages/ui-v2/tsup.config.ts

@@ -1,11 +0,0 @@
-import { defineConfig, Options } from "tsup";
-
-export default defineConfig((options: Options) => ({
-  entry: ["src/index.ts"],
-  format: ["cjs", "esm"],
-  dts: true,
-  clean: false,
-  external: ["react"],
-  injectStyle: true,
-  ...options,
-}));

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]/inbox/header.tsx

@@ -9,8 +9,10 @@ import { Breadcrumbs, Button, Intake } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { InboxIssueCreateEditModalRoot } from "@/components/inbox";
+// constants
+import { EUserProjectRoles } from "@/constants/project";
 // hooks
-import { useProject, useProjectInbox } from "@/hooks/store";
+import { useProject, useProjectInbox, useUser } from "@/hooks/store";
 
 export const ProjectInboxHeader: FC = observer(() => {
   // states
@@ -18,9 +20,15 @@ export const ProjectInboxHeader: FC = observer(() => {
   // router
   const { workspaceSlug, projectId } = useParams();
   // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
   const { currentProjectDetails, loader: currentProjectDetailsLoader } = useProject();
   const { loader } = useProjectInbox();
 
+  // derived value
+  const isViewer = currentProjectRole === EUserProjectRoles.VIEWER;
+
   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">
@@ -58,7 +66,7 @@ export const ProjectInboxHeader: FC = observer(() => {
         </div>
       </div>
 
-      {currentProjectDetails?.inbox_view && workspaceSlug && projectId && (
+      {currentProjectDetails?.inbox_view && workspaceSlug && projectId && !isViewer && (
         <div className="flex items-center gap-2">
           <InboxIssueCreateEditModalRoot
             workspaceSlug={workspaceSlug.toString()}

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/issues/issue-modal/additional-properties.tsx

@@ -0,0 +1,8 @@
+type TIssueAdditionalPropertiesProps = {
+  issueId: string | undefined;
+  issueTypeId: string | null;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const IssueAdditionalProperties: React.FC<TIssueAdditionalPropertiesProps> = () => <></>;

web/ce/components/issues/issue-modal/form.tsx

@@ -1,852 +0,0 @@
-"use client";
-
-import React, { FC, useState, useRef, useEffect } from "react";
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-import { Controller, useForm } from "react-hook-form";
-import { LayoutPanelTop, Sparkle, X } from "lucide-react";
-// editor
-import { EditorRefApi } from "@plane/editor";
-// types
-import type { TIssue, ISearchIssueResponse } from "@plane/types";
-// hooks
-import { Button, CustomMenu, Input, Loader, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { GptAssistantPopover } from "@/components/core";
-import {
-  CycleDropdown,
-  DateDropdown,
-  EstimateDropdown,
-  ModuleDropdown,
-  PriorityDropdown,
-  ProjectDropdown,
-  MemberDropdown,
-  StateDropdown,
-} from "@/components/dropdowns";
-import { RichTextEditor } from "@/components/editor/rich-text-editor/rich-text-editor";
-import { ParentIssuesListModal } from "@/components/issues";
-import { IssueLabelSelect } from "@/components/issues/select";
-import { CreateLabelModal } from "@/components/labels";
-// helpers
-import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
-import { getChangedIssuefields, getDescriptionPlaceholder } from "@/helpers/issue.helper";
-import { shouldRenderProject } from "@/helpers/project.helper";
-// hooks
-import { useProjectEstimates, useInstance, useIssueDetail, useProject, useWorkspace, useUser } from "@/hooks/store";
-import useKeypress from "@/hooks/use-keypress";
-import { useProjectIssueProperties } from "@/hooks/use-project-issue-properties";
-// services
-import { AIService } from "@/services/ai.service";
-
-const defaultValues: Partial<TIssue> = {
-  project_id: "",
-  name: "",
-  description_html: "",
-  estimate_point: null,
-  state_id: "",
-  parent_id: null,
-  priority: "none",
-  assignee_ids: [],
-  label_ids: [],
-  cycle_id: null,
-  module_ids: null,
-  start_date: null,
-  target_date: null,
-};
-
-export interface IssueFormProps {
-  data?: Partial<TIssue>;
-  issueTitleRef: React.MutableRefObject<HTMLInputElement | null>;
-  isCreateMoreToggleEnabled: boolean;
-  onCreateMoreToggleChange: (value: boolean) => void;
-  onChange?: (formData: Partial<TIssue> | null) => void;
-  onClose: () => void;
-  onSubmit: (values: Partial<TIssue>, is_draft_issue?: boolean) => Promise<void>;
-  projectId: string;
-  isDraft: boolean;
-}
-
-// services
-const aiService = new AIService();
-
-const TAB_INDICES = [
-  "name",
-  "description_html",
-  "feeling_lucky",
-  "ai_assistant",
-  "state_id",
-  "priority",
-  "assignee_ids",
-  "label_ids",
-  "start_date",
-  "target_date",
-  "cycle_id",
-  "module_ids",
-  "estimate_point",
-  "parent_id",
-  "create_more",
-  "discard_button",
-  "draft_button",
-  "submit_button",
-  "project_id",
-  "remove_parent",
-];
-
-const getTabIndex = (key: string) => TAB_INDICES.findIndex((tabIndex) => tabIndex === key) + 1;
-
-export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
-  const {
-    data,
-    issueTitleRef,
-    onChange,
-    onClose,
-    onSubmit,
-    projectId: defaultProjectId,
-    isCreateMoreToggleEnabled,
-    onCreateMoreToggleChange,
-    isDraft,
-  } = props;
-  // states
-  const [labelModal, setLabelModal] = useState(false);
-  const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
-  const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
-  const [gptAssistantModal, setGptAssistantModal] = useState(false);
-  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
-  // refs
-  const editorRef = useRef<EditorRefApi>(null);
-  const submitBtnRef = useRef<HTMLButtonElement | null>(null);
-  // router
-  const { workspaceSlug, projectId: routeProjectId } = useParams();
-  // store hooks
-  const workspaceStore = useWorkspace();
-  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString())?.id as string;
-  const { config } = useInstance();
-  const { projectsWithCreatePermissions } = useUser();
-
-  const { getProjectById } = useProject();
-  const { areEstimateEnabledByProjectId } = useProjectEstimates();
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (editorRef.current?.isEditorReadyToDiscard()) {
-      onClose();
-    } else {
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Editor is still processing changes. Please wait before proceeding.",
-      });
-      event.preventDefault(); // Prevent default action if editor is not ready to discard
-    }
-  };
-
-  useKeypress("Escape", handleKeyDown);
-
-  const {
-    issue: { getIssueById },
-  } = useIssueDetail();
-  const { fetchCycles } = useProjectIssueProperties();
-  // form info
-  const {
-    formState: { errors, isDirty, isSubmitting, dirtyFields },
-    handleSubmit,
-    reset,
-    watch,
-    control,
-    getValues,
-    setValue,
-  } = useForm<TIssue>({
-    defaultValues: { ...defaultValues, project_id: defaultProjectId, ...data },
-    reValidateMode: "onChange",
-  });
-
-  const projectId = watch("project_id");
-
-  //reset few fields on projectId change
-  useEffect(() => {
-    if (isDirty) {
-      const formData = getValues();
-
-      reset({
-        ...defaultValues,
-        project_id: projectId,
-        name: formData.name,
-        description_html: formData.description_html,
-        priority: formData.priority,
-        start_date: formData.start_date,
-        target_date: formData.target_date,
-        parent_id: formData.parent_id,
-      });
-    }
-    if (projectId && routeProjectId !== projectId) fetchCycles(workspaceSlug?.toString(), projectId);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [projectId]);
-
-  useEffect(() => {
-    if (data?.description_html) setValue("description_html", data?.description_html);
-  }, [data?.description_html]);
-
-  const issueName = watch("name");
-
-  const handleFormSubmit = async (formData: Partial<TIssue>, is_draft_issue = false) => {
-    // Check if the editor is ready to discard
-    if (!editorRef.current?.isEditorReadyToDiscard()) {
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Editor is not ready to discard changes.",
-      });
-      return;
-    }
-
-    const submitData = !data?.id
-      ? formData
-      : {
-          ...getChangedIssuefields(formData, dirtyFields as { [key: string]: boolean | undefined }),
-          project_id: getValues("project_id"),
-          id: data.id,
-          description_html: formData.description_html ?? "<p></p>",
-        };
-
-    // this condition helps to move the issues from draft to project issues
-    if (formData.hasOwnProperty("is_draft")) submitData.is_draft = formData.is_draft;
-
-    await onSubmit(submitData, is_draft_issue);
-
-    setGptAssistantModal(false);
-
-    reset({
-      ...defaultValues,
-      ...(isCreateMoreToggleEnabled ? { ...data } : {}),
-      project_id: getValues("project_id"),
-      description_html: data?.description_html ?? "<p></p>",
-    });
-    editorRef?.current?.clearEditor();
-  };
-
-  const handleAiAssistance = async (response: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    editorRef.current?.setEditorValueAtCursorPosition(response);
-  };
-
-  const handleAutoGenerateDescription = async () => {
-    if (!workspaceSlug || !projectId) return;
-
-    setIAmFeelingLucky(true);
-
-    aiService
-      .createGptTask(workspaceSlug.toString(), {
-        prompt: issueName,
-        task: "Generate a proper description for this issue.",
-      })
-      .then((res) => {
-        if (res.response === "")
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message:
-              "Issue title isn't informative enough to generate the description. Please try with a different title.",
-          });
-        else handleAiAssistance(res.response_html);
-      })
-      .catch((err) => {
-        const error = err?.data?.error;
-
-        if (err.status === 429)
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
-          });
-        else
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: error || "Some error occurred. Please try again.",
-          });
-      })
-      .finally(() => setIAmFeelingLucky(false));
-  };
-
-  const condition =
-    (watch("name") && watch("name") !== "") || (watch("description_html") && watch("description_html") !== "<p></p>");
-
-  const handleFormChange = () => {
-    if (!onChange) return;
-
-    if (isDirty && condition) onChange(watch());
-    else onChange(null);
-  };
-
-  const startDate = watch("start_date");
-  const targetDate = watch("target_date");
-
-  const minDate = getDate(startDate);
-  minDate?.setDate(minDate.getDate());
-
-  const maxDate = getDate(targetDate);
-  maxDate?.setDate(maxDate.getDate());
-
-  const projectDetails = getProjectById(projectId);
-
-  // executing this useEffect when the parent_id coming from the component prop
-  useEffect(() => {
-    const parentId = watch("parent_id") || undefined;
-    if (!parentId) return;
-    if (parentId === selectedParentIssue?.id || selectedParentIssue) return;
-
-    const issue = getIssueById(parentId);
-    if (!issue) return;
-
-    const projectDetails = getProjectById(issue.project_id);
-    if (!projectDetails) return;
-
-    setSelectedParentIssue({
-      id: issue.id,
-      name: issue.name,
-      project_id: issue.project_id,
-      project__identifier: projectDetails.identifier,
-      project__name: projectDetails.name,
-      sequence_id: issue.sequence_id,
-    } as ISearchIssueResponse);
-  }, [watch, getIssueById, getProjectById, selectedParentIssue]);
-
-  // executing this useEffect when isDirty changes
-  useEffect(() => {
-    if (!onChange) return;
-
-    if (isDirty && condition) onChange(watch());
-    else onChange(null);
-  }, [isDirty]);
-
-  return (
-    <>
-      {projectId && (
-        <CreateLabelModal
-          isOpen={labelModal}
-          handleClose={() => setLabelModal(false)}
-          projectId={projectId}
-          onSuccess={(response) => {
-            setValue("label_ids", [...watch("label_ids"), response.id]);
-            handleFormChange();
-          }}
-        />
-      )}
-      <form onSubmit={handleSubmit((data) => handleFormSubmit(data))}>
-        <div className="space-y-5 p-5">
-          <div className="flex items-center gap-x-3">
-            {/* Don't show project selection if editing an issue */}
-            {!data?.id && (
-              <Controller
-                control={control}
-                name="project_id"
-                rules={{
-                  required: true,
-                }}
-                render={({ field: { value, onChange } }) =>
-                  projectsWithCreatePermissions && projectsWithCreatePermissions[value!] ? (
-                    <div className="h-7">
-                      <ProjectDropdown
-                        value={value}
-                        onChange={(projectId) => {
-                          onChange(projectId);
-                          handleFormChange();
-                        }}
-                        buttonVariant="border-with-text"
-                        renderCondition={(project) => shouldRenderProject(project)}
-                        tabIndex={getTabIndex("project_id")}
-                      />
-                    </div>
-                  ) : (
-                    <></>
-                  )
-                }
-              />
-            )}
-            <h3 className="text-xl font-medium text-custom-text-200">{data?.id ? "Update" : "Create"} issue</h3>
-          </div>
-          {watch("parent_id") && selectedParentIssue && (
-            <Controller
-              control={control}
-              name="parent_id"
-              render={({ field: { onChange } }) => (
-                <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-90 p-2 text-xs">
-                  <div className="flex items-center gap-2">
-                    <span
-                      className="block h-1.5 w-1.5 rounded-full"
-                      style={{
-                        backgroundColor: selectedParentIssue.state__color,
-                      }}
-                    />
-                    <span className="flex-shrink-0 text-custom-text-200">
-                      {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
-                    </span>
-                    <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
-                    <button
-                      type="button"
-                      className="grid place-items-center"
-                      onClick={() => {
-                        onChange(null);
-                        handleFormChange();
-                        setSelectedParentIssue(null);
-                      }}
-                      tabIndex={getTabIndex("remove_parent")}
-                    >
-                      <X className="h-3 w-3 cursor-pointer" />
-                    </button>
-                  </div>
-                </div>
-              )}
-            />
-          )}
-          <div className="space-y-3">
-            <div className="space-y-1">
-              <Controller
-                control={control}
-                name="name"
-                rules={{
-                  required: "Title is required",
-                  maxLength: {
-                    value: 255,
-                    message: "Title should be less than 255 characters",
-                  },
-                }}
-                render={({ field: { value, onChange, ref } }) => (
-                  <Input
-                    id="name"
-                    name="name"
-                    type="text"
-                    value={value}
-                    onChange={(e) => {
-                      onChange(e.target.value);
-                      handleFormChange();
-                    }}
-                    ref={issueTitleRef || ref}
-                    hasError={Boolean(errors.name)}
-                    placeholder="Title"
-                    className="w-full text-base"
-                    tabIndex={getTabIndex("name")}
-                    autoFocus
-                  />
-                )}
-              />
-              <span className="text-xs text-red-500">{errors?.name?.message}</span>
-            </div>
-            <div className="border-[0.5px] border-custom-border-200 rounded-lg relative">
-              {data?.description_html === undefined || !projectId ? (
-                <Loader className="min-h-[150px] max-h-64 space-y-2 overflow-hidden rounded-md border border-custom-border-200 p-3 py-2 pt-3">
-                  <Loader.Item width="100%" height="26px" />
-                  <div className="flex items-center gap-2">
-                    <Loader.Item width="26px" height="26px" />
-                    <Loader.Item width="400px" height="26px" />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Loader.Item width="26px" height="26px" />
-                    <Loader.Item width="400px" height="26px" />
-                  </div>
-                  <Loader.Item width="80%" height="26px" />
-                  <div className="flex items-center gap-2">
-                    <Loader.Item width="50%" height="26px" />
-                  </div>
-                  <div className="border-0.5 absolute bottom-2 right-3.5 z-10 flex items-center gap-2">
-                    <Loader.Item width="100px" height="26px" />
-                    <Loader.Item width="50px" height="26px" />
-                  </div>
-                </Loader>
-              ) : (
-                <>
-                  <Controller
-                    name="description_html"
-                    control={control}
-                    render={({ field: { value, onChange } }) => (
-                      <RichTextEditor
-                        id="issue-modal-editor"
-                        initialValue={value ?? ""}
-                        value={data.description_html}
-                        workspaceSlug={workspaceSlug?.toString() as string}
-                        workspaceId={workspaceId}
-                        projectId={projectId}
-                        onChange={(_description: object, description_html: string) => {
-                          onChange(description_html);
-                          handleFormChange();
-                        }}
-                        onEnterKeyPress={() => submitBtnRef?.current?.click()}
-                        ref={editorRef}
-                        tabIndex={getTabIndex("description_html")}
-                        placeholder={getDescriptionPlaceholder}
-                        containerClassName="pt-3 min-h-[150px]"
-                      />
-                    )}
-                  />
-                  <div className="border-0.5 z-10 flex items-center justify-end gap-2 p-3">
-                    {issueName && issueName.trim() !== "" && config?.has_openai_configured && (
-                      <button
-                        type="button"
-                        className={`flex items-center gap-1 rounded bg-custom-background-90 hover:bg-custom-background-80 px-1.5 py-1 text-xs ${
-                          iAmFeelingLucky ? "cursor-wait" : ""
-                        }`}
-                        onClick={handleAutoGenerateDescription}
-                        disabled={iAmFeelingLucky}
-                        tabIndex={getTabIndex("feeling_lucky")}
-                      >
-                        {iAmFeelingLucky ? (
-                          "Generating response"
-                        ) : (
-                          <>
-                            <Sparkle className="h-3.5 w-3.5" />I{"'"}m feeling lucky
-                          </>
-                        )}
-                      </button>
-                    )}
-                    {config?.has_openai_configured && projectId && (
-                      <GptAssistantPopover
-                        isOpen={gptAssistantModal}
-                        handleClose={() => {
-                          setGptAssistantModal((prevData) => !prevData);
-                          // this is done so that the title do not reset after gpt popover closed
-                          reset(getValues());
-                        }}
-                        onResponse={(response) => {
-                          handleAiAssistance(response);
-                        }}
-                        placement="top-end"
-                        button={
-                          <button
-                            type="button"
-                            className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-90 hover:bg-custom-background-80"
-                            onClick={() => setGptAssistantModal((prevData) => !prevData)}
-                            tabIndex={getTabIndex("ai_assistant")}
-                          >
-                            <Sparkle className="h-4 w-4" />
-                            AI
-                          </button>
-                        }
-                      />
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-            <div className="flex flex-wrap items-center gap-2">
-              <Controller
-                control={control}
-                name="state_id"
-                render={({ field: { value, onChange } }) => (
-                  <div className="h-7">
-                    <StateDropdown
-                      value={value}
-                      onChange={(stateId) => {
-                        onChange(stateId);
-                        handleFormChange();
-                      }}
-                      projectId={projectId ?? undefined}
-                      buttonVariant="border-with-text"
-                      tabIndex={getTabIndex("state_id")}
-                    />
-                  </div>
-                )}
-              />
-              <Controller
-                control={control}
-                name="priority"
-                render={({ field: { value, onChange } }) => (
-                  <div className="h-7">
-                    <PriorityDropdown
-                      value={value}
-                      onChange={(priority) => {
-                        onChange(priority);
-                        handleFormChange();
-                      }}
-                      buttonVariant="border-with-text"
-                      tabIndex={getTabIndex("priority")}
-                    />
-                  </div>
-                )}
-              />
-              <Controller
-                control={control}
-                name="assignee_ids"
-                render={({ field: { value, onChange } }) => (
-                  <div className="h-7">
-                    <MemberDropdown
-                      projectId={projectId ?? undefined}
-                      value={value}
-                      onChange={(assigneeIds) => {
-                        onChange(assigneeIds);
-                        handleFormChange();
-                      }}
-                      buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
-                      buttonClassName={value?.length > 0 ? "hover:bg-transparent" : ""}
-                      placeholder="Assignees"
-                      multiple
-                      tabIndex={getTabIndex("assignee_ids")}
-                    />
-                  </div>
-                )}
-              />
-              <Controller
-                control={control}
-                name="label_ids"
-                render={({ field: { value, onChange } }) => (
-                  <div className="h-7">
-                    <IssueLabelSelect
-                      setIsOpen={setLabelModal}
-                      value={value}
-                      onChange={(labelIds) => {
-                        onChange(labelIds);
-                        handleFormChange();
-                      }}
-                      projectId={projectId ?? undefined}
-                      tabIndex={getTabIndex("label_ids")}
-                    />
-                  </div>
-                )}
-              />
-              <Controller
-                control={control}
-                name="start_date"
-                render={({ field: { value, onChange } }) => (
-                  <div className="h-7">
-                    <DateDropdown
-                      value={value}
-                      onChange={(date) => {
-                        onChange(date ? renderFormattedPayloadDate(date) : null);
-                        handleFormChange();
-                      }}
-                      buttonVariant="border-with-text"
-                      maxDate={maxDate ?? undefined}
-                      placeholder="Start date"
-                      tabIndex={getTabIndex("start_date")}
-                    />
-                  </div>
-                )}
-              />
-              <Controller
-                control={control}
-                name="target_date"
-                render={({ field: { value, onChange } }) => (
-                  <div className="h-7">
-                    <DateDropdown
-                      value={value}
-                      onChange={(date) => {
-                        onChange(date ? renderFormattedPayloadDate(date) : null);
-                        handleFormChange();
-                      }}
-                      buttonVariant="border-with-text"
-                      minDate={minDate ?? undefined}
-                      placeholder="Due date"
-                      tabIndex={getTabIndex("target_date")}
-                    />
-                  </div>
-                )}
-              />
-              {projectDetails?.cycle_view && (
-                <Controller
-                  control={control}
-                  name="cycle_id"
-                  render={({ field: { value, onChange } }) => (
-                    <div className="h-7">
-                      <CycleDropdown
-                        projectId={projectId ?? undefined}
-                        onChange={(cycleId) => {
-                          onChange(cycleId);
-                          handleFormChange();
-                        }}
-                        placeholder="Cycle"
-                        value={value}
-                        buttonVariant="border-with-text"
-                        tabIndex={getTabIndex("cycle_id")}
-                      />
-                    </div>
-                  )}
-                />
-              )}
-              {projectDetails?.module_view && workspaceSlug && (
-                <Controller
-                  control={control}
-                  name="module_ids"
-                  render={({ field: { value, onChange } }) => (
-                    <div className="h-7">
-                      <ModuleDropdown
-                        projectId={projectId ?? undefined}
-                        value={value ?? []}
-                        onChange={(moduleIds) => {
-                          onChange(moduleIds);
-                          handleFormChange();
-                        }}
-                        placeholder="Modules"
-                        buttonVariant="border-with-text"
-                        tabIndex={getTabIndex("module_ids")}
-                        multiple
-                        showCount
-                      />
-                    </div>
-                  )}
-                />
-              )}
-              {projectId && areEstimateEnabledByProjectId(projectId) && (
-                <Controller
-                  control={control}
-                  name="estimate_point"
-                  render={({ field: { value, onChange } }) => (
-                    <div className="h-7">
-                      <EstimateDropdown
-                        value={value || undefined}
-                        onChange={(estimatePoint) => {
-                          onChange(estimatePoint);
-                          handleFormChange();
-                        }}
-                        projectId={projectId}
-                        buttonVariant="border-with-text"
-                        tabIndex={getTabIndex("estimate_point")}
-                        placeholder="Estimate"
-                      />
-                    </div>
-                  )}
-                />
-              )}
-              {watch("parent_id") ? (
-                <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}`}
-                      </span>
-                    </button>
-                  }
-                  placement="bottom-start"
-                  tabIndex={getTabIndex("parent_id")}
-                >
-                  <>
-                    <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
-                      Change parent issue
-                    </CustomMenu.MenuItem>
-                    <Controller
-                      control={control}
-                      name="parent_id"
-                      render={({ field: { onChange } }) => (
-                        <CustomMenu.MenuItem
-                          className="!p-1"
-                          onClick={() => {
-                            onChange(null);
-                            handleFormChange();
-                          }}
-                        >
-                          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={() => setParentIssueListModalOpen(true)}
-                >
-                  <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
-                  <span className="whitespace-nowrap">Add parent</span>
-                </button>
-              )}
-              <Controller
-                control={control}
-                name="parent_id"
-                render={({ field: { onChange } }) => (
-                  <ParentIssuesListModal
-                    isOpen={parentIssueListModalOpen}
-                    handleClose={() => setParentIssueListModalOpen(false)}
-                    onChange={(issue) => {
-                      onChange(issue.id);
-                      handleFormChange();
-                      setSelectedParentIssue(issue);
-                    }}
-                    projectId={projectId ?? undefined}
-                    issueId={isDraft ? undefined : data?.id}
-                  />
-                )}
-              />
-            </div>
-          </div>
-        </div>
-        <div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200">
-          <div>
-            {!data?.id && (
-              <div
-                className="inline-flex items-center gap-1.5 cursor-pointer"
-                onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
-                }}
-                tabIndex={getTabIndex("create_more")}
-                role="button"
-              >
-                <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
-                <span className="text-xs">Create more</span>
-              </div>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              variant="neutral-primary"
-              size="sm"
-              onClick={() => {
-                if (editorRef.current?.isEditorReadyToDiscard()) {
-                  onClose();
-                } else {
-                  setToast({
-                    type: TOAST_TYPE.ERROR,
-                    title: "Error!",
-                    message: "Editor is still processing changes. Please wait before proceeding.",
-                  });
-                }
-              }}
-              tabIndex={getTabIndex("discard_button")}
-            >
-              Discard
-            </Button>
-            {isDraft && (
-              <>
-                {data?.id ? (
-                  <Button
-                    variant="neutral-primary"
-                    size="sm"
-                    loading={isSubmitting}
-                    onClick={handleSubmit((data) => handleFormSubmit({ ...data, is_draft: false }))}
-                    tabIndex={getTabIndex("draft_button")}
-                  >
-                    {isSubmitting ? "Moving" : "Move from draft"}
-                  </Button>
-                ) : (
-                  <Button
-                    variant="neutral-primary"
-                    size="sm"
-                    loading={isSubmitting}
-                    onClick={handleSubmit((data) => handleFormSubmit(data, true))}
-                    tabIndex={getTabIndex("draft_button")}
-                  >
-                    {isSubmitting ? "Saving" : "Save as draft"}
-                  </Button>
-                )}
-              </>
-            )}
-            <Button
-              variant="primary"
-              type="submit"
-              size="sm"
-              ref={submitBtnRef}
-              loading={isSubmitting}
-              tabIndex={isDraft ? getTabIndex("submit_button") : getTabIndex("draft_button")}
-            >
-              {data?.id ? (isSubmitting ? "Updating" : "Update Issue") : isSubmitting ? "Creating" : "Create Issue"}
-            </Button>
-          </div>
-        </div>
-      </form>
-    </>
-  );
-});

web/ce/components/issues/issue-modal/index.ts

@@ -1,3 +1,3 @@
-export * from "./form";
-export * from "./draft-issue-layout";
-export * from "./modal";
+export * from "./provider";
+export * from "./issue-type-select";
+export * from "./additional-properties";

web/ce/components/issues/issue-modal/issue-type-select.tsx

@@ -0,0 +1,12 @@
+import { Control } from "react-hook-form";
+// types
+import { TIssue } from "@plane/types";
+
+type TIssueTypeSelectProps = {
+  control: Control<TIssue>;
+  projectId: string | null;
+  disabled?: boolean;
+  handleFormChange: () => void;
+};
+
+export const IssueTypeSelect: React.FC<TIssueTypeSelectProps> = () => <></>;

web/ce/components/issues/issue-modal/provider.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { IssueModalContext } from "@/components/issues";
+
+type TIssueModalProviderProps = {
+  children: React.ReactNode;
+};
+
+export const IssueModalProvider = observer((props: TIssueModalProviderProps) => {
+  const { children } = props;
+  return (
+    <IssueModalContext.Provider
+      value={{
+        issuePropertyValues: {},
+        setIssuePropertyValues: () => {},
+        issuePropertyValueErrors: {},
+        setIssuePropertyValueErrors: () => {},
+        getIssueTypeIdOnProjectChange: () => null,
+        getActiveAdditionalPropertiesLength: () => 0,
+        handlePropertyValuesValidation: () => true,
+        handleCreateUpdatePropertyValues: () => Promise.resolve(),
+      }}
+    >
+      {children}
+    </IssueModalContext.Provider>
+  );
+});

web/ce/components/pages/editor/ai/menu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { RefObject, useRef, useState } from "react";
+import React, { RefObject, useEffect, useRef, useState } from "react";
 import { useParams } from "next/navigation";
 import { ChevronRight, CornerDownRight, LucideIcon, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
 // plane editor
@@ -20,6 +20,7 @@ const aiService = new AIService();
 
 type Props = {
   editorRef: RefObject<EditorRefApi>;
+  isOpen: boolean;
   onClose: () => void;
 };
 
@@ -57,7 +58,7 @@ const TONES_LIST = [
 ];
 
 export const EditorAIMenu: React.FC<Props> = (props) => {
-  const { editorRef, onClose } = props;
+  const { editorRef, isOpen, onClose } = props;
   // states
   const [activeTask, setActiveTask] = useState<AI_EDITOR_TASKS | null>(null);
   const [response, setResponse] = useState<string | undefined>(undefined);
@@ -126,6 +127,14 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
     onClose();
   };
 
+  // reset on close
+  useEffect(() => {
+    if (!isOpen) {
+      setActiveTask(null);
+      setResponse(undefined);
+    }
+  }, [isOpen]);
+
   return (
     <div
       className={cn(

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/ce/types/index.ts

@@ -0,0 +1,2 @@
+export * from "./projects";
+export * from "./issue-types";

web/ce/types/issue-types/index.ts

@@ -0,0 +1 @@
+export * from "./issue-property-values.d";

web/ce/types/issue-types/issue-property-values.d.ts

@@ -0,0 +1,2 @@
+export type TIssuePropertyValues = object;
+export type TIssuePropertyValueErrors = object;

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>