Merge pull request #4349 from makeplane/preview

release: v0.19-dev

.github/workflows/auto-merge.yml

@@ -1,84 +0,0 @@
-name: Auto Merge or Create PR on Push
-
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - "sync/**"
-
-env:
-  CURRENT_BRANCH: ${{ github.ref_name }}
-  SOURCE_BRANCH: ${{ secrets.SYNC_SOURCE_BRANCH_NAME }} # The sync branch such as "sync/ce"
-  TARGET_BRANCH: ${{ secrets.SYNC_TARGET_BRANCH_NAME }} # The target branch that you would like to merge changes like develop
-  GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Personal access token required to modify contents and workflows
-  REVIEWER: ${{ secrets.SYNC_PR_REVIEWER }}
-
-jobs:
-  Check_Branch:
-    runs-on: ubuntu-latest
-    outputs:
-      BRANCH_MATCH: ${{ steps.check-branch.outputs.MATCH }}
-    steps:
-      - name: Check if current branch matches the secret
-        id: check-branch
-        run: |
-          if [ "$CURRENT_BRANCH" = "$SOURCE_BRANCH" ]; then
-            echo "MATCH=true" >> $GITHUB_OUTPUT
-          else
-            echo "MATCH=false" >> $GITHUB_OUTPUT
-          fi
-
-  Auto_Merge:
-    if: ${{ needs.Check_Branch.outputs.BRANCH_MATCH == 'true' }}
-    needs: [Check_Branch]
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write
-      contents: write
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4.1.1
-        with:
-          fetch-depth: 0 # Fetch all history for all branches and tags
-
-      - name: Setup Git
-        run: |
-          git config user.name "GitHub Actions"
-          git config user.email "actions@github.com"
-
-      - name: Setup GH CLI and Git Config
-        run: |
-          type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
-          curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
-          sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
-          echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
-          sudo apt update
-          sudo apt install gh -y
-
-      - name: Check for merge conflicts
-        id: conflicts
-        run: |
-          git fetch origin $TARGET_BRANCH
-          git checkout $TARGET_BRANCH
-          # Attempt to merge the main branch into the current branch
-          if $(git merge --no-commit --no-ff $SOURCE_BRANCH); then
-            echo "No merge conflicts detected."
-            echo "HAS_CONFLICTS=false" >> $GITHUB_ENV
-          else
-            echo "Merge conflicts detected."
-            echo "HAS_CONFLICTS=true" >> $GITHUB_ENV
-            git merge --abort
-          fi
-
-      - name: Merge Change to Target Branch
-        if: env.HAS_CONFLICTS == 'false'
-        run: |
-          git commit -m "Merge branch '$SOURCE_BRANCH' into $TARGET_BRANCH"
-          git push origin $TARGET_BRANCH
-
-      - name: Create PR to Target Branch
-        if: env.HAS_CONFLICTS == 'true'
-        run: |
-          # Replace 'username' with the actual GitHub username of the reviewer.
-          PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: merge conflicts need to be resolved" --body "" --reviewer $REVIEWER)
-          echo "Pull Request created: $PR_URL"

.github/workflows/create-sync-pr.yml

@@ -1,28 +1,53 @@
-name: Create Sync Action
+name: Create PR on Sync
 
 on:
   workflow_dispatch:
   push:
     branches:
-      - preview
+      - "sync/**"
 
 env:
-  SOURCE_BRANCH_NAME: ${{ github.ref_name }}
+  CURRENT_BRANCH: ${{ github.ref_name }}
+  SOURCE_BRANCH: ${{ vars.SYNC_SOURCE_BRANCH_NAME }} # The sync branch such as "sync/ce"
+  TARGET_BRANCH: ${{ vars.SYNC_TARGET_BRANCH_NAME }} # The target branch that you would like to merge changes like develop
+  GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Personal access token required to modify contents and workflows
+  REVIEWER: ${{ vars.SYNC_PR_REVIEWER }}
+  ACCOUNT_USER_NAME: ${{ vars.ACCOUNT_USER_NAME }}
+  ACCOUNT_USER_EMAIL: ${{ vars.ACCOUNT_USER_EMAIL }}
 
 jobs:
-  sync_changes:
+  Check_Branch:
+    runs-on: ubuntu-latest
+    outputs:
+      BRANCH_MATCH: ${{ steps.check-branch.outputs.MATCH }}
+    steps:
+      - name: Check if current branch matches the secret
+        id: check-branch
+        run: |
+          if [ "$CURRENT_BRANCH" = "$SOURCE_BRANCH" ]; then
+            echo "MATCH=true" >> $GITHUB_OUTPUT
+          else
+            echo "MATCH=false" >> $GITHUB_OUTPUT
+          fi
+  Auto_Merge:
+    if: ${{ needs.Check_Branch.outputs.BRANCH_MATCH == 'true' }}
+    needs: [Check_Branch]
     runs-on: ubuntu-latest
     permissions:
       pull-requests: write
-      contents: read
+      contents: write
     steps:
-      - name: Checkout Code
+      - name: Checkout code
         uses: actions/checkout@v4.1.1
         with:
-          persist-credentials: false
-          fetch-depth: 0
+          fetch-depth: 0 # Fetch all history for all branches and tags
 
-      - name: Setup GH CLI
+      - name: Setup Git
+        run: |
+          git config user.name "$ACCOUNT_USER_NAME"
+          git config user.email "$ACCOUNT_USER_EMAIL"
+
+      - name: Setup GH CLI and Git Config
         run: |
           type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
           curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
@@ -31,25 +56,14 @@ jobs:
           sudo apt update
           sudo apt install gh -y
 
-      - name: Push Changes to Target Repo A
-        env:
-          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+      - name: Create PR to Target Branch
         run: |
-          TARGET_REPO="${{ secrets.TARGET_REPO_A }}"
-          TARGET_BRANCH="${{ secrets.TARGET_REPO_A_BRANCH_NAME }}"
-          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
-
-          git checkout $SOURCE_BRANCH
-          git remote add target-origin-a "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
-          git push target-origin-a $SOURCE_BRANCH:$TARGET_BRANCH
-
-      - name: Push Changes to Target Repo B
-        env:
-          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-        run: |
-          TARGET_REPO="${{ secrets.TARGET_REPO_B }}"
-          TARGET_BRANCH="${{ secrets.TARGET_REPO_B_BRANCH_NAME }}"
-          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
-
-          git remote add target-origin-b "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
-          git push target-origin-b $SOURCE_BRANCH:$TARGET_BRANCH
+          # get all pull requests and check if there is already a PR
+          PR_EXISTS=$(gh pr list --base $TARGET_BRANCH --head $SOURCE_BRANCH --state open --json number | jq '.[] | .number')
+          if [ -n "$PR_EXISTS" ]; then
+            echo "Pull Request already exists: $PR_EXISTS"
+          else
+            echo "Creating new pull request"
+            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: merge conflicts need to be resolved" --body "")
+            echo "Pull Request created: $PR_URL"
+          fi

.github/workflows/repo-sync.yml

@@ -0,0 +1,44 @@
+name: Sync Repositories
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - preview
+
+env:
+  SOURCE_BRANCH_NAME: ${{ github.ref_name }}
+
+jobs:
+  sync_changes:
+    runs-on: ubuntu-20.04
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4.1.1
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+
+      - name: Setup GH CLI
+        run: |
+          type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
+          curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
+          sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
+          echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
+          sudo apt update
+          sudo apt install gh -y
+
+      - name: Push Changes to Target Repo
+        env:
+          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+        run: |
+          TARGET_REPO="${{ vars.SYNC_TARGET_REPO }}"
+          TARGET_BRANCH="${{ vars.SYNC_TARGET_BRANCH_NAME }}"
+          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
+
+          git checkout $SOURCE_BRANCH
+          git remote add target-origin-a "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
+          git push target-origin-a $SOURCE_BRANCH:$TARGET_BRANCH

apiserver/package.json

@@ -1,4 +1,4 @@
 {
   "name": "plane-api",
-  "version": "0.18.0"
+  "version": "0.19.0"
 }

apiserver/plane/api/urls/issue.py

@@ -6,9 +6,15 @@ from plane.api.views import (
     IssueLinkAPIEndpoint,
     IssueCommentAPIEndpoint,
     IssueActivityAPIEndpoint,
+    WorkspaceIssueAPIEndpoint,
 )
 
 urlpatterns = [
+    path(
+        "workspaces/<str:slug>/issues/<str:project__identifier>-<str:issue__identifier>/",
+        WorkspaceIssueAPIEndpoint.as_view(),
+        name="issue-by-identifier",
+    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/issues/",
         IssueAPIEndpoint.as_view(),

apiserver/plane/api/views/__init__.py

@@ -3,6 +3,7 @@ from .project import ProjectAPIEndpoint, ProjectArchiveUnarchiveAPIEndpoint
 from .state import StateAPIEndpoint
 
 from .issue import (
+    WorkspaceIssueAPIEndpoint,
     IssueAPIEndpoint,
     LabelAPIEndpoint,
     IssueLinkAPIEndpoint,

apiserver/plane/api/views/issue.py

@@ -51,6 +51,65 @@ from plane.db.models import (
 from .base import BaseAPIView, WebhookMixin
 
 
+
+class WorkspaceIssueAPIEndpoint(WebhookMixin, BaseAPIView):
+    """
+    This viewset provides `retrieveByIssueId` on workspace level
+
+    """
+
+    model = Issue
+    webhook_event = "issue"
+    permission_classes = [
+        ProjectEntityPermission
+    ]
+    serializer_class = IssueSerializer
+
+
+    @property
+    def project__identifier(self):
+        return self.kwargs.get("project__identifier", None)
+
+    def get_queryset(self):
+        return (
+            Issue.issue_objects.annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(project__identifier=self.kwargs.get("project__identifier"))
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .order_by(self.kwargs.get("order_by", "-created_at"))
+        ).distinct()
+
+    def get(self, request, slug, project__identifier=None, issue__identifier=None):
+        if issue__identifier and project__identifier:
+            issue = Issue.issue_objects.annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            ).get(workspace__slug=slug, project__identifier=project__identifier, sequence_id=issue__identifier)
+            return Response(
+                IssueSerializer(
+                    issue,
+                    fields=self.fields,
+                    expand=self.expand,
+                ).data,
+                status=status.HTTP_200_OK,
+            )
+
 class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
     """
     This viewset automatically provides `list`, `create`, `retrieve`,
@@ -437,7 +496,7 @@ class LabelAPIEndpoint(BaseAPIView):
         serializer = LabelSerializer(label, data=request.data, partial=True)
         if serializer.is_valid():
             if (
-                request.data.get("external_id")
+                str(request.data.get("external_id"))
                 and (label.external_id != str(request.data.get("external_id")))
                 and Issue.objects.filter(
                     project_id=project_id,

apiserver/plane/app/permissions/project.py

@@ -79,6 +79,16 @@ class ProjectEntityPermission(BasePermission):
         if request.user.is_anonymous:
             return False
 
+        # Handle requests based on project__identifier
+        if hasattr(view, "project__identifier") and view.project__identifier:
+            if request.method in SAFE_METHODS:
+                return ProjectMember.objects.filter(
+                    workspace__slug=view.workspace_slug,
+                    member=request.user,
+                    project__identifier=view.project__identifier,
+                    is_active=True,
+                ).exists()
+
         ## Safe Methods -> Handle the filtering logic in queryset
         if request.method in SAFE_METHODS:
             return ProjectMember.objects.filter(

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

@@ -38,7 +38,7 @@ from plane.db.models import (
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.issue_filters import issue_filters
-
+from plane.utils.user_timezone_converter import user_timezone_converter
 
 class CycleIssueViewSet(WebhookMixin, BaseViewSet):
     serializer_class = CycleIssueSerializer
@@ -191,6 +191,11 @@ class CycleIssueViewSet(WebhookMixin, BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issues, datetime_fields, request.user.user_timezone
+            )
+
         return Response(issues, status=status.HTTP_200_OK)
 
     def create(self, request, slug, project_id, cycle_id):

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

@@ -47,7 +47,7 @@ from plane.db.models import (
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.issue_filters import issue_filters
-
+from plane.utils.user_timezone_converter import user_timezone_converter
 
 class IssueArchiveViewSet(BaseViewSet):
     permission_classes = [
@@ -239,6 +239,11 @@ class IssueArchiveViewSet(BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issue_queryset, datetime_fields, request.user.user_timezone
+            )
+            
         return Response(issues, status=status.HTTP_200_OK)
 
     def retrieve(self, request, slug, project_id, pk=None):

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

@@ -50,6 +50,7 @@ from plane.db.models import (
     Project,
 )
 from plane.utils.issue_filters import issue_filters
+from plane.utils.user_timezone_converter import user_timezone_converter
 
 # Module imports
 from .. import BaseAPIView, BaseViewSet, WebhookMixin
@@ -241,6 +242,10 @@ class IssueListEndpoint(BaseAPIView):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issues, datetime_fields, request.user.user_timezone
+            )
         return Response(issues, status=status.HTTP_200_OK)
 
 
@@ -440,6 +445,10 @@ class IssueViewSet(WebhookMixin, BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issue_queryset, datetime_fields, request.user.user_timezone
+            )
         return Response(issues, status=status.HTTP_200_OK)
 
     def create(self, request, slug, project_id):
@@ -503,6 +512,10 @@ class IssueViewSet(WebhookMixin, BaseViewSet):
                 )
                 .first()
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issue = user_timezone_converter(
+                issue, datetime_fields, request.user.user_timezone
+            )
             return Response(issue, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 

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

@@ -45,6 +45,7 @@ from plane.db.models import (
     Project,
 )
 from plane.utils.issue_filters import issue_filters
+from plane.utils.user_timezone_converter import user_timezone_converter
 
 # Module imports
 from .. import BaseViewSet
@@ -229,6 +230,10 @@ class IssueDraftViewSet(BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issue_queryset, datetime_fields, request.user.user_timezone
+            )
         return Response(issues, status=status.HTTP_200_OK)
 
     def create(self, request, slug, project_id):

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

@@ -31,6 +31,7 @@ from plane.db.models import (
     IssueAttachment,
 )
 from plane.bgtasks.issue_activites_task import issue_activity
+from plane.utils.user_timezone_converter import user_timezone_converter
 from collections import defaultdict
 
 
@@ -132,6 +133,10 @@ class SubIssuesEndpoint(BaseAPIView):
             "is_draft",
             "archived_at",
         )
+        datetime_fields = ["created_at", "updated_at"]
+        sub_issues = user_timezone_converter(
+            sub_issues, datetime_fields, request.user.user_timezone
+        )
         return Response(
             {
                 "sub_issues": sub_issues,

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

@@ -32,6 +32,8 @@ from plane.db.models import (
     ModuleLink,
 )
 from plane.utils.analytics_plot import burndown_plot
+from plane.utils.user_timezone_converter import user_timezone_converter
+
 
 # Module imports
 from .. import BaseAPIView
@@ -199,6 +201,10 @@ class ModuleArchiveUnarchiveEndpoint(BaseAPIView):
                 "updated_at",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            modules = user_timezone_converter(
+                modules, datetime_fields, request.user.user_timezone
+            )
             return Response(modules, status=status.HTTP_200_OK)
         else:
             queryset = (

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

@@ -48,6 +48,8 @@ from plane.db.models import (
     Project,
 )
 from plane.utils.analytics_plot import burndown_plot
+from plane.utils.user_timezone_converter import user_timezone_converter
+
 
 # Module imports
 from .. import BaseAPIView, BaseViewSet, WebhookMixin
@@ -236,6 +238,10 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                     "updated_at",
                 )
             ).first()
+            datetime_fields = ["created_at", "updated_at"]
+            module = user_timezone_converter(
+                module, datetime_fields, request.user.user_timezone
+            )
             return Response(module, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -277,6 +283,10 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                 "created_at",
                 "updated_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            modules = user_timezone_converter(
+                modules, datetime_fields, request.user.user_timezone
+            )
         return Response(modules, status=status.HTTP_200_OK)
 
     def retrieve(self, request, slug, project_id, pk):
@@ -454,6 +464,10 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                 "created_at",
                 "updated_at",
             ).first()
+            datetime_fields = ["created_at", "updated_at"]
+            module = user_timezone_converter(
+                module, datetime_fields, request.user.user_timezone
+            )
             return Response(module, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 

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

@@ -31,7 +31,7 @@ from plane.db.models import (
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.issue_filters import issue_filters
-
+from plane.utils.user_timezone_converter import user_timezone_converter
 
 class ModuleIssueViewSet(WebhookMixin, BaseViewSet):
     serializer_class = ModuleIssueSerializer
@@ -150,6 +150,11 @@ class ModuleIssueViewSet(WebhookMixin, BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issues, datetime_fields, request.user.user_timezone
+            )
+
         return Response(issues, status=status.HTTP_200_OK)
 
     # create multiple issues inside a module

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

@@ -185,7 +185,6 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
             .annotate(
                 total_issues=Issue.issue_objects.filter(
                     project_id=self.kwargs.get("pk"),
-                    parent__isnull=True,
                 )
                 .order_by()
                 .annotate(count=Func(F("id"), function="Count"))
@@ -204,7 +203,6 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
                 archived_issues=Issue.objects.filter(
                     project_id=self.kwargs.get("pk"),
                     archived_at__isnull=False,
-                    parent__isnull=True,
                 )
                 .order_by()
                 .annotate(count=Func(F("id"), function="Count"))
@@ -224,7 +222,6 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
                 draft_issues=Issue.objects.filter(
                     project_id=self.kwargs.get("pk"),
                     is_draft=True,
-                    parent__isnull=True,
                 )
                 .order_by()
                 .annotate(count=Func(F("id"), function="Count"))

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

@@ -42,7 +42,7 @@ from plane.db.models import (
     IssueAttachment,
 )
 from plane.utils.issue_filters import issue_filters
-
+from plane.utils.user_timezone_converter import user_timezone_converter
 
 class GlobalViewViewSet(BaseViewSet):
     serializer_class = IssueViewSerializer
@@ -255,6 +255,10 @@ class GlobalViewIssuesViewSet(BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issues, datetime_fields, request.user.user_timezone
+            )
         return Response(issues, status=status.HTTP_200_OK)
 
 

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

@@ -151,8 +151,8 @@ class WorkSpaceViewSet(BaseViewSet):
         return super().partial_update(request, *args, **kwargs)
 
     @invalidate_cache(path="/api/workspaces/", user=False)
-    @invalidate_cache(path="/api/users/me/workspaces/", multiple=True)
-    @invalidate_cache(path="/api/users/me/settings/", multiple=True)
+    @invalidate_cache(path="/api/users/me/workspaces/", multiple=True, user=False)
+    @invalidate_cache(path="/api/users/me/settings/", multiple=True, user=False)
     def destroy(self, request, *args, **kwargs):
         return super().destroy(request, *args, **kwargs)
 

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

@@ -27,7 +27,7 @@ class WorkspaceCyclesEndpoint(BaseAPIView):
             .select_related("project")
             .select_related("workspace")
             .select_related("owned_by")
-            .filter(archived_at__isnull=False)
+            .filter(archived_at__isnull=True)
             .annotate(
                 total_issues=Count(
                     "issue_cycle",

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

@@ -30,7 +30,7 @@ class WorkspaceModulesEndpoint(BaseAPIView):
             .select_related("workspace")
             .select_related("lead")
             .prefetch_related("members")
-            .filter(archived_at__isnull=False)
+            .filter(archived_at__isnull=True)
             .prefetch_related(
                 Prefetch(
                     "link_module",

apiserver/plane/app/views/workspace/state.py

@@ -21,6 +21,7 @@ class WorkspaceStatesEndpoint(BaseAPIView):
             project__project_projectmember__member=request.user,
             project__project_projectmember__is_active=True,
             project__archived_at__isnull=True,
+            is_triage=False,
         )
         serializer = StateSerializer(states, many=True).data
         return Response(serializer, status=status.HTTP_200_OK)

apiserver/plane/license/management/commands/register_instance.py

@@ -46,7 +46,7 @@ class Command(BaseCommand):
             }
 
             instance = Instance.objects.create(
-                instance_name="Plane Free",
+                instance_name="Plane Community Edition",
                 instance_id=secrets.token_hex(12),
                 license_key=None,
                 api_key=secrets.token_hex(8),

apiserver/plane/utils/user_timezone_converter.py

@@ -0,0 +1,25 @@
+import pytz
+
+def user_timezone_converter(queryset, datetime_fields, user_timezone):
+    # Create a timezone object for the user's timezone
+    user_tz = pytz.timezone(user_timezone)
+
+    # Check if queryset is a dictionary (single item) or a list of dictionaries
+    if isinstance(queryset, dict):
+        queryset_values = [queryset]
+    else:
+        queryset_values = list(queryset.values())
+
+    # Iterate over the dictionaries in the list
+    for item in queryset_values:
+        # Iterate over the datetime fields
+        for field in datetime_fields:
+            # Convert the datetime field to the user's timezone
+            if item[field]:
+                item[field] = item[field].astimezone(user_tz)
+
+    # If queryset was a single item, return a single item
+    if isinstance(queryset, dict):
+        return queryset_values[0]
+    else:
+        return queryset_values

deploy/coolify/coolify-docker-compose.yml

@@ -180,7 +180,7 @@ services:
 
   plane-redis:
     container_name: plane-redis
-    image: redis:6.2.7-alpine
+    image: redis:7.2.4-alpine
     restart: always
     volumes:
       - redisdata:/data

docker-compose-local.yml

@@ -10,7 +10,7 @@ volumes:
 
 services:
   plane-redis:
-    image: redis:6.2.7-alpine
+    image: redis:7.2.4-alpine
     restart: unless-stopped
     networks:
       - dev_env

docker-compose.yml

@@ -90,7 +90,7 @@ services:
 
   plane-redis:
     container_name: plane-redis
-    image: redis:6.2.7-alpine
+    image: redis:7.2.4-alpine
     restart: always
     volumes:
       - redisdata:/data

package.json

@@ -1,6 +1,6 @@
 {
   "repository": "https://github.com/makeplane/plane.git",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [

packages/editor/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-core",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Core Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",

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

@@ -34,7 +34,7 @@ interface CustomEditorProps {
     suggestions?: () => Promise<IMentionSuggestion[]>;
   };
   handleEditorReady?: (value: boolean) => void;
-  placeholder?: string | ((isFocused: boolean) => string);
+  placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
 }
 
@@ -142,11 +142,11 @@ export const useEditor = ({
       executeMenuItemCommand: (itemName: EditorMenuItemNames) => {
         const editorItems = getEditorMenuItems(editorRef.current, uploadFile);
 
-        const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.name === itemName);
+        const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.key === itemName);
 
         const item = getEditorMenuItem(itemName);
         if (item) {
-          if (item.name === "image") {
+          if (item.key === "image") {
             item.command(savedSelection);
           } else {
             item.command();
@@ -158,7 +158,7 @@ export const useEditor = ({
       isMenuItemActive: (itemName: EditorMenuItemNames): boolean => {
         const editorItems = getEditorMenuItems(editorRef.current, uploadFile);
 
-        const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.name === itemName);
+        const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.key === itemName);
         const item = getEditorMenuItem(itemName);
         return item ? item.isActive() : false;
       },

packages/editor/core/src/lib/editor-commands.ts

@@ -4,6 +4,11 @@ import { findTableAncestor } from "src/lib/utils";
 import { Selection } from "@tiptap/pm/state";
 import { UploadImage } from "src/types/upload-image";
 
+export const setText = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().run();
+  else editor.chain().focus().clearNodes().run();
+};
+
 export const toggleHeadingOne = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
   else editor.chain().focus().toggleHeading({ level: 1 }).run();
@@ -19,6 +24,21 @@ export const toggleHeadingThree = (editor: Editor, range?: Range) => {
   else editor.chain().focus().toggleHeading({ level: 3 }).run();
 };
 
+export const toggleHeadingFour = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 4 }).run();
+  else editor.chain().focus().toggleHeading({ level: 4 }).run();
+};
+
+export const toggleHeadingFive = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 5 }).run();
+  else editor.chain().focus().toggleHeading({ level: 5 }).run();
+};
+
+export const toggleHeadingSix = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 6 }).run();
+  else editor.chain().focus().toggleHeading({ level: 6 }).run();
+};
+
 export const toggleBold = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).toggleBold().run();
   else editor.chain().focus().toggleBold().run();

packages/editor/core/src/styles/editor.css

@@ -1,3 +1,14 @@
+.ProseMirror {
+  --font-size-h1: 1.5rem;
+  --font-size-h2: 1.3125rem;
+  --font-size-h3: 1.125rem;
+  --font-size-h4: 0.9375rem;
+  --font-size-h5: 0.8125rem;
+  --font-size-h6: 0.75rem;
+  --font-size-regular: 0.9375rem;
+  --font-size-list: var(--font-size-regular);
+}
+
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -56,7 +67,7 @@
 
 /* to-do list */
 ul[data-type="taskList"] li {
-  font-size: 1rem;
+  font-size: var(--font-size-list);
   line-height: 1.5;
 }
 
@@ -162,7 +173,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   cursor: text;
   line-height: 1.2;
   font-family: inherit;
-  font-size: 14px;
+  font-size: var(--font-size-regular);
   color: inherit;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -310,15 +321,15 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 2rem;
   margin-bottom: 4px;
-  font-size: 1.875rem;
-  font-weight: 700;
+  font-size: var(--font-size-h1);
+  font-weight: 600;
   line-height: 1.3;
 }
 
 .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.4rem;
   margin-bottom: 1px;
-  font-size: 1.5rem;
+  font-size: var(--font-size-h2);
   font-weight: 600;
   line-height: 1.3;
 }
@@ -326,21 +337,46 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1rem;
   margin-bottom: 1px;
-  font-size: 1.25rem;
+  font-size: var(--font-size-h3);
+  font-weight: 600;
   line-height: 1.3;
 }
 
+.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1rem;
+  margin-bottom: 1px;
+  font-size: var(--font-size-h4);
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1rem;
+  margin-bottom: 1px;
+  font-size: var(--font-size-h5);
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1rem;
+  margin-bottom: 1px;
+  font-size: var(--font-size-h6);
+  font-weight: 600;
+  line-height: 1.5;
+}
+
 .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 0.25rem;
   margin-bottom: 1px;
-  padding: 3px 2px;
-  font-size: 1rem;
+  padding: 3px 0;
+  font-size: var(--font-size-regular);
   line-height: 1.5;
 }
 
 .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p,
 .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p {
-  font-size: 1rem;
+  font-size: var(--font-size-list);
   line-height: 1.5;
 }
 

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

@@ -43,7 +43,7 @@ type TArguments = {
     cancelUploadImage?: () => void;
     uploadFile: UploadImage;
   };
-  placeholder?: string | ((isFocused: boolean) => string);
+  placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
 };
 
@@ -147,7 +147,7 @@ export const CoreEditorExtensions = ({
 
       if (placeholder) {
         if (typeof placeholder === "string") return placeholder;
-        else return placeholder(editor.isFocused);
+        else return placeholder(editor.isFocused, editor.getHTML());
       }
 
       return "Press '/' for commands...";

packages/editor/core/src/ui/menus/menu-items/index.tsx

@@ -13,16 +13,24 @@ import {
   UnderlineIcon,
   StrikethroughIcon,
   CodeIcon,
+  Heading4,
+  Heading5,
+  Heading6,
+  CaseSensitive,
 } from "lucide-react";
 import { Editor } from "@tiptap/react";
 import {
   insertImageCommand,
   insertTableCommand,
+  setText,
   toggleBlockquote,
   toggleBold,
   toggleBulletList,
   toggleCodeBlock,
+  toggleHeadingFive,
+  toggleHeadingFour,
   toggleHeadingOne,
+  toggleHeadingSix,
   toggleHeadingThree,
   toggleHeadingTwo,
   toggleItalic,
@@ -36,15 +44,26 @@ import { UploadImage } from "src/types/upload-image";
 import { Selection } from "@tiptap/pm/state";
 
 export interface EditorMenuItem {
+  key: string;
   name: string;
   isActive: () => boolean;
   command: () => void;
   icon: LucideIconType;
 }
 
+export const TextItem = (editor: Editor) =>
+  ({
+    key: "text",
+    name: "Text",
+    isActive: () => editor.isActive("paragraph"),
+    command: () => setText(editor),
+    icon: CaseSensitive,
+  }) as const satisfies EditorMenuItem;
+
 export const HeadingOneItem = (editor: Editor) =>
   ({
-    name: "H1",
+    key: "h1",
+    name: "Heading 1",
     isActive: () => editor.isActive("heading", { level: 1 }),
     command: () => toggleHeadingOne(editor),
     icon: Heading1,
@@ -52,7 +71,8 @@ export const HeadingOneItem = (editor: Editor) =>
 
 export const HeadingTwoItem = (editor: Editor) =>
   ({
-    name: "H2",
+    key: "h2",
+    name: "Heading 2",
     isActive: () => editor.isActive("heading", { level: 2 }),
     command: () => toggleHeadingTwo(editor),
     icon: Heading2,
@@ -60,15 +80,44 @@ export const HeadingTwoItem = (editor: Editor) =>
 
 export const HeadingThreeItem = (editor: Editor) =>
   ({
-    name: "H3",
+    key: "h3",
+    name: "Heading 3",
     isActive: () => editor.isActive("heading", { level: 3 }),
     command: () => toggleHeadingThree(editor),
     icon: Heading3,
   }) as const satisfies EditorMenuItem;
 
+export const HeadingFourItem = (editor: Editor) =>
+  ({
+    key: "h4",
+    name: "Heading 4",
+    isActive: () => editor.isActive("heading", { level: 4 }),
+    command: () => toggleHeadingFour(editor),
+    icon: Heading4,
+  }) as const satisfies EditorMenuItem;
+
+export const HeadingFiveItem = (editor: Editor) =>
+  ({
+    key: "h5",
+    name: "Heading 5",
+    isActive: () => editor.isActive("heading", { level: 5 }),
+    command: () => toggleHeadingFive(editor),
+    icon: Heading5,
+  }) as const satisfies EditorMenuItem;
+
+export const HeadingSixItem = (editor: Editor) =>
+  ({
+    key: "h6",
+    name: "Heading 6",
+    isActive: () => editor.isActive("heading", { level: 6 }),
+    command: () => toggleHeadingSix(editor),
+    icon: Heading6,
+  }) as const satisfies EditorMenuItem;
+
 export const BoldItem = (editor: Editor) =>
   ({
-    name: "bold",
+    key: "bold",
+    name: "Bold",
     isActive: () => editor?.isActive("bold"),
     command: () => toggleBold(editor),
     icon: BoldIcon,
@@ -76,7 +125,8 @@ export const BoldItem = (editor: Editor) =>
 
 export const ItalicItem = (editor: Editor) =>
   ({
-    name: "italic",
+    key: "italic",
+    name: "Italic",
     isActive: () => editor?.isActive("italic"),
     command: () => toggleItalic(editor),
     icon: ItalicIcon,
@@ -84,7 +134,8 @@ export const ItalicItem = (editor: Editor) =>
 
 export const UnderLineItem = (editor: Editor) =>
   ({
-    name: "underline",
+    key: "underline",
+    name: "Underline",
     isActive: () => editor?.isActive("underline"),
     command: () => toggleUnderline(editor),
     icon: UnderlineIcon,
@@ -92,7 +143,8 @@ export const UnderLineItem = (editor: Editor) =>
 
 export const StrikeThroughItem = (editor: Editor) =>
   ({
-    name: "strike",
+    key: "strikethrough",
+    name: "Strikethrough",
     isActive: () => editor?.isActive("strike"),
     command: () => toggleStrike(editor),
     icon: StrikethroughIcon,
@@ -100,47 +152,53 @@ export const StrikeThroughItem = (editor: Editor) =>
 
 export const BulletListItem = (editor: Editor) =>
   ({
-    name: "bullet-list",
+    key: "bulleted-list",
+    name: "Bulleted list",
     isActive: () => editor?.isActive("bulletList"),
     command: () => toggleBulletList(editor),
     icon: ListIcon,
   }) as const satisfies EditorMenuItem;
 
-export const TodoListItem = (editor: Editor) =>
-  ({
-    name: "To-do List",
-    isActive: () => editor.isActive("taskItem"),
-    command: () => toggleTaskList(editor),
-    icon: CheckSquare,
-  }) as const satisfies EditorMenuItem;
-
-export const CodeItem = (editor: Editor) =>
-  ({
-    name: "code",
-    isActive: () => editor?.isActive("code") || editor?.isActive("codeBlock"),
-    command: () => toggleCodeBlock(editor),
-    icon: CodeIcon,
-  }) as const satisfies EditorMenuItem;
-
 export const NumberedListItem = (editor: Editor) =>
   ({
-    name: "ordered-list",
+    key: "numbered-list",
+    name: "Numbered list",
     isActive: () => editor?.isActive("orderedList"),
     command: () => toggleOrderedList(editor),
     icon: ListOrderedIcon,
   }) as const satisfies EditorMenuItem;
 
+export const TodoListItem = (editor: Editor) =>
+  ({
+    key: "to-do-list",
+    name: "To-do list",
+    isActive: () => editor.isActive("taskItem"),
+    command: () => toggleTaskList(editor),
+    icon: CheckSquare,
+  }) as const satisfies EditorMenuItem;
+
 export const QuoteItem = (editor: Editor) =>
   ({
-    name: "quote",
+    key: "quote",
+    name: "Quote",
     isActive: () => editor?.isActive("blockquote"),
     command: () => toggleBlockquote(editor),
     icon: QuoteIcon,
   }) as const satisfies EditorMenuItem;
 
+export const CodeItem = (editor: Editor) =>
+  ({
+    key: "code",
+    name: "Code",
+    isActive: () => editor?.isActive("code") || editor?.isActive("codeBlock"),
+    command: () => toggleCodeBlock(editor),
+    icon: CodeIcon,
+  }) as const satisfies EditorMenuItem;
+
 export const TableItem = (editor: Editor) =>
   ({
-    name: "table",
+    key: "table",
+    name: "Table",
     isActive: () => editor?.isActive("table"),
     command: () => insertTableCommand(editor),
     icon: TableIcon,
@@ -148,7 +206,8 @@ export const TableItem = (editor: Editor) =>
 
 export const ImageItem = (editor: Editor, uploadFile: UploadImage) =>
   ({
-    name: "image",
+    key: "image",
+    name: "Image",
     isActive: () => editor?.isActive("image"),
     command: (savedSelection: Selection | null) => insertImageCommand(editor, uploadFile, savedSelection),
     icon: ImageIcon,
@@ -159,9 +218,13 @@ export function getEditorMenuItems(editor: Editor | null, uploadFile: UploadImag
     return [];
   }
   return [
+    TextItem(editor),
     HeadingOneItem(editor),
     HeadingTwoItem(editor),
     HeadingThreeItem(editor),
+    HeadingFourItem(editor),
+    HeadingFiveItem(editor),
+    HeadingSixItem(editor),
     BoldItem(editor),
     ItalicItem(editor),
     UnderLineItem(editor),
@@ -177,7 +240,7 @@ export function getEditorMenuItems(editor: Editor | null, uploadFile: UploadImag
 }
 
 export type EditorMenuItemNames = ReturnType<typeof getEditorMenuItems> extends (infer U)[]
-  ? U extends { name: infer N }
+  ? U extends { key: infer N }
     ? N
     : never
   : never;

packages/editor/document-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/document-editor",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Package that powers Plane's Pages Editor",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",

packages/editor/document-editor/src/ui/index.tsx

@@ -31,7 +31,7 @@ interface IDocumentEditor {
     suggestions: () => Promise<IMentionSuggestion[]>;
   };
   tabIndex?: number;
-  placeholder?: string | ((isFocused: boolean) => string);
+  placeholder?: string | ((isFocused: boolean, value: string) => string);
 }
 
 const DocumentEditor = (props: IDocumentEditor) => {

packages/editor/document-editor/src/ui/menu/block-menu.tsx

@@ -67,11 +67,13 @@ export default function BlockMenu(props: BlockMenuProps) {
       popup.current?.hide();
     };
     document.addEventListener("click", handleClickDragHandle);
+    document.addEventListener("contextmenu", handleClickDragHandle);
     document.addEventListener("keydown", handleKeyDown);
     document.addEventListener("scroll", handleScroll, true); // Using capture phase
 
     return () => {
       document.removeEventListener("click", handleClickDragHandle);
+      document.removeEventListener("contextmenu", handleClickDragHandle);
       document.removeEventListener("keydown", handleKeyDown);
       document.removeEventListener("scroll", handleScroll, true);
     };

packages/editor/extensions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-extensions",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Package that powers Plane's Editor with extensions",
   "private": true,
   "main": "./dist/index.mjs",

packages/editor/extensions/src/extensions/drag-drop.tsx

@@ -225,6 +225,9 @@ function DragHandle(options: DragHandleOptions) {
       dragHandleElement.addEventListener("click", (e) => {
         handleClick(e, view);
       });
+      dragHandleElement.addEventListener("contextmenu", (e) => {
+        handleClick(e, view);
+      });
 
       dragHandleElement.addEventListener("drag", (e) => {
         hideDragHandle();

packages/editor/lite-text-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/lite-text-editor",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Package that powers Plane's Comment Editor",
   "private": true,
   "main": "./dist/index.mjs",

packages/editor/lite-text-editor/src/ui/index.tsx

@@ -32,7 +32,8 @@ export interface ILiteTextEditor {
     suggestions?: () => Promise<IMentionSuggestion[]>;
   };
   tabIndex?: number;
-  placeholder?: string | ((isFocused: boolean) => string);
+  placeholder?: string | ((isFocused: boolean, value: string) => string);
+  id?: string;
 }
 
 const LiteTextEditor = (props: ILiteTextEditor) => {
@@ -48,12 +49,14 @@ const LiteTextEditor = (props: ILiteTextEditor) => {
     tabIndex,
     mentionHandler,
     placeholder = "Add comment...",
+    id = "",
   } = props;
 
   const editor = useEditor({
     onChange,
     initialValue,
     value,
+    id,
     editorClassName,
     restoreFile: fileHandler.restore,
     uploadFile: fileHandler.upload,

packages/editor/rich-text-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/rich-text-editor",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Rich Text Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",

packages/editor/rich-text-editor/src/ui/index.tsx

@@ -35,7 +35,7 @@ export type IRichTextEditor = {
     highlights: () => Promise<IMentionHighlight[]>;
     suggestions: () => Promise<IMentionSuggestion[]>;
   };
-  placeholder?: string | ((isFocused: boolean) => string);
+  placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
 };
 

packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx

@@ -15,6 +15,7 @@ import {
 } from "@plane/editor-core";
 
 export interface BubbleMenuItem {
+  key: string;
   name: string;
   isActive: () => boolean;
   command: () => void;

packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx

@@ -8,9 +8,13 @@ import {
   QuoteItem,
   CodeItem,
   TodoListItem,
+  TextItem,
+  HeadingFourItem,
+  HeadingFiveItem,
+  HeadingSixItem,
 } from "@plane/editor-core";
 import { Editor } from "@tiptap/react";
-import { Check, ChevronDown, TextIcon } from "lucide-react";
+import { Check, ChevronDown } from "lucide-react";
 import { Dispatch, FC, SetStateAction } from "react";
 
 import { BubbleMenuItem } from ".";
@@ -23,18 +27,16 @@ interface NodeSelectorProps {
 
 export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
   const items: BubbleMenuItem[] = [
-    {
-      name: "Text",
-      icon: TextIcon,
-      command: () => editor.chain().focus().clearNodes().run(),
-      isActive: () => editor.isActive("paragraph") && !editor.isActive("bulletList") && !editor.isActive("orderedList"),
-    },
+    TextItem(editor),
     HeadingOneItem(editor),
     HeadingTwoItem(editor),
     HeadingThreeItem(editor),
-    TodoListItem(editor),
+    HeadingFourItem(editor),
+    HeadingFiveItem(editor),
+    HeadingSixItem(editor),
     BulletListItem(editor),
     NumberedListItem(editor),
+    TodoListItem(editor),
     QuoteItem(editor),
     CodeItem(editor),
   ];
@@ -58,7 +60,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
       </button>
 
       {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">
           {items.map((item) => (
             <button
               key={item.name}
@@ -69,19 +71,17 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
                 e.stopPropagation();
               }}
               className={cn(
-                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
+                "flex items-center justify-between rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-custom-background-80",
                 {
-                  "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name,
+                  "bg-custom-background-80": activeItem.name === item.name,
                 }
               )}
             >
               <div className="flex items-center space-x-2">
-                <div className="rounded-sm border border-custom-border-300 p-1">
-                  <item.icon className="h-3 w-3" />
-                </div>
+                <item.icon className="size-3 flex-shrink-0" />
                 <span>{item.name}</span>
               </div>
-              {activeItem.name === item.name && <Check className="h-4 w-4" />}
+              {activeItem.name === item.name && <Check className="size-3 text-custom-text-300 flex-shrink-0" />}
             </button>
           ))}
         </section>

packages/eslint-config-custom/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-custom",
   "private": true,
-  "version": "0.18.0",
+  "version": "0.19.0",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {},

packages/tailwind-config-custom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-config-custom",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
   "private": true,

packages/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsconfig",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "private": true,
   "files": [
     "base.json",

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/types",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "private": true,
   "main": "./src/index.d.ts"
 }

packages/types/src/inbox.d.ts

@@ -20,7 +20,7 @@ export type TInboxIssueCurrentTab = EInboxIssueCurrentTab;
 export type TInboxIssueStatus = EInboxIssueStatus;
 
 // filters
-export type TInboxIssueFilterMemberKeys = "assignee" | "created_by";
+export type TInboxIssueFilterMemberKeys = "assignees" | "created_by";
 
 export type TInboxIssueFilterDateKeys = "created_at" | "updated_at";
 

packages/types/src/pages.d.ts

@@ -16,14 +16,9 @@ export type TPage = {
   project: string | undefined;
   updated_at: Date | undefined;
   updated_by: string | undefined;
-  view_props: TPageViewProps | undefined;
   workspace: string | undefined;
 };
 
-export type TPageViewProps = {
-  full_width?: boolean;
-};
-
 // page filters
 export type TPageNavigationTabs = "public" | "private" | "archived";
 

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@plane/ui",
   "description": "UI components shared across multiple apps internally",
   "private": true,
-  "version": "0.18.0",
+  "version": "0.19.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

packages/ui/src/avatar/avatar-group.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 // ui
 import { Tooltip } from "../tooltip";
+// helpers
+import { cn } from "../../helpers";
 // types
 import { TAvatarSize, getSizeInfo, isAValidNumber } from "./avatar";
 
@@ -55,7 +57,7 @@ export const AvatarGroup: React.FC<Props> = (props) => {
   const sizeInfo = getSizeInfo(size);
 
   return (
-    <div className={`flex ${sizeInfo.spacing}`}>
+    <div className={cn("flex", sizeInfo.spacing)}>
       {avatarsWithUpdatedProps.map((avatar, index) => (
         <div key={index} className="rounded-full ring-1 ring-custom-background-100">
           {avatar}
@@ -64,9 +66,12 @@ export const AvatarGroup: React.FC<Props> = (props) => {
       {maxAvatarsToRender < totalAvatars && (
         <Tooltip tooltipContent={`${totalAvatars} total`} disabled={!showTooltip}>
           <div
-            className={`${
-              !isAValidNumber(size) ? sizeInfo.avatarSize : ""
-            } grid place-items-center rounded-full bg-custom-primary-10 text-[9px] text-custom-primary-100 ring-1 ring-custom-background-100`}
+            className={cn(
+              "grid place-items-center rounded-full bg-custom-primary-10 text-[9px] text-custom-primary-100 ring-1 ring-custom-background-100",
+              {
+                [sizeInfo.avatarSize]: !isAValidNumber(size),
+              }
+            )}
             style={
               isAValidNumber(size)
                 ? {

packages/ui/src/avatar/avatar.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 // ui
 import { Tooltip } from "../tooltip";
+// helpers
+import { cn } from "../../helpers";
 
 export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
 
@@ -130,9 +132,9 @@ export const Avatar: React.FC<Props> = (props) => {
   return (
     <Tooltip tooltipContent={fallbackText ?? name ?? "?"} disabled={!showTooltip}>
       <div
-        className={`${
-          !isAValidNumber(size) ? sizeInfo.avatarSize : ""
-        } grid place-items-center overflow-hidden ${getBorderRadius(shape)}`}
+        className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
+          [sizeInfo.avatarSize]: !isAValidNumber(size),
+        })}
         style={
           isAValidNumber(size)
             ? {
@@ -144,12 +146,15 @@ export const Avatar: React.FC<Props> = (props) => {
         tabIndex={-1}
       >
         {src ? (
-          <img src={src} className={`h-full w-full ${getBorderRadius(shape)} ${className}`} alt={name} />
+          <img src={src} className={cn("h-full w-full", getBorderRadius(shape), className)} alt={name} />
         ) : (
           <div
-            className={`${sizeInfo.fontSize} grid h-full w-full place-items-center ${getBorderRadius(
-              shape
-            )} ${className}`}
+            className={cn(
+              sizeInfo.fontSize,
+              "grid h-full w-full place-items-center",
+              getBorderRadius(shape),
+              className
+            )}
             style={{
               backgroundColor: fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
               color: fallbackTextColor ?? "#ffffff",

packages/ui/src/badge/badge.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
-
+// helpers
 import { getIconStyling, getBadgeStyling, TBadgeVariant, TBadgeSizes } from "./helper";
+import { cn } from "../../helpers";
 
 export interface BadgeProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: TBadgeVariant;
@@ -31,7 +32,7 @@ const Badge = React.forwardRef<HTMLButtonElement, BadgeProps>((props, ref) => {
   const buttonIconStyle = getIconStyling(size);
 
   return (
-    <button ref={ref} type={type} className={`${buttonStyle} ${className}`} disabled={disabled || loading} {...rest}>
+    <button ref={ref} type={type} className={cn(buttonStyle, className)} disabled={disabled || loading} {...rest}>
       {prependIcon && <div className={buttonIconStyle}>{React.cloneElement(prependIcon, { strokeWidth: 2 })}</div>}
       {children}
       {appendIcon && <div className={buttonIconStyle}>{React.cloneElement(appendIcon, { strokeWidth: 2 })}</div>}

packages/ui/src/button/toggle-switch.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
-
 import { Switch } from "@headlessui/react";
+// helpers
+import { cn } from "../../helpers";
 
 interface IToggleSwitchProps {
   value: boolean;
@@ -19,22 +20,32 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
       checked={value}
       disabled={disabled}
       onChange={onChange}
-      className={`relative inline-flex flex-shrink-0 ${
-        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
-      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
-        value ? "bg-custom-primary-100" : "bg-gray-700"
-      } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
+      className={cn(
+        "relative inline-flex flex-shrink-0 h-6 w-10 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none bg-gray-700",
+        {
+          "h-4 w-6": size === "sm",
+          "h-5 w-8": size === "md",
+          "bg-custom-primary-100": value,
+          "cursor-not-allowed": disabled,
+        },
+        className
+      )}
     >
       <span className="sr-only">{label}</span>
       <span
         aria-hidden="true"
-        className={`inline-block self-center ${
-          size === "sm" ? "h-2 w-2" : size === "md" ? "h-3 w-3" : "h-4 w-4"
-        } transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
-          value
-            ? (size === "sm" ? "translate-x-3" : size === "md" ? "translate-x-4" : "translate-x-5") + " bg-white"
-            : "translate-x-0.5 bg-custom-background-90"
-        } ${disabled ? "cursor-not-allowed" : ""}`}
+        className={cn(
+          "inline-block self-center h-4 w-4 transform rounded-full shadow ring-0 transition duration-200 ease-in-out",
+          {
+            "translate-x-5 bg-white": value,
+            "h-2 w-2": size === "sm",
+            "h-3 w-3": size === "md",
+            "translate-x-3": value && size === "sm",
+            "translate-x-4": value && size === "md",
+            "translate-x-0.5 bg-custom-background-90": !value,
+            "cursor-not-allowed": disabled,
+          }
+        )}
       />
     </Switch>
   );

packages/ui/src/control-link/control-link.tsx

@@ -6,10 +6,11 @@ export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   children: React.ReactNode;
   target?: string;
   disabled?: boolean;
+  className?: string;
 };
 
-export const ControlLink: React.FC<TControlLink> = (props) => {
-  const { href, onClick, children, target = "_self", disabled = false, ...rest } = props;
+export const ControlLink = React.forwardRef<HTMLAnchorElement, TControlLink>((props, ref) => {
+  const { href, onClick, children, target = "_self", disabled = false, className, ...rest } = props;
   const LEFT_CLICK_EVENT_CODE = 0;
 
   const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -20,11 +21,20 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
     }
   };
 
+  // if disabled but still has a ref or a className then it has to be rendered without a href
+  if (disabled && (ref || className))
+    return (
+      <a ref={ref} className={className}>
+        {children}
+      </a>
+    );
+
+  // else if just disabled return without the parent wrapper
   if (disabled) return <>{children}</>;
 
   return (
-    <a href={href} target={target} onClick={handleOnClick} {...rest}>
+    <a href={href} target={target} onClick={handleOnClick} {...rest} ref={ref} className={className}>
       {children}
     </a>
   );
-};
+});

packages/ui/src/dropdowns/context-menu/index.ts

@@ -0,0 +1,2 @@
+export * from "./item";
+export * from "./root";

packages/ui/src/dropdowns/context-menu/item.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+// helpers
+import { cn } from "../../../helpers";
+// types
+import { TContextMenuItem } from "./root";
+
+type ContextMenuItemProps = {
+  handleActiveItem: () => void;
+  handleClose: () => void;
+  isActive: boolean;
+  item: TContextMenuItem;
+};
+
+export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
+  const { handleActiveItem, handleClose, isActive, item } = props;
+
+  if (item.shouldRender === false) return null;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "w-full flex items-center gap-2 px-1 py-1.5 text-left text-custom-text-200 rounded text-xs select-none",
+        {
+          "bg-custom-background-90": isActive,
+          "text-custom-text-400": item.disabled,
+        },
+        item.className
+      )}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        item.action();
+        if (item.closeOnClick !== false) handleClose();
+      }}
+      onMouseEnter={handleActiveItem}
+      disabled={item.disabled}
+    >
+      {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+      <div>
+        <h5>{item.title}</h5>
+        {item.description && (
+          <p
+            className={cn("text-custom-text-300 whitespace-pre-line", {
+              "text-custom-text-400": item.disabled,
+            })}
+          >
+            {item.description}
+          </p>
+        )}
+      </div>
+    </button>
+  );
+};

packages/ui/src/dropdowns/context-menu/root.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+// components
+import { ContextMenuItem } from "./item";
+// helpers
+import { cn } from "../../../helpers";
+// hooks
+import useOutsideClickDetector from "../../hooks/use-outside-click-detector";
+
+export type TContextMenuItem = {
+  key: string;
+  title: string;
+  description?: string;
+  icon?: React.FC<any>;
+  action: () => void;
+  shouldRender?: boolean;
+  closeOnClick?: boolean;
+  disabled?: boolean;
+  className?: string;
+  iconClassName?: string;
+};
+
+type ContextMenuProps = {
+  parentRef: React.RefObject<HTMLElement>;
+  items: TContextMenuItem[];
+};
+
+const ContextMenuWithoutPortal: React.FC<ContextMenuProps> = (props) => {
+  const { parentRef, items } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+  });
+  const [activeItemIndex, setActiveItemIndex] = useState<number>(0);
+  // refs
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+  // derived values
+  const renderedItems = items.filter((item) => item.shouldRender !== false);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setActiveItemIndex(0);
+  };
+
+  // calculate position of context menu
+  useEffect(() => {
+    const parentElement = parentRef.current;
+    const contextMenu = contextMenuRef.current;
+    if (!parentElement || !contextMenu) return;
+
+    const handleContextMenu = (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const contextMenuWidth = contextMenu.clientWidth;
+      const contextMenuHeight = contextMenu.clientHeight;
+
+      const clickX = e?.pageX || 0;
+      const clickY = e?.pageY || 0;
+
+      // check if there's enough space at the bottom, otherwise show at the top
+      let top = clickY;
+      if (clickY + contextMenuHeight > window.innerHeight) top = clickY - contextMenuHeight;
+
+      // check if there's enough space on the right, otherwise show on the left
+      let left = clickX;
+      if (clickX + contextMenuWidth > window.innerWidth) left = clickX - contextMenuWidth;
+
+      setPosition({ x: left, y: top });
+      setIsOpen(true);
+    };
+
+    const hideContextMenu = (e: KeyboardEvent) => {
+      if (isOpen && e.key === "Escape") handleClose();
+    };
+
+    parentElement.addEventListener("contextmenu", handleContextMenu);
+    window.addEventListener("keydown", hideContextMenu);
+
+    return () => {
+      parentElement.removeEventListener("contextmenu", handleContextMenu);
+      window.removeEventListener("keydown", hideContextMenu);
+    };
+  }, [contextMenuRef, isOpen, parentRef, setIsOpen, setPosition]);
+
+  // handle keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!isOpen) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveItemIndex((prev) => (prev + 1) % renderedItems.length);
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveItemIndex((prev) => (prev - 1 + renderedItems.length) % renderedItems.length);
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const item = renderedItems[activeItemIndex];
+        if (!item.disabled) {
+          renderedItems[activeItemIndex].action();
+          if (item.closeOnClick !== false) handleClose();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [activeItemIndex, isOpen, renderedItems, setIsOpen]);
+
+  // close on clicking outside
+  useOutsideClickDetector(contextMenuRef, handleClose);
+
+  return (
+    <div
+      className={cn(
+        "fixed h-screen w-screen top-0 left-0 cursor-default z-20 opacity-0 pointer-events-none transition-opacity",
+        {
+          "opacity-100 pointer-events-auto": isOpen,
+        }
+      )}
+    >
+      <div
+        ref={contextMenuRef}
+        className="fixed border-[0.5px] border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-rg rounded-md px-2 py-2.5 max-h-72 min-w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
+        style={{
+          top: position.y,
+          left: position.x,
+        }}
+      >
+        {renderedItems.map((item, index) => (
+          <ContextMenuItem
+            key={item.key}
+            handleActiveItem={() => setActiveItemIndex(index)}
+            handleClose={handleClose}
+            isActive={index === activeItemIndex}
+            item={item}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
+  let contextMenu = <ContextMenuWithoutPortal {...props} />;
+  const portal = document.querySelector("#context-menu-portal");
+  if (portal) contextMenu = ReactDOM.createPortal(contextMenu, portal);
+  return contextMenu;
+};

packages/ui/src/dropdowns/index.ts

@@ -1,3 +1,4 @@
+export * from "./context-menu";
 export * from "./custom-menu";
 export * from "./custom-select";
 export * from "./custom-search-select";

packages/ui/src/form-fields/checkbox.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+// helpers
+import { cn } from "../../helpers";
 
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
   intermediate?: boolean;
@@ -9,32 +11,30 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
   const { id, name, checked, intermediate = false, disabled, className = "", ...rest } = props;
 
   return (
-    <div className={`relative w-full flex gap-2 ${className}`}>
+    <div className={cn("relative w-full flex gap-2", className)}>
       <input
         id={id}
         ref={ref}
         type="checkbox"
         name={name}
         checked={checked}
-        className={`
-          appearance-none shrink-0 w-4 h-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50
-          ${
-            disabled
-              ? "border-custom-border-200 bg-custom-background-80 cursor-not-allowed"
-              : `cursor-pointer ${
-                  checked || intermediate
-                    ? "border-custom-primary-40 bg-custom-primary-100 hover:bg-custom-primary-200"
-                    : "border-custom-border-300 hover:border-custom-border-400 bg-white"
-                }`
+        className={cn(
+          "appearance-none shrink-0 w-4 h-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50",
+          {
+            "border-custom-border-200 bg-custom-background-80 cursor-not-allowed": disabled,
+            "cursor-pointer border-custom-border-300 hover:border-custom-border-400 bg-white": !disabled,
+            "border-custom-primary-40 bg-custom-primary-100 hover:bg-custom-primary-200":
+              !disabled && (checked || intermediate),
           }
-        `}
+        )}
         disabled={disabled}
         {...rest}
       />
       <svg
-        className={`absolute w-4 h-4 p-0.5 pointer-events-none outline-none ${
-          disabled ? "stroke-custom-text-400 opacity-40" : "stroke-white"
-        } ${checked ? "block" : "hidden"}`}
+        className={cn("absolute w-4 h-4 p-0.5 pointer-events-none outline-none hidden stroke-white", {
+          block: checked,
+          "stroke-custom-text-400 opacity-40": disabled,
+        })}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         fill="none"
@@ -46,9 +46,10 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
         <polyline points="20 6 9 17 4 12" />
       </svg>
       <svg
-        className={`absolute w-4 h-4 p-0.5 pointer-events-none outline-none ${
-          disabled ? "stroke-custom-text-400 opacity-40" : "stroke-white"
-        } ${intermediate && !checked ? "block" : "hidden"}`}
+        className={cn("absolute w-4 h-4 p-0.5 pointer-events-none outline-none stroke-white hidden", {
+          "stroke-custom-text-400 opacity-40": disabled,
+          block: intermediate && !checked,
+        })}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 8 8"
         fill="none"

packages/ui/src/form-fields/input-color-picker.tsx

@@ -5,6 +5,8 @@ import { ColorResult, SketchPicker } from "react-color";
 import { Input } from "./input";
 import { usePopper } from "react-popper";
 import { Button } from "../button";
+// helpers
+import { cn } from "../../helpers";
 
 export interface InputColorPickerProps {
   hasError: boolean;
@@ -45,7 +47,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
         onChange={handleInputChange}
         hasError={hasError}
         placeholder={placeholder}
-        className={`border-[0.5px] border-custom-border-200 ${className}`}
+        className={cn("border-[0.5px] border-custom-border-200", className)}
         style={style}
       />
 

packages/ui/src/form-fields/input.tsx

@@ -19,15 +19,16 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       type={type}
       name={name}
       className={cn(
-        `block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none ${
-          mode === "primary"
-            ? "rounded-md border-[0.5px] border-custom-border-200"
-            : mode === "transparent"
-              ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
-              : mode === "true-transparent"
-                ? "rounded border-none bg-transparent ring-0"
-                : ""
-        } ${hasError ? "border-red-500" : ""} ${inputSize === "sm" ? "px-3 py-2" : inputSize === "md" ? "p-3" : ""}`,
+        "block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none",
+        {
+          "rounded-md border-[0.5px] border-custom-border-200": mode === "primary",
+          "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":
+            mode === "transparent",
+          "rounded border-none bg-transparent ring-0": mode === "true-transparent",
+          "border-red-500": hasError,
+          "px-3 py-2": inputSize === "sm",
+          "p-3": inputSize === "md",
+        },
         className
       )}
       {...rest}

packages/ui/src/form-fields/textarea.tsx

@@ -15,7 +15,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
   // refs
   const textAreaRef = useRef<any>(ref);
   // auto re-size
-  useAutoResizeTextArea(textAreaRef);
+  useAutoResizeTextArea(textAreaRef, value);
 
   return (
     <textarea

packages/ui/src/hooks/use-auto-resize-textarea.ts

@@ -1,24 +1,16 @@
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 
-export const useAutoResizeTextArea = (textAreaRef: React.RefObject<HTMLTextAreaElement>) => {
-  useEffect(() => {
+export const useAutoResizeTextArea = (
+  textAreaRef: React.RefObject<HTMLTextAreaElement>,
+  value: string | number | readonly string[]
+) => {
+  useLayoutEffect(() => {
     const textArea = textAreaRef.current;
     if (!textArea) return;
 
-    const resizeTextArea = () => {
-      textArea.style.height = "auto";
-      const computedHeight = textArea.scrollHeight + "px";
-      textArea.style.height = computedHeight;
-    };
-
-    const handleInput = () => resizeTextArea();
-
-    // resize on mount
-    resizeTextArea();
-
-    textArea.addEventListener("input", handleInput);
-    return () => {
-      textArea.removeEventListener("input", handleInput);
-    };
-  }, [textAreaRef]);
+    // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+    textArea.style.height = "0px";
+    const scrollHeight = textArea.scrollHeight;
+    textArea.style.height = scrollHeight + "px";
+  }, [textAreaRef, value]);
 };

packages/ui/src/icons/admin-profile-icon.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const AdminProfileIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" strokeLinecap="round" strokeLinejoin="round" />
-    <path
-      d="M8 19V18C8 16.9391 8.42143 15.9217 9.17157 15.1716C9.92172 14.4214 10.9391 14 12 14C13.0609 14 14.0783 14.4214 14.8284 15.1716C15.5786 15.9217 16 16.9391 16 18V19"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M12 14C13.6569 14 15 12.6569 15 11C15 9.34315 13.6569 8 12 8C10.3431 8 9 9.34315 9 11C9 12.6569 10.3431 14 12 14Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);

packages/ui/src/icons/copy-icon.tsx

@@ -1,25 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const CopyIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M20 8H10C8.89543 8 8 8.89543 8 10V20C8 21.1046 8.89543 22 10 22H20C21.1046 22 22 21.1046 22 20V10C22 8.89543 21.1046 8 20 8Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M4 16C2.9 16 2 15.1 2 14V4C2 2.9 2.9 2 4 2H14C15.1 2 16 2.9 16 4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);

packages/ui/src/icons/external-link-icon.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const ExternalLinkIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-[1.5]`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path d="M15 3H21V9" strokeLinecap="round" strokeLinejoin="round" />
-    <path d="M10 14L21 3" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);

packages/ui/src/icons/index.ts

@@ -1,27 +1,22 @@
-export * from "./user-group-icon";
-export * from "./dice-icon";
-export * from "./layers-icon";
-export * from "./photo-filter-icon";
-export * from "./archive-icon";
-export * from "./admin-profile-icon";
-export * from "./create-icon";
-export * from "./subscribe-icon";
-export * from "./external-link-icon";
-export * from "./copy-icon";
-export * from "./layer-stack";
-export * from "./side-panel-icon";
-export * from "./center-panel-icon";
-export * from "./full-screen-panel-icon";
-export * from "./priority-icon";
+export * from "./cycle";
+export * from "./module";
 export * from "./state";
+export * from "./archive-icon";
 export * from "./blocked-icon";
 export * from "./blocker-icon";
-export * from "./related-icon";
-export * from "./module";
-export * from "./cycle";
-export * from "./github-icon";
-export * from "./discord-icon";
-export * from "./transfer-icon";
-export * from "./running-icon";
-export * from "./calendar-before-icon";
 export * from "./calendar-after-icon";
+export * from "./calendar-before-icon";
+export * from "./center-panel-icon";
+export * from "./create-icon";
+export * from "./dice-icon";
+export * from "./discord-icon";
+export * from "./full-screen-panel-icon";
+export * from "./github-icon";
+export * from "./layer-stack";
+export * from "./layers-icon";
+export * from "./photo-filter-icon";
+export * from "./priority-icon";
+export * from "./related-icon";
+export * from "./side-panel-icon";
+export * from "./transfer-icon";
+export * from "./user-group-icon";

packages/ui/src/icons/running-icon.tsx

@@ -1,9 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const RunningIcon: React.FC<ISvgIcons> = ({ className = "fill-current", ...rest }) => (
-  <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <path d="M4.05 12L3.2625 11.2125L10.9125 3.5625H8.25V5.0625H7.125V2.4375H11.3063C11.4813 2.4375 11.65 2.46875 11.8125 2.53125C11.975 2.59375 12.1188 2.6875 12.2438 2.8125L14.4938 5.04375C14.8563 5.40625 15.275 5.68125 15.75 5.86875C16.225 6.05625 16.725 6.1625 17.25 6.1875V7.3125C16.6 7.2875 15.975 7.16563 15.375 6.94688C14.775 6.72813 14.25 6.3875 13.8 5.925L12.9375 5.0625L10.8 7.2L12.4125 8.8125L7.8375 11.4563L7.275 10.4813L10.575 8.56875L9.0375 7.03125L4.05 12ZM2.25 6.75V5.625H6V6.75H2.25ZM0.75 4.3125V3.1875H4.5V4.3125H0.75ZM14.8125 2.8125C14.45 2.8125 14.1406 2.68438 13.8844 2.42813C13.6281 2.17188 13.5 1.8625 13.5 1.5C13.5 1.1375 13.6281 0.828125 13.8844 0.571875C14.1406 0.315625 14.45 0.1875 14.8125 0.1875C15.175 0.1875 15.4844 0.315625 15.7406 0.571875C15.9969 0.828125 16.125 1.1375 16.125 1.5C16.125 1.8625 15.9969 2.17188 15.7406 2.42813C15.4844 2.68438 15.175 2.8125 14.8125 2.8125ZM2.25 1.875V0.75H6V1.875H2.25Z" />
-  </svg>
-);

packages/ui/src/icons/subscribe-icon.tsx

@@ -1,30 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const SubscribeIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M15 5.1C15 4.54305 15.2107 4.0089 15.5858 3.61508C15.9609 3.22125 16.4696 3 17 3C17.5304 3 18.0391 3.22125 18.4142 3.61508C18.7893 4.0089 19 4.54305 19 5.1C19 7.55 20 8.25 20 8.25H14C14 8.25 15 7.55 15 5.1Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M16.25 11C16.3238 11 16.4324 11 16.5643 11C16.6963 11 16.8467 11 17 11C17.1533 11 17.3037 11 17.4357 11C17.5676 11 17.6762 11 17.75 11"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);

packages/ui/src/loader.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+// helpers
+import { cn } from "../helpers";
 
 type Props = {
   children: React.ReactNode;
@@ -6,7 +8,7 @@ type Props = {
 };
 
 const Loader = ({ children, className = "" }: Props) => (
-  <div className={`${className} animate-pulse`} role="status">
+  <div className={cn("animate-pulse", className)} role="status">
     {children}
   </div>
 );

packages/ui/src/spinners/circular-spinner.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+// helpers
+import { cn } from "../../helpers";
 
 export interface ISpinner extends React.SVGAttributes<SVGElement> {
   height?: string;
@@ -12,7 +14,7 @@ export const Spinner: React.FC<ISpinner> = ({ height = "32px", width = "32px", c
       aria-hidden="true"
       height={height}
       width={width}
-      className={`animate-spin fill-blue-600 text-custom-text-200 ${className}`}
+      className={cn("animate-spin fill-blue-600 text-custom-text-200", className)}
       viewBox="0 0 100 101"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

packages/ui/src/tooltip/tooltip.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-
-// next-themes
 import { Tooltip2 } from "@blueprintjs/popover2";
+// helpers
+import { cn } from "../../helpers";
 
 export type TPosition =
   | "top"
@@ -49,9 +49,13 @@ export const Tooltip: React.FC<ITooltipProps> = ({
     hoverCloseDelay={closeDelay}
     content={
       <div
-        className={`relative ${
-          isMobile ? "hidden" : "block"
-        } z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md ${className}`}
+        className={cn(
+          "relative block z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md",
+          {
+            hidden: isMobile,
+          },
+          className
+        )}
       >
         {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
         {tooltipContent}

space/components/editor/rich-text-read-only-editor.tsx

@@ -18,7 +18,7 @@ export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Ric
         mentionHandler={{ highlights: mentionHighlights }}
         {...props}
         // overriding the customClassName to add relative class passed
-        containerClassName={cn(props.containerClassName, "relative border border-custom-border-200 p-3")}
+        containerClassName={cn("relative p-0 border-none", props.containerClassName)}
       />
     );
   }

space/constants/editor.ts

@@ -4,6 +4,9 @@ import {
   Heading1,
   Heading2,
   Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
   Image,
   Italic,
   List,
@@ -29,14 +32,17 @@ export type ToolbarMenuItem = {
 };
 
 export const BASIC_MARK_ITEMS: ToolbarMenuItem[] = [
-  { key: "H1", name: "Heading 1", icon: Heading1, editors: ["document"] },
-  { key: "H2", name: "Heading 2", icon: Heading2, editors: ["document"] },
-  { key: "H3", name: "Heading 3", icon: Heading3, editors: ["document"] },
+  { key: "h1", name: "Heading 1", icon: Heading1, editors: ["document"] },
+  { key: "h2", name: "Heading 2", icon: Heading2, editors: ["document"] },
+  { key: "h3", name: "Heading 3", icon: Heading3, editors: ["document"] },
+  { key: "h4", name: "Heading 4", icon: Heading4, editors: ["document"] },
+  { key: "h5", name: "Heading 5", icon: Heading5, editors: ["document"] },
+  { key: "h6", name: "Heading 6", icon: Heading6, editors: ["document"] },
   { key: "bold", name: "Bold", icon: Bold, shortcut: ["Cmd", "B"], editors: ["lite", "document"] },
   { key: "italic", name: "Italic", icon: Italic, shortcut: ["Cmd", "I"], editors: ["lite", "document"] },
   { key: "underline", name: "Underline", icon: Underline, shortcut: ["Cmd", "U"], editors: ["lite", "document"] },
   {
-    key: "strike",
+    key: "strikethrough",
     name: "Strikethrough",
     icon: Strikethrough,
     shortcut: ["Cmd", "Shift", "S"],
@@ -46,21 +52,21 @@ export const BASIC_MARK_ITEMS: ToolbarMenuItem[] = [
 
 export const LIST_ITEMS: ToolbarMenuItem[] = [
   {
-    key: "bullet-list",
+    key: "bulleted-list",
     name: "Bulleted list",
     icon: List,
     shortcut: ["Cmd", "Shift", "7"],
     editors: ["lite", "document"],
   },
   {
-    key: "ordered-list",
+    key: "numbered-list",
     name: "Numbered list",
     icon: ListOrdered,
     shortcut: ["Cmd", "Shift", "8"],
     editors: ["lite", "document"],
   },
   {
-    key: "To-do List",
+    key: "to-do-list",
     name: "To-do list",
     icon: ListTodo,
     shortcut: ["Cmd", "Shift", "9"],

space/package.json

@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",

space/pages/_document.tsx

@@ -6,6 +6,7 @@ class MyDocument extends Document {
       <Html>
         <Head />
         <body className="w-100 bg-custom-background-100 antialiased">
+          <div id="context-menu-portal" />
           <Main />
           <NextScript />
         </body>

web/components/api-token/modal/create-token-modal.tsx

@@ -111,7 +111,7 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-2xl">
                 {generatedToken ? (
                   <GeneratedTokenDetails handleClose={handleClose} tokenDetails={generatedToken} />
                 ) : (

web/components/api-token/modal/form.tsx

@@ -146,7 +146,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                 onChange={onChange}
                 hasError={Boolean(errors.description)}
                 placeholder="Token description"
-                className="h-24 w-full text-sm"
+                className="min-h-24 w-full text-sm"
               />
             )}
           />
@@ -170,8 +170,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                           {value === "custom"
                             ? "Custom date"
                             : selectedOption
-                            ? selectedOption.label
-                            : "Set expiration date"}
+                              ? selectedOption.label
+                              : "Set expiration date"}
                         </div>
                       }
                       value={value}
@@ -207,8 +207,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                     ? `Expires ${renderFormattedDate(customDate)}`
                     : null
                   : watch("expired_at")
-                  ? `Expires ${getExpiryDate(watch("expired_at") ?? "")}`
-                  : null}
+                    ? `Expires ${getExpiryDate(watch("expired_at") ?? "")}`
+                    : null}
               </span>
             )}
           </div>

web/components/api-token/modal/generated-token-details.tsx

@@ -28,8 +28,8 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
   };
 
   return (
-    <div>
-      <div className="space-y-3">
+    <div className="w-full">
+      <div className="w-full space-y-3 text-wrap">
         <h3 className="text-lg font-medium leading-6 text-custom-text-100">Key created</h3>
         <p className="text-sm text-custom-text-400">
           Copy and save this secret key in Plane Pages. You can{"'"}t see this key after you hit Close. A CSV file
@@ -39,11 +39,11 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
       <button
         type="button"
         onClick={() => copyApiToken(tokenDetails.token ?? "")}
-        className="mt-4 flex w-full items-center justify-between rounded-md border-[0.5px] border-custom-border-200 px-3 py-2 text-sm font-medium outline-none"
+        className="mt-4 flex truncate w-full items-center justify-between rounded-md border-[0.5px] border-custom-border-200 px-3 py-2 text-sm font-medium outline-none"
       >
-        {tokenDetails.token}
+        <span className="truncate pr-2">{tokenDetails.token}</span>
         <Tooltip tooltipContent="Copy secret key" isMobile={isMobile}>
-          <Copy className="h-4 w-4 text-custom-text-400" />
+          <Copy className="h-4 w-4 text-custom-text-400 flex-shrink-0" />
         </Tooltip>
       </button>
       <div className="mt-6 flex items-center justify-between">

web/components/command-palette/command-modal.tsx

@@ -178,7 +178,9 @@ export const CommandModal: React.FC = observer(() => {
                       return 0;
                     }}
                     onKeyDown={(e) => {
-                      // when search is empty and page is undefined
+                      // when search term is not empty, esc should clear the search term
+                      if (e.key === "Escape" && searchTerm) setSearchTerm("");
+
                       // when user tries to close the modal with esc
                       if (e.key === "Escape" && !page && !searchTerm) closePalette();
 

web/components/core/list/index.ts

@@ -0,0 +1,2 @@
+export * from "./list-item";
+export * from "./list-root";

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

@@ -0,0 +1,56 @@
+import React, { FC } from "react";
+import Link from "next/link";
+// ui
+import { Tooltip } from "@plane/ui";
+
+interface IListItemProps {
+  title: string;
+  itemLink: string;
+  onItemClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+  prependTitleElement?: JSX.Element;
+  appendTitleElement?: JSX.Element;
+  actionableItems?: JSX.Element;
+  isMobile?: boolean;
+  parentRef: React.RefObject<HTMLDivElement>;
+}
+
+export const ListItem: FC<IListItemProps> = (props) => {
+  const {
+    title,
+    prependTitleElement,
+    appendTitleElement,
+    actionableItems,
+    itemLink,
+    onItemClick,
+    isMobile = false,
+    parentRef,
+  } = props;
+
+  return (
+    <div ref={parentRef} className="relative">
+      <Link href={itemLink} onClick={onItemClick}>
+        <div className="group h-24 sm:h-[52px] flex w-full flex-col items-center justify-between gap-3 sm:gap-5 px-6 py-4 sm:py-0 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 sm:flex-row">
+          <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
+            <div className="relative flex w-full items-center gap-3 overflow-hidden">
+              <div className="flex items-center gap-4 truncate">
+                {prependTitleElement && <span className="flex items-center flex-shrink-0">{prependTitleElement}</span>}
+                <Tooltip tooltipContent={title} position="top" isMobile={isMobile}>
+                  <span className="truncate text-sm">{title}</span>
+                </Tooltip>
+              </div>
+              {appendTitleElement && <span className="flex items-center flex-shrink-0">{appendTitleElement}</span>}
+            </div>
+          </div>
+          <span className="h-6 w-96 flex-shrink-0" />
+        </div>
+      </Link>
+      {actionableItems && (
+        <div className="absolute right-5 bottom-4 flex items-center gap-1.5">
+          <div className="relative flex items-center gap-4 sm:w-auto sm:flex-shrink-0 sm:justify-end">
+            {actionableItems}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

web/components/core/list/list-root.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from "react";
+
+interface IListContainer {
+  children: React.ReactNode;
+}
+
+export const ListLayout: FC<IListContainer> = (props) => {
+  const { children } = props;
+  return <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">{children}</div>;
+};

web/components/core/modals/existing-issues-list-modal.tsx

@@ -36,6 +36,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
     workspaceLevelToggle = false,
   } = props;
   // states
+  const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
   const [selectedIssues, setSelectedIssues] = useState<ISearchIssueResponse[]>([]);
@@ -72,7 +73,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
 
   useEffect(() => {
     if (!isOpen || !workspaceSlug || !projectId) return;
-
+    setIsLoading(true);
     projectService
       .projectIssuesSearch(workspaceSlug as string, projectId as string, {
         search: debouncedSearchTerm,
@@ -80,8 +81,11 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
         workspace_search: isWorkspaceLevel,
       })
       .then((res) => setIssues(res))
-      .finally(() => setIsSearching(false));
-  }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]);
+      .finally(() => {
+        setIsSearching(false);
+        setIsLoading(false);
+      });
+  }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, workspaceSlug]);
 
   return (
     <>
@@ -194,14 +198,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                       </h5>
                     )}
 
-                    <IssueSearchModalEmptyState
-                      debouncedSearchTerm={debouncedSearchTerm}
-                      isSearching={isSearching}
-                      issues={issues}
-                      searchTerm={searchTerm}
-                    />
-
-                    {isSearching ? (
+                    {isSearching || isLoading ? (
                       <Loader className="space-y-3 p-3">
                         <Loader.Item height="40px" />
                         <Loader.Item height="40px" />
@@ -209,48 +206,59 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                         <Loader.Item height="40px" />
                       </Loader>
                     ) : (
-                      <ul className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}>
-                        {issues.map((issue) => {
-                          const selected = selectedIssues.some((i) => i.id === issue.id);
+                      <>
+                        {issues.length === 0 ? (
+                          <IssueSearchModalEmptyState
+                            debouncedSearchTerm={debouncedSearchTerm}
+                            isSearching={isSearching}
+                            issues={issues}
+                            searchTerm={searchTerm}
+                          />
+                        ) : (
+                          <ul className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}>
+                            {issues.map((issue) => {
+                              const selected = selectedIssues.some((i) => i.id === issue.id);
 
-                          return (
-                            <Combobox.Option
-                              key={issue.id}
-                              as="label"
-                              htmlFor={`issue-${issue.id}`}
-                              value={issue}
-                              className={({ active }) =>
-                                `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                                  active ? "bg-custom-background-80 text-custom-text-100" : ""
-                                } ${selected ? "text-custom-text-100" : ""}`
-                              }
-                            >
-                              <div className="flex items-center gap-2">
-                                <input type="checkbox" checked={selected} readOnly />
-                                <span
-                                  className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                  style={{
-                                    backgroundColor: issue.state__color,
-                                  }}
-                                />
-                                <span className="flex-shrink-0 text-xs">
-                                  {issue.project__identifier}-{issue.sequence_id}
-                                </span>
-                                {issue.name}
-                              </div>
-                              <a
-                                href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
-                                target="_blank"
-                                className="z-1 relative hidden text-custom-text-200 hover:text-custom-text-100 group-hover:block"
-                                rel="noopener noreferrer"
-                                onClick={(e) => e.stopPropagation()}
-                              >
-                                <Rocket className="h-4 w-4" />
-                              </a>
-                            </Combobox.Option>
-                          );
-                        })}
-                      </ul>
+                              return (
+                                <Combobox.Option
+                                  key={issue.id}
+                                  as="label"
+                                  htmlFor={`issue-${issue.id}`}
+                                  value={issue}
+                                  className={({ active }) =>
+                                    `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                      active ? "bg-custom-background-80 text-custom-text-100" : ""
+                                    } ${selected ? "text-custom-text-100" : ""}`
+                                  }
+                                >
+                                  <div className="flex items-center gap-2">
+                                    <input type="checkbox" checked={selected} readOnly />
+                                    <span
+                                      className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                      style={{
+                                        backgroundColor: issue.state__color,
+                                      }}
+                                    />
+                                    <span className="flex-shrink-0 text-xs">
+                                      {issue.project__identifier}-{issue.sequence_id}
+                                    </span>
+                                    {issue.name}
+                                  </div>
+                                  <a
+                                    href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+                                    target="_blank"
+                                    className="z-1 relative hidden text-custom-text-200 hover:text-custom-text-100 group-hover:block"
+                                    rel="noopener noreferrer"
+                                    onClick={(e) => e.stopPropagation()}
+                                  >
+                                    <Rocket className="h-4 w-4" />
+                                  </a>
+                                </Combobox.Option>
+                              );
+                            })}
+                          </ul>
+                        )}
+                      </>
                     )}
                   </Combobox.Options>
                 </Combobox>

web/components/core/sidebar/links-list.tsx

@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 // icons
-import { Pencil, Trash2, LinkIcon } from "lucide-react";
+import { Pencil, Trash2, LinkIcon, ExternalLink } from "lucide-react";
 import { ILinkDetails, UserAuth } from "@plane/types";
 // ui
-import { ExternalLinkIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+import { Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { calculateTimeAgo } from "@/helpers/date-time.helper";
 // hooks
@@ -19,91 +19,95 @@ type Props = {
   disabled?: boolean;
 };
 
-export const LinksList: React.FC<Props> = observer(({ links, handleDeleteLink, handleEditLink, userAuth, disabled }) => {
-  const { getUserDetails } = useMember();
-  const { isMobile } = usePlatformOS();
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
+export const LinksList: React.FC<Props> = observer(
+  ({ links, handleDeleteLink, handleEditLink, userAuth, disabled }) => {
+    const { getUserDetails } = useMember();
+    const { isMobile } = usePlatformOS();
+    const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
 
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-    setToast({
-      type: TOAST_TYPE.SUCCESS,
-      title: "Copied to clipboard",
-      message: "The URL has been successfully copied to your clipboard",
-    });
-  };
+    const copyToClipboard = (text: string) => {
+      navigator.clipboard.writeText(text);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Copied to clipboard",
+        message: "The URL has been successfully copied to your clipboard",
+      });
+    };
 
-  return (
-    <>
-      {links.map((link) => {
-        const createdByDetails = getUserDetails(link.created_by);
-        return (
-          <div key={link.id} className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
-            <div className="flex w-full items-start justify-between gap-2">
-              <div className="flex items-start gap-2 truncate">
-                <span className="py-1">
-                  <LinkIcon className="h-3 w-3 flex-shrink-0" />
-                </span>
-                <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
-                  <span
-                    className="cursor-pointer truncate text-xs"
-                    onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
-                  >
-                    {link.title && link.title !== "" ? link.title : link.url}
+    return (
+      <>
+        {links.map((link) => {
+          const createdByDetails = getUserDetails(link.created_by);
+          return (
+            <div key={link.id} className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
+              <div className="flex w-full items-start justify-between gap-2">
+                <div className="flex items-start gap-2 truncate">
+                  <span className="py-1">
+                    <LinkIcon className="h-3 w-3 flex-shrink-0" />
                   </span>
-                </Tooltip>
-              </div>
-
-              {!isNotAllowed && (
-                <div className="z-[1] flex flex-shrink-0 items-center gap-2">
-                  <button
-                    type="button"
-                    className="flex items-center justify-center p-1 hover:bg-custom-background-80"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleEditLink(link);
-                    }}
-                  >
-                    <Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
-                  </button>
-                  <a
-                    href={link.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center justify-center p-1 hover:bg-custom-background-80"
-                  >
-                    <ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
-                  </a>
-                  <button
-                    type="button"
-                    className="flex items-center justify-center p-1 hover:bg-custom-background-80"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleDeleteLink(link.id);
-                    }}
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </button>
+                  <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
+                    <span
+                      className="cursor-pointer truncate text-xs"
+                      onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
+                    >
+                      {link.title && link.title !== "" ? link.title : link.url}
+                    </span>
+                  </Tooltip>
                 </div>
-              )}
-            </div>
-            <div className="px-5">
-              <p className="mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
-                Added {calculateTimeAgo(link.created_at)}
-                <br />
-                {createdByDetails && (
-                  <>
-                    by{" "}
-                    {createdByDetails?.is_bot ? createdByDetails?.first_name + " Bot" : createdByDetails?.display_name}
-                  </>
+
+                {!isNotAllowed && (
+                  <div className="z-[1] flex flex-shrink-0 items-center gap-2">
+                    <button
+                      type="button"
+                      className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleEditLink(link);
+                      }}
+                    >
+                      <Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+                    </button>
+                    <a
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                    >
+                      <ExternalLink className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+                    </a>
+                    <button
+                      type="button"
+                      className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleDeleteLink(link.id);
+                      }}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </button>
+                  </div>
                 )}
-              </p>
+              </div>
+              <div className="px-5">
+                <p className="mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
+                  Added {calculateTimeAgo(link.created_at)}
+                  <br />
+                  {createdByDetails && (
+                    <>
+                      by{" "}
+                      {createdByDetails?.is_bot
+                        ? createdByDetails?.first_name + " Bot"
+                        : createdByDetails?.display_name}
+                    </>
+                  )}
+                </p>
+              </div>
             </div>
-          </div>
-        );
-      })}
-    </>
-  );
-});
+          );
+        })}
+      </>
+    );
+  }
+);

web/components/core/sidebar/sidebar-progress-stats.tsx

@@ -4,6 +4,8 @@ import Image from "next/image";
 // headless ui
 import { Tab } from "@headlessui/react";
 import {
+  IIssueFilterOptions,
+  IIssueFilters,
   IModule,
   TAssigneesDistribution,
   TCompletionChartDistribution,
@@ -37,6 +39,9 @@ type Props = {
   roundedTab?: boolean;
   noBackground?: boolean;
   isPeekView?: boolean;
+  isCompleted?: boolean;
+  filters?: IIssueFilters | undefined;
+  handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
 };
 
 export const SidebarProgressStats: React.FC<Props> = ({
@@ -47,6 +52,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
   roundedTab,
   noBackground,
   isPeekView = false,
+  isCompleted = false,
+  filters,
+  handleFiltersUpdate,
 }) => {
   const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
 
@@ -145,20 +153,11 @@ export const SidebarProgressStats: React.FC<Props> = ({
                     }
                     completed={assignee.completed_issues}
                     total={assignee.total_issues}
-                    {...(!isPeekView && {
-                      onClick: () => {
-                        // TODO: set filters here
-                        // if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
-                        //   setFilters({
-                        //     assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
-                        //   });
-                        // else
-                        //   setFilters({
-                        //     assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
-                        //   });
-                      },
-                      // selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
-                    })}
+                    {...(!isPeekView &&
+                      !isCompleted && {
+                        onClick: () => handleFiltersUpdate("assignees", assignee.assignee_id ?? ""),
+                        selected: filters?.filters?.assignees?.includes(assignee.assignee_id ?? ""),
+                      })}
                   />
                 );
               else
@@ -192,35 +191,52 @@ export const SidebarProgressStats: React.FC<Props> = ({
           className="flex w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
         >
           {distribution && distribution?.labels.length > 0 ? (
-            distribution.labels.map((label, index) => (
-              <SingleProgressStats
-                key={label.label_id ?? `no-label-${index}`}
-                title={
-                  <div className="flex items-center gap-2">
-                    <span
-                      className="block h-3 w-3 rounded-full"
-                      style={{
-                        backgroundColor: label.color ?? "transparent",
-                      }}
-                    />
-                    <span className="text-xs">{label.label_name ?? "No labels"}</span>
-                  </div>
-                }
-                completed={label.completed_issues}
-                total={label.total_issues}
-                {...(!isPeekView && {
-                  // TODO: set filters here
-                  onClick: () => {
-                    // if (filters.labels?.includes(label.label_id ?? ""))
-                    //   setFilters({
-                    //     labels: filters?.labels?.filter((l) => l !== label.label_id),
-                    //   });
-                    // else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
-                  },
-                  // selected: filters?.labels?.includes(label.label_id ?? ""),
-                })}
-              />
-            ))
+            distribution.labels.map((label, index) => {
+              if (label.label_id) {
+                return (
+                  <SingleProgressStats
+                    key={label.label_id}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="block h-3 w-3 rounded-full"
+                          style={{
+                            backgroundColor: label.color ?? "transparent",
+                          }}
+                        />
+                        <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                      </div>
+                    }
+                    completed={label.completed_issues}
+                    total={label.total_issues}
+                    {...(!isPeekView &&
+                      !isCompleted && {
+                        onClick: () => handleFiltersUpdate("labels", label.label_id ?? ""),
+                        selected: filters?.filters?.labels?.includes(label.label_id ?? `no-label-${index}`),
+                      })}
+                  />
+                );
+              } else {
+                return (
+                  <SingleProgressStats
+                    key={`no-label-${index}`}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="block h-3 w-3 rounded-full"
+                          style={{
+                            backgroundColor: label.color ?? "transparent",
+                          }}
+                        />
+                        <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                      </div>
+                    }
+                    completed={label.completed_issues}
+                    total={label.total_issues}
+                  />
+                );
+              }
+            })
           ) : (
             <div className="flex h-full flex-col items-center justify-center gap-2">
               <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">

web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx

@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -20,6 +21,8 @@ type Props = {
 
 export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
   const { cycleId } = props;
+  // refs
+  const parentRef = useRef(null);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -90,6 +93,7 @@ export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
 
   return (
     <Link
+      ref={parentRef}
       href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`}
       className="py-5 px-2 flex items-center justify-between gap-2 hover:bg-custom-background-90"
     >
@@ -123,6 +127,7 @@ export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
 
         {workspaceSlug && projectId && (
           <CycleQuickActions
+            parentRef={parentRef}
             cycleId={cycleId}
             projectId={projectId.toString()}
             workspaceSlug={workspaceSlug.toString()}

web/components/cycles/board/cycles-board-card.tsx

@@ -1,4 +1,4 @@
-import { FC, MouseEvent } from "react";
+import { FC, MouseEvent, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -28,6 +28,8 @@ export interface ICyclesBoardCard {
 
 export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
   const { cycleId, workspaceSlug, projectId } = props;
+  // refs
+  const parentRef = useRef(null);
   // router
   const router = useRouter();
   // store
@@ -149,8 +151,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
-    <div>
-      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
+    <div className="relative">
+      <Link ref={parentRef} href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
         <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-3 truncate">
@@ -231,23 +233,28 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
               ) : (
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
-              <div className="z-[5] flex items-center gap-1.5">
-                {isEditingAllowed && (
-                  <FavoriteStar
-                    onClick={(e) => {
-                      if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
-                      else handleAddToFavorites(e);
-                    }}
-                    selected={!!cycleDetails.is_favorite}
-                  />
-                )}
-
-                <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
-              </div>
             </div>
           </div>
         </div>
       </Link>
+      <div className="absolute right-4 bottom-3.5 flex items-center gap-1.5">
+        {isEditingAllowed && (
+          <FavoriteStar
+            onClick={(e) => {
+              if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+              else handleAddToFavorites(e);
+            }}
+            selected={!!cycleDetails.is_favorite}
+          />
+        )}
+
+        <CycleQuickActions
+          parentRef={parentRef}
+          cycleId={cycleId}
+          projectId={projectId}
+          workspaceSlug={workspaceSlug}
+        />
+      </div>
     </div>
   );
 });

web/components/cycles/cycles-view-header.tsx

@@ -76,7 +76,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-custom-border-200 px-4 sm:px-5 sm:pb-0">
+    <div className="h-[50px] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-custom-border-200 px-6 sm:pb-0">
       <Tab.List as="div" className="flex items-center overflow-x-scroll">
         {CYCLE_TABS_LIST.map((tab) => (
           <Tab

web/components/cycles/list/cycle-list-item-action.tsx

@@ -0,0 +1,156 @@
+import React, { FC, MouseEvent } from "react";
+import { observer } from "mobx-react";
+import { User2 } from "lucide-react";
+// types
+import { ICycle, TCycleGroups } from "@plane/types";
+// ui
+import { Avatar, AvatarGroup, Tooltip, setPromiseToast } from "@plane/ui";
+// components
+import { FavoriteStar } from "@/components/core";
+import { CycleQuickActions } from "@/components/cycles";
+// constants
+import { CYCLE_STATUS } from "@/constants/cycle";
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
+import { EUserProjectRoles } from "@/constants/project";
+// helpers
+import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
+import { useCycle, useEventTracker, useMember, useUser } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string;
+  cycleDetails: ICycle;
+  parentRef: React.RefObject<HTMLDivElement>;
+};
+
+export const CycleListItemAction: FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, cycleId, cycleDetails, parentRef } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // store hooks
+  const { addCycleToFavorites, removeCycleFromFavorites } = useCycle();
+  const { captureEvent } = useEventTracker();
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+  const { getUserDetails } = useMember();
+
+  // derived values
+  const endDate = getDate(cycleDetails.end_date);
+  const startDate = getDate(cycleDetails.start_date);
+  const cycleStatus = cycleDetails.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const renderDate = cycleDetails.start_date || cycleDetails.end_date;
+  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
+  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
+
+  // handlers
+  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).then(
+      () => {
+        captureEvent(CYCLE_FAVORITED, {
+          cycle_id: cycleId,
+          element: "List layout",
+          state: "SUCCESS",
+        });
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding cycle to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Cycle added to favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the cycle to favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const removeFromFavoritePromise = removeCycleFromFavorites(
+      workspaceSlug?.toString(),
+      projectId.toString(),
+      cycleId
+    ).then(() => {
+      captureEvent(CYCLE_UNFAVORITED, {
+        cycle_id: cycleId,
+        element: "List layout",
+        state: "SUCCESS",
+      });
+    });
+
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing cycle from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Cycle removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the cycle from favorites. Please try again.",
+      },
+    });
+  };
+
+  return (
+    <>
+      <div className="text-xs text-custom-text-300 flex-shrink-0">
+        {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
+      </div>
+
+      {currentCycle && (
+        <div
+          className="relative flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
+          style={{
+            color: currentCycle.color,
+            backgroundColor: `${currentCycle.color}20`,
+          }}
+        >
+          {currentCycle.value === "current"
+            ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
+            : `${currentCycle.label}`}
+        </div>
+      )}
+
+      <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`} isMobile={isMobile}>
+        <div className="flex w-10 cursor-default items-center justify-center">
+          {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? (
+            <AvatarGroup showTooltip={false}>
+              {cycleDetails.assignee_ids?.map((assignee_id) => {
+                const member = getUserDetails(assignee_id);
+                return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+              })}
+            </AvatarGroup>
+          ) : (
+            <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+              <User2 className="h-4 w-4 text-custom-text-400" />
+            </span>
+          )}
+        </div>
+      </Tooltip>
+
+      {isEditingAllowed && !cycleDetails.archived_at && (
+        <FavoriteStar
+          onClick={(e) => {
+            if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+            else handleAddToFavorites(e);
+          }}
+          selected={!!cycleDetails.is_favorite}
+        />
+      )}
+      <CycleQuickActions parentRef={parentRef} cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
+    </>
+  );
+});

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

@@ -1,24 +1,17 @@
-import { FC, MouseEvent } from "react";
+import { FC, MouseEvent, useRef } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
 import { useRouter } from "next/router";
 // icons
-import { Check, Info, User2 } from "lucide-react";
+import { Check, Info } from "lucide-react";
 // types
 import type { TCycleGroups } from "@plane/types";
 // ui
-import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui";
+import { CircularProgressIndicator } from "@plane/ui";
 // components
-import { FavoriteStar } from "@/components/core";
-import { CycleQuickActions } from "@/components/cycles";
-// constants
-import { CYCLE_STATUS } from "@/constants/cycle";
-import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
-import { EUserProjectRoles } from "@/constants/project";
-// helpers
-import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
+import { ListItem } from "@/components/core/list";
+import { CycleListItemAction } from "@/components/cycles/list";
 // hooks
-import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
+import { useCycle } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type TCyclesListItem = {
@@ -29,79 +22,41 @@ type TCyclesListItem = {
   handleRemoveFromFavorites?: () => void;
   workspaceSlug: string;
   projectId: string;
-  isArchived?: boolean;
 };
 
 export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
-  const { cycleId, workspaceSlug, projectId, isArchived } = props;
+  const { cycleId, workspaceSlug, projectId } = props;
+  // refs
+  const parentRef = useRef(null);
   // router
   const router = useRouter();
   // hooks
   const { isMobile } = usePlatformOS();
   // store hooks
-  const { captureEvent } = useEventTracker();
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
-  const { getCycleById, addCycleToFavorites, removeCycleFromFavorites } = useCycle();
-  const { getUserDetails } = useMember();
+  const { getCycleById } = useCycle();
 
-  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    if (!workspaceSlug || !projectId) return;
+  // derived values
+  const cycleDetails = getCycleById(cycleId);
 
-    const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).then(
-      () => {
-        captureEvent(CYCLE_FAVORITED, {
-          cycle_id: cycleId,
-          element: "List layout",
-          state: "SUCCESS",
-        });
-      }
-    );
+  if (!cycleDetails) return null;
 
-    setPromiseToast(addToFavoritePromise, {
-      loading: "Adding cycle to favorites...",
-      success: {
-        title: "Success!",
-        message: () => "Cycle added to favorites.",
-      },
-      error: {
-        title: "Error!",
-        message: () => "Couldn't add the cycle to favorites. Please try again.",
-      },
-    });
-  };
+  // computed
+  // TODO: change this logic once backend fix the response
+  const cycleStatus = cycleDetails.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+  const isCompleted = cycleStatus === "completed";
 
-  const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    if (!workspaceSlug || !projectId) return;
+  const cycleTotalIssues =
+    cycleDetails.backlog_issues +
+    cycleDetails.unstarted_issues +
+    cycleDetails.started_issues +
+    cycleDetails.completed_issues +
+    cycleDetails.cancelled_issues;
 
-    const removeFromFavoritePromise = removeCycleFromFavorites(
-      workspaceSlug?.toString(),
-      projectId.toString(),
-      cycleId
-    ).then(() => {
-      captureEvent(CYCLE_UNFAVORITED, {
-        cycle_id: cycleId,
-        element: "List layout",
-        state: "SUCCESS",
-      });
-    });
+  const completionPercentage = (cycleDetails.completed_issues / cycleTotalIssues) * 100;
 
-    setPromiseToast(removeFromFavoritePromise, {
-      loading: "Removing cycle from favorites...",
-      success: {
-        title: "Success!",
-        message: () => "Cycle removed from favorites.",
-      },
-      error: {
-        title: "Error!",
-        message: () => "Couldn't remove the cycle from favorites. Please try again.",
-      },
-    });
-  };
+  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
 
+  // handlers
   const openCycleOverview = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     const { query } = router;
     e.preventDefault();
@@ -121,136 +76,47 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
     }
   };
 
-  const cycleDetails = getCycleById(cycleId);
-
-  if (!cycleDetails) return null;
-
-  // computed
-  // TODO: change this logic once backend fix the response
-  const cycleStatus = cycleDetails.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
-  const isCompleted = cycleStatus === "completed";
-  const endDate = getDate(cycleDetails.end_date);
-  const startDate = getDate(cycleDetails.start_date);
-
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
-  const cycleTotalIssues =
-    cycleDetails.backlog_issues +
-    cycleDetails.unstarted_issues +
-    cycleDetails.started_issues +
-    cycleDetails.completed_issues +
-    cycleDetails.cancelled_issues;
-
-  const renderDate = cycleDetails.start_date || cycleDetails.end_date;
-
-  // const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
-
-  const completionPercentage = (cycleDetails.completed_issues / cycleTotalIssues) * 100;
-
-  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
-
-  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
-
-  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
-
   return (
-    <>
-      <Link
-        href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}
-        onClick={(e) => {
-          if (isArchived) {
-            openCycleOverview(e);
-          }
-        }}
-      >
-        <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 md:flex-row">
-          <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
-            <div className="relative flex w-full items-center gap-3 overflow-hidden">
-              <div className="flex-shrink-0">
-                <CircularProgressIndicator size={38} percentage={progress}>
-                  {isCompleted ? (
-                    progress === 100 ? (
-                      <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                    ) : (
-                      <span className="text-sm text-custom-primary-100">{`!`}</span>
-                    )
-                  ) : progress === 100 ? (
-                    <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                  ) : (
-                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
-                  )}
-                </CircularProgressIndicator>
-              </div>
-
-              <div className="relative flex items-center gap-2.5 overflow-hidden">
-                <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
-                <Tooltip tooltipContent={cycleDetails.name} position="top" isMobile={isMobile}>
-                  <span className="line-clamp-1 inline-block overflow-hidden truncate text-base font-medium">
-                    {cycleDetails.name}
-                  </span>
-                </Tooltip>
-              </div>
-
-              <button onClick={openCycleOverview} className="invisible z-[5] flex-shrink-0 group-hover:visible">
-                <Info className="h-4 w-4 text-custom-text-400" />
-              </button>
-            </div>
-            <div className="text-xs text-custom-text-300 flex-shrink-0">
-              {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
-            </div>
-          </div>
-          <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 md:w-auto md:flex-shrink-0 md:justify-end">
-            {currentCycle && (
-              <div
-                className="relative flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
-                style={{
-                  color: currentCycle.color,
-                  backgroundColor: `${currentCycle.color}20`,
-                }}
-              >
-                {currentCycle.value === "current"
-                  ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
-                  : `${currentCycle.label}`}
-              </div>
-            )}
-
-            <div className="relative flex flex-shrink-0 items-center gap-3">
-              <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`} isMobile={isMobile}>
-                <div className="flex w-10 cursor-default items-center justify-center">
-                  {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? (
-                    <AvatarGroup showTooltip={false}>
-                      {cycleDetails.assignee_ids?.map((assignee_id) => {
-                        const member = getUserDetails(assignee_id);
-                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                      })}
-                    </AvatarGroup>
-                  ) : (
-                    <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                      <User2 className="h-4 w-4 text-custom-text-400" />
-                    </span>
-                  )}
-                </div>
-              </Tooltip>
-
-              {isEditingAllowed && !isArchived && (
-                <FavoriteStar
-                  onClick={(e) => {
-                    if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
-                    else handleAddToFavorites(e);
-                  }}
-                  selected={!!cycleDetails.is_favorite}
-                />
-              )}
-              <CycleQuickActions
-                cycleId={cycleId}
-                projectId={projectId}
-                workspaceSlug={workspaceSlug}
-                isArchived={isArchived}
-              />
-            </div>
-          </div>
-        </div>
-      </Link>
-    </>
+    <ListItem
+      title={cycleDetails?.name ?? ""}
+      itemLink={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}
+      onItemClick={(e) => {
+        if (cycleDetails.archived_at) openCycleOverview(e);
+      }}
+      prependTitleElement={
+        <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
+          {isCompleted ? (
+            progress === 100 ? (
+              <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+            ) : (
+              <span className="text-sm text-custom-primary-100">{`!`}</span>
+            )
+          ) : progress === 100 ? (
+            <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+          ) : (
+            <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+          )}
+        </CircularProgressIndicator>
+      }
+      appendTitleElement={
+        <button
+          onClick={openCycleOverview}
+          className={`z-[5] flex-shrink-0 ${isMobile ? "flex" : "hidden group-hover:flex"}`}
+        >
+          <Info className="h-4 w-4 text-custom-text-400" />
+        </button>
+      }
+      actionableItems={
+        <CycleListItemAction
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          cycleId={cycleId}
+          cycleDetails={cycleDetails}
+          parentRef={parentRef}
+        />
+      }
+      isMobile={isMobile}
+      parentRef={parentRef}
+    />
   );
 });

web/components/cycles/list/cycles-list-map.tsx

@@ -5,22 +5,15 @@ type Props = {
   cycleIds: string[];
   projectId: string;
   workspaceSlug: string;
-  isArchived?: boolean;
 };
 
 export const CyclesListMap: React.FC<Props> = (props) => {
-  const { cycleIds, projectId, workspaceSlug, isArchived } = props;
+  const { cycleIds, projectId, workspaceSlug } = props;
 
   return (
     <>
       {cycleIds.map((cycleId) => (
-        <CyclesListItem
-          key={cycleId}
-          cycleId={cycleId}
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          isArchived={isArchived}
-        />
+        <CyclesListItem key={cycleId} cycleId={cycleId} workspaceSlug={workspaceSlug} projectId={projectId} />
       ))}
     </>
   );

web/components/cycles/list/index.ts

@@ -1,3 +1,4 @@
 export * from "./cycles-list-item";
 export * from "./cycles-list-map";
 export * from "./root";
+export * from "./cycle-list-item-action";

web/components/cycles/list/root.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { ChevronRight } from "lucide-react";
 import { Disclosure } from "@headlessui/react";
 // components
+import { ListLayout } from "@/components/core/list";
 import { CyclePeekOverview, CyclesListMap } from "@/components/cycles";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -21,12 +22,11 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
   return (
     <div className="h-full overflow-y-auto">
       <div className="flex h-full w-full justify-between">
-        <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
+        <ListLayout>
           <CyclesListMap
             cycleIds={cycleIds}
             projectId={projectId}
             workspaceSlug={workspaceSlug}
-            isArchived={isArchived}
           />
           {completedCycleIds.length !== 0 && (
             <Disclosure as="div" className="py-8 pl-3 space-y-4">
@@ -43,16 +43,11 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
                 )}
               </Disclosure.Button>
               <Disclosure.Panel>
-                <CyclesListMap
-                  cycleIds={completedCycleIds}
-                  projectId={projectId}
-                  workspaceSlug={workspaceSlug}
-                  isArchived={isArchived}
-                />
+                <CyclesListMap cycleIds={completedCycleIds} projectId={projectId} workspaceSlug={workspaceSlug} />
               </Disclosure.Panel>
             </Disclosure>
           )}
-        </div>
+        </ListLayout>
         <CyclePeekOverview projectId={projectId} workspaceSlug={workspaceSlug} isArchived={isArchived} />
       </div>
     </div>

web/components/cycles/quick-actions.tsx

@@ -2,27 +2,28 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // icons
-import { ArchiveRestoreIcon, LinkIcon, Pencil, Trash2 } from "lucide-react";
+import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
 // ui
-import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ArchiveCycleModal, CycleCreateUpdateModal, CycleDeleteModal } from "@/components/cycles";
 // constants
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
+import { cn } from "@/helpers/common.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useCycle, useEventTracker, useUser } from "@/hooks/store";
 
 type Props = {
+  parentRef: React.RefObject<HTMLElement>;
   cycleId: string;
   projectId: string;
   workspaceSlug: string;
-  isArchived?: boolean;
 };
 
 export const CycleQuickActions: React.FC<Props> = observer((props) => {
-  const { cycleId, projectId, workspaceSlug, isArchived } = props;
+  const { parentRef, cycleId, projectId, workspaceSlug } = props;
   // router
   const router = useRouter();
   // states
@@ -37,40 +38,31 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
   const { getCycleById, restoreCycle } = useCycle();
   // derived values
   const cycleDetails = getCycleById(cycleId);
+  const isArchived = !!cycleDetails?.archived_at;
   const isCompleted = cycleDetails?.status?.toLowerCase() === "completed";
   // auth
   const isEditingAllowed =
     !!currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId] >= EUserProjectRoles.MEMBER;
 
-  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`).then(() => {
+  const cycleLink = `${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`;
+  const handleCopyText = () =>
+    copyUrlToClipboard(cycleLink).then(() => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Link Copied!",
         message: "Cycle link copied to clipboard.",
       });
     });
-  };
+  const handleOpenInNewTab = () => window.open(`/${cycleLink}`, "_blank");
 
-  const handleEditCycle = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleEditCycle = () => {
     setTrackElement("Cycles page list layout");
     setUpdateModal(true);
   };
 
-  const handleArchiveCycle = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setArchiveCycleModal(true);
-  };
+  const handleArchiveCycle = () => setArchiveCycleModal(true);
 
-  const handleRestoreCycle = async (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleRestoreCycle = async () =>
     await restoreCycle(workspaceSlug, projectId, cycleId)
       .then(() => {
         setToast({
@@ -87,15 +79,61 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
           message: "Cycle could not be restored. Please try again.",
         })
       );
-  };
 
-  const handleDeleteCycle = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleDeleteCycle = () => {
     setTrackElement("Cycles page list layout");
     setDeleteModal(true);
   };
 
+  const MENU_ITEMS: TContextMenuItem[] = [
+    {
+      key: "edit",
+      title: "Edit",
+      icon: Pencil,
+      action: handleEditCycle,
+      shouldRender: isEditingAllowed && !isCompleted && !isArchived,
+    },
+    {
+      key: "open-new-tab",
+      action: handleOpenInNewTab,
+      title: "Open in new tab",
+      icon: ExternalLink,
+      shouldRender: !isArchived,
+    },
+    {
+      key: "copy-link",
+      action: handleCopyText,
+      title: "Copy link",
+      icon: LinkIcon,
+      shouldRender: !isArchived,
+    },
+    {
+      key: "archive",
+      action: handleArchiveCycle,
+      title: "Archive",
+      description: isCompleted ? undefined : "Only completed cycle can\nbe archived.",
+      icon: ArchiveIcon,
+      className: "items-start",
+      iconClassName: "mt-1",
+      shouldRender: isEditingAllowed && !isArchived,
+      disabled: !isCompleted,
+    },
+    {
+      key: "restore",
+      action: handleRestoreCycle,
+      title: "Restore",
+      icon: ArchiveRestoreIcon,
+      shouldRender: isEditingAllowed && isArchived,
+    },
+    {
+      key: "delete",
+      action: handleDeleteCycle,
+      title: "Delete",
+      icon: Trash2,
+      shouldRender: isEditingAllowed && !isCompleted && !isArchived,
+    },
+  ];
+
   return (
     <>
       {cycleDetails && (
@@ -123,60 +161,43 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
           />
         </div>
       )}
-      <CustomMenu ellipsis placement="bottom-end">
-        {!isCompleted && isEditingAllowed && !isArchived && (
-          <CustomMenu.MenuItem onClick={handleEditCycle}>
-            <span className="flex items-center justify-start gap-2">
-              <Pencil className="h-3 w-3" />
-              <span>Edit cycle</span>
-            </span>
-          </CustomMenu.MenuItem>
-        )}
-        {isEditingAllowed && !isArchived && (
-          <CustomMenu.MenuItem onClick={handleArchiveCycle} disabled={!isCompleted}>
-            {isCompleted ? (
-              <div className="flex items-center gap-2">
-                <ArchiveIcon className="h-3 w-3" />
-                Archive cycle
-              </div>
-            ) : (
-              <div className="flex items-start gap-2">
-                <ArchiveIcon className="h-3 w-3" />
-                <div className="-mt-1">
-                  <p>Archive cycle</p>
-                  <p className="text-xs text-custom-text-400">
-                    Only completed cycle <br /> can be archived.
+      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
+      <CustomMenu ellipsis placement="bottom-end" closeOnSelect>
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-custom-text-400": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("text-custom-text-300 whitespace-pre-line", {
+                      "text-custom-text-400": item.disabled,
+                    })}
+                  >
+                    {item.description}
                   </p>
-                </div>
+                )}
               </div>
-            )}
-          </CustomMenu.MenuItem>
-        )}
-        {isEditingAllowed && isArchived && (
-          <CustomMenu.MenuItem onClick={handleRestoreCycle}>
-            <span className="flex items-center justify-start gap-2">
-              <ArchiveRestoreIcon className="h-3 w-3" />
-              <span>Restore cycle</span>
-            </span>
-          </CustomMenu.MenuItem>
-        )}
-        {!isArchived && (
-          <CustomMenu.MenuItem onClick={handleCopyText}>
-            <span className="flex items-center justify-start gap-2">
-              <LinkIcon className="h-3 w-3" />
-              <span>Copy cycle link</span>
-            </span>
-          </CustomMenu.MenuItem>
-        )}
-        <hr className="my-2 border-custom-border-200" />
-        {!isCompleted && isEditingAllowed && (
-          <CustomMenu.MenuItem onClick={handleDeleteCycle}>
-            <span className="flex items-center justify-start gap-2">
-              <Trash2 className="h-3 w-3" />
-              <span>Delete cycle</span>
-            </span>
-          </CustomMenu.MenuItem>
-        )}
+            </CustomMenu.MenuItem>
+          );
+        })}
       </CustomMenu>
     </>
   );

web/components/cycles/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
@@ -16,7 +16,7 @@ import {
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
-import { ICycle } from "@plane/types";
+import { ICycle, IIssueFilterOptions } from "@plane/types";
 // ui
 import { Avatar, ArchiveIcon, CustomMenu, Loader, LayersIcon, TOAST_TYPE, setToast, TextArea } from "@plane/ui";
 // components
@@ -27,12 +27,13 @@ import { DateRangeDropdown } from "@/components/dropdowns";
 // constants
 import { CYCLE_STATUS } from "@/constants/cycle";
 import { CYCLE_UPDATED } from "@/constants/event-tracker";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { EUserWorkspaceRoles } from "@/constants/workspace";
 // helpers
 import { findHowManyDaysLeft, getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
+import { useEventTracker, useCycle, useUser, useMember, useIssues } from "@/hooks/store";
 // services
 import { CycleService } from "@/services/cycle.service";
 
@@ -191,25 +192,36 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
     }
   };
 
-  // TODO: refactor this
-  // const handleFiltersUpdate = useCallback(
-  //   (key: keyof IIssueFilterOptions, value: string | string[]) => {
-  //     if (!workspaceSlug || !projectId) return;
-  //     const newValues = issueFilters?.filters?.[key] ?? [];
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.CYCLE);
 
-  //     if (Array.isArray(value)) {
-  //       value.forEach((val) => {
-  //         if (!newValues.includes(val)) newValues.push(val);
-  //       });
-  //     } else {
-  //       if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-  //       else newValues.push(value);
-  //     }
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
 
-  //     updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, { [key]: newValues }, cycleId);
-  //   },
-  //   [workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
-  // );
+      if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.FILTERS,
+        { [key]: newValues },
+        cycleId
+      );
+    },
+    [workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
+  );
 
   const cycleStatus = cycleDetails?.status?.toLocaleLowerCase();
   const isCompleted = cycleStatus === "completed";
@@ -251,8 +263,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         ? "0 Issue"
         : `${cycleDetails.progress_snapshot.completed_issues}/${cycleDetails.progress_snapshot.total_issues}`
       : cycleDetails.total_issues === 0
-      ? "0 Issue"
-      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+        ? "0 Issue"
+        : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
 
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date);
 
@@ -404,7 +416,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                           to: "End date",
                         }}
                         required={cycleDetails.status !== "draft"}
-                        disabled={isArchived}
+                        disabled={!isEditingAllowed || isArchived}
                       />
                     )}
                   />
@@ -551,6 +563,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                                     }}
                                     totalIssues={cycleDetails.progress_snapshot.total_issues}
                                     isPeekView={Boolean(peekCycle)}
+                                    isCompleted={isCompleted}
+                                    filters={issueFilters}
+                                    handleFiltersUpdate={handleFiltersUpdate}
                                   />
                                 </div>
                               )}
@@ -570,6 +585,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                                   }}
                                   totalIssues={cycleDetails.total_issues}
                                   isPeekView={Boolean(peekCycle)}
+                                  isCompleted={isCompleted}
+                                  filters={issueFilters}
+                                  handleFiltersUpdate={handleFiltersUpdate}
                                 />
                               </div>
                             )}

web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx

@@ -33,7 +33,7 @@ const CollaboratorListItem: React.FC<CollaboratorListItemProps> = observer((prop
       <div className="flex justify-center">
         <Avatar
           src={userDetails.avatar}
-          name={isCurrentUser ? "You" : userDetails.display_name}
+          name={userDetails.display_name}
           size={69}
           className="!text-3xl !font-medium"
           showTooltip={false}