chore: code refactor

.idx/dev.nix

@@ -1,16 +0,0 @@
-{ 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

@@ -1,29 +0,0 @@
-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,4 +1,3 @@
-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,16 +8,8 @@ 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
 
@@ -61,7 +53,6 @@ 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 }));
@@ -100,15 +91,6 @@ 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">
@@ -121,11 +103,7 @@ export const InstanceSignInForm: FC = (props) => {
           </p>
         </div>
 
-        {errorData.type && errorData?.message ? (
-          <Banner type="error" message={errorData?.message} />
-        ) : (
-          <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
-        )}
+        {errorData.type && errorData?.message && <Banner type="error" message={errorData?.message} />}
 
         <form
           className="space-y-4"

apiserver/plane/api/serializers/module.py

@@ -71,16 +71,6 @@ 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(
@@ -103,19 +93,6 @@ 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,12 +544,6 @@ 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 imports
+# Django improts
 from django.core.serializers.json import DjangoJSONEncoder
 from django.utils import timezone
 from django.db.models import Q, Value, UUIDField
@@ -184,8 +184,13 @@ 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:
+        if inbox is None and not project.inbox_view:
             return Response(
                 {
                     "error": "Inbox is not enabled for this project enable it through the project's api"

apiserver/plane/api/views/module.py

@@ -634,12 +634,6 @@ 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,10 +377,6 @@ 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_403_FORBIDDEN,
+                status=status.HTTP_401_UNAUTHORIZED,
             )
 
         return _wrapped_view

apiserver/plane/app/serializers/__init__.py

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

apiserver/plane/app/serializers/module.py

@@ -64,16 +64,6 @@ 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(
@@ -96,19 +86,6 @@ 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()
@@ -252,14 +229,7 @@ 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,40 +167,7 @@ class PageLogSerializer(BaseSerializer):
 class PageVersionSerializer(BaseSerializer):
     class Meta:
         model = PageVersion
-        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",
-        ]
+        fields = "__all__"
         read_only_fields = [
             "workspace",
             "page",

apiserver/plane/app/serializers/user.py

@@ -16,39 +16,26 @@ from .base import BaseSerializer
 class UserSerializer(BaseSerializer):
     class Meta:
         model = User
-        # 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
+        fields = "__all__"
         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",
-            "last_location",
-            "last_login_medium",
-            "created_location",
+            "token_updated_at",
             "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):
@@ -221,15 +208,9 @@ 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,8 +6,6 @@ from plane.app.views import (
     CycleIssueViewSet,
     CycleDateCheckEndpoint,
     CycleFavoriteViewSet,
-    CycleProgressEndpoint,
-    CycleAnalyticsEndpoint,
     TransferCycleIssueEndpoint,
     CycleUserPropertiesEndpoint,
     CycleArchiveUnarchiveEndpoint,
@@ -108,14 +106,4 @@ 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,12 +39,6 @@ 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(
@@ -311,4 +305,9 @@ 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,8 +98,6 @@ from .cycle.base import (
     CycleUserPropertiesEndpoint,
     CycleViewSet,
     TransferCycleIssueEndpoint,
-    CycleAnalyticsEndpoint,
-    CycleProgressEndpoint,
 )
 from .cycle.issue import (
     CycleIssueViewSet,
@@ -114,7 +112,6 @@ from .issue.base import (
     IssueViewSet,
     IssueUserDisplayPropertyEndpoint,
     BulkDeleteIssuesEndpoint,
-    IssuePaginatedViewSet,
 )
 
 from .issue.activity import (
@@ -159,6 +156,9 @@ 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,12 +607,6 @@ 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, ROLE.MEMBER], level="WORKSPACE")
+    @allow_permission(allowed_roles=[ROLE.ADMIN], level="WORKSPACE")
     def post(self, request, slug):
         # Get the workspace
         workspace = Workspace.objects.get(slug=slug)
@@ -62,9 +62,7 @@ class ExportIssuesEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE"
-    )
+    @allow_permission(allowed_roles=[ROLE.ADMIN], level="WORKSPACE")
     def get(self, request, slug):
         exporter_history = ExporterHistory.objects.filter(
             workspace__slug=slug,

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

@@ -47,7 +47,6 @@ 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
@@ -346,9 +345,7 @@ class BulkArchiveIssuesEndpoint(BaseAPIView):
             if issue.state.group not in ["completed", "cancelled"]:
                 return Response(
                     {
-                        "error_code": ERROR_CODES[
-                            "INVALID_ARCHIVE_STATE_GROUP"
-                        ],
+                        "error_code": 4091,
                         "error_message": "INVALID_ARCHIVE_STATE_GROUP",
                     },
                     status=status.HTTP_400_BAD_REQUEST,

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

@@ -56,11 +56,10 @@ from plane.utils.paginator import (
 )
 from .. import BaseAPIView, BaseViewSet
 from plane.utils.user_timezone_converter import user_timezone_converter
-from plane.bgtasks.recent_visited_task import recent_visited_task
-from plane.utils.global_paginator import paginate
 
 
 class IssueListEndpoint(BaseAPIView):
+
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
     def get(self, request, slug, project_id):
         issue_ids = request.GET.get("issues", False)
@@ -128,14 +127,6 @@ 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
@@ -256,13 +247,6 @@ 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,
@@ -500,14 +484,6 @@ 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)
 
@@ -599,6 +575,7 @@ 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(
@@ -629,8 +606,10 @@ 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):
@@ -651,141 +630,3 @@ 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

@@ -0,0 +1,293 @@
+# 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,12 +575,6 @@ 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,7 +55,6 @@ 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):
@@ -671,14 +670,6 @@ 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,8 +195,7 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
-        level="WORKSPACE",
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE"
     )
     def mark_read(self, request, slug, pk):
         notification = Notification.objects.get(
@@ -245,6 +244,7 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
 
 
 class UnreadNotificationEndpoint(BaseAPIView):
+
     @allow_permission(
         allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
         level="WORKSPACE",
@@ -286,6 +286,7 @@ class UnreadNotificationEndpoint(BaseAPIView):
 
 
 class MarkAllReadNotificationViewSet(BaseViewSet):
+
     @allow_permission(
         allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE"
     )
@@ -372,6 +373,9 @@ 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
@@ -382,6 +386,9 @@ 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,13 +33,12 @@ 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):
@@ -222,13 +221,6 @@ 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,
@@ -305,13 +297,6 @@ 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(
@@ -486,11 +471,6 @@ 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():
@@ -525,20 +505,14 @@ class PagesDescriptionViewSet(BaseViewSet):
 
         if page.is_locked:
             return Response(
-                {
-                    "error_code": ERROR_CODES["PAGE_LOCKED"],
-                    "error_message": "PAGE_LOCKED",
-                },
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Page is locked"},
+                status=471,
             )
 
         if page.archived_at:
             return Response(
-                {
-                    "error_code": ERROR_CODES["PAGE_ARCHIVED"],
-                    "error_message": "PAGE_ARCHIVED",
-                },
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Page is archived"},
+                status=472,
             )
 
         # Serialize the existing instance

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

@@ -5,18 +5,16 @@ from rest_framework.response import Response
 # Module imports
 from plane.db.models import PageVersion
 from ..base import BaseAPIView
-from plane.app.serializers import (
-    PageVersionSerializer,
-    PageVersionDetailSerializer,
-)
-from plane.app.permissions import allow_permission, ROLE
+from plane.app.permissions import ProjectEntityPermission
+from plane.app.serializers import PageVersionSerializer
 
 
 class PageVersionEndpoint(BaseAPIView):
 
-    @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST]
-    )
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
     def get(self, request, slug, project_id, page_id, pk=None):
         # Check if pk is provided
         if pk:
@@ -27,7 +25,7 @@ class PageVersionEndpoint(BaseAPIView):
                 pk=pk,
             )
             # Serialize the page version
-            serializer = PageVersionDetailSerializer(page_version)
+            serializer = PageVersionSerializer(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,7 +52,6 @@ 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):
@@ -265,14 +264,6 @@ 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)
 
@@ -493,10 +484,6 @@ 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,13 +13,12 @@ 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,
@@ -47,8 +46,10 @@ from plane.utils.paginator import (
     GroupedOffsetPaginator,
     SubGroupedOffsetPaginator,
 )
-from plane.bgtasks.recent_visited_task import recent_visited_task
+
+# Module imports
 from .. import BaseViewSet
+
 from plane.db.models import (
     UserFavorite,
 )
@@ -133,23 +134,8 @@ 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=[],
+        allowed_roles=[ROLE.ADMIN],
         level="WORKSPACE",
         creator=True,
         model=IssueView,
@@ -159,6 +145,19 @@ 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,
@@ -445,27 +444,6 @@ 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,6 +1697,23 @@ 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

@@ -1,61 +0,0 @@
-# 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,7 +32,6 @@ 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,6 +299,9 @@ 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

@@ -1,10 +0,0 @@
-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

@@ -1,78 +0,0 @@
-# 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,3 +61,4 @@ zxcvbn==4.4.28
 pytz==2024.1
 # jwt
 PyJWT==2.8.0
+

package.json

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

packages/editor/package.json

@@ -32,7 +32,6 @@
     "@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,7 +87,6 @@ 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 "./ai-menu";
 export * from "./bubble-menu";
+export * from "./ai-menu";
 export * from "./block-menu";
 export * from "./menu-items";

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

@@ -1,4 +1,3 @@
-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";
@@ -158,5 +157,4 @@ 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,5 +1,7 @@
-import { EditorState, Selection } from "@tiptap/pm/state";
+import { Extensions, generateJSON, getSchema } from "@tiptap/core";
+import { 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 {
@@ -59,12 +61,3 @@ 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,7 +8,6 @@ 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
@@ -127,8 +126,8 @@ export const useEditor = (props: CustomEditorProps) => {
   useImperativeHandle(
     forwardedRef,
     () => ({
-      clearEditor: (emitUpdate = false) => {
-        editorRef.current?.commands.clearContent(emitUpdate);
+      clearEditor: () => {
+        editorRef.current?.commands.clearContent();
       },
       setEditorValue: (content: string) => {
         editorRef.current?.commands.setContent(content);
@@ -250,11 +249,6 @@ 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,7 +4,6 @@ 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";
@@ -82,11 +81,6 @@ 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,8 +1,7 @@
-export type TAIMenuProps = {
-  isOpen: boolean;
+type TMenuProps = {
   onClose: () => void;
 };
 
 export type TAIHandler = {
-  menu?: (props: TAIMenuProps) => React.ReactNode;
+  menu?: (props: TMenuProps) => React.ReactNode;
 };

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

@@ -6,14 +6,9 @@ import { IMentionHighlight, IMentionSuggestion, TDisplayConfig, TEditorCommands,
 export type EditorReadOnlyRefApi = {
   getMarkDown: () => string;
   getHTML: () => string;
-  clearEditor: (emitUpdate?: boolean) => void;
+  clearEditor: () => 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,7 +79,6 @@
   -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;
@@ -88,15 +87,6 @@
   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;
@@ -120,6 +110,14 @@
   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,19 +48,3 @@ 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

@@ -0,0 +1,9 @@
+/** @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

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

packages/ui-v2/helpers.ts

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

packages/ui-v2/package.json

@@ -0,0 +1,37 @@
+{
+  "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

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

packages/ui-v2/react-internal.js

@@ -0,0 +1,43 @@
+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

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

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

@@ -0,0 +1,10 @@
+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

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

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

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

packages/ui-v2/src/index.ts

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

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

@@ -0,0 +1,79 @@
+/* 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

@@ -0,0 +1,204 @@
+@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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,28 @@
+{
+  "$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

@@ -0,0 +1,11 @@
+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,7 +35,6 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     tabIndex,
     closeOnSelect,
     openOnHover = false,
-    useCaptureForOutsideClick = false,
   } = props;
 
   const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
@@ -89,10 +88,10 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     }
   };
 
-  useOutsideClickDetector(dropdownRef, closeDropdown, useCaptureForOutsideClick);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
 
   let menuItems = (
-    <Menu.Items data-prevent-outside-click={!!portalElement} className={cn("fixed z-10", menuItemsClassName)} static>
+    <Menu.Items 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",
@@ -221,4 +220,4 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
 
 CustomMenu.MenuItem = MenuItem;
 
-export { CustomMenu };
+export { CustomMenu };

packages/ui/src/dropdowns/helper.tsx

@@ -17,7 +17,6 @@ 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, useCapture = false) => {
+const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
   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, useCapture);
+    document.addEventListener("mousedown", handleClick);
 
     return () => {
-      document.removeEventListener("mousedown", handleClick, useCapture);
+      document.removeEventListener("mousedown", handleClick);
     };
   });
 };

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,17 +24,18 @@ const CycleDetailPage = observer(() => {
   const router = useAppRouter();
   const { workspaceSlug, projectId, cycleId } = useParams();
   // store hooks
-  const { getCycleById, loader } = useCycle();
+  const { fetchCycleDetails, getCycleById } = useCycle();
   const { getProjectById } = useProject();
   // const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
   // hooks
   const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
-
-  useCyclesDetails({
-    workspaceSlug: workspaceSlug.toString(),
-    projectId: projectId.toString(),
-    cycleId: cycleId.toString(),
-  });
+  // 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
+  );
   // derived values
   const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
   const cycle = cycleId ? getCycleById(cycleId.toString()) : undefined;
@@ -51,7 +52,7 @@ const CycleDetailPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      {!cycle && !loader ? (
+      {error ? (
         <EmptyState
           image={emptyCycle}
           title="Cycle does not exist"
@@ -70,7 +71,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 absolute right-0 top-0 z-[13]"
+                  "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"
                 )}
                 style={{
                   boxShadow:

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

@@ -9,10 +9,8 @@ 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, useUser } from "@/hooks/store";
+import { useProject, useProjectInbox } from "@/hooks/store";
 
 export const ProjectInboxHeader: FC = observer(() => {
   // states
@@ -20,15 +18,9 @@ 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">
@@ -66,7 +58,7 @@ export const ProjectInboxHeader: FC = observer(() => {
         </div>
       </div>
 
-      {currentProjectDetails?.inbox_view && workspaceSlug && projectId && !isViewer && (
+      {currentProjectDetails?.inbox_view && workspaceSlug && projectId && (
         <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 absolute right-0 top-0 z-[13]"
+                "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"
               )}
               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="relative h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
+        <div className="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, useSearchParams } from "next/navigation";
+import { useParams } from "next/navigation";
 import { FileText } from "lucide-react";
 // types
 import { TLogoProps } from "@plane/types";
@@ -10,10 +10,8 @@ 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";
@@ -27,13 +25,11 @@ 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 page = usePage(pageId?.toString() ?? "");
-  const { isContentEditable, isSubmitting, name, logo_props, updatePageLogo } = page;
+  const { isContentEditable, isSubmitting, name, logo_props, updatePageLogo } = usePage(pageId?.toString() ?? "");
   // use platform
   const { isMobile, platform } = usePlatformOS();
   // derived values
@@ -59,9 +55,6 @@ 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">
@@ -150,9 +143,9 @@ export const PageDetailsHeader = observer(() => {
                           }
                         />
                       </div>
-                      <Tooltip tooltipContent={pageTitle} position="bottom" isMobile={isMobile}>
+                      <Tooltip tooltipContent={name ?? "Page"} position="bottom" isMobile={isMobile}>
                         <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">
-                          {pageTitle}
+                          {name ?? "Page"}
                         </div>
                       </Tooltip>
                     </div>
@@ -163,9 +156,8 @@ export const PageDetailsHeader = observer(() => {
           </Breadcrumbs>
         </div>
       </div>
-      <PageEditInformationPopover page={page} />
       <PageDetailsHeaderExtraActions />
-      {isContentEditable && !isVersionHistoryOverlayActive && (
+      {isContentEditable && (
         <Button
           variant="primary"
           size="sm"

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

@@ -3,12 +3,11 @@
 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 />} mobileHeader={<ViewMobileHeader />} />
+      <AppHeader header={<ProjectViewsHeader />} />
       <ContentWrapper>{children}</ContentWrapper>
     </>
   );

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

@@ -1,57 +0,0 @@
-"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 py-0.5", {
+          className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-2", {
             "vertical-scrollbar px-4": !sidebarCollapsed,
           })}
         >

web/app/layout.tsx

@@ -1,4 +1,4 @@
-import { Metadata, Viewport } from "next";
+import { Metadata } from "next";
 import Script from "next/script";
 // styles
 import "@/styles/globals.css";
@@ -28,15 +28,6 @@ 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");
 
@@ -60,6 +51,10 @@ 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" />
@@ -72,12 +67,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           crossOrigin="use-credentials"
         />
       </head>
-      <body className={`h-screen w-screen`}>
+      <body>
+        <div id="context-menu-portal" />
         <AppProvider>
-          <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>
+          <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>{children}</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-full w-full overflow-hidden">
+        <div className="relative flex h-screen 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,8 +12,6 @@ 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";
@@ -119,11 +117,11 @@ export const ProfileLayoutSidebar = observer(() => {
             )}
           </div>
         </Link>
-        <div className="flex flex-shrink-0 flex-col overflow-x-hidden">
+        <div className="flex flex-shrink-0 flex-col overflow-x-hidden px-4">
           {!sidebarCollapsed && (
-            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
+            <h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
           )}
-          <div className="vertical-scrollbar scrollbar-sm mt-2 px-4 h-full space-y-1 overflow-y-auto">
+          <div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1 overflow-y-auto">
             {PROFILE_ACTION_LINKS.map((link) => {
               if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
 
@@ -152,17 +150,12 @@ export const ProfileLayoutSidebar = observer(() => {
             })}
           </div>
         </div>
-        <div className="flex flex-col overflow-x-hidden">
+        <div className="flex flex-col overflow-x-hidden px-4">
           {!sidebarCollapsed && (
-            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
+            <h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
           )}
           {workspacesList && workspacesList.length > 0 && (
-            <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,
-              })}
-            >
+            <div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1.5 overflow-y-auto">
               {workspacesList.map((workspace) => (
                 <Link
                   key={workspace.id}
@@ -200,7 +193,7 @@ export const ProfileLayoutSidebar = observer(() => {
               ))}
             </div>
           )}
-          <div className="mt-1.5 px-4">
+          <div className="mt-1.5">
             {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

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

web/ce/components/issues/issue-modal/draft-issue-layout.tsx

@@ -4,21 +4,15 @@ import React, { useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
-// types
 import type { TIssue } from "@plane/types";
-// ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { ConfirmIssueDiscard } from "@/components/issues";
-// helpers
-import { isEmptyHtmlString } from "@/helpers/string.helper";
 // hooks
-import { useIssueModal } from "@/hooks/context/use-issue-modal";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { ConfirmIssueDiscard } from "@/components/issues";
+import { isEmptyHtmlString } from "@/helpers/string.helper";
 import { useEventTracker } from "@/hooks/store";
+import { IssueFormRoot } from "@/plane-web/components/issues/issue-modal/form";
 // services
 import { IssueDraftService } from "@/services/issue";
-// local components
-import { IssueFormRoot } from "./form";
 
 export interface DraftIssueProps {
   changesMade: Partial<TIssue> | null;
@@ -28,7 +22,7 @@ export interface DraftIssueProps {
   onCreateMoreToggleChange: (value: boolean) => void;
   onChange: (formData: Partial<TIssue> | null) => void;
   onClose: (saveDraftIssueInLocalStorage?: boolean) => void;
-  onSubmit: (formData: Partial<TIssue>, is_draft_issue?: boolean) => Promise<void>;
+  onSubmit: (formData: Partial<TIssue>) => Promise<void>;
   projectId: string;
   isDraft: boolean;
 }
@@ -56,7 +50,6 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
   const pathname = usePathname();
   // store hooks
   const { captureIssueEvent } = useEventTracker();
-  const { handleCreateUpdatePropertyValues } = useIssueModal();
 
   const handleClose = () => {
     if (data?.id) {
@@ -97,7 +90,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
       name: changesMade?.name && changesMade?.name?.trim() !== "" ? changesMade.name?.trim() : "Untitled",
     };
 
-    const response = await issueDraftService
+    await issueDraftService
       .createDraftIssue(workspaceSlug.toString(), projectId.toString(), payload)
       .then((res) => {
         setToast({
@@ -113,7 +106,6 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
         onChange(null);
         setIssueDiscardModal(false);
         onClose(false);
-        return res;
       })
       .catch(() => {
         setToast({
@@ -127,14 +119,6 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
           path: pathname,
         });
       });
-
-    if (response && handleCreateUpdatePropertyValues) {
-      handleCreateUpdatePropertyValues({
-        issueId: response.id,
-        projectId,
-        workspaceSlug: workspaceSlug?.toString(),
-      });
-    }
   };
 
   return (

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

@@ -0,0 +1,852 @@
+"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 "./provider";
-export * from "./issue-type-select";
-export * from "./additional-properties";
+export * from "./form";
+export * from "./draft-issue-layout";
+export * from "./modal";

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

@@ -1,12 +0,0 @@
-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/modal.tsx

@@ -7,21 +7,30 @@ import { useParams, usePathname } from "next/navigation";
 import type { TIssue } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
-import { CreateIssueToastActionItems, IssuesModalProps } from "@/components/issues";
+import { CreateIssueToastActionItems } from "@/components/issues";
 // constants
 import { ISSUE_CREATED, ISSUE_UPDATED } from "@/constants/event-tracker";
 import { EIssuesStoreType } from "@/constants/issue";
 // hooks
-import { useIssueModal } from "@/hooks/context/use-issue-modal";
 import { useEventTracker, useCycle, useIssues, useModule, useProject, useIssueDetail } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 import useLocalStorage from "@/hooks/use-local-storage";
-// local components
+// components
 import { DraftIssueLayout } from "./draft-issue-layout";
 import { IssueFormRoot } from "./form";
 
-export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((props) => {
+export interface IssuesModalProps {
+  data?: Partial<TIssue>;
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit?: (res: TIssue) => Promise<void>;
+  withDraftIssueWrapper?: boolean;
+  storeType?: EIssuesStoreType;
+  isDraft?: boolean;
+}
+
+export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
   const {
     data,
     isOpen,
@@ -51,7 +60,6 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
   const { issues: projectIssues } = useIssues(EIssuesStoreType.PROJECT);
   const { issues: draftIssues } = useIssues(EIssuesStoreType.DRAFT);
   const { fetchIssue } = useIssueDetail();
-  const { handleCreateUpdatePropertyValues } = useIssueModal();
   // pathname
   const pathname = usePathname();
   // local storage
@@ -182,15 +190,6 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
         await addIssueToModule(response, payload.module_ids);
       }
 
-      // add other property values
-      if (response.id && response.project_id) {
-        await handleCreateUpdatePropertyValues({
-          issueId: response.id,
-          projectId: response.project_id,
-          workspaceSlug: workspaceSlug.toString(),
-        });
-      }
-
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
@@ -235,13 +234,6 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
         ? await draftIssues.updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload)
         : updateIssue && (await updateIssue(payload.project_id, data.id, payload));
 
-      // add other property values
-      await handleCreateUpdatePropertyValues({
-        issueId: data.id,
-        projectId: payload.project_id,
-        workspaceSlug: workspaceSlug.toString(),
-      });
-
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",

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

@@ -1,28 +0,0 @@
-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, useEffect, useRef, useState } from "react";
+import React, { RefObject, useRef, useState } from "react";
 import { useParams } from "next/navigation";
 import { ChevronRight, CornerDownRight, LucideIcon, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
 // plane editor
@@ -20,7 +20,6 @@ const aiService = new AIService();
 
 type Props = {
   editorRef: RefObject<EditorRefApi>;
-  isOpen: boolean;
   onClose: () => void;
 };
 
@@ -58,7 +57,7 @@ const TONES_LIST = [
 ];
 
 export const EditorAIMenu: React.FC<Props> = (props) => {
-  const { editorRef, isOpen, onClose } = props;
+  const { editorRef, onClose } = props;
   // states
   const [activeTask, setActiveTask] = useState<AI_EDITOR_TASKS | null>(null);
   const [response, setResponse] = useState<string | undefined>(undefined);
@@ -127,14 +126,6 @@ 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,33 +15,19 @@ type TProPiceFrequency = "month" | "year";
 
 type TProPlanPrice = {
   key: string;
-  currency: string;
-  price: number;
+  price: string;
   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", currency: "$", price: 8, recurring: "month" },
-  { key: "yearly", currency: "$", price: 6, recurring: "year" },
+  { key: "monthly", price: "$7", recurring: "month" },
+  { key: "yearly", price: "$5", 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";
@@ -69,7 +55,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">
-                      -{yearlyDiscount}%
+                      -28%
                     </span>
                   )}
                 </>
@@ -83,8 +69,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.currency}
-                  {price.price}
+                  {price.recurring === "month" && "$7"}
+                  {price.recurring === "year" && "$5"}
                 </div>
                 <div className="text-sm text-custom-text-300">a user per month</div>
               </div>

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

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

web/ce/types/index.ts

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

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

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

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

@@ -1,2 +0,0 @@
-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="hidden md:grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          className="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,7 +10,6 @@ type Props = {
   as?: keyof JSX.IntrinsicElements;
   classNames?: string;
   placeholderChildren?: ReactNode;
-  defaultValue?: boolean;
 };
 
 const RenderIfVisible: React.FC<Props> = (props) => {
@@ -21,11 +20,10 @@ const RenderIfVisible: React.FC<Props> = (props) => {
     horizontalOffset = 0,
     as = "div",
     children,
-    defaultValue = false,
     classNames = "",
     placeholderChildren = null, //placeholder children
   } = props;
-  const [shouldVisible, setShouldVisible] = useState<boolean>(defaultValue);
+  const [shouldVisible, setShouldVisible] = useState<boolean>();
   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,6 +16,7 @@ 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";
@@ -26,7 +27,6 @@ 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,11 +34,10 @@ 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, cycleIssueDetails } = props;
+  const { workspaceSlug, projectId, cycle, cycleId, handleFiltersUpdate } = props;
 
   const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees");
 
@@ -58,12 +57,21 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
     }
   };
   const {
-    issues: { fetchNextActiveCycleIssues },
+    issues: { getActiveCycleById, fetchActiveCycleIssues, 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);
@@ -79,7 +87,6 @@ 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
@@ -241,7 +248,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 && !isEmpty(cycle.distribution) ? (
+            {cycle ? (
               cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
                 cycle.distribution?.assignees?.map((assignee, index) => {
                   if (assignee.assignee_id)
@@ -299,7 +306,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 && !isEmpty(cycle.distribution) ? (
+            {cycle ? (
               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 } from "react";
+import { FC, Fragment, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { ICycle, TCyclePlotType } from "@plane/types";
-import { CustomSelect, Loader } from "@plane/ui";
+import { CustomSelect, Loader, Spinner } from "@plane/ui";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
 import { EmptyState } from "@/components/empty-state";
@@ -26,15 +26,24 @@ const cycleBurnDownChartOptions = [
 export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observer((props) => {
   const { workspaceSlug, projectId, cycle } = props;
   // hooks
-  const { getPlotTypeByCycleId, setPlotType } = useCycle();
+  const { getPlotTypeByCycleId, setPlotType, fetchCycleDetails } = 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;
@@ -46,7 +55,7 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
     cycle && plotType === "points" ? cycle?.estimate_distribution : cycle?.distribution || undefined;
   const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
 
-  return cycle && completionChartDistributionData ? (
+  return cycle ? (
     <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}`}>
@@ -66,6 +75,7 @@ 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,33 +16,31 @@ 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 { handleFiltersUpdate, cycle } = props;
+  const { cycle, handleFiltersUpdate } = 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 && cycle.hasOwnProperty("started_issues") ? (
+  return cycle ? (
     <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,7 +1,15 @@
 "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,
@@ -13,9 +21,9 @@ import {
 import { EmptyState } from "@/components/empty-state";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
-import { useCycle } from "@/hooks/store";
-import { ActiveCycleIssueDetails } from "@/store/issue/cycle";
-import useCyclesDetails from "./use-cycles-details";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+// hooks
+import { useCycle, useIssues } from "@/hooks/store";
 
 interface IActiveCycleDetails {
   workspaceSlug: string;
@@ -23,13 +31,56 @@ interface IActiveCycleDetails {
 }
 
 export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) => {
+  // props
   const { workspaceSlug, projectId } = props;
-  const { currentProjectActiveCycle, currentProjectActiveCycleId } = useCycle();
+  // router
+  const router = useRouter();
+  // store hooks
   const {
-    handleFiltersUpdate,
-    cycle: activeCycle,
-    cycleIssueDetails,
-  } = useCyclesDetails({ workspaceSlug, projectId, cycleId: currentProjectActiveCycleId });
+    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>
+    );
 
   return (
     <>
@@ -55,12 +106,7 @@ 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
-                        handleFiltersUpdate={handleFiltersUpdate}
-                        projectId={projectId}
-                        workspaceSlug={workspaceSlug}
-                        cycle={activeCycle}
-                      />
+                      <ActiveCycleProgress cycle={activeCycle} handleFiltersUpdate={handleFiltersUpdate} />
                       <ActiveCycleProductivity
                         workspaceSlug={workspaceSlug}
                         projectId={projectId}
@@ -72,7 +118,6 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                         cycle={activeCycle}
                         cycleId={currentProjectActiveCycleId}
                         handleFiltersUpdate={handleFiltersUpdate}
-                        cycleIssueDetails={cycleIssueDetails as ActiveCycleIssueDetails}
                       />
                     </div>
                   </div>